起因
昨天下午准备复习毛概，但是想到期末考试都是选择题，我就在想能不能做一个刷题脚本。简单考虑了一下，打算做一个网页，如果自己写需要一些时间。emmm，我可以让ChatGPT帮我做一个！
我在聊天框里大致输入是这样的：“用javascript，写一个做题软件，题库以JSON格式存储，题与题空行间隔，每一题有四个答案，每个答案独立一行，正确答案在题目的最后一行，用户点击选项后有答对或答错的反馈并显示正确答案，还可以点击按钮进入下一题，点击按钮退出程序‘’
结果就有了这个刷题软件，我将它放到了博客上：接受洗礼吧！ (jjuprising.github.io)
主要功能实现
脚本充分利用了dom。
1.程序逻辑大致是首先准备一个题库数组，每个题目是对象的形式，包括题目、选项数组、正确答案，都是字符串的形式。
2.打开页面后会通过伪随机数随机在题库数组中抽取一个元素，通过dom渲染到页面上。每一个选项是一个<li>，监听选项点击事件，通过比对点击的<li>和正确答案(字符串)判断正误。
3.监听”下一题“点击事件，重复抽取题目和监听选项点击的操作
我在原代码上添加了样式调整了布局，同时修改了一个bug，ChatGPT给的代码中，”下一题”事件的选项的变量用错了，用成了旧的。这也说明ChatGPT给出的代码不完全对的，这也是 Stack Overflow ban掉它的原因之一。
题库实现
当我手动修改题库数组时，我想到为什么不能将文本转为json呢(主要是想到之前舍长在编辑易班题库的时候通过上传txt就能生成题目)，于是，又借用ChatGPT，弄了一个txt生成json的脚本。
主要利用FileReader()和之前提到的Blob大致逻辑如下：
1.读入文本，通过\r\n分割文本，每行作为一个数组元素
2.遍历每行文本，如果当前行不为空，将其作为一道题。读取题目和四个选项，以及最后一行的答案，将题目添加到题库数组
3.将题库数组转换为JSON字符串，并保存为文件
代码
题库
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>turnJson</title>
</head>
<body>
<input type="file" id="file-input">
<script>
const quizData = [];
const fileInput = document.getElementById("file-input");
fileInput.addEventListener("change", () => {
const file = fileInput.files[0];
const reader = new FileReader();
reader.addEventListener("load", () => {
const txt = reader.result;
const lines = txt.split("\r\n");
for (let i = 0; i < lines.length; i++) {
const line = lines[i];
if (line.trim() !== "") {
const question = line;
const answers = [];
for (let j = 0; j < 4; j++) {
const answerLine = lines[i + j + 1];
answers.push(answerLine);
}
i += 5;
const correctAnswer = lines[i];
const nextLine = lines[i + 1];
if (nextLine === "") {
i++;
}
quizData.push({
question,
answers,
correctAnswer,
});
}
}
const json = JSON.stringify(quizData);
const a = document.createElement("a");
const blob = new Blob([json], { type: "text/json" });
a.href = URL.createObjectURL(blob);
a.download = "quiz.json";
a.click();
});
reader.readAsText(file);
});
</script>
</body>
</html>
|
刷题功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>接受洗礼吧！</title>
<link rel="stylesheet" type="text/css" href="quiz.css">
</head>
<body>
<div class="QuizTable">
<h1>单选题</h1>
<div id="quiz" class="quiz">
</div>
<p id="result" class="result"></p>
<button id="quit" type="button">Quit</button>
<button id="next" type="button">Next</button>
</div>
<script type="text/javascript">
const quizData = [
{
"question": "( )标志着毛泽东思想的初步形成.",
"answers": [
"A.提出并阐述农村包围城市,武装夺取政权思想",
"B.《井冈山的斗争》",
"C.《星星之火,可以燎原》",
"D.《反对本本主义》"
],
"correctAnswer": "A.提出并阐述农村包围城市,武装夺取政权思想"
},
];
const quizIndex = Math.floor(Math.random() * quizData.length);
const quiz = quizData[quizIndex];
console.log(quizIndex);
const quizElement = document.getElementById("quiz");
quizElement.innerHTML = `
<p>${quiz.question}</p>
<ul>
${quiz.answers
.map(
(answer) => `<li>${answer}</li>`
)
.join("")}
</ul>
`;
const answerElements = quizElement.querySelectorAll("li");
for (let i = 0; i < answerElements.length; i++) {
const answerElement = answerElements[i];
answerElement.addEventListener("click", () => {
const isCorrect = quiz.correctAnswer === answerElement.innerText;
const resultElement = document.getElementById("result");
if (isCorrect) {
resultElement.innerText = "正确的。 答案是: " + quiz.correctAnswer;
resultElement.style.color = "green";
} else {
resultElement.innerText =
"错误的！ 正确答案是: " + quiz.correctAnswer;
resultElement.style.color = "red";
}
});
}
const nextButton = document.getElementById("next");
nextButton.addEventListener("click", () => {
const nextQuizIndex = Math.floor(Math.random() * quizData.length);
const nextQuiz = quizData[nextQuizIndex];
console.log(nextQuizIndex);
const quizElement = document.getElementById("quiz");
quizElement.innerHTML = `
<p>${nextQuiz.question}</p>
<ul>
${nextQuiz.answers
.map(
(answer) => `<li>${answer}</li>`
)
.join("")}
</ul>
`;
const answerElements = quizElement.querySelectorAll("li");
for (let i = 0; i < answerElements.length; i++) {
const answerElement = answerElements[i];
answerElement.addEventListener("click", () => {
const isCorrect = nextQuiz.correctAnswer === answerElement.innerText;
const resultElement = document.getElementById("result");
if (isCorrect) {
resultElement.innerText = "正确的。 答案是: " + nextQuiz.correctAnswer;
resultElement.style.color = "green";
} else {
resultElement.innerText =
"错误的！ 正确答案是: " + nextQuiz.correctAnswer;
resultElement.style.color = "red";
}
});
}
const resultElement = document.getElementById("result");
resultElement.innerText = "";
});
const quitButton = document.getElementById("quit");
quitButton.addEventListener("click", () => {
window.close();
});
</script>
</body>
|
