diff --git a/src/index.js b/src/index.js index 03737ba3..5fd76e2b 100644 --- a/src/index.js +++ b/src/index.js @@ -10,6 +10,9 @@ document.addEventListener("DOMContentLoaded", () => { const questionContainer = document.querySelector("#question"); const choiceContainer = document.querySelector("#choices"); const nextButton = document.querySelector("#nextButton"); + const restartBtnElement = document.getElementById("restartButton"); + const timerElement = document.querySelector("#timeRemaining span"); + console.log(timerElement) // End view elements const resultContainer = document.querySelector("#result"); @@ -50,16 +53,28 @@ document.addEventListener("DOMContentLoaded", () => { 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}`; + timerElement.innerText = `${minutes}:${seconds}`; // Show first question showQuestion(); + /************ TIMER ************/ - let timer; + let timer + let quizTime = quizDuration; + console.log(quizTime) + timer = setInterval(()=>{ + quizTime--; + const minutes = Math.floor(quizTime / 60).toString().padStart(2, "0"); + const seconds = (quizTime % 60).toString().padStart(2, "0"); + timerElement.innerText = timerElement.innerText = `${minutes}:${seconds}`;; + if (quizTime === 0) { + clearInterval(timer); + showResults(); + } + }, 1000); /************ EVENT LISTENERS ************/ @@ -82,6 +97,7 @@ document.addEventListener("DOMContentLoaded", () => { showResults(); return; } + // Clear the previous question text and question choices questionContainer.innerText = ""; @@ -89,6 +105,7 @@ document.addEventListener("DOMContentLoaded", () => { // 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(); @@ -98,26 +115,46 @@ document.addEventListener("DOMContentLoaded", () => { // // 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 = `${(quiz.currentQuestionIndex)/quiz.questions.length*100}%` ; // 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 + questionCount.innerText = `Question ${quiz.currentQuestionIndex} 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. + + + question.choices.forEach((choice)=> { + const newLiElement = document.createElement("li"); + const radioInput = document.createElement("input"); + radioInput.type = "radio"; + radioInput.name = "choice"; + radioInput.value = choice; + const questionLabel = document.createElement("label") + questionLabel.innerText = choice; + + newLiElement.appendChild(radioInput); + newLiElement.appendChild(questionLabel); + newLiElement.appendChild(document.createElement("br")); + choiceContainer.appendChild(newLiElement); + }); + + // 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: + + /* @@ -130,11 +167,11 @@ document.addEventListener("DOMContentLoaded", () => { } - + function nextButtonHandler () { let selectedAnswer; // A variable to store the selected answer value - + // YOUR CODE HERE: @@ -146,18 +183,29 @@ document.addEventListener("DOMContentLoaded", () => { // 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()`. - } - + + let choicesArray = document.querySelectorAll("#choices input[type='radio']") + choicesArray.forEach((choice) => { + console.log(choice); + if (choice.checked === true){ + selectedAnswer = choice.value;} + }); + // 3. If an answer is selected (`selectedAnswer`), check if it is correct and move to the next question + quiz.checkAnswer(selectedAnswer); + + // 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()`. + quiz.moveToNextQuestion(); + + // Show the next question by calling the function `showQuestion()`. + showQuestion(); + } - function showResults() { + function showResults() { // YOUR CODE HERE: // @@ -168,7 +216,16 @@ document.addEventListener("DOMContentLoaded", () => { 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.currentQuestionIndex} correct answers!`; // This value is hardcoded as a placeholder } + + restartBtnElement.addEventListener('click', ()=>{ + quizView.style.display = "block"; + endView.style.display = "none"; + quiz.currentQuestionIndex = 0; + quiz.correctAnswer = 0; + quiz.shuffleQuestions(); + showQuestion() + }) }); \ No newline at end of file diff --git a/src/question.js b/src/question.js index 68f6631a..147cb20a 100644 --- a/src/question.js +++ b/src/question.js @@ -1,7 +1,18 @@ class Question { // YOUR CODE HERE: // - // 1. constructor (text, choices, answer, difficulty) - - // 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--) { + const randomIndex = Math.floor(Math.random() * (i + 1)); + [this.choices[i], this.choices[randomIndex]] = [this.choices[randomIndex], this.choices[i]]; + } + return this.choices; + } } \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..2efff08c 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,67 @@ 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() + getQuestion() { + return this.questions[this.currentQuestionIndex]; + } - // 3. moveToNextQuestion() + moveToNextQuestion() { + this.currentQuestionIndex++; + } - // 4. shuffleQuestions() + shuffleQuestions() { + for (let i = this.questions.length -1; i > 0; i--) { + const randomIndex = Math.floor(Math.random() * (i + 1)); + [this.questions[i], this.questions[randomIndex]] = [this.questions[randomIndex], this.questions[i]]; + } + } - // 5. checkAnswer(answer) + checkAnswer(answer) { + const currentQuestion = this.questions[this.currentQuestionIndex].answer; + if (answer === currentQuestion) { + this.correctAnswers++; + } + } + + hasEnded() { + if (this.currentQuestionIndex === this.questions.length) { + return true + } else return false; + } + + filterQuestionsByDifficulty(difficulty) { +//should not change the 'questions' array if the 1st argument is not a number between 1 and 3 + if (![1, 2, 3].includes(difficulty)){ + return; + } +// should update the 'questions' array with the questions filtered by difficulty + // if (!this.originalQuestions) { + // this.originalQuestions = [this.questions]; + // } + // should receive 1 argument (difficulty) + // this.questions = this.originalQuestions.filter(question) + + const difficultyFilteredQuestions = this.questions.filter((element) => { + if (element.difficulty === difficulty) {return true}; + }) + this.questions = difficultyFilteredQuestions + } + + averageDifficulty () { + if (this.questions.length === 0) + return 0; + const totalDifficulty = this.questions.reduce((acc, currentElement) => { + return acc + currentElement.difficulty; + }, 0); + return totalDifficulty / this.questions.length; + } +} - // 6. hasEnded() -} \ No newline at end of file