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..788e1c92 100644 --- a/src/index.js +++ b/src/index.js @@ -98,19 +98,20 @@ 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+1} of ${quiz.questions.length}`; // This value is hardcoded as a placeholder @@ -128,11 +129,25 @@ document.addEventListener("DOMContentLoaded", () => { // 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 i = 0; i < question.choices.length; i++) { + const choice = question.choices[i]; + const input = document.createElement("input"); + input.type = "radio"; + input.name = "choice"; + input.value = choice; + + const label = document.createElement("label"); + label.innerText = choice; + + choiceContainer.appendChild(input); + choiceContainer.appendChild(label); + choiceContainer.appendChild(document.createElement("br")); + } } - function nextButtonHandler () { + function nextButtonHandler() { let selectedAnswer; // A variable to store the selected answer value @@ -152,9 +167,18 @@ document.addEventListener("DOMContentLoaded", () => { // 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()`. - } - + choiceElements = document.getElementsByTagName("input"); + for (let i = 0; i < choiceElements.length; i++) { + const choice = choiceElements[i]; + if (choice.checked) { + selectedAnswer = choice.value; + } + } + quiz.checkAnswer(selectedAnswer); + quiz.moveToNextQuestion(); + showQuestion(); + } function showResults() { @@ -168,7 +192,40 @@ 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.questions.length} correct answers!`; // This value is hardcoded as a placeholder } - + + const restartButton = document.querySelector("#restartButton"); + + restartButton.addEventListener("click", () => { + endView.style.display = "none"; + quizView.style.display = "flex"; + quiz.currentQuestionIndex = 0; + quiz.correctAnswers = 0; + quiz.timeRemaining = quizDuration + 1; + quiz.shuffleQuestions(); + showQuestion(); + startInterval() + }); + + + function startInterval() { + clearInterval(timer); + + timer = setInterval(()=> { + console.log(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}`; + + if (quiz.timeRemaining === 0 || quiz.hasEnded()) { + clearInterval(timer); + showResults(); + } + }, 1000); + } + startInterval() }); \ No newline at end of file diff --git a/src/question.js b/src/question.js index 68f6631a..2a581643 100644 --- a/src/question.js +++ b/src/question.js @@ -1,7 +1,12 @@ 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() { + this.choices.sort(() => Math.random() - 0.5); + } } \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..8382c8a9 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,51 @@ 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; + } + + getQuestion() { + return this.questions[this.currentQuestionIndex]; + } + + moveToNextQuestion() { + this.currentQuestionIndex++; + } - // 3. moveToNextQuestion() + shuffleQuestions() { + this.questions.sort(() => Math.random() - 0.5); + } + + checkAnswer(answer) { + if (answer === this.questions[this.currentQuestionIndex].answer) { + this.correctAnswers++; + } + } + + hasEnded() { + return this.currentQuestionIndex < this.questions.length ? false : true; + } + + filterQuestionsByDifficulty(difficulty) { + return this.questions = this.questions.filter(question => { - // 4. shuffleQuestions() + if (typeof difficulty !== "number") { + return this.questions; + } - // 5. checkAnswer(answer) + if (question.difficulty === difficulty) { + return this.questions; + } + }); + } - // 6. hasEnded() + averageDifficulty() { + return this.questions.reduce((acc, el, index, array) => { + acc += (el.difficulty / array.length); + return +acc.toFixed(1); + }, 0) + } } \ No newline at end of file