5. Math Quiz Make a math quiz showing 3 sections on screen. One with a countdown...

5. Math Quiz

Make a math quiz showing 3 sections on screen. One with a countdown timer, one with a random multiplication question, and one with a total score. Answers will be submitted on an answer button press. Tally will be updated every submission. Failure to answer within the countdown timer will advance to the next question.

Do not use obtrusive javascript code

use html and javaspcript but do use unobtrusive javascript

Expert Solution

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./style.css">    
    <title>Math Quiz</title>
</head>
<body>
    <section id="head-section">
        <div
id="timer-container"><label>Timer: </label><div id="timer">30</div></div>
        <h2>MATH QUIZ</h2>
        <div
id="score-container"><label>Score: </label><div id="score">0</div></div>
    </section>
    <section id="question-section">
        <div
id="question-container">

            <div
id="question">36 x 15 = </div>

            <input
type="number" name="answer" id="answer"><br>
        </div>
        <input type="button" name="submit" id="submit" value="Submit">
    </section>
    <script src="./script.js"></script>
</body>
</html>

CSS CODE (style.css):

body{
    margin: 0;
    font-family: "sans-serif", Arial;
}
#head-section{
    height: 10vh;
    display: flex;
    justify-content: space-between;
    background: #D63031;
    justify-items: center;
    align-items: center;
    font-size: 20px;
    color: white;
}
#timer-container,
#score-container{
    margin: 0 10px;
    display: flex;
}
#question-section{
    height: 90vh;
    background: #DAE0E2;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-around;
    align-items: center;
}
#question-container{
    display: flex;
    justify-content: center;
}
#question{
    padding: 0;
    margin: 0;
    font-size: 72px;
    font-weight: bold;
}
#answer{
    margin: 0 20px;
    height: 80px;
    font-size: 72px;
    width: 300px;
    text-align: center;
    font-weight: bold;
}
#submit{
    padding: 20px 30px;
    font-size: 36px;
    background: #019031;
    color: white;
    cursor: pointer;
    border: none;
}

JAVASCRIPT CODE (script.js):

var score = 0;
var question =
1;
var timeLeft =
30; // In seconds
var op1 = 0;
var op2 = 0;
var intervalID =
0;
var timeoutID =
0;
document.getElementById("submit").addEventListener("click", checkAnswer);
function
nextQuestion(){
    clearInterval(intervalID);
    clearTimeout(timeoutID);
    timeLeft = 30; // In
seconds
    // If
number of questions is not more than 10
    if(question <= 10){
        // Get random operands for quiz
        op1 =
Math.ceil(Math.random()*100);
        op2 =
Math.ceil(Math.random()*100);

        document.getElementById("question").innerHTML
= question.toString() + ") " +
op1.toString() + " x " +
op2.toString() + " = ";

        document.getElementById("answer").value
= "";
        // Start timer
        intervalID =
setInterval(function(){

            document.getElementById("timer").innerHTML
= timeLeft;

            --timeLeft;
        },
1000);
        // Ask next question when user runs out of
time
        timeoutID =
setTimeout(nextQuestion, 31*1000);

        question++;
    }
    else{

        alert("Quiz over! Your final score is " +
document.getElementById("score").innerText);
        // Reset all values
        question =
1;
        score =
0;

        document.getElementById("submit").disabled
= true;

        document.getElementById("submit").style.background
= "lightgray";
    }
}
// Check if answer provided by
the user is correct or not
function
checkAnswer(){
    var response =
parseInt(document.getElementById("answer").value);
    // If
answer is correct
    if(op1*op2 == response){
        score++;

        document.getElementById("score").innerHTML
= score.toString();
    }
    // Ask
next question
    nextQuestion();
}
// Ask next question when the
page loads completely
window.onload = nextQuestion;

SAMPLE OUTPUTS:

FOR ANY HELP JUST DROP A COMMENT

venereology answered 10 months ago

I got a 3/5 on a quiz about the membrane or membranes and transport, but they...

I got a 3/5 on a quiz about the membrane or membranes and transport, but they never told me which one's i had wrong and why? Help me out please? these were the questions and my answers and my knowledge on why i answered the way i did. What molecule gets attached to the sodium-potassium pump that leads to a conformational change? a. GTP b. Phospholipid c. ATP - I said ATP because I know that the pump requires ATP...

1. Test the execution time of the program in Code 3. Make a screen capture which...

1. Test the execution time of the program in Code 3. Make a screen capture which shows the execution time that has the unit of machine time unit. Code3 SOURCE.CPP # include<fstream> # include "List.h" # include <iostream> using namespace std; int main() { List temps; int oneTemp; ifstream inData; ofstream outData; inData.open("temp.dat"); if (!inData) { outData<<"Can't open file temp.dat" << endl; return 1; } inData >> oneTemp; while (inData && !temps.IsFull()) { if (!temps.IsPresent(oneTemp)) temps.Insert(oneTemp); inData >> oneTemp; }...

3.) List at least 5 solvency ratios, 5 liquidity ratios, and 5 profitability ratios, showing the...

3.) List at least 5 solvency ratios, 5 liquidity ratios, and 5 profitability ratios, showing the formula for each and a brief explanation of why they are useful.

1. For the function ?(?)=−3(?−1)^2+5, choose a domain restriction to make ?(?) a one-to-one function, and...

1. For the function ?(?)=−3(?−1)^2+5, choose a domain restriction to make ?(?) a one-to-one function, and then find the inverseof ?(?). 2. For the following function, find the horizontal and vertical asymptote(s):?(?)=3?^2+3?−18 /?^2+5?+6 3. Find the inverse function for ?(?)=4? / 5−3? 4.Find all zeroes (including complex ones) for the following function without using a graph:?(?)=?^4+5?^3+4?^2−7?−3

In Faroe island, a sports training camp provides 3 different sections: one in Squash, one in...

In Faroe island, a sports training camp provides 3 different sections: one in Squash, one in Football, and one in Basketball. These sections are open to any of the 100 people in the camp. There are 28 students in the Squash section, 26 in the Football section, and 16 in the Basketball section. There are 12 students that are in both Squash and Football, 4 that are in both Squash and Basketball, and 6 are in both Football and Basketball....

This is Discrete Math Write a small paragraph about Russell-Zermelo? (3 to 5) lines What is...

This is Discrete Math Write a small paragraph about Russell-Zermelo? (3 to 5) lines What is Russell-Zermelo paradox? and what is it used for? (least 3 lines) What is the proof of Russell-Zermelo paradox? Give at least two examples of Russell-Zermelo paradox from life.

hours studied X^2 score on quiz Y^2 XY 1 1 3 9 3 2 4 5...

hours studied X^2 score on quiz Y^2 XY 1 1 3 9 3 2 4 5 25 10 3 9 7 49 21 5 25 9 81 45 sigmaX=11 sigmaX^2=39 sigmaY=24 sigmaY^2=164 sigmaXY=79 part a: 1.what is the predictor variable? 2. what is the criterion variable? compute the Pearson correlation. 3. what is the covariance. 4 what is the standard deviation of the predictor variable. 5 what is the standard deviation of the criterion variable. 6 what is the...

5) CHART - Create a 3-D pie chart showing the breakdown of total Hours Worked into...

5) CHART - Create a 3-D pie chart showing the breakdown of total Hours Worked into total Overtime Hours and the NonOvertime hours located at the bottom of the database listing, row 37 columns E, F, G. The pie chart should show the values, the legend should indicate Overtime Hours and NonOvertime, and the chart title should be Total Daily Hours. Place this chart so that it will fill cells K1:R16. (Hint: When selecting the data for this chart remember...

Do the Math 5-3 Reconciling a Checking Account Andrew Parker, of San Marcos, Texas, has a...

Do the Math 5-3 Reconciling a Checking Account Andrew Parker, of San Marcos, Texas, has a checking account at the credit union affiliated with his university. Illustrated below are his monthly statement and check register for the account. Account Name Andrew Parker Period of Activity 11/2/18- 12/01/18 Account # 123-45678 Summary of Your Activity This Month Date Activity Amount Balance 11/02 $ 405.56 11/04 Debit Card POS Transaction $ 17.53 388.03 11/09 Check #237 33.03 355.00 11/12 Direct Deposit 860.00...

The Tele-Vision Corporation produces high end LCD flat screen HD-TVs. They make 3 different models. Under...

The Tele-Vision Corporation produces high end LCD flat screen HD-TVs. They make 3 different models. Under their old cost system, Tele-Vision allocated overhead costs based on direct labor dollars. Recently, the firm adopted an ABC cost system. The move to ABC was due to a price war in the market for 30” LCD in order to attract buyers for the World Cup. The market price for a comparable 30” LCD TV was $400. The 30” LCD unit of Tele-Vision could...

Question