From 40cb45e4c0a26b5a0b331d940265ce8a99176ab6 Mon Sep 17 00:00:00 2001 From: Pablo Reyes Date: Sat, 19 Apr 2025 12:49:15 +0200 Subject: [PATCH 1/2] Lab Solved --- index.html | 2 +- src/index.js | 52 +++++++++++++++++++++++++++++++++++++------------ src/question.js | 12 +++++++++++- src/quiz.js | 45 +++++++++++++++++++++++++++++++++++++----- 4 files changed, 92 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 534cd886..a5fee0b6 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,7 @@

JavaScript Quiz

- + diff --git a/src/index.js b/src/index.js index 03737ba3..73a23835 100644 --- a/src/index.js +++ b/src/index.js @@ -98,30 +98,38 @@ document.addEventListener("DOMContentLoaded", () => { // // 1. Show the question // Update the inner text of the question container element and show the question text + questionContainer.innerText = question.text; // 2. Update the green progress bar // Update the green progress bar (div#progressBar) width so that it shows the percentage of questions answered - progressBar.style.width = `65%`; // This value is hardcoded as a placeholder + const progress = (quiz.currentQuestionIndex + 1) * 100 / quiz.questions.length; + + + progressBar.style.width = `${progress}%`; // This value is hardcoded as a placeholder // 3. Update the question count text // Update the question count (div#questionCount) show the current question out of total questions - questionCount.innerText = `Question 1 of 10`; // This value is hardcoded as a placeholder + questionCount.innerText = `Question ${quiz.currentQuestionIndex + 1} of ${quiz.questions.length}`; // This value is hardcoded as a placeholder - + question.choices.forEach((choice, i) => { + choiceContainer.innerHTML = + choiceContainer.innerHTML + + ` + +
` + }) // 4. Create and display new radio input element with a label for each choice. // Loop through the current question `choices`. // For each choice create a new radio input with a label, and append it to the choice container. // Each choice should be displayed as a radio input element with a label: /* - - -
+ */ // Hint 1: You can use the `document.createElement()` method to create a new element. // Hint 2: You can use the `element.type`, `element.name`, and `element.value` properties to set the type, name, and value of an element. @@ -133,25 +141,31 @@ document.addEventListener("DOMContentLoaded", () => { function nextButtonHandler () { - let selectedAnswer; // A variable to store the selected answer value + // A variable to store the selected answer value + + + // YOUR CODE HERE: // // 1. Get all the choice elements. You can use the `document.querySelectorAll()` method. - + const choices = document.querySelectorAll(`input[name="choice"]`); // 2. Loop through all the choice elements and check which one is selected // Hint: Radio input elements have a property `.checked` (e.g., `element.checked`). // When a radio input gets selected the `.checked` property will be set to true. // You can use check which choice was selected by checking if the `.checked` property is true. - - + const answer = Array.from(choices).find((choice) => choice.checked)?.value; + console.log(answer) // 3. If an answer is selected (`selectedAnswer`), check if it is correct and move to the next question // Check if selected answer is correct by calling the quiz method `checkAnswer()` with the selected answer. // Move to the next question by calling the quiz method `moveToNextQuestion()`. // Show the next question by calling the function `showQuestion()`. + quiz.checkAnswer(answer); + quiz.moveToNextQuestion(); + showQuestion(); } @@ -168,7 +182,21 @@ document.addEventListener("DOMContentLoaded", () => { endView.style.display = "flex"; // 3. Update the result container (div#result) inner text to show the number of correct answers out of total questions - resultContainer.innerText = `You scored 1 out of 1 correct answers!`; // This value is hardcoded as a placeholder + resultContainer.innerText = `You scored ${quiz.correctAnswers} out of ${quiz.questions.length} correct answers!`; // This value is hardcoded as a placeholder } + + const restartButton = document.querySelector("#restartButton"); + + restartButton.onclick = function() { + quizView.style.display = "flex"; + endView.style.display = "none"; + quiz.currentQuestionIndex = 0; + quiz.correctAnswers = 0; + quiz.shuffleQuestions(); + showQuestion(); -}); \ No newline at end of file + } +}); + + + diff --git a/src/question.js b/src/question.js index 68f6631a..cc990953 100644 --- a/src/question.js +++ b/src/question.js @@ -2,6 +2,16 @@ class Question { // YOUR CODE HERE: // // 1. constructor (text, choices, answer, difficulty) + constructor (text, choices, answer, difficulty) { + this.text = text; + this.choices = choices; + this.answer = answer; + this.difficulty = difficulty; + } // 2. shuffleChoices() -} \ No newline at end of file + + shuffleChoices() { + this.choices.sort((a, b) => Math.random() > 0.5 ? 1 : -1); + } + } \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..6393cf07 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -2,14 +2,49 @@ class Quiz { // YOUR CODE HERE: // // 1. constructor (questions, timeLimit, timeRemaining) - + constructor(questions, timeLimit, timeRemaining) { + this.questions = questions; + this.timeLimit = timeLimit; + this.timeRemaining = timeRemaining; + + this.correctAnswers = 0; + this.currentQuestionIndex = 0; + } // 2. getQuestion() - + getQuestion() { + return this.questions[this.currentQuestionIndex]; + } // 3. moveToNextQuestion() - + moveToNextQuestion() { + this.currentQuestionIndex++; + } // 4. shuffleQuestions() - + shuffleQuestions() { + this.questions.sort((a,b) => Math.random() - 0.5); + } // 5. checkAnswer(answer) - + checkAnswer(answer) { + if(this.getQuestion().answer === answer) { + this.correctAnswers++; + } + } // 6. hasEnded() + + hasEnded() { + return this.currentQuestionIndex >= this.questions.length; + } + + filterQuestionsByDifficulty(difficulty) { + if(difficulty >= 1 && difficulty <= 3 ) { + this.questions = this.questions.filter((question) => question.difficulty === difficulty); + } + + + } + + averageDifficulty() { + return this.questions.reduce((acc, el) => acc + el.difficulty, 0) / + this.questions.length + + } } \ No newline at end of file From 58217608e6d18911aeb16300f5b47777deb86fbf Mon Sep 17 00:00:00 2001 From: Pablo Reyes Date: Sat, 19 Apr 2025 13:45:06 +0200 Subject: [PATCH 2/2] Lab Solved --- src/index.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 73a23835..e8b9d2d4 100644 --- a/src/index.js +++ b/src/index.js @@ -183,6 +183,7 @@ document.addEventListener("DOMContentLoaded", () => { // 3. Update the result container (div#result) inner text to show the number of correct answers out of total questions resultContainer.innerText = `You scored ${quiz.correctAnswers} out of ${quiz.questions.length} correct answers!`; // This value is hardcoded as a placeholder + clearInterval(timer); } const restartButton = document.querySelector("#restartButton"); @@ -190,11 +191,24 @@ document.addEventListener("DOMContentLoaded", () => { restartButton.onclick = function() { quizView.style.display = "flex"; endView.style.display = "none"; + quiz.timeRemaining = quiz.timeLimit; quiz.currentQuestionIndex = 0; quiz.correctAnswers = 0; quiz.shuffleQuestions(); showQuestion(); - + innitTimer(); + } + innitTimer(); + function innitTimer () { + timer = setInterval(function() { + const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); + const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; + quiz.timeRemaining--; + if (quiz.timeRemaining === 0) { + showResults(); + } + }, 1000) } });