בניית כרטיס שיעור עם גיימיפיקציה
הפכו את התוכן שלכם למשחק
תלמידים מרוכזים כשהלמידה מרגישה כמו משחק. נקודות, התקדמות ואתגר ברור הופכים שיעור שטוח למשהו ששווה לסיים. בשיעור הזה תבנו כרטיס שיעור עם גיימיפיקציה, כשה-AI הוא שותף הבנייה שלכם.
תרכיבו שלושה חלקים שמשותפים לכל ממשק משחק מעולה: תג נקודות שמתגמל מאמץ, פס התקדמות שמראה כמה רחוק התלמיד הגיע, וכרטיס אתגר שנותן לו מטרה. בסוף השיעור יהיה לכם רכיב לשימוש חוזר שתוכלו לשלב בכל שיעור.
אל תדאגו לכתוב קוד מושלם מהזיכרון. עקבו אחרי כל שלב, היעזרו ברמזים, ותנו לתצוגה החיה לאשר שאתם בכיוון הנכון.
הוראות
צרו את מיכל כרטיס השיעור: div עם פינות מעוגלות rounded-xl, ריווח פנימי ורקע אפור כהה gray-800.
רמז: השתמשו ב: `<div class="max-w-md w-full bg-gray-800 rounded-xl p-6 shadow-lg">`
איפה כותבים את זה?
<!-- בנו כאן את כרטיס השיעור שלכם -->כתבו את זה בשורה 11 — מתחת להערה הזאת, אחרי הקוד שכבר הוספתם.
הוסיפו תג נקודות באמצעות span עם רקע צהוב בוהק שמציג את הניקוד של התלמיד.
הוסיפו פס התקדמות: div של מסילה אפורה שמכיל div מילוי ירוק עם רוחב מוגדר.
הוסיפו כרטיס אתגר עם הכותרת 'האתגר של היום' ומטרה קצרה לתלמיד.
הקוד שלכם
אני אבנה עבורכם את השלב. אין צורך לכתוב או להבין קוד — אפשר להשתמש בכפתור המודרך או לתאר במילים מה תרצו. השלב הזה: צרו את מיכל כרטיס השיעור: div עם פינות מעוגלות rounded-xl, ריווח פנימי ורקע אפור כהה gray-800.