جدول الضرب التفاعلي: بناء جدول الأوقات الخاص بك باستخدام JavaScript

Updated يونيو 14, 2026 5 min read

Aldawsari

دقائق القراءة: 5

تعلم جداول الضرب يُعد مهارة أساسية وجزءًا لا يتجزأ من أي تعليم رياضي. غالبًا ما تكون عملية حفظها مملة، لكن استخدام “مخطط جدول الضرب” (Multiplication Chart) يحول هذه العملية إلى تمرين منطقي وممتع. يعرض هذا المخطط نواتج ضرب عددين، حيث تُكتب مجموعة من الأرقام (عادةً من 1 إلى 9) في العمود الأيسر، ومجموعة أخرى في الصف العلوي، لتشكيل جانبي مربع بصري. تملأ نواتج الضرب بقية هذا المربع.

يُعزز الطابع البصري لهذه الأداة عملية التعلم من خلال تطبيق مفهوم المساحات. على سبيل المثال، 2 × 3 يساوي العدد 6، وهو أيضًا مساحة مستطيل أحد أضلاعه 2 والآخر 3. هناك طرق لا حصر لها لتقديم تصميم ووظائف جداول الضرب. في هذا المقال، سأشارك إحدى طرق تصميم وكتابة مثل هذا المخطط باستخدام JavaScript.

قبل الخوض في تفاصيل المخطط، يجب التنويه إلى نقطة مهمة: قد لا تكون كتل الأكواد البرمجية المضمنة في هذا المقال مرتبطة ببعضها البعض بشكل مباشر. ومع ذلك، في الخلفية، يتم وضعها داخل عنصر <body> واحد لكل مقال. لذلك، تأكد من استخدام سمات id و class فريدة لكل كتلة. وإلا، فإن استخدام class أو id بنفس الاسم عبر كتلتين أو أكثر قد يتداخل ويؤثر سلبًا على النمط والوظائف.

بناء جدول الضرب التفاعلي باستخدام JavaScript

يُعد بناء جدول ضرب تفاعلي خطوة رائعة لتعزيز الفهم والتعلم. في هذا القسم، سنستعرض كيفية هيكلة هذا الجدول باستخدام HTML، وتصميمه باستخدام CSS، وإضافة لمسة تفاعلية باستخدام JavaScript.

هيكلة HTML الأساسية لجدول الضرب

الجزء الخاص بـ HTML هو نسخة معدلة من مخطط الأرقام الرومانية. الوحدة البنائية الأساسية هي زر (<button>). يمكنك أيضًا استخدام عنصر <div> عام، لكنني وجدت أن الزر أكثر استجابة. تُوضع الأزرار أولاً في صفوف، والتي بدورها تُوضع داخل حاوية مرنة (flex-container).

<div class='flex-table'>
    <h2 class='table-title'>Multiplication Table</h2>
    <div class='table-row'>
        <button class='item header'>1</button>
        <button class='item core' onmouseover='onePlay()'>1</button>
        <button class='item core' onmouseover='twoPlay()'>2</button>
        <button class='item core' onmouseover='threePlay()'>3</button>
        ..........................................................
        ..........................................................
    </div>
    <div class='table-row'>
        ..........................................................
        ..........................................................
    </div>
    .............................................................
</div>

لا يجب أن تكون البنية أو العنصر المستخدم فريدًا، ويمكنك إضافة لمستك الأصلية. لقد طبقت تنسيقات واستعلامات وسائط (media queries) للسماح بعرض مريح على الأجهزة المختلفة.

تنسيق CSS واستجابة العرض

تُحقق التأثيرات البصرية من خلال CSS. لقد قمت بتطبيق استعلامات وسائط لضمان عرض مريح على مختلف الأجهزة، من الهواتف المحمولة إلى الأجهزة اللوحية.

/ Mobile phones /
@media screen and (max-width: 767px){
    .flex-table {
        transform: scale(0.60);
    }
}
/ Tablets and iPads /
@media screen and (min-width: 768px) and (max-width: 1023px){
    .flex-table {
        transform: scale(0.8);
    }
}

إضافة المؤثرات الصوتية باستخدام JavaScript

لإضفاء تجربة أكثر تفاعلية، قررت إدخال عناصر صوتية باستخدام JavaScript. كل زر يمثل نتيجة عملية ضرب يتم ربطه بدالة. تُرجع هذه الدالة عنصرًا صوتيًا (Audio element) يقوم بتشغيل ملف صوتي فريد لهذا العنصر. يعمل حدث التمرير (onmouseover) كمحفز لاستدعاء تلك الدالة. تجدر الإشارة إلى أن قوالب النصوص الحرفية (Template literals) غير مدعومة هنا، وبالتالي كان يجب ربط كل استدعاء دالة بشكل مباشر بالعناصر وتعريفها بشكل فردي.

<script>
    function onePlay() {
        const one = new Audio('https://evolution.voxeo.com/library/audio/prompts/numbers/1.wav')
        one.currentTime = 0
        one.play()
    }
    function twoPlay() {
        const two = new Audio('https://evolution.voxeo.com/library/audio/prompts/numbers/2.wav')
        two.currentTime = 0
        two.play()
    }
    ...............................................................
    ................................................................
</script>

شكرًا جزيلًا للمتخصصين الذين أنشأوا هذه المكتبة الصوتية ويحافظون عليها. يمكن العثور على الكود الكامل كمستودع Github repo.

مثال على جدول الضرب التفاعلي

للتوضيح، إليك كيف يمكن أن يبدو جدول الضرب التفاعلي، حيث يمكن للمستخدم التمرير فوق الأرقام أو النقر عليها لسماع النتيجة:

×	1	2	3	4	5	6	7	8	9
1	1	2	3	4	5	6	7	8	9
2	2	4	6	8	10	12	14	16	18
3	3	6	9	12	15	18	21	24	27
4	4	8	12	16	20	24	28	32	36
5	5	10	15	20	25	30	35	40	45
6	6	12	18	24	30	36	42	48	54
7	7	14	21	28	35	42	49	56	63
8	8	16	24	32	40	48	56	64	72
9	9	18	27	36	45	54	63	72	81

تطوير لعبة جدول الضرب التفاعلية

نظرًا لأن الممارسة هي أفضل طريقة للتعلم، وجداول الضرب ليست استثناءً، فقد قررت كتابة لعبة صغيرة.

في النافذة العلوية اليسرى، توجد “سؤال التحدي”. بجانبه يوجد عنصر إدخال (input element) يأخذ الإجابة. يؤدي النقر على زر “إرسال” (Submit button) إلى تقييم هذه الإجابة وإخراج رسالة تشير إلى ما إذا كانت صحيحة. تُضاف الإجابات الصحيحة إلى عداد “الإجابات الصحيحة” الأخضر، بينما تُضاف الإجابات غير الصحيحة إلى العداد الأحمر المجاور له.

بمجرد تقييم الإجابة، يتم إنشاء سؤال تحدي جديد باستخدام مولد أرقام عشوائي، وتتكرر الدورة. بعد انتهاء عشر دورات من الأسئلة، تتوقف اللعبة ويتم عرض النتيجة النهائية، مصحوبة بتشغيل ملف صوتي. يؤدي الضغط على زر “إعادة التشغيل” (Restart button) إلى بدء لعبة جديدة مكونة من عشرة أسئلة. يؤدي الضغط على زر “إرسال” دون إدخال إجابة إلى تشغيل رسالة تحذير وصوت.

يمكنك بسهولة تغيير التصميم المرئي وموقع العناصر ضمن قيود المحرر. بالإضافة إلى ذلك، يمكن تطبيق المنطق المستخدم هنا في تصميم ألعاب أخرى أيضًا. على سبيل المثال، يمكن تغيير “جدول الضرب” (Multiplication) إلى “معلومات عامة عن الأفلام” (Movie Trivia) والكثير غير ذلك. يمكن الوصول إلى الكود الكامل مع التعليقات كمستودع Github repo.

الخلاصة التقنية

يُظهر هذا المقال كيف يمكن تحويل مفهوم رياضي أساسي مثل جدول الضرب إلى أداة تعليمية تفاعلية وجذابة باستخدام تقنيات تطوير الويب الحديثة. من خلال دمج HTML للهيكلة، و CSS للتصميم والاستجابة، و JavaScript لإضافة التفاعل والمؤثرات الصوتية، يمكن للمطورين إنشاء تجارب تعليمية غنية تتجاوز الأساليب التقليدية. إن التركيز على التصميم المرن (responsive design) وتضمين عناصر اللعب (gamification) يعزز من قيمة المحتوى ويجعله أكثر فائدة للمستخدمين من جميع الأعمار. كما أن الالتزام بممارسات الترميز الجيدة، مثل استخدام سمات id و class الفريدة، يضمن قابلية الصيانة والتوسع للمشروع. هذه المنهجية لا تقتصر على جداول الضرب فحسب، بل يمكن تطبيقها على نطاق واسع لتطوير مجموعة متنوعة من التطبيقات التعليمية والتفاعلية.

×	1	2	3	4	5	6	7	8	9
1	1	2	3	4	5	6	7	8	9
2	2	4	6	8	10	12	14	16	18
3	3	6	9	12	15	18	21	24	27
4	4	8	12	16	20	24	28	32	36
5	5	10	15	20	25	30	35	40	45
6	6	12	18	24	30	36	42	48	54
7	7	14	21	28	35	42	49	56	63
8	8	16	24	32	40	48	56	64	72
9	9	18	27	36	45	54	63	72	81

×	1	2	3	4	5	6	7	8	9
1	1	2	3	4	5	6	7	8	9
2	2	4	6	8	10	12	14	16	18
3	3	6	9	12	15	18	21	24	27
4	4	8	12	16	20	24	28	32	36
5	5	10	15	20	25	30	35	40	45
6	6	12	18	24	30	36	42	48	54
7	7	14	21	28	35	42	49	56	63
8	8	16	24	32	40	48	56	64	72
9	9	18	27	36	45	54	63	72	81