Javascript, HTML, CSS Code
Copy
<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>