trivia

by imehesz

HTML

<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<body ng:app>
    <div class="wrapper">
        <div ng-controller="MovieController">
            <div class="info-bar">
                Lives: <span class="red">{{lives}}</span> Points: {{points}}
            </div>
            <div class="caption-wrapper">
                <div class="caption">{{quote.quote}}</div>
            </div>        
            <div class="device-display">
                <div class="movies-wrapper">
                        <div class="card" ng-repeat="movie in movies_in_trivia" ng-click="sendAnswer();">
                            <div class="movie" title="{{movie.title}}" data-movie-id="{{movie.id}}">
                                <img src="{{movie.image}}" />
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

html{
    height: 100%;
    font-size: 12px;
}

.red{
    color: #f00;
}

.info-bar{
    background-color: #000;
    color: #fff;
    position: absolute;
    top: 0;
    width: 100%;
    padding: 2px;
    opacity: 0.5;
    text-align: center;
}

.info-bar:hover{
    opacity: 1;
}

body{
    height: 100%;
    padding: 0;
    margin: 0;
}

.wrapper{
    height: 100%;            
    overflow: hidden;
    position: relative;
}

.card{
    float:left;
    width: 33.3%;
    height: 100%;
    background-color: #000;
    text-align: center;
    padding-top: 5%;
}

.card img{
    width: 95%;
    height: 90%;    
}

.caption-wrapper{
    width: 100%;
    text-align:center;
    position: absolute;
    bottom: 10%;
}

.caption{
    padding: 5px 10px;
    bottom: 10%;
    background-color: #000;
    color: yellow;
    width: 90%;
    margin:0 auto;
    opacity: 0.9;
    text-transform: uppercase;
    font-family: Arial;
    font-weight: bolder;
}

@media only screen and (max-width: 4000px) {
    .caption, .info-bar{
        font-size: 175%;
    }
}


@media only screen and (max-width: 720px) {
    .caption, .info-bar{
        font-size: 150%;
    }
}

@media only screen and (max-width: 480px) {
    .caption, .info-bar{
        font-size: 120%;
    }
}

JavaScript

var myApp = angular.module('myApp', []);

// meh?

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function MovieController($scope){
    $scope.timer = 0;
    $scope.quote = '';
    $scope.points = 0;
    $scope.lives_count = 10;
    $scope.lives = '';
    
    $scope.movies = [
        {
            id: 1,
            title: "The Matrix",
            year: 1999,
            image: "http://static.trustedreviews.com/94%7cfed2d2%7cd36a_4931-MatrixBox.jpg",
            quotes:[
                {id: "11",quote: "I know why you're here, Neo. I know what you've been doing..."},
                {id: "12",quote: "A black cat went past us, and then another that looked just like it."}
            ]
        },
        {
            id: 2,
            title: "The Big Lebowski",
            year: 1998,
            image: "http://4.bp.blogspot.com/_Q_2sH5mAXw8/TIml4mKe_0I/AAAAAAAABp0/TNVn54jufPo/s1600/the_big_lebowski_6.jpg",
            quotes:[
                {id: "21",quote: "Oh, the usual. I bowl. Drive around. The occasional acid flashback."},
                {id: "22",quote: "That's a great plan, Walter."}
            ]            
        },
        {
            id: 3,
            title: "Kill Bill",
            year: 2003,
            image: "http://www.trespassmag.com/wp-content/uploads/2011/04/kill_bill.jpeg",
            quotes:[
                {id: "31",quote: "Do you find me sadistic?"},
                {id: "32",quote: "Except you, Sofie! You stay right where you are!"}
            ]            
        },
        {
            id: 4,
            title: "Interview with the Vampire",
            year: 1994,
            image: "http://timebandit.blog.com/files/2011/05/Interview-With-A-Vampire.jpg",
            quotes:[
                {id: "41",quote: "1791 was the year it happened. I was 24, younger than you are now."},
                {id: "42",quote: "Aux contraire mon cher, he could eat the whole colony."}
            ]            
 ...