JavaScript分页中的测验

我正在用JS创建一个测验，每次只需显示一个问题。当我选择答案时，我会收到“正确”或“错误”的通知，然后它会自动转到下一个问题

var questions = [
    {
        question: "1. question 1 here",
        answers: [
            "1a here",
            "1c here",
            "1d here"
        ],
        correctanswer: "1b here"
    },
    {
        question: "2. question 2 here",
        answers: [
            "2a here",
            "2b here",
            "2c here",
            "2d here"
        ],
        correctanswer: "2a here"
    },
    {
        question: "3. question 3 here",
        answers: [
            "3a here",
            "3b here",
            "3c here",
            "3d here"
        ],
        correctanswer: "3d here"
    },    
]

function startQuiz() {
    var output =[];
    var answers;
    for (var i=0; i < questions.length; i++) {
        answers =[];    
        for(letter in questions[i].answers) {
            answers.push(
                '<label>'
                    + '<input type="radio" name="question' +i+'"value="'+letter+'">'
                    + letter + ': ' + questions[i].answers[letter] +
                '</label'
                // var userAns = document.getElementById("quiz")    
            // userAns.innerHTML = questions[i].question + "<br>" + questions[i].answers;
            );
        }
        output.push(
            '<div class="question">' + questions[i].question + '</div>'+
            'div class="answers">' + answers.join('') + '</div>'
        );
        // //if right or wrong
        // if (userAns === questions.correctanswer) {
        //     var grade = document.createElement("p");
        //     grade.textContent("Correct!");
        //     grade.className("grade");
        //     grade.setAttribute("grade-id");
        // } else {
        //     grade.textContent("Wrong!");
        //     timerRef - sec *10;
        // }
    }
    quizContainer.innerHTML = output.join('');
}

startButton.addEventListener('click', startTimer);
startButton.addEventListener('click', startQuiz);

var问题=[
{
问题：“1.这里是问题1”，
答复:[
“这里是1a”，
“这里是1c”，
“这里是1d”
],
正确答案：“这里是1b”
},
{
问题：“2.这里的问题2”，
答复:[
“这里是2a”，
“这里是2b”，
“这里是2c”，
“这里是2d”
],
正确答案：“这里是2a”
},
{
问题：“3.这里是问题3”，
答复:[
“这里是3a”，
“这里是3b”，
“这里是3c”，
“这里是3d”
],
正确答案：“这里是3d”
},    
]
函数startQuiz（）{
var输出=[]；
var答案；
对于（var i=0；i

我注释掉了一些行，因为我不知道如何让它们工作。 我试着用单选按钮来选择答案-问题应该只在选择“开始”时出现

---

您想要什么需要一点计划，我建议您将其分解为组件/脚本，以便可以轻松地对代码应用更改

我写了一个简单的演示来说明我的观点

var问题=[
{
问题：“1.这里是问题1”，
答复:[
“这里是1a”，
“这里是1b”，
“这里是1c”，
“这里是1d”
],
正确答案：“这里是1b”
},
{
问题：“2.这里的问题2”，
答复:[
“这里是2a”，
“这里是2b”，
“这里是2c”，
“这里是2d”
],
正确答案：“这里是2a”
},
{
问题：“3.这里是问题3”，
答复:[
“这里是3a”，
“这里是3b”，
“这里是3c”，
“这里是3d”
],
正确答案：“这里是3d”
},    
];
功能计时器（最大分钟数）{
var root=null；
var显示=null；
变量时间={
分钟数：最大分钟数，
秒：0
};
var更新率=1000；
var-jobId=null；
var timeoutCallback=null；
函数formatTime（）{
var min=时间。分钟；
var sec=时间秒；
如果（第10节）{
秒='0'+秒；
}
返回最小值+'：'+秒；
}
函数init（）{
root=document.createElement（'div'）；
root.classList.add（'quick\uu timer'）；
display=document.createElement（'span'）；
display.classList.add（'quick\u timer\u display'）；
display.innerText=formatTime（）；
root.appendChild（显示）
}
函数更新（）{
time.seconds=time.seconds-1；
如果（时间秒<0）{
time.minutes=time.minutes-1；
time.seconds=59；
}
display.innerText=formatTime（）；
如果（time.minutes==0&&time.seconds==0）{
停止（）；
timeoutCallback（）；
}
}
功能挂载（节点）{
追加子节点（根）；
}
函数onTimeout（回调）{
timeoutCallback=回调；
}
函数unmount（）{
停止（）；
root.remove（）；
}
函数start（）{
jobId=window.setInterval（更新，更新率）；
}
函数停止（）{
如果（作业ID！==null）{
窗口清除间隔（jobId）；
jobId=null；
}
}
函数getCurrentTime（）{
返回display.innerText；
}
init（）；
返回{
坐骑：坐骑，
卸载：卸载，
开始：开始，
停:停,，
onTimeout:onTimeout，
getCurrentTime:getCurrentTime
}
}
功能问题（数据）{
var root=null；
var选项=null；
var验证程序=null；
函数init（）{
root=document.createElement（'div'）；
选项=document.createElement（'ul'）；
var question=document.createElement（'p'）；
question.innerText=data.question；
data.answers.forEach（（opt）=>{
var option=document.createElement（'li'）；
option.dataset.value=opt；
option.innerText=opt；
选项。追加子项（选项）；
});
root.classList.add（'quick\u question'）；
options.classList.add（'quick\u question\u options'）；
question.classList.add（'quick\u question\u title'）；
root.appendChild（问题）；
root.appendChild（选项）；
}
函数createValidator（回调）{
返回功能（ev）{
回答的var=ev.target.dataset.value==data.correctanswer；
如果（已回答）{
ev.target.classList.add（'correct'）；
}否则{
ev.target.classList.add（'不正确'）；
}
options.classList.add（'readonly'）；
回拨({
问题:数据.问题,，
正确：回答
});
}
}
函数onAnswer（回调）{
validator=createValidator（回调）；
选项。addEventListener（'单击'，验证程序）；
}
功能挂载（节点）{
追加子节点（根）；
}
函数unmount（）{
选项。removeEventListener（'单击'，验证程序）；
root.remove（）；
}
init（）；
返回{
坐骑：坐骑，
卸载：卸载，
onAnswer:onAnswer
}
}
功能测验（数据、装载节点、onFinish、nextQuesti