最終レンダリング:
コード:
<div class="box">
<h2>在线考试</h2>
<h3>一、选择器</h3>
<!-- 考试题 -->
<div class="exam_box">
<!-- 项目 -->
<!-- <div class="item"> -->
<!-- 问题 -->
<!-- <div class="question_box">
1. 唐太宗的名字叫?
</div> -->
<!-- 答案 -->
<!-- <div class="answer_box">
<ul>
<li class="active">A.李渊</li>
<li>B.李世民</li>
<li>C.李治</li>
<li>D.武则天</li>
</ul>
</div> -->
<!-- </div> -->
</div>
<!-- 按钮 -->
<button>提交试卷</button>
<!-- 考试成绩 -->
<p class="exam_result">考试的成绩 <span class="exam_score"></span></p>
</div>
試験データ:
let data = [
{
"q": "1.唐太宗的名字叫？",
"options": [
{
"name": "A.李渊"
},
{
"name": "B.李世民"
},
{
"name": "C.李治"
},
{
"name": "D.武则天"
}
],
"score": 20,
"answer": "B"
},
{
"q": "2.唐太宗把文成公主嫁给吐蕃族首领叫什么？",
"options": [
{
"name": "A.囊日论赞"
},
{
"name": "B.朗达玛"
},
{
"name": "C.松赞干布"
},
{
"name": "D.扎西邹巴"
}
],
"score": 20,
"answer": "C"
},
{
"q": "3.1661年,收复了台湾的民族英雄是谁？",
"options": [
{
"name": "A.郑成功"
},
{
"name": "B.戚继光"
},
{
"name": "C.林则徐"
},
{
"name": "D.李元芳"
}
],
"score": 20,
"answer": "A"
},
{
"q": "4.我国历史上的第一个皇帝是？",
"options": [
{
"name": "A.禹"
},
{
"name": "B.姬发"
},
{
"name": "C.秦始皇"
},
{
"name": "D.刘备"
}
],
"score": 20,
"answer": "C"
},
{
"q": "5.被后人尊奉为中华民族“人文始祖”的是？",
"options": [
{
"name": "A.黄帝"
},
{
"name": "B.伏羲"
},
{
"name": "C.炎帝"
},
{
"name": "D.以上都是"
}
],
"score": 20,
"answer": "D"
}
];
<script>
// 要求:
// 1. 创建一个名为Page的class对象
// 2. 该对象在实例化时可以接受试卷数据作为参数
// 3. Page class的实例可以调用init初始化方法，将试卷数据通过DOM操作渲染在页面上成为网页试卷
// 4. 点击选择题的答案选项，背景高亮，再次点击，取消选择答案
// 5. 所有选择题都勾选了，才可以提交试卷，否则，不可以提交试卷
// 6. 当点击提交试卷，延迟300ms后，根据试卷数据提供的答案计算成绩并显示考试结果
class Page {
// 2. 该对象在实例化时可以接受试卷数据作为参数
constructor(data) {
this.data = JSON.parse(JSON.stringify(data));
// console.log(data[0].options[0].name);
}
// 3. 将试卷数据通过DOM操作渲染在页面上成为网页试卷
init() {
var exam_box = document.querySelector(".exam_box");
for (var i = 0; i < 5; i++) {
var item = document.createElement("div");
item.classList.add('item');
item.innerHTML = `
<div class="question_box">
${
data[i].q}
</div>
<div class="answer_box">
<ul>
<li class="active">${
data[i].options[0].name}</li>
<li>${
data[i].options[1].name}</li>
<li>${
data[i].options[2].name}</li>
<li>${
data[i].options[3].name}</li>
</ul>
</div>`;
exam_box.appendChild(item);
}
}
}
const app = new Page(data);
app.init();
// 4. 点击选择题的答案选项，背景高亮，再次点击，取消选择答案
var li = document.querySelectorAll("li");
var t = 0;
for (var i = 0; i < li.length; i++) {
li[i].onclick = function () {
if (this.getAttribute('class') && t == 0) {
t = 1;
// console.log("已高亮");
// console.log("t==>", t);
this.classList.remove('active');
} else {
t = 0;
// console.log("未高亮");
// console.log("t==>", t);
for (var m = 0; m < this.parentElement.children.length; m++) {
if (this.parentElement.children[m].getAttribute('class')) {
this.parentElement.children[m].classList.remove('active');
}
}
this.classList.add('active');
}
}
}
// 5. 所有选择题都勾选了，才可以提交试卷，否则，不可以提交试卷
var button = document.querySelector("button");
button.onclick = function () {
var active = document.querySelectorAll(".active");
if (active.length < 5) {
alert("请选择答案再提交！");
}
// 6. 当点击提交试卷，延迟300ms后，根据试卷数据提供的答案计算成绩并显示考试结果
// 获取当前选择的答案
var answers = document.querySelectorAll(".active");
var sum = 0;
for (var n = 0; n < answers.length; n++) {
// console.log(active[n].innerHTML[0]);
// console.log(app.data[n].answer);
if (active[n].innerHTML[0] === app.data[n].answer) {
sum += 20;
}
}
setTimeout(function () {
var score = document.querySelector(".exam_score");
score.innerHTML = sum;
}, 300)
}
// B C A C D
</script>