diff --git a/index.html b/index.html index 534cd886..4c7a93ce 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..bbc85d3d 100644 --- a/src/index.js +++ b/src/index.js @@ -10,79 +10,139 @@ document.addEventListener("DOMContentLoaded", () => { const questionContainer = document.querySelector("#question"); const choiceContainer = document.querySelector("#choices"); const nextButton = document.querySelector("#nextButton"); + 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( + "Who created JavaScript?", + ["Plato", "Brendan Eich", "Lea Verou", "Bill Gates"], + "Brendan Eich", + 2 + ), // Add more questions here + new Question( + "Which of the following is a JavaScript data type?", + ["Boolean", "Integer", "Float", "Character"], + "Boolean", + 0 + ), + new Question( + "What keyword is used to declare a constant in JavaScript?", + ["var", "const", "let", "define"], + "const", + 1 + ), + new Question( + "Which method converts a JSON string into a JavaScript object?", + ["JSON.parse()", "JSON.stringify()", "parseJSON()", "toObject()"], + "JSON.parse()", + 0 + ), + new Question( + "Which of the following is NOT a looping structure in JavaScript?", + ["for", "foreach", "while", "do-while"], + "foreach", + 1 + ), + new Question( + "What is the output of typeof null in JavaScript?", + ["'object'", "'null'", "'undefined'", "'boolean'"], + "'object'", + 0 + ), ]; 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 const timeRemainingContainer = document.getElementById("timeRemaining"); - timeRemainingContainer.innerText = `${minutes}:${seconds}`; + timeRemainingContainer.innerText = `${minutes}:${seconds}`;*/ - // Show first question - showQuestion(); + /************ TIMER ************/ + let timer; + timer = setInterval(function () { + quiz.timeRemaining--; + const minutes = Math.floor(quiz.timeRemaining / 60) + .toString() + .padStart(2, "0"); + const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); - /************ TIMER ************/ + // Display the time remaining in the time remaining container + const timeRemainingContainer = document.getElementById("timeRemaining"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; + }, 1000); - let timer; + setTimeout(function () { + clearInterval(timer); + showResults(); + }, 120000); + // Show first question + showQuestion(); /************ 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() { + clearInterval(timer); // If the quiz has ended, show the results if (quiz.hasEnded()) { showResults(); return; } + timer = setInterval(function () { + quiz.timeRemaining--; + 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}`; + }, 1000); + + setTimeout(function () { + clearInterval(timer); + showResults(); + }, 120000); + // Clear the previous question text and question choices questionContainer.innerText = ""; choiceContainer.innerHTML = ""; @@ -91,84 +151,124 @@ 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 = `65%`; // This value is hardcoded as a placeholder + progressBar.style.width = `${ + (quiz.currentQuestionIndex / quiz.questions.length) * 100 + }%`; - - // 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 ${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: - /* + // 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. - + //console.log(question.choices); + question.choices.forEach((element, index) => { + const newRadio = document.createElement("input"); + //const uniqueId = `choice-${index}`; + + newRadio.setAttribute("type", "radio"); + newRadio.setAttribute("name", "choice"); + //newRadio.setAttribute("id", uniqueId); + newRadio.setAttribute("value", element); + + const newLabel = document.createElement("label"); + //newLabel.setAttribute("for", uniqueId); + newLabel.innerText = element.toString(); + + const newBr = document.createElement("br"); + choiceContainer.appendChild(newRadio); + choiceContainer.appendChild(newLabel); + choiceContainer.appendChild(newBr); + //console.log(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 () { - let selectedAnswer; // A variable to store the selected answer value - - + nextButton.addEventListener("click", nextButtonHandler); + function nextButtonHandler() { + //let selectedAnswer; // A variable to store the selected answer value + let selectedAnswer = null; // 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. - - + // 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. + + const inputs = document.querySelectorAll('input[name="choice"]'); + //console.log(inputs); + + inputs.forEach((input) => { + if (input.checked) { + selectedAnswer = input.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()`. + console.log("Final answer", selectedAnswer); + quiz.checkAnswer(selectedAnswer); + quiz.moveToNextQuestion(); + showQuestion(); + } function showResults() { - // YOUR CODE HERE: + clearInterval(timer); + // // 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 + resultContainer.innerText = `You scored ${quiz.correctAnswers} out of ${quiz.questions.length} correct answers!`; // This value is hardcoded as a placeholder } - -}); \ No newline at end of file + + restartButton.addEventListener("click", () => { + endView.style.display = "none"; + quizView.style.display = "block"; + quiz.currentQuestionIndex = 0; + quiz.correctAnswers = 0; + quiz.timeRemaining = quizDuration; + 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}`; + showQuestion(); + }); +}); diff --git a/src/question.js b/src/question.js index 68f6631a..bb3d594d 100644 --- a/src/question.js +++ b/src/question.js @@ -1,7 +1,21 @@ class Question { + 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-- ) { + const a = Math.floor(Math.random() * i +1); + [this.choices[i], this.choices[a]] = [this.choices[a], this.choices[i]]; + } + } +} // YOUR CODE HERE: + // // 1. constructor (text, choices, answer, difficulty) + // 2. shuffleChoices() -} \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..f0c121ff 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,73 @@ 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() { + for (let i = this.questions.length - 1; i > 0; i--) { + const a = Math.floor(Math.random() * i + 1); + [this.questions[i], this.questions[a]] = [ + this.questions[a], + this.questions[i], + ]; + } + } - // 6. hasEnded() -} \ No newline at end of file + checkAnswer(answer) { + if (answer === this.questions[this.currentQuestionIndex].answer) { + this.correctAnswers++; + } + } + + hasEnded() { + if (this.currentQuestionIndex < this.questions.length) { + return false; + } else if (this.currentQuestionIndex === this.questions.length) { + return true; + } + } + + filterQuestionsByDifficulty(difficulty) { + if (difficulty >= 1 || difficulty <= 3) { + this.questions = this.questions.filter(function (question) { + if (question.difficulty === difficulty) { + return true; + } + }); + } + } + + averageDifficulty() { + const average = + this.questions.reduce((accumulator, currentValue) => { + return accumulator + currentValue.difficulty; + }, 0) / this.questions.length; + return average; + } +} + +// YOUR CODE HERE: +// +// 1. constructor (questions, timeLimit, timeRemaining) + +// 2. getQuestion() + +// 3. moveToNextQuestion() + +// 4. shuffleQuestions() + +// 5. checkAnswer(answer) + +// 6. hasEnded()