首页 > 解决方案 > 如何从一个项目一次通过一个数组移动?(没有设置间隔)

问题描述

我正在做一个测验。在用户通过单击多项选择答案中的按钮回答问题后,我如何才能让用户移动到同一容器 div 中的下一个问题?

function runQuizQuestions() {
            // shuffling questions
            let theQuestions = shuffle(myQuestions);
            console.log('shuffled Questions');

            for (let i = 0; i < myQuestions.length; i++) {
                // fill in the questions HTML
                document.querySelector('#quizQ').innerText = myQuestions[i].question;

                document.querySelector('#a1').innerText = myQuestions[i].answer1;
                document.querySelector('#a2').innerText = myQuestions[i].answer2;
                document.querySelector('#a3').innerText = myQuestions[i].answer3;
                document.querySelector('#a4').innerText = myQuestions[i].answer4;
                // store correct answer
                rightAnswer = myQuestions[i].correct;


                // clicking inside the container
                let quizContainer = document.querySelector('#quiz');
                
                quizContainer.addEventListener("click", function (event) {
                    event.preventDefault;
                    let answerClick = event.target;
                    console.log(`you clicked on:`, answerClick);


                    if (answerClick.matches("button")) {
                        // store button's value
                        let answer = answerClick.innerText;
                        // check answer
                        if (answer === rightAnswer) {
                            document.querySelector('#result').innerText = "Correct!";
                            document.querySelector('#result').classList.remove('d-none', 'alert-danger');
                            setTimeout(function () { document.querySelector('#result').classList.add('d-none', 'alert-danger'); }, 2000);
                            console.log('right answer');
                        } else {
                            document.querySelector('#result').innerText = "Wrong!";
                            document.querySelector('#result').classList.remove('d-none', 'alert-success');
                            setTimeout(function () { document.querySelector('#result').classList.add('d-none', 'alert-success'); }, 2000);
                            console.log('wrong answer');
                        }
                    }
                    // move on to next question.
                })
            }

标签: javascriptapi

解决方案


推荐阅读