Quizzing2

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="backbutton">
          <div id="backtext">Back</div>
      </div>
      <div id="nextbutton">
          <div id="nexttext">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;
}
h2 {
    color: #FFFFFF;
    display: none;
}
#a0, #a1, #a2, #a3 {
    display: none;
}
#backbutton {
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    background-color: #8ec127;
    width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    float: left;
    margin-right: 5px;
    display: none;
}
#nextbutton {
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    background-color: #8ec127;
    width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    position: relative;
    float: left;
}

JavaScript

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

$(document).ready(function() {
    var numberCorrect = 0;
    var questionNumber = 0;
    var userAnswer;
    var displayQA = function () {
        if (questionNumber > 0) {
            $("#backbutton").show();
        }
        if (questionNumber === allQuestions.length) {
            $("h2").text("You finished the quiz! You scored " + numberCorrect + " points!");
            for (var i = 0; i < 4; i++) { $("#a" +...