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.
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.
<!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:
- 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.
body { margin : 0 ;
padding : 0 ;
font-family : sans-serif ;
} .container { width : 100% ;
height : 100 vh;
display : flex;
justify- content : center ;
align-items: center ;
text-align : center ;
flex- direction : column;
} h 1 {
font-size : 25px ;
font-weight : 700 ;
margin-bottom : 20px ;
color : green ;
} h 3
{ 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.
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: