Basic JavaScript quiz app

I struggled my way through the first quiz and here are the results. Since I have some experience in jQuery I really wanted to use only vanilla JavaScript. I know the code is pretty choppy and there is most likely a lot of room for improvement.

How can I make this code more succinct? What are some better practices that i can implement?

Here is a jsfiddle.

HTML:

    
         How well do you know Matt
    
    

JavaScript:

```
var allQuestions = [
{
question: "What is Matt favorite color?",
choices: ["Blue", "Black", "Yellow", "Blank", "Clear" ],
correctAnswer: 4
},
{
question: "Who is Matt's Favorite fiction Author?",
choices: ["Brennan Manning", "JD Salinger", "Stephen King", "Jack Kerouac"],
correctAnswer: 3
},
{
question: "What is Matt's favorite food?",
choices: ["Pizza", "Wings", "Mexican", "Rally's"],
correctAnswer: 0
}
];

var submitBtn = document.getElementById('myBtn');
var currentQuestion = 0;
var tally = 0;

var quizForm = document.getElementById('quiz');
var question;
var choices;
var radioButtons = document.getElementsByName('radioOption');
var index = 0;

function firstFunc() {
if (currentQuestion === 0) {
submitBtn.value = "Start Quiz";
}
}

function askQuestion () {
choices = allQuestions[currentQuestion].choices;
question = allQuestions[currentQuestion].question;
if (currentQuestion " + question + "";
for (var i = 0; i " + choices[i] + "";
}
if (currentQuestion == allQuestions.length - 1) {
submitBtn.value = "Submit";
} else if (currentQuestion > allQuestions.length - 1) {
calcQuiz();
}
}
}

function lookForChecked() {

if (radioButtons.length > 1) {

var checked = false;
for (var i = 0; i You have finished the quizYou scored a total of " + tally + " out of " + allQuestions.length + "";
submitBtn.remove();
}
window.onload = firstFunc();
submitBtn.addEventListener('click', lo

Design

You could remake this using Object-Oriented-Programming. For example, you could make a Question object, like this.

function Question(description, choices, correctChoiceIndex) {
    this.description = description;
    this.choices = choices;
    this.correctChoiceIndex = correctChoiceIndex;
}

You could then extend it with some methods, like askQuestion. For example, you could do something like this (Using prompt and alert because I'm on mobile.)

Question.prototype.askQuestion = function() {
    return prompt("Choices:\n" + this.choices.join("\n"));
}

You could then supply an additional method, checkAnswer, to see if the user got the answer correct.

Question.prototype.checkAnswer = function() {
    if(parseInt(this.askQuestion(), 10) === this.correctChoiceIndex) {
        alert("You got the question right!");
    }
    else {
        alert("Sorry, wrong answer.");
    }
}

Nitpicks

Some of your naming is not great. For example, firstFunc is an awful name for a function. It doesn't describe the purpose of the function in any way.

Preferably, names for variables/functions/classes should exhibit the following characteristics:

• Describe the variable/function/class in detail.

• Not have unnecessary abbreviations.

• Not be too short.

• Not be too long. (Unless you're programming in objective-c.)

Most of your variable names exhibit these characteristics, I just saw a few, like submitBtn that could be expanded to something like submitButton.

Moving on, I saw this line I your code:

var index = [i];

It isn't used anywhere in it's scope, and even if it was used, it would serve no purpose at this point.

Finally, when using the increment, ++, and decrement, -- operators, remember the differences between how they're placed.

StackExchange Code Review Q#98678, answer score: 3