Most Recent

src/index.js

@@ -8,7 +8,7 @@ document.addEventListener("DOMContentLoaded", () => {
   const progressBar = document.querySelector("#progressBar");
   const questionCount = document.querySelector("#questionCount");
   const questionContainer = document.querySelector("#question");
-  const choiceContainer = document.querySelector("#choices");
+  let choiceContainer = document.querySelector("#choices");
   const nextButton = document.querySelector("#nextButton");
 
   // End view elements
@@ -98,21 +98,28 @@ 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
 
+    const totalQuestions = questions.length;
+    const answered = quiz.currentQuestionIndex; //check again
+    const percentDone = (answered / totalQuestions) * 100;
+
+    progressBar.style.width = percentDone + "%"; 
 
 
     // 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
 
+    const displayNumber = quiz.currentQuestionIndex + 1;
+    questionCount.innerText = `Question ${displayNumber} of ${totalQuestions}`;
+
+    // console.log(currentQuestion);
 
+
+
 
     // 4. Create and display new radio input element with a label for each choice.
     // Loop through the current question `choices`.
@@ -127,8 +134,27 @@ 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 wrapper = document.createElement("div");
+      wrapper.innerHTML = `
+    <input type="radio" name="choice" value="${choice}">
+    <label>${choice}</label>
+    <br>
+  `;
+
+  choiceContainer.appendChild(wrapper);
+});
   }
+
+  //     myDiv.innerHTML = ``
+
+  //   <input type="radio" name="choice" value="${choiceText}">
+  //   <label>${choiceText}</label>
+  //   <br>
+  // `;
+  //       choiceContainer.appendChild(myDiv)
+  //   });
+
 
 
 
@@ -168,7 +194,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 ${questions.length} correct answers!`; // This value is hardcoded as a placeholder
+  }  
+});
+

src/question.js

@@ -1,7 +1,23 @@
 class Question {
+    constructor (text, choices, answer, difficulty) {
+    this.text = text; 
+    this.choices = choices;
+    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));
+        [this.choices[i], this.choices[j]] = [this.choices[j], this.choices[i]];
+        }
+    }     
+}
+
+
+
+
     // YOUR CODE HERE:
     //
     // 1. constructor (text, choices, answer, difficulty)
-
-    // 2. shuffleChoices()
-}
+    // 2. shuffleChoices() 

src/quiz.js

@@ -1,15 +1,55 @@
 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;
+    }
+
+    getQuestion(){
+        return this.questions[this.currentQuestionIndex]
+    }
 
-    // 3. moveToNextQuestion()
+    moveToNextQuestion(){
+        return 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]];
+        }
+    }
 
-    // 4. shuffleQuestions()
+    checkAnswer(answer) {
+        const theQuestion = this.getQuestion();
+        if (!theQuestion) return false;
+        const correct = theQuestion.answer === answer;
+        if (correct) this.correctAnswers ++;
+        return correct;
+    }
+    hasEnded() {
+        return this.currentQuestionIndex === this.questions.length;
+    }
+    filterQuestionsByDifficulty(difficulty){
+        if(typeof difficulty !== 'number' || difficulty < 1 || difficulty > 3) {
+            return;
+        }
 
-    // 5. checkAnswer(answer)
+        this.questions = this.questions.filter(question => {
+            return question.difficulty === difficulty;
+        });    
+    }  
 
-    // 6. hasEnded()
-}
+    averageDifficulty() {
+
+        const totalDifficulty = this.questions.reduce((x, question) => x + question.difficulty, 0)
+
+        return totalDifficulty / this.questions.length
+    }
+
+
+}
+
+