jQuery based quiz

A demo quiz app

by Shaunak Deshpande

HTML

<script src="https://fonts.googleapis.com/css?family=Fjalla+One"></script>

<section class="content container-fluid" id="quiz">
  <button class="btn btn-primary" id="next">Next</button>
  <button class="btn btn-info" id="prev">Prev</button>
  <button class="btn btn-default" id="start">Start Over</button>
</section>

CSS

@charset "UTF-8";
/* CSS Document */

body {
  font-family: 'Fjalla One', Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  background: grey;
}

.content {
  background-color: #eee;
  width: 85%;
  max-width: 800px;
  min-height: 170px;
  box-shadow: 5px 5px 9px #333;
  border-radius: 5px;
}

#question {  
  margin-left: 10px;
}

.btn {
  margin-right: 3px;
}

#quiz {
  display: none;
  margin-top: 50px;
  font-size: x-large;
}

ul {
  list-style-type: none;
  padding: 0;
  margin-bottom: 10px;
  font-size: smaller;
}

input[type="radio"] {
  margin-right: 15px;
}

button {
  position: relative;
  float: right;
  margin-left: 5px;
  margin-top: 15px;
}

#prev {
  display: none;
}

#start {
  display: none;
  width: 90px;
}

#warning {
  color: #800000;
  font-weight: bold;
  margin-top: 25px;
}

JavaScript

$(document).ready(function() {
  "use strict";

  var questions = [{
    question: "What is defined in physics as 'a nuclear reaction in which nuclei combine to form more massive nuclei'?",
    choices: ['fission', 'fusion', 'farking', 'fracking', 'freaking'],
    correctAnswer: 1
  }, {
    question: "What is the capital of Australia?",
    choices: ["Melbourne", "Sydney", "Canberra", "Queensland", "Christchurch"],
    correctAnswer: 2
  }, {
    question: "Who is the prime minister of the U.K.?",
    choices: ['Tony Blair', 'David Cameron', 'Nicolas Sarkozy', 'Gordon Brown', 'Sir John Major'],
    correctAnswer: 1
  }, {
    question: "What is the first perfect number?",
    choices: [38, 6, 0, 256, 28],
    correctAnswer: 1
  }, {
    question: "What colors are on the flag of Norway?",
    choices: ["red and blue", "red and white", "red, white, and silver", "red, white, and blue", "blue and gold"],
    correctAnswer: 3
  }, {
    question: "When did the Soviet Union collapse?",
    choices: ["14 February 1989", "1 January 1988", "31 October 1993", "26 April 1986", "26 December 1991"],
    correctAnswer: 4
  }, {
    question: "What is the currency of Switzerland?",
    choices: ["franc", "Euro", "rupee", "won", "dollar"],
    correctAnswer: 0
  }, {
    question: "What is the square root of 256?",
    choices: [24, 25, 30, 26, 22],
    correctAnswer: 0
  }, {
    question: "What are the three main types of rocks?",
    choices: ['igneous, volcanic, quartz', 'sedimentary, igneous, metamorphic', 'feldspar, metamorphic, sedimentary', 'gargantuan, feldspar, quartz', 'None of the above'],
    correctAnswer: 1
  }, {
    question: "What movie did Leonardo DiCaprio win a BAFTA Film Award for?",
    choices: ['Inception', "What's Eating Gilbert Grape", 'The Revenant', 'The Wolf of Wall Street', 'He never got one.'],
    correctAnswer: 2
  }];

  var questionCounter = 0; //Tracks question number
  var selections = []; //Array containing user choices
  var quiz =...