Quizzing

A simple JS quiz app

by jabbrass

HTML

<title>Quizzing</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body>
     <h1>Quizzing:</h1>

     <h2>Question:</h2>

    <div id="a0">Answer 1</div>
    <div id="a1">Answer 2</div>
    <div id="a2">Answer 3</div>
    <div id="a3">Answer 4</div>
    <p></p>
    <div id="button">
        <div id="text">Next</div>
    </div>
    <!-- Load jQuery from googleCDN and quizzing.js after the webpage has loaded <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery-2.0.2.js"></script>
<script language="javascript" src="quizzing.js"></script>-->
</body>

CSS

/* Stylesheet for Quizzing: A simple JS quiz app */
 body {
    background-color: #00aedb;
    color: #FFFFFF;
}
h1, h2 {
    color: #FFFFFF;
}
#button {
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    background-color: #8ec127;
    width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

JavaScript

/**
 * Quizzing: A Simple JS Quiz App
 * Date: 7/3/13
 * Time: 6:09 AM
 */
var allQuestions = [{
        question: "What is the capital of Florida?",
        choices: ["Miami", "Orlando", "Tallahassee", "Cape Canaveral"],
        answer: 3}
    ,{
        question: "Where do the Cowboys play football?",
        choices: ["Houston", "Dallas", "Galveston", "The Pan-handle"],
        answer: 2}
    ,{
        question: "Where was George Washington before he crossed the Delaware?",
        choices: ["Trenton, NJ", "Philadelphia, PA", "Galveston, TX", "Valley Forge, PA"],
        answer: 1}
    ,{
        question: "Where do the Packers play football?",
        choices: ["Madison", "Milwaukee", "Seattle", "Green Bay"],
        answer: 4}
    ,{
        question: "What state is closest to the Pacific ocean?",
        choices: ["Oregon", "Nevada", "Idaho", "Arizona"],
        answer: 1}
    ,{
        question: "Where do the Texans play football?",
        choices: ["Houston", "Dallas", "Galveston", "The Pan-handle"],
        answer: 1}
    ,{
        question: "Where do the Eagles play football?",
        choices: ["Houston", "Dallas", "Philidelphia", "California"],
        answer: 3}
    ,{
        question: "Where do the Seahawks play football?",
        choices: ["Seattle", "Dallas", "Galveston", "California"],
        answer: 1}
];

$(document).ready(function() {
    var numberCorrect = 0;
    var questionNumber = 0;
    var displayQA = function () {
        if (questionNumber === allQuestions.length) {
            $("h2").text("You finished the quiz! You scored " + numberCorrect + " points!");
            for (i = 0; i < 4; i++) { $("#a" + i).remove(); }
            $("")
        } else {
            $("h2").text(allQuestions[questionNumber].question);
            for (i = 0; i < 4; i++) {
                $("#a" + i).html("<input type='radio' name='answer' value='" + i + "'>" + allQuestions[questionNumber].choices[i] + "</input>");
            }
        }
    }
  ...