diff --git a/README.md b/README.md index e58dbd54..c7c236c0 100644 --- a/README.md +++ b/README.md @@ -1 +1,3 @@ # Project: JavaScript Quiz +Add extra features +Polishing files \ No newline at end of file diff --git a/index.html b/index.html index 534cd886..3b03046a 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@

JavaScript Quiz

Remaining Time: 00:00
- + @@ -39,7 +39,7 @@

JavaScript Quiz

- + diff --git a/src/index.js b/src/index.js index 03737ba3..6b6acb2b 100644 --- a/src/index.js +++ b/src/index.js @@ -10,72 +10,90 @@ document.addEventListener("DOMContentLoaded", () => { const questionContainer = document.querySelector("#question"); const choiceContainer = document.querySelector("#choices"); const nextButton = document.querySelector("#nextButton"); + const restartQuizElement = 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 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}`; - +const timeRemainingContainer = document.getElementById("timeRemaining"); // Show first question showQuestion(); - + nextButton.disabled = false; /************ TIMER ************/ - let timer; + let timer = setInterval(() => { + 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 + + timeRemainingContainer.innerText = `${minutes}:${seconds}`; + + if (quiz.timeRemaining <= 0) { + clearInterval(timer); + nextButton.disabled = true; + timeRemainingContainer.innerText = "Time's Up!"; + return; + } + quiz.timeRemaining--; + }, 1000); /************ 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,74 +109,94 @@ 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 + const questionPercentage = + (quiz.currentQuestionIndex / questions.length) * 100; + progressBar.style.width = `${questionPercentage}%`; // 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 = `${quiz.currentQuestionIndex + 1} of ${ + 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. + + const quizChoices = question.choices; + // console.log(quizChoices); + quizChoices.forEach((choice) => { + // console.log(choice); + const newLiElement = document.createElement("li"); + const labelElement = document.createElement("label"); + const radioElement = document.createElement("input"); + radioElement.type = "radio"; + radioElement.id = "choice"; + radioElement.name = "choice"; + radioElement.value = choice; + labelElement.innerText = choice; + + newLiElement.append(radioElement, labelElement); + choiceContainer.appendChild(newLiElement); + console.log(choiceContainer); + console.log(radioElement); + }); } - - - 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 choicesElements = document.querySelectorAll("input[name='choice']"); + // const choicesElements = document.querySelectorAll("#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. + choicesElements.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 !== null) { + quiz.checkAnswer(selectedAnswer); + quiz.moveToNextQuestion(); + showQuestion(); + } else { + alert("Please select an answer."); + } + } function showResults() { - // YOUR CODE HERE: // // 1. Hide the quiz view (div#quizView) @@ -166,9 +204,23 @@ 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 + + // Restart the quiz + restartQuizElement.addEventListener("click", () => { + quiz.timeRemaining = quizDuration; + quiz.currentQuestionIndex = 0; + quiz.correctAnswers = 0; + + quiz.shuffleQuestions(); + + // Show the quiz view (div#quizView) and hide the end view (div#endView) + quizView.style.display = "block"; + endView.style.display = "none"; + + showQuestion(); + }); } - -}); \ No newline at end of file +}); diff --git a/src/question.js b/src/question.js index 68f6631a..7ec0ad39 100644 --- a/src/question.js +++ b/src/question.js @@ -1,7 +1,18 @@ class Question { - // YOUR CODE HERE: - // - // 1. constructor (text, choices, answer, difficulty) + // YOUR CODE HERE: + // + constructor(text, choices, answer, difficulty) { + this.text = text; //string + this.choices = choices; // Array of strings + this.answer = answer; //string + this.difficulty = difficulty; //number + } - // 2. shuffleChoices() -} \ No newline at end of file + shuffleChoices() { + // this.choices = this.choices.sort(() => Math.random() - 0.5); + for (let i = this.choices.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); // Generate a new random index + [this.choices[i], this.choices[j]] = [this.choices[j], this.choices[i]]; // Swap the elements at indices i and j + } + } +} diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..58fbc2ae 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,65 @@ class Quiz { - // YOUR CODE HERE: - // - // 1. constructor (questions, timeLimit, timeRemaining) + // YOUR CODE HERE: + // + constructor(questions, timeLimit, timeRemaining) { + this.questions = questions; // Array of Question objects + this.timeLimit = timeLimit; // Number + this.timeRemaining = timeRemaining; // Number + this.correctAnswers = 0; // Number + this.currentQuestionIndex = 0; // Number + } - // 2. getQuestion() - - // 3. moveToNextQuestion() + getQuestion() { + return this.questions[this.currentQuestionIndex]; // Returns the current question object + } - // 4. shuffleQuestions() + moveToNextQuestion() { + return this.currentQuestionIndex++; // Increments the current question index + } - // 5. checkAnswer(answer) + shuffleQuestions() { + for (let i = this.questions.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); // Generate a new random index + [this.questions[i], this.questions[j]] = [ + this.questions[j], + this.questions[i], + ]; // Swap the elements at indices i and j + } + } - // 6. hasEnded() -} \ No newline at end of file + checkAnswer(answer) { + if (this.getQuestion().answer === answer) { + // Checks if the answer is correct + this.correctAnswers++; // Increments the correct answers count + return; + } + return "Wrong answer!"; // Returns a message if the answer is wrong + } + + hasEnded() { + // return this.currentQuestionIndex >= this.questions.length; // Checks if the quiz has ended + + if (this.currentQuestionIndex >= this.questions.length) { + return true; // Returns true if the quiz has ended + } + return false; // Returns false if the quiz has not ended + } + + filterQuestionsByDifficulty(difficulty) { + if (difficulty >= 1 && difficulty <= 3) { + const filteredQuestions = this.questions.filter( + (question) => question.difficulty === difficulty + ); // Filters the questions by difficulty + + return (this.questions = filteredQuestions); + } + } + + averageDifficulty() { + const totalDifficulty = this.questions.reduce( + (total, question) => total + question.difficulty, + 0 + ); + return totalDifficulty / this.questions.length; + } +} diff --git a/styles/style.css b/styles/style.css index 8de97e38..4db4c14d 100644 --- a/styles/style.css +++ b/styles/style.css @@ -76,6 +76,13 @@ button:hover { background-color: #4cae4c; } +button:disabled { + background-color: gray; + cursor: not-allowed; + opacity: 0.6; +} + + ul { list-style-type: none; padding: 0; @@ -153,12 +160,12 @@ input[type="radio"] { overflow: hidden; margin-bottom: 5px; } - + #resultProgressBar { width: 100%; height: 20px; background-color: #4caf50; - width: 100%; + width: 100%; /*why the second width?*/ border-radius: 8px; }