From 458b2cc143b8a3f78ba53b481767cd14b1a36217 Mon Sep 17 00:00:00 2001 From: Sosha Fedotovskaia Date: Mon, 24 Feb 2025 17:17:10 +0100 Subject: [PATCH 1/6] add new commit --- src/question.js | 15 ++++++++++----- src/quiz.js | 40 +++++++++++++++++++++++++++++++--------- 2 files changed, 41 insertions(+), 14 deletions(-) diff --git a/src/question.js b/src/question.js index 68f6631a..42c5fbf1 100644 --- a/src/question.js +++ b/src/question.js @@ -1,7 +1,12 @@ 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() { + const shuffledArray = this.choices.sort((a, b) => 0.5 - Math.random()); + return shuffledArray; + } } \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..01167a5d 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,37 @@ class Quiz { - // YOUR CODE HERE: - // - // 1. constructor (questions, timeLimit, timeRemaining) + constructor (questions, timeLimit, timeRemaining) { + this.questions = questions; // array + this.timeLimit = timeLimit; // number + this.timeRemaining = timeRemaining; // number + this.correctAnswers = 0; + this.currentQuestionIndex = 0; + } - // 2. getQuestion() + getQuestion() { + return this.questions [this.currentQuestionIndex]; + + } - // 3. moveToNextQuestion() + moveToNextQuestion() { + this.currentQuestionIndex += 1; + } + + shuffleQuestions() { + const shuffledQuestions = this.questions.sort((a, b) => 0.5 - Math.random()); + return shuffledQuestions; + } + checkAnswer(answer) { + this.correctAnswers +=1; + } - // 4. shuffleQuestions() + hasEnded() { - // 5. checkAnswer(answer) + if (this.currentQuestionIndex < this.questions.length) { + return false; + } + else { + return true; + } + } - // 6. hasEnded() -} \ No newline at end of file +} From 2e16940eb19e8e2c4a8139f0e0071ad9817fdf1b Mon Sep 17 00:00:00 2001 From: Krists Krievins Date: Tue, 25 Feb 2025 17:20:02 +0100 Subject: [PATCH 2/6] Day 2 Solved --- src/quiz.js | 76 +++++++++++++++++++++++++++++++++-------------------- 1 file changed, 48 insertions(+), 28 deletions(-) diff --git a/src/quiz.js b/src/quiz.js index 01167a5d..db7c3572 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,37 +1,57 @@ class Quiz { - constructor (questions, timeLimit, timeRemaining) { - this.questions = questions; // array - this.timeLimit = timeLimit; // number - this.timeRemaining = timeRemaining; // number - this.correctAnswers = 0; - this.currentQuestionIndex = 0; - } + constructor(questions, timeLimit, timeRemaining) { + this.questions = questions; // array + this.timeLimit = timeLimit; // number + this.timeRemaining = timeRemaining; // number + this.correctAnswers = 0; + this.currentQuestionIndex = 0; + } - getQuestion() { - return this.questions [this.currentQuestionIndex]; + getQuestion() { + return this.questions[this.currentQuestionIndex]; + } - } - - moveToNextQuestion() { - this.currentQuestionIndex += 1; - } + moveToNextQuestion() { + this.currentQuestionIndex += 1; + } - shuffleQuestions() { - const shuffledQuestions = this.questions.sort((a, b) => 0.5 - Math.random()); - return shuffledQuestions; - } - checkAnswer(answer) { - this.correctAnswers +=1; - } + shuffleQuestions() { + const shuffledQuestions = this.questions.sort( + (a, b) => 0.5 - Math.random() + ); + return shuffledQuestions; + } + checkAnswer(answer) { + this.correctAnswers += 1; + } - hasEnded() { + hasEnded() { + if (this.currentQuestionIndex < this.questions.length) { + return false; + } else { + return true; + } + } - if (this.currentQuestionIndex < this.questions.length) { - return false; - } - else { - return true; + filterQuestionsByDifficulty(difficulty) { + // difficulty between 1 - 3 + if (difficulty > 0 && difficulty <= 3) { + const filteredQuestions = this.questions.filter((oneQuestion) => { + if (oneQuestion.difficulty === difficulty) { + return true; + } else { + return false; } + }); + this.questions = filteredQuestions; + } else { + return false; } - + } + averageDifficulty() { + const difficultySum = this.questions.reduce((acc, current) => { + return acc + current.difficulty; + }, 0); + return difficultySum / this.questions.length; + } } From 84eb1a9784177cb7c5e42e51df6f57d870752afb Mon Sep 17 00:00:00 2001 From: Krists Krievins Date: Wed, 26 Feb 2025 18:06:56 +0100 Subject: [PATCH 3/6] Two of Four tasks done --- index.html | 6 +-- src/index.js | 121 +++++++++++++++++++++++++++++---------------------- 2 files changed, 71 insertions(+), 56 deletions(-) diff --git a/index.html b/index.html index 534cd886..765f139f 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 03737ba3..6b2d7aeb 100644 --- a/src/index.js +++ b/src/index.js @@ -14,39 +14,52 @@ 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 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 +69,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()) { @@ -88,77 +95,88 @@ document.addEventListener("DOMContentLoaded", () => { choiceContainer.innerHTML = ""; // Get the current question from the quiz by calling the Quiz class method `getQuestion()` + console.log(quiz); 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 currentIndexPercent = quiz.currentQuestionIndex * 25; + // 3 - // 3. Update the question count text + progressBar.style.width = `${currentIndexPercent}%`; // 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. + + quiz.questions[quiz.currentQuestionIndex].choices.forEach((oneChoice) => { + choiceContainer.innerHTML += ` + +
`; + }); + // 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. } - - - 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 allChoiceElements = document.querySelectorAll("input"); + console.log(allChoiceElements); // 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. - - - // 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()`. - } + // 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. + allChoiceElements.forEach((oneChoice) => { + if (oneChoice.checked === true) { + selectedAnswer = oneChoice.value; + } else { + return false; + } + }); + console.log(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()`. + // Show the next question by calling the function `showQuestion()`. + } function showResults() { - // YOUR CODE HERE: // // 1. Hide the quiz view (div#quizView) @@ -166,9 +184,8 @@ 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 } - -}); \ No newline at end of file +}); From 9969c662cecc44e7f0928256a5fd4d4729c05cae Mon Sep 17 00:00:00 2001 From: Krists Krievins Date: Thu, 27 Feb 2025 16:51:39 +0100 Subject: [PATCH 4/6] Adding Timer --- index.html | 4 +++- src/index.js | 33 +++++++++++++++++++++++++-------- src/quiz.js | 4 +++- 3 files changed, 31 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 765f139f..4c7a93ce 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,9 @@

JavaScript Quiz

- + diff --git a/src/index.js b/src/index.js index 6b2d7aeb..08dbb03b 100644 --- a/src/index.js +++ b/src/index.js @@ -13,6 +13,7 @@ document.addEventListener("DOMContentLoaded", () => { // End view elements const resultContainer = document.querySelector("#result"); + const restartButton = document.querySelector("restartButton"); /************ SET VISIBILITY OF VIEWS ************/ @@ -153,7 +154,6 @@ document.addEventListener("DOMContentLoaded", () => { // 1. Get all the choice elements. You can use the `document.querySelectorAll()` method. const allChoiceElements = document.querySelectorAll("input"); - console.log(allChoiceElements); // 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`). @@ -171,6 +171,14 @@ document.addEventListener("DOMContentLoaded", () => { console.log(selectedAnswer); // 3. If an answer is selected (`selectedAnswer`), check if it is correct and move to the next question + // if (selectedAnswer === ) + + if (selectedAnswer) { + quiz.checkAnswer(selectedAnswer); + quiz.moveToNextQuestion(); + 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()`. @@ -178,14 +186,23 @@ document.addEventListener("DOMContentLoaded", () => { 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"; + if (quiz.hasEnded() === true) { + // 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!`; + } + } - // 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 + restartButton.addEventListener("click", restartQuiz); + function restartQuiz() { + endView.style.display = "none"; + quizView.style.display = "block"; + quiz.currentAnswers = 0; + quiz.shuffleQuestions(); + showQuestion(); } }); diff --git a/src/quiz.js b/src/quiz.js index db7c3572..c36ebe08 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -22,7 +22,9 @@ class Quiz { return shuffledQuestions; } checkAnswer(answer) { - this.correctAnswers += 1; + if (answer === this.questions[this.currentQuestionIndex].answer) { + this.correctAnswers += 1; + } } hasEnded() { From 774a39ccb3d92c5219535ae758d215ac702d05e9 Mon Sep 17 00:00:00 2001 From: Sosha Fedotovskaia Date: Thu, 27 Feb 2025 17:57:04 +0100 Subject: [PATCH 5/6] done --- src/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 08dbb03b..81c2cde7 100644 --- a/src/index.js +++ b/src/index.js @@ -13,7 +13,7 @@ document.addEventListener("DOMContentLoaded", () => { // End view elements const resultContainer = document.querySelector("#result"); - const restartButton = document.querySelector("restartButton"); + const restartButton = document.getElementById("restartButton"); /************ SET VISIBILITY OF VIEWS ************/ @@ -71,7 +71,6 @@ document.addEventListener("DOMContentLoaded", () => { showQuestion(); /************ TIMER ************/ - let timer; /************ EVENT LISTENERS ************/ @@ -201,7 +200,8 @@ document.addEventListener("DOMContentLoaded", () => { function restartQuiz() { endView.style.display = "none"; quizView.style.display = "block"; - quiz.currentAnswers = 0; + quiz.currentQuestionIndex = 0; + quiz.correctAnswers = 0; quiz.shuffleQuestions(); showQuestion(); } From c5e40a62a51aacc9e7af53fc26389a86a5622568 Mon Sep 17 00:00:00 2001 From: Krists Krievins Date: Fri, 28 Feb 2025 09:02:26 +0100 Subject: [PATCH 6/6] All Done --- src/index.js | 39 +++++++++++++++++++++++++++++---------- 1 file changed, 29 insertions(+), 10 deletions(-) diff --git a/src/index.js b/src/index.js index 81c2cde7..442c6d77 100644 --- a/src/index.js +++ b/src/index.js @@ -54,25 +54,39 @@ document.addEventListener("DOMContentLoaded", () => { const quiz = new Quiz(questions, quizDuration, quizDuration); // Shuffle the quiz questions quiz.shuffleQuestions(); + startTimer(); /************ 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"); + // 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}`; + // // Display the time remaining in the time remaining container + // const timeRemainingContainer = document.getElementById("timeRemaining"); + // timeRemainingContainer.innerText = `${minutes}:${seconds}`; + /************ TIMER ************/ + function startTimer(setTimer) { + let timer = setTimer; + timer = setInterval(function () { + quiz.timeRemaining--; + console.log(quiz.timeRemaining); + // Convert time + const minutes = Math.floor(quiz.timeRemaining / 60) + .toString() + .padStart(2, "0"); + const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); + // Update Time in HTML + const timeRemainingContainer = document.getElementById("timeRemaining"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; + }, 1000); + } // Show first question showQuestion(); - /************ TIMER ************/ - let timer; - /************ EVENT LISTENERS ************/ nextButton.addEventListener("click", nextButtonHandler); @@ -193,6 +207,9 @@ 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 ${quiz.correctAnswers} out of ${quiz.questions.length} correct answers!`; + // 4. Stop the timer + // Clear Timer + clearInterval(timer); } } @@ -204,5 +221,7 @@ document.addEventListener("DOMContentLoaded", () => { quiz.correctAnswers = 0; quiz.shuffleQuestions(); showQuestion(); + quiz.timeRemaining = quizDuration; + startTimer(0); } });