diff --git a/test/game/game.js b/test/game/game.js
index f862106..fadfa56 100644
--- a/test/game/game.js
+++ b/test/game/game.js
@@ -5,6 +5,7 @@ let timeLeft = 60; // 60 seconds for the quiz
let timer;
let questions;
let timeout;
+let wrongQuestions = []; // Track wrong questions
let maxCombo = 0;
const bgmElement = document.getElementById('bgm');
@@ -74,13 +75,14 @@ function generateRandomQuestions(numQuestions) {
}
-
function loadQuestion() {
const questionElement = document.getElementById('question');
const optionsElements = document.querySelectorAll('.option');
+ const questionNumberElement = document.getElementById('question-number'); // Added
const currentQuestion = questions[currentQuestionIndex];
questionElement.textContent = currentQuestion.question;
+ questionNumberElement.textContent = `Question ${currentQuestionIndex + 1}`; // Added
currentQuestion.options.forEach((option, index) => {
optionsElements[index].textContent = option;
@@ -127,6 +129,15 @@ function checkAnswer(selectedOptionIndex) {
explanation.textContent = currentQuestion.explanation;
explanation.classList.remove('hidden');
document.getElementById('next-button').classList.remove('hidden');
+
+ // Add to wrongQuestions
+ wrongQuestions.push({
+ questionNumber: currentQuestionIndex + 1,
+ question: currentQuestion.question,
+ correctAnswer: currentQuestion.correctAnswer,
+ selectedAnswer: selectedOptionText,
+ explanation: currentQuestion.explanation
+ });
}
document.getElementById('score').textContent = `Score: ${Math.floor(score)}`;
@@ -136,6 +147,7 @@ function checkAnswer(selectedOptionIndex) {
options.forEach(option => option.disabled = true);
}
+
function updateProgressBar() {
const progressBar = document.getElementById('progress-bar');
const star1 = document.getElementById('star1');
@@ -168,7 +180,6 @@ function updateProgressBar() {
}
-
function nextQuestion() {
clearTimeout(timeout);
currentQuestionIndex += 1;
@@ -199,10 +210,12 @@ function startTimer() {
}, 1000);
}
-
function endQuiz() {
clearInterval(timer);
+ // Hide the timer container
+ document.getElementById('timer-container').style.display = 'none';
+
let starRating = '';
if (score < 500) {
starRating = '☆☆☆';
@@ -214,16 +227,29 @@ function endQuiz() {
starRating = '★★★';
}
- const maxCombo = Math.max(combo, 0);
+ document.getElementById('question-container').innerHTML =
+ `Final Score: ${Math.floor(score)}
+ Max Combo: ${maxCombo}
`;
+
+ document.getElementById('star-rating').classList.remove('hidden');
+ document.getElementById('star-rating').innerHTML = `${starRating}`;
+
- document.getElementById('question-container').innerHTML = `
- Your final score is ${Math.floor(score)}.
- Your maximum combo was ${maxCombo}.
- ${starRating}
-
- `;
document.getElementById('next-button').classList.add('hidden');
document.getElementById('explanation').classList.add('hidden');
+ document.getElementById('score').classList.add('hidden');
+ document.getElementById('combo').classList.add('hidden');
+
+ // Show restart button at the end
+ document.getElementById('restart-button').classList.remove('hidden');
+
+ if (wrongQuestions.length > 0) {
+ document.getElementById('wrong-questions-container').classList.remove('hidden');
+ showWrongQuestion(0);
+ } else {
+ document.getElementById('no-wrong').classList.remove('hidden')
+ document.getElementById('no-wrong').innerHTML = `Congratulations! You made no errors!
`
+ };
bgmElement.pause();
bgmElement.currentTime = 0; // Reset to start
@@ -234,6 +260,33 @@ function endQuiz() {
}
+let wrongQuestionIndex = 0;
+
+function showWrongQuestion(index) {
+ const wrongQuestion = wrongQuestions[index];
+ document.getElementById('wrong-question-number').textContent = `Question ${wrongQuestion.questionNumber}`;
+ document.getElementById('wrong-question-text').textContent = wrongQuestion.question;
+ document.getElementById('wrong-question-explanation').textContent = `Explanation: ${wrongQuestion.explanation}`;
+ document.getElementById('wrong-question-choice').textContent = `Your Choice: ${wrongQuestion.selectedAnswer}`;
+ document.getElementById('show-right-answer').textContent = `Right Answer: ${wrongQuestion.correctAnswer}`
+
+ document.getElementById('prev-wrong-button').style.display = index === 0 ? 'none' : 'inline-block';
+ document.getElementById('next-wrong-button').style.display = index === wrongQuestions.length - 1 ? 'none' : 'inline-block';
+}
+
+function showPreviousWrongQuestion() {
+ if (wrongQuestionIndex > 0) {
+ wrongQuestionIndex--;
+ showWrongQuestion(wrongQuestionIndex);
+ }
+}
+
+function showNextWrongQuestion() {
+ if (wrongQuestionIndex < wrongQuestions.length - 1) {
+ wrongQuestionIndex++;
+ showWrongQuestion(wrongQuestionIndex);
+ }
+}
function restartQuiz() {
location.reload();
diff --git a/test/game/main.css b/test/game/main.css
index 6478781..5a48876 100644
--- a/test/game/main.css
+++ b/test/game/main.css
@@ -231,19 +231,73 @@ body {
display: none;
}
-.star-rating {
- font-size: 30px;
+#star-rating {
+ font-size: 50px;
color: gold;
margin-top: 20px;
}
+.quiz-container {
+ position: relative;
+ padding: 20px;
+ border: 2px solid #ddd;
+ border-radius: 10px;
+ background-color: #f9f9f9;
+}
+
+/* Add this to main.css */
+
+/* Ensure the quiz container has relative positioning */
+.quiz-container {
+ position: relative;
+ padding: 20px;
+ border: 2px solid #ddd;
+ border-radius: 10px;
+ background-color: #f9f9f9;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+/* Style for the wrong questions review box inline with other elements */
+#wrong-questions-container {
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border-radius: 10px;
+ padding: 15px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ width: 80%;
+ margin-top: 20px; /* Space above the review box */
+}
+
+#wrong-question-number {
+ font-size: 18px;
+ margin-bottom: 10px;
+}
+
+#wrong-question-text,
+#wrong-question-choice,
+#show-right-answer,
+#wrong-question-explanation {
+ margin-bottom: 10px;
+}
+
+/* Specific button styling */
+#prev-wrong-button,
+#next-wrong-button,
+#next-button,
#restart-button {
- margin-top: 20px;
padding: 10px 20px;
+ margin: 5px;
font-size: 16px;
- background-color: #007bff;
- color: white;
+ cursor: pointer;
border: none;
border-radius: 5px;
- cursor: pointer;
+ background-color: #007bff;
+ color: white;
+}
+
+button:hover {
+ background-color: #0056b3;
}
+
diff --git a/test/game/main.html b/test/game/main.html
index 0e5915e..62962a8 100644
--- a/test/game/main.html
+++ b/test/game/main.html
@@ -9,8 +9,9 @@
+
-
+
@@ -32,7 +33,22 @@
-
+
+
+
Wrong Answers Review
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -43,13 +59,16 @@
Time left: 60s
-
Score: 0
-
Combo: 0
+
Score: 0
+
Combo: 0
+
+
+
+
-
+
+
`
+
-
-
+