diff --git a/Quiz App Master/app.css b/Quiz App Master/app.css index e78aa52..c31d1a0 100644 --- a/Quiz App Master/app.css +++ b/Quiz App Master/app.css @@ -125,3 +125,50 @@ input { input::placeholder { color: #aaa; } +.end-container { + text-align: center; + padding: 2rem; + max-width: 600px; + margin: 0 auto; +} + +.score-container { + background: #f8f9fa; + border-radius: 10px; + padding: 2rem; + margin: 2rem 0; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.score-text { + font-size: 1.5rem; + font-weight: bold; + margin-bottom: 1rem; +} + +.correct-answers, .percentage { + font-size: 1.2rem; + margin: 0.5rem 0; +} + +#feedbackMessage { + font-size: 1.3rem; + margin-top: 1.5rem; + color: #2c3e50; + font-weight: bold; +} + +button { + background: #3498db; + color: white; + border: none; + padding: 0.8rem 1.5rem; + font-size: 1.1rem; + border-radius: 5px; + cursor: pointer; + transition: background 0.3s; +} + +button:hover { + background: #2980b9; +} diff --git a/Quiz App Master/end.html b/Quiz App Master/end.html index 426d7d5..aef424e 100644 --- a/Quiz App Master/end.html +++ b/Quiz App Master/end.html @@ -4,34 +4,115 @@ - Congrats! + Quiz Results +
-

-
- - -
- Play Again - Go Home +
+ +
+

Your score:

+

Correct answers: /

+

Percentage: %

+ +
+ +
+ + +
+ +
+ Play Again + Go Home +
+
- + \ No newline at end of file diff --git a/Quiz App Master/end.js b/Quiz App Master/end.js index ec9c85c..5f82832 100644 --- a/Quiz App Master/end.js +++ b/Quiz App Master/end.js @@ -1,29 +1,70 @@ -const username = document.getElementById('username'); -const saveScoreBtn = document.getElementById('saveScoreBtn'); +// DOM Elements const finalScore = document.getElementById('finalScore'); +const correctAnswersEl = document.getElementById('correctAnswers'); +const totalQuestionsEl = document.getElementById('totalQuestions'); +const percentageScoreEl = document.getElementById('percentageScore'); +const feedbackMessage = document.getElementById('feedbackMessage'); +const usernameInput = document.getElementById('username'); +const saveScoreBtn = document.getElementById('saveScoreBtn'); +const saveScoreForm = document.getElementById('saveScoreForm'); + +// Get results from localStorage const mostRecentScore = localStorage.getItem('mostRecentScore'); +const correctAnswers = localStorage.getItem('correctAnswers'); +const totalQuestions = localStorage.getItem('totalQuestions'); +const percentageScore = localStorage.getItem('percentageScore'); +// High Scores const highScores = JSON.parse(localStorage.getItem('highScores')) || []; - const MAX_HIGH_SCORES = 5; +// Display results finalScore.innerText = mostRecentScore; +correctAnswersEl.innerText = correctAnswers; +totalQuestionsEl.innerText = totalQuestions; +percentageScoreEl.innerText = percentageScore; -username.addEventListener('keyup', () => { - saveScoreBtn.disabled = !username.value; +// Add feedback based on percentage +const percentage = parseInt(percentageScore); +if (percentage >= 90) { + feedbackMessage.innerText = "Excellent! 🎉"; +} else if (percentage >= 70) { + feedbackMessage.innerText = "Good job! 👍"; +} else if (percentage >= 50) { + feedbackMessage.innerText = "Not bad! 😊"; +} else { + feedbackMessage.innerText = "Keep practicing! 💪"; +} + +// Enable save button when username is entered +usernameInput.addEventListener('keyup', () => { + saveScoreBtn.disabled = !usernameInput.value; }); -saveHighScore = (e) => { +// Save high score +saveScoreForm.addEventListener('submit', (e) => { e.preventDefault(); - + const score = { score: mostRecentScore, - name: username.value, + correctAnswers: correctAnswers, + totalQuestions: totalQuestions, + percentage: percentageScore, + name: usernameInput.value, + date: new Date().toLocaleDateString() }; + highScores.push(score); highScores.sort((a, b) => b.score - a.score); - highScores.splice(5); - + highScores.splice(MAX_HIGH_SCORES); + localStorage.setItem('highScores', JSON.stringify(highScores)); - window.location.assign('/'); -}; + + // Disable form after submission + usernameInput.disabled = true; + saveScoreBtn.disabled = true; + + // Show confirmation + feedbackMessage.textContent = `Score saved for ${usernameInput.value}!`; + feedbackMessage.style.color = "#4CAF50"; +}); \ No newline at end of file diff --git a/Quiz App Master/game.html b/Quiz App Master/game.html index 044c033..34bee7a 100644 --- a/Quiz App Master/game.html +++ b/Quiz App Master/game.html @@ -49,6 +49,7 @@

+ diff --git a/Quiz App Master/game.js b/Quiz App Master/game.js index fdbfd4c..041f745 100644 --- a/Quiz App Master/game.js +++ b/Quiz App Master/game.js @@ -1,88 +1,21 @@ -const question = document.getElementById('question'); -const choices = Array.from(document.getElementsByClassName('choice-text')); -const progressText = document.getElementById('progressText'); -const scoreText = document.getElementById('score'); -const progressBarFull = document.getElementById('progressBarFull'); -const loader = document.getElementById('loader'); -const game = document.getElementById('game'); -let currentQuestion = {}; -let acceptingAnswers = false; -let score = 0; -let questionCounter = 0; -let availableQuesions = []; +// ... (keep all your existing variable declarations and fetch code) -let questions = []; - -fetch( - 'https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple' -) - .then((res) => { - return res.json(); - }) - .then((loadedQuestions) => { - questions = loadedQuestions.results.map((loadedQuestion) => { - const formattedQuestion = { - question: loadedQuestion.question, - }; - - const answerChoices = [...loadedQuestion.incorrect_answers]; - formattedQuestion.answer = Math.floor(Math.random() * 4) + 1; - answerChoices.splice( - formattedQuestion.answer - 1, - 0, - loadedQuestion.correct_answer - ); - - answerChoices.forEach((choice, index) => { - formattedQuestion['choice' + (index + 1)] = choice; - }); - - return formattedQuestion; - }); - - startGame(); - }) - .catch((err) => { - console.error(err); - }); - -//CONSTANTS +// CONSTANTS const CORRECT_BONUS = 10; const MAX_QUESTIONS = 3; +let correctAnswersCount = 0; // Track number of correct answers startGame = () => { questionCounter = 0; score = 0; + correctAnswersCount = 0; // Reset correct answers counter availableQuesions = [...questions]; getNewQuestion(); game.classList.remove('hidden'); loader.classList.add('hidden'); }; -getNewQuestion = () => { - if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) { - localStorage.setItem('mostRecentScore', score); - //go to the end page - return window.location.assign('/end.html'); - } - questionCounter++; - progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`; - //Update the progress bar - progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`; - - const questionIndex = Math.floor(Math.random() * availableQuesions.length); - currentQuestion = availableQuesions[questionIndex]; - question.innerHTML = currentQuestion.question; - - choices.forEach((choice) => { - const number = choice.dataset['number']; - choice.innerHTML = currentQuestion['choice' + number]; - }); - - availableQuesions.splice(questionIndex, 1); - acceptingAnswers = true; -}; - +// Update the answer checking logic choices.forEach((choice) => { choice.addEventListener('click', (e) => { if (!acceptingAnswers) return; @@ -96,18 +29,66 @@ choices.forEach((choice) => { if (classToApply === 'correct') { incrementScore(CORRECT_BONUS); + correctAnswersCount++; // Increment correct answers count } selectedChoice.parentElement.classList.add(classToApply); + // Highlight correct answer if wrong was selected + if (classToApply === 'incorrect') { + const correctChoice = choices.find( + choice => choice.dataset['number'] == currentQuestion.answer + ); + correctChoice.parentElement.classList.add('correct'); + } + setTimeout(() => { selectedChoice.parentElement.classList.remove(classToApply); + + // Remove correct highlight if it was shown + if (classToApply === 'incorrect') { + const correctChoice = choices.find( + choice => choice.dataset['number'] == currentQuestion.answer + ); + correctChoice.parentElement.classList.remove('correct'); + } + getNewQuestion(); }, 1000); }); }); +// Modify the end game logic to store additional data +getNewQuestion = () => { + if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) { + localStorage.setItem('mostRecentScore', score); + localStorage.setItem('correctAnswers', correctAnswersCount); + localStorage.setItem('totalQuestions', MAX_QUESTIONS); + localStorage.setItem('percentageScore', Math.round((correctAnswersCount / MAX_QUESTIONS) * 100)); + + //go to the end page + return window.location.assign('/end.html'); + } + questionCounter++; + progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`; + //Update the progress bar + progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`; + + const questionIndex = Math.floor(Math.random() * availableQuesions.length); + currentQuestion = availableQuesions[questionIndex]; + question.innerHTML = currentQuestion.question; + + choices.forEach((choice) => { + const number = choice.dataset['number']; + choice.innerHTML = currentQuestion['choice' + number]; + }); + + availableQuesions.splice(questionIndex, 1); + acceptingAnswers = true; +}; + +// Keep your existing incrementScore function incrementScore = (num) => { score += num; scoreText.innerText = score; -}; +}; \ No newline at end of file