From 03c2666e5143dc314989a45a9d154e5c07545c59 Mon Sep 17 00:00:00 2001 From: Jihan Shamas Date: Mon, 20 Jan 2025 18:00:40 +0100 Subject: [PATCH 1/4] first day quiz --- src/question.js | 30 +++++++++++++++++++++++++----- src/quiz.js | 49 +++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 64 insertions(+), 15 deletions(-) diff --git a/src/question.js b/src/question.js index 68f6631a..7db75faa 100644 --- a/src/question.js +++ b/src/question.js @@ -1,7 +1,27 @@ class Question { - // YOUR CODE HERE: - // - // 1. constructor (text, choices, answer, difficulty) + // YOUR CODE HERE: + // + // 1. constructor (text, choices, answer, difficulty) - // 2. shuffleChoices() -} \ No newline at end of file + // 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--) { + // Generate a random index between 0 and i + const randomIndex = Math.floor(Math.random() * (i + 1)); + // Swap elements at index i and randomIndex + [this.choices[i], this.choices[randomIndex]] = [ + this.choices[randomIndex], + this.choices[i], + ]; + } + return this.choices; + } +} +const result = new Question(); diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..f1aca964 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,44 @@ class Quiz { - // YOUR CODE HERE: - // - // 1. constructor (questions, timeLimit, timeRemaining) + // YOUR CODE HERE: + // + 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() { + return this.currentQuestionIndex++; + } - // 5. checkAnswer(answer) + shuffleQuestions() { + for (let i = this.questions.length - 1; i > 0; i--) { + // Generate a random index between 0 and currentQuestionIndex + const randomIndex = Math.floor(Math.random() * (i + 1)); + // Swap elements at index i and randomIndex + [this.questions[i], this.questions[randomIndex]] = [ + this.questions[randomIndex], + this.questions[i], + ]; + } + return this.questions; + } - // 6. hasEnded() -} \ No newline at end of file + checkAnswer(answer) { + return this.correctAnswers++; + } + + hasEnded() { + if (this.currentQuestionIndex < this.questions.length) { + return false; + } else if ((this.currentQuestionIndex = this.questions.length)) { + return true; + } + } +} From 70b03b42d56b89fce9033604598dcdb3f377e59c Mon Sep 17 00:00:00 2001 From: Jihan Shamas Date: Tue, 21 Jan 2025 17:26:20 +0100 Subject: [PATCH 2/4] solved lab --- src/quiz.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/quiz.js b/src/quiz.js index f1aca964..6659f24b 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -41,4 +41,21 @@ class Quiz { return true; } } + + filterQuestionsByDifficulty(difficulty) { + if (difficulty < 1 || difficulty > 3 || typeof difficulty !== "number") { + return; + } + this.questions = this.questions.filter( + (question) => question.difficulty === difficulty + ); + } + + averageDifficulty(){ + const totalDifficulty = this.questions.reduce( + (acc, currentValue) => acc + currentValue.difficulty, + 0 + ); + return totalDifficulty / this.questions.length; + } } From 147642ac967c81097b50c311e26266d2a33816b3 Mon Sep 17 00:00:00 2001 From: Jihan Shamas Date: Wed, 22 Jan 2025 18:16:07 +0100 Subject: [PATCH 3/4] tried to create the quiz but its not working --- index.html | 2 +- src/index.js | 187 ++++++++++++++++++++++++++++++++------------------- src/quiz.js | 16 +++-- 3 files changed, 130 insertions(+), 75 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..f4773239 100644 --- a/src/index.js +++ b/src/index.js @@ -10,43 +10,58 @@ document.addEventListener("DOMContentLoaded", () => { const questionContainer = document.querySelector("#question"); const choiceContainer = document.querySelector("#choices"); const nextButton = document.querySelector("#nextButton"); + // Get the restart button element + 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 +71,28 @@ document.addEventListener("DOMContentLoaded", () => { // Show first question showQuestion(); - /************ TIMER ************/ let timer; - /************ EVENT LISTENERS ************/ nextButton.addEventListener("click", nextButtonHandler); - - - + // Add a click event listener to the restart button + restartButton.addEventListener("click", restartQuizHandler); /************ 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 restartQuizHandler() { + endView.style.display = "none"; + quizView.style.display = "block"; + quiz.currentIndex = 0; + quiz.correctAnswers = 0; + quiz.shuffleQuestions(); + showQuestion(); + } function showQuestion() { // If the quiz has ended, show the results if (quiz.hasEnded()) { @@ -91,84 +108,118 @@ 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 + questionContainer.innerText = question.text; + // Update the inner text of the question container element and show the question text - // 2. Update the green progress bar + const progressPercentage = + ((quiz.currentIndex + 1) / quiz.questions.length) * 100; + progressBar.style.width = `${progressPercentage}%`; // 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 - - // 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 1 of 10`; // This value is hardcoded as a placeholder - + questionCount.innerText = `Question ${quiz.currentIndex + 1} of ${ + quiz.questions.length + }`; + console.log(quiz.currentIndex + 1); // 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) => { + // Create a new input element + const inputElement = document.createElement("input"); + inputElement.type = "radio"; + inputElement.name = "choice"; + inputElement.value = choice; + inputElement.id = `choice${index}`; + + // Create a label for the input element + const labelElement = document.createElement("label"); + labelElement.htmlFor = `choice${index}`; + labelElement.innerText = choice; + + // Append the input and label to the choice container + choiceContainer.appendChild(inputElement); + choiceContainer.appendChild(labelElement); + choiceContainer.appendChild(document.createElement("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 = null; // Variable to store the selected answer - - 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. - + // 1. Get all the choice elements + 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; // Set the selected answer to the value of the checked input + } + }); + + // 3. If an answer is selected, check if it is correct and move to the next question + if (selectedAnswer) { + const isCorrect = quiz.checkAnswer(selectedAnswer); // Check if the selected answer is correct + if (isCorrect) { + console.log("Correct answer!"); + } else { + console.log("Wrong answer!"); + } + + quiz.moveToNextQuestion(); // Move to the next question + showQuestion(); // Show the next question + } else { + // No answer selected + alert("Please select an answer before proceeding."); + } + } - - // 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()`. - } + // 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. + // 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() { + quizView.style.display = "none"; + endView.style.display = "flex"; - function showResults() { + // Get and display the final score + const score = quiz.getCorrectAnswersCount(); + const totalQuestions = quiz.questions.length; + resultContainer.innerText = `You scored ${score} out of ${totalQuestions} correct answers!`; +} - // 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"; - - // 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 +}); diff --git a/src/quiz.js b/src/quiz.js index 6659f24b..eecd2670 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -51,11 +51,15 @@ class Quiz { ); } - averageDifficulty(){ - const totalDifficulty = this.questions.reduce( - (acc, currentValue) => acc + currentValue.difficulty, - 0 - ); - return totalDifficulty / this.questions.length; + averageDifficulty() { + const totalDifficulty = this.questions.reduce( + (acc, currentValue) => acc + currentValue.difficulty, + 0 + ); + return totalDifficulty / this.questions.length; + } + + getCorrectAnswersCount() { + return this.correctAnswers || 0; // Return the correctAnswers property } } From 82329099aba699e0d29df18d900ca8b854d39675 Mon Sep 17 00:00:00 2001 From: Jihan Shamas Date: Thu, 23 Jan 2025 09:18:56 +0100 Subject: [PATCH 4/4] fixed the progress bar and the restart button --- src/index.js | 238 +++++++++++++++++++++++---------------------------- 1 file changed, 107 insertions(+), 131 deletions(-) diff --git a/src/index.js b/src/index.js index f4773239..1aa124f9 100644 --- a/src/index.js +++ b/src/index.js @@ -1,30 +1,80 @@ document.addEventListener("DOMContentLoaded", () => { /************ HTML ELEMENTS ************/ - // View divs const quizView = document.querySelector("#quizView"); const endView = document.querySelector("#endView"); - - // Quiz view elements const progressBar = document.querySelector("#progressBar"); const questionCount = document.querySelector("#questionCount"); const questionContainer = document.querySelector("#question"); const choiceContainer = document.querySelector("#choices"); const nextButton = document.querySelector("#nextButton"); - // Get the restart button element const restartButton = document.querySelector("#restartButton"); - - // End view elements const resultContainer = document.querySelector("#result"); + const timeRemainingContainer = document.getElementById("timeRemaining"); + + /************ CLASS DEFINITIONS ************/ + class Question { + constructor(text, choices, correctAnswer, id) { + this.text = text; + this.choices = choices; + this.correctAnswer = correctAnswer; + this.id = id; + } + + shuffleChoices() { + this.choices.sort(() => Math.random() - 0.5); + } + + isCorrect(answer) { + return answer === this.correctAnswer; + } + } + + class Quiz { + constructor(questions, totalDuration) { + this.questions = questions; + this.totalDuration = totalDuration; // in seconds + this.timeRemaining = totalDuration; + this.currentIndex = 0; + this.correctAnswers = 0; + } + + getQuestion() { + return this.questions[this.currentIndex]; + } + + checkAnswer(answer) { + if (this.getQuestion().isCorrect(answer)) { + this.correctAnswers++; + return true; + } + return false; + } + + moveToNextQuestion() { + this.currentIndex++; + } + + hasEnded() { + return this.currentIndex >= this.questions.length; + } - /************ SET VISIBILITY OF VIEWS ************/ + getCorrectAnswersCount() { + return this.correctAnswers; + } - // Show the quiz view (div#quizView) and hide the end view (div#endView) - quizView.style.display = "block"; - endView.style.display = "none"; + shuffleQuestions() { + this.questions.sort(() => Math.random() - 0.5); + } - /************ QUIZ DATA ************/ + reset() { + this.currentIndex = 0; + this.correctAnswers = 0; + this.timeRemaining = this.totalDuration; + this.shuffleQuestions(); + } + } - // Array with the quiz questions + /************ QUIZ SETUP ************/ const questions = [ new Question("What is 2 + 2?", ["3", "4", "5", "6"], "4", 1), new Question( @@ -45,181 +95,107 @@ document.addEventListener("DOMContentLoaded", () => { "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 + const quiz = new Quiz(questions, 120); // 2-minute quiz duration 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 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(); - - /************ TIMER ************/ - let timer; /************ EVENT LISTENERS ************/ - nextButton.addEventListener("click", nextButtonHandler); - // Add a click event listener to the restart button restartButton.addEventListener("click", restartQuizHandler); + /************ FUNCTIONS ************/ + function startTimer() { + timer = setInterval(() => { + quiz.timeRemaining--; + updateTimeDisplay(); + if (quiz.timeRemaining <= 0) { + clearInterval(timer); + showResults(); + } + }, 1000); + } + + function updateTimeDisplay() { + const minutes = Math.floor(quiz.timeRemaining / 60) + .toString() + .padStart(2, "0"); + const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; + } - // 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 restartQuizHandler() { - endView.style.display = "none"; + clearInterval(timer); + quiz.reset(); quizView.style.display = "block"; - quiz.currentIndex = 0; - quiz.correctAnswers = 0; - quiz.shuffleQuestions(); + endView.style.display = "none"; + updateTimeDisplay(); + startTimer(); showQuestion(); } + function showQuestion() { - // If the quiz has ended, show the results if (quiz.hasEnded()) { + clearInterval(timer); showResults(); return; } - // Clear the previous question text and question choices - questionContainer.innerText = ""; - choiceContainer.innerHTML = ""; - - // Get the current question from the quiz by calling the Quiz class method `getQuestion()` 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 questionContainer.innerText = question.text; - - // Update the inner text of the question container element and show the question text - - // 2. Update the green progress bar - const progressPercentage = - ((quiz.currentIndex + 1) / quiz.questions.length) * 100; - progressBar.style.width = `${progressPercentage}%`; - // 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 - - // 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 - + progressBar.style.width = `${ + ((quiz.currentIndex + 1) / quiz.questions.length) * 100 + }%`; questionCount.innerText = `Question ${quiz.currentIndex + 1} of ${ quiz.questions.length }`; - console.log(quiz.currentIndex + 1); - // 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: - /* - - -
- */ + choiceContainer.innerHTML = ""; question.choices.forEach((choice, index) => { - // Create a new input element const inputElement = document.createElement("input"); inputElement.type = "radio"; inputElement.name = "choice"; inputElement.value = choice; inputElement.id = `choice${index}`; - // Create a label for the input element const labelElement = document.createElement("label"); labelElement.htmlFor = `choice${index}`; labelElement.innerText = choice; - // Append the input and label to the choice container choiceContainer.appendChild(inputElement); choiceContainer.appendChild(labelElement); choiceContainer.appendChild(document.createElement("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 = null; // Variable to store the selected answer - - // 1. Get all the choice elements const choices = document.querySelectorAll("input[name='choice']"); + let selectedAnswer = null; - // 2. Loop through all the choice elements and check which one is selected choices.forEach((choice) => { if (choice.checked) { - selectedAnswer = choice.value; // Set the selected answer to the value of the checked input + selectedAnswer = choice.value; } }); - // 3. If an answer is selected, check if it is correct and move to the next question if (selectedAnswer) { - const isCorrect = quiz.checkAnswer(selectedAnswer); // Check if the selected answer is correct - if (isCorrect) { - console.log("Correct answer!"); - } else { - console.log("Wrong answer!"); - } - - quiz.moveToNextQuestion(); // Move to the next question - showQuestion(); // Show the next question + quiz.checkAnswer(selectedAnswer); + quiz.moveToNextQuestion(); + showQuestion(); } else { - // No answer selected alert("Please select an answer before proceeding."); } } - // 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. - - // 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() { - quizView.style.display = "none"; - endView.style.display = "flex"; - - // Get and display the final score - const score = quiz.getCorrectAnswersCount(); - const totalQuestions = quiz.questions.length; - resultContainer.innerText = `You scored ${score} out of ${totalQuestions} correct answers!`; -} + function showResults() { + quizView.style.display = "none"; + endView.style.display = "flex"; + resultContainer.innerText = `You scored ${quiz.getCorrectAnswersCount()} out of ${ + quiz.questions.length + } correct answers!`; + } + /************ INITIAL SETUP ************/ + restartQuizHandler(); // Start the quiz on page load });