Need help with this. I attached how it should lookDeclare the questionList variable, storing in it the node list created by the querySelectorAll() method using “div#quiz input” as the CSS selector.Add an onclickevent handler to the startQuiz object, running an anonymous function that sets the class attribute of the overlay object to “showquiz” and repeats the countdown() function every 1 second (every 1000 milliseconds), storing the id of the timed command in the global timeID variable you declared in Step 3.Create the countdown()function to update the quiz clock. Within the function create an if else statement that tests whether the value of the timeLeft variable is equal to 0. If it is equal to 0, do the following: 0. Use the clearInterval()method to cancel the timed command with the variable timeID.Declare a variable named totalCorrect and set it equal to the value returned by the checkAnswers()If totalCorrect is equal to the length of the correctAnswers array then display an alert window congratulating the student on getting 100%, otherwise do the following:Display an alert window indicating the number of incorrect answers out of the total number of questions on the quiz,change the value of the timeLeft variable to quizTime,set quizClock.value to the value of the timeLeft variable, andchange the class attribute of the overlay object to “hidequiz”.Otherwise, if the timeLeft variable is not equal 0, then:Decrease the value of timeLeft by 1.Set quickClock.value to the value of the timeLeft variable.Run the quiz within the allotted time. Verify that the clock counts down the time remaining every second. At the end of the time limit, confirm that the quiz catches your mistakes and reports the number of correct answers out of the total number of questions. Verify that when you get all the answers correct, a congratulatory message is given.Increase the value of the timeLimitvariable to 90 and close the file, saving your changes ### Hands-on Project 5-1#### Algebra I Practice QuizClick the **Start Quiz** button below to start the quiz and begin the countdown. Upon completion, incorrect answers will be marked in red. Retake the quiz as many times as you wish.#### Quiz Questions1. \( 5 + 2x = 25 \) - \( x = \boxed{10} \)2. \( 30 - 5x = 10 \) - \( x = \boxed{4} \)3. \( 6 + 3x = -12 \) - \( x = \boxed{-6} \)4. \( 44 - 12x = -16 \) - \( x = \boxed{-5} \) (Incorrect answer marked in red)5. \( 48 + 6x = 6 \) - \( x = \boxed{-7} \) ### Countdown Timer- The timer appears on the screen, beginning with the value "18."#### Button:- **Start Quiz** [Button]### Explanation of Elements:- **Start Quiz Button**: Clicking this will initiate the quiz and start the countdown.- **Countdown Timer**: This box will display the remaining time for the quiz. Initially set to "18."- **Quiz Questions and Answers**: The quiz consists of five algebraic equations. Following each question is a box where the correct answer is indicated. An incorrect answer is highlighted in red (as seen in question 4).

I have done the code using Javascript, HTML and CSS. I have provided the files main.js, main.html…

Answered: Need help with this. I attached how it…

7th Edition

ISBN:9780133594140

Author:James Kurose, Keith Ross

Publisher:James Kurose, Keith Ross

Chapter1: Computer Networks And The Internet

Section: Chapter Questions

Problem R1RQ: What is the difference between a host and an end system? List several different types of end...

Related questions

Question

100%

Need help with this. I attached how it should look

Declare the questionList variable, storing in it the node list created by the querySelectorAll() method using “div#quiz input” as the CSS selector.
Add an onclickevent handler to the startQuiz object, running an anonymous function that sets the class attribute of the overlay object to “showquiz” and repeats the countdown() function every 1 second (every 1000 milliseconds), storing the id of the timed command in the global timeID variable you declared in Step 3.
Create the countdown()function to update the quiz clock. Within the function create an if else statement that tests whether the value of the timeLeft variable is equal to 0. If it is equal to 0, do the following: 0. Use the clearInterval()method to cancel the timed command with the variable timeID.
1. Declare a variable named totalCorrect and set it equal to the value returned by the checkAnswers()
2. If totalCorrect is equal to the length of the correctAnswers array then display an alert window congratulating the student on getting 100%, otherwise do the following:
  - Display an alert window indicating the number of incorrect answers out of the total number of questions on the quiz,

1. 1. 1. change the value of the timeLeft variable to quizTime,
    2. set quizClock.value to the value of the timeLeft variable, and
    3. change the class attribute of the overlay object to “hidequiz”.

Otherwise, if the timeLeft variable is not equal 0, then:
1. Decrease the value of timeLeft by 1.
2. Set quickClock.value to the value of the timeLeft variable.
Run the quiz within the allotted time. Verify that the clock counts down the time remaining every second. At the end of the time limit, confirm that the quiz catches your mistakes and reports the number of correct answers out of the total number of questions. Verify that when you get all the answers correct, a congratulatory message is given.
Increase the value of the timeLimitvariable to 90 and close the file, saving your changes