-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathkikenmon.html
167 lines (148 loc) · 8.88 KB
/
kikenmon.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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" rel="stylesheet">
<title>Picture Quiz</title>
</head>
<body>
<div class="quiz-container">
<h2>運転免許学科試験</h2>
<h4>Driving License Exam</h4>
<p id="quizType">危険予測問題</p>
<div id="problem-container"></div>
<button id="next-button" onclick="nextProblem()" class="hidden">Next</button>
<div id="explanation" class="hidden">
<p id="answer-result"></p>
<p>Explanation:</p>
<p id="explanation-text"></p>
<p>Translation:</p>
<p id="translation-text"></p>
</div>
<div class="stats">
<p>Correct Answers: <span id="correct"></span> | Wrong Answers: <span id="wrong"></span></p>
<p>Remaining Problems: <span id="remaining"></span></p>
</div>
</div>
<script>
const problems = [
{
image: 'images/kiken1mon1.png',
text: '４０km/hで進行しています。どのようなことに注意して運転しますか。',
explanation: "子供の飛び出しに備えて、徐行しながら通過する。",
questions: [
{ question: '⓵通園バスはまだ発進しないと思うので、対向車線にはみ出してこのまま通過する。', answer: false, translation: 'False：I dont think the nursery school bus has departure yet, so I`ll continue driving through by slightly crossing into the opposite lane.' },
{ question: '⓶大人が一緒にいれば、子供が飛び出すことはないと思うので、このままの速度で通過する。', answer: false, translation: 'False：I think as long as there is an adult accompanying them, the children won`t rush out, so I`ll continue passing at this speed.' },
{ question: '⓷通園バスの前を子供が横断するかもしれないので、警音器を鳴らして通過する。', answer: false, translation: 'False：I`ll sound the horn as I pass, because a child might cross in front of the nursery school bus.' }
]
},
{
image: 'images/kiken1mon2.jpg',
text: '４０km/hで進行しています。どのようなことに注意して運転しますか。',
explanation: "原付の進路変更に備えて追い越さない。",
questions: [
{ question: '⓵原付は自車の接近に気付いており、駐車車両の手前で停止して進路をゆずると思うので、このまま走行する。', answer: false, translation: 'False：The moped has noticed my vehicle approaching, and I think it will stop in front of the parked vehicle and yield the way, so I will continue driving as is.' },
{ question: '⓶原付が自車の前に出てくるかもしれないので、駐車車両の横を通過するまで原付に追従する。', answer: true, translation: 'True：Since the moped might come out in front of my vehicle, I will follow the moped until it passes by the parked vehicle.' },
{ question: '⓷対向車はいないようなので、加速して原付と駐車車両を一気に追い越す。', answer: false, translation: 'False：Since there are no oncoming cars, I will accelerate and overtake the moped and the parked vehicle at once.' }
]
},
{
image: 'images/kiken1mon3.jpg',
text: '２５km/hで進行しています。どのようなことに注意して運転しますか。',
explanation: "速度を落とし、歩行者の動きに注意する。",
questions: [
{ question: '⓵歩行者は自車の接近に気付いていないかもしれないので、速度を落としてその動きに注意する。', answer: true, translation: 'True：Since the pedestrian might not be aware of my vehicle approaching, I will reduce my speed and watch their movements carefully.' },
{ question: '⓶歩行者に水や泥をはねないように、速度を落として通過する。', answer: true, translation: 'True：I will reduce my speed and pass by to avoid splashing water or mud on the pedestrian.' },
{ question: '⓷右側の子供がふざけていて自車の前に飛び出してくるかもしれないので、いつでも止まれる速度で通過する。', answer: true, translation: 'True：Since the child on the right might be playing around and suddenly jump in front of my vehicle, I will pass at a speed that allows me to stop at any time.' }
]
}
];
let currentProblemIndex = 0;
let currentQuestionIndex = 0;
let correctAnswers = 0;
let wrongAnswers = 0;
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function loadProblem() {
if (currentProblemIndex >= problems.length) {
document.getElementById('problem-container').innerHTML = `
<p>Quiz Completed!</p>
<button onclick="goToAnotherPage()">Go to Home Page</button>
`;
document.getElementById('next-button').classList.add('hidden');
return;
}
currentQuestionIndex = 0;
const problem = problems[currentProblemIndex];
document.getElementById('problem-container').innerHTML = `
<div class="question">
<img src="${problem.image}" alt="Problem Image" width="100%">
<p>${problem.text}</p>
<div id="questions-container"></div>
</div>
`;
loadQuestion();
updateStats();
}
function loadQuestion() {
const problem = problems[currentProblemIndex];
const question = problem.questions[currentQuestionIndex];
document.getElementById('questions-container').innerHTML = `
<p>${question.question}</p>
<button id="trueButton" onclick="answer(true)">True</button>
<button id="falseButton" onclick="answer(false)">False</button>
`;
}
function answer(userAnswer) {
const problem = problems[currentProblemIndex];
const question = problem.questions[currentQuestionIndex];
const resultText = userAnswer === question.answer ? 'Correct!' : 'Wrong!';
if (userAnswer === question.answer) {
correctAnswers++;
} else {
wrongAnswers++;
}
document.getElementById('trueButton').disabled = true;
document.getElementById('falseButton').disabled = true;
document.getElementById('explanation').classList.remove('hidden');
document.getElementById('explanation-text').textContent = problem.explanation;
document.getElementById('translation-text').textContent = question.translation;
document.getElementById('answer-result').textContent = resultText;
currentQuestionIndex++;
if (currentQuestionIndex < problem.questions.length) {
loadQuestion();
} else {
document.getElementById('next-button').classList.remove('hidden');
}
updateStats();
}
function nextProblem() {
currentProblemIndex++;
document.getElementById('next-button').classList.add('hidden');
document.getElementById('explanation').classList.add('hidden');
loadProblem();
}
function finishQuiz() {
document.getElementById('quiz-container').innerHTML = `
<p>Quiz Completed!</p>
<button onclick="goToAnotherPage()">Go to Another Page</button>
`;
}
function goToAnotherPage() {
window.location.href = 'drivingtest.html'; // Replace with the path to your other HTML page
}
function updateStats() {
document.getElementById('remaining').innerText = problems.length - currentProblemIndex - 1;
document.getElementById('correct').innerText = correctAnswers;
document.getElementById('wrong').innerText = wrongAnswers;
}
shuffle(problems);
loadProblem();
</script>
</body>
</html>