יצירת סימולציה אינטראקטיבית לתרגול שימוש בכלי דיגיטלי.
כאשר המשתמש מבקש ליצור סימולציה אינטראקטיבית שבה התלמיד מתרגל שימוש בכלי – הסקיל הזה מופעל.
סימולציה היא חוויית תרגול שמדמה את השימוש בכלי האמיתי.
התלמיד:
בלי גישה לכלי עצמו – הכל בתוך HTML.
/extract-frames (צילומי מסך של הכלי)/ai-expert (מסמך צעד-צעד)קובץ HTML יחיד עם:
שמירה ב: docs/training/{tool-name}/practice.html
<div class="sim-step" data-step="1">
<!-- צילום מסך -->
<div class="sim-screen">
<img src="data:image/jpeg;base64,..." alt="שלב 1">
<!-- אזור לחיצה נכון -->
<div class="hotspot correct"
style="top:35%;left:60%;width:15%;height:8%"
data-feedback="מעולה! לחצתם על הכפתור הנכון">
</div>
<!-- אזור לחיצה שגוי (אופציונלי) -->
<div class="hotspot wrong"
style="top:20%;left:30%;width:10%;height:6%"
data-feedback="לא כאן... נסו שוב!">
</div>
</div>
<!-- הנחיה -->
<div class="sim-instruction">
<span class="step-num">1</span>
לחצו על כפתור "צור טופס חדש"
</div>
<!-- רמז (נגלה אחרי 10 שניות) -->
<div class="sim-hint" data-delay="10">
💡 הכפתור נמצא בצד ימין למעלה
</div>
</div>
// מעבר לשלב הבא אחרי לחיצה נכונה
function nextStep(currentStep) {
// הסתרת שלב נוכחי
// הצגת משוב חיובי
// אחרי 1.5 שניות – מעבר לשלב הבא
// עדכון progress bar
// עדכון ניקוד
}
┌──────────────────────────────────┐
│ 🎯 בואו נתרגל! │
│ │
│ היום נלמד להשתמש ב-{כלי} │
│ │
│ 📋 {מספר} שלבים │
│ ⏱️ כ-{זמן} דקות │
│ │
│ [ התחילו! ] │
└──────────────────────────────────┘
┌──────────────────────────────────┐
│ 🎉 כל הכבוד! │
│ │
│ סיימתם את כל השלבים! │
│ ניקוד: {score}/{total} │
│ │
│ עכשיו נסו בעצמכם בכלי האמיתי │
│ │
│ [ נסו שוב ] [ לדף הבית ] │
└──────────────────────────────────┘