Simple JavaScript quiz application with radio buttons

Question

I've created a simple JavaScript application, which also happens to be my first-ever piece of code in any programming language.It took me two days to get the core correct and another two days for styling and the progress bar.

I'll be adding subsequent features to this quiz, as I continue to learn more and more about the language.

var allQuestions = [{
    question: "Before Mt. Everest was discovered, whaich mountain was considered to be the highest mountain in the world?",
    choices: ["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],
    correctAnswer: 1
  },

  {
    question: "Does England have a 4th of July?",
    choices: ["Yes", "No", "I don't know"],
    correctAnswer: 0
  },

  {
    question: "What is Rupert the bear's middle name?",
    choices: ["Bear", "He doesn't have one!", "The", "Rupert"],
    correctAnswer: 2
  },

  {
    question: " What can you never eat for breakfast? ",
    choices: ["Dinner", "Something sugary", "Lunch", "Supper"],
    correctAnswer: 0
  },

  {
    question: "If there are three apples and you took two away, how many do you have?",
    choices: ["One", "Two", "None"],
    correctAnswer: 1
  },

  {
    question: "Spell 'Silk' out loud, 3 times in a row. What do cows drink?",
    choices: ["Milk", "Water", "Juice", "Cows can't drink"],
    correctAnswer: 1
  },

  {
    question: "Which is heavier, 100 pounds of rocks or 100 pounds of gold? ",
    choices: ["100 pounds of rocks", "100 pounds of rocks", "They weigh the same"],
    correctAnswer: 2
  },

  {
    question: "Can you spell 80 in two letters?",
    choices: ["AI-TY", "It's not possible", "EIGH-TY", "A-T"],
    correctAnswer: 3
  },

  {
    question: "What question must always be answered ''Yes''?",
    choices: ["What does Y-E-S spell?", "Will everyone die someday?", "Does everyone have a biological mother?", "Are you a human?"],
    correctAnswer: 0
  },

  {
    question: "How many sides does a circle have?",
    choices: ["The back", "None. It's a circle", "Two", "Four"],
    correctAnswer: 2
  },

  {
    question: "What has a tail but no body?",
    choices: ["A human", "A coin", "A cloud"],
    correctAnswer: 1
  },

  {
    question: "What word in the English language is always spelled incorrectly?",
    choices: ["It's possible to spell anything right as long as you learn it", "Shakespeare", "Onomatopoeia", "Incorrectly"],
    correctAnswer: 3
  },

  {
    question: "When do you stop at green and go at red?",
    choices: ["Watermelon!", "Traffic light!", "Garden"],
    correctAnswer: 0
  },

  {
    question: "What rotates but still remains in the same place?",
    choices: ["Bottle (spin the bottle game)", "Clock", "Stairs"],
    correctAnswer: 2
  },

  {
    question: "How can you lift an elephant with one hand?",
    choices: ["Truck", "Use both hands!", "Use a lever", "There is no such thing"],
    correctAnswer: 3
  }
];
var currentquestion = 0;
var correctAnswers = 0;

function setupOptions() {
  $('#question').html(parseInt(currentquestion) + 1 + ". " + allQuestions[currentquestion].question);
  var options = allQuestions[currentquestion].choices;
  var formHtml = '';
  for (var i = 0; i < options.length; i++) {
    formHtml += '<div><input type="radio" name="option" value="' + i + '" id="option' + i + '"><label for="option' + i + '">' +
      allQuestions[currentquestion].choices[i] + '</label></div><br/>';
  }
  $('#form').html(formHtml);
  $("#option0").prop('checked', true);
};

function checkAns() {
  if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
    correctAnswers++;
  };
};

$(document).ready(function() {

  $(".jumbotron").hide();
  $('#start').click(function() {
    $(".jumbotron").fadeIn();
    $(this).hide();
  });

  $(function() {
    $("#progressbar").progressbar({
      max: allQuestions.length - 1,
      value: 0
    });
  });

  setupOptions();

  $("#next").click(function() {
    event.preventDefault();
    checkAns();
    currentquestion++;
    $(function() {
      $("#progressbar").progressbar({
        value: currentquestion
      });
    });
    if (currentquestion < allQuestions.length) {
      setupOptions();
      if (currentquestion == allQuestions.length - 1) {
        $('#next').html("Submit");
        $('#next').click(function() {
          $(".jumbotron").hide();
          $("#result").html("You correctly answered " + correctAnswers + " out of " + currentquestion + " questions! ").hide();
          $("#result").fadeIn(1500);
        });

      };

    };
  });
});

html, body, div, span, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
/*end of default style resetting*/

h1 {
  font-size: 20vw;
  font-family: 'Chonburi', cursive;
}

.ui-widget-header {
    background-image: none !important;
    background-color: #2ECC71 !important; 
}

label{
  display: inline;
}  

h3, #next {
  text-align: center;
  display: inline-block;
  border-radius: 10%;
}

#result {
  font-family: 'Press Start 2P', cursive !important;
  font-weight: bold;
  font-size: 1.5em;
  color: #036;
}

input[name="option"] {
  float:left;
  
}

#form div{
  margin:auto;
  max-width: 205px;
}

#progressbar {
  margin: auto;
  margin-top: 20px;
  float: none; 
  width: 50%;
 }

#container {
  text-align: center;
}

input, select {
    vertical-align:middle;
}

.button {
    display: inline-block;
    padding: 1em;
    background-color: #79BD9A;
    text-decoration: none !important; 
    color: white !important;
} 
body{
  text-align: center;
}

.progress-bar {
  float: left;
  width: 0;
  /*height: 100%;*/
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #337ab7;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;
       -o-transition: width .6s ease;
          transition: width .6s ease;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<h1>Quiz</h1>
<br/>
<br/>
<a href="#" id="start" class="btn btn-primary btn-lg">Let's Begin</a>
<br/>
<div class="well jumbotron">
  <h3 id="question"></h3>
  <br/><br/>
  <form id="form">

  </form>
  <br/>
  <a href="#" id="next" class="button">Next</a><br/>
  <div id="progressbar" class="progress-bar progress-bar-striped"></div>
</div>
<div id="result"></div>

To have a better a look at the final product checkout: Codepen.

I would like to know your views on my code, and ways in which I can make it better.

Answer 1

Object to class

Each object inside your allQuestions array follows the exact same "format":

{
    question: 
    choices: 
    correctAnswer: 
}

To make this simpler, we can extract a "class" from this so we can more easily store the questions. That might look like this:

function QuizQuesiton(question, choices, correctAnswer) {
    this.question = question;
    this.choices = choices;
    this.correctAnswer = correctAnswer;
}

Now, when creating a question, we can simply instantiate this class like this:

new QuizQuestion("question", ["choices", "choices"], #);

Then, if you want to create an array of these, you can do this:

[
    new QuizQuestion("question", ["choices", "choices"], #),
    new QuizQuestion("question", ["choices", "choices"], #),
    new QuizQuestion("question", ["choices", "choices"], #),
    ...
];

---

Simplification with variables

There are quite a few places where you could both simplify and speed up your code if you used variables to access repeated data.

For example, in:

$(document).ready(function() {

you could store

• $(".jumbotron");
• $("#next");
• $("#result");

Then, you wouldn't have to access the DOM as much.

Also, here:

allQuestions[currentquestion].choices[i] + '</label></div><br/>';

Why not use that choices variable that you spent so much time creating?

---

Please show your ID - er, class, I mean

Check here:

...'" id="option' + i + '">...

This is not the point of IDs. IDs in HTML are meant for specific, unique, and special elements. If you have to create a bunch of elements that should all have the same ID and to circumvent it you are just sticking a number to the end of the ID, the you're doing something wrong.

Here, you should instead be using a class "options". Then, you can get all the elements with this class using

$(".options");

Then, you can use an index to target specific elements with this class.