From 6862cd4748b782bd7ce3a357b6e9b346b7ba223a Mon Sep 17 00:00:00 2001 From: "Rishi G." Date: Mon, 12 May 2025 16:53:03 +0200 Subject: [PATCH 1/7] Jasmine --- src/question.js | 14 ++++++++++++-- src/quiz.js | 38 +++++++++++++++++++++++++++++++------- 2 files changed, 43 insertions(+), 9 deletions(-) diff --git a/src/question.js b/src/question.js index 68f6631a..4c3d51ee 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() { + 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 d94cfd14..0c41e6f3 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,39 @@ 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() + getQuestion(){ + return this.questions[this.currentQuestionIndex] + } + moveToNextQuestion(){ +return 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]]; + } + } - // 4. shuffleQuestions() + checkAnswer(answer){ + if(answer === answer){ + this.correctAnswers++ + } + } - // 5. checkAnswer(answer) + hasEnded(){ + if(this.currentQuestionIndex < this.questions.length) { + return false + } else if(this.currentQuestionIndex === this.questions.length){ + return true - // 6. hasEnded() + } + } } \ No newline at end of file From 16e81a1ae96190790d421227dfab424f26fe763b Mon Sep 17 00:00:00 2001 From: "Rishi G." Date: Mon, 12 May 2025 17:34:15 +0200 Subject: [PATCH 2/7] quiz day2 --- src/quiz.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/quiz.js b/src/quiz.js index 0c41e6f3..d89164c0 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -36,4 +36,11 @@ return this.currentQuestionIndex++ } } + filterQuestionsByDifficulty(difficulty){ + + } + + averageDifficulty(){ + + } } \ No newline at end of file From 6735e41fbcf2dc152e7a31c831f9b0cf968db8d3 Mon Sep 17 00:00:00 2001 From: "Rishi G." Date: Mon, 12 May 2025 18:00:00 +0200 Subject: [PATCH 3/7] day2 --- src/quiz.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/quiz.js b/src/quiz.js index d89164c0..b0013974 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -37,10 +37,11 @@ return this.currentQuestionIndex++ } } filterQuestionsByDifficulty(difficulty){ + } averageDifficulty(){ - + } } \ No newline at end of file From 80f82bf3402e66f7a03434fbab73f451278986e4 Mon Sep 17 00:00:00 2001 From: "Rishi G." Date: Tue, 13 May 2025 17:32:58 +0200 Subject: [PATCH 4/7] update quiz --- src/question.js | 24 +++++++------- src/quiz.js | 88 ++++++++++++++++++++++++++++--------------------- 2 files changed, 62 insertions(+), 50 deletions(-) diff --git a/src/question.js b/src/question.js index 4c3d51ee..d548a698 100644 --- a/src/question.js +++ b/src/question.js @@ -1,17 +1,17 @@ class Question { - // YOUR CODE HERE: - // - constructor (text, choices, answer, difficulty){ - this.text = text ; - this.choices = choices; - this.answer = answer; - this.difficulty = difficulty; - } + // YOUR CODE HERE: + // + constructor(text, choices, answer, difficulty) { + this.text = text; + this.choices = choices; + this.answer = answer; + this.difficulty = difficulty; + } - shuffleChoices() { + 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]]; + 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 b0013974..8ffaf1f7 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,47 +1,59 @@ class Quiz { - // YOUR CODE HERE: - // - constructor (questions, timeLimit, timeRemaining){ - this.questions = questions ; - this.timeLimit = timeLimit ; - this.timeRemaining = timeRemaining ; - this.correctAnswers = 0 ; - this.currentQuestionIndex = 0 ; - } + // YOUR CODE HERE: + // + 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(){ -return 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]]; - } - } + getQuestion() { + return this.questions[this.currentQuestionIndex]; + } + moveToNextQuestion() { + return 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(answer){ - if(answer === answer){ - this.correctAnswers++ - } + checkAnswer(answer) { + if (answer === answer) { + this.correctAnswers++; } + } - hasEnded(){ - if(this.currentQuestionIndex < this.questions.length) { - return false - } else if(this.currentQuestionIndex === this.questions.length){ - return true - + hasEnded() { + if (this.currentQuestionIndex < this.questions.length) { + return false; + } else if (this.currentQuestionIndex === this.questions.length) { + return true; + } + } + filterQuestionsByDifficulty(difficulty) { + if (difficulty >= 1 || difficulty <= 3) { + const filteredQuestions = this.questions.filter((question) => { + if (question.difficulty === difficulty) { + return true; } - } - filterQuestionsByDifficulty(difficulty){ - + }); + this.questions = filteredQuestions; } + } - averageDifficulty(){ - - } -} \ No newline at end of file + averageDifficulty() { + let total = this.questions.reduce((acc, curr) => { + return acc + curr.difficulty; + }, 0); + return total / this.questions.length; + } +} From ee8919791d0a3c75926ca6c455b3f0aa63d8b7e3 Mon Sep 17 00:00:00 2001 From: "Rishi G." Date: Wed, 14 May 2025 17:39:30 +0200 Subject: [PATCH 5/7] quiz updated --- src/index.js | 128 ++++++++++++++++++++++++++---------------------- src/question.js | 2 - src/quiz.js | 6 ++- 3 files changed, 74 insertions(+), 62 deletions(-) diff --git a/src/index.js b/src/index.js index 03737ba3..2d4ed1e8 100644 --- a/src/index.js +++ b/src/index.js @@ -14,39 +14,52 @@ document.addEventListener("DOMContentLoaded", () => { // End view elements const resultContainer = document.querySelector("#result"); - /************ SET VISIBILITY OF VIEWS ************/ // Show the quiz view (div#quizView) and hide the end view (div#endView) quizView.style.display = "block"; endView.style.display = "none"; - /************ QUIZ DATA ************/ - + // Array with the quiz questions const questions = [ 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 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 + ), // Add more questions here ]; const quizDuration = 120; // 120 seconds (2 minutes) - /************ QUIZ INSTANCE ************/ - + // Create a new Quiz instance object const quiz = new Quiz(questions, quizDuration, quizDuration); // Shuffle the quiz questions quiz.shuffleQuestions(); - /************ SHOW INITIAL CONTENT ************/ // Convert the time remaining in seconds to minutes and seconds, and pad the numbers with zeros if needed - const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); + 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 @@ -56,26 +69,20 @@ document.addEventListener("DOMContentLoaded", () => { // Show first question showQuestion(); - /************ TIMER ************/ let timer; - /************ EVENT LISTENERS ************/ nextButton.addEventListener("click", nextButtonHandler); - - /************ FUNCTIONS ************/ // 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()) { @@ -91,74 +98,78 @@ 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(); - - // 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 + progressBar.style.width = + (100 / quiz.questions.length) * quiz.currentQuestionIndex + "%"; // This value is hardcoded as a placeholder - - // 3. Update the question count text + // 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 + console.log(quiz.questions[0]); + quiz.questions[quiz.currentQuestionIndex].choices.forEach((choice) => { + const newChoice = document.createElement("div"); + newChoice.innerHTML = ` + +
`; + choiceContainer.appendChild(newChoice); + }); // 4. Create and display new radio input element with a label for each choice. // 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: - /* + // 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: + /*
*/ - // Hint 1: You can use the `document.createElement()` method to create a new element. - // 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. - + // Hint 1: You can use the `document.createElement()` method to create a new element. + // 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. } - - - function nextButtonHandler () { + 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 allChoices = document.querySelectorAll("input"); + console.log(allChoices); + let checked; + allChoices.forEach((oneChoice) => { + if (oneChoice.checked) { + checked = oneChoice.value; + } + }); + + const correctAnswer = quiz.checkAnswer(checked); + console.log(correctAnswer); + quiz.moveToNextQuestion(); + showQuestion(); // 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. + // 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()`. - } - - - + // 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()`. + } function showResults() { - // YOUR CODE HERE: // // 1. Hide the quiz view (div#quizView) @@ -166,9 +177,8 @@ document.addEventListener("DOMContentLoaded", () => { // 2. Show the end view (div#endView) endView.style.display = "flex"; - + const correctAnswers = quiz.correctAnswers; // 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 ${correctAnswers} out of ${quiz.questions.length} 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 d548a698..3de804d1 100644 --- a/src/question.js +++ b/src/question.js @@ -1,6 +1,4 @@ class Question { - // YOUR CODE HERE: - // constructor(text, choices, answer, difficulty) { this.text = text; this.choices = choices; diff --git a/src/quiz.js b/src/quiz.js index 8ffaf1f7..8f4928a7 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -26,8 +26,12 @@ class Quiz { } checkAnswer(answer) { - if (answer === answer) { + const currentQuestion = this.getQuestion(); + if (currentQuestion.answer === answer) { this.correctAnswers++; + return true; + } else { + return false; } } From e38966165b6af2c98483dde3dae003de1094ba80 Mon Sep 17 00:00:00 2001 From: "Rishi G." Date: Thu, 15 May 2025 17:29:31 +0200 Subject: [PATCH 6/7] quiz --- index.html | 10 +++++----- src/index.js | 28 ++++++++++++++++++++++++++-- 2 files changed, 31 insertions(+), 7 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 2d4ed1e8..4ac7f7ab 100644 --- a/src/index.js +++ b/src/index.js @@ -11,6 +11,8 @@ document.addEventListener("DOMContentLoaded", () => { const choiceContainer = document.querySelector("#choices"); const nextButton = document.querySelector("#nextButton"); + const resetBtn = document.querySelector("#restartButton"); + // End view elements const resultContainer = document.querySelector("#result"); @@ -72,11 +74,32 @@ document.addEventListener("DOMContentLoaded", () => { /************ TIMER ************/ let timer; - + timer = setInterval(() => { + 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}`; + if (quiz.timeRemaining === 0) { + clearInterval(timer); + showResults(); + } + }, 1000); /************ EVENT LISTENERS ************/ nextButton.addEventListener("click", nextButtonHandler); + resetBtn.addEventListener("click", () => { + quizView.style.display = "flex"; + endView.style.display = "none"; + quiz.shuffleQuestions(); + quiz.timeRemaining = 120; + quiz.correctAnswers = 0; + quiz.currentQuestionIndex = 0; + showQuestion(); + }); + /************ FUNCTIONS ************/ // showQuestion() - Displays the current question and its choices @@ -115,7 +138,8 @@ document.addEventListener("DOMContentLoaded", () => { questionCount.innerText = `Question ${quiz.currentQuestionIndex + 1} of ${ quiz.questions.length - }`; // This value is hardcoded as a placeholder + }`; + // This value is hardcoded as a placeholder console.log(quiz.questions[0]); quiz.questions[quiz.currentQuestionIndex].choices.forEach((choice) => { const newChoice = document.createElement("div"); From cfb5f177ef1b251ac253262458b002f1bf35338f Mon Sep 17 00:00:00 2001 From: amirsadeghi Date: Thu, 15 May 2025 17:50:06 +0200 Subject: [PATCH 7/7] quiz done --- src/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 4ac7f7ab..85bf7549 100644 --- a/src/index.js +++ b/src/index.js @@ -21,7 +21,8 @@ document.addEventListener("DOMContentLoaded", () => { // Show the quiz view (div#quizView) and hide the end view (div#endView) quizView.style.display = "block"; endView.style.display = "none"; - + +//view /************ QUIZ DATA ************/ // Array with the quiz questions