From e0cf1c9db3d5fa3abf699ed80b6bc1f36ed53f2b Mon Sep 17 00:00:00 2001 From: YenaKC Date: Mon, 11 May 2026 17:43:03 +0200 Subject: [PATCH 1/5] doing quiz --- src/question.js | 14 +++++++++++--- src/quiz.js | 29 +++++++++++++++++++++++++++-- 2 files changed, 38 insertions(+), 5 deletions(-) diff --git a/src/question.js b/src/question.js index 68f6631a..a6ebec6b 100644 --- a/src/question.js +++ b/src/question.js @@ -1,7 +1,15 @@ class Question { // YOUR CODE HERE: // - // 1. constructor (text, choices, answer, difficulty) + //1. + constructor (text, choices, answer, difficulty) { + this.text = text; + this.choices = choices; + this.answer = answer; + this.difficulty = difficulty; + } + shuffleChoices() { + this.choices.sort(() => Math.random() - .5); + } +} - // 2. shuffleChoices() -} \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..e59009ad 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -2,14 +2,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() + getQuestion() { + return this.questions[this.currentQuestionIndex]; + } // 3. moveToNextQuestion() + moveToNextQuestion() { + this.currentQuestionIndex++; + } // 4. shuffleQuestions() + shuffleQuestions() { + this.questions.sort(() => Math.random() - .5); + } // 5. checkAnswer(answer) + checkAnswer(answer) { + this.correctAnswers ++; + } // 6. hasEnded() -} \ No newline at end of file + hasEnded() { + if (this.currentQuestionIndex < this.questions.length) { + return false; + } + if (this.currentQuestionIndex === this.questions.length) + return true; + } +} \ No newline at end of file From d02ee8ba760c9ed161451da2ff4fb341132495ad Mon Sep 17 00:00:00 2001 From: Chinonye Date: Mon, 11 May 2026 17:43:47 +0200 Subject: [PATCH 2/5] quiz solutions --- src/question.js | 14 +++++++++++--- src/quiz.js | 44 +++++++++++++++++++++++++++++++++++++------- 2 files changed, 48 insertions(+), 10 deletions(-) diff --git a/src/question.js b/src/question.js index 68f6631a..6d144792 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 + +} + + shuffleChoices(){ + this.choices.sort(()=> Math.random() - .5); + } - // 2. shuffleChoices() } \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..5e6bc8cf 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,45 @@ 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() - // 4. shuffleQuestions() + getQuestion(){ + return this.questions[this.currentQuestionIndex] - // 5. checkAnswer(answer) + } + + moveToNextQuestion(){ + return this.currentQuestionIndex++ + + } + + shuffleQuestions(){ + return this.questions.sort(()=> Math.random() - .5) + + } + + checkAnswer(answer){ + this.correctAnswers++ + + } + + hasEnded(){ + if(this.currentQuestionIndex Date: Tue, 12 May 2026 17:35:24 +0200 Subject: [PATCH 3/5] solved --- src/quiz.js | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/src/quiz.js b/src/quiz.js index e59009ad..82003934 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -2,7 +2,7 @@ class Quiz { // YOUR CODE HERE: // // 1. constructor (questions, timeLimit, timeRemaining) - constructor(questions, timeLimit, timeRemaining){ + constructor(questions, timeLimit, timeRemaining) { this.questions = questions; this.timeLimit = timeLimit; this.timeRemaining = timeRemaining; @@ -13,7 +13,7 @@ class Quiz { getQuestion() { return this.questions[this.currentQuestionIndex]; } - + // 3. moveToNextQuestion() moveToNextQuestion() { this.currentQuestionIndex++; @@ -26,7 +26,7 @@ class Quiz { // 5. checkAnswer(answer) checkAnswer(answer) { - this.correctAnswers ++; + this.correctAnswers++; } // 6. hasEnded() @@ -36,5 +36,22 @@ class Quiz { } if (this.currentQuestionIndex === this.questions.length) return true; + } + + filterQuestionsByDifficulty(difficulty) { + if (typeof difficulty !== "number" || difficulty < 1 || difficulty > 3) { + return this.questions; } + + this.questions = this.questions.filter((element) => { + return element.difficulty === difficulty; + }); + } + averageDifficulty() { + const average = this.questions.reduce(function (accumulator, element) { + return accumulator + element.difficulty; + }, 0); + return average / this.questions.length; + } + } \ No newline at end of file From 940d80b759849e2cbdb328d97b7cf4abc1e7d693 Mon Sep 17 00:00:00 2001 From: YenaKC Date: Wed, 13 May 2026 18:40:27 +0200 Subject: [PATCH 4/5] Solved lab --- src/index.js | 118 ++++++++++++++++++++++++++++++++++----------------- src/quiz.js | 12 +++--- 2 files changed, 85 insertions(+), 45 deletions(-) diff --git a/src/index.js b/src/index.js index 03737ba3..3a26eff8 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,7 @@ document.addEventListener("DOMContentLoaded", () => { /************ HTML ELEMENTS ************/ + + // View divs const quizView = document.querySelector("#quizView"); const endView = document.querySelector("#endView"); @@ -23,8 +25,9 @@ document.addEventListener("DOMContentLoaded", () => { /************ QUIZ DATA ************/ - - // Array with the quiz questions + + // 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), @@ -36,7 +39,7 @@ document.addEventListener("DOMContentLoaded", () => { /************ QUIZ INSTANCE ************/ - + // Create a new Quiz instance object const quiz = new Quiz(questions, quizDuration, quizDuration); // Shuffle the quiz questions @@ -84,75 +87,110 @@ document.addEventListener("DOMContentLoaded", () => { } // Clear the previous question text and question choices - questionContainer.innerText = ""; + questionContainer.innerText= ""; choiceContainer.innerHTML = ""; // Get the current question from the quiz by calling the Quiz class method `getQuestion()` 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 + const totalQuestions = quiz.questions.length; + const currentQuestion = quiz.currentQuestionIndex; + const percentage = (currentQuestion / totalQuestions) * 100 + + 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 ${currentQuestion + 1} of ${totalQuestions}`; // This value is hardcoded as a placeholder + - // 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: - /* - - -
- */ - // 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. + // 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. + question.choices.forEach((choiceText, idx) => { + const input = document.createElement("input"); + input.type = "radio"; + input.name = "choice"; + input.value = choiceText; + input.id = `choice-${idx}`; + + const label = document.createElement("label"); + label.htmlFor = input.id; + label.innerText = choiceText; + + choiceContainer.appendChild(input); + choiceContainer.appendChild(label); + choiceContainer.appendChild(document.createElement("br")); + }); + + + // console.log(question.choices); + + // - iterate through the array "question.choices" (which is an array of strings) + // - for each element on that array, do dom manipulation and create an input and a label that look like this: + // + // + // ... and inject those elements in "choiceContainer" (choiceContainer.appendChild()) } - - function nextButtonHandler () { - let selectedAnswer; // A variable to store the selected answer value - + 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 choiceElement = document.querySelector('input[name="choice"]:checked'); + // const choiceElement = document.querySelectorAll('newInput'); // 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. + if (choiceElement) { + selectedAnswer = choiceElement.value; + quiz.checkAnswer(selectedAnswer); + quiz.moveToNextQuestion(); + showQuestion(); + } else { + return; + } + - // 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()`. + } @@ -166,9 +204,11 @@ 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 + const total = quiz.questions.length; + const correct = quiz.correctAnswers; + resultContainer.innerText = `You scored ${correct} out of ${total} correct answers!`; // This value is hardcoded as a placeholder } - + }); \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index 82003934..54d6e22b 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -26,16 +26,16 @@ class Quiz { // 5. checkAnswer(answer) checkAnswer(answer) { - this.correctAnswers++; + const currentQuestion = this.getQuestion(); + + if (answer === currentQuestion.answer) { + this.correctAnswers++; + } } // 6. hasEnded() hasEnded() { - if (this.currentQuestionIndex < this.questions.length) { - return false; - } - if (this.currentQuestionIndex === this.questions.length) - return true; + return this.currentQuestionIndex >= this.questions.length; } filterQuestionsByDifficulty(difficulty) { From b63586b24466285cab9bc46863cf5a7d5b014450 Mon Sep 17 00:00:00 2001 From: YenaKC Date: Thu, 14 May 2026 16:52:33 +0200 Subject: [PATCH 5/5] done --- src/index.js | 30 +++++++++++++++++++++++++----- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index 3a26eff8..204fdeb4 100644 --- a/src/index.js +++ b/src/index.js @@ -27,7 +27,7 @@ document.addEventListener("DOMContentLoaded", () => { /************ 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), @@ -62,7 +62,23 @@ document.addEventListener("DOMContentLoaded", () => { /************ TIMER ************/ - let timer; + let timer = quiz.timeRemaining; + const countTime = setInterval(() => { + timer--; + const minutes = Math.floor(timer / 60).toString().padStart(2, "0"); + const seconds = (timer % 60).toString().padStart(2, "0"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; + + if (timer <= 0) { + clearInterval(countTime); + showResults(); + } + }, 1000); + + + + + /************ EVENT LISTENERS ************/ @@ -87,7 +103,7 @@ document.addEventListener("DOMContentLoaded", () => { } // Clear the previous question text and question choices - questionContainer.innerText= ""; + questionContainer.innerText = ""; choiceContainer.innerHTML = ""; // Get the current question from the quiz by calling the Quiz class method `getQuestion()` @@ -110,7 +126,7 @@ document.addEventListener("DOMContentLoaded", () => { const currentQuestion = quiz.currentQuestionIndex; const percentage = (currentQuestion / totalQuestions) * 100 - progressBar.style.width = `${(quiz.currentQuestionIndex / quiz.questions.length)*100}%`; // This value is hardcoded as a placeholder + progressBar.style.width = `${(quiz.currentQuestionIndex / quiz.questions.length) * 100}%`; // This value is hardcoded as a placeholder @@ -194,11 +210,15 @@ document.addEventListener("DOMContentLoaded", () => { - function showResults() { // YOUR CODE HERE: // + // setTimeout(() => { + // console.log('hello world'); + // }, 120000); + + clearInterval(countTime); // 1. Hide the quiz view (div#quizView) quizView.style.display = "none";