Why will my button not advance to the next question?

Question

I am a new developer and this is my first question. I am trying to make a multiple choice quiz for an assignment. I am stuck on making the NEXT button move to the next question. I think the rest of the JS file is correct...

Right now the clickNext doesn't do anything, so I need to do the following check if the time expired (line 39) did the user answer the question in the allotted time (line 40) if no, try again and the clock will start over (line 60-70) if yes, then store the answer selected - I think this part is tripping me up and I am not sure what to use here check if the selected answer is correct (line 50-57) if the answer is correct, move to the next question (line 52-53) if the answer is wrong, alert "Please try again" (line 55-56)

I have tried to return the answer, the addEventListener, putting the checkAnswer function in the clickNext function

        var indexQuestion = 0; // Current index of question we are on
        var timer = 0;  // A clock that goes up by 1 every second
        var timeLastSubmit = 0;  // the time we last submitted an answer
        var timeExpired = false;  // Did time expire for current question?

        // number of seconds to wait for each question
        var WAIT_TIME = 30;

        // all questions to be used on the website
        var QUESTIONS = [
            {
                "question":"Which city is the capital of Ontario?",
                "choices":["New York","Toronto","Berlin","Kuala Lumpur"],
                "answer":1
            },
            {
                "question":"Which city is the capital of Canada?",
                "choices":["New York","Toronto","Ottawa","Vancouver"],
                "answer":2
            },
            {
                "question":"Which continent does the south pole reside?",
                "choices":["Africa","Antarctica","Asia","Australia","Europe","North America","South America"],
                "answer":1
            },
        ];

        function loadApplication() {
            loadQuestion(indexQuestion);   // load the first question into the web page
            // update the timer every second and check if question has been answered yet
            setInterval(function(){
                timer++;
                checkExpirationTime();
            },1000);
        }

        function clickNext() {
            // make sure that the user has answered the question before the time has expired
            timeLastSubmit = timer;
            checkExpirationTime();
                // Get the answer from drop down
                var selectedIndexAnswer = getElementById('choices');
                return selectedIndexAnswer;
                // Get the anwer from the array
                var answer = QUESTIONS[indexQuestion].choices[i];
                checkAnswer();
            };


        function checkAnswer(){
            // Compare answer.  Only if correct, do you move onto next question -   if(answer == QUESTIONS[indexQuestion].answer)
            if(selectedIndexAnswer == answer) {
                nextQuestion();
            }
            else {
                alert('Please try again.');
            }
        }

        function checkExpirationTime() {
            // check the time, once the clock has reached 30 seconds do not move to the next quesiton
            if(timer - timeLastSubmit < WAIT_TIME && !timeExpired){
            document.getElementById("seconds").innerHTML = WAIT_TIME;
            }
            else{
                    timeExpired = true;
                    alert('Please try again.');
                    clearInterval(timeExpired);
                }
        }

        function nextQuestion() {
            // advance to the next question, until the there are no more questions
            if(indexQuestion<QUESTIONS.length-1)
            {
                indexQuestion++;
                loadQuestion(indexQuestion);
            }
        }


        function loadQuestion(indexQuestion){
            // grab the question
            document.getElementById("question").textContent = QUESTIONS[indexQuestion].question;
            // build the html string for select menu
            var choices = "";
            var i=0;
            //loop through the choices
            while(i<QUESTIONS[indexQuestion].choices.length){
            // create a string of <option>answer</option><option>answer</option><option>answer</option>...  and load it into the choices variable
                choices += "<option>" + QUESTIONS[indexQuestion].choices[i] +"</option>";
                i++;
            }
            document.getElementById("choices").innerHTML = choices;
        }

        // When the DOM is ready, run the function loadApplication();
        document.addEventListener("DOMContentLoaded",loadApplication);

Right now the program does not advance to the next question, but it just stays on the first question.

Answer 1

To answer your first question

I am stuck on making the NEXT button move to the next question

For this you need to add click event listener to next button.

document.getElementById("btnNext").addEventListener("click",clickNext)

And the next part

I think the rest of the JS file is correct.

Almost.. You need to make a few corrections here and there.

I made some edits to the pen and is available here.

https://codepen.io/nithinthampi/pen/Yzzqqae

As, you are a learner, I would suggest not to copy it. Even the codepen I shared is not complete, but should help you to move on.

Answer 2

Going through your pens, here are the following issues I found with your code:

1. Misuse of return statements. You added a return statement in the second line of your function causing the rest of it to be completely ignored.

function clickNext() {
            // make sure that the user has answered the question before the time has expired
            timeLastSubmit = timer;
            checkExpirationTime();
                // Get the answer from drop down
                var selectedIndexAnswer = getElementById('choices');
     Here -->   return selectedIndexAnswer;
                // Get the anwer from the array
                var answer = QUESTIONS[indexQuestion].choices[i];
                checkAnswer();
            }

2. onclick not added to your "Next" button, neither a addEventListener in your script was. As a result, clicking the "Next" button had no effect on your app, at all.

<button id="btnNext">Next</button>

3. Scoping problems. In JavaScript, when you define a variable within a scope, that variable can never be accessed from outside that very scope. Meaning defining a variable inside a function (like in your case) will not make it available in another completely separate function (unless you pass it as a parameter in some way). I'd recommend researching a bit more about JavaScript scopes to get a better of idea of how it works.

All 3 issues have been fixed in a new pen I've created for you to take a look at: https://codepen.io/MMortaga/pen/PooNNYE?editors=1010 However you might need to play a bit more with your timer, so see if you can fix it :P Take the time to review all the changes I've mentioned and if you still face any issues just comment below, I'd be glad to help.