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:

&lt;div id="wrapper"&gt;
    &lt;div id="quiz"&gt;
         &lt;h1&gt;How well do you know Matt&lt;/h1&gt;
    &lt;/div&gt;
    &lt;input type='submit' id='myBtn' value='' /&gt;
&lt;/div&gt;


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 &lt; allQuestions.length) {
        submitBtn.value = "Next";
        quizForm.innerHTML = "&lt;h1&gt;" + question + "&lt;/h1&gt;";
        for (var i = 0; i &lt; choices.length; i++) {
            quizForm.innerHTML += "&lt;label&gt;&lt;input type='radio' name='radioOption' value='" + choices[i] + "'/&gt;" + choices[i] + "&lt;/label&gt;";
        }
        if (currentQuestion == allQuestions.length - 1) {
            submitBtn.value = "Submit";
        } else if (currentQuestion &gt; allQuestions.length - 1) {
            calcQuiz();
        }
    }
}

function lookForChecked() {

    if (radioButtons.length &gt; 1) {

            var checked = false;
        for (var i = 0; i &lt; radioButtons.length; i++) {
            var selection = radioButtons[i];

             if (selection.checked) {

                var index = [i];
                if (i === allQuestions[currentQuestion].correctAnswer) {
                    tally++;

                }
                if (currentQuestion &lt; allQuestions.length -1) {
                    currentQuestion++;

                } else {
                    console.log('you have ended the quiz');
                    calcQuiz();
                   return false;
                }
                break;
            }
        }
        if ($('input[name="radioOption"]:checked').length &lt; 1) {
            alert('Please Make a Selection');
        }
    }
        askQuestion();
}

function calcQuiz() {
    quizForm.innerHTML = "&lt;h1&gt;You have finished the quiz&lt;/h1&gt;&lt;p class='total'&gt;You scored a total of " + tally + " out of " + allQuestions.length + "&lt;/h1&gt;";
    submitBtn.remove();
}
window.onload = firstFunc();
submitBtn.addEventListener('click', lookForChecked);
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.