Math Game for Lucia

A fun math game for a 4-year-old child to learn addition and subtraction

Info

Created On: April 11, 2023

Created By: @CalculatorTools

AI

Model: gpt-4-0314

Time: 166 seconds

Prompt Tokens: 1048

Completion Tokens: 1295

Total Token Cost: 2343

Get This App On Your Website

<iframe src="https://calculators.tools/prompt//iframe/" width="100%" height="100%" frameborder="0" scrolling="yes" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" allow="midi; geolocation; microphone; camera; display-capture; encrypted-media; clipboard-read; clipboard-write; notifications; payment-handler; persistent-storage; background-sync; ambient-light-sensor; accessibility-events;" sandbox="allow-modals allow-forms allow-scripts allow-same-origin allow-popups allow-downloads allow-presentation allow-pointer-lock allow-orientation-lock" allowfullscreen="true" allowpaymentrequest="true" frameborder="0"></iframe><br><a href="https://calculator.tools/prompt/278/" target="_blank" style="font-size: 12px; text-decoration: none;" alt="Create any app, calculator, tools, tracker, or game instantly using AI! - Calculator Tools" title="Create any app, calculator, tools, tracker, or game instantly using AI! - Calculator Tools">Powered by Calculator Tools</a>

1. Copy the code above with the iframe and link.
2. Paste the code into your website.
3. Resize the iframe to fit your website.

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 Lucia</title>

        <meta name="description" content="A fun math game for a 4-year-old child to learn addition and subtraction">

        <meta name="keywords" content="math game, addition, subtraction, 4-year-old">



        <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-168125689591043";

            var lastSave = 0;

            // save to localstorage

            function saveLocal(data) {

                if (Date.now() - lastSave < 1000) {

                    return;

                }

                // save to cookie

                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();

            }



            // load from localstorage

            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">

            // App Javascript Goes Here

            $(document).ready(function() {

                generateNewEquation();

                tractorMovement();

            });



            function generateNewEquation() {

                let num1 = Math.floor(Math.random() * 16);

                let num2 = Math.floor(Math.random() * 16);

                let isAddition = Math.random() < 0.5;



                if (!isAddition && num1 < num2) {

                    [num1, num2] = [num2, num1];

                }



                $('#equation').html(num1 + (isAddition ? ' + ' : ' - ') + num2);



                let correctAnswer = isAddition ? num1 + num2 : num1 - num2;

                let wrongAnswer1 = correctAnswer + Math.floor(Math.random() * 5) + 1;

                let wrongAnswer2 = correctAnswer - Math.floor(Math.random() * 5) - 1;



                let answerOrder = [correctAnswer, wrongAnswer1, wrongAnswer2].sort(() => Math.random() - 0.5);

                $('.answer').each(function(index) {

                    $(this).html(answerOrder[index]);

                    $(this).data('correct', answerOrder[index] === correctAnswer);

                });

            }



            function tractorMovement() {

                let tractor = $('#tractor');

                $(document).keydown(function(e) {

                    let newPosition = tractor.position();

                    switch (e.which) {

                        case 37: // left

                            newPosition.left -= 10;

                            break;

                        case 38: // up

                            newPosition.top -= 10;

                            break;

                        case 39: // right

                            newPosition.left += 10;

                            break;

                        case 40: // down

                            newPosition.top += 10;

                            break;

                        default:

                            return;

                    }

                    tractor.css(newPosition);

                    checkForCollision();

                });

            }



            function checkForCollision() {

                const tractor = $('#tractor');

                $('.answer').each(function() {

                    if (isOverlap(tractor[0], this)) {

                        if ($(this).data('correct')) {

                            $(this).html('⭐');

                            tractor.css('top', '230px');

                            tractor.css('left', '0px');

                            setTimeout(generateNewEquation, 3000);

                            alert("You did it Lucia. Way to go!");

                        } else {

                            $(this).html('❌');

                        }

                    }

                });

            }



            function isOverlap(elem1, elem2) {

                const rect1 = elem1.getBoundingClientRect();

                const rect2 = elem2.getBoundingClientRect();

                return !(rect1.right < rect2.left || rect1.left > rect2.right ||

                         rect1.bottom < rect2.top || rect1.top > rect2.bottom);

            }

        </script>

        

        <style>

            /* App CSS Goes Here */

            #equation {

                font-size: 48px;

                margin-bottom: 30px;

            }

            .answer {

                display: inline-block;

                font-size: 48px;

                width: 100px;

                margin-right: 200px;

            }

            #tractor {

                position: absolute;

                top: 230px;

                left: 0;

                font-size: 48px;

            }

        </style>

    

	<link rel="canonical" href="https://calculator.tools/prompt/278/">

	<meta charset="utf-8">

</head>

    <body>

        <div id="main-container" class="container">

            <!-- App HTML Goes Here -->

            <div id="equation"></div>

            <div class="answer"></div>

            <div class="answer"></div>

            <div 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 Lucia

Info

Tags

AI

Get This App On Your Website

Javascript, HTML, CSS Code

IMAGE TO APP (New!)

SCREENSHOT TO APP (New!)

FAQ

What is Calculator Tools?

What Do You Mean Make An App?

Does This Use ChatGPT?

Calculator Tools

Want Better Apps?