From 2943465b1564fb3e878ef939241f347cf0fb96de Mon Sep 17 00:00:00 2001 From: sara faltas Date: Tue, 7 Apr 2026 15:33:30 +0200 Subject: [PATCH 1/5] updated --- src/question.js | 29 ++++++++++++++++++++++++----- src/quiz.js | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 59 insertions(+), 5 deletions(-) diff --git a/src/question.js b/src/question.js index 68f6631a..b36a4951 100644 --- a/src/question.js +++ b/src/question.js @@ -1,7 +1,26 @@ class Question { - // YOUR CODE HERE: - // - // 1. constructor (text, choices, answer, difficulty) + // 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 + // 2. shuffleChoices() + // should shuffle the elements stored in the choices array property. + shuffleChoices() { + for (let i = this.choices.length - 1; i > 0; i--) { + // Pick a random index from 0 to i + const randomIndex = Math.floor(Math.random() * (i + 1)); + // Swap elements + [this.choices[i],this.choices[randomIndex]] = [this.choices[randomIndex],this.choices[i]]; + + } + + return choices; + + } +} diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..aa1298e3 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() + // should return the item from the questions array at the position of currentQuestionIndex + getQuestion(){ + + + } // 3. moveToNextQuestion() + //should increment the currentQuestionIndexby1 + moveToNextQuestion(){ + + + } // 4. shuffleQuestions() + //should shuffle the items in the questions array. + shuffleQuestions(){ + + } // 5. checkAnswer(answer) + //should increase correctAnswers by 1 when called with a correct answer for the current question + checkAnswer(answer){ + + } // 6. hasEnded() + //should return false when currentQuestionIndex is less than the questions array length + //should return true when currentQuestionIndex is equal to the questions array length + hasEnded(){ + + } + + averageDifficulty(){ + + + } } \ No newline at end of file From 9cc416227ccf416a3aec859fc87e79c353462cb5 Mon Sep 17 00:00:00 2001 From: sara faltas Date: Tue, 7 Apr 2026 16:44:58 +0200 Subject: [PATCH 2/5] resolved second day --- src/question.js | 11 ++++------- src/quiz.js | 43 +++++++++++++++++++++++++++++++++++++------ 2 files changed, 41 insertions(+), 13 deletions(-) diff --git a/src/question.js b/src/question.js index b36a4951..30c86550 100644 --- a/src/question.js +++ b/src/question.js @@ -13,14 +13,11 @@ class Question { // should shuffle the elements stored in the choices array property. shuffleChoices() { for (let i = this.choices.length - 1; i > 0; i--) { - // Pick a random index from 0 to i - const randomIndex = Math.floor(Math.random() * (i + 1)); + // Pick a random index from 0 to i + const j = Math.floor(Math.random() * (i+1)); // Swap elements - [this.choices[i],this.choices[randomIndex]] = [this.choices[randomIndex],this.choices[i]]; - - } - return choices; - + [this.choices[i],this.choices[j]] = [this.choices[j],this.choices[i]]; + } } } diff --git a/src/quiz.js b/src/quiz.js index aa1298e3..77894a03 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -13,38 +13,69 @@ class Quiz { // 2. getQuestion() // should return the item from the questions array at the position of currentQuestionIndex getQuestion(){ - + return this.questions[this.currentQuestionIndex] } // 3. moveToNextQuestion() //should increment the currentQuestionIndexby1 moveToNextQuestion(){ - - + this.currentQuestionIndex ++ } // 4. shuffleQuestions() //should shuffle the items in the questions array. shuffleQuestions(){ - + for (let i = this.questions.length - 1; i > 0; i--) { + // Pick a random index from 0 to i + const j = Math.floor(Math.random() * (i+1)); + // Swap elements + [this.questions[i],this.questions[j]] = [this.questions[j],this.questions[i]]; + } } // 5. checkAnswer(answer) //should increase correctAnswers by 1 when called with a correct answer for the current question + // ask Jorge what is this ?? checkAnswer(answer){ - + if(answer.length !== 0){ + this.correctAnswers++ + } + } // 6. hasEnded() //should return false when currentQuestionIndex is less than the questions array length //should return true when currentQuestionIndex is equal to the questions array length hasEnded(){ - + if (this.currentQuestionIndex < this.questions.length){ + return false + } + else if (this.currentQuestionIndex = this.questions.length){ + return true + } + } + + filterQuestionsByDifficulty(difficulty){ + if(difficulty >=1 && difficulty <=3 ){ + this.questions = this.questions.filter ((element) => { + return element.difficulty === difficulty; + }) + + return this.questions } +} + + + + averageDifficulty(){ + const total = this.questions.reduce((sum,element)=> { + return sum + element.difficulty + },0) + return total / this.questions.length } } \ No newline at end of file From 23762b66b9e6eac1a7c0c28a30b5fb90218d0fea Mon Sep 17 00:00:00 2001 From: sara faltas Date: Wed, 8 Apr 2026 17:11:51 +0200 Subject: [PATCH 3/5] resolved check answer function --- src/quiz.js | 132 +++++++++++++++++++++++++--------------------------- 1 file changed, 64 insertions(+), 68 deletions(-) diff --git a/src/quiz.js b/src/quiz.js index 77894a03..9fe8a4ab 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,81 +1,77 @@ 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; + } - // 2. getQuestion() - // should return the item from the questions array at the position of currentQuestionIndex - getQuestion(){ - return this.questions[this.currentQuestionIndex] - - } - - // 3. moveToNextQuestion() - //should increment the currentQuestionIndexby1 - moveToNextQuestion(){ - this.currentQuestionIndex ++ - } + // 2. getQuestion() + // should return the item from the questions array at the position of currentQuestionIndex + getQuestion() { + return this.questions[this.currentQuestionIndex]; + } - // 4. shuffleQuestions() - //should shuffle the items in the questions array. - shuffleQuestions(){ - for (let i = this.questions.length - 1; i > 0; i--) { - // Pick a random index from 0 to i - const j = Math.floor(Math.random() * (i+1)); - // Swap elements - [this.questions[i],this.questions[j]] = [this.questions[j],this.questions[i]]; - } - } + // 3. moveToNextQuestion() + //should increment the currentQuestionIndexby1 + moveToNextQuestion() { + this.currentQuestionIndex++; + } - // 5. checkAnswer(answer) - //should increase correctAnswers by 1 when called with a correct answer for the current question - // ask Jorge what is this ?? - checkAnswer(answer){ - if(answer.length !== 0){ - this.correctAnswers++ - } - + // 4. shuffleQuestions() + //should shuffle the items in the questions array. + shuffleQuestions() { + for (let i = this.questions.length - 1; i > 0; i--) { + // Pick a random index from 0 to i + const j = Math.floor(Math.random() * (i + 1)); + // Swap elements + [this.questions[i], this.questions[j]] = [ + this.questions[j], + this.questions[i], + ]; } + } - // 6. hasEnded() - //should return false when currentQuestionIndex is less than the questions array length - //should return true when currentQuestionIndex is equal to the questions array length - hasEnded(){ - if (this.currentQuestionIndex < this.questions.length){ - return false - } - else if (this.currentQuestionIndex = this.questions.length){ - return true - } + // 5. checkAnswer(answer) + //should increase correctAnswers by 1 when called with a correct answer for the current question + // ask Jorge what is this ?? + checkAnswer(answer) { + const currentQuestion = this.getQuestion(); + if (currentQuestion.answer === answer) { + this.correctAnswers++; } + } - filterQuestionsByDifficulty(difficulty){ - if(difficulty >=1 && difficulty <=3 ){ - this.questions = this.questions.filter ((element) => { - return element.difficulty === difficulty; - }) - - return this.questions + // 6. hasEnded() + //should return false when currentQuestionIndex is less than the questions array length + //should return true when currentQuestionIndex is equal to the questions array length + hasEnded() { + if (this.currentQuestionIndex < this.questions.length) { + return false; + } else if ((this.currentQuestionIndex = this.questions.length)) { + return true; } + } -} - - - + filterQuestionsByDifficulty(difficulty) { + if (difficulty >= 1 && difficulty <= 3) { + this.questions = this.questions.filter((element) => { + return element.difficulty === difficulty; + }); - averageDifficulty(){ - const total = this.questions.reduce((sum,element)=> { - return sum + element.difficulty - },0) + return this.questions; + } + } - return total / this.questions.length + averageDifficulty() { + const total = this.questions.reduce((sum, element) => { + return sum + element.difficulty; + }, 0); - } -} \ No newline at end of file + return total / this.questions.length; + } +} From 4e15a470e60c76fe81ac6043c5c01da600c52ac5 Mon Sep 17 00:00:00 2001 From: Aybike Celebi Visser Date: Wed, 8 Apr 2026 17:37:01 +0200 Subject: [PATCH 4/5] day3 --- index.html | 2 +- src/index.js | 66 +++++++++++++++++++++++++++++++++++++++++++++++----- src/quiz.js | 26 +++++++++++---------- 3 files changed, 75 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..d17b8b9b 100644 --- a/src/index.js +++ b/src/index.js @@ -65,6 +65,7 @@ document.addEventListener("DOMContentLoaded", () => { /************ EVENT LISTENERS ************/ nextButton.addEventListener("click", nextButtonHandler); + restartButton.addEventListener("click", restartButtonHandler); @@ -98,19 +99,22 @@ 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 + //progressBar.style.width = `65%`; // This value is hardcoded as a placeholder + const progressBarPercentage = (quiz.currentQuestionIndex / quiz.questions.length) * 100; + progressBar.style.width = `${progressBarPercentage}%`; // 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} out of ${quiz.questions.length}`; // This value is hardcoded as a placeholder @@ -128,6 +132,24 @@ 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. + question.choices.forEach((choice, index) => { + + const radioInput = document.createElement("input"); + radioInput.type = "radio"; + radioInput.name = "choice"; + radioInput.value = choice; + radioInput.id = `choice-${choice}`; + radioInput.addEventListener("change", nextButtonHandler); + choiceContainer.appendChild(radioInput); + + const label = document.createElement("label"); + label.htmlFor = `choice-${choice}`; + label.innerText = choice; + choiceContainer.appendChild(label); + + const br = document.createElement("br"); + choiceContainer.appendChild(br); + }) } @@ -140,18 +162,31 @@ document.addEventListener("DOMContentLoaded", () => { // 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) { + if (quiz.checkAnswer(selectedAnswer)) { + quiz.moveToNextQuestion(); + showQuestion(); + } + } + } @@ -168,7 +203,26 @@ 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 + } + function restartButtonHandler(){ + + endView.style.display = "none"; + quizView.style.display = "flex"; + quiz.currentQuestionIndex = 0; + quiz.correctAnswers = 0; + quiz.timeRemaining = quizDuration; + quiz.shuffleQuestions(); + + + + + + + showQuestion(); + + + } }); \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index 77894a03..e014e863 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -36,13 +36,15 @@ class Quiz { // 5. checkAnswer(answer) //should increase correctAnswers by 1 when called with a correct answer for the current question - // ask Jorge what is this ?? + checkAnswer(answer){ - if(answer.length !== 0){ - this.correctAnswers++ + if (answer === this.questions[this.currentQuestionIndex].answer){ + this.correctAnswers++ + } + return this.correctAnswers } - } + // 6. hasEnded() //should return false when currentQuestionIndex is less than the questions array length @@ -54,7 +56,8 @@ class Quiz { else if (this.currentQuestionIndex = this.questions.length){ return true } - } +} + filterQuestionsByDifficulty(difficulty){ if(difficulty >=1 && difficulty <=3 ){ @@ -63,19 +66,18 @@ class Quiz { }) return this.questions - } - -} + } } - averageDifficulty(){ - const total = this.questions.reduce((sum,element)=> { + averageDifficulty() { + + const total = this.questions.reduce((sum,element)=> { return sum + element.difficulty },0) return total / this.questions.length - } -} \ No newline at end of file + +} From e6a379e4217557a0086d286dd3d0146514f9553c Mon Sep 17 00:00:00 2001 From: sara faltas Date: Thu, 9 Apr 2026 16:18:47 +0200 Subject: [PATCH 5/5] resolved timer --- index.html | 2 +- src/index.js | 213 +++++++++++++++++++++++++++++---------------------- src/quiz.js | 41 ---------- 3 files changed, 121 insertions(+), 135 deletions(-) diff --git a/index.html b/index.html index a5fee0b6..9d6c24c2 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@

JavaScript Quiz

    Remaining Time: 00:00
    - + diff --git a/src/index.js b/src/index.js index e4595ff2..acf3808b 100644 --- a/src/index.js +++ b/src/index.js @@ -14,39 +14,55 @@ 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( + "What is the smallest unit of life?", + ["Atom", "Molecule", "Cell5", "Tissue"], + "Cell", 4), + new Question( + "Which planet is known as the Red Planet?", + ["Venus", "Mars", "Jupiter", "Saturn"], + "Mars", + 3, + ), + new Question( + "What is the largest ocean on Earth?", + ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"], + "Pacific Ocean", + 2, + ), + new Question( + "Who wrote “Romeo and Juliet”?", + ["Charles Dickens", "William Shakespeare", "Mark Twain", "Jane Austen"], + "William Shakespeare", + 1, + ), // Add more questions here ]; const quizDuration = 120; // 120 seconds (2 minutes) - /************ QUIZ INSTANCE ************/ - + // Create a new Quiz instance object const quiz = new Quiz(questions, quizDuration, quizDuration); // 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,27 +72,37 @@ document.addEventListener("DOMContentLoaded", () => { // Show first question showQuestion(); - /************ TIMER ************/ let timer; + timer = setInterval(()=> { + quiz.timeRemaining --; + 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 + const timeRemainingContainer = document.getElementById("timeRemaining"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; + if (quiz.timeRemaining === 0 ){ + clearInterval(timer); + showResults(); + } + },1000) /************ EVENT LISTENERS ************/ nextButton.addEventListener("click", nextButtonHandler); restartButton.addEventListener("click", restartButtonHandler); - - /************ 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,137 +118,138 @@ document.addEventListener("DOMContentLoaded", () => { const question = quiz.getQuestion(); // 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 // 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 progressBarPercentage = (quiz.currentQuestionIndex / quiz.questions.length) * 100; - progressBar.style.width = `${progressBarPercentage}%`; + // progressBar.style.width = `65%`; // This value is hardcoded as a placeholder + const progressBarPercentage = + (quiz.currentQuestionIndex / quiz.questions.length) * 100; + progressBar.style.width = `${progressBarPercentage}%`; - // 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 = `Question ${quiz.currentQuestionIndex + 1} out of ${quiz.questions.length}`; // This value is hardcoded as a placeholder + questionCount.innerText = `Question ${quiz.currentQuestionIndex + 1} out 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`. - // 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. - - question.choices.forEach((choice, index) => { - - const radioInput = document.createElement("input"); - radioInput.type = "radio"; - radioInput.name = "choice"; - radioInput.value = choice; - radioInput.id = `choice-${choice}`; - radioInput.addEventListener("change", nextButtonHandler); - choiceContainer.appendChild(radioInput); - - const label = document.createElement("label"); - label.htmlFor = `choice-${choice}`; - label.innerText = choice; - choiceContainer.appendChild(label); - - const br = document.createElement("br"); - choiceContainer.appendChild(br); - }) + // 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. + + question.choices.forEach((choice, index) => { + const radioInput = document.createElement("input"); + radioInput.type = "radio"; + radioInput.name = "choice"; + radioInput.value = choice; + radioInput.id = `choice-${choice}`; + choiceContainer.appendChild(radioInput); + + const label = document.createElement("label"); + label.htmlFor = `choice-${choice}`; + label.innerText = choice; + choiceContainer.appendChild(label); + + const br = document.createElement("br"); + choiceContainer.appendChild(br); + }); } - - - 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 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) { - if (quiz.checkAnswer(selectedAnswer)) { - quiz.moveToNextQuestion(); - 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. + 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) + console.log(quiz.correctAnswers) + quiz.moveToNextQuestion(); + showQuestion(); + + } + } function showResults() { - // YOUR CODE HERE: - // + + clearInterval(timer); // 1. Hide the quiz view (div#quizView) quizView.style.display = "none"; // 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 ${quiz.correctAnswers} out of ${quiz.questions.length} correct answers!`; // This value is hardcoded as a placeholder - } - - function restartButtonHandler(){ + + + function restartButtonHandler() { endView.style.display = "none"; quizView.style.display = "block"; quiz.currentQuestionIndex = 0; quiz.correctAnswers = 0; quiz.timeRemaining = quizDuration; + timeRemainingContainer.innerText = `${minutes}:${seconds}`; quiz.shuffleQuestions(); + let timer; + timer = setInterval(()=> { + quiz.timeRemaining --; + 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 + const timeRemainingContainer = document.getElementById("timeRemaining"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; + if (quiz.timeRemaining === 0 ){ + clearInterval(timer); + showResults(); + } + },1000) showQuestion(); - - } -}); \ No newline at end of file +}); diff --git a/src/quiz.js b/src/quiz.js index 9604c9c1..2e13c5de 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -22,32 +22,6 @@ class Quiz { this.currentQuestionIndex++; } -<<<<<<< HEAD - // 5. checkAnswer(answer) - //should increase correctAnswers by 1 when called with a correct answer for the current question - - checkAnswer(answer){ - if (answer === this.questions[this.currentQuestionIndex].answer){ - this.correctAnswers++ - } - return this.correctAnswers - } - - - - // 6. hasEnded() - //should return false when currentQuestionIndex is less than the questions array length - //should return true when currentQuestionIndex is equal to the questions array length - hasEnded(){ - if (this.currentQuestionIndex < this.questions.length){ - return false - } - else if (this.currentQuestionIndex = this.questions.length){ - return true - } -} - -======= // 4. shuffleQuestions() //should shuffle the items in the questions array. shuffleQuestions() { @@ -82,7 +56,6 @@ class Quiz { return true; } } ->>>>>>> 23762b66b9e6eac1a7c0c28a30b5fb90218d0fea filterQuestionsByDifficulty(difficulty) { if (difficulty >= 1 && difficulty <= 3) { @@ -90,7 +63,6 @@ class Quiz { return element.difficulty === difficulty; }); -<<<<<<< HEAD return this.questions } } @@ -106,17 +78,4 @@ class Quiz { return total / this.questions.length } -======= - return this.questions; - } - } - - averageDifficulty() { - const total = this.questions.reduce((sum, element) => { - return sum + element.difficulty; - }, 0); - - return total / this.questions.length; - } ->>>>>>> 23762b66b9e6eac1a7c0c28a30b5fb90218d0fea }