-
+
diff --git a/src/index.js b/src/index.js
index 03737ba3..85781bf6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,6 +10,8 @@ document.addEventListener("DOMContentLoaded", () => {
const questionContainer = document.querySelector("#question");
const choiceContainer = document.querySelector("#choices");
const nextButton = document.querySelector("#nextButton");
+ const restartButton = document.getElementById("restartButton")
+ const remainingTime = document.querySelector("#timeRemaining")
// End view elements
const resultContainer = document.querySelector("#result");
@@ -54,7 +56,7 @@ document.addEventListener("DOMContentLoaded", () => {
timeRemainingContainer.innerText = `${minutes}:${seconds}`;
// Show first question
- showQuestion();
+ showQuestion()
/************ TIMER ************/
@@ -74,7 +76,8 @@ document.addEventListener("DOMContentLoaded", () => {
// nextButtonHandler() - Handles the click on the next button
// showResults() - Displays the end view and the quiz results
-
+/* Declare percentage variable
+ */
function showQuestion() {
// If the quiz has ended, show the results
@@ -91,26 +94,38 @@ document.addEventListener("DOMContentLoaded", () => {
const question = quiz.getQuestion();
// Shuffle the choices of the current question by calling the method 'shuffleChoices()' on the question object
question.shuffleChoices();
+
-
+ console.log(question)
// 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
+ percentage = Math.floor( ( quiz.currentQuestionIndex / questions.length ) * 100 )
+
+
+
+ progressBar.style.width = percentage + "%" ; // This value is hardcoded as a placeholder
+
// 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 ${questions.length}`; // This value is hardcoded as a placeholder
@@ -128,26 +143,63 @@ 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.
+
+ let choicesHtml = ""
+
+ question.choices.forEach(element => {
+
+ let html = `
+
`
+
+ choicesHtml += html
+
+ });
+
+ choiceContainer.innerHTML = choicesHtml
+
}
function nextButtonHandler () {
let selectedAnswer; // A variable to store the selected answer value
-
+ console.log("buttonclicked")
// YOUR CODE HERE:
//
// 1. Get all the choice elements. You can use the `document.querySelectorAll()` method.
-
+ allChoicesElement = document.querySelectorAll("input[name='choice']")
// 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.
-
+ allChoicesElement.forEach((input)=>{
+ if ( input.checked = true ){
+
+ selectedAnswer = input.value
+
+
+
+ /* Remove unecessary if line */
+ quiz.checkAnswer(selectedAnswer);
+
+ console.log(quiz.correctAnswers)
+ return
+
+
+
+ }
+
+ })
+
+ quiz.moveToNextQuestion()
+ showQuestion()
+
+
+
// 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()`.
@@ -158,7 +210,7 @@ document.addEventListener("DOMContentLoaded", () => {
function showResults() {
-
+
// YOUR CODE HERE:
//
// 1. Hide the quiz view (div#quizView)
@@ -168,7 +220,74 @@ 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
+ resultContainer.innerText = `You scored ${quiz.correctAnswers} out of ${questions.length} correct answers!`; // This value is hardcoded as a placeholder
}
-});
\ No newline at end of file
+
+
+
+function restartQuiz( ){
+quiz.currentQuestionIndex = 0
+quiz.correctAnswers = 0
+console.log("current question is "+ quiz.currentQuestionIndex, "current correct answers " + quiz.correctAnswers )
+quiz.shuffleQuestions()
+
+showQuestion()
+
+
+/* adding minutes and seconds inside of the timer container text as declared line 51 to 52 */
+quiz.timeRemaining = quizDuration
+remainingTime.innerHTML = `Remaining Time: ${minutes}:${seconds}`
+startCountdown()
+}
+
+
+
+
+restartButton.addEventListener("click", ()=>{
+
+
+
+endView.style.display = "none"
+
+quizView.style.display = "flex"
+
+
+restartQuiz()
+
+
+
+})
+
+//implement a countdown timer for the quiz
+
+startCountdown()
+
+function startCountdown(){
+ console.log ("startCountdown called")
+
+ const timerInterval = setInterval(() => {
+
+/* Modify timer to show minutes and seconds too
+ */
+ const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0");
+ const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0");
+ remainingTime.innerHTML = `Remaining Time: ${minutes}:${seconds}`
+ ;
+
+ if(quiz.timeRemaining === 0){
+ clearInterval(timerInterval);
+ showResults();
+
+ }
+ quiz.timeRemaining--;
+
+ }, 1000)
+}
+
+
+
+
+
+});
+
diff --git a/src/question.js b/src/question.js
index 68f6631a..7031758b 100644
--- a/src/question.js
+++ b/src/question.js
@@ -1,7 +1,27 @@
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(){
+
+
+ this.choices= this.choices.reduce((acc, item )=>{
+let index = Math.floor(Math.random() * acc.length+1 )
+acc.splice(index,0,item)
+return acc
+
+},[])
+
+
+}
+
+}
+const question = new Question('Hello', ["rabbit" , "cat", "dog"])
+ console.log(question.shuffleChoices())
+ // figure out why we needed to add the new variable
+
diff --git a/src/quiz.js b/src/quiz.js
index d94cfd14..e233dbd1 100644
--- a/src/quiz.js
+++ b/src/quiz.js
@@ -1,15 +1,95 @@
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(){
+ this.currentQuestionIndex++;
+ return this.questions[this.currentQuestionIndex];
+ }
// 4. shuffleQuestions()
+ shuffleQuestions(){
+ this.questions = this.questions.reduce((shuffledArr, item)=>{
+
+ let index = Math.floor(Math.random()*shuffledArr.length +1 )
+ shuffledArr.splice(index,0,item )
+ return shuffledArr
+
+ },[])
+
+
+ }
// 5. checkAnswer(answer)
+ checkAnswer(answer){
+ if ( answer === this.questions[this.currentQuestionIndex].answer){
+
+ this.correctAnswers++
+
+ }
+
+ }
// 6. hasEnded()
-}
\ No newline at end of file
+ hasEnded(){
+ if (this.currentQuestionIndex < this.questions.length ){ return false
+
+ }else if ( this.currentQuestionIndex == this.questions.length){
+
+ return true
+ }
+
+ }
+
+
+ filterQuestionsByDifficulty(difficulty){
+
+
+
+
+ if ( typeof difficulty != "number" || difficulty < 1 || difficulty > 3 )return ;
+
+
+
+ this.questions = this.questions.filter((item)=>{
+ return item.difficulty === difficulty
+
+ })
+
+
+ }
+
+
+ averageDifficulty(){
+ const summ = this.questions.reduce((currentDifficulty, question )=>{
+ currentDifficulty += question.difficulty
+
+
+ console.log(currentDifficulty)
+ return currentDifficulty
+ },0)
+ console.log(summ)
+ let average = summ / this.questions.length
+
+ return average
+
+ }
+
+
+}
+
+
diff --git a/src/tempCodeRunnerFile.js b/src/tempCodeRunnerFile.js
new file mode 100644
index 00000000..66ab66dc
--- /dev/null
+++ b/src/tempCodeRunnerFile.js
@@ -0,0 +1 @@
+item, index
\ No newline at end of file