In this article, we will see how to make a flashcard by using HTML, CSS & JavaScript. Here we will build an interactive Introducing Math Flashcards web application, that will help in enhancing mathematical skills like addition, subtraction, multiplication, and division in a playful manner.
Approach
- Create an HTML structure with elements such as cards for different math operations, a dialog box for displaying flashcards, buttons, and input fields for user answers.
- Style the app using CSS to make the app visually appealing.
- Attach the event listeners to the buttons corresponding to addition, subtraction, multiplication, and division. When a user clicks a button, the appropriate math operation is selected, and the dialog box is displayed.
- Then, we check if the user’s answer is correct or not, and based on that we show “correct” or “incorrect” text.
Example: In this example, we will see the implementation of a math flashcard using HTML, CSS, and Javascript.
Javascript
const addCard = document.getElementById( "add" );
const subCard = document.getElementById( "subtract" );
const multiplyCard = document.getElementById( "multiply" );
const divideCard = document.getElementById( "divide" );
const dialog = document.querySelector( "dialog" );
const operator = document.getElementById( "operator" );
let selectedCard = "" ;
let flashcardCounter = 0; function identifyCard() {
generateFlashcard();
} addCard.addEventListener( "click" , function () {
dialog.classList.add( "open" )
selectedCard = "add"
operator.innerHTML = "+"
dialog.showModal()
dialog.style.display = "flex"
identifyCard()
}) subCard.addEventListener( "click" , function () {
dialog.classList.add( "open" )
selectedCard = "subtract"
operator.innerHTML = "-"
identifyCard()
dialog.showModal()
dialog.style.display = "flex"
}) multiplyCard.addEventListener( "click" , function () {
dialog.classList.add( "open" )
selectedCard = "multiply"
operator.innerHTML = "*"
dialog.showModal()
identifyCard()
dialog.style.display = "flex"
}) divideCard.addEventListener( "click" , function () {
dialog.classList.add( "open" )
dialog.showModal()
selectedCard = "divide"
operator.innerHTML = "/"
identifyCard()
dialog.style.display = "flex"
}) function generateFlashcard() {
const num1 = Math.floor(Math.random() * 10) + 1;
const num2 = Math.floor(Math.random() * 10) + 1;
document.getElementById( 'num1' ).textContent = num1;
document.getElementById( 'num2' ).textContent = num2;
} function getCorrectAnswer(num1, num2) {
if (selectedCard == "add" ) {
return num1 + num2;
}
else if (selectedCard == "subtract" ) {
return num1 - num2;
}
else if (selectedCard == "multiply" ) {
return num1 * num2;
}
else {
var result = 0;
result = (num1 / num2).toFixed(1);
return parseFloat(result)
}
} function checkAnswer() {
const num1 = parseInt(
document.getElementById( 'num1' ).textContent);
const num2 = parseInt(
document.getElementById( 'num2' ).textContent);
const userAnswer = parseFloat(
document.getElementById( 'answer' ).value);
const correctAnswer = getCorrectAnswer(num1, num2);
const resultDiv = document.getElementById( 'result' );
if (userAnswer === correctAnswer) {
resultDiv.textContent = 'Correct! Well done!' ;
resultDiv.style.color = 'green' ;
} else {
resultDiv.textContent = 'Incorrect answer!' ;
resultDiv.style.color = 'red' ;
}
setTimeout(() => {
generateFlashcard();
resultDiv.textContent = '' ;
document.getElementById( 'answer' ).value = '' ;
}, 1000);
} function closeDialog() {
dialog.close();
dialog.style.display = "none" ;
} |
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< link rel = "stylesheet" href = "style.css" >
< title >Math Flashcards Design</ title >
</ head >
< body >
< div class = "flashcard-container" >
< h2 >
What you want to practice today?
</ h2 >
< div class = "flashcard-types" >
< div class = "flashcard-box" id = "add" >
< h3 >Addition</ h3 >
</ div >
< div class = "flashcard-box" id = "subtract" >
< h3 >Subtraction</ h3 >
</ div >
< div class = "flashcard-box" id = "multiply" >
< h3 >Multiplication</ h3 >
</ div >
< div class = "flashcard-box" id = "divide" >
< h3 >Division</ h3 >
</ div >
</ div >
< dialog >
< div class = "flashcard" id = "flashcard" >
What is < span id = "num1" ></ span >
< span id = "operator" ></ span >
< span id = "num2" ></ span >?
</ div >
< input type = "text" id = "answer"
placeholder = "Your Answer" >
< div class = "action-buttons" >
< button onclick = "checkAnswer()" >
Submit
</ button >
< button onclick = "closeDialog()" >
Close
</ button >
</ div >
< div id = "result" ></ div >
</ dialog >
</ div >
< script src = "script.js" ></ script >
</ body >
</ html >
|
CSS
body { display : flex;
justify- content : center ;
align-items: center ;
min-height : 100 vh;
margin : 0 ;
background-color : #ccc ;
font-family : Arial , sans-serif ;
} .flashcard-container { text-align : center ;
background-color : green ;
border-radius: 20px ;
max-width : 80% ;
padding : 20px ;
box-shadow: 0px 0px 10px rgba( 0 , 0 , 0 , 0.1 );
} .flashcard-box { width : 100% ;
height : 55px ;
background-color : #f0f0f0 ;
border-radius: 10px ;
margin-bottom : 20px ;
transition: all 0.3 s;
display : flex;
align-items: center ;
justify- content : center ;
cursor : pointer ;
} .flashcard-box:hover { width : 100% ;
height : 120px ;
} .flashcard-box:hover h 3 {
color : #ffffff ;
} h 2 {
color : #000 ;
} h 3 {
margin : 0 ;
font-size : 1.5em ;
} dialog { display : none ;
max-width : 90% ;
} .open { display : flex;
flex- direction : column;
align-self: center ;
border-radius: 20px ;
} .action-buttons { display : flex;
justify- content : center ;
gap: 10px ;
margin-top : 20px ;
} button { background-color : #007b5e ;
color : #ffffff ;
height : 40px ;
font-size : 16px ;
border : none ;
border-radius: 5px ;
cursor : pointer ;
} .flashcard-types { display : flex;
flex-wrap: wrap;
justify- content : center ;
gap: 20px ;
margin-top : 20px ;
} .flashcard { font-size : 2em ;
margin-bottom : 20px ;
background-color : #ffffff ;
padding : 10px ;
border : 1px solid #ccc ;
border-radius: 5px ;
} #answer { font-size : 1.2em ;
padding : 8px ;
margin-bottom : 10px ;
} #result { margin-top : 20px ;
font-size : 1.2em ;
} |
Output: