From ad2865d5ce1f7e3f4ee8b3c544b06a1138297eba Mon Sep 17 00:00:00 2001 From: LukePng Date: Thu, 15 Aug 2024 23:06:58 +0800 Subject: [PATCH] Added feedbacks to the end and improved UI of endscreen --- test/game/game.js | 73 ++++++++++++++++++++++++++++++++++++++------- test/game/main.css | 66 ++++++++++++++++++++++++++++++++++++---- test/game/main.html | 36 +++++++++++++++++----- 3 files changed, 152 insertions(+), 23 deletions(-) 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 @@
+
-

+

Option 1 Image @@ -32,7 +33,22 @@

-
+ + + +
@@ -43,13 +59,16 @@

Time left: 60s

-
Score: 0
-
Combo: 0
+
Score: 0
+
Combo: 0
+ + + +
-
@@ -64,10 +83,13 @@

+ + ` +
- - +