const quizForm = document.getElementById('quiz-form');const resultDiv = document.getElementById('result');const quizData = [ { question: "你喜欢在人多的场合中吗?", a: "是", b: "否", }, { question: "你更喜欢独处还是与他人相处?", a: "独处", b: "与他人相处", }, { question: "你喜欢计划好你的时间吗?", a: "是", b: "否", },];function showResults() { let score = 0; const answers = quizForm.querySelectorAll('input:checked'); answers.forEach(answer => { if (answer.value === 'a') { score++; } }); resultDiv.innerHTML = `你的得分为:${score}`;}function loadQuiz() { const quizHTML = quizData.map((data, index) => { return ` <div class="question"> <p>${index + 1}. ${data.question}</p> <label><input type="radio" name="q${index+1}" value="a">${data.a}</label> <label><input type="radio" name="q${index+1}" value="b">${data.b}</label> </div> `; }).join(''); quizForm.innerHTML = quizHTML;}loadQuiz();quizForm.addEventListener('submit', (event) => { event.preventDefault(); showResults();});
时间: 2023-07-19 10:34:10 浏览: 135
这段JS代码主要实现了一个简单的Web Quiz应用,它包含以下几个部分:
1. 定义了一个quizData数组,其中包含了三个问题,每个问题都有两个选项。
2. 定义了两个变量quizForm和resultDiv,分别用于获取HTML中的表单和结果div元素。
3. 定义了showResults()函数,用于计算用户的得分,并将结果显示在页面上。
4. 定义了loadQuiz()函数,用于动态生成问题和选项的HTML,并将其插入到页面中。
5. 注册了表单的submit事件监听器,当用户提交表单后,阻止表单默认的提交行为,并调用showResults()函数计算并显示结果。
具体实现细节可以参考代码注释。
阅读全文