عنصر مجموعة البطاقات التعليمية
بطاقة قابلة للقلب لتمرين المفردات أو الحقائق: أضف مجموعة بطاقات تعليمية، ثم أدرج بداخلها عناصر فرعية من نوع بطاقة تعليمية، لكلٍّ منها نص وجه أمامي (السؤال) ووجه خلفي (الإجابة)، مع صورة اختيارية على أي من الوجهين. إنها أداة مذاكرة وليست سؤالًا — فلا شيء يُصحَّح أو يُجمَع.
آلية العمل
تنقلب كل بطاقة في المجموعة باستقلال عن البقية، باستخدام آلية مربع الاختيار المخفي مع CSS :checked نفسها التي يستخدمها عنصرا القائمة القابلة للطي وبطاقة الكشط — دون JavaScript، ودون الاعتماد على عنصر إفصاح أصلي في HTML. النقر على بطاقة يحدّد مربع الاختيار المخفي الخاص بها، فيُخفي الوجه الأمامي لتلك البطاقة ويُظهر وجهها الخلفي عبر قاعدة CSS محصورة النطاق. وكل بطاقة أخرى في المجموعة موصولة بمربع اختيار مستقل خاص بها، فلا يؤثر قلب إحداها في البقية.
وعلى خلاف معظم العناصر الحركية الأخرى في الاستوديو، فإن عرض مجموعة البطاقات التعليمية في البريد وفي العرض المباشر موحَّد فعلًا بدلًا من أن يتفرّع إلى مسارين برمجيين منفصلين للبريد والعرض المباشر. فقلب البطاقة بمربع اختيار وتسمية عبر :checked ليس له بديل أصلي «أفضل» يمكن الترقية إليه في متصفح حقيقي — على عكس البديل المبني على الروابط في الاستطلاع مثلًا، الذي يُستبدل به نموذج حقيقي. ولذا يعرض العرض المباشر الترميز نفسه تمامًا الذي يعرضه البريد.
وحيثما لا تُحترم قاعدة CSS تلك — في Outlook، أو أي تطبيق بريد لا يدعم المستوى الحركي — يُعرض الوجهان الأمامي والخلفي ببساطة مكدّسين أحدهما فوق الآخر بشكل ثابت بدلًا من القلب. ويحمل كلٌّ منهما بادئة بسيطة "Q:" / "A:"، فيبقى الاقتران واضحًا دون أي تفاعل على الإطلاق. لا يُخفى شيء أبدًا خلف إيماءة لا يستطيع تطبيق البريد تنفيذها؛ فالبديل يعرض المحتوى الكامل لكل بطاقة، أمامًا وخلفًا، دفعة واحدة.
لا تسجّل مجموعة البطاقات التعليمية شيئًا. فلا يوجد حدث تصويت أو إرسال أو كشف لقلب البطاقة، ولا يعلن العنصر عن أي قدرة من شأنها أن تسجّلها في لوحة الردود أو تصدير CSV أو الخريطة الحرارية للنقرات أو أي ملخّص إجمالي آخر. إنها محتوى مذاكرة خالص، من الفئة نفسها التي ينتمي إليها عنصر صورة أو نص عادي، لكنها تفاعلية.
تقتصر الحقول القابلة للضبط على مجموعة البطاقات التعليمية نفسها على تنسيق البطاقات — لون الخلفية، والحشو، والحدّ، واستدارة الزوايا — إذ يوجد كل ما يخص المحتوى على البطاقات المفردة.
يحمل كل عنصر فرعي من نوع بطاقة تعليمية:
- نص الوجه الأمامي (السؤال) والوجه الخلفي (الإجابة)، لكلٍّ منهما لونه وحجم خطه.
- صورة الوجه الأمامي وصورة الوجه الخلفي — اختياريتان، تُعرضان فوق نص الوجه المقابل؛ وتُختاران من مكتبة الوسائط بدلًا من كتابتهما رابط URL.
أضف البطاقات أو احذفها أو أعد ترتيبها بحرية في الشجرة، بالطريقة نفسها التي تدير بها خيارات الاستطلاع أو أسئلة الاختبار.
أمثلة
Subject
Study these before Friday's quiz
يمكن لنشرة لتعلّم اللغات أن ترسل كل أسبوع مجموعة بطاقات مفردات حول موضوع معيّن: الوجه الأمامي باللغة المستهدفة، والخلفي بالترجمة وملاحظة عن الاستخدام. راجع التعليم للنمط الأوسع لتقديم المحتوى التعليمي عبر البريد. ويمكن لسلسلة رسائل للتحضير لشهادة مهنية أن تستخدم مجموعة لكل مجال موضوعي بوصفها مراجعة على نمط التكرار المتباعد بين اختبارات التدريب (واقرنها بـ عنصر الاختبار لاحقًا في الرسالة نفسها لاختبار التذكّر مباشرة بعد التمرين). ويمكن لرسالة ترحيب بمنتج تقني أن تستخدم البطاقات التعليمية لتعريفات سريعة للمصطلحات (الوجه الأمامي: المصطلح، والخلفي: معناه في منتجك) بديلًا أخف من صفحة مسرد لن يفتحها أحد في الغالب.
كيف يبدو البديل الثابت
<div style="border:1px solid #e5e7eb;border-radius:8px;padding:14px;
margin-bottom:8px;text-align:center">
<div class="fc-front">
<p style="margin:0;font-weight:600;font-size:16px;color:#111827">
Q: What is the powerhouse of the cell?
</p>
</div>
<div class="fc-back">
<p style="margin:0;font-size:16px;color:#111827">
A: The mitochondria
</p>
</div>
</div>
يُعرض الوجهان دون شرط؛ ولا يُخفي وجهًا واحدًا في كل مرة ويبدّل بينهما عند النقر إلا ورقة أنماط المستوى الحركي (المحذوفة هنا) — ودونها، يُكدَّس الوجهان الأمامي والخلفي ببساطة، ويحمل كلٌّ منهما تسمية "Q:" / "A:".