done

README.md

@@ -1 +1,43 @@
 # Project: JavaScript Quiz
+shuffleQuestions() method
+
+Shuffles the elements stored in the questions array of the Quiz.
+
+should be defined.
+should be a function.
+should receive no arguments.
+should shuffle the items in the questions array.
+
+checkAnswer(answer) method
+
+Checks if the passed answer is correct for the current question and increments correctAnswers by 1 if the answer is correct.
+
+should be defined.
+should be a function.
+should receive 1 argument (answer - string).
+should increase correctAnswers by 1 when called with a correct answer for the current question
+
+hasEnded() method
+
+Returns true if the quiz has ended (the last question has been answered), and false otherwise.
+
+should be defined.
+
+should be a function.
+
+should receive no arguments.
+
+should return false when currentQuestionIndex is less than the questions array length
+
+should return true when currentQuestionIndex is equal to the questions array length
+
+
+
+Remember to commit your changes often and push them to the GitHub repo.
+
+
+Research Tasks:
+Watch the video “What is THIS in JavaScript? in 100 seconds” (est. time ~7 min).
+Read the lesson “JS | Special keyword - this” on the Student Portal (est. time ~45 min).
+
+

src/index.js

@@ -29,12 +29,12 @@ document.addEventListener("DOMContentLoaded", () => {
     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),
     new Question("Who created JavaScript?", ["Plato", "Brendan Eich", "Lea Verou", "Bill Gates"], "Brendan Eich", 2),
-    new Question("What is the mass–energy equivalence equation?", ["E = mc^2", "E = m*c^2", "E = m*c^3", "E = m*c"], "E = mc^2", 3),
+    new Question("What is the mass-energy equivalence equation?", ["E = mc^2", "E = m*c^2", "E = m*c^3", "E = m*c"], "E = mc^2", 3),
     // Add more questions here
   ];
   const quizDuration = 120; // 120 seconds (2 minutes)
 
-
+  
   /************  QUIZ INSTANCE  ************/
 
   // Create a new Quiz instance object
@@ -59,7 +59,20 @@ document.addEventListener("DOMContentLoaded", () => {
 
   /************  TIMER  ************/
 
-  let timer;
+
+
+  setInterval(() => {
+    if (quiz.timeRemaining > 0) {
+      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}`;
+    } else {
+      showResults();
+    }
+  }, 1000);
 
 
   /************  EVENT LISTENERS  ************/
@@ -73,14 +86,13 @@ document.addEventListener("DOMContentLoaded", () => {
   // showQuestion() - Displays the current question and its choices
   // nextButtonHandler() - Handles the click on the next button
   // showResults() - Displays the end view and the quiz results
-
+  
 
 
   function showQuestion() {
     // If the quiz has ended, show the results
     if (quiz.hasEnded()) {
-      showResults();
-      return;
+      return showResults();
     }
 
     // Clear the previous question text and question choices
@@ -95,22 +107,22 @@ document.addEventListener("DOMContentLoaded", () => {
 
 
     // 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 questionProgress = (quiz.currentQuestionIndex / quiz.questions.length) * 100;
+    progressBar.style.width = `${questionProgress}%`;
 
 
 
     // 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 ${quiz.currentQuestionIndex + 1} of ${quiz.questions.length}`;
+
 
 
 
@@ -127,20 +139,58 @@ 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.
+
+    for (let j = 0; j < question.choices.length; j++) {
+      const choiceText = question.choices[j];
+
+      const input = document.createElement("input");
+      input.type = "radio";
+      input.name = "choice";
+      input.value = choiceText;
+      input.id = `choice-${j}`;
+
+      const label = document.createElement("label");
+      label.htmlFor = input.id;
+      label.innerText = choiceText;
+
+      const br = document.createElement("br");
 
+      choiceContainer.appendChild(input);
+      choiceContainer.appendChild(label);
+      choiceContainer.appendChild(br);
+    }
   }
 
 
+
+
+
+
 
   function nextButtonHandler () {
     let selectedAnswer; // A variable to store the selected answer value
 
+    const total = document.querySelectorAll("input[name='choice']");
 
+    for (let i = 0; i < total.length; i++) {
+      if (total[i].checked) {
+        selectedAnswer = total[i].value;
+        break;
+      }
+    }
 
+    if (!selectedAnswer) {
+      return;
+    }
+
+    quiz.checkAnswer(selectedAnswer);
+    quiz.moveToNextQuestion();
+    showQuestion();
+
     // 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`).
@@ -166,9 +216,26 @@ 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
+    resultContainer.innerText = `You scored ${quiz.correctAnswers} out of ${quiz.questions.length} correct answers!`;
   }
 
-});
+});
+
+const restartElement = document.createElement("div");
+restartElement.innerHTML = `
+<button id="restart">Restart Game</button>`;
+
+endView.appendChild(restartElement);
+
+restartElement.addEventListener('click', () => {
+  quizView.style.display = "flex";
+  endView.style.display = "none";
+  quiz.currentQuestionIndex = 0;
+  quiz.score = 0;
+
+
+})

src/question.js

@@ -1,7 +1,17 @@
 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() {
+        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]];
+        }
+    }
+
+}
 
-    // 2. shuffleChoices()
-}

src/quiz.js

@@ -1,15 +1,57 @@
 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;
+    }  
 
-    // 3. moveToNextQuestion()
+    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]];
+        }
+    }
 
-    // 4. shuffleQuestions()
+    checkAnswer(selectedChoice) {
+        const currentQuestion = this.getQuestion();
+        if (selectedChoice === currentQuestion.answer) {
+            this.correctAnswers++;
+            return true;
+        }
+        return false;
+    }
 
-    // 5. checkAnswer(answer)
+    hasEnded() {
+        return this.currentQuestionIndex >= this.questions.length || this.timeRemaining <= 0;
+    }
+
+    filterQuestionsByDifficulty(difficulty) {
+        if(difficulty >= 1 && difficulty <= 3){
+            this.questions = this.questions.filter(
+        (question) => question.difficulty === difficulty)
+        }
+        else{
+            return this.questions;
+        }
+            return this.questions;
+        }
+
+        averageDifficulty(){
+       const total = this.questions.reduce((accumulator, currentElement) => {
+            return accumulator += currentElement.difficulty;
+       },0)
+       return total / this.questions.length;
+    }
+
 
-    // 6. hasEnded()
-}
+}