From 223588ca276eea5756daa1cd1526dad8b3a8dad8 Mon Sep 17 00:00:00 2001 From: Virginia Vanstavel Date: Fri, 27 Mar 2026 20:38:55 +0100 Subject: [PATCH 1/5] Update quiz and question files --- src/question.js | 20 ++++++++++++++++---- src/quiz.js | 31 ++++++++++++++++++++++++++++--- 2 files changed, 44 insertions(+), 7 deletions(-) diff --git a/src/question.js b/src/question.js index 68f6631a..8ab54b70 100644 --- a/src/question.js +++ b/src/question.js @@ -1,7 +1,19 @@ 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 + } // 2. shuffleChoices() -} \ No newline at end of file + shuffleChoices(){ + const number = Math.floor (Math.random()*this.choices.length) + return this.choices[number]; +} + +} +const question = new Question('Hello', ["rabbit" , "cat", "dog"]) + console.log(question.shuffleChoices()) + // figure out why we needed to add the new variable + diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..ba2ef8c1 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,40 @@ 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] + } // 3. moveToNextQuestion() + moveToNextQuestion(){ + this.currentQuestionIndex++; + return this.questions[this.currentQuestionIndex]; + } // 4. shuffleQuestions() + shuffleQuestions(){ + let randomQuestion = Math.floor(Math.random()* this.questions.length) + return this.questions[randomQuestion]; + } // 5. checkAnswer(answer) // 6. hasEnded() -} \ No newline at end of file +} + +const testQuestions = ["question1", "question2", "question3", "question4", "question5", "question6", "question7"]; + // Instantiate a new Quiz object with the test questions + const quiz = new Quiz(testQuestions, 60, 60); + // Call the shuffleQuestions() method to shuffle the questions array in the quiz + console.log(quiz.shuffleQuestions()); + \ No newline at end of file From 23880bd8bfa1e22e1779a380f1b4bf9225aa55cf Mon Sep 17 00:00:00 2001 From: ecommfox Date: Sat, 28 Mar 2026 08:55:51 +0000 Subject: [PATCH 2/5] hasEnded and checkAnswer cleared --- src/question.js | 22 ++++++++++++++++++++-- src/quiz.js | 21 +++++++++++++++++++-- 2 files changed, 39 insertions(+), 4 deletions(-) diff --git a/src/question.js b/src/question.js index 8ab54b70..a0a66d48 100644 --- a/src/question.js +++ b/src/question.js @@ -8,8 +8,26 @@ class Question { // 2. shuffleChoices() shuffleChoices(){ - const number = Math.floor (Math.random()*this.choices.length) - return this.choices[number]; + + let shuffledArray = [] + + let array = this.choices + + + + for(let i = 0; i< array.length ;i++ ){ + + const x = Math.floor(Math.random() * array.length ) + + [array[i] , array[x]] = [array[x] , array[i]] + + } + + + + return array ; + + } } diff --git a/src/quiz.js b/src/quiz.js index ba2ef8c1..a2c1298d 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -28,13 +28,30 @@ class Quiz { } // 5. checkAnswer(answer) + checkAnswer(answer){ + if ( answer === this.questions[this.currentQuestionIndex].answer){ + + this.correctAnswers++ + + } + + } // 6. hasEnded() + hasEnded(){ + if (this.currentQuestionIndex < this.questions.length ){ return false + + }else if ( this.currentQuestionIndex == this.questions.length){ + + return true + } + + } } -const testQuestions = ["question1", "question2", "question3", "question4", "question5", "question6", "question7"]; +/* const testQuestions = ["question1", "question2", "question3", "question4", "question5", "question6", "question7"]; // Instantiate a new Quiz object with the test questions const quiz = new Quiz(testQuestions, 60, 60); // Call the shuffleQuestions() method to shuffle the questions array in the quiz - console.log(quiz.shuffleQuestions()); + console.log(quiz.shuffleQuestions()); */ \ No newline at end of file From c25f7bea984af2d7ce1ffec8b11b226ebc35efae Mon Sep 17 00:00:00 2001 From: ecommfox Date: Sat, 4 Apr 2026 18:17:05 +0100 Subject: [PATCH 3/5] We finished the project completely ! --- index.html | 4 +- src/index.js | 137 +++++++++++++++++++++++++++++++++++--- src/question.js | 26 +++----- src/quiz.js | 54 ++++++++++++--- src/tempCodeRunnerFile.js | 1 + 5 files changed, 183 insertions(+), 39 deletions(-) create mode 100644 src/tempCodeRunnerFile.js diff --git a/index.html b/index.html index 534cd886..fd79df92 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@

JavaScript Quiz

    Remaining Time: 00:00
    - + @@ -39,7 +39,7 @@

    JavaScript Quiz

    - + diff --git a/src/index.js b/src/index.js index 03737ba3..4312407e 100644 --- a/src/index.js +++ b/src/index.js @@ -10,6 +10,8 @@ document.addEventListener("DOMContentLoaded", () => { const questionContainer = document.querySelector("#question"); const choiceContainer = document.querySelector("#choices"); const nextButton = document.querySelector("#nextButton"); + const restartButton = document.getElementById("restartButton") + const remainingTime = document.querySelector("#timeRemaining") // End view elements const resultContainer = document.querySelector("#result"); @@ -54,7 +56,7 @@ document.addEventListener("DOMContentLoaded", () => { timeRemainingContainer.innerText = `${minutes}:${seconds}`; // Show first question - showQuestion(); + showQuestion() /************ TIMER ************/ @@ -74,7 +76,8 @@ document.addEventListener("DOMContentLoaded", () => { // nextButtonHandler() - Handles the click on the next button // showResults() - Displays the end view and the quiz results - +/* Declare percentage variable + */ function showQuestion() { // If the quiz has ended, show the results @@ -91,26 +94,38 @@ 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(); + - + console.log(question) // 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 + percentage = Math.floor( ( quiz.currentQuestionIndex / questions.length ) * 100 ) + + + + progressBar.style.width = percentage + "%" ; // 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 ${questions.length}`; // This value is hardcoded as a placeholder @@ -128,26 +143,66 @@ 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. + + let choicesHtml = "" + + question.choices.forEach(element => { + + let html = `
  • +
    • ` + + choicesHtml += html + + }); + + choiceContainer.innerHTML = choicesHtml + } function nextButtonHandler () { let selectedAnswer; // A variable to store the selected answer value - + console.log("buttonclicked") // YOUR CODE HERE: // // 1. Get all the choice elements. You can use the `document.querySelectorAll()` method. - + allChoicesElement = document.querySelectorAll('input[name="choice"]') // 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. + allChoicesElement.forEach((input)=>{ + if ( input.checked = true ){ + + selectedAnswer = input.value + +'' + + if (selectedAnswer === quiz.questions[quiz.currentQuestionIndex].answer ) { + + + quiz.checkAnswer(selectedAnswer); + return + + } + + + + } + + }) + + quiz.moveToNextQuestion() + showQuestion() + + + // 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()`. @@ -158,7 +213,7 @@ document.addEventListener("DOMContentLoaded", () => { function showResults() { - + // YOUR CODE HERE: // // 1. Hide the quiz view (div#quizView) @@ -168,7 +223,67 @@ 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 ${questions.length} correct answers!`; // This value is hardcoded as a placeholder } -}); \ No newline at end of file + + + +function restartQuiz( ){ +quiz.currentQuestionIndex = 0 +quiz.correctAnswers = 0 +console.log("current question is "+ quiz.currentQuestionIndex, "current correct answers " + quiz.correctAnswers ) +quiz.shuffleQuestions() + +showQuestion() + +quiz.timeRemaining = quizDuration +remainingTime.innerHTML = `Remaining Time: ${quiz.timeRemaining.toFixed(2)}` +startCountdown() +} + + + + +restartButton.addEventListener("click", ()=>{ + + + +endView.style.display = "none" + +quizView.style.display = "flex" + + +restartQuiz() + + + +}) + +//implement a countdown timer for the quiz + +startCountdown() + +function startCountdown(){ + console.log ("startCountdown called") + + const timerInterval = setInterval(() => { + remainingTime.innerHTML = `Remaining Time: ${quiz.timeRemaining.toFixed(2)}` + ; + + if(quiz.timeRemaining === 0){ + clearInterval(timerInterval); + showResults(); + + } + quiz.timeRemaining--; + + }, 1000) +} + + + + + +}); + diff --git a/src/question.js b/src/question.js index a0a66d48..7031758b 100644 --- a/src/question.js +++ b/src/question.js @@ -8,24 +8,14 @@ class Question { // 2. shuffleChoices() shuffleChoices(){ - - let shuffledArray = [] - - let array = this.choices - - - - for(let i = 0; i< array.length ;i++ ){ - - const x = Math.floor(Math.random() * array.length ) - - [array[i] , array[x]] = [array[x] , array[i]] - - } - - - - return array ; + + + this.choices= this.choices.reduce((acc, item )=>{ +let index = Math.floor(Math.random() * acc.length+1 ) +acc.splice(index,0,item) +return acc + +},[]) } diff --git a/src/quiz.js b/src/quiz.js index a2c1298d..e233dbd1 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -23,8 +23,15 @@ class Quiz { // 4. shuffleQuestions() shuffleQuestions(){ - let randomQuestion = Math.floor(Math.random()* this.questions.length) - return this.questions[randomQuestion]; + this.questions = this.questions.reduce((shuffledArr, item)=>{ + + let index = Math.floor(Math.random()*shuffledArr.length +1 ) + shuffledArr.splice(index,0,item ) + return shuffledArr + + },[]) + + } // 5. checkAnswer(answer) @@ -47,11 +54,42 @@ class Quiz { } } + + + filterQuestionsByDifficulty(difficulty){ + + + + + if ( typeof difficulty != "number" || difficulty < 1 || difficulty > 3 )return ; + + + + this.questions = this.questions.filter((item)=>{ + return item.difficulty === difficulty + + }) + + + } + + + averageDifficulty(){ + const summ = this.questions.reduce((currentDifficulty, question )=>{ + currentDifficulty += question.difficulty + + + console.log(currentDifficulty) + return currentDifficulty + },0) + console.log(summ) + let average = summ / this.questions.length + + return average + + } + + } -/* const testQuestions = ["question1", "question2", "question3", "question4", "question5", "question6", "question7"]; - // Instantiate a new Quiz object with the test questions - const quiz = new Quiz(testQuestions, 60, 60); - // Call the shuffleQuestions() method to shuffle the questions array in the quiz - console.log(quiz.shuffleQuestions()); */ - \ No newline at end of file + diff --git a/src/tempCodeRunnerFile.js b/src/tempCodeRunnerFile.js new file mode 100644 index 00000000..66ab66dc --- /dev/null +++ b/src/tempCodeRunnerFile.js @@ -0,0 +1 @@ +item, index \ No newline at end of file From 6db1cb5a8ffe2e61d20c2cec2a3e3e06cee6afdf Mon Sep 17 00:00:00 2001 From: ecommfox Date: Sun, 5 Apr 2026 15:20:16 +0100 Subject: [PATCH 4/5] Removed unnecessary if line that caused the checkAnswer fcuntion to count correct answer on every loop (line 186); --- src/index.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/index.js b/src/index.js index 4312407e..a0a54d32 100644 --- a/src/index.js +++ b/src/index.js @@ -170,7 +170,7 @@ document.addEventListener("DOMContentLoaded", () => { // // 1. Get all the choice elements. You can use the `document.querySelectorAll()` method. - allChoicesElement = document.querySelectorAll('input[name="choice"]') + allChoicesElement = document.querySelectorAll("input[name='choice']") // 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. @@ -181,16 +181,10 @@ document.addEventListener("DOMContentLoaded", () => { selectedAnswer = input.value -'' + quiz.checkAnswer(selectedAnswer); - if (selectedAnswer === quiz.questions[quiz.currentQuestionIndex].answer ) { - - - quiz.checkAnswer(selectedAnswer); + console.log(quiz.correctAnswers) return - - - } @@ -237,8 +231,10 @@ quiz.shuffleQuestions() showQuestion() + +/* adding minutes and seconds inside of the timer container text as declared line 51 to 52 */ quiz.timeRemaining = quizDuration -remainingTime.innerHTML = `Remaining Time: ${quiz.timeRemaining.toFixed(2)}` +remainingTime.innerHTML = `Remaining Time: ${minutes}:${seconds}` startCountdown() } @@ -268,7 +264,11 @@ function startCountdown(){ console.log ("startCountdown called") const timerInterval = setInterval(() => { - remainingTime.innerHTML = `Remaining Time: ${quiz.timeRemaining.toFixed(2)}` + + + const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); + const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); + remainingTime.innerHTML = `Remaining Time: ${minutes}:${seconds}` ; if(quiz.timeRemaining === 0){ From 945c7efbe1545b885929d3c7e592e36f99122757 Mon Sep 17 00:00:00 2001 From: ecommfox Date: Sun, 5 Apr 2026 15:27:36 +0100 Subject: [PATCH 5/5] Modified the remainingTime span text to show secons and minutes formated ( line 271 and 239 --- src/index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index a0a54d32..85781bf6 100644 --- a/src/index.js +++ b/src/index.js @@ -181,6 +181,9 @@ document.addEventListener("DOMContentLoaded", () => { selectedAnswer = input.value + + + /* Remove unecessary if line */ quiz.checkAnswer(selectedAnswer); console.log(quiz.correctAnswers) @@ -265,8 +268,9 @@ function startCountdown(){ const timerInterval = setInterval(() => { - - const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); +/* Modify timer to show minutes and seconds too + */ + const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); remainingTime.innerHTML = `Remaining Time: ${minutes}:${seconds}` ;