Javascript, HTML, CSS Code
<html> <head> <script type="text/javascript"> window.addEventListener('error', function(event) { var message = JSON.parse(JSON.stringify(event.message)); var source = event.filename; var lineno = event.lineno; var colno = event.colno; var error = event.error; window.parent.postMessage({ type: 'iframeError', details: { message: message, source: source, lineno: lineno, colno: colno, error: error ? error.stack : '' } }, '*'); }); window.addEventListener('unhandledrejection', function(event) { window.parent.postMessage({ type: 'iframePromiseRejection', details: { reason: event.reason } }, '*'); }); </script> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Math Game for 4 Year Olds</title> <meta name="description" content="A fun math game for 4 year olds to learn addition and subtraction."> <meta name="keywords" content="math, game, addition, subtraction, 4 year old, learning"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script type="text/javascript"> var localStoragePrefix = "ct-168125721471934"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script> <script type="text/javascript"> let equation, answers, correctAnswer, tractor; let isCorrect = false; function randomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function generateEquation() { let a = randomInt(0, 15); let b = randomInt(0, 15); let op; if (a + b <= 15) { op = "+"; correctAnswer = a + b; } else { op = "-"; correctAnswer = a - b; } equation.html(`${a} ${op} ${b}`); } function generateAnswers() { let wrong1 = randomInt(0, 15); let wrong2 = randomInt(0, 15); while (wrong1 === correctAnswer || wrong2 === correctAnswer || wrong1 === wrong2) { wrong1 = randomInt(0, 15); wrong2 = randomInt(0, 15); } let answerArr = [correctAnswer, wrong1, wrong2].sort(() => Math.random() - 0.5); for (let i = 0; i < 3; i++) { answers[i].html(answerArr[i]); } } function resetGame() { isCorrect = false; tractor.css({ left: 0, top: "400px" }); for (let i = 0; i < 3; i++) { answers[i].html(""); } generateEquation(); generateAnswers(); } function checkCollision(answer, index) { let tractorPos = tractor.position(); let answerPos = answer.position(); if (tractorPos.left >= answerPos.left - 50 && tractorPos.left <= answerPos.left + 50 && tractorPos.top >= answerPos.top - 50 && tractorPos.top <= answerPos.top + 50) { if (parseInt(answer.html()) === correctAnswer && !isCorrect) { isCorrect = true; answer.html("⭐"); new Audio("https://ssl.gstatic.com/dictionary/static/sounds/20200429/you_did_it_lucia_way_to_go--_us_1_rr.mp3").play(); setTimeout(resetGame, 3000); } else if (!isCorrect) { answer.html("❌"); } } } $(document).ready(function() { equation = $("#equation"); answers = [$("#answer1"), $("#answer2"), $("#answer3")]; tractor = $("#tractor"); resetGame(); $(document).keydown(function(e) { let tractorPos = tractor.position(); switch (e.which) { case 37: // left tractor.css({ left: tractorPos.left - 10 }); break; case 38: // up tractor.css({ top: tractorPos.top - 10 }); break; case 39: // right tractor.css({ left: tractorPos.left + 10 }); break; case 40: // down tractor.css({ top: tractorPos.top + 10 }); break; } for (let i = 0; i < 3; i++) { checkCollision(answers[i], i); } }); }); </script> <style> body { font-family: 'Comic Sans MS', sans-serif; background-color: #a1eaf4; } #equation { font-size: 48px; text-align: center; margin-top: 50px; } .answer { font-size: 48px; text-align: center; margin-top: 50px; display: inline-block; width: 200px; } #tractor { font-size: 48px; position: absolute; left: 0; top: 400px; } </style> <link rel="canonical" href="https://calculator.tools/prompt/279/"> <meta charset="utf-8"> </head> <body> <div id="main-container" class="container"> <div id="equation"></div> <div id="answer1" class="answer"></div> <div id="answer2" class="answer"></div> <div id="answer3" class="answer"></div> <div id="tractor">🚜</div> </div> <script type="text/javascript"> var localStoragePrefix = "ct-{{ cachebreaker }}"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script> <script type="text/javascript"> window.addEventListener('load', function() { var observer = new MutationObserver(function() { window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); observer.observe(document.body, {attributes: true, childList: true, subtree: true}); window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); </script> </body> </html>
Math Game for 4 Year Olds
Calculator Tools