diff --git a/src/index.js b/src/index.js
index 03737ba3..f96a1cb2 100644
--- a/src/index.js
+++ b/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 = `
+
+
+
+ `;
+
+ choiceContainer.appendChild(wrapper);
+});
}
+
+ // myDiv.innerHTML = ``
+
+ //
+ //
+ //
+ // `;
+ // 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
- }
-
-});
\ No newline at end of file
+ resultContainer.innerText = `You scored ${quiz.correctAnswers} out of ${questions.length} correct answers!`; // This value is hardcoded as a placeholder
+ }
+});
+
diff --git a/src/question.js b/src/question.js
index 68f6631a..303eace2 100644
--- a/src/question.js
+++ b/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()
-}
\ No newline at end of file
+ // 2. shuffleChoices()
diff --git a/src/quiz.js b/src/quiz.js
index d94cfd14..3da583d4 100644
--- a/src/quiz.js
+++ b/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()
-}
\ No newline at end of file
+ averageDifficulty() {
+
+ const totalDifficulty = this.questions.reduce((x, question) => x + question.difficulty, 0)
+
+ return totalDifficulty / this.questions.length
+ }
+
+
+}
+
+
\ No newline at end of file