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

Solutions

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 2 hours ago

Next > < Previous

Related Solutions

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...

Draw a correctly labeled graph showing a long-run average cost curve. Label the sections showing economies of...

Draw a correctly labeled graph showing a long-run average cost curve. Label the sections showing economies of scale, diseconomies of scale and constant returns to scale. Explain economies of scale, constant returns to scale, and diseconomies of scale. Multiple Choice In the long run: All inputs can be varied. No inputs can be varied. Only variable inputs can be varied. Only fixed inputs can be varied. A limited number of inputs can be varied. Sunk costs: Are costs that can be recovered...

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....

A quiz is created by choosing for each question on the quiz one possible version at...

A quiz is created by choosing for each question on the quiz one possible version at random from a bank of possible versions of the question. There are 20 versions in the bank for each question. A speciﬁc question on the quiz involves a one-sample test for the population mean with hypotheses H0 : µ = 15 Ha : µ > 15 with all versions of the question involving a sample of size n = 35. Seven versions of the...

Need a program in java that creates a random addition math quiz The program should ask...

Need a program in java that creates a random addition math quiz The program should ask the user to enter the following The smallest and largest positive numbers to be used when generating the questions - The total number of questions to be generated per quiz - The total number of the quiz's to create from then the program should generate a random math (Just addition) quiz from what the user entered

Last semester, the students in my Finite Math class had an average quiz score of 83...

Last semester, the students in my Finite Math class had an average quiz score of 83 with a standard deviation of 2. Assume that the scores are approximated by a normal distribution. a) What percent of students scored higher than an 86 on the quiz? b) What percent of students scored less than a 79 on the quiz? c) What percent of students scored between a 79 and an 86? d) What happens when you try to find the percent...

Question: 1. Neatly, draw two cross sections showing differences in the arrangements of the vascular tissue......

Question: 1. Neatly, draw two cross sections showing differences in the arrangements of the vascular tissue... 1. Neatly, draw two cross sections showing differences in the arrangements of the vascular tissue found in a dicot herbaceous stem and a six year old dicot woody stem. Identify the following tissues if they are present: ground tissue (soft support), vascular tissue (both primary and secondary conducting tissues), wood, bark, seasonal growth rings, pith rays. (be complete) 2. Color code and explain the...

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.

Subjects