JC Quiz Project

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!`;
+}
 
-});
+});
+

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()
-}
+        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]];
+    }
+}
+}

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;
+}
 }

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