|
| 1 | +//selecting all required elements |
| 2 | +const start_btn = document.querySelector(".start_btn button"); |
| 3 | +const info_box = document.querySelector(".info_box"); |
| 4 | +const exit_btn = info_box.querySelector(".buttons .quit"); |
| 5 | +const continue_btn = info_box.querySelector(".buttons .restart"); |
| 6 | +const quiz_box = document.querySelector(".quiz_box"); |
| 7 | +const result_box = document.querySelector(".result_box"); |
| 8 | +const option_list = document.querySelector(".option_list"); |
| 9 | +const time_line = document.querySelector("header .time_line"); |
| 10 | +const timeText = document.querySelector(".timer .time_left_txt"); |
| 11 | +const timeCount = document.querySelector(".timer .timer_sec"); |
| 12 | + |
| 13 | +// if startQuiz button clicked |
| 14 | +start_btn.onclick = ()=>{ |
| 15 | + info_box.classList.add("activeInfo"); //show info box |
| 16 | +} |
| 17 | + |
| 18 | +// if exitQuiz button clicked |
| 19 | +exit_btn.onclick = ()=>{ |
| 20 | + info_box.classList.remove("activeInfo"); //hide info box |
| 21 | +} |
| 22 | + |
| 23 | +// if continueQuiz button clicked |
| 24 | +continue_btn.onclick = ()=>{ |
| 25 | + info_box.classList.remove("activeInfo"); //hide info box |
| 26 | + quiz_box.classList.add("activeQuiz"); //show quiz box |
| 27 | + showQuetions(0); //calling showQestions function |
| 28 | + queCounter(1); //passing 1 parameter to queCounter |
| 29 | + startTimer(15); //calling startTimer function |
| 30 | + startTimerLine(0); //calling startTimerLine function |
| 31 | +} |
| 32 | + |
| 33 | +let timeValue = 15; |
| 34 | +let que_count = 0; |
| 35 | +let que_numb = 1; |
| 36 | +let userScore = 0; |
| 37 | +let counter; |
| 38 | +let counterLine; |
| 39 | +let widthValue = 0; |
| 40 | + |
| 41 | +const restart_quiz = result_box.querySelector(".buttons .restart"); |
| 42 | +const quit_quiz = result_box.querySelector(".buttons .quit"); |
| 43 | + |
| 44 | +// if restartQuiz button clicked |
| 45 | +restart_quiz.onclick = ()=>{ |
| 46 | + quiz_box.classList.add("activeQuiz"); //show quiz box |
| 47 | + result_box.classList.remove("activeResult"); //hide result box |
| 48 | + timeValue = 15; |
| 49 | + que_count = 0; |
| 50 | + que_numb = 1; |
| 51 | + userScore = 0; |
| 52 | + widthValue = 0; |
| 53 | + showQuetions(que_count); //calling showQestions function |
| 54 | + queCounter(que_numb); //passing que_numb value to queCounter |
| 55 | + clearInterval(counter); //clear counter |
| 56 | + clearInterval(counterLine); //clear counterLine |
| 57 | + startTimer(timeValue); //calling startTimer function |
| 58 | + startTimerLine(widthValue); //calling startTimerLine function |
| 59 | + timeText.textContent = "Time Left"; //change the text of timeText to Time Left |
| 60 | + next_btn.classList.remove("show"); //hide the next button |
| 61 | +} |
| 62 | + |
| 63 | +// if quitQuiz button clicked |
| 64 | +quit_quiz.onclick = ()=>{ |
| 65 | + window.location.reload(); //reload the current window |
| 66 | +} |
| 67 | + |
| 68 | +const next_btn = document.querySelector("footer .next_btn"); |
| 69 | +const bottom_ques_counter = document.querySelector("footer .total_que"); |
| 70 | + |
| 71 | +// if Next Que button clicked |
| 72 | +next_btn.onclick = ()=>{ |
| 73 | + if(que_count < questions.length - 1){ //if question count is less than total question length |
| 74 | + que_count++; //increment the que_count value |
| 75 | + que_numb++; //increment the que_numb value |
| 76 | + showQuetions(que_count); //calling showQestions function |
| 77 | + queCounter(que_numb); //passing que_numb value to queCounter |
| 78 | + clearInterval(counter); //clear counter |
| 79 | + clearInterval(counterLine); //clear counterLine |
| 80 | + startTimer(timeValue); //calling startTimer function |
| 81 | + startTimerLine(widthValue); //calling startTimerLine function |
| 82 | + timeText.textContent = "Time Left"; //change the timeText to Time Left |
| 83 | + next_btn.classList.remove("show"); //hide the next button |
| 84 | + }else{ |
| 85 | + clearInterval(counter); //clear counter |
| 86 | + clearInterval(counterLine); //clear counterLine |
| 87 | + showResult(); //calling showResult function |
| 88 | + } |
| 89 | +} |
| 90 | + |
| 91 | +// getting questions and options from array |
| 92 | +function showQuetions(index){ |
| 93 | + const que_text = document.querySelector(".que_text"); |
| 94 | + |
| 95 | + //creating a new span and div tag for question and option and passing the value using array index |
| 96 | + let que_tag = '<span>'+ questions[index].numb + ". " + questions[index].question +'</span>'; |
| 97 | + let option_tag = '<div class="option"><span>'+ questions[index].options[0] +'</span></div>' |
| 98 | + + '<div class="option"><span>'+ questions[index].options[1] +'</span></div>' |
| 99 | + + '<div class="option"><span>'+ questions[index].options[2] +'</span></div>' |
| 100 | + + '<div class="option"><span>'+ questions[index].options[3] +'</span></div>'; |
| 101 | + que_text.innerHTML = que_tag; //adding new span tag inside que_tag |
| 102 | + option_list.innerHTML = option_tag; //adding new div tag inside option_tag |
| 103 | + |
| 104 | + const option = option_list.querySelectorAll(".option"); |
| 105 | + |
| 106 | + // set onclick attribute to all available options |
| 107 | + for(i=0; i < option.length; i++){ |
| 108 | + option[i].setAttribute("onclick", "optionSelected(this)"); |
| 109 | + } |
| 110 | +} |
| 111 | +// creating the new div tags which for icons |
| 112 | +let tickIconTag = '<div class="icon tick"><i class="fas fa-check"></i></div>'; |
| 113 | +let crossIconTag = '<div class="icon cross"><i class="fas fa-times"></i></div>'; |
| 114 | + |
| 115 | +//if user clicked on option |
| 116 | +function optionSelected(answer){ |
| 117 | + clearInterval(counter); //clear counter |
| 118 | + clearInterval(counterLine); //clear counterLine |
| 119 | + let userAns = answer.textContent; //getting user selected option |
| 120 | + let correcAns = questions[que_count].answer; //getting correct answer from array |
| 121 | + const allOptions = option_list.children.length; //getting all option items |
| 122 | + |
| 123 | + if(userAns == correcAns){ //if user selected option is equal to array's correct answer |
| 124 | + userScore += 1; //upgrading score value with 1 |
| 125 | + answer.classList.add("correct"); //adding green color to correct selected option |
| 126 | + answer.insertAdjacentHTML("beforeend", tickIconTag); //adding tick icon to correct selected option |
| 127 | + console.log("Correct Answer"); |
| 128 | + console.log("Your correct answers = " + userScore); |
| 129 | + }else{ |
| 130 | + answer.classList.add("incorrect"); //adding red color to correct selected option |
| 131 | + answer.insertAdjacentHTML("beforeend", crossIconTag); //adding cross icon to correct selected option |
| 132 | + console.log("Wrong Answer"); |
| 133 | + |
| 134 | + for(i=0; i < allOptions; i++){ |
| 135 | + if(option_list.children[i].textContent == correcAns){ //if there is an option which is matched to an array answer |
| 136 | + option_list.children[i].setAttribute("class", "option correct"); //adding green color to matched option |
| 137 | + option_list.children[i].insertAdjacentHTML("beforeend", tickIconTag); //adding tick icon to matched option |
| 138 | + console.log("Auto selected correct answer."); |
| 139 | + } |
| 140 | + } |
| 141 | + } |
| 142 | + for(i=0; i < allOptions; i++){ |
| 143 | + option_list.children[i].classList.add("disabled"); //once user select an option then disabled all options |
| 144 | + } |
| 145 | + next_btn.classList.add("show"); //show the next button if user selected any option |
| 146 | +} |
| 147 | + |
| 148 | +function showResult(){ |
| 149 | + info_box.classList.remove("activeInfo"); //hide info box |
| 150 | + quiz_box.classList.remove("activeQuiz"); //hide quiz box |
| 151 | + result_box.classList.add("activeResult"); //show result box |
| 152 | + const scoreText = result_box.querySelector(".score_text"); |
| 153 | + if (userScore > 3){ // if user scored more than 3 |
| 154 | + //creating a new span tag and passing the user score number and total question number |
| 155 | + let scoreTag = '<span>and congrats! , You got <p>'+ userScore +'</p> out of <p>'+ questions.length +'</p></span>'; |
| 156 | + scoreText.innerHTML = scoreTag; //adding new span tag inside score_Text |
| 157 | + } |
| 158 | + else if(userScore > 1){ // if user scored more than 1 |
| 159 | + let scoreTag = '<span>and nice , You got <p>'+ userScore +'</p> out of <p>'+ questions.length +'</p></span>'; |
| 160 | + scoreText.innerHTML = scoreTag; |
| 161 | + } |
| 162 | + else{ // if user scored less than 1 |
| 163 | + let scoreTag = '<span>and sorry , You got only <p>'+ userScore +'</p> out of <p>'+ questions.length +'</p></span>'; |
| 164 | + scoreText.innerHTML = scoreTag; |
| 165 | + } |
| 166 | +} |
| 167 | + |
| 168 | +function startTimer(time){ |
| 169 | + counter = setInterval(timer, 1000); |
| 170 | + function timer(){ |
| 171 | + timeCount.textContent = time; //changing the value of timeCount with time value |
| 172 | + time--; //decrement the time value |
| 173 | + if(time < 9){ //if timer is less than 9 |
| 174 | + let addZero = timeCount.textContent; |
| 175 | + timeCount.textContent = "0" + addZero; //add a 0 before time value |
| 176 | + } |
| 177 | + if(time < 0){ //if timer is less than 0 |
| 178 | + clearInterval(counter); //clear counter |
| 179 | + timeText.textContent = "Time Off"; //change the time text to time off |
| 180 | + const allOptions = option_list.children.length; //getting all option items |
| 181 | + let correcAns = questions[que_count].answer; //getting correct answer from array |
| 182 | + for(i=0; i < allOptions; i++){ |
| 183 | + if(option_list.children[i].textContent == correcAns){ //if there is an option which is matched to an array answer |
| 184 | + option_list.children[i].setAttribute("class", "option correct"); //adding green color to matched option |
| 185 | + option_list.children[i].insertAdjacentHTML("beforeend", tickIconTag); //adding tick icon to matched option |
| 186 | + console.log("Time Off: Auto selected correct answer."); |
| 187 | + } |
| 188 | + } |
| 189 | + for(i=0; i < allOptions; i++){ |
| 190 | + option_list.children[i].classList.add("disabled"); //once user select an option then disabled all options |
| 191 | + } |
| 192 | + next_btn.classList.add("show"); //show the next button if user selected any option |
| 193 | + } |
| 194 | + } |
| 195 | +} |
| 196 | + |
| 197 | +function startTimerLine(time){ |
| 198 | + counterLine = setInterval(timer, 29); |
| 199 | + function timer(){ |
| 200 | + time += 1; //upgrading time value with 1 |
| 201 | + time_line.style.width = time + "px"; //increasing width of time_line with px by time value |
| 202 | + if(time > 549){ //if time value is greater than 549 |
| 203 | + clearInterval(counterLine); //clear counterLine |
| 204 | + } |
| 205 | + } |
| 206 | +} |
| 207 | + |
| 208 | +function queCounter(index){ |
| 209 | + //creating a new span tag and passing the question number and total question |
| 210 | + let totalQueCounTag = '<span><p>'+ index +'</p> of <p>'+ questions.length +'</p> Questions</span>'; |
| 211 | + bottom_ques_counter.innerHTML = totalQueCounTag; //adding new span tag inside bottom_ques_counter |
| 212 | +} |
| 213 | + |
0 commit comments