From 81c3d7869fd06b36d9121d314b763cddeea777e7 Mon Sep 17 00:00:00 2001 From: Haluk Joshua Gurel Date: Tue, 18 Feb 2025 11:27:04 +0100 Subject: [PATCH] mini-project completed --- index.html | 2 +- src/index.js | 200 ++++++++++++++++++++++++++++++++++-------------- src/question.js | 21 ++++- src/quiz.js | 62 ++++++++++++--- 4 files changed, 211 insertions(+), 74 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..75ce4dee 100644 --- a/src/index.js +++ b/src/index.js @@ -14,39 +14,60 @@ 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 ]; + console.log(questions[0]); const quizDuration = 120; // 120 seconds (2 minutes) - /************ QUIZ INSTANCE ************/ - + //Review the starter code provided in the index.js and index.html files. + /*Implement the DOM logic - function showQuestion(). +Implement the DOM logic - function nextButtonHandler(). +Implement the DOM logic - function showResults(). +Implement a “Restart Quiz” button and the logic to restart the quiz. +Commit your changes and push them to GitHub.*/ + { + } // 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 +77,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()) { @@ -83,6 +98,12 @@ document.addEventListener("DOMContentLoaded", () => { return; } + const minutes = Math.floor(quiz.timeRemaining / 60) + .toString() + .padStart(2, "0"); + const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; + // Clear the previous question text and question choices questionContainer.innerText = ""; choiceContainer.innerHTML = ""; @@ -91,74 +112,90 @@ 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 + const questionTag = document.createElement("p"); + questionTag.innerText = question.text; + questionContainer.appendChild(questionTag); - // 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 + function updateQuestionCount() { + // Display 1-based index for user (questions are typically 1-based from a user perspective) + questionCount.innerText = `Question ${quiz.currentQuestionIndex + 1} of ${ + quiz.questions.length + }`; + } + updateQuestionCount(); - // 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) => { + if (typeof choice !== "undefined") { + const inputElement = document.createElement("input"); + inputElement.type = "radio"; + inputElement.name = "choice"; + inputElement.value = choice; + + const labelElement = document.createElement("label"); + labelElement.innerText = choice; + + choiceContainer.appendChild(inputElement); + choiceContainer.appendChild(labelElement); + choiceContainer.appendChild(document.createElement("br")); + } + }); } + function nextButtonHandler() { + // Get the selected choice + const selectedChoiceElement = document.querySelector( + 'input[name="choice"]:checked' + ); - - function nextButtonHandler () { - let selectedAnswer; // A variable to store the selected answer value - + if (selectedChoiceElement) { + // Retrieve the user's selected answer + const selectedAnswer = selectedChoiceElement.value; + // Check if the selected answer is correct + quiz.checkAnswer(selectedAnswer); - // 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()`. - } - + // Move to the next question in the quiz + quiz.moveToNextQuestion(); + // Show the next question or results if the quiz is over + showQuestion(); + console.log("quiz.correctAnswers", quiz.correctAnswers); + } else { + // If no choice is selected, alert the user to select an answer + alert("Please select an answer before proceeding to the next question!"); + } + } function showResults() { - // YOUR CODE HERE: // // 1. Hide the quiz view (div#quizView) @@ -166,9 +203,54 @@ 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 ${questions.length} correct answers!`; // This value is hardcoded as a placeholder } + + const restartButton = document.getElementById("restartButton"); + function resetQuiz() { + // Reset quiz-related variables + quiz.currentQuestionIndex = 0; + quiz.correctAnswers = 0; + quiz.timeRemaining = quizDuration; + + // Optionally clear any selections or inputs + const questionInputs = document.querySelectorAll('input[name="choice"]'); + questionInputs.forEach((input) => (input.checked = false)); + + // Reset the views to show the first question + showQuestion(); + + // Display the quiz view and hide the end view + quizView.style.display = "block"; + endView.style.display = "none"; + + // Reset progress bar and UI updates if needed + progressBar.style.width = "0%"; + + clearInterval(timer); + + setInterval(showTimer, 1000); + } + + // Attach event listener to the Restart button + restartButton.addEventListener("click", resetQuiz); + + function showTimer() { + quiz.timeRemaining--; + const minutes = Math.floor(quiz.timeRemaining / 60) + .toString() + .padStart(2, "0"); + const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; -}); \ No newline at end of file + if (quiz.timeRemaining < 1) { + clearInterval(timer); + showResults(); + } + } + + setInterval(showTimer, 1000); +}); diff --git a/src/question.js b/src/question.js index 68f6631a..001a5932 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; + } + + + - // 2. shuffleChoices() + shuffleChoices() { + for (let i = this.choices.length; i > 0; i--) { + const j = Math.floor(Math.random() * (i)); + [this.choices[i], this.choices[j]] = [this.choices[j], this.choices[i]]; + } + return this.choices; + } } \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..c3b7f5f7 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,57 @@ -class Quiz { - // YOUR CODE HERE: - // - // 1. constructor (questions, timeLimit, timeRemaining) +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++; + } - // 2. getQuestion() + shuffleQuestions(){ + for (let i = this.questions.length -1; i > 0; i--) { + const j = Math.floor(Math.random() * (i)); + [this.questions[i], this.questions[j]] = [this.questions[j], this.questions[i]]; + } + console.log(this.questions) + } - // 3. moveToNextQuestion() - // 4. shuffleQuestions() + checkAnswer(answer){ + if (answer === this.getQuestion().answer) { + this.correctAnswers++; + } + } + + hasEnded(){ + if (this.currentQuestionIndex < this.questions.length) { + return false; + } else if (this.currentQuestionIndex = this.questions.length) { + return true; + } + } - // 5. checkAnswer(answer) - // 6. hasEnded() -} \ No newline at end of file + filterQuestionsByDifficulty(difficulty) { + if (difficulty >= 1 && difficulty <= 3) { + this.questions = this.questions.filter((question) => question.difficulty === difficulty); + } + } + + averageDifficulty() { + const reduce = this.questions.reduce((accumulator, current) => accumulator + current.difficulty, 0); + + const avg = reduce / this.questions.length; + + return avg; + } + +}