I am going through the course JavaScript course on javascriptissexy.

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?

Also, the alert for the checkboxes, I could not for the life of me figure out how to write that piece in plain JS. The closest I got to writing the unchecked radio button alert script would give an alert for every single unchecked radio button. How could I have written that piece in plain js?

Here is a jsfiddle

HTML:

<div id="wrapper">
    <div id="quiz">
         <h1>How well do you know Matt</h1>
    </div>
    <input type='submit' id='myBtn' value='' />
</div>

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 < allQuestions.length) {
        submitBtn.value = "Next";
        quizForm.innerHTML = "<h1>" + question + "</h1>";
        for (var i = 0; i < choices.length; i++) {
            quizForm.innerHTML += "<label><input type='radio' name='radioOption' value='" + choices[i] + "'/>" + choices[i] + "</label>";
        }
        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 < radioButtons.length; i++) {
            var selection = radioButtons[i];

             if (selection.checked) {

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

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

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

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