diff --git a/README.md b/README.md index e58dbd54..a32ba8d2 100644 --- a/README.md +++ b/README.md @@ -1 +1,43 @@ # Project: JavaScript Quiz +shuffleQuestions() method + +Shuffles the elements stored in the questions array of the Quiz. + +should be defined. +should be a function. +should receive no arguments. +should shuffle the items in the questions array. + +checkAnswer(answer) method + +Checks if the passed answer is correct for the current question and increments correctAnswers by 1 if the answer is correct. + +should be defined. +should be a function. +should receive 1 argument (answer - string). +should increase correctAnswers by 1 when called with a correct answer for the current question + +hasEnded() method + +Returns true if the quiz has ended (the last question has been answered), and false otherwise. + +should be defined. + +should be a function. + +should receive no arguments. + +should return false when currentQuestionIndex is less than the questions array length + +should return true when currentQuestionIndex is equal to the questions array length + + + +Remember to commit your changes often and push them to the GitHub repo. + + +Research Tasks: +Watch the video “What is THIS in JavaScript? in 100 seconds” (est. time ~7 min). +Read the lesson “JS | Special keyword - this” on the Student Portal (est. time ~45 min). + + diff --git a/src/index.js b/src/index.js index 03737ba3..77b47d56 100644 --- a/src/index.js +++ b/src/index.js @@ -29,12 +29,12 @@ document.addEventListener("DOMContentLoaded", () => { 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 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 @@ -59,7 +59,20 @@ document.addEventListener("DOMContentLoaded", () => { /************ TIMER ************/ - let timer; + + + setInterval(() => { + if (quiz.timeRemaining > 0) { + 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}`; + } else { + showResults(); + } + }, 1000); /************ EVENT LISTENERS ************/ @@ -73,14 +86,13 @@ document.addEventListener("DOMContentLoaded", () => { // 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()) { - showResults(); - return; + return showResults(); } // Clear the previous question text and question choices @@ -95,22 +107,22 @@ document.addEventListener("DOMContentLoaded", () => { // 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 questionProgress = (quiz.currentQuestionIndex / quiz.questions.length) * 100; + progressBar.style.width = `${questionProgress}%`; // 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}`; + @@ -127,20 +139,58 @@ document.addEventListener("DOMContentLoaded", () => { // 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. + + for (let j = 0; j < question.choices.length; j++) { + const choiceText = question.choices[j]; + + const input = document.createElement("input"); + input.type = "radio"; + input.name = "choice"; + input.value = choiceText; + input.id = `choice-${j}`; + + const label = document.createElement("label"); + label.htmlFor = input.id; + label.innerText = choiceText; + + const br = document.createElement("br"); + choiceContainer.appendChild(input); + choiceContainer.appendChild(label); + choiceContainer.appendChild(br); + } } + + + + function nextButtonHandler () { let selectedAnswer; // A variable to store the selected answer value + const total = document.querySelectorAll("input[name='choice']"); + for (let i = 0; i < total.length; i++) { + if (total[i].checked) { + selectedAnswer = total[i].value; + break; + } + } + if (!selectedAnswer) { + return; + } + + quiz.checkAnswer(selectedAnswer); + quiz.moveToNextQuestion(); + 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`). @@ -166,9 +216,26 @@ 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!`; } -}); \ No newline at end of file +}); + +const restartElement = document.createElement("div"); +restartElement.innerHTML = ` +`; + +endView.appendChild(restartElement); + +restartElement.addEventListener('click', () => { + quizView.style.display = "flex"; + endView.style.display = "none"; + quiz.currentQuestionIndex = 0; + quiz.score = 0; + + +}) \ No newline at end of file diff --git a/src/question.js b/src/question.js index 68f6631a..9319c679 100644 --- a/src/question.js +++ b/src/question.js @@ -1,7 +1,17 @@ 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; + } + + shuffleChoices() { + for (let i = this.choices.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [this.choices[i], this.choices[j]] = [this.choices[j], this.choices[i]]; + } + } + +} - // 2. shuffleChoices() -} \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..26155ccf 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,57 @@ class Quiz { - // YOUR CODE HERE: - // - // 1. constructor (questions, timeLimit, timeRemaining) - - // 2. getQuestion() + constructor(questions, timeLimit, timeRemaining){ + this.questions = questions; + this.timeLimit = timeLimit; + this.timeRemaining = timeRemaining; + this.correctAnswers = 0; + this.currentQuestionIndex = 0; + } - // 3. moveToNextQuestion() + getQuestion() { + return this.questions[this.currentQuestionIndex]; + } + + moveToNextQuestion() { + this.currentQuestionIndex++; + } + + shuffleQuestions() { + for (let i = this.questions.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [this.questions[i], this.questions[j]] = [this.questions[j], this.questions[i]]; + } + } - // 4. shuffleQuestions() + checkAnswer(selectedChoice) { + const currentQuestion = this.getQuestion(); + if (selectedChoice === currentQuestion.answer) { + this.correctAnswers++; + return true; + } + return false; + } - // 5. checkAnswer(answer) + hasEnded() { + return this.currentQuestionIndex >= this.questions.length || this.timeRemaining <= 0; + } + + filterQuestionsByDifficulty(difficulty) { + if(difficulty >= 1 && difficulty <= 3){ + this.questions = this.questions.filter( +     (question) => question.difficulty === difficulty) + } + else{ + return this.questions; + } + return this.questions; + } + + averageDifficulty(){ + const total = this.questions.reduce((accumulator, currentElement) => { + return accumulator += currentElement.difficulty; + },0) + return total / this.questions.length; + } + - // 6. hasEnded() -} \ No newline at end of file +}