From b83bb9a84f183f62a69c0eb4637c08d573cc786e Mon Sep 17 00:00:00 2001 From: Mariam Bankole Date: Thu, 22 Jan 2026 12:30:44 +0000 Subject: [PATCH 1/4] mini project --- src/question.js | 52 +++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 48 insertions(+), 4 deletions(-) diff --git a/src/question.js b/src/question.js index 68f6631a..fd0c86db 100644 --- a/src/question.js +++ b/src/question.js @@ -1,7 +1,51 @@ 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]]; + } + } +} + +class Quiz { + constructor(questions, timeLimit, timeRemaining) { + this.questions = questions; + this.timeLimit = timeLimit; + this.timeRemaining = timeRemaining; + this.correctAnswers = 0; + this.correctQuestionIndex = 0; + } + getQuestion() { + return this.questions[this.currentQuestionIndex]; + } + moveToNextQuestion() { + return this.questions[this.currentQuestionIndex]; + } + + shuffleQuestion() { + 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) { + const currentQuestion = this.getQuestion(); + if (answer === currentQuestion.answer) { + this.correctAnswers++; + return true; + } + return false; + } + + hasEnded() { + return this.currentQuestionIndex >= this.questions.length; + } } \ No newline at end of file From 4e49719f1b157e40fddc894d209c10437c725e15 Mon Sep 17 00:00:00 2001 From: Mariam Bankole Date: Sun, 25 Jan 2026 17:46:40 +0000 Subject: [PATCH 2/4] git --- src/index.js | 162 ++++++++++++++++++++++++++++-------------------- src/question.js | 51 ++++++++++++++- 2 files changed, 145 insertions(+), 68 deletions(-) diff --git a/src/index.js b/src/index.js index 03737ba3..03ade328 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -document.addEventListener("DOMContentLoaded", () => { +document.addEventListener("DOMContentLoaded"), () => { /************ HTML ELEMENTS ************/ // View divs const quizView = document.querySelector("#quizView"); @@ -91,84 +91,112 @@ 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(); + + function showQuestion() { + const question = quiz.getQuestion(); + questionContainer.textContent = question.text; + const progress = ((quiz.currentQuestionIndex + 1) / quiz.questions.length) * 100; + progressBar.style.width = `${progress}%`; + questionCounter.textContent = `Question ${quiz.currentQuestionIndex + 1} of ${quiz.questions.length}`; + choiceContainer.innerHTML = ''; + question.choices.forEach((choice, index) => { + const radio = document.createElement('input'); + radio.type = 'radio'; + radio.name = 'choice'; + radio.id = `choice-${index}`; + radio.value = choice; + const label = document.createElement('label'); + label.htmlFor = `choice-${index}`; + label.textContent = choice; + + const choiceDiv = document.createElement('div'); + choiceDiv.classList.add('choice'); + choiceDiv.appendChild(radio); + choiceDiv.appendChild(label); + choiceContainer.appendChild(choiceDiv); + }); +} + questionCount.innerText = `Question ${quiz.currentQuestionIndex + 1} of ${quiz.questions.length}`; - // YOUR CODE HERE: - // - // 1. Show the question - // Update the inner text of the question container element and show the question text + } + let selectedAnswer; // A variable to store the selected answer value + function nextButtonHandler() { + // Get all radio inputs + const choices = document.querySelectorAll('input[name="choice"]'); + let selectedAnswer = null; + + // Find selected answer + choices.forEach(choice => { + if (choice.checked) { + selectedAnswer = choice.value; + } + }); + + // If answer selected + if (selectedAnswer !== null) { + // Check if correct + quiz.checkAnswer(selectedAnswer); - // 2. Update the green progress bar - // Update the green progress bar (div#progressBar) width so that it shows the percentage of questions answered + // Move to next question + quiz.moveToNextQuestion(); - progressBar.style.width = `65%`; // This value is hardcoded as a placeholder + if (quiz.hasEnded()) { + showResults(); + } else { + showQuestion(); + } + } else { + alert('Please select an answer!'); + } +} + } +function showResults() { + quizView.style.display = 'none'; + endView.style.display = 'block'; + const score = document.getElementById('score'); + score.textContent = `${quiz.correctAnswers} out of ${quiz.questions.length}`; +} +let timer; - // 3. Update the question count text - // Update the question count (div#questionCount) show the current question out of total questions +function startTimer() { + timer = setInterval(() => { + quiz.timeRemaining--; - questionCount.innerText = `Question 1 of 10`; // This value is hardcoded as a placeholder - - + const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); + const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; - // 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. - - } - + if (quiz.timeRemaining <= 0) { + clearInterval(timer); + showResults(); + } + }, 1000); +} +function showResults() { + clearInterval(timer); - function nextButtonHandler () { - let selectedAnswer; // A variable to store the selected answer value + quizView.style.display = "none"; + endView.style.display = "flex"; + resultContainer.innerText = `You scored ${quiz.correctAnswers} out of ${quiz.questions.length} correct answers!`; +} - - - // 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. - - - // 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 showResults() { - - // YOUR CODE HERE: - // - // 1. Hide the quiz view (div#quizView) - quizView.style.display = "none"; - - // 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 - } +function resetQuizHandler() { + clearInterval(timer); -}); \ No newline at end of file + quiz.currentQuestionIndex = 0; + quiz.correctAnswers = 0; + quiz.timeRemaining = quiz.timeLimit; + + const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); + const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; + + startTimer(); + showQuestion(); +} \ No newline at end of file diff --git a/src/question.js b/src/question.js index fd0c86db..3f2b1880 100644 --- a/src/question.js +++ b/src/question.js @@ -48,4 +48,53 @@ class Quiz { hasEnded() { return this.currentQuestionIndex >= this.questions.length; } -} \ No newline at end of file + + + getQuestion() { + return this.questions[this.currentQuestionIndex]; + } + + moveToNextQuestion() { + 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) { + const currentQuestion = this.getQuestion(); + if (answer === currentQuestion.answer) { + this.correctAnswers++; + return true; + } + return false; + } + + hasEnded() { + return this.currentQuestionIndex >= this.questions.length; + } + + filterQuestionsByDifficulty(difficulty) { + if (difficulty >= 1 && difficulty <= 3) { + this.questions = this.questions.filter(question => + question.difficulty === difficulty + ); + } + } + + averageDifficulty() { + if (this.questions.length === 0) return 0; + + const totalDifficulty = this.questions.reduce((sum, question) => { + return sum + question.difficulty; + }, 0); + + return totalDifficulty / this.questions.length; + } +} + + From ce9766bd85ff975f726f631a5e3a870b8f3d9c05 Mon Sep 17 00:00:00 2001 From: Mariam Bankole Date: Sun, 25 Jan 2026 18:03:02 +0000 Subject: [PATCH 3/4] changes --- index.html | 2 +- src/index.js | 169 ++++++++++++++++++++++-------------------------- src/question.js | 89 +------------------------ src/quiz.js | 67 ++++++++++++++++--- 4 files changed, 139 insertions(+), 188 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 03ade328..811d403e 100644 --- a/src/index.js +++ b/src/index.js @@ -89,114 +89,103 @@ document.addEventListener("DOMContentLoaded"), () => { // 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(); - function showQuestion() { - const question = quiz.getQuestion(); - questionContainer.textContent = question.text; - const progress = ((quiz.currentQuestionIndex + 1) / quiz.questions.length) * 100; - progressBar.style.width = `${progress}%`; - questionCounter.textContent = `Question ${quiz.currentQuestionIndex + 1} of ${quiz.questions.length}`; - choiceContainer.innerHTML = ''; - question.choices.forEach((choice, index) => { - const radio = document.createElement('input'); - radio.type = 'radio'; - radio.name = 'choice'; - radio.id = `choice-${index}`; - radio.value = choice; - const label = document.createElement('label'); - label.htmlFor = `choice-${index}`; - label.textContent = choice; - - const choiceDiv = document.createElement('div'); - choiceDiv.classList.add('choice'); - choiceDiv.appendChild(radio); - choiceDiv.appendChild(label); - - choiceContainer.appendChild(choiceDiv); - }); -} + // Update the green progress bar + const progressPercentage = ((quiz.currentQuestionIndex + 1) / quiz.questions.length) * 100; + progressBar.style.width = `${progressPercentage}%`; + // Update the question count text questionCount.innerText = `Question ${quiz.currentQuestionIndex + 1} of ${quiz.questions.length}`; + // Display the question text + questionContainer.innerText = question.text; + + // Create and display new radio input with a label for each choice + question.choices.forEach((choice, index) => { + // Create radio input element + const radioInput = document.createElement("input"); + radioInput.type = "radio"; + radioInput.name = "choice"; + radioInput.id = `choice${index}`; + radioInput.value = choice; + + // Create label element + const label = document.createElement("label"); + label.htmlFor = `choice${index}`; + label.innerText = choice; + + // Create a div to contain the radio and label + const choiceDiv = document.createElement("div"); + choiceDiv.classList.add("choice"); + choiceDiv.appendChild(radioInput); + choiceDiv.appendChild(label); + + // Add the choice to the choice container + choiceContainer.appendChild(choiceDiv); + }); } - let selectedAnswer; // A variable to store the selected answer value - function nextButtonHandler() { - // Get all radio inputs - const choices = document.querySelectorAll('input[name="choice"]'); - let selectedAnswer = null; - - // Find selected answer - choices.forEach(choice => { - if (choice.checked) { - selectedAnswer = choice.value; - } - }); - - // If answer selected - if (selectedAnswer !== null) { - // Check if correct - quiz.checkAnswer(selectedAnswer); + function nextButtonHandler() { + const choiceElements = document.querySelectorAll('input[name="choice"]'); + let selectedAnswer = null; - // Move to next question - quiz.moveToNextQuestion(); + choiceElements.forEach(choiceElement => { + if (choiceElement.checked) { + selectedAnswer = choiceElement.value; + } + }); - if (quiz.hasEnded()) { - showResults(); - } else { + if (selectedAnswer !== null) { + quiz.checkAnswer(selectedAnswer); + quiz.moveToNextQuestion(); showQuestion(); + } else { + alert("Please select an answer before proceeding!"); } - } else { - alert('Please select an answer!'); - } -} } -function showResults() { - quizView.style.display = 'none'; - endView.style.display = 'block'; - const score = document.getElementById('score'); - score.textContent = `${quiz.correctAnswers} out of ${quiz.questions.length}`; -} + function showResults() { + quizView.style.display = "none"; + endView.style.display = "flex"; + resultContainer.innerText = `You scored ${quiz.correctAnswers} out of ${quiz.questions.length} correct answers!`; + clearInterval(timer); + } -let timer; + 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"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; + + if (quiz.timeRemaining <= 0) { + clearInterval(timer); + showResults(); + } + }, 1000); + } -function startTimer() { - timer = setInterval(() => { - quiz.timeRemaining--; + function resetQuizHandler() { + endView.style.display = "none"; + quizView.style.display = "block"; + + quiz.currentQuestionIndex = 0; + quiz.correctAnswers = 0; + quiz.timeRemaining = quiz.timeLimit; 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); -} - -function showResults() { - clearInterval(timer); - - quizView.style.display = "none"; - endView.style.display = "flex"; - resultContainer.innerText = `You scored ${quiz.correctAnswers} out of ${quiz.questions.length} correct answers!`; -} - -function resetQuizHandler() { - clearInterval(timer); - - quiz.currentQuestionIndex = 0; - quiz.correctAnswers = 0; - quiz.timeRemaining = quiz.timeLimit; - - const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); - const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); - timeRemainingContainer.innerText = `${minutes}:${seconds}`; - - startTimer(); - showQuestion(); -} \ No newline at end of file + quiz.shuffleQuestions(); + + clearInterval(timer); + startTimer(); + + showQuestion(); + } +}; \ No newline at end of file diff --git a/src/question.js b/src/question.js index 3f2b1880..837b0a75 100644 --- a/src/question.js +++ b/src/question.js @@ -7,94 +7,9 @@ class Question { } shuffleChoices() { - for ( let i = this.choices.length -1; i > 0; i--) { + 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]]; } } -} - -class Quiz { - constructor(questions, timeLimit, timeRemaining) { - this.questions = questions; - this.timeLimit = timeLimit; - this.timeRemaining = timeRemaining; - this.correctAnswers = 0; - this.correctQuestionIndex = 0; - } - getQuestion() { - return this.questions[this.currentQuestionIndex]; - } - moveToNextQuestion() { - return this.questions[this.currentQuestionIndex]; - } - - shuffleQuestion() { - 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) { - const currentQuestion = this.getQuestion(); - if (answer === currentQuestion.answer) { - this.correctAnswers++; - return true; - } - return false; - } - - hasEnded() { - return this.currentQuestionIndex >= this.questions.length; - } - - - getQuestion() { - return this.questions[this.currentQuestionIndex]; - } - - moveToNextQuestion() { - 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) { - const currentQuestion = this.getQuestion(); - if (answer === currentQuestion.answer) { - this.correctAnswers++; - return true; - } - return false; - } - - hasEnded() { - return this.currentQuestionIndex >= this.questions.length; - } - - filterQuestionsByDifficulty(difficulty) { - if (difficulty >= 1 && difficulty <= 3) { - this.questions = this.questions.filter(question => - question.difficulty === difficulty - ); - } - } - - averageDifficulty() { - if (this.questions.length === 0) return 0; - - const totalDifficulty = this.questions.reduce((sum, question) => { - return sum + question.difficulty; - }, 0); - - return totalDifficulty / this.questions.length; - } -} - - +} \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..51dd6ff1 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,62 @@ 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; // Fixed: changed from correctQuestionIndex to currentQuestionIndex + } + + getQuestion() { + return this.questions[this.currentQuestionIndex]; + } - // 3. moveToNextQuestion() + moveToNextQuestion() { + this.currentQuestionIndex++; // Fixed: increment index, don't return question + } - // 4. shuffleQuestions() + shuffleQuestions() { + for (let i = this.questions.length - 1; i > 0; i--) { // Fixed: changed i-0 to i>0 + const j = Math.floor(Math.random() * (i + 1)); + [this.questions[i], this.questions[j]] = [this.questions[j], this.questions[i]]; + } + } - // 5. checkAnswer(answer) + checkAnswer(answer) { + const currentQuestion = this.getQuestion(); + if (answer === currentQuestion.answer) { + this.correctAnswers++; + return true; + } + return false; + } - // 6. hasEnded() -} \ No newline at end of file + hasEnded() { + return this.currentQuestionIndex >= this.questions.length; + } + filterQuestionsByDifficulty(difficulty) { + // Check if difficulty is a number between 1 and 3 + if (typeof difficulty === 'number' && difficulty >= 1 && difficulty <= 3) { + // Use filter() to keep only questions with the specified difficulty + this.questions = this.questions.filter(question => { + return question.difficulty === difficulty; + }); + } + // If difficulty is not valid (not a number between 1-3), do nothing + } + averageDifficulty() { + // Handle edge case: empty questions array + if (this.questions.length === 0) { + return 0; + } + + // Use reduce() to sum up all difficulty values + const totalDifficulty = this.questions.reduce((sum, question) => { + // Add current question's difficulty to the running sum + return sum + question.difficulty; + }, 0); // Start with initial value of 0 + + // Calculate and return the average + return totalDifficulty / this.questions.length; + } +} From 2da1b803a704ab97bd96b96c3fc0eda1337bb8ba Mon Sep 17 00:00:00 2001 From: Mariam Bankole Date: Sun, 1 Feb 2026 18:43:08 +0000 Subject: [PATCH 4/4] lab --- src/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 811d403e..50794c52 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -document.addEventListener("DOMContentLoaded"), () => { +document.addEventListener("DOMContentLoaded", () => { /************ HTML ELEMENTS ************/ // View divs const quizView = document.querySelector("#quizView"); @@ -160,6 +160,8 @@ document.addEventListener("DOMContentLoaded"), () => { 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) { @@ -188,4 +190,4 @@ document.addEventListener("DOMContentLoaded"), () => { showQuestion(); } -}; \ No newline at end of file +}); \ No newline at end of file