From 234fdca72c6c9f8b84a0f8af8e04c149609de121 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eug=C3=A9nie=20Adelin?= Date: Thu, 26 Mar 2026 21:54:24 +0100 Subject: [PATCH 1/2] dot 3 from day 1 --- src/question.js | 15 ++++++++++----- src/quiz.js | 22 +++++++++------------- 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/src/question.js b/src/question.js index 68f6631a..fd17776e 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 = []; + } } \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..9f6df561 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,11 @@ 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; + correctAnswers = 0; + currentQuestionIndex = 0; + } + getQuestion + } - // 3. moveToNextQuestion() - - // 4. shuffleQuestions() - - // 5. checkAnswer(answer) - - // 6. hasEnded() -} \ No newline at end of file From ea52c64b191904c3eddeaf728c0fd34c19328563 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eug=C3=A9nie=20Adelin?= Date: Tue, 7 Apr 2026 21:09:10 +0200 Subject: [PATCH 2/2] done --- README.md | 42 ++++++++++++++++++++++ src/index.js | 95 +++++++++++++++++++++++++++++++++++++++++-------- src/question.js | 11 ++++-- src/quiz.js | 52 +++++++++++++++++++++++++-- 4 files changed, 180 insertions(+), 20 deletions(-) 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 fd17776e..9319c679 100644 --- a/src/question.js +++ b/src/question.js @@ -6,7 +6,12 @@ class Question { this.difficulty = difficulty; } - shuffleChoices(){ - this.choices = []; + 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]]; + } } -} \ No newline at end of file + +} + diff --git a/src/quiz.js b/src/quiz.js index 9f6df561..26155ccf 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -3,9 +3,55 @@ class Quiz { this.questions = questions; this.timeLimit = timeLimit; this.timeRemaining = timeRemaining; - correctAnswers = 0; - currentQuestionIndex = 0; + this.correctAnswers = 0; + this.currentQuestionIndex = 0; + } + + 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]]; + } + } + + checkAnswer(selectedChoice) { + const currentQuestion = this.getQuestion(); + if (selectedChoice === currentQuestion.answer) { + this.correctAnswers++; + return true; + } + return false; + } + + hasEnded() { + return this.currentQuestionIndex >= this.questions.length || this.timeRemaining <= 0; } - getQuestion + + 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; } + +}