From 33fbdcd9cb5c9197d91a6e9932103c6b768b6b5a Mon Sep 17 00:00:00 2001 From: Alexandra Domareski Date: Mon, 24 Nov 2025 18:01:08 +0100 Subject: [PATCH 1/5] implementing the classes Question and Quiz and started the methods --- src/question.js | 21 +++++++++++++++++---- src/quiz.js | 40 ++++++++++++++++++++++++++++++++-------- 2 files changed, 49 insertions(+), 12 deletions(-) diff --git a/src/question.js b/src/question.js index 68f6631a..0724d60d 100644 --- a/src/question.js +++ b/src/question.js @@ -1,7 +1,20 @@ 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 = difficulty; + } + + shuffleChoices() { + // for(let i=this.choices.length -1; i > 0; i--) { + + // const j = Math.floor(Math.random() * (i+1)) + // [this.choices[i], this.choices[j]] = [this.choices[j], this.choices[i]] + // } + this.choices.sort(() => Math.random() - 0.5); + return this.choices; + } + } \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..7812143b 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,39 @@ class Quiz { - // YOUR CODE HERE: - // - // 1. constructor (questions, timeLimit, timeRemaining) - // 2. getQuestion() + 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] + } - // 3. moveToNextQuestion() + moveToNextQuestion() { + this.currentQuestionIndex++ + } + + shuffleQuestions() { + // for(let i=this.questions.length -1; i > 0; i--) { - // 4. shuffleQuestions() + // const quiz = Math.floor(Math.random()*(i+1)) + // [this.questions[i], this.questions[quiz]] = [this.questions[quiz], this.questions[i]] + // } + this.questions.sort(() => Math.random() - 0.5); + return this.questions; + } - // 5. checkAnswer(answer) + checkAnswer(answer) { + const currentQuestion = this.getQuestion(); + if(answer === currentQuestion.answer) { + this.correctAnswers++ + } + } - // 6. hasEnded() + hasEnded() { + return this.currentQuestionIndex >= this.questions.length + } } \ No newline at end of file From 6d495b0ac63a044a0cbb20c9d95d1df657638586 Mon Sep 17 00:00:00 2001 From: Luis Castro Date: Mon, 24 Nov 2025 17:45:02 +0000 Subject: [PATCH 2/5] Updated alternative solution --- src/question.js | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/question.js b/src/question.js index 0724d60d..61ca9120 100644 --- a/src/question.js +++ b/src/question.js @@ -1,20 +1,20 @@ class Question { + constructor(text, choices, answer, difficulty) { + this.text = text; + this.choices = choices; + this.answer = answer; + this.difficulty = difficulty; + } - 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 j = Math.floor(Math.random() * (i+1)) - // [this.choices[i], this.choices[j]] = [this.choices[j], this.choices[i]] - // } - this.choices.sort(() => Math.random() - 0.5); - return this.choices; - } - + shuffleChoices() { + // //*************************** WORKING ALTERNATIVE WITHOUT .sort ************************ + // for (let i = this.choices.length - 1; i > 0; i--) { + // const j = Math.floor(Math.random() * (i + 1)); + // const temp = this.choices[i]; + // this.choices[i] = this.choices[j]; + // this.choices[j] = temp; + // } + this.choices.sort(() => Math.random() - 0.5); + return this.choices; + } } \ No newline at end of file From b55ab5d98367952d6b846c7e9bdd4e6069071562 Mon Sep 17 00:00:00 2001 From: Alexandra Domareski Date: Tue, 25 Nov 2025 17:42:28 +0100 Subject: [PATCH 3/5] created some methods --- src/question.js | 1 + src/quiz.js | 17 +++++++++++++++++ 2 files changed, 18 insertions(+) diff --git a/src/question.js b/src/question.js index 61ca9120..9d6dea78 100644 --- a/src/question.js +++ b/src/question.js @@ -14,6 +14,7 @@ class Question { // this.choices[i] = this.choices[j]; // this.choices[j] = temp; // } + this.choices.sort(() => Math.random() - 0.5); return this.choices; } diff --git a/src/quiz.js b/src/quiz.js index 7812143b..e5f3e7a1 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -36,4 +36,21 @@ class Quiz { hasEnded() { return this.currentQuestionIndex >= this.questions.length } + + filterQuestionsByDifficulty(difficulty) { + if(typeof difficulty !== "number" || difficulty < 1 || difficulty > 3) { + return; + } + this.questions = this.questions.filter(question => question.difficulty === difficulty) + } + + averageDifficulty() { + if( this.questions.length === 0) { + return 0 + } + const total = this.questions.reduce((acc, currentNumber) => { + return acc + currentNumber.difficulty; + }, 0) + return total /this.questions.length + } } \ No newline at end of file From f57546c07504b52554adf9b2b66bd0556fb39665 Mon Sep 17 00:00:00 2001 From: Alexandra Domareski Date: Wed, 26 Nov 2025 17:50:27 +0100 Subject: [PATCH 4/5] DOM manipulation --- index.html | 2 +- src/index.js | 152 +++++++++++++++++++++++++++++++++------------------ 2 files changed, 99 insertions(+), 55 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..c80fd431 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,84 +99,120 @@ 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) / quiz.questions.length) * 100 + }%`; // This value is hardcoded as a placeholder - - // 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 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`. - // 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. - + // 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) => { + const input = document.createElement("input"); + input.type = "radio"; + input.name = "choice"; + input.value = choice; + + const label = document.createElement("label"); + label.innerText = choice; + + choiceContainer.appendChild(input); + choiceContainer.appendChild(label); + choiceContainer.appendChild(document.createElement("br")); + }); } - - - function nextButtonHandler () { - let selectedAnswer; // A variable to store the selected answer value - - + function nextButtonHandler() { + let selectedAnswer = null; // 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. + // 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()`. - } + // 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) quizView.style.display = "none"; // 2. Show the end view (div#endView) - endView.style.display = "flex"; - + endView.style.display = "block"; + // 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 + }!`; // This value is hardcoded as a placeholder } - -}); \ No newline at end of file + restartButton.addEventListener("click" , restartQuiz); + + function restartQuiz(){ + endView.style.display = "none"; + quizView.style.display = "block"; + quiz.currentQuestionIndex = 0; + quiz.correctAnswers = 0; + quiz.shuffleQuestions(); + + showQuestion(); + + } +}); + + + + From 0fb4f432f3b624133792f2e485ebae75848fecff Mon Sep 17 00:00:00 2001 From: Alexandra Domareski Date: Thu, 27 Nov 2025 17:48:31 +0100 Subject: [PATCH 5/5] inseting the setTimeout and the setInterval --- src/index.js | 51 ++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 36 insertions(+), 15 deletions(-) diff --git a/src/index.js b/src/index.js index c80fd431..a5093d85 100644 --- a/src/index.js +++ b/src/index.js @@ -10,7 +10,8 @@ document.addEventListener("DOMContentLoaded", () => { const questionContainer = document.querySelector("#question"); const choiceContainer = document.querySelector("#choices"); const nextButton = document.querySelector("#nextButton"); - const restartButton =document.querySelector("#restartButton"); + const restartButton = document.querySelector("#restartButton"); + // End view elements const resultContainer = document.querySelector("#result"); @@ -58,21 +59,40 @@ 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) - .toString() - .padStart(2, "0"); - const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); + + function updateTimeDisplay() { + 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}`; + } + updateTimeDisplay(); + + /************ TIMER ************/ - // Display the time remaining in the time remaining container - const timeRemainingContainer = document.getElementById("timeRemaining"); - timeRemainingContainer.innerText = `${minutes}:${seconds}`; + let timer; // Show first question showQuestion(); + startCountdown(); - /************ TIMER ************/ - let timer; +function startCountdown() { + timer = setInterval(() => { + quiz.timeRemaining--; + updateTimeDisplay(); + + if(quiz.timeRemaining <= 0){ + clearInterval(timer); + showResults(); + } + }, 1000); +}; + /************ EVENT LISTENERS ************/ @@ -177,9 +197,6 @@ document.addEventListener("DOMContentLoaded", () => { quiz.checkAnswer(selectedAnswer) quiz.moveToNextQuestion(); - - - showQuestion(); } } @@ -189,6 +206,7 @@ document.addEventListener("DOMContentLoaded", () => { // YOUR CODE HERE: // // 1. Hide the quiz view (div#quizView) + clearInterval(timer); quizView.style.display = "none"; // 2. Show the end view (div#endView) @@ -207,12 +225,15 @@ document.addEventListener("DOMContentLoaded", () => { quiz.currentQuestionIndex = 0; quiz.correctAnswers = 0; quiz.shuffleQuestions(); + quiz.timeRemaining = quizDuration; - showQuestion(); - + updateTimeDisplay(); + startCountdown(); + showQuestion(); } }); +