--- name: lesson-opener description: פעילויות פתיחה לשיעור – 12 סוגי פעילויות אינטראקטיביות (סקר, ענן מילים, חידה, גלגל מזל ועוד). --- # סקיל: פעילויות פתיחה לשיעור ## מטרה יצירת קובץ HTML אינטראקטיבי עם פעילויות פתיחה לשיעור שמעוררות סקרנות ועניין בקרב התלמידים. ## קלט ### חובה - **מקצוע** – היסטוריה / מתמטיקה / אזרחות / עברית / תנ"ך / אנגלית / ספרות / מדעים / תספורת / אחר - **כיתה** – ט / י / יא / יב ### אופציונלי - **רמה** – בסיסי / רגיל / מתקדם (ברירת מחדל: רגיל) - **נושא ספציפי** – למשל "המרד הגדול", "משפט פיתגורס" (אם לא ניתן – גנרי למקצוע) - **מספר פעילויות** – 2-5 (ברירת מחדל: 3) - **סוג פעילויות** – בחירה ספציפית מהרשימה, או "תבחר אתה" (אוטומטי) ### איסוף קלט אם המשתמש לא סיפק את כל הפרטים, **שאל באמצעות AskUserQuestion**: 1. מקצוע + כיתה (חובה) 2. נושא ספציפי (אופציונלי) 3. סוג פעילויות – הצע את הרשימה + "תבחר אתה" ## מאגר סוגי פעילויות ### 1. שאלה מעוררת חשיבה 🤔 שאלה פתוחה/פרובוקטיבית שמעוררת סקרנות. - תצוגה: שאלה גדולה במרכז + טיימר 60 שניות לחשיבה - אינטראקציה: כפתור "גלה רמז" + כפתור "גלה תשובה" - דוגמה: "למה דווקא ירושלים הייתה כל כך חשובה?" ### 2. סיפור / עובדה מפתיעה 📖 סיפור קצר (3-4 משפטים) או עובדה מדהימה שקשורה לנושא. - תצוגה: טקסט מעוצב עם אייקון + רקע מודגש - אינטראקציה: כפתור "מה דעתכם?" שפותח שאלה לדיון - דוגמה: "ידעתם שמצדה לא נכבשה בקרב?" ### 3. הצבעה / סקר כיתתי 📊 שאלה עם 2-4 תשובות שהתלמידים מצביעים עליה. - תצוגה: שאלה + כפתורי הצבעה צבעוניים - אינטראקציה: לחיצה על תשובה → גרף עמודות מתעדכן בזמן אמת (מקומי) - מתאים לעבודה עם מקרן – כל תלמיד ניגש ולוחץ - דוגמה: "מה לדעתכם הסיבה העיקרית למרד?" ### 4. חידה / ניחוש 🔍 חידה, מילה חסרה, או ניחוש שקשור לנושא. - תצוגה: רמזים מתגלים אחד אחד (בלחיצה) - אינטראקציה: 3-4 רמזים + כפתור "גלה תשובה" בסוף - דוגמה: "רמז 1: אני מקום... רמז 2: על הר... רמז 3: חרבתי פעמיים..." ### 5. נכון / לא נכון מפתיע ✅❌ 3-4 טענות שחלקן מפתיעות – התלמידים מנחשים. - תצוגה: כרטיסים שמתהפכים בלחיצה (flip card) - אינטראקציה: לחיצה חושפת "נכון!" / "לא נכון!" + הסבר קצר - ניקוד: ספירת תשובות נכונות - דוגמה: "בית המקדש השני היה גדול יותר מהראשון – נכון או לא?" ### 6. מה היית עושה? 🎭 דילמה או סיטואציה מחיי היום-יום שקשורה לנושא. - תצוגה: תיאור סיטואציה + 2-3 אפשרויות בחירה - אינטראקציה: בחירה → תוצאה/הסבר + קישור לנושא השיעור - דוגמה: "אתם מנהיגים של עם נלחם. האם תלחמו עד הסוף או תנסו לנהל משא ומתן?" ### 7. תמונה מדברת 🖼️ תיאור ויזואלי (באמצעות אמוג'י/ASCII art) + שאלה "מה אתם רואים?" - תצוגה: אילוסטרציה מרכזית (אמוג'י גדולים / SVG פשוט) - אינטראקציה: שדה טקסט לתשובות + כפתור "הצג תשובות" שמציג אותן - דוגמה: "🏛️🔥⚔️ – מה קרה כאן?" ### 8. מילה אחת ☁️ כל תלמיד כותב מילה אחת שקשורה לנושא → נבנה ענן מילים. - תצוגה: שדה קלט + כפתור הוספה + ענן מילים שגדל - אינטראקציה: הזנת מילים → ענן מילים ויזואלי מתעדכן בזמן אמת - מילים חוזרות מופיעות גדולות יותר - דוגמה: "מה עולה לכם לראש כששומעים 'מרד'?" ## פלט ### קובץ `docs/openers/{subject}-{topic}/index.html` שם הקובץ באנגלית בלבד (ללא עברית) – למשל: - `docs/openers/history-great-revolt/index.html` - `docs/openers/math-pythagoras/index.html` - `docs/openers/hebrew-general/index.html` ### מבנה HTML ```html פעילויות פתיחה – [נושא]

פעילויות פתיחה

[מקצוע] | כיתה [X] | [נושא]
[emoji]

[שם הפעילות]

⏱ [X] דקות
[תוכן לפי סוג הפעילות]
``` ## עיצוב – CSS ### צבעים (ORT) ```css :root { --primary: #2A9D8F; /* תכלת-טורקיז */ --primary-light: #E0F5F1; /* רקע בהיר */ --secondary: #E76F7A; /* אדום רך */ --accent: #52B788; /* ירוק */ --dark: #1E293B; /* טקסט כהה */ --gray: #64748B; /* טקסט משני */ --white: #FFFFFF; --shadow: 0 4px 20px rgba(0,0,0,0.08); --radius: 20px; } ``` ### כללי עיצוב - **כרטיסים**: רקע לבן, צל רך, border-radius: 20px, מרווח נעים - **כותרות**: Rubik bold, צבע כהה - **טקסט**: Heebo regular, גודל 18-22px - **כפתורים**: רקע מעבר צבע (gradient), border-radius: 12px, hover effect - **אנימציות כניסה**: fadeUp עם animation-delay לכל כרטיס - **מסך מלא**: רקע כהה, תוכן גדול במרכז, פונט ענק (מושלם למקרן) - **רספונסיבי**: grid שמתאים למובייל (1 עמודה) ומחשב (2-3 עמודות) ### אנימציות ```css @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .activity-card { animation: fadeUp 0.6s ease forwards; } .activity-card:nth-child(1) { animation-delay: 0.1s; } .activity-card:nth-child(2) { animation-delay: 0.2s; } .activity-card:nth-child(3) { animation-delay: 0.3s; } ``` ### מצב מסך מלא ```css .fullscreen-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 1000; display: flex; align-items: center; justify-content: center; } .fullscreen-content { color: white; font-size: 2.5rem; text-align: center; max-width: 80vw; } ``` ## JavaScript – לוגיקה ### כללי - כל הלוגיקה מוטמעת בקובץ HTML (self-contained) - אין תלות בספריות חיצוניות - localStorage לשמירת הצבעות (סקר כיתתי) ### פונקציות עיקריות ```javascript // מסך מלא function openFullscreen(cardEl) { ... } function closeFullscreen() { ... } // הנחיה למורה function toggleTeacherNote(cardEl) { ... } // טיימר function startTimer(seconds, displayEl) { ... } // סקר / הצבעה function vote(option, chartEl) { ... } function updateChart(chartEl) { ... } // נכון/לא נכון – היפוך כרטיס function flipCard(cardEl) { ... } // חידה – גילוי רמזים function revealHint(index, containerEl) { ... } // ענן מילים function addWord(word, cloudEl) { ... } function renderWordCloud(cloudEl) { ... } ``` ## בחירת פעילויות (מצב "תבחר אתה") כשהמשתמש בוחר "תבחר אתה", יש לבחור שילוב מגוון: - **תמיד לכלול**: לפחות פעילות אחת אישית (חשיבה) + אחת כיתתית (הצבעה/מילה) - **להימנע מחזרות**: לא שני סוגים דומים - **התאמה למקצוע**: - היסטוריה/אזרחות → סיפור + נכון/לא נכון + דילמה - מתמטיקה/מדעים → חידה + שאלה מעוררת + הצבעה - עברית/ספרות → מילה אחת + תמונה מדברת + שאלה - תספורת/מקצועי → מה היית עושה + הצבעה + חידה ## כללים חשובים 1. **שפה פשוטה** – משפטים קצרים, מילים פשוטות, מתאים לבני נוער 2. **מעט טקסט** – כל כרטיס קצר ותמציתי 3. **אינטראקטיביות** – כל פעילות חייבת לכלול אלמנט אינטראקטיבי 4. **מסך מלא** – כל פעילות חייבת לתמוך בתצוגת מסך מלא (להקרנה) 5. **הנחיה למורה** – כל פעילות כוללת הנחיה מוסתרת למורה 6. **לא לשכוח**: קובץ HTML אחד, self-contained, בלי תלויות חיצוניות (חוץ מ-Google Fonts) 7. **שמות קבצים באנגלית בלבד** ## תהליך עבודה 1. קבל קלט מהמשתמש (מקצוע, כיתה, נושא, מספר פעילויות, סוגים) 2. אם חסר מידע – שאל באמצעות AskUserQuestion 3. צור תוכן מותאם לנושא ולמקצוע 4. בנה קובץ HTML עם כל הפעילויות 5. שמור ב-`docs/openers/{name}/index.html` 6. commit + push