JavaScript Quiz App

Please review the code quality of this JavaScript Quiz App.

Code improvement tips and simplify are welcome.

Demo - http://jsbin.com/eRiSUhIB/1/

```
var quiz = [{
"question": "What is the full form of IP?",
"choices": ["Internet Provider", "Internet Port", "Internet Protocol"],
"correct": "Internet Protocol"
}, {
"question": "Who is the founder of Microsoft?",
"choices": ["Bill Gates", "Steve Jobs", "Steve Wozniak"],
"correct": "Bill Gates"
}, {
"question": "1 byte = ?",
"choices": ["8 bits", "64 bits", "1024 bits"],
"correct": "8 bits"
}, {
"question": "The C programming language was developed by?",
"choices": ["Brendan Eich", "Dennis Ritchie", "Guido van Rossum"],
"correct": "Dennis Ritchie"
}, {
"question": "What does CC mean in emails?",
"choices": ["Carbon Copy", "Creative Commons", "other"],
"correct": "Carbon Copy"
}];

// define elements
var content = $("content"),
questionContainer = $("question"),
choicesContainer = $("choices"),
scoreContainer = $("score"),
submitBtn = $("submit");

// init vars
var currentQuestion = 0,
score = 0,
askingQuestion = true;

function $(id) { // shortcut for document.getElementById
return document.getElementById(id);
}

function askQuestion() {
var choices = quiz[currentQuestion].choices,
choicesHtml = "";

// loop through choices, and create radio buttons
for (var i = 0; i " +
" " + choices[i] + "";
}

// load the question
questionContainer.textContent = "Q" + (currentQuestion + 1) + ". " +
quiz[currentQuestion].question;

// load the choices
choicesContainer.innerHTML = choicesHtml;

// setup for the first time
if (currentQuestion === 0) {
scoreContainer.textContent = "Score: 0 right answers out of " +
quiz.length + " possible.";
submitBtn.textContent = "Submit Answer";
}
}

function checkAnswer() {
// are we asking a question, or proceeding to next question?
if (askingQuestion) {
submitBtn.textContent = "Next Question";

Quite nice!

A general thought is that you could always store the correct answer first, and then show the possible answers in a random manner to make your code more DRY.

Furthermore:

• Since you do not use the id anywhere, you can leave this out: "' id='choice" + (i + 1) +

• You could put scoreContainer.textContent = "Score: " + score + " right answers out of " +



quiz.length + " possible."; into it's own function which you could call from askQuestion() so that you do not need to repeat this with scoreContainer.textContent = "Score: 0 right answers out of " +
quiz.length + " possible.";

• Caching the elements is good

• JSHint cannot complain about anything

• checkAnswer has too much UI state management, it ought to just check the answer.

• complited -> completed

• Something to think about, finalResults could have read the HTML from a hidden DIV and simply filled in the missing parts. Now you are maintaining HTML in JavaScript which is rarely a good idea.

All in all, I like this code.

StackExchange Code Review Q#40032, answer score: 6