كود HTML5 : لعبة لتعلم الحساب الذهني

الصفحة الرئيسية
لعبة شيقة ومثيرة تلعب على ذكاء اللاعب و سرعته حيث يجب عليه تحديد النتيجة قبل نفاذ الوقت  .سهلة الإستعمال و تساعد على تعلم الحساب الذهني


 

لعبة ألغاز الحساب

<div id="gameContainer" style="text-align: center;">
    <div class="question" id="question" style="text-align: center;"><span style="font-size: large;">الرجاء إدخال الإجابة</span></div>
    
    <div style="text-align: center;"><input id="answer" placeholder="إجابتك" type="number" /></div><div style="text-align: center;"><br /></div>
    
    <span style="font-size: large;"><button id="submitButton" onclick="checkAnswer()">تحقق من الإجابة</button>
    
    </span><div id="result"></div>

    <div class="hint">
        <p id="hint" style="text-align: center;"><span style="font-size: large;">تلميح: هذه عملية جمع أو طرح بسيطة.</span></p>
    </div>
</div>

<script>
    let correctAnswer;
    let questionElement = document.getElementById("question");
    let resultElement = document.getElementById("result");
    let hintElement = document.getElementById("hint");

    // توليد سؤال عشوائي
    function generateQuestion() {
        let num1 = Math.floor(Math.random() * 20) + 1; // عدد بين 1 و 10
        let num2 = Math.floor(Math.random() * 20) + 1; // عدد بين 1 و 10
        let operation = Math.random() < 0.5 ? '+' : '-'; // اختيار عملية جمع أو طرح عشوائية

        // إعداد السؤال والإجابة الصحيحة
        if (operation === '+') {
            correctAnswer = num1 + num2;
            questionElement.innerHTML = `ما هو ناتج ${num1} + ${num2}؟`;
        } else {
            correctAnswer = num1 - num2;
            questionElement.innerHTML = `ما هو ناتج ${num1} - ${num2}؟`;
        }
    }

    // التحقق من الإجابة المدخلة
    function checkAnswer() {
        let userAnswer = document.getElementById("answer").value;

        if (userAnswer == correctAnswer) {
            resultElement.innerHTML = "أحسنت! الإجابة صحيحة.";
            resultElement.style.color = "green";
        } else {
            resultElement.innerHTML = "إجابة خاطئة. حاول مرة أخرى!";
            resultElement.style.color = "red";
        }

        // توليد سؤال جديد بعد تأكيد الإجابة
        setTimeout(function() {
            generateQuestion();
            resultElement.innerHTML = "";
            document.getElementById("answer").value = "";
        }, 2000);
    }

    // تشغيل اللعبة لأول مرة
    generateQuestion();
</script></div>
google-playkhamsatmostaqltradent