Open In App

Multiplication Quiz Webapp using HTML CSS and JavaScript

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to create a multiplication quiz web app using HTML, CSS, and JavaScript.

Description of Web App: In this web app, random questions come one by one based on basic multiplication. If you give a correct answer, then it will increment by +1, and if you give the wrong answer, then it will decrement by -1.

File Structure: There are three files index.html (HTML file), design all the elements of a webpage using style.css (CSS File) and give all logical functionality by script.js (JavaScript file).

  • index.html
  • style.css
  • script.js

 

Prerequisite:

HTML file:

  • Create one container class in which all the elements are present.
  • Inside the container create a form and remove the action attribute.
  • The form provides questions and score headings with one input field for user answers and a “Submit” button.

index.html




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiplication Quiz WebApp</title>
  
    <link rel="stylesheet" href="style.css">
  
</head>
  
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <h3><b> Multiplication Quiz App </b></h3>
        <form id="form">
            <p id="score">score : 0</p>
            <h1 id="question">What is X Multiply of X?</h1>
            <input type="number" id="inp" placeholder="Enter Your Answer" 
                   autofocus autocomplete="off">
            <button id="btn" type="submit">Submit</button>
        </form>
    </div>
  
    <script src="script.js"></script>
</body>
</html>


CSS File:

style.css




body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
  
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}
  
h1{
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 20px;
    color: green;
}
  
h3
{
    font-size: 20px;
    font-weight: 700;
    margin: -10px 0 20px;
#form {
    padding: 10px 20px;
    margin: 10px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
  
#score {
    font-size: 18px;
    text-align: right;
    font-weight: 700;
    color: green;
}
  
#question {
    color: green;
    font-weight: 700;
    font-size: 25px;
}
  
#inp {
    color: green;
    border: 3px solid green;
    border-radius: 5px;
    padding: 15px 0;
    margin: 10px 0px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    outline: none;
}
  
#inp::placeholder {
    color: green;
}
  
#btn {
    background-color: green;
    outline: none;
    border: none;
    border-radius: 5px;
    padding: 15px 0;
    margin: 10px 0px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: white;
    letter-spacing: 1px;
}


JavaScript file:

  • Create two variables to store the random number using a math object. In question, add these two numbers by JavaScript innerText property. Also, store the answer of these 2 random numbers in one variable.
  • If the user clicks on the “Submit” button, it compares the user’s answer and the correct answer. If both are equal, then increment score by +1 other wise decrement score by -1.
  • Add score in local storage by using the localstorage.getItem() method.

script.js




const questionElement = document.getElementById("question");
  
let num1 = Math.floor(Math.random() * 10);
let num2 = Math.floor(Math.random() * 10);
let correctAnswer = num1 * num2;
  
questionElement.innerText = `What is ${num1} Multiply by ${num2}?`;
  
const form = document.getElementById('form');
const input = document.getElementById('inp');
let scoreElement = document.getElementById('score');
  
let score = Number(localStorage.getItem("score"));
if(!score) {
    score = 0;
}
  
scoreElement.textContent = `score : ${score}`;
  
form.addEventListener('submit',function() {
    let userAnswer = +input.value;
    if(correctAnswer === userAnswer) {
        score++;
        updateScore();
    }
    else {
        score--;
        updateScore();
    }
});
  
function updateScore() {
    localStorage.setItem("score",String(score));
}
  
// Clear Local Storage 
// localStorage.removeItem("score");


Output:

Multiplication Quiz WebApp



Last Updated : 19 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads