בניית ממשק מסתגל לשיעור הבא
תוכן שמסתגל
הלמידה הטובה ביותר פוגשת כל תלמיד במקום שבו הוא נמצא. תלמיד שהצטיין בחידון צריך אתגר; תלמיד שהתקשה צריך חזרה. בשיעור הזה תבנו ממשק מסתגל של 'השיעור הבא המומלץ', שמציע מסלול לפי ביצועים.
תיצרו שלושה כרטיסי המלצה מתויגים, אחד לכל רמת ביצועים: מסלול חזרה לתלמידים שצריכים עוד תרגול, מסלול יציב למי שנמצא בקצב, ומסלול מאתגר למצטיינים. תוויות ברורות ורמזי צבע הופכים את הבחירה הנכונה למובנת מאליה.
כאן תוכן שנבנה עם AI מוכיח את עצמו — אין שני תלמידים שרואים בדיוק את אותו הצעד הבא. עקבו אחרי השלבים וצפו בממשק המסתגל שלכם מתגבש.
הוראות
הוסיפו כותרת עמוד 'השיעור הבא המומלץ' וכותרת משנה קצרה שמסבירה שהמסלול מסתגל.
רמז: השתמשו ב-`<h1 class="text-3xl font-bold">השיעור הבא המומלץ</h1>` ואחריו `<p>` עם כותרת משנה.
איפה כותבים את זה?
<!-- בנו כאן את ממשק ההמלצות המסתגל שלכם -->כתבו את זה בשורה 11 — מתחת להערה הזאת, אחרי הקוד שכבר הוספתם.
צרו מיכל grid רספונסיבי שיכיל את שלושת כרטיסי ההמלצה.
הוסיפו שלושה כרטיסי rounded-xl, כל אחד עם span של תווית רמת ביצועים (למשל 'נדרשת חזרה').
תנו לכל כרטיס כפתור קריאה לפעולה כדי שהתלמיד יוכל להתחיל את המסלול שלו.
הקוד שלכם
אני אבנה עבורכם את השלב. אין צורך לכתוב או להבין קוד — אפשר להשתמש בכפתור המודרך או לתאר במילים מה תרצו. השלב הזה: הוסיפו כותרת עמוד 'השיעור הבא המומלץ' וכותרת משנה קצרה שמסבירה שהמסלול מסתגל.