From cd9eb519adfc0d461ededaabc1653647d10a302e Mon Sep 17 00:00:00 2001 From: Andres Gonzalez Perez Date: Mon, 24 Nov 2025 17:30:46 +0100 Subject: [PATCH 1/3] Day 1 --- src/question.js | 17 ++++++++++++----- src/quiz.js | 43 +++++++++++++++++++++++++++++++++---------- 2 files changed, 45 insertions(+), 15 deletions(-) diff --git a/src/question.js b/src/question.js index 68f6631a..bf68038a 100644 --- a/src/question.js +++ b/src/question.js @@ -1,7 +1,14 @@ class Question { - // YOUR CODE HERE: - // - // 1. constructor (text, choices, answer, difficulty) - - // 2. shuffleChoices() + constructor (text, choices, answer, difficulty) { + this.text = text; + this.choices = choices; + this.answer = answer; + this.difficulty = Number(difficulty); + } + shuffleChoices(){ + for(let i = this.choices.length; i > 0 ; i--) { + const random = Math.floor(Math.random() * (i + 1)); + [this.choices[i], this.choices[random]] = [this.choices[random], this.choices[i]]; + } + } } \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..2a2af1dd 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,38 @@ class Quiz { - // YOUR CODE HERE: - // - // 1. constructor (questions, timeLimit, timeRemaining) + constructor (questions, timeLimit, timeRemaining) { + this.questions = questions; + this.timeLimit = Number(timeLimit); + this.timeRemaining = Number(timeRemaining); + this.correctAnswers = 0; + this.currentQuestionIndex = 0; - // 2. getQuestion() - - // 3. moveToNextQuestion() - - // 4. shuffleQuestions() + } + getQuestion(){ + return this.questions[this.currentQuestionIndex]; + } + moveToNextQuestion() { + this.currentQuestionIndex += 1; + } + shuffleQuestions(){ + for(let i = this.questions.length; i > 0 ; i--) { + const random = Math.floor(Math.random() * (i + 1)); + [this.questions[i], this.questions[random]] = [this.questions[random], this.questions[i]]; + } + } - // 5. checkAnswer(answer) + checkAnswer(answer) { + let currentQuestion = this.questions[this.currentQuestionIndex]; - // 6. hasEnded() + if (answer === currentQuestion.answer) { + this.correctAnswers += 1; + } + } + + hasEnded() { + if (this.currentQuestionIndex < this.questions.length){ + return false; + } else if (this.currentQuestionIndex === this.questions.length){ + return true; + } + } } \ No newline at end of file From 77f0e979124f7bc0e44037b9fddc36b95549513f Mon Sep 17 00:00:00 2001 From: Arthur Jorge Date: Tue, 25 Nov 2025 16:49:09 +0100 Subject: [PATCH 2/3] day2 done --- src/quiz.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/quiz.js b/src/quiz.js index 2a2af1dd..b26160b3 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -35,4 +35,18 @@ class Quiz { return true; } } + filterQuestionsByDifficulty(difficulty){ + if(difficulty < 1 || difficulty > 3 || typeof difficulty !== 'number'){ + return; + } + + return this.questions = this.questions.filter (question => question.difficulty === difficulty) + + + } + averageDifficulty(){ + + const totalDificulty = this.questions.reduce((sum, question) => sum + question.difficulty, 0) + return totalDificulty / this.questions.length + } } \ No newline at end of file From 98b6e57f2d84bd5d9fe0d40e4602d480c2c5b39b Mon Sep 17 00:00:00 2001 From: Andres Gonzalez Perez Date: Thu, 27 Nov 2025 18:39:47 +0100 Subject: [PATCH 3/3] Day 4 --- index.html | 2 +- src/index.js | 110 ++++++++++++++++++++++++++++++++++++++++++++---- src/question.js | 18 ++++---- src/quiz.js | 13 +++--- 4 files changed, 120 insertions(+), 23 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..eef83b38 100644 --- a/src/index.js +++ b/src/index.js @@ -10,6 +10,9 @@ document.addEventListener("DOMContentLoaded", () => { const questionContainer = document.querySelector("#question"); const choiceContainer = document.querySelector("#choices"); const nextButton = document.querySelector("#nextButton"); + const restartButton = document.querySelector("#restartButton"); // create the button restart + + // End view elements const resultContainer = document.querySelector("#result"); @@ -62,6 +65,7 @@ document.addEventListener("DOMContentLoaded", () => { let timer; + /************ EVENT LISTENERS ************/ nextButton.addEventListener("click", nextButtonHandler); @@ -77,6 +81,8 @@ document.addEventListener("DOMContentLoaded", () => { function showQuestion() { + + // If the quiz has ended, show the results if (quiz.hasEnded()) { showResults(); @@ -92,30 +98,53 @@ document.addEventListener("DOMContentLoaded", () => { // Shuffle the choices of the current question by calling the method 'shuffleChoices()' on the question object question.shuffleChoices(); - + console.log(question) // 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 - - progressBar.style.width = `65%`; // This value is hardcoded as a placeholder - + const progress = ( (quiz.currentQuestionIndex) / quiz.questions.length) * 100; + 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 // 4. Create and display new radio input element with a label for each choice. // Loop through the current question `choices`. + question.choices.forEach((choice) =>{ + const radioInput = document.createElement('input'); + radioInput.type = "radio" + radioInput.name = "choice" + radioInput.value = choice; + + + const label = document.createElement("label"); + label.innerText = choice; + + + choiceContainer.appendChild(radioInput); + choiceContainer.appendChild(label); + choiceContainer.appendChild(document.createElement("br")); + // const aDiv = document.createElement('div'); + // aDiv.innerHTML =` + // + //
` + // choiceContainer.appendChild(aDiv); + // console.log(choice) + + + + }) // 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: /* @@ -134,24 +163,38 @@ document.addEventListener("DOMContentLoaded", () => { function nextButtonHandler () { let selectedAnswer; // A variable to store the selected answer value + // Re start the quiz + if (restartButton) { + restartButton.addEventListener("click", restartQuiz); + } + // 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. - + choices.forEach((choice) => { + if (choice.checked){ + selectedAnswer = choice.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(); + } } @@ -168,7 +211,56 @@ 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 + clearInterval(timer); } + function startTimer(){ + + timer = setInterval(() =>{ + quiz.timeRemaining --; + console.log(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) + + + } + + function restartQuiz() { + // Reset quiz logic + quiz.currentQuestionIndex = 0; + quiz.correctAnswers = 0; + quiz.timeRemaining = quiz.timeLimit; // back to inicial value + + // Show the quiz and hide results + endView.style.display = "none"; + quizView.style.display = "block"; + + // 3) Update the timer + const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); + const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; + + // 4) Restart the timer + startTimer(); + + // 5) Shows the new question + showQuestion(); + } + + + startTimer(); + + }); \ No newline at end of file diff --git a/src/question.js b/src/question.js index bf68038a..8a026f1a 100644 --- a/src/question.js +++ b/src/question.js @@ -1,14 +1,16 @@ class Question { - constructor (text, choices, answer, difficulty) { + constructor(text, choices, answer, difficulty) { this.text = text; this.choices = choices; this.answer = answer; this.difficulty = Number(difficulty); + } + shuffleChoices() { + for (let i = 0; i < this.choices.length; i++) { + let randomIndex = Math.floor(Math.random() * this.choices.length); + let choiceToMove = this.choices[i]; + this.choices.splice(i, 1); + this.choices.splice(randomIndex, 0, choiceToMove); } - shuffleChoices(){ - for(let i = this.choices.length; i > 0 ; i--) { - const random = Math.floor(Math.random() * (i + 1)); - [this.choices[i], this.choices[random]] = [this.choices[random], this.choices[i]]; - } - } -} \ No newline at end of file + } +} diff --git a/src/quiz.js b/src/quiz.js index b26160b3..69c982be 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -14,10 +14,12 @@ class Quiz { this.currentQuestionIndex += 1; } shuffleQuestions(){ - for(let i = this.questions.length; i > 0 ; i--) { - const random = Math.floor(Math.random() * (i + 1)); - [this.questions[i], this.questions[random]] = [this.questions[random], this.questions[i]]; - } + for (let i = this.questions.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + const temp = this.questions[i]; + this.questions[i] = this.questions[j]; + this.questions[j] = temp; + } } checkAnswer(answer) { @@ -49,4 +51,5 @@ class Quiz { const totalDificulty = this.questions.reduce((sum, question) => sum + question.difficulty, 0) return totalDificulty / this.questions.length } -} \ No newline at end of file +} +