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