diff --git a/index.html b/index.html
index 534cd886..5e1a86f7 100644
--- a/index.html
+++ b/index.html
@@ -39,8 +39,8 @@ JavaScript Quiz
-
-
+
+
diff --git a/src/index.js b/src/index.js
index 03737ba3..25f61fc4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -61,12 +61,36 @@ document.addEventListener("DOMContentLoaded", () => {
let timer;
+ function startTimer() {
+
+ // Clear any existing timers from previous runs
+ clearInterval(timer);
+
+ // start countdown
+ timer = setInterval(() => {
+ quiz.timeRemaining--;
+
+ //convert time within function scope
+ const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0");
+ const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0");
+
+ // kep display updated
+ timeRemainingContainer.innerText = `${minutes}:${seconds}`;
+
+ // when time has run out: show results
+ if (quiz.timeRemaining <= 0) {
+ clearInterval(timer);
+ showResults();
+ }
+ }, 1000);
+}
+
/************ EVENT LISTENERS ************/
nextButton.addEventListener("click", nextButtonHandler);
-
+ startTimer();
/************ FUNCTIONS ************/
@@ -89,6 +113,7 @@ document.addEventListener("DOMContentLoaded", () => {
// Get the current question from the quiz by calling the Quiz class method `getQuestion()`
const question = quiz.getQuestion();
+ console.log(question);
// Shuffle the choices of the current question by calling the method 'shuffleChoices()' on the question object
question.shuffleChoices();
@@ -98,19 +123,25 @@ 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
+ /* 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}`;
@@ -118,7 +149,24 @@ document.addEventListener("DOMContentLoaded", () => {
// Loop through the current question `choices`.
// For each choice create a new radio input with a label, and append it to the choice container.
// Each choice should be displayed as a radio input element with a label:
- /*
+ question.choices.forEach((choiceText, index) => {
+
+ const input = document.createElement('input');
+ const label = document.createElement('label');
+
+ input.type = 'radio';
+ input.name = 'answer';
+ input.value = choiceText;
+ input.id = `choices-${index}`
+
+ label.htmlFor = input.id;
+ label.innerText = choiceText;
+ choiceContainer.appendChild(input);
+ choiceContainer.appendChild(label);
+ choiceContainer.appendChild(document.createElement('br'));
+
+ });
+ /*
@@ -133,28 +181,39 @@ document.addEventListener("DOMContentLoaded", () => {
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() {
@@ -165,10 +224,31 @@ document.addEventListener("DOMContentLoaded", () => {
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 = `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();
+
}
});
\ No newline at end of file
diff --git a/src/question.js b/src/question.js
index 68f6631a..4dae86c5 100644
--- a/src/question.js
+++ b/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()
-}
\ No newline at end of file
+
+ 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),
+ ];
\ No newline at end of file
diff --git a/src/quiz.js b/src/quiz.js
index d94cfd14..485423e5 100644
--- a/src/quiz.js
+++ b/src/quiz.js
@@ -1,15 +1,103 @@
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++;
+ }
+
+ /* if (this.currentQuestionIndex < this.questions.length - 1) {
+ this.currentQuestionIndex++;
+ return this.currentQuestionIndex;
+
+ } else {
+ return "you\'re done";
+ } */
// 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;
+ }
+ /* if (this.currentQuestionIndex < this.questions.length) {
+ return false;
+ }
+ else if (this.currentQuestionIndex == this.questions.length) {
+ return true;
+ }
+ } */
+
+
+ // 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;
+ }
+
}
\ No newline at end of file