Design a Student Grade Calculator using JavaScript

Multiplication Quiz Webapp using HTML CSS and JavaScript

Last Updated : 26 Jul, 2024

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

Form and input tags in HTML.
Display Flex in CSS.
Basic DOM concept and local Storage in JavaScript.

Approach

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.

CSS File:

Remove default margin and padding from the body.
Set display flex in the container and align all the items in the center by flex properties.
The rest of the elements are designed according to the developer’s needs.

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.

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

/* styles.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

// 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:

Design a Student Grade Calculator using JavaScript

GeeksforGeeks

Improve

Article Tags :

Similar Reads