Multiplication Quiz Webapp using HTML CSS and JavaScript
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.
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 >w3wiki</ 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.
style.css
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.
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: