TypeTrivia

by Kenneth Luplau-Brøgger

HTML

<h1>TypeTrivia</h1>
<p>All you know about the picture, as fast as you can</p>
<div class="progress">
    <div class="bar"></div>
</div>  
<table border="0" cellpadding="0" cellspacing="0" class="imageCon">
    <tr>
        <td valign="middle">
            <img src="" />
        </td>
    </tr>
</table>
<form>
    <input class="userInput" placeholder="Guess the image" />
</form>
<div class="score">
    <strong></strong>
</div>

CSS

body {
    text-align: center;
    font-family: arial, tahoma, verdana, sans;
}
.imageCon {
    width: 100%;
}
.imageCon td {
    vertical-align: middle;
    text-align: center;
    height: 300px;
}
.imageCon img {
    max-height: 200px;
    max-width: 400px;
}
.score {
    font-size: 11px;
    margin-top: 30px;
}
.score strong {
    font-weight: bold;
}
h1 {
    font-size: 20px;
    margin-top: 20px;
    font-weight: bold;
}
p {
    color: grey;
    font-size: 13px;
    margin-bottom: 20px;
}
.progress {
    background: rgba(0,0,0,0.05);
    width: 300px;
    margin: 10px auto;
    border-radius: 15px;
    padding: 4px;
}
.progress .bar {
    background: red;
    height: 5px;
    width: 0%;
    box-shadow: 0 0 15px rgba(255,0,0,0.9);
    border-radius: 15px;
}

JavaScript

window.getQuestionsResponse = [
    {
        id: 1,
        image: "http://www.auto123.com/media/videos/specs/2009/audi/en/a4_avant.jpg",
        answer: {
            "family car": 100,               
            "black": 100,
            "car": 100,
            "Audi": 200,
            "stationcar": 300,
            "A4": 400,
            "Avant": 800
        }
    },
    {
        id: 2,
        image: "http://www.mobilterminalen.dk/billeder/iphone-4.jpg",
        answer: {
            "black": 100,
            "mobile": 100,
            "cell": 100,
            "cellphone": 100,
            "cellular": 100,
            "smartphone": 100,
            "Apple": 200,
            "iPhone": 400,
            "4": 600,
            "iOS5": 800,
            "iOS 5": 800
        }
    },
    {
        id: 3,
        image: "http://upload.wikimedia.org/wikipedia/en/thumb/f/f4/The_Scream.jpg/220px-The_Scream.jpg",
        answer: {
            "painting": 100,
            "art": 100,
            "composition": 100,
            "canvas": 100,
            "oil painting": 100,
            "The Scream": 300,
            "Edvard": 400,
            "Munch": 400,
            "pastel": 500,
            "Norway": 600,
            "Oslo": 700,
            "1895": 1200
        }
    },
    {
        id: 4,
        image: "http://www.simpsoncrazy.com/content/pictures/maggie/MaggieSimpson1.gif",
        answer: {
            "cartoon": 100,
            "drawing": 100,
            "baby": 100,
            "girl": 100,
            "Maggie": 400,
            "Simpson": 300,
            "Margaret": 600
        }
    }
    
];
    
window.typeTrivia = {};

$(document).ready(function() {
    typeTrivia.debug = false;
    
    typeTrivia.currentLevel = 0;
    typeTrivia.currentQuestion; 
    
    typeTrivia.userScore = 0;
    
    $(".progress .bar").animate({
        width: "100%"
    }, {
        easing: "linear",duration:25000, complete: function() {
            endGame();
        }
   ...