From 1b4cfb3b3ec791289366d4cd6e9408075fabc115 Mon Sep 17 00:00:00 2001 From: Kateryna Soloviova Date: Mon, 23 Jun 2025 15:32:17 +0200 Subject: [PATCH 1/4] Solved tasks of Quiz for Day1 and Day2 --- src/question.js | 23 +++++++++++---- src/quiz.js | 74 ++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 82 insertions(+), 15 deletions(-) diff --git a/src/question.js b/src/question.js index 68f6631a..2e3c5bbb 100644 --- a/src/question.js +++ b/src/question.js @@ -1,7 +1,20 @@ class Question { - // 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; + } + shuffleChoices() { + let i = this.choices.lenght; + let j = 0; + let temp = 0; + for (let i = this.choices.length - 1; i >= 0; i--) { + j = Math.floor(Math.random() * (i + 1)); + temp = this.choices[i]; + this.choices[i] = this.choices[j]; + this.choices[j] = temp; + } - // 2. shuffleChoices() -} \ No newline at end of file + } +} diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..ad6d195b 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,69 @@ 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() - - // 3. moveToNextQuestion() + getQuestion() { + return this.questions[this.currentQuestionIndex]; + } - // 4. shuffleQuestions() + moveToNextQuestion() { + this.currentQuestionIndex++; + } - // 5. checkAnswer(answer) + shuffleQuestions() { + let j = 0; + let temp = 0; + for (let i = this.questions.length - 1; i >= 0; i--) { + j = Math.floor(Math.random() * (i + 1)); + temp = this.questions[i]; + this.questions[i] = this.questions[j]; + this.questions[j] = temp; + } + } - // 6. hasEnded() -} \ No newline at end of file + checkAnswer(answer) { + if (this.questions[this.currentQuestionIndex].answer === answer) { + this.correctAnswers++; + } + } + + hasEnded() { + if (this.currentQuestionIndex < this.questions.length) { + return false; + } + return true; + } + + filterQuestionsByDifficulty(difficulty) { + if (difficulty >= 1 && difficulty <= 3) { + this.questions = this.questions.filter(function (question) { + return question.difficulty === difficulty; + }) + } + } + + averageDifficulty() { + const sum = this.questions.reduce(function (acc, question) { + return acc + question.difficulty + }, 0); + + return sum/this.questions.length; + } +} + +const q1 = new Question("1*2",[2, 3, 4, 6], 2, 2) +q1.shuffleChoices(); + +const q2 = new Question("4+2",[7, 8, 4, 6], 6, 2) +q2.shuffleChoices(); + +const game = new Qiuz([q1, q2], 2, 1) + + + +console.log(q.choices) \ No newline at end of file From bf9b18010245f6f06497fe4ded71c6a4e5b816e4 Mon Sep 17 00:00:00 2001 From: Kateryna Soloviova Date: Thu, 26 Jun 2025 00:32:06 +0200 Subject: [PATCH 2/4] Solved tasks of Quiz Project for the Day 3 --- index.html | 2 +- src/index.js | 112 ++++++++++++++++++++++++++++++++++----------------- src/quiz.js | 12 ------ 3 files changed, 76 insertions(+), 50 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..3ae7e484 100644 --- a/src/index.js +++ b/src/index.js @@ -10,6 +10,7 @@ document.addEventListener("DOMContentLoaded", () => { const questionContainer = document.querySelector("#question"); const choiceContainer = document.querySelector("#choices"); const nextButton = document.querySelector("#nextButton"); + const resetBtn = document.getElementById("restartButton") // End view elements const resultContainer = document.querySelector("#result"); @@ -23,7 +24,7 @@ document.addEventListener("DOMContentLoaded", () => { /************ QUIZ DATA ************/ - + // Array with the quiz questions const questions = [ new Question("What is 2 + 2?", ["3", "4", "5", "6"], "4", 1), @@ -36,7 +37,7 @@ document.addEventListener("DOMContentLoaded", () => { /************ QUIZ INSTANCE ************/ - + // Create a new Quiz instance object const quiz = new Quiz(questions, quizDuration, quizDuration); // Shuffle the quiz questions @@ -65,6 +66,7 @@ document.addEventListener("DOMContentLoaded", () => { /************ EVENT LISTENERS ************/ nextButton.addEventListener("click", nextButtonHandler); + resetBtn.addEventListener("click", resetButtonHandler); @@ -91,48 +93,65 @@ 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 + 1) * 100 / quiz.questions.length}%`; // 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`. - // 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. + // 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: - } + // + // + //
+ + question.choices.forEach((choice) => { + const radioInputElement = document.createElement("input") + radioInputElement.type = "radio"; + radioInputElement.name = "choice"; + radioInputElement.value = choice; + + const label = document.createElement("label"); + label.innerText = choice; + choiceContainer.appendChild(radioInputElement); + choiceContainer.appendChild(label); + + const br = document.createElement("br"); + choiceContainer.appendChild(br); + + }); - - function nextButtonHandler () { + + // 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 @@ -141,21 +160,32 @@ document.addEventListener("DOMContentLoaded", () => { // // 1. Get all the choice elements. You can use the `document.querySelectorAll()` method. + const allChoices = document.querySelectorAll("input"); + // 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. - - // 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()`. - } + allChoices.forEach((choice) => { + if (choice.checked === true) { + 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()`. + + quiz.checkAnswer(selectedAnswer); + quiz.moveToNextQuestion(); + showQuestion(); + } + function showResults() { @@ -166,9 +196,17 @@ 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 + } + + function resetButtonHandler() { + endView.style.display = "none"; + quizView.style.display = "flex"; + quiz.currentQuestionIndex = 0; + quiz.correctAnswers = 0; + quiz.shuffleQuestions(); + showQuestion(); } - -}); \ No newline at end of file +}); diff --git a/src/quiz.js b/src/quiz.js index ad6d195b..a139a643 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -55,15 +55,3 @@ class Quiz { return sum/this.questions.length; } } - -const q1 = new Question("1*2",[2, 3, 4, 6], 2, 2) -q1.shuffleChoices(); - -const q2 = new Question("4+2",[7, 8, 4, 6], 6, 2) -q2.shuffleChoices(); - -const game = new Qiuz([q1, q2], 2, 1) - - - -console.log(q.choices) \ No newline at end of file From 5b720180f0bac117e5e98092a70fe815a7286d45 Mon Sep 17 00:00:00 2001 From: Kateryna Soloviova Date: Thu, 26 Jun 2025 18:06:48 +0200 Subject: [PATCH 3/4] Solved tasks from the lab Quiz for the Day 4 --- src/index.js | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 3ae7e484..9c46188e 100644 --- a/src/index.js +++ b/src/index.js @@ -60,7 +60,27 @@ document.addEventListener("DOMContentLoaded", () => { /************ TIMER ************/ - let timer; + function timerHandler(){ + quiz.timeRemaining--; + if (quiz.timeRemaining > 0) { + const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); + const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); + + const timeRemainingContainer = document.getElementById("timeRemaining"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; + } else { + quizView.style.display = "none"; + endView.style.display = "block"; + clearInterval(timer); + + showResults(); + + } + + } + + let timer = setInterval(timerHandler, 1000); + /************ EVENT LISTENERS ************/ @@ -208,5 +228,7 @@ document.addEventListener("DOMContentLoaded", () => { quiz.correctAnswers = 0; quiz.shuffleQuestions(); showQuestion(); + quiz.timeRemaining = 120; + timer = setInterval(timerHandler, 1000); } }); From f249b5e63843e03de1d1e61083ef5363f10c913f Mon Sep 17 00:00:00 2001 From: Kateryna Soloviova Date: Fri, 27 Jun 2025 18:23:28 +0200 Subject: [PATCH 4/4] fix: Code clean up --- src/index.js | 34 ++++++---------------------------- src/quiz.js | 2 +- 2 files changed, 7 insertions(+), 29 deletions(-) diff --git a/src/index.js b/src/index.js index 9c46188e..8060204e 100644 --- a/src/index.js +++ b/src/index.js @@ -31,6 +31,11 @@ document.addEventListener("DOMContentLoaded", () => { 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 planet is known as the Red Planet?", ["Earth", "Mars", "Jupiter", "Venus"], "Mars", 2), + new Question("What is the chemical symbol for water?", ["O2", "H2O", "CO2", "NaCl"], "H2O", 1), + new Question("Who painted the Mona Lisa?", ["Vincent Van Gogh", "Pablo Picasso", "Leonardo da Vinci", "Claude Monet"], "Leonardo da Vinci", 3), + new Question("What is the largest ocean on Earth?", ["Atlantic", "Indian", "Southern", "Pacific"], "Pacific", 3), + new Question("Which composer wrote the Fifth Symphony?", ["Mozart", "Bach", "Beethoven", "Chopin"], "Beethoven", 2), // Add more questions here ]; const quizDuration = 120; // 120 seconds (2 minutes) @@ -60,44 +65,34 @@ document.addEventListener("DOMContentLoaded", () => { /************ TIMER ************/ - function timerHandler(){ + function timerHandler() { quiz.timeRemaining--; if (quiz.timeRemaining > 0) { const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); - const timeRemainingContainer = document.getElementById("timeRemaining"); timeRemainingContainer.innerText = `${minutes}:${seconds}`; } else { quizView.style.display = "none"; endView.style.display = "block"; clearInterval(timer); - showResults(); - } - } let timer = setInterval(timerHandler, 1000); - - /************ EVENT LISTENERS ************/ nextButton.addEventListener("click", nextButtonHandler); resetBtn.addEventListener("click", resetButtonHandler); - - /************ 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()) { @@ -114,29 +109,22 @@ document.addEventListener("DOMContentLoaded", () => { // 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 = `${(quiz.currentQuestionIndex + 1) * 100 / quiz.questions.length}%`; // 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 ${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. @@ -159,43 +147,33 @@ document.addEventListener("DOMContentLoaded", () => { 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. - } 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"); - // 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. - allChoices.forEach((choice) => { if (choice.checked === true) { 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()`. diff --git a/src/quiz.js b/src/quiz.js index a139a643..f5c59be9 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -52,6 +52,6 @@ class Quiz { return acc + question.difficulty }, 0); - return sum/this.questions.length; + return sum / this.questions.length; } }