From 7d90dd902e60045f09e40a09f7017e1410a98ee5 Mon Sep 17 00:00:00 2001 From: Dante Besong Date: Mon, 6 Apr 2026 20:11:35 +0200 Subject: [PATCH 01/10] Work in progress --- src/question.js | 22 +++++++++++++++++----- src/quiz.js | 1 + 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/question.js b/src/question.js index 68f6631a..567e0c16 100644 --- a/src/question.js +++ b/src/question.js @@ -1,7 +1,19 @@ class Question { - // YOUR CODE HERE: - // - // 1. constructor (text, choices, answer, difficulty) + // 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 + // 2. shuffleChoices() + shuffleChoices() { + for (let i = this.choices.length - 1; i > 0; i--) { + const randomQuestions = Math.floor(Math.random() * (i + 1)); + const temp = this.choices[i]; + this.choices[i] = this.choices[randomQuestions]; + this.choices[randomQuestions] = temp; + } + } +} diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..ff2e6cdc 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,4 +1,5 @@ class Quiz { + // YOUR CODE HERE: // // 1. constructor (questions, timeLimit, timeRemaining) From 51ec9ba710817f0e8d80bc96bfc26b422028aa20 Mon Sep 17 00:00:00 2001 From: Dante Besong Date: Tue, 7 Apr 2026 16:21:28 +0200 Subject: [PATCH 02/10] Work in progress --- src/quiz.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/quiz.js b/src/quiz.js index ff2e6cdc..ba0065ff 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -3,6 +3,17 @@ class Quiz { // YOUR CODE HERE: // // 1. constructor (questions, timeLimit, timeRemaining) + constructor(questions, timeLimit, timeRemaining) { + this.questions = questions; + this.timeLimit = timeLimit; + this.timeRemaining = timeRemaining; + } +} + + + + // 1. constructor (text, choices, answer, difficulty) + // 2. getQuestion() @@ -12,5 +23,4 @@ class Quiz { // 5. checkAnswer(answer) - // 6. hasEnded() -} \ No newline at end of file + // 6. hasEnded() \ No newline at end of file From 125e3df6509219cb3f7b1d03852a088d542c89d6 Mon Sep 17 00:00:00 2001 From: WildFont Date: Tue, 7 Apr 2026 16:32:13 +0200 Subject: [PATCH 03/10] Next steps --- src/quiz.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/quiz.js b/src/quiz.js index ba0065ff..72618291 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -3,11 +3,16 @@ class Quiz { // YOUR CODE HERE: // // 1. constructor (questions, timeLimit, timeRemaining) - constructor(questions, timeLimit, timeRemaining) { - this.questions = questions; - this.timeLimit = timeLimit; - this.timeRemaining = timeRemaining; - } + constructor(questions, timeLimit, timeRemaining) { + this.questions = questions; + this.timeLimit = timeLimit; + this.timeRemaining = timeRemaining; + this.correctAnswers = 0; + this.currentQuestionIndex = 0; + } + getQuestion() { + return this.questions[this.currentQuestionIndex]; + } } From c92831b92eafaa6159961bfd4b353207d8b7ee2c Mon Sep 17 00:00:00 2001 From: WildFont Date: Tue, 7 Apr 2026 17:28:35 +0200 Subject: [PATCH 04/10] day one and two --- src/quiz.js | 74 ++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 50 insertions(+), 24 deletions(-) diff --git a/src/quiz.js b/src/quiz.js index 72618291..c58ce4bb 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,31 +1,57 @@ 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; - } - getQuestion() { - return this.questions[this.currentQuestionIndex]; - } -} + // 1. constructor (text, choices, answer, difficulty) + 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() - - // 1. constructor (text, choices, answer, difficulty) - + moveToNextQuestion() { + this.currentQuestionIndex++; + } + // 4. shuffleQuestions() - // 2. getQuestion() - - // 3. moveToNextQuestion() + shuffleQuestions() { + for (let i = this.questions.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [this.questions[i], this.questions[j]] = [ + this.questions[j], + this.questions[i], + ]; + } + } + // 5. checkAnswer(answer) - // 4. shuffleQuestions() + checkAnswer(answer) { + if (answer === this.getQuestion().answer) { + this.correctAnswers++; + } + } + // 6. hasEnded() + hasEnded() { + return this.currentQuestionIndex === this.questions.length; + } - // 5. checkAnswer(answer) + filterQuestionsByDifficulty(difficulty) { + if (difficulty >= 1 && difficulty <= 3) { + this.questions = this.questions.filter( + (q) => q.difficulty === difficulty, + ); + } + } - // 6. hasEnded() \ No newline at end of file + averageDifficulty() { + return ( + this.questions.reduce((sum, q) => sum + q.difficulty, 0) / + this.questions.length + ); + } +} From 0f24e654dea921ba011a462bc878921cc0a0d7b7 Mon Sep 17 00:00:00 2001 From: Dante Besong Date: Thu, 9 Apr 2026 16:02:41 +0200 Subject: [PATCH 05/10] work in progress --- src/index.js | 17 ++++++++-- src/quiz.js | 85 ++++++++++++++++++++++++++++++++++++------------ styles/style.css | 1 + 3 files changed, 80 insertions(+), 23 deletions(-) diff --git a/src/index.js b/src/index.js index 03737ba3..d27fee24 100644 --- a/src/index.js +++ b/src/index.js @@ -39,6 +39,7 @@ document.addEventListener("DOMContentLoaded", () => { // Create a new Quiz instance object const quiz = new Quiz(questions, quizDuration, quizDuration); + console.log(quiz) // Shuffle the quiz questions quiz.shuffleQuestions(); @@ -54,8 +55,9 @@ document.addEventListener("DOMContentLoaded", () => { timeRemainingContainer.innerText = `${minutes}:${seconds}`; // Show first question - showQuestion(); + showQuestion() + /************ TIMER ************/ @@ -89,6 +91,7 @@ document.addEventListener("DOMContentLoaded", () => { // Get the current question from the quiz by calling the Quiz class method `getQuestion()` const question = quiz.getQuestion(); + console.log(question) // Shuffle the choices of the current question by calling the method 'shuffleChoices()' on the question object question.shuffleChoices(); @@ -97,8 +100,18 @@ document.addEventListener("DOMContentLoaded", () => { // YOUR CODE HERE: // // 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 diff --git a/src/quiz.js b/src/quiz.js index 72618291..38603211 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,31 +1,74 @@ 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; + // 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; + } + getQuestion() { + return this.questions[this.currentQuestionIndex]; + } + + moveToNextQuestion() { + return this.currentQuestionIndex++; + } + + shuffleQuestions() { + for (let i = this.questions.length - 1; i > 0; i--) { + const randomQsn = Math.floor(Math.random() * (i + 1)); + + [this.questions[i], this.questions[randomQsn]] = [ + this.questions[randomQsn], + this.questions[i], + ]; } - getQuestion() { - return this.questions[this.currentQuestionIndex]; + } + + checkAnswer(answer) { + const currentQuestion = this.getQuestion(); + if (currentQuestion.answer === answer) { + return this.correctAnswers++; + } + } + + hasEnded() { + if (this.currentQuestionIndex < this.questions.length) { + return false; + } else { + return true; } + } + + filterQuestionsByDifficulty(difficulty) { + if (typeof difficulty !== 'number' || difficulty < 1 || difficulty > 3) { + return; + } + this.questions = this.questions.filter(q => q.difficulty === difficulty); +} + + + + averageDifficulty() { + const total = this.questions.reduce((sum, question) => { + return sum + question.difficulty; + }, 0); + + return total / this.questions.length; + } } +// 1. constructor (text, choices, answer, difficulty) - - // 1. constructor (text, choices, answer, difficulty) - +// 2. getQuestion() - // 2. getQuestion() - - // 3. moveToNextQuestion() +// 3. moveToNextQuestion() - // 4. shuffleQuestions() +// 4. shuffleQuestions() - // 5. checkAnswer(answer) +// 5. checkAnswer(answer) - // 6. hasEnded() \ No newline at end of file +// 6. hasEnded() diff --git a/styles/style.css b/styles/style.css index 8de97e38..9d422b23 100644 --- a/styles/style.css +++ b/styles/style.css @@ -23,6 +23,7 @@ header { margin: auto; padding: 20px; background: #fff; + border-radius: px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } From 0a8db4f1717d1a9a744bb4b3348d714ebb89bde0 Mon Sep 17 00:00:00 2001 From: wildfont Date: Thu, 9 Apr 2026 17:22:09 +0200 Subject: [PATCH 06/10] trying to reach the path --- src/index.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index d27fee24..50af1b26 100644 --- a/src/index.js +++ b/src/index.js @@ -32,6 +32,7 @@ document.addEventListener("DOMContentLoaded", () => { new Question("What is the mass–energy equivalence equation?", ["E = mc^2", "E = m*c^2", "E = m*c^3", "E = m*c"], "E = mc^2", 3), // Add more questions here ]; + const quizDuration = 120; // 120 seconds (2 minutes) @@ -116,8 +117,8 @@ document.addEventListener("DOMContentLoaded", () => { // 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 - + progressBar.style.width = questions.length // This value is hardcoded as a placeholder + // 3. Update the question count text @@ -141,9 +142,11 @@ document.addEventListener("DOMContentLoaded", () => { // Hint 3: You can use the `element.appendChild()` method to append an element to the choices container. // Hint 4: You can use the `element.innerText` property to set the inner text of an element. + const radioButton = document.createElement(`radio`) + radioButton.innerHTML = ` ` + quizView.appendChild(radioButton); } - function nextButtonHandler () { let selectedAnswer; // A variable to store the selected answer value From 6a776674abe1078a0aa99865ea7dd86d6f574174 Mon Sep 17 00:00:00 2001 From: Dante Besong Date: Thu, 9 Apr 2026 18:06:39 +0200 Subject: [PATCH 07/10] update --- src/index.js | 31 ++++++++++++++++++++++++++----- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index 50af1b26..8e8fdcf8 100644 --- a/src/index.js +++ b/src/index.js @@ -103,7 +103,7 @@ document.addEventListener("DOMContentLoaded", () => { // 1. Show the question questionContainer.innerText = question.text - + @@ -124,7 +124,8 @@ document.addEventListener("DOMContentLoaded", () => { // 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 = quiz.currentQuestionIndex ; // This value is hardcoded as a placeholder + console.log(questionCount) @@ -142,9 +143,29 @@ document.addEventListener("DOMContentLoaded", () => { // Hint 3: You can use the `element.appendChild()` method to append an element to the choices container. // Hint 4: You can use the `element.innerText` property to set the inner text of an element. - const radioButton = document.createElement(`radio`) - radioButton.innerHTML = ` ` - quizView.appendChild(radioButton); + const radioButton = document.createElement(`div`) + radioButton.innerHTML = ` + ` + choiceContainer.appendChild(radioButton); + + const radioButton2 = document.createElement(`div`) + radioButton2.innerHTML = ` + ` + choiceContainer.appendChild(radioButton2); + + const radioButton3 = document.createElement(`div`) + radioButton3.innerHTML = ` + ` + choiceContainer.appendChild(radioButton3); + + const radioButton4 = document.createElement(`div`) + radioButton4.innerHTML = ` + ` + choiceContainer.appendChild(radioButton4); + + + + } From 05ba3f270f92268e3ceef4ea3c547963615c8243 Mon Sep 17 00:00:00 2001 From: wildfont Date: Thu, 9 Apr 2026 18:23:24 +0200 Subject: [PATCH 08/10] trying to reach out --- src/index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 8e8fdcf8..65dbf520 100644 --- a/src/index.js +++ b/src/index.js @@ -117,15 +117,16 @@ document.addEventListener("DOMContentLoaded", () => { // 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 = questions.length // This value is hardcoded as a placeholder + progressBar.style.width = quiz.currentQuestionIndex + console.log(progressBar) // 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 = quiz.currentQuestionIndex ; // This value is hardcoded as a placeholder - console.log(questionCount) + //questionCount.innerText = quiz.currentQuestionIndex ; // This value is hardcoded as a placeholder + questionCount.innerText = `Question ${quiz.currentQuestionIndex += 1} of ${questions.length}`; From 52523ed6bcfd228dc3de6a3acebf056a8430b4ae Mon Sep 17 00:00:00 2001 From: Dante Besong Date: Thu, 9 Apr 2026 22:21:36 +0200 Subject: [PATCH 09/10] work in progress --- src/index.js | 22 ++++++---------------- styles/style.css | 2 +- 2 files changed, 7 insertions(+), 17 deletions(-) diff --git a/src/index.js b/src/index.js index 65dbf520..aa842b6d 100644 --- a/src/index.js +++ b/src/index.js @@ -102,24 +102,13 @@ document.addEventListener("DOMContentLoaded", () => { // // 1. Show the question 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 = quiz.currentQuestionIndex - console.log(progressBar) // This value is hardcoded as a placeholder - + + // This value is hardcoded as a placeholder + progressBar.style.width = `${(choiceContainer / question.length) * 100}%`; + console.log(progressBar) // 3. Update the question count text @@ -179,6 +168,7 @@ document.addEventListener("DOMContentLoaded", () => { // // 1. Get all the choice elements. You can use the `document.querySelectorAll()` method. + // 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`). diff --git a/styles/style.css b/styles/style.css index 9d422b23..c418f947 100644 --- a/styles/style.css +++ b/styles/style.css @@ -23,7 +23,7 @@ header { margin: auto; padding: 20px; background: #fff; - border-radius: px; + border-radius: 16px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } From 88e4f9f43323f733f29a3c84d232e2c34670e537 Mon Sep 17 00:00:00 2001 From: wildfont Date: Fri, 10 Apr 2026 01:05:27 +0200 Subject: [PATCH 10/10] Harry Potter miniquiz --- src/index.js | 187 +++++++++++++++++++++++++---------------------- src/question.js | 4 +- src/quiz.js | 17 ++--- styles/style.css | 12 +-- 4 files changed, 116 insertions(+), 104 deletions(-) diff --git a/src/index.js b/src/index.js index aa842b6d..5070d2d6 100644 --- a/src/index.js +++ b/src/index.js @@ -14,41 +14,54 @@ document.addEventListener("DOMContentLoaded", () => { // End view elements const resultContainer = document.querySelector("#result"); - /************ SET VISIBILITY OF VIEWS ************/ // Show the quiz view (div#quizView) and hide the end view (div#endView) quizView.style.display = "block"; endView.style.display = "none"; - /************ QUIZ DATA ************/ - + // Array with the quiz questions const questions = [ - new Question("What is 2 + 2?", ["3", "4", "5", "6"], "4", 1), - new Question("What is the capital of France?", ["Miami", "Paris", "Oslo", "Rome"], "Paris", 1), - new Question("Who created JavaScript?", ["Plato", "Brendan Eich", "Lea Verou", "Bill Gates"], "Brendan Eich", 2), - new Question("What is the mass–energy equivalence equation?", ["E = mc^2", "E = m*c^2", "E = m*c^3", "E = m*c"], "E = mc^2", 3), + new Question("Which Hogwarts house does Harry Potter belong to?", ["Slytherin", "Ravenclaw", "Hufflepuff", "Gryffindor"], "Gryffindor", 1), + new Question( + "What is the platform number for the Hogwarts Express?", + ["7¾", "8½", "9¾", "10½"], + "9¾", + 1, + ), + new Question( + "What is the name of Harry’s pet owl?", + ["Errol", "Scabbers", "Hedwig", "Crookshanks"], + "Hedwig", + 2, + ), + new Question( + "Which spell is used to disarm an opponent?", + ["Expelliarmus", "Lumos", "Alohomora", "Avada Kedavra"], + "Expelliarmus", + 3, + ), // Add more questions here ]; - - const quizDuration = 120; // 120 seconds (2 minutes) + const quizDuration = 120; // 120 seconds (2 minutes) /************ QUIZ INSTANCE ************/ - + // Create a new Quiz instance object const quiz = new Quiz(questions, quizDuration, quizDuration); - console.log(quiz) + console.log(quiz); // Shuffle the quiz questions quiz.shuffleQuestions(); - /************ SHOW INITIAL CONTENT ************/ // Convert the time remaining in seconds to minutes and seconds, and pad the numbers with zeros if needed - const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); + const minutes = Math.floor(quiz.timeRemaining / 60) + .toString() + .padStart(2, "0"); const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); // Display the time remaining in the time remaining container @@ -56,29 +69,35 @@ document.addEventListener("DOMContentLoaded", () => { timeRemainingContainer.innerText = `${minutes}:${seconds}`; // Show first question - showQuestion() - - + showQuestion(); /************ TIMER ************/ - let timer; + let timer = setInterval(() => { + quiz.timeRemaining--; + + const minutes = Math.floor(quiz.timeRemaining / 60) + .toString() + .padStart(2, "0"); + const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; + if (quiz.timeRemaining <= 0) { + clearInterval(timer); + showResults(); + } + }, 1000); /************ EVENT LISTENERS ************/ nextButton.addEventListener("click", nextButtonHandler); - - /************ FUNCTIONS ************/ // showQuestion() - Displays the current question and its choices // nextButtonHandler() - Handles the click on the next button // showResults() - Displays the end view and the quiz results - - function showQuestion() { // If the quiz has ended, show the results if (quiz.hasEnded()) { @@ -92,101 +111,96 @@ document.addEventListener("DOMContentLoaded", () => { // Get the current question from the quiz by calling the Quiz class method `getQuestion()` const question = quiz.getQuestion(); - console.log(question) + console.log(question); // Shuffle the choices of the current question by calling the method 'shuffleChoices()' on the question object question.shuffleChoices(); - - // YOUR CODE HERE: // // 1. Show the question - questionContainer.innerText = 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 - // This value is hardcoded as a placeholder - progressBar.style.width = `${(choiceContainer / question.length) * 100}%`; - console.log(progressBar) + // This value is hardcoded as a placeholder + progressBar.style.width = `${(quiz.currentQuestionIndex / questions.length) * 100}%`; + console.log(progressBar); - - // 3. Update the question count text + // 3. Update the question count text // Update the question count (div#questionCount) show the current question out of total questions - - //questionCount.innerText = quiz.currentQuestionIndex ; // This value is hardcoded as a placeholder - questionCount.innerText = `Question ${quiz.currentQuestionIndex += 1} of ${questions.length}`; + //questionCount.innerText = quiz.currentQuestionIndex ; // This value is hardcoded as a placeholder + questionCount.innerText = `Question ${quiz.currentQuestionIndex + 1} of ${questions.length}`; - // 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: - /* + // 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. - // Hint 3: You can use the `element.appendChild()` method to append an element to the choices container. - // Hint 4: You can use the `element.innerText` property to set the inner text of an element. - - const radioButton = document.createElement(`div`) - radioButton.innerHTML = ` - ` - choiceContainer.appendChild(radioButton); - - const radioButton2 = document.createElement(`div`) - radioButton2.innerHTML = ` - ` - choiceContainer.appendChild(radioButton2); - - const radioButton3 = document.createElement(`div`) - radioButton3.innerHTML = ` - ` - choiceContainer.appendChild(radioButton3); - - const radioButton4 = document.createElement(`div`) - radioButton4.innerHTML = ` - ` - choiceContainer.appendChild(radioButton4); - - - - + // 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. + // Hint 3: You can use the `element.appendChild()` method to append an element to the choices container. + // Hint 4: You can use the `element.innerText` property to set the inner text of an element. + + const radioButton = document.createElement(`div`); + radioButton.innerHTML = ` + `; + choiceContainer.appendChild(radioButton); + + const radioButton2 = document.createElement(`div`); + radioButton2.innerHTML = ` + `; + choiceContainer.appendChild(radioButton2); + + const radioButton3 = document.createElement(`div`); + radioButton3.innerHTML = ` + `; + choiceContainer.appendChild(radioButton3); + + const radioButton4 = document.createElement(`div`); + radioButton4.innerHTML = ` + `; + choiceContainer.appendChild(radioButton4); } - - function nextButtonHandler () { + function nextButtonHandler() { let selectedAnswer; // 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 allChoices = 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. - - - // 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()`. - } - + // 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. + allChoices.forEach((input) => { + if (input.checked) { + selectedAnswer = input.value; + } + }); + // 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()`. + + if (selectedAnswer) { + quiz.checkAnswer(selectedAnswer); + quiz.moveToNextQuestion(); + showQuestion(); + } + } function showResults() { - // YOUR CODE HERE: // // 1. Hide the quiz view (div#quizView) @@ -194,9 +208,8 @@ document.addEventListener("DOMContentLoaded", () => { // 2. Show the end view (div#endView) 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.score} out of ${questions.length} correct answers!`; } - -}); \ No newline at end of file +}); diff --git a/src/question.js b/src/question.js index 567e0c16..bd780185 100644 --- a/src/question.js +++ b/src/question.js @@ -1,9 +1,9 @@ class Question { // 1. constructor (text, choices, answer, difficulty) - constructor(text, choices, answer, difficulty) { + constructor(text, choices, correctAnswer, difficulty) { this.text = text; this.choices = choices; - this.answer = answer; + this.correctAnswer = correctAnswer; this.difficulty = difficulty; } diff --git a/src/quiz.js b/src/quiz.js index c58ce4bb..3a6ae396 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,23 +1,19 @@ class Quiz { - // 1. constructor (text, choices, answer, difficulty) constructor(questions, timeLimit, timeRemaining) { this.questions = questions; this.timeLimit = timeLimit; this.timeRemaining = timeRemaining; - this.correctAnswers = 0; + this.score = 0; // ← renamed from correctAnswers this.currentQuestionIndex = 0; } - // 2. getQuestion() getQuestion() { return this.questions[this.currentQuestionIndex]; } - // 3. moveToNextQuestion() moveToNextQuestion() { this.currentQuestionIndex++; } - // 4. shuffleQuestions() shuffleQuestions() { for (let i = this.questions.length - 1; i > 0; i--) { @@ -28,14 +24,17 @@ class Quiz { ]; } } - // 5. checkAnswer(answer) checkAnswer(answer) { - if (answer === this.getQuestion().answer) { - this.correctAnswers++; + const currentQuestion = this.questions[this.currentQuestionIndex]; + console.log("Respuesta seleccionada:", answer); + console.log("Respuesta correcta:", currentQuestion.correctAnswer); + console.log("¿Son iguales?", answer === currentQuestion.correctAnswer); + if (answer === currentQuestion.correctAnswer) { + this.score++; } } - // 6. hasEnded() + hasEnded() { return this.currentQuestionIndex === this.questions.length; } diff --git a/styles/style.css b/styles/style.css index c418f947..f8b7dea0 100644 --- a/styles/style.css +++ b/styles/style.css @@ -7,7 +7,7 @@ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: #f4f4f4; + background-color: #740001; color: #333; line-height: 1.6; padding: 20px; @@ -53,11 +53,11 @@ button { } .button-primary { - background-color: #4caf50; + background-color: #eeba30; } .button-primary:hover { - background-color: #46a049; + background-color: #d3a625; } .button-secondary { @@ -74,7 +74,7 @@ button { button:hover { - background-color: #4cae4c; + background-color: #d3a625; } ul { @@ -133,7 +133,7 @@ input[type="radio"] { #progressBar { height: 20px; - background-color: #4caf50; + background-color: #eeba30; width: 0%; border-radius: 8px; } @@ -158,7 +158,7 @@ input[type="radio"] { #resultProgressBar { width: 100%; height: 20px; - background-color: #4caf50; + background-color: #eeba30; width: 100%; border-radius: 8px; }