Skip to content

Commit

Permalink
Added feedbacks to the end and improved UI of endscreen
Browse files Browse the repository at this point in the history
  • Loading branch information
@LukePng
LukePng committed Aug 15, 2024
1 parent c390752 commit ad2865d
Show file tree
Hide file tree
Showing 3 changed files with 152 additions and 23 deletions.
73 changes: 63 additions & 10 deletions test/game/game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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)}`;
Expand All @@ -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');
Expand Down Expand Up @@ -168,7 +180,6 @@ function updateProgressBar() {
}



function nextQuestion() {
clearTimeout(timeout);
currentQuestionIndex += 1;
Expand Down Expand Up @@ -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 = '☆☆☆';
Expand All @@ -214,16 +227,29 @@ function endQuiz() {
starRating = '★★★';
}

const maxCombo = Math.max(combo, 0);
document.getElementById('question-container').innerHTML =
`<h2>Final Score: ${Math.floor(score)}</h2>
<h2>Max Combo: ${maxCombo}</h2>`;

document.getElementById('star-rating').classList.remove('hidden');
document.getElementById('star-rating').innerHTML = `${starRating}`;


document.getElementById('question-container').innerHTML = `
<p>Your final score is ${Math.floor(score)}.</p>
<p>Your maximum combo was ${maxCombo}.</p>
<div class="star-rating">${starRating}</div>
<button id="restart-button" onclick="restartQuiz()">Restart Quiz</button>
`;
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 = `<h3>Congratulations! You made no errors!</h3>`
};

bgmElement.pause();
bgmElement.currentTime = 0; // Reset to start
Expand All @@ -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();
Expand Down
66 changes: 60 additions & 6 deletions test/game/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

36 changes: 29 additions & 7 deletions test/game/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@
</head>
<body>
<div class="quiz-container">

<div id="question-container">
<h2 id="question"></h2>
<h2 id="question-number"></h2><h2 id="question"></h2>
<div class="options">
<div class="option-container">
<img class="option-image" src="assets/images/1.jpeg" alt="Option 1 Image">
Expand All @@ -32,7 +33,22 @@ <h2 id="question"></h2>
</div>
</div>
</div>
<div id="timer-container">

<div id="wrong-questions-container" class="hidden">
<h3>Wrong Answers Review</h3>
<div id="wrong-question-box">
<b><p id="wrong-question-number"></p></b>
<b><p id="wrong-question-text"></p></b>
<p id="wrong-question-choice"></p>
<p id="show-right-answer"></p>
<p id="wrong-question-explanation"></p>

<button id="prev-wrong-button" onclick="showPreviousWrongQuestion()">Back</button>
<button id="next-wrong-button" onclick="showNextWrongQuestion()">Next</button>
</div>
</div>

<div id="timer-container" class="">
<div id="timer-top-row">
<i id="timer-icon" class="fa fa-clock-o" style="font-size:24px"></i>
<div id="timer-bar-wrapper">
Expand All @@ -43,13 +59,16 @@ <h2 id="question"></h2>
<p id="time-left">Time left: 60s</p>
</div>
<div id="score-combo">
<div id="score">Score: 0</div>
<div id="combo">Combo: 0</div>
<div id="score" class="">Score: 0</div>
<div id="combo" class="">Combo: 0</div>
</div>

<div id="no-wrong" class="hidden"></div>
<div id="star-rating" class="hidden"></div>

<div id="progress-container">
<div id="progress-bar-wrapper">
<div id="progress-bar"></div>
<i class="fa fa-trophy" style="font-size:24px"></i>
<div id="quarter-markers">
<div id="marker1" class="quarter-marker"></div>
<div id="marker2" class="quarter-marker"></div>
Expand All @@ -64,10 +83,13 @@ <h2 id="question"></h2>
</div>

<p id="explanation" class="hidden"></p>

<button id="next-button" class="hidden" onclick="nextQuestion()">Next Question</button>
<button id="restart-button" class="hidden" onclick="restartQuiz()">Restart Quiz</button>`

</div>
<audio id="bgm" src="assets/audio/bgm.mpeg" autoplay loop></audio>
<audio id="bgm_end" src="assets/audio/end_bgm.mp3"></audio>
<!-- <audio id="bgm" src="assets/audio/bgm.mpeg" autoplay loop></audio>
<audio id="bgm_end" src="assets/audio/end_bgm.mp3"></audio> -->
<script src="game.js"></script>
</body>
</html>

0 comments on commit ad2865d

Please sign in to comment.