مخطط الضرب - كود جدول الأوقات الخاص بك باستخدام JavaScript

يعد تعلم جداول الضرب مهارة أساسية وجزءًا أساسيًا من أي تعليم للرياضيات. و الرسم البياني الضرب هو أداة قوية التي تحول تحفيظ مملة إلى المرح، وممارسة منطقية.

يظهر الرسم البياني منتجات رقمين. عادة ، يتم كتابة مجموعة واحدة من الأرقام (1-9) في العمود الأيسر والأخرى في الصف العلوي. هذا يشكل وجهين لمربع بصري. منتجاتهم تملأ بقية ذلك المربع. تبدو مشابهة لهذا:

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 14 21 28 35 42 49 56 63 8 16 24 32 40 48 56 64 72 9 9 18 27 36 45 54 63 72 81

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

هناك طرق لا حصر لها لتقديم التصميم والوظائف لمخططات الضرب. سيضيف كل مؤلف شيئًا مميزًا. في هذه المقالة ، سوف أشارك طريقة واحدة لتصميم وكتابة مثل هذا المخطط.        

هناك أحد التفاصيل المهمة التي يجب أن أذكرها قبل الوصول إلى وصف المخطط. قد لا تكون كتل التعليمات البرمجية المضمنة في هذه المقالة مرتبطة ببعضها البعض بأي شكل من الأشكال.

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

كيفية بناء مخطط الضرب

جزء HTML هو نسخة معدلة من مخطط الأرقام الرومانية. اللبنة الأساسية هي زر. يمكنك أيضًا استخدام div عام ، لكنني وجدت أن الزر أكثر استجابة.

توضع الأزرار أولاً في صفوف ، والتي بدورها توضع في الحاوية المرنة.

Multiplication Table

1 1 2 3 .......................................................... .......................................................... .......................................................... .......................................................... .............................................................

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

 /* 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); } } 

يتم تحقيق التأثيرات المرئية من خلال CSS. قررت إدخال عناصر صوتية باستخدام JavaScript. كنت سعيدًا لاكتشاف أن هذا المحرر يدعمه.

يتم توصيل كل زر يمثل نتيجة الضرب بوظيفة ما. تقوم الوظيفة بإرجاع عنصر صوت يقوم بتشغيل ملف صوتي فريد لهذا العنصر. يعمل حدث النقر كمحفز ، ويستدعي هذه الوظيفة.

لا يتم دعم النماذج الحرفية هنا. وبالتالي يجب أن يكون كل استدعاء للدالة موصلاً بعناصر محددة ويتم تحديده بشكل فردي.

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

شكراً جزيلاً للمتخصصين الذين أنشأوا مكتبة الصوت هذه وصيانتها. يمكن العثور على الكود الكامل باعتباره 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 14 21 28 35 42 49 56 63 8 16 24 32 40 48 56 64 72 9 9 18 27 36 45 54 63 72 81

كيفية بناء لعبة الضرب

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

أدخل إجابتك وانقر فوق إرسال

إرسال

صيح:

غير صحيح:

إعادة بدء

في النافذة اليسرى العلوية ، هناك سؤال تحدي. بجانبه يوجد عنصر إدخال يأخذ إجابة. يؤدي النقر فوق الزر إرسال إلى تقييم هذه الإجابة وإخراج الرسالة التي تشير إلى ما إذا كانت صحيحة.

تتم إضافة الإجابات الصحيحة إلى عداد "الإجابات الصحيحة" الأخضر ، بينما تتم إضافة الإجابات غير الصحيحة إلى الإجابة الحمراء المجاورة لها.

بمجرد تقييم الإجابة ، يتم إنشاء سؤال تحدي جديد باستخدام مولد أرقام عشوائي وتكرر الدورة. بعد انتهاء عشر دورات من الأسئلة ، تتوقف اللعبة ويتم عرض النتيجة النهائية ، مصحوبة بتشغيل ملف صوتي.

يؤدي الضغط على زر إعادة التشغيل إلى بدء لعبة جديدة من عشرة أسئلة. يؤدي الضغط على زر إرسال بدون إدخال إجابة إلى ظهور رسالة تحذير وصوت.

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

يمكن الوصول إلى الكود الكامل مع التعليقات باعتباره Github repo بالنقر هنا.