PT_RMT_082025 Amr CHATELAIN & Tanja MULLER

index.html

@@ -40,6 +40,8 @@ <h1>JavaScript Quiz</h1>
         </div>
         <!-- The below 'Restart Quiz' button is commented out because it is not used initially -->
         <!-- <button id="restartButton" class="button-secondary">Restart Quiz</button> -->
+
+         <button id="restartButton" class="button-secondary">Restart Quiz</button>
       </div>
     </div>
 

src/index.js

@@ -55,18 +55,43 @@ document.addEventListener("DOMContentLoaded", () => {
 
   // Show first question
   showQuestion();
+
 
 
   /************  TIMER  ************/
 
   let timer;
 
+  function startTimer() {
+  // Clear any existing timer
+  clearInterval(timer);
+
+  timer = setInterval(() => {
+    quiz.timeRemaining--;
+
+    // Convert seconds → MM:SS
+    const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0");
+    const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0");
+
+    // Update display
+    timeRemainingContainer.innerText = `${minutes}:${seconds}`;
+
+    // When time is up
+    if (quiz.timeRemaining <= 0) {
+      clearInterval(timer);
+      showResults();
+    }
+  }, 1000);
+}
+
+
+
 
   /************  EVENT LISTENERS  ************/
 
   nextButton.addEventListener("click", nextButtonHandler);
 
-
+    startTimer();
 
   /************  FUNCTIONS  ************/
 
@@ -95,22 +120,32 @@ 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.innerHTML=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 currentIndex = quiz.currentQuestionIndex + 1;
+
+      const progressPercent = (currentIndex / quiz.questions.length) * 100;
+
+       progressBar.style.width = `${progressPercent}%`;
+
 
 
 
     // 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 ${currentIndex} of ${quiz.questions.length}`; //  This value is hardcoded as a placeholder
 
 
 
@@ -128,47 +163,128 @@ 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.
 
+      question.choices.forEach((choiceText, idx) => {
+
+      const input = document.createElement('input');
+
+     input.type = 'radio';
+        input.name = 'answer';
+       input.value = choiceText;
+       input.id = `choice_${idx}`;
+
+
+      const label = document.createElement('label');
+
+      label.htmlFor = input.id;
+
+        label.innerText = choiceText;
+
+      choiceContainer.appendChild(input);
+
+       choiceContainer.appendChild(label);
+
+       choiceContainer.appendChild(document.createElement('br'));
+    });
+
+
   }
 
 
 
   function nextButtonHandler () {
-    let selectedAnswer; // A variable to store the selected answer value
+    let selectedAnswer= null; // A variable to store the selected answer value
 
 
 
     // YOUR CODE HERE:
-    //
     // 1. Get all the choice elements. You can use the `document.querySelectorAll()` method.
+     const choices = document.querySelectorAll('input[name="answer"]');
 
 
     // 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.
 
+       choices.forEach((choice) => {
+    if (choice.checked) {
+      selectedAnswer = choice.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 !== null) {
 
+  quiz.checkAnswer(selectedAnswer);
+
+  quiz.moveToNextQuestion();
+
+
+  if (quiz.hasEnded()) {
+
+    showResults();
+
+  } else {
+    showQuestion();
+  }
+} 
+
+ }
 
 
   function showResults() {
 
     // YOUR CODE HERE:
-    //
+
     // 1. Hide the quiz view (div#quizView)
-    quizView.style.display = "none";
+
+       quizView.style.display = "none";
+
 
     // 2. Show the end view (div#endView)
-    endView.style.display = "flex";
+
+     endView.style.display = "block";
 
     // 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 = `Your final score is: ${quiz.correctAnswers} out of ${quiz.questions.length}`;
+
+     const restartBtn = document.getElementById("restartButton");
+
+if (restartBtn) {
+  restartBtn.addEventListener("click", restartQuiz);
+}
+
+function restartQuiz() {
+
+  endView.style.display = "none";
+
+
+  quizView.style.display = "block";
+
+
+  quiz.currentQuestionIndex = 0;
+
+  quiz.correctAnswers = 0;
 
+  quiz.timeRemaining = quizDuration;
+
+
+  quiz.shuffleQuestions();
+
+   clearInterval(timer);
+
+  startTimer();
+
+
+  showQuestion();
+}
+
+}
 });

src/question.js

@@ -2,6 +2,38 @@ 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() {
+
+        let currentIndex = this.choices.length - 1;
+
+    while (currentIndex > 0) {
+        let randomIndex = Math.floor(Math.random() * (currentIndex + 1));
+
+        [this.choices[currentIndex], this.choices[randomIndex]] = 
+        [this.choices[randomIndex], this.choices[currentIndex]];
+
+         currentIndex--;
+
+    }
+    /* return this.choices; */
+    }
+
+}
+
+
+this.questions = [
+    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),
+    ];

src/quiz.js

@@ -1,15 +1,91 @@
 class Quiz {
     // YOUR CODE HERE:
-    //
+    constructor(questions,timeLimit,timeRemaining) {
+
+    this.questions = [
+    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),
+    ];
     // 1. 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++;
+}
 
     // 4. shuffleQuestions()
+    shuffleQuestions() {
+         let currentIndex = this.questions.length - 1;
+
+    while (currentIndex > 0) {
+        let randomIndex = Math.floor(Math.random() * (currentIndex + 1));
+
+        [this.questions[currentIndex], this.questions[randomIndex]] = 
+        [this.questions[randomIndex], this.questions[currentIndex]];
+
+         currentIndex--; 
+    }
+    /* return this.questions; */
+    }
+
+
 
     // 5. checkAnswer(answer)
+    checkAnswer(answer) {
+      if (answer === this.getQuestion().answer) {
+        this.correctAnswers++;
+      }
+
+    }
 
     // 6. hasEnded()
+
+    hasEnded() {
+
+  return this.currentQuestionIndex >= this.questions.length;
+
+ }
+
+
+    // 7. filterQuestionsByDifficulty(difficulty)
+
+    filterQuestionsByDifficulty(difficulty) {
+      if (typeof difficulty === 'number' && difficulty >= 1 && difficulty <= 3) {
+        this.questions = this.questions.filter(question => question.difficulty === difficulty);
+    }
+  }
+
+
+  // averageDifficulty()
+
+   averageDifficulty() {
+
+     if (this.questions.length === 0) return 0;
+
+    const total = this.questions.reduce((acc, q) => {
+      return acc + q.difficulty;
+    }, 0);
+    return  total / this.questions.length;
+   }
+
+
 }