From 1a3ac3662d1f91bc95ebd92e1ee3627ae75d1b69 Mon Sep 17 00:00:00 2001 From: Dreng0t Date: Mon, 7 Apr 2025 14:58:33 +0100 Subject: [PATCH 1/5] First draught --- src/question.js | 13 +++++++++++++ src/quiz.js | 12 ++++++++++++ 2 files changed, 25 insertions(+) diff --git a/src/question.js b/src/question.js index 68f6631a..f9e64d41 100644 --- a/src/question.js +++ b/src/question.js @@ -4,4 +4,17 @@ class Question { // 1. constructor (text, choices, answer, difficulty) // 2. shuffleChoices() + constructor(text, choice, answer, difficulty){ + this.text = text; + this.choices = choice; + this.answer = answer; + this.difficulty = difficulty; + } + + shuffleChoices() { + for (let i = this.choices.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); // Pick a random index from 0 to i + [this.choices[i], this.choices[j]] = [this.choices[j], this.choices[i]]; // Swap + } + } } \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..5259ccc7 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -12,4 +12,16 @@ class Quiz { // 5. checkAnswer(answer) // 6. hasEnded() + 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]; + } } \ No newline at end of file From a9d37a48e65fe525829d5488157e43cd1228fd8d Mon Sep 17 00:00:00 2001 From: Dreng0t Date: Mon, 7 Apr 2025 15:16:40 +0100 Subject: [PATCH 2/5] First day done --- src/quiz.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/quiz.js b/src/quiz.js index 5259ccc7..eb6a41f3 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -24,4 +24,29 @@ class Quiz { 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)); // Pick a random index from 0 to i + [this.questions[i], this.questions[j]] = [this.questions[j], this.questions[i]]; // Swap + } + } + + checkAnswer(answer){ + if (answer){ + return this.correctAnswers++; + } + } + + hasEnded(){ + if (this.currentQuestionIndex < this.questions.length){ + return false; + }else{ + return true; + } + } } \ No newline at end of file From 8825ca55d7f82f907371f2e850cf4bc83656e3f6 Mon Sep 17 00:00:00 2001 From: Dreng0t Date: Tue, 8 Apr 2025 15:49:31 +0100 Subject: [PATCH 3/5] Day 2 done --- src/quiz.js | 37 ++++++++++++++++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/src/quiz.js b/src/quiz.js index eb6a41f3..5ced17a4 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -49,4 +49,39 @@ class Quiz { return true; } } -} \ No newline at end of file + + filterQuestionsByDifficulty(difficulty) { + if (typeof difficulty !== "number" || difficulty < 1 || difficulty > 3){ + return; + } + + this.questions = this.questions.filter((question) => { + return question.difficulty === difficulty; + }) + } + + averageDifficulty() { + const total = this.questions.reduce((sum, question) => { + return sum + question.difficulty; + }, 0) + + return total/(this.questions.length); + } +} + + + + + +/* +function countYearsInOffice(presidentsArr) { + return presidentsArr.reduce((sum, president) => { + if (president.leftOffice === null) { + return sum; + } + + return sum + (president.leftOffice - president.tookOffice); + }, 0); +} + +*/ \ No newline at end of file From 232c01769791b868df7bfae4756007f48755d364 Mon Sep 17 00:00:00 2001 From: Dreng0t Date: Wed, 9 Apr 2025 19:01:18 +0100 Subject: [PATCH 4/5] Day 4 done --- index.html | 2 +- src/index.js | 77 ++++++++++++++++++++++++++++++++----------------- src/question.js | 4 --- src/quiz.js | 31 +------------------- 4 files changed, 53 insertions(+), 61 deletions(-) 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..a2c4f206 100644 --- a/src/index.js +++ b/src/index.js @@ -10,7 +10,7 @@ document.addEventListener("DOMContentLoaded", () => { const questionContainer = document.querySelector("#question"); const choiceContainer = document.querySelector("#choices"); const nextButton = document.querySelector("#nextButton"); - + const restartButton = document.querySelector('#restartButton'); // End view elements const resultContainer = document.querySelector("#result"); @@ -66,6 +66,8 @@ document.addEventListener("DOMContentLoaded", () => { nextButton.addEventListener("click", nextButtonHandler); + restartButton.addEventListener("click", restartButtonHandler) + /************ FUNCTIONS ************/ @@ -98,19 +100,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} of ${quiz.questions.length}`; // This value is hardcoded as a placeholder @@ -127,32 +130,54 @@ 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 newInput = document.createElement("input"); + const newLabel = document.createElement("label"); + const newBr = document.createElement("br") + + newInput.type = "radio"; + newInput.name = "answer"; + newInput.value = choice; + + newLabel.innerText = choice; + choiceContainer.appendChild(newInput); + choiceContainer.appendChild(newLabel); + choiceContainer.appendChild(newBr) + }); + } - 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. - - - // 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. + function nextButtonHandler() { + let selectedAnswer; + + const choices = document.querySelectorAll("input[name='answer']"); + choices.forEach((choice) => { + if (choice.checked) { + selectedAnswer = choice.value; + } + }); + + if (selectedAnswer) { + const currentQuestion = quiz.getQuestion(); + if (selectedAnswer === currentQuestion.answer) { + quiz.checkAnswer(true); + } + + 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()`. - // Show the next question by calling the function `showQuestion()`. - } + function restartButtonHandler() { + quiz.currentQuestionIndex = 0; + quiz.correctAnswers = 0; + quiz.shuffleQuestions(); + showQuestion(); + quizView.style.display = "block"; + endView.style.display = "none"; + } @@ -168,7 +193,7 @@ 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 } }); \ No newline at end of file diff --git a/src/question.js b/src/question.js index f9e64d41..38d381ed 100644 --- a/src/question.js +++ b/src/question.js @@ -1,9 +1,5 @@ class Question { - // YOUR CODE HERE: - // - // 1. constructor (text, choices, answer, difficulty) - // 2. shuffleChoices() constructor(text, choice, answer, difficulty){ this.text = text; this.choices = choice; diff --git a/src/quiz.js b/src/quiz.js index 5ced17a4..899ea784 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,17 +1,5 @@ class Quiz { - // YOUR CODE HERE: - // - // 1. constructor (questions, timeLimit, timeRemaining) - - // 2. getQuestion() - // 3. moveToNextQuestion() - - // 4. shuffleQuestions() - - // 5. checkAnswer(answer) - - // 6. hasEnded() constructor(questions, timeLimit, timeRemaining){ this.questions = questions; this.timeLimit = timeLimit; @@ -67,21 +55,4 @@ class Quiz { return total/(this.questions.length); } -} - - - - - -/* -function countYearsInOffice(presidentsArr) { - return presidentsArr.reduce((sum, president) => { - if (president.leftOffice === null) { - return sum; - } - - return sum + (president.leftOffice - president.tookOffice); - }, 0); -} - -*/ \ No newline at end of file +} \ No newline at end of file From cc20c5463f87c9f7adc0028afdeaaf15c2e32276 Mon Sep 17 00:00:00 2001 From: Dreng0t Date: Thu, 10 Apr 2025 15:40:36 +0100 Subject: [PATCH 5/5] Project finished --- src/index.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/index.js b/src/index.js index a2c4f206..c943a397 100644 --- a/src/index.js +++ b/src/index.js @@ -55,12 +55,32 @@ document.addEventListener("DOMContentLoaded", () => { // Show first question showQuestion(); + + /************ TIMER ************/ let timer; + function startCountDown() { + timer = setInterval(() => { + quiz.timeRemaining--; + let minutesNew = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); + let secondsNew = (quiz.timeRemaining % 60).toString().padStart(2, "0"); + console.log("WTF") + timeRemainingContainer.innerText = `${minutesNew}:${secondsNew}`; + if (quiz.timeRemaining === 0) { + clearInterval(timer); + showResults(); + } + }, 1000); + } + + startCountDown(); + + + /************ EVENT LISTENERS ************/ @@ -171,12 +191,15 @@ document.addEventListener("DOMContentLoaded", () => { } function restartButtonHandler() { + quiz.timeRemaining = quizDuration; quiz.currentQuestionIndex = 0; quiz.correctAnswers = 0; quiz.shuffleQuestions(); showQuestion(); + startCountDown(); quizView.style.display = "block"; endView.style.display = "none"; + } @@ -187,6 +210,7 @@ document.addEventListener("DOMContentLoaded", () => { // YOUR CODE HERE: // // 1. Hide the quiz view (div#quizView) + clearInterval(timer); quizView.style.display = "none"; // 2. Show the end view (div#endView)