diff --git a/src/index.js b/src/index.js index 03737ba3..557d8487 100644 --- a/src/index.js +++ b/src/index.js @@ -98,20 +98,32 @@ 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; +question.choices.forEach(choice => { + const btn = document.createElement("button"); + btn.classList.add("choice"); + btn.innerText = choice; + btn.addEventListener("click", () => { + quiz.checkAnswer(choice); + nextButton.disabled = false; + }); + choiceContainer.appendChild(btn); +}); // 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 progress = (quiz.currentQuestionIndex / quiz.questions.length) * 100; +progressBar.style.width = `${progress}%`; // 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 +question.Count.innerText = `Question ${quiz.currentQuestionIndex + 1} of ${quiz.questions.length}`; // 4. Create and display new radio input element with a label for each choice. @@ -128,7 +140,20 @@ document.addEventListener("DOMContentLoaded", () => { // 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. - } + 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,19 +165,28 @@ document.addEventListener("DOMContentLoaded", () => { // YOUR CODE HERE: // // 1. Get all the choice elements. You can use the `document.querySelectorAll()` method. - +const choiceInputs = 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`). // 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. - +choiceInputs.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(); + } + } @@ -169,6 +203,8 @@ document.addEventListener("DOMContentLoaded", () => { // 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 - } + resultsContainer.innerText = `You scored ${quiz.correctAnswers} out of ${quiz.questions.length} correct answers!`; +} -}); \ No newline at end of file +}); + diff --git a/src/question.js b/src/question.js index 68f6631a..2f759d65 100644 --- a/src/question.js +++ b/src/question.js @@ -2,6 +2,18 @@ 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() -} \ No newline at end of file + 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]]; + } +} +} diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..fb44a988 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,58 @@ 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() { + 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]]; + } +} // 5. checkAnswer(answer) - +checkAnswer(answer) { + const current = this.getQuestion(); + if (current.answer === answer) { + this.correctAnswers += 1; + } +} // 6. hasEnded() +hasEnded() { + return this.currentQuestionIndex === this.questions.length; +} + +// 7. filterQuestionsByDifficulty() +filterQuestionsByDifficulty(difficulty) { + if (difficulty >= 1 && difficulty <= 3) { + this.questions = this.questions.filter(q => q.difficulty === difficulty); + } +} + +// 8. averageDifficulty() +averageDifficulty() { + if (this.questions.length === 0) { + return 0; + } + const total = this.questions.reduce((sum, q) => sum + q.difficulty, 0); + return total / this.questions.length; +} } \ No newline at end of file diff --git a/src/test.js b/src/test.js new file mode 100644 index 00000000..e2c938b2 --- /dev/null +++ b/src/test.js @@ -0,0 +1,11 @@ +const q1 = { + question: "What is the capital of France?", + choices: ["Miami", "Paris", "Oslo", "Rome"], + answer: "Paris", + difficulty: 1, + qLength() { + return this.choices.length; + } +} +q1.qLength(); // 4 +console.log(q1.qLength()); // 4 \ No newline at end of file