From 21121e65a926a04c11a6876415c6f3d432d26474 Mon Sep 17 00:00:00 2001 From: Raquel Lacorte Date: Mon, 23 Jun 2025 16:26:06 +0100 Subject: [PATCH 1/5] First day --- src/question.js | 16 +++++++++++++++- src/quiz.js | 49 +++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 60 insertions(+), 5 deletions(-) diff --git a/src/question.js b/src/question.js index 68f6631a..93eb6607 100644 --- a/src/question.js +++ b/src/question.js @@ -1,7 +1,21 @@ class Question { + constructor(text, choices, answer, difficulty) { + this.text = text; + this.choices = choices; + this.answer = answer; + this.difficulty = difficulty; + } + shuffleChoices() { + for(let i = this.choices.length - 1; i > 0; i-- ) { + const a = Math.floor(Math.random() * i +1); + [this.choices[i]], this.choices[a] = [this.choices[a], this.choices[i]]; + } + } +} // YOUR CODE HERE: + // // 1. constructor (text, choices, answer, difficulty) + // 2. shuffleChoices() -} \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..5becf202 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,5 +1,47 @@ -class Quiz { - // YOUR CODE HERE: +class Quiz { + 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() { + this.currentQuestionIndex++; + } + + shuffleQuestions() { + for(let i = this.questions.length - 1; i > 0; i-- ) { + const a = Math.floor(Math.random() * i +1); + [this.questions[i]], this.questions[a] = [this.questions[a], this.questions[i]]; + } + } + + checkAnswer(answer) { + if (answer === this.questions[this.currentQuestionIndex].answer) { + this.correctAnswers++; + } + + } + + hasEnded() { + if (this.currentQuestionIndex < this.questions.length) { + return false; + } else if (this.currentQuestionIndex === this.questions.length) { + return true; + } + + + + } +} + +// YOUR CODE HERE: // // 1. constructor (questions, timeLimit, timeRemaining) @@ -11,5 +53,4 @@ class Quiz { // 5. checkAnswer(answer) - // 6. hasEnded() -} \ No newline at end of file + // 6. hasEnded() \ No newline at end of file From 6a1be4259287da76fca78052a9220567a563cd6f Mon Sep 17 00:00:00 2001 From: Raquel Lacorte Date: Tue, 24 Jun 2025 16:16:13 +0100 Subject: [PATCH 2/5] Second day --- src/quiz.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/quiz.js b/src/quiz.js index 5becf202..45199226 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -39,6 +39,23 @@ class Quiz { } + + filterQuestionsByDifficulty(difficulty) { + if (difficulty >= 1 || difficulty <= 3) { + this.questions = this.questions.filter(function(question){ + if(question.difficulty === difficulty) { + return true; + } + }) + } + } + + averageDifficulty() { + const average = this.questions.reduce((accumulator, currentValue) => { + return accumulator + currentValue.difficulty; + },0) / this.questions.length; + return average + } } // YOUR CODE HERE: From b486ed9609685df83dee9518452a747ba7f52856 Mon Sep 17 00:00:00 2001 From: Raquel Lacorte Date: Wed, 25 Jun 2025 16:00:15 +0100 Subject: [PATCH 3/5] day three --- src/index.js | 63 +++++++++++++++++++++++++++++++++++++------------ src/question.js | 2 +- src/quiz.js | 17 +++++++++++++ 3 files changed, 66 insertions(+), 16 deletions(-) diff --git a/src/index.js b/src/index.js index 03737ba3..c1ba2bf2 100644 --- a/src/index.js +++ b/src/index.js @@ -98,19 +98,20 @@ 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 + progressBar.style.width = `${quiz.currentQuestionIndex}%` // 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} of 10`; // This value is hardcoded as a placeholder @@ -123,31 +124,63 @@ document.addEventListener("DOMContentLoaded", () => {
*/ - // 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. - - } - + console.log(question.choices) + question.choices.forEach((element, index) => { + const newRadio = document.createElement("input"); + //const uniqueId = `choice-${index}`; + + newRadio.setAttribute("type", "radio"); + newRadio.setAttribute("name", "choice"); + //newRadio.setAttribute("id", uniqueId); + newRadio.setAttribute("value", element); + + const newLabel = document.createElement("label"); + //newLabel.setAttribute("for", uniqueId); + newLabel.innerText = element.toString(); + + const newBr = document.createElement("br"); + choiceContainer.appendChild(newRadio); + choiceContainer.appendChild(newLabel); + choiceContainer.appendChild(newBr); + console.log(element) + }) + } + + + // 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. function nextButtonHandler () { - let selectedAnswer; // A variable to store the selected answer value - + //let selectedAnswer; // A variable to store the selected answer value + let selectedAnswer = null; // YOUR CODE HERE: // // 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`). // 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. - + nextButton.addEventListener("click", () => { + const inputs = document.querySelectorAll('input[name="choice"]'); + console.log(inputs) + inputs.forEach((input) => { + if (input.checked) { + console.log(input.value) + selectedAnswer = input.value; + + } + }) + quiz.checkAnswer(selectedAnswer); + quiz.moveToNextQuestion(); + showQuestion(); + }) + console.log("Final answer" ,selectedAnswer); // 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()`. diff --git a/src/question.js b/src/question.js index 93eb6607..bb3d594d 100644 --- a/src/question.js +++ b/src/question.js @@ -8,7 +8,7 @@ class Question { shuffleChoices() { for(let i = this.choices.length - 1; i > 0; i-- ) { const a = Math.floor(Math.random() * i +1); - [this.choices[i]], this.choices[a] = [this.choices[a], this.choices[i]]; + [this.choices[i], this.choices[a]] = [this.choices[a], this.choices[i]]; } } } diff --git a/src/quiz.js b/src/quiz.js index 5becf202..45199226 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -39,6 +39,23 @@ class Quiz { } + + filterQuestionsByDifficulty(difficulty) { + if (difficulty >= 1 || difficulty <= 3) { + this.questions = this.questions.filter(function(question){ + if(question.difficulty === difficulty) { + return true; + } + }) + } + } + + averageDifficulty() { + const average = this.questions.reduce((accumulator, currentValue) => { + return accumulator + currentValue.difficulty; + },0) / this.questions.length; + return average + } } // YOUR CODE HERE: From 50f7bb91a8e105adc511183d1368c75bcc4d72b2 Mon Sep 17 00:00:00 2001 From: navitat Date: Wed, 25 Jun 2025 20:27:50 +0200 Subject: [PATCH 4/5] fourth day - finished tasks --- index.html | 10 +-- src/index.js | 188 ++++++++++++++++++++++++++------------------------- src/quiz.js | 106 ++++++++++++++--------------- 3 files changed, 154 insertions(+), 150 deletions(-) diff --git a/index.html b/index.html index 534cd886..4c7a93ce 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@

JavaScript Quiz

- + - - - \ No newline at end of file + diff --git a/src/index.js b/src/index.js index c1ba2bf2..66e18a5b 100644 --- a/src/index.js +++ b/src/index.js @@ -10,43 +10,57 @@ document.addEventListener("DOMContentLoaded", () => { const questionContainer = document.querySelector("#question"); const choiceContainer = document.querySelector("#choices"); const nextButton = document.querySelector("#nextButton"); + const restartButton = document.querySelector("#restartButton"); // 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 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 + ), // 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,26 +70,20 @@ document.addEventListener("DOMContentLoaded", () => { // Show first question showQuestion(); - /************ TIMER ************/ let timer; - /************ 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()) { @@ -91,107 +99,96 @@ 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 - progressBar.style.width = `${quiz.currentQuestionIndex}%` - + //progressBar.style.width = `65%`; // This value is hardcoded as a placeholder + progressBar.style.width = `${ + (quiz.currentQuestionIndex / quiz.questions.length) * 100 + }%`; - // 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} 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`. - // 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: + /*
*/ - console.log(question.choices) - question.choices.forEach((element, index) => { - const newRadio = document.createElement("input"); - //const uniqueId = `choice-${index}`; - - newRadio.setAttribute("type", "radio"); - newRadio.setAttribute("name", "choice"); - //newRadio.setAttribute("id", uniqueId); - newRadio.setAttribute("value", element); - - const newLabel = document.createElement("label"); - //newLabel.setAttribute("for", uniqueId); - newLabel.innerText = element.toString(); - - const newBr = document.createElement("br"); - choiceContainer.appendChild(newRadio); - choiceContainer.appendChild(newLabel); - choiceContainer.appendChild(newBr); - console.log(element) - }) - } - - - // 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. - - - function nextButtonHandler () { + //console.log(question.choices); + question.choices.forEach((element, index) => { + const newRadio = document.createElement("input"); + //const uniqueId = `choice-${index}`; + + newRadio.setAttribute("type", "radio"); + newRadio.setAttribute("name", "choice"); + //newRadio.setAttribute("id", uniqueId); + newRadio.setAttribute("value", element); + + const newLabel = document.createElement("label"); + //newLabel.setAttribute("for", uniqueId); + newLabel.innerText = element.toString(); + + const newBr = document.createElement("br"); + choiceContainer.appendChild(newRadio); + choiceContainer.appendChild(newLabel); + choiceContainer.appendChild(newBr); + //console.log(element); + }); + } + + // 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. + + nextButton.addEventListener("click", nextButtonHandler); + function nextButtonHandler() { //let selectedAnswer; // A variable to store the selected answer value let selectedAnswer = null; - // YOUR CODE HERE: // // 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`). - // 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. - nextButton.addEventListener("click", () => { - const inputs = document.querySelectorAll('input[name="choice"]'); - console.log(inputs) - - inputs.forEach((input) => { - if (input.checked) { - console.log(input.value) - selectedAnswer = input.value; - - } - }) - quiz.checkAnswer(selectedAnswer); - quiz.moveToNextQuestion(); - showQuestion(); - }) - console.log("Final answer" ,selectedAnswer); + // 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 inputs = document.querySelectorAll('input[name="choice"]'); + //console.log(inputs); + + inputs.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()`. - } - - - + // 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()`. + console.log("Final answer", selectedAnswer); + quiz.checkAnswer(selectedAnswer); + quiz.moveToNextQuestion(); + showQuestion(); + } function showResults() { - // YOUR CODE HERE: // // 1. Hide the quiz view (div#quizView) @@ -199,9 +196,16 @@ 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.correctAnswers} out of ${quiz.questions.length} correct answers!`; // This value is hardcoded as a placeholder } - -}); \ No newline at end of file + + restartButton.addEventListener("click", () => { + endView.style.display = "none"; + quizView.style.display = "block"; + quiz.currentQuestionIndex = 0; + quiz.correctAnswers = 0; + showQuestion(); + }); +}); diff --git a/src/quiz.js b/src/quiz.js index 45199226..f0c121ff 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,73 +1,73 @@ -class Quiz { - constructor(questions, timeLimit, timeRemaining) { - this.questions = questions; - this.timeLimit = timeLimit; - this.timeRemaining = timeRemaining; - this.correctAnswers = 0; - this.currentQuestionIndex = 0; - } +class Quiz { + constructor(questions, timeLimit, timeRemaining) { + this.questions = questions; + this.timeLimit = timeLimit; + this.timeRemaining = timeRemaining; + this.correctAnswers = 0; + this.currentQuestionIndex = 0; + } - getQuestion() { + getQuestion() { return this.questions[this.currentQuestionIndex]; - } + } - moveToNextQuestion() { - this.currentQuestionIndex++; - } + moveToNextQuestion() { + this.currentQuestionIndex++; + } - shuffleQuestions() { - for(let i = this.questions.length - 1; i > 0; i-- ) { - const a = Math.floor(Math.random() * i +1); - [this.questions[i]], this.questions[a] = [this.questions[a], this.questions[i]]; - } + shuffleQuestions() { + for (let i = this.questions.length - 1; i > 0; i--) { + const a = Math.floor(Math.random() * i + 1); + [this.questions[i], this.questions[a]] = [ + this.questions[a], + this.questions[i], + ]; } + } - checkAnswer(answer) { - if (answer === this.questions[this.currentQuestionIndex].answer) { - this.correctAnswers++; - } - + checkAnswer(answer) { + if (answer === this.questions[this.currentQuestionIndex].answer) { + this.correctAnswers++; } + } - hasEnded() { - if (this.currentQuestionIndex < this.questions.length) { - return false; - } else if (this.currentQuestionIndex === this.questions.length) { - return true; - } - - - + 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(function(question){ - if(question.difficulty === difficulty) { - return true; } - }) + + filterQuestionsByDifficulty(difficulty) { + if (difficulty >= 1 || difficulty <= 3) { + this.questions = this.questions.filter(function (question) { + if (question.difficulty === difficulty) { + return true; } + }); } + } - averageDifficulty() { - const average = this.questions.reduce((accumulator, currentValue) => { - return accumulator + currentValue.difficulty; - },0) / this.questions.length; - return average - } + averageDifficulty() { + const average = + this.questions.reduce((accumulator, currentValue) => { + return accumulator + currentValue.difficulty; + }, 0) / this.questions.length; + return average; + } } // YOUR CODE HERE: - // - // 1. constructor (questions, timeLimit, timeRemaining) +// +// 1. constructor (questions, timeLimit, timeRemaining) + +// 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() From 29c60528e3441e387ed61576f53072bc0c0069bb Mon Sep 17 00:00:00 2001 From: navitat Date: Thu, 26 Jun 2025 17:41:31 +0200 Subject: [PATCH 5/5] solved lab --- src/index.js | 97 +++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 80 insertions(+), 17 deletions(-) diff --git a/src/index.js b/src/index.js index 66e18a5b..bbc85d3d 100644 --- a/src/index.js +++ b/src/index.js @@ -26,25 +26,43 @@ document.addEventListener("DOMContentLoaded", () => { // 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 ), + // Add more questions here + new Question( + "Which of the following is a JavaScript data type?", + ["Boolean", "Integer", "Float", "Character"], + "Boolean", + 0 + ), 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 + "What keyword is used to declare a constant in JavaScript?", + ["var", "const", "let", "define"], + "const", + 1 + ), + new Question( + "Which method converts a JSON string into a JavaScript object?", + ["JSON.parse()", "JSON.stringify()", "parseJSON()", "toObject()"], + "JSON.parse()", + 0 + ), + new Question( + "Which of the following is NOT a looping structure in JavaScript?", + ["for", "foreach", "while", "do-while"], + "foreach", + 1 + ), + new Question( + "What is the output of typeof null in JavaScript?", + ["'object'", "'null'", "'undefined'", "'boolean'"], + "'object'", + 0 ), - // Add more questions here ]; const quizDuration = 120; // 120 seconds (2 minutes) @@ -58,22 +76,38 @@ document.addEventListener("DOMContentLoaded", () => { /************ 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) + /*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}`; - - // Show first question - showQuestion(); + timeRemainingContainer.innerText = `${minutes}:${seconds}`;*/ /************ TIMER ************/ - let timer; + timer = setInterval(function () { + 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}`; + }, 1000); + + setTimeout(function () { + clearInterval(timer); + showResults(); + }, 120000); + + // Show first question + showQuestion(); + /************ EVENT LISTENERS ************/ nextButton.addEventListener("click", nextButtonHandler); @@ -85,12 +119,30 @@ document.addEventListener("DOMContentLoaded", () => { // showResults() - Displays the end view and the quiz results function showQuestion() { + clearInterval(timer); // If the quiz has ended, show the results if (quiz.hasEnded()) { showResults(); return; } + timer = setInterval(function () { + 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}`; + }, 1000); + + setTimeout(function () { + clearInterval(timer); + showResults(); + }, 120000); + // Clear the previous question text and question choices questionContainer.innerText = ""; choiceContainer.innerHTML = ""; @@ -190,6 +242,8 @@ document.addEventListener("DOMContentLoaded", () => { function showResults() { // YOUR CODE HERE: + clearInterval(timer); + // // 1. Hide the quiz view (div#quizView) quizView.style.display = "none"; @@ -206,6 +260,15 @@ document.addEventListener("DOMContentLoaded", () => { quizView.style.display = "block"; quiz.currentQuestionIndex = 0; quiz.correctAnswers = 0; + quiz.timeRemaining = quizDuration; + 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}`; showQuestion(); }); });