Почему моя кнопка не перейдет к следующему вопросу?

Question

Я новый разработчик, и это мой первый вопрос. Я пытаюсь сделать тест с множественным выбором для назначения. Я застрял на том, чтобы заставить кнопку NEXT перейти к следующему вопросу. Я думаю, что остальная часть файла JS верна ...

Сейчас clickNext ничего не делает, поэтому мне нужно сделать следующую проверку, если время истекло (строка 39) ответил ли пользователь на вопрос в отведенное время (строка 40), если нет, попробуйте еще раз, и часы начнут сначала (строка 60-70), если да, затем сохраните выбранный ответ - я думаю, что эта часть сбивает меня с толку иЯ не уверен, что здесь использовать, чтобы проверить, является ли выбранный ответ правильным (строка 50-57), если ответ правильный, перейти к следующему вопросу (строка 52-53), если ответ неправильный, предупредить «Пожалуйста, попробуйте еще раз»(строка 55-56)

Я попытался вернуть ответ, addEventListener, поместив функцию checkAnswer в функцию clickNext

        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);

Прямо сейчас программане переходит к следующему вопросу, а только к первому вопросу.

Answer 1

Проходя через ваши ручки, я обнаружил следующие проблемы с вашим кодом:

1. Неправильное использование операторов возврата. Вы добавили оператор return во вторую строку вашей функции, чтобы остальная часть была полностью проигнорирована.

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();
            }

onclick не добавлено к вашей кнопке «Далее», ни addEventListener в вашем скрипте не было. В результате нажатие кнопки «Далее» не оказало никакого влияния на ваше приложение.

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

Проблемы со сферой. В JavaScript, когда вы определяете переменную в области видимости, эта переменная никогда не будет доступна вне этой же области видимости. Значение определения переменной внутри функции (как в вашем случае) не сделает ее доступной в другой совершенно отдельной функции (если вы не передадите ее в качестве параметра каким-либо образом). Я бы порекомендовал немного больше изучить области JavaScript, чтобы лучше понять, как он работает.

Все 3 проблемы были исправлены в новой ручке, которую я создал, чтобы вы могли взятьпосмотрите на: https://codepen.io/MMortaga/pen/PooNNYE?editors=1010 Однако вам может потребоваться немного больше поработать со своим таймером, поэтому посмотрите, сможете ли вы его исправить: P Найдите время, чтобы просмотреть все упомянутые мной изменения, и если у вас все еще есть какие-либо проблемыпросто прокомментируйте ниже, я был бы рад помочь.

Answer 2

Чтобы ответить на ваш первый вопрос

Я застрял при нажатии кнопки NEXT для перехода к следующему вопросу

Для этого вам нужно добавить прослушиватель события click к следующемуКнопка.

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

И следующая часть

Я думаю, что остальная часть файла JS является правильным.

Почти .. Вам нужносделайте несколько исправлений здесь и там.

Я внес некоторые изменения в ручку и доступен здесь.

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

Поскольку вы - ученик, я быпредлагаю не копировать. Даже кодовая ручка, которой я поделился, не завершена, но должна помочь вам двигаться дальше.