From c8629ee9a70f3478874232d71e39aa3b55c56b54 Mon Sep 17 00:00:00 2001 From: Joice Conte Date: Thu, 1 May 2025 21:55:39 +0200 Subject: [PATCH 1/9] adding --- src/question.js | 14 ++++++++++++-- src/quiz.js | 14 ++++++++++---- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/src/question.js b/src/question.js index 68f6631a..5c6272ae 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; + + } + // 2. shuffleChoices() + + 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..7d40aea5 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,8 +1,14 @@ -class Quiz { +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() // 3. moveToNextQuestion() From f73d004131fd9cf6c6c4febfbe193acf80641720 Mon Sep 17 00:00:00 2001 From: RFelix1790 Date: Tue, 6 May 2025 18:14:37 +0200 Subject: [PATCH 2/9] done --- src/question.js | 10 +++++++++- src/quiz.js | 42 +++++++++++++++++++++++++++++++++++------- 2 files changed, 44 insertions(+), 8 deletions(-) diff --git a/src/question.js b/src/question.js index 68f6631a..9ce0e295 100644 --- a/src/question.js +++ b/src/question.js @@ -1,7 +1,15 @@ 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() + 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..6e26f155 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,43 @@ 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 +=1 + } - // 4. shuffleQuestions() + shuffleQuestions(){ + this.questions.sort(() => Math.random() - 0.5) + } - // 5. checkAnswer(answer) + checkAnswer(answer){ + if (this.answer === this.questions[this.currentQuestionIndex].answer){ - // 6. hasEnded() -} \ No newline at end of file + } + this.correctAnswers +=1 + } + + + hasEnded() { + if (this.currentQuestionIndex < this.questions.length) { + return false + } + else if (this.currentQuestionIndex === this.questions.length){ + return true + } + } + filterQuestionsByDifficulty(difficulty){ + + } +} From 45861ee90d5965be6720eb868904d4331154f13e Mon Sep 17 00:00:00 2001 From: Joice Conte Date: Thu, 8 May 2025 20:17:37 +0200 Subject: [PATCH 3/9] sharing updated code --- src/index.js | 39 ++++++++++++++++++++++++++++++------ src/question.js | 2 +- src/quiz.js | 53 +++++++++++++++++++++++++++++++++++++++---------- 3 files changed, 77 insertions(+), 17 deletions(-) diff --git a/src/index.js b/src/index.js index 03737ba3..50454d5e 100644 --- a/src/index.js +++ b/src/index.js @@ -98,12 +98,13 @@ 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 + const questionIndex = quiz.questions.indexOf(question); + const progressPercent = ((questionIndex +1)/quiz.questions.length)*100; + progressPercent.style.width = `65%`; // This value is hardcoded as a placeholder @@ -119,7 +120,7 @@ document.addEventListener("DOMContentLoaded", () => { // 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: /* - +
*/ @@ -127,7 +128,22 @@ 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. +question.choices.forEach(choice =>{ + const input= document.createElement("input"); + input.type = "radio"; + input.name = "choice"; + input.value = choice; + + const label = document.createElement ("label"); + label.innerText = choice; + + const br = document.createElement("br"); + + choiceContainer.appendChild(input); + choiceContainer.appendChild(label); + choiceContainer.appendChild(br); +}); } @@ -140,20 +156,30 @@ document.addEventListener("DOMContentLoaded", () => { // YOUR CODE HERE: // // 1. Get all the choice elements. You can use the `document.querySelectorAll()` method. - +const choiceElements = document.querySelector ('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. +choiceElements.forEach(input=> { + if (input.checked){ + selectedAnswer = input.value; + } +}) // 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()`. - } + if (selectedAnswer){ + quiz.checkAnswer(selectedAnswer); + quiz.moveToNextQuestion(); + showQuestion(); + + } @@ -171,4 +197,5 @@ document.addEventListener("DOMContentLoaded", () => { resultContainer.innerText = `You scored 1 out of 1 correct answers!`; // This value is hardcoded as a placeholder } +} }); \ No newline at end of file diff --git a/src/question.js b/src/question.js index 5c6272ae..26e68104 100644 --- a/src/question.js +++ b/src/question.js @@ -2,7 +2,7 @@ class Question { // YOUR CODE HERE: // constructor (text, choices, answer, difficulty){ - this.text = text; + this.text = text; this.choices = choices; this.answer = answer; this.difficulty = difficulty; diff --git a/src/quiz.js b/src/quiz.js index 7d40aea5..dc812342 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,21 +1,54 @@ class Quiz { - // YOUR CODE HERE: - + constructor (questions, timeLimit, timeRemaining){ this.questions = questions; this.timeLimit = timeLimit; - this.timeremaining = timeremaining; + this.timeRemaining =timeRemaining ; this.correctAnswers = 0; this.currentQuestionIndex = 0; } - // 2. getQuestion() - - // 3. moveToNextQuestion() + getQuestion(){ + return this.questions[this.currentQuestionIndex]; + + } - // 4. shuffleQuestions() + moveToNextQuestion(){ + this.currentQuestionIndex +=1 + } - // 5. checkAnswer(answer) + + shuffleQuestions(){ + this.questions.sort(() => Math.random() - 0.5); + } - // 6. hasEnded() -} \ No newline at end of file + + checkAnswer(answer) { + const currentQuestion = this.questions[this.currentQuestionIndex]; + if (answer === currentQuestion.answer){ + this.correctAnswers += 1; + } + } + hasEnded() { + return this.currentQuestionIndex >= this.questions.length; + } + + + + filterQuestionsByDifficulty(difficulty) { + if (![1, 2, 3].includes(difficulty)) { + return; + } + this.questions = this.questions.filter(q => q.difficulty === difficulty); + } + + + averageDifficulty() { + if (this.questions.length === 0) return 0; + const total = this.questions.reduce((sum, q) => sum + Number(q.difficulty), 0); + return total / this.questions.length; + } + } + + + From cd0d858391358d94b52e2b34194c8d6cdb154f71 Mon Sep 17 00:00:00 2001 From: RFelix1790 Date: Sat, 10 May 2025 16:09:14 +0200 Subject: [PATCH 4/9] day 3 part 4 done --- index.html | 10 +++++----- src/index.js | 4 ++-- src/quiz.js | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 534cd886..4c7a93ce 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@

JavaScript Quiz

- + - - - \ No newline at end of file + diff --git a/src/index.js b/src/index.js index 50454d5e..b57dbc64 100644 --- a/src/index.js +++ b/src/index.js @@ -111,7 +111,7 @@ document.addEventListener("DOMContentLoaded", () => { // 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 ${questionIndex + 1} of ${quiz.questions.length}`; // This value is hardcoded as a placeholder @@ -194,7 +194,7 @@ choiceElements.forEach(input=> { 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 } } diff --git a/src/quiz.js b/src/quiz.js index dd18bd8c..45702d98 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -24,8 +24,8 @@ class Quiz { checkAnswer(answer){ if (this.answer === this.questions[this.currentQuestionIndex].answer){ + this.correctAnswers +=1 } - this.correctAnswers +=1 } From b5b09a753832301fb39b0fe5e952ab176dea08bb Mon Sep 17 00:00:00 2001 From: RFelix1790 Date: Sat, 10 May 2025 16:19:39 +0200 Subject: [PATCH 5/9] day 3 done --- src/index.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index b57dbc64..05bb2d96 100644 --- a/src/index.js +++ b/src/index.js @@ -198,4 +198,16 @@ choiceElements.forEach(input=> { } } -}); \ No newline at end of file +}); +const restartButton = document.querySelector("#restartButton") +restartButton.addEventListener("click", restartQuizHandler) +function restartQuizHandler() { + endView.style.display = "none" + quizView.style.display = "block" + quiz.currentQuestionIndex = 0 + quiz.correctAnswers = 0 + quiz.shuffleQuestions() + showQuestion() + +} + From 96291abde325f0ef1cd3134d63fe38bc9640550b Mon Sep 17 00:00:00 2001 From: Joice Conte Date: Sat, 10 May 2025 16:19:45 +0200 Subject: [PATCH 6/9] done --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 534cd886..03b95bfe 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,7 @@

JavaScript Quiz

- + From f5e7cd897996cb1c8f0a159b1fec24cfc489a1bc Mon Sep 17 00:00:00 2001 From: Joice Conte Date: Tue, 13 May 2025 20:14:00 +0200 Subject: [PATCH 7/9] sharing --- src/index.js | 69 +++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 58 insertions(+), 11 deletions(-) diff --git a/src/index.js b/src/index.js index 05bb2d96..60b4f5a2 100644 --- a/src/index.js +++ b/src/index.js @@ -104,7 +104,7 @@ document.addEventListener("DOMContentLoaded", () => { // Update the green progress bar (div#progressBar) width so that it shows the percentage of questions answered const questionIndex = quiz.questions.indexOf(question); const progressPercent = ((questionIndex +1)/quiz.questions.length)*100; - progressPercent.style.width = `65%`; // This value is hardcoded as a placeholder + progressBar.style.width = `${progressPercent}` ; // This value is hardcoded as a placeholder @@ -128,8 +128,12 @@ 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. -question.choices.forEach(choice =>{ + +question.choices.forEach(choice => { + const input= document.createElement("input"); + + input.type = "radio"; input.name = "choice"; input.value = choice; @@ -143,20 +147,19 @@ question.choices.forEach(choice =>{ choiceContainer.appendChild(input); choiceContainer.appendChild(label); choiceContainer.appendChild(br); -}); - } - - + + +})} function nextButtonHandler () { let selectedAnswer; // A variable to store the selected answer value - + // YOUR CODE HERE: // // 1. Get all the choice elements. You can use the `document.querySelectorAll()` method. -const choiceElements = document.querySelector ('input[name = "choice"]'); +const choiceElements = 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`). @@ -184,7 +187,7 @@ choiceElements.forEach(input=> { function showResults() { - + clearInterval (timer); // YOUR CODE HERE: // // 1. Hide the quiz view (div#quizView) @@ -195,10 +198,12 @@ choiceElements.forEach(input=> { // 3. Update the result container (div#result) inner text to show the number of correct answers out of total questions 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", restartQuizHandler) function restartQuizHandler() { @@ -211,3 +216,45 @@ function restartQuizHandler() { } +startTimer(); +function startTimer(){ + timer = setInterval(() => { + quiz.timeRemaining--; + + const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); + const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); + + const timeRemainingContainer = document.getElementById("timeRemaining"); + timeRemainingContainer.innerText = `${minutes}: ${seconds}`; + + if (quiz.timeRemaining <= 0){ + clearInterval (timer); + showResults(); + clearInterval (timer); + } + },1000); + +} +function restartQuizHandler(){ + clearInterval(timer); + quiz.timeRemaining = quiz.timeLimit; + + const minutes = Math.floor (quiz.timeRemaining / 60).toString().padStart(2, "0"); + const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); + const timeRemainingContainer = document.getElementById("timeRemaining"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; + + quiz.currentQuestionIndex = 0; + quiz.correctAnswers = 0; + quiz.shuffleQuestions() + + endView.style.dislay = "none"; + quizView.style.display = "block"; + + showQuestion(); + +} + startTimer(); + +}) + \ No newline at end of file From 35e1d8d94e38ab8a6b3339a35e1bd6b2ed3d2453 Mon Sep 17 00:00:00 2001 From: Joice Conte Date: Tue, 13 May 2025 21:19:15 +0200 Subject: [PATCH 8/9] Sharing --- src/index.js | 46 ++++++++++++++++++++++++---------------------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/src/index.js b/src/index.js index 60b4f5a2..b4d99b3d 100644 --- a/src/index.js +++ b/src/index.js @@ -184,9 +184,8 @@ choiceElements.forEach(input=> { } - - - function showResults() { +} + function showResults() { clearInterval (timer); // YOUR CODE HERE: // @@ -200,22 +199,25 @@ choiceElements.forEach(input=> { 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", restartQuizHandler) -function restartQuizHandler() { - endView.style.display = "none" - quizView.style.display = "block" - quiz.currentQuestionIndex = 0 - quiz.correctAnswers = 0 - quiz.shuffleQuestions() - showQuestion() -} + + + +const restartButton = document.querySelector("#restartButton") +restartButton.addEventListener("click", restartQuizHandler) +// function restartQuizHandler() { +// endView.style.display = "none" +// quizView.style.display = "block" +// quiz.currentQuestionIndex = 0 +// quiz.correctAnswers = 0 +// quiz.shuffleQuestions() +// showQuestion() + +// } +//const quiz = new Quiz("#questions"); startTimer(); function startTimer(){ timer = setInterval(() => { @@ -241,20 +243,20 @@ function restartQuizHandler(){ const minutes = Math.floor (quiz.timeRemaining / 60).toString().padStart(2, "0"); const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); - const timeRemainingContainer = document.getElementById("timeRemaining"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; quiz.currentQuestionIndex = 0; quiz.correctAnswers = 0; quiz.shuffleQuestions() - endView.style.dislay = "none"; + endView.style.display = "none"; quizView.style.display = "block"; showQuestion(); - + startTimer() } - startTimer(); + -}) - \ No newline at end of file + + }) \ No newline at end of file From f17fc4388b308f3a805818d76057e3abb3c79fc9 Mon Sep 17 00:00:00 2001 From: Joice Conte Date: Tue, 13 May 2025 21:26:42 +0200 Subject: [PATCH 9/9] done --- src/quiz.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/quiz.js b/src/quiz.js index 45702d98..5ee64586 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -22,7 +22,7 @@ class Quiz { } checkAnswer(answer){ - if (this.answer === this.questions[this.currentQuestionIndex].answer){ + if (answer === this.questions[this.currentQuestionIndex].answer){ this.correctAnswers +=1 }