בונים עם מודל שפה מדריך לתלמידים, שלב אחרי שלב. אחרי כל שלב עוברים עליו בעצמכם כמו תלמיד, ומחזירים למודל הערות.
עובדים בגרסה חינמית. מבקשים שלב אחד בכל הודעה, ושומרים את ה-HTML לקובץ guide.html אחרי כל שלב. אם תשובה נקטעת באמצע, כותבים "המשך מהמקום שבו עצרת".
כתבו שש שורות. הן יודבקו בפרומפט הראשון.
Intent", לא "Activity, Intent ו-Fragment".רכיב: מעבר בין מסכים עם Intent מפורש והעברת ערך. כיתה: י"ב, 20 תלמידים, 4 מהירים. נלמד: LinearLayout, Button, Toast, setOnClickListener. לא נלמד: מסך שני, putExtra, Logcat. סביבה: Java, Android Studio, Empty Views Activity, API 26. מטרות: לפתוח מסך שני, להעביר ערך ולקרוא אותו, לסגור מסך עם finish(). טעויות: שם פתק שונה בשני הצדדים, this במקום MainActivity.this בתוך מאזין, חזרה עם Intent חדש במקום finish().
רכיב: קריאה אסינכרונית לשירות אינטרנט עם async ו-await. כיתה: י"ב, 18 תלמידים, 3 מהירים. נלמד: מחלקות ב-C#, טופס עם כפתור, try ו-catch. לא נלמד: Task, REST. סביבה: C#, Visual Studio. מטרות: לקרוא לשירות בלי שהמסך ייתקע, להציג את התשובה, לטפל בשירות שלא עונה. טעויות: שוכחים await, מציגים תשובה לפני שהגיעה, אין try סביב הקריאה.
מודל שפה יכתוב לכם מדריך שלם בתוך דקה, והוא ייראה גמור. הוא לא יהיה גמור: המודל לא הריץ את הקוד, לא ראה את הסביבה שבכיתה, ולא מכיר את התלמידים שלכם. לכן עובדים במחזור, ועוברים אותו כמה פעמים בכל שלב:
לעבור כמו תלמיד פירושו לבצע, לא לקרוא: לפתוח את סביבת הפיתוח, להתחיל מפרויקט ריק, ולעשות בדיוק מה שכתוב. כל מקום שבו נתקעתם, הופתעתם או נאלצתם לנחש הוא הערה.
הערה טובה למודל אומרת שלושה דברים: איפה, מה הבעיה, ומה צריך להיות.
בצעד [מספר] כתוב: "[הציטוט]". הבעיה: [מה קרה כשביצעתי]. תקן כך: [מה צריך להיות]. שנה רק את זה, והחזר את הקובץ המלא.
| העיקרון | איך הוא נראה בדף | נבנה בשלב |
|---|---|---|
| פרויקט שמעניין לבנות | דבר אחד שעובד בסוף, והתלמיד מתאים אותו לעצמו | 1 |
| עיצוב שמוריד עומס | לכל צבע תפקיד אחד, קוד מקופל, כפתורי קפיצה בראש | 3 |
| פיגומים | רמזים מקופלים, איור של התוצאה, שאלות מובילות במקום פתרון | 4 |
| עצירות מול המורה | התלמיד מסביר בעל-פה, בשיחה אישית | 5 |
| קצב אישי ותחושת מסוגלות | הרחבות לכולם, מסלול מתקדם למהירים | 6 |
| אוריינות מודלי שפה | תג "אסור", "מותר" או "חובה" לפני כל שלב, ויומן שימוש | 7 |
| ניקוד | טבלת ניקוד בראש הדף, "הניקוד שלי" בסופו | 8 |
שיחה אחת עם מודל אחד. מה שבסוגריים מרובעים מחליפים בתוכן שלכם. לא עוברים לשלב הבא לפני שעברתם על הנוכחי כמו תלמיד.
אני מורה ל"פרויקט בהנדסת תוכנה" בכיתה [שכבה], בחלופה [שם החלופה]. אני בונה איתך מדריך צעד-צעד לתלמידים, שמלמד רכיב אחד שיצטרכו בפרויקט הגמר. נעבוד בשלבים. אחרי כל שלב אעבור על התוצאה כמו תלמיד ואחזיר לך הערות. [הדביקו כאן את דף ההכנה] שלב ראשון: הצע 5 רעיונות לפרויקט קטן וחווייתי, שאי אפשר להשלים בלי הרכיב. לכל רעיון כתוב מה התלמיד רואה בסוף, ומה החיסרון. עדיין אל תכתוב את המדריך.
קראו את הרעיונות כמו תלמיד בכיתה שלכם. איזה מהם הוא היה רוצה להראות לחבר? אם אף אחד, כתבו למודל במה התלמידים שלכם מתעניינים ובקשו חמישה חדשים.
מודל שפה: אסור את הבחירה עושים לבד.
בחרתי ברעיון [מספר]. הצע תכנית למדריך, בלי HTML ובלי קוד: חזרה על מה שכבר נלמד, הסבר של המושגים החדשים, וצעדי הפרויקט (שורה לכל צעד: מה מוסיפים ומה רואים על המסך). סמן איפה תלמיד צפוי להיתקע, וכתוב שלוש נקודות חלשות בתכנית.
קראו את רשימת הצעדים כמו התלמיד החלש בכיתה. איפה צעד מוסיף שני דברים בבת אחת? איפה הוא מניח משהו שלא נלמד? האם שלוש הטעויות מדף ההכנה מופיעות? שלחו הערות, ובקשו תכנית מתוקנת.
העתיקו את השלד מחלק 4 והדביקו אותו בפרומפט.
זה שלד ה-HTML של הפורמט שבו אני עובד: [הדביקו כאן את השלד] בכל ההמשך השתמש רק ברכיבים שבשלד, כל אחד לתפקיד שכתוב בהערה שמעליו, ואל תשנה את ה-CSS. כתוב קובץ HTML שלם עם הפתיח, כפתורי הקפיצה, חלק החזרה וחלק ההסבר, לפי התכנית. את שאר החלקים נוסיף בהודעות הבאות.
פתחו את הדף. בצעו את החזרה בסביבת הפיתוח, מהזיכרון, כמו שהתלמיד יתבקש. קראו את ההסבר: האם יש בו מילה שלא נלמדה? האם האיור מראה את הפרויקט שלכם? שלחו הערות.
השלד לא הגיע במלואו, או שהמודל שינה את ה-CSS. שלחו את השלד בהודעה נפרדת, וכתבו: "החזר את בלוק ה-style בדיוק כפי שהוא בשלד".
כתוב את חלק 3, צעדי הפרויקט, והחזר את הקובץ המלא. הקוד ברמת תלמיד מתחיל: [המגבלות שלכם, למשל: בלי lambda]. במקומות שבהם תלמיד צפוי לטעות, תן שאלות מובילות ורמז מקופל במקום פתרון.
זה הסבב החשוב ביותר. פתחו פרויקט ריק בסביבת הפיתוח, ובצעו כל צעד בדיוק כפי שהוא כתוב. העתיקו קוד רק דרך כפתור "העתקה". רשמו הערה בכל מקום שבו:
שלחו את ההערות, קבלו קובץ מתוקן, ועברו שוב על הצעדים שהשתנו.
כנראה שקראתם במקום לבצע. מדריך ראשון בלי אף ליקוי הוא נדיר מאוד.
הוסף למדריך עצירות "אימות הבנה עם המורה", ברכיב verify שבשלד. בכל עצירה התלמיד קורא למורה ומסביר בעל-פה, כך שאי אפשר לעבור אותה בהעתקה או בעזרת מודל שפה. בחר בעצמך כמה עצירות, איפה למקם אותן, ומה לשאול בכל אחת. החזר את הקובץ המלא.
ענו על כל עצירה בקול, כאילו המורה עומד לידכם. עצירה שאפשר לענות עליה בלי לבנות את הפרויקט, או בשינון של הגדרה, היא הערה למודל. כך גם עצירה שתיקח לכם יותר משתי דקות לתלמיד.
הוסף למדריך חלק "הרחבות" וחלק "מסלול מתקדם", ברכיבי task ו-task adv שבשלד, ועדכן את כפתורי הקפיצה. הרחבות: משימות שהתלמיד מבצע לבד על הפרויקט שבנה, בלי צעד-צעד, כל אחת עם עצירת אימות הבנה. מסלול מתקדם: משימות לתלמידים מהירים, על נושאים שעדיין לא נלמדו. בחר בעצמך אילו הרחבות ואילו משימות מתאימות לפרויקט הזה.
בצעו הרחבה אחת בעצמכם, בלי לפתוח את הרמז. האם אפשר לבצע אותה עם מה שנלמד במדריך? פתחו כל קישור לתיעוד במסלול המתקדם: מודלים ממציאים כתובות.
הוסף למדריך את שכבת אוריינות מודלי השפה, לפי הרכיבים שבשלד: - תג "מודל שפה: אסור", "מותר" או "חובה" לפני כל חלק ולפני כל צעד, ומקרא בראש המדריך. - הנחיות לתלמיד לנהל יומן שימוש בקובץ Word ולצרף אותו להגשה. בחר בעצמך איזה תג מתאים לכל שלב, ונמק לי כל בחירה בשורה אחת.
עברו על התגים אחד אחד. בכל שלב שסומן "מותר": מה יישאר מהלמידה אם תלמיד ייתן למודל לעשות אותו? בכל שלב שסומן "אסור": האם תוכלו לאכוף את זה בכיתה? קראו את הנחיות היומן: האם תלמיד ידע מה לכתוב בלי לשאול אתכם?
הוסף טבלת "איך צוברים נקודות" בראש המדריך, וחלק "הניקוד שלי" בסופו, לפי הרכיבים שבשלד. הסך 100, ואי אפשר להגיע אליו בלי ההרחבות. המסלול המתקדם הוא בונוס מעל 100. הצע חלוקת נקודות ונמק אותה בקצרה.
חברו את הנקודות בטבלה: האם הסך 100? סמנו את כל התיבות ב"הניקוד שלי" ובדקו שהסכום זהה. ואז שאלו כמו תלמיד: מה הדרך הקלה ביותר לצבור נקודות בלי להבין? אם יש כזו, זו הערה.
עברתם עליו פעם אחת נוספת מההתחלה ועד הסוף, כמו תלמיד, בלי אף הערה חדשה.
לחצו "העתקה", והדביקו בפרומפט של שלב 3. לא משנים את השלד בין מדריך למדריך.
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>[שם המדריך]</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500;700;900&family=Assistant:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{
color-scheme:light;
box-sizing:border-box;
padding-top:env(safe-area-inset-top,0px);
padding-bottom:env(safe-area-inset-bottom,0px);
--yellow:#FFC83D; --yellow-soft:#FFF3D6;
--ink:#1A1A1A; --navy:#20304D;
--teal:#1B8A75; --teal-soft:#DCF3EC;
--coral:#E85B3A; --coral-soft:#FCE4DC;
--blue:#2F6FDB; --blue-soft:#E2EBFB;
--purple:#7B4FE0; --purple-soft:#EDE5FC;
--paper:#FFFDF7; --panel:#fff; --soft:#5A6477; --line:#E4DFD0;
--head:'Rubik',Arial,sans-serif; --body:'Assistant',Arial,sans-serif; --mono:'JetBrains Mono',Consolas,monospace;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.75}
.wrap{max-width:800px;margin:0 auto;padding:0 20px 90px}
p{margin:0 0 12px}
a{color:var(--blue)}
ul,ol{padding-inline-start:22px;margin:0 0 12px}
li{margin-bottom:6px}
.hero{background:var(--yellow);border-bottom:5px solid var(--ink);padding:52px 20px 40px;margin:0 0 32px}
.hero-inner{max-width:800px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:28px;align-items:center}
.badge{display:inline-block;background:var(--ink);color:var(--yellow);font-family:var(--head);font-weight:700;font-size:13px;padding:5px 14px;border-radius:100px;margin-bottom:16px}
h1{font-family:var(--head);font-weight:900;font-size:34px;line-height:1.18;margin:0 0 12px;text-wrap:balance}
.hero p{font-size:17px;font-weight:500;max-width:58ch;margin:0}
.phone{border:3px solid var(--ink);border-radius:22px;background:#fff;padding:12px 10px;font-size:12px;text-align:center;box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column;gap:8px}
.phone .t{font-family:var(--head);font-weight:700;font-size:17px;line-height:1.2}
.phone .bt{background:var(--navy);color:#fff;border-radius:14px;padding:3px 12px;font-size:11px;align-self:center}
.intro-note{background:var(--paper);border:3px solid var(--ink);border-radius:14px;padding:16px 20px;margin:-16px 0 32px;font-size:14px;box-shadow:6px 6px 0 var(--ink)}
.toc-title{font-family:var(--head);font-weight:700;font-size:18px;margin:0 0 10px}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.toc li{margin:0}
.toc a{display:block;text-decoration:none;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:100px;padding:4px 14px;font-family:var(--head);font-weight:500;font-size:14px}
.toc a:hover,.toc a:focus-visible{background:var(--yellow);outline:none}
.section-tag{display:inline-block;font-family:var(--mono);font-size:12.5px;color:var(--purple);background:var(--purple-soft);padding:3px 10px;border-radius:100px;margin:44px 0 10px}
h2.section-title{font-family:var(--head);font-weight:900;font-size:26px;line-height:1.25;margin:0 0 14px}
h3{font-family:var(--head);font-weight:700;font-size:18px;margin:26px 0 8px}
code{font-family:var(--mono);font-size:.86em;direction:ltr;unicode-bidi:isolate;background:var(--yellow-soft);padding:1px 6px;border-radius:5px}
table{width:100%;border-collapse:collapse;font-size:15px;background:#fff}
.scroll{overflow-x:auto;border:3px solid var(--ink);border-radius:14px;margin:12px 0 20px;box-shadow:6px 6px 0 var(--ink);background:#fff}
th,td{text-align:right;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-family:var(--head);font-weight:700;background:var(--yellow-soft);border-bottom:2px solid var(--ink)}
td.pts,th.pts{text-align:center;white-space:nowrap;font-weight:700}
.step{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:24px 24px 22px;margin:0 0 28px;box-shadow:6px 6px 0 var(--ink);display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px}
.step .num{width:44px;height:44px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);font-family:var(--head);font-weight:900;font-size:20px;display:flex;align-items:center;justify-content:center}
.step h3{font-size:20px;margin:6px 0 12px}
pre{direction:ltr;text-align:left;background:var(--navy);color:#EAEDF3;font-family:var(--mono);font-size:13px;line-height:1.6;padding:14px 16px;overflow-x:auto;margin:0;tab-size:4}
.codebox{margin:14px 0;border-radius:10px;overflow:hidden;background:var(--navy)}
.codebox.shut pre{max-height:9.6em;overflow:hidden}
.bar{display:flex;gap:8px;align-items:center;padding:7px 12px;border-bottom:1px solid rgba(255,255,255,.2)}
.bar .lines{color:#8FA3C8;font-family:var(--mono);font-size:12px;margin-inline-end:auto}
.bar button,.more{font-family:var(--head);font-size:13px;font-weight:500;background:transparent;color:#EAEDF3;border:1.5px solid #EAEDF3;border-radius:100px;padding:1px 12px;cursor:pointer}
.bar button:hover,.bar button:focus-visible,.more:hover,.more:focus-visible{background:var(--yellow);border-color:var(--yellow);color:var(--ink);outline:none}
.more{display:none;width:100%;border:0;border-top:1px solid rgba(255,255,255,.2);border-radius:0;padding:7px}
.codebox.shut .more{display:block}
.file{direction:ltr;text-align:left;font-family:var(--mono);font-size:12.5px;color:var(--soft);margin:12px 0 -8px}
.codebox.prompt{background:var(--purple-soft);border:2px solid var(--purple)}
.codebox.prompt pre{direction:rtl;text-align:right;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--body);font-size:14.5px;line-height:1.7;background:transparent;color:var(--ink)}
.codebox.prompt .bar{border-bottom:1px solid var(--purple)}
.codebox.prompt .bar .lines{color:var(--purple);font-family:var(--head);font-weight:700}
.codebox.prompt .bar button{color:var(--ink);border-color:var(--ink)}
.note{margin:14px 0;border-radius:10px;padding:12px 16px;display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:10px;font-size:14px;color:var(--navy)}
.note::before{grid-column:1;grid-row:1 / span 30;width:26px;height:26px;border-radius:50%;color:#fff;font-family:var(--head);font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center}
.note>*{grid-column:2;min-width:0}
.note>b:first-child{font-family:var(--head);font-weight:700;font-size:13px;display:block;margin-bottom:2px}
.note p{margin:0 0 8px}.note p:last-child,.note ul:last-child,.note ol:last-child{margin-bottom:0}
.note.why{background:var(--teal-soft)}.note.why::before{content:"?";background:var(--teal)}.note.why>b:first-child{color:var(--teal)}
.note.run{background:var(--blue-soft)}.note.run::before{content:"\2713";background:var(--blue)}.note.run>b:first-child{color:var(--blue)}
.note.warn{background:var(--coral-soft)}.note.warn::before{content:"!";background:var(--coral)}.note.warn>b:first-child{color:var(--coral)}
details{background:var(--yellow-soft);border:2px dashed var(--ink);border-radius:14px;padding:10px 18px;margin:12px 0;font-size:14px}
summary{cursor:pointer;font-family:var(--head);font-weight:700;font-size:15px}
details[open] summary{margin-bottom:8px}
.dia{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:18px 0}
.dia figure{margin:0;background:var(--paper);border:2px dashed var(--ink);border-radius:12px;padding:16px}
.dia figcaption{font-size:12.5px;color:var(--navy);margin-top:10px;text-align:center}
.box{border:2px solid var(--ink);border-radius:6px;padding:6px;font-size:13px;text-align:center;font-weight:600}
.v{display:flex;flex-direction:column;gap:6px}.h{display:flex;gap:6px}
.fa{background:var(--coral-soft)}.fb{background:var(--teal-soft)}.fw{background:var(--yellow-soft)}.fp{background:var(--purple-soft)}.fn{background:#fff}
.goal{display:flex;gap:18px;align-items:center;background:var(--paper);border:2px dashed var(--ink);border-radius:12px;padding:14px 16px;margin:0 0 14px}
.goal .phone{width:150px;flex:none;box-shadow:none;border-radius:16px;padding:8px 7px;font-size:10px}
.goal .phone .t{font-size:12px}
.goal-cap{font-size:13.5px;color:var(--navy)}
.goal-cap b{display:block;font-family:var(--head);font-weight:700;color:var(--ink);font-size:14px;margin-bottom:2px}
.ai{display:inline-flex;align-items:center;gap:6px;font-family:var(--head);font-weight:700;font-size:12.5px;padding:3px 12px 3px 10px;border-radius:100px;border:2px solid var(--ink);vertical-align:middle;white-space:nowrap}
.ai::before{width:18px;height:18px;border-radius:50%;color:#fff;font-size:12px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.ai.no{background:var(--coral-soft)}.ai.no::before{content:"\2715";background:var(--coral)}
.ai.ok{background:var(--teal-soft)}.ai.ok::before{content:"\2713";background:var(--teal)}
.ai.must{background:var(--purple-soft)}.ai.must::before{content:"\2605";background:var(--purple)}
.step .ai,.task>.ai{margin-bottom:6px}
.legend{background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);padding:6px 18px;margin:12px 0 20px}
.legend>div{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.legend>div:last-child{border-bottom:0}
.verify{background:var(--yellow-soft);border:3px solid var(--ink);border-radius:18px;padding:18px 22px 16px;margin:0 0 28px;box-shadow:6px 6px 0 var(--yellow)}
.verify .v-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.verify .v-title{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:700;font-size:18px}
.verify .v-title::before{content:"";width:26px;height:26px;border-radius:50%;background-color:var(--ink);flex:none;background-image:radial-gradient(circle at 50% 38%,var(--yellow) 0 22%,transparent 23%),radial-gradient(ellipse at 50% 92%,var(--yellow) 0 38%,transparent 39%)}
.verify p{font-size:15px}
.verify.inner{margin:16px 0 0;box-shadow:none;border-width:2px;padding:14px 16px 10px}
.verify.inner .v-title{font-size:16px}
.task{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:22px 24px;margin:0 0 28px;box-shadow:6px 6px 0 var(--ink)}
.task h3{font-size:20px;margin:0 0 10px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.pts-badge{background:var(--ink);color:var(--yellow);font-family:var(--head);font-weight:700;font-size:13px;padding:4px 14px;border-radius:100px;white-space:nowrap}
.task.adv{background:var(--purple-soft)}
.task.adv .pts-badge{background:var(--purple);color:#fff}
.success{font-weight:700;color:var(--teal);margin-top:8px}
.score{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:10px 22px;box-shadow:6px 6px 0 var(--ink)}
.score label{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer}
.score label:last-child{border-bottom:0}
.score input{width:20px;height:20px;accent-color:var(--teal);flex:none}
.score .p{margin-inline-start:auto;font-family:var(--head);font-weight:700}
.total{font-family:var(--head);font-weight:900;font-size:44px;line-height:1;margin-top:22px}
.total small{font-family:var(--body);font-size:15px;color:var(--soft);font-weight:400}
.done{margin-top:44px;background:var(--navy);border-radius:16px;padding:32px 28px;text-align:center}
.done .done-title{font-family:var(--head);color:var(--yellow);font-size:24px;font-weight:900;margin:0 0 8px}
.done p{color:#EAEDF3;font-size:15px;margin:0}
footer{text-align:center;font-size:13px;color:#8B8F87;margin-top:32px}
@media (max-width:620px){
h1{font-size:26px}.hero{padding:40px 16px 32px}
.hero-inner{grid-template-columns:minmax(0,1fr)}.phone{max-width:210px}
.step{padding:20px 18px 18px;box-shadow:4px 4px 0 var(--ink);grid-template-columns:minmax(0,1fr)}
.step h3{font-size:17px}.task{padding:18px;box-shadow:4px 4px 0 var(--ink)}
.goal{flex-direction:column;align-items:flex-start}
}
</style>
</head>
<body>
<!-- פתיח: שם הפרויקט, משפט אחד על מה בונים, ואיור של התוצאה הסופית. מופיע פעם אחת. -->
<header class="hero">
<div class="hero-inner">
<div>
<span class="badge">מדריך למתחילים · [הנושא] · [משך]</span>
<h1>[שם הפרויקט]<br>[מה לומדים בדרך]</h1>
<p>[שני משפטים: מה בונים, ומה לומדים בדרך.]</p>
</div>
<!-- איור התוצאה הסופית. בונים אותו מ-div פשוטים, לא מתמונה. מתאימים את התוכן לפרויקט. -->
<div class="phone" role="img" aria-label="[תיאור האיור במילים]">
<div class="t">[כותרת המסך]</div>
<div class="bt">[כפתור]</div>
</div>
</div>
</header>
<div class="wrap">
<!-- כפתורי קפיצה. תמיד מיד אחרי הפתיח, ממוספרים, עם הכותרת "חלקי המסמך". -->
<nav aria-labelledby="toc-title">
<div class="toc-title" id="toc-title">חלקי המסמך</div>
<ul class="toc">
<li><a href="#warm">1 - חזרה</a></li>
<li><a href="#theory">2 - הסבר</a></li>
<li><a href="#build">3 - הפרויקט</a></li>
<li><a href="#ext">4 - הרחבות</a></li>
<li><a href="#adv">5 - מסלול מתקדם</a></li>
<li><a href="#score">6 - הניקוד שלי</a></li>
</ul>
</nav>
<!-- טבלת ניקוד. כל טבלה עטופה ב-div.scroll. -->
<span class="section-tag">ניקוד</span>
<h2 class="section-title" id="points">איך צוברים נקודות</h2>
<div class="scroll"><table>
<tr><th>חלק</th><th>מה עושים</th><th class="pts">נקודות</th></tr>
<tr><td>חזרה</td><td>[...]</td><td class="pts">5</td></tr>
<tr><td>הפרויקט</td><td>[...]</td><td class="pts">30</td></tr>
<tr><td>אימות הבנה</td><td>[מספר] עצירות מול המורה, 5 לכל אחת</td><td class="pts">35</td></tr>
<tr><td>הרחבות</td><td>שלוש הרחבות: 6 על ביצוע ו-4 על אימות ההבנה, לכל אחת</td><td class="pts">30</td></tr>
<tr><td>מסלול מתקדם</td><td>[...]</td><td class="pts">בונוס</td></tr>
</table></div>
<!-- מקרא מודל שפה. מופיע פעם אחת, לפני חלק 1. -->
<div class="legend">
<div><span class="ai no">מודל שפה: אסור</span>עובדים לבד. מותר לשאול את המורה.</div>
<div><span class="ai ok">מודל שפה: מותר</span>אפשר להיעזר, ומתעדים ביומן השימוש.</div>
<div><span class="ai must">מודל שפה: חובה</span>המשימה היא העבודה עם המודל, ומתעדים ביומן.</div>
</div>
<!-- יומן שימוש. הנחיות לתלמיד, פעם אחת, מיד אחרי המקרא. -->
<h3>יומן שימוש</h3>
<p>פתחו קובץ Word בשם <code>AI-Journal-[Guide]-[Name].docx</code>. בכל פעם שנעזרתם במודל שפה הוסיפו טבלה אחת, וצרפו את הקובץ להגשה.</p>
<div class="scroll"><table>
<tr><th>שורה</th><th>מה כותבים</th></tr>
<tr><td>איפה במדריך</td><td>מספר הצעד או שם ההרחבה</td></tr>
<tr><td>איזה מודל</td><td>[...]</td></tr>
<tr><td>הפרומפט</td><td>מה שכתבתם, מילה במילה</td></tr>
<tr><td>קטע מהתשובה</td><td>העתקה של החלק החשוב. טקסט, לא צילום מסך</td></tr>
<tr><td>מה עשיתי עם התשובה</td><td>[...]</td></tr>
<tr><td>דבר אחד שלא הכרתי</td><td>והסבר שלו במילים שלכם</td></tr>
</table></div>
<!-- פתיחת חלק: תג "חלק N", תג מודל שפה, וכותרת עם id שתואם לכפתור הקפיצה. -->
<span class="section-tag">חלק 1</span> <span class="ai no">מודל שפה: אסור</span>
<h2 class="section-title" id="warm">חזרה: [מה מבצעים מהזיכרון]</h2>
<ol><li>[דרישה]</li></ol>
<!-- רמז מקופל. התלמיד פותח רק אם נתקע. -->
<details><summary>רמז: [על מה]</summary><p>[הרמז]</p></details>
<span class="section-tag">חלק 2</span>
<h2 class="section-title" id="theory">הסבר: [המושג]</h2>
<p>[הסבר פשוט עם דימוי מחיי היום-יום. מילה באנגלית בתוך משפט: <code>word</code>.]</p>
<!-- איור הסבר. בונים מקופסאות: box, v (טור), h (שורה). צבעי מילוי: fa, fb, fw, fp, fn. -->
<div class="dia">
<figure>
<div class="box v fw"><div class="box fn">[רכיב 1]</div><div class="box fn">[רכיב 2]</div></div>
<figcaption>[משפט אחד שמסביר את האיור]</figcaption>
</figure>
</div>
<span class="section-tag">חלק 3</span> <span class="ai no">מודל שפה: אסור</span>
<h2 class="section-title" id="build">הפרויקט: בונים צעד-צעד</h2>
<!-- צעד. מספר בעיגול צהוב, כותרת שמתחילה בפועל, ודבר אחד בלבד. -->
<div class="step"><div class="num">1</div><div>
<span class="ai no">מודל שפה: אסור</span>
<h3>[פועל + מה מוסיפים]</h3>
<!-- התוצאה הרצויה. רק בצעד שמשנה את מה שרואים על המסך. לפני ההוראות. -->
<div class="goal">
<div class="phone" role="img" aria-label="[תיאור]"><div class="t">[כותרת]</div><div class="bt">[כפתור]</div></div>
<div class="goal-cap"><b>התוצאה הרצויה בסוף הצעד</b>[מה רואים על המסך.]</div>
</div>
<p>[איפה בדיוק כותבים: אחרי איזו שורה ולפני איזו שורה.]</p>
<!-- קוד. תמיד עם שורת file מעליו. הסקריפט מוסיף כפתור העתקה, ומקפל קוד ארוך מ-8 שורות. -->
<div class="file">[path/to/file.ext]</div>
<div class="codebox"><pre>[code]</pre></div>
<!-- טורקיז: מסביר מה כתבנו ולמה זה עובד. -->
<div class="note why"><b>מה כתבנו פה</b><p>[משפט לכל דבר חדש.]</p></div>
<!-- כחול: מה מריצים ומה בדיוק צריך לראות. בסוף כל צעד. -->
<div class="note run"><b>הריצו ובדקו</b><p>[מה רואים אם הכול תקין.]</p></div>
<!-- אלמוגי: אזהרה או תקלה צפויה. בתקלה לא נותנים פתרון: שאלות מובילות ורמז מקופל. -->
<div class="note warn"><b>[התסמין שהתלמיד רואה]?</b>
<p>אל תמחקו קוד ואל תמשיכו הלאה. זו תקלה שכדאי להבין לבד:</p>
<ol><li>[שאלה מובילה]</li><li>[שאלה מובילה]</li></ol>
<details><summary>רמז</summary><p>[הרמז]</p></details>
</div>
</div></div>
<!-- עצירת אימות הבנה מול המורה. תמיד שתי משימות: הסבר של קוד, ודרישה חדשה. -->
<div class="verify">
<div class="v-head"><span class="v-title">אימות הבנה עם המורה: [נושא]</span><span class="pts-badge">5 נק'</span></div>
<p><b>הסבירו מה הקוד הזה עושה.</b> [קטע קצר, לפעמים עם טעות. מה יקרה כשהוא ירוץ, ולמה?]</p>
<div class="codebox"><pre>[code]</pre></div>
<p><b>דרישה חדשה.</b> [שינוי שמישהו ביקש. מה תשנו, ובאיזה קובץ?]</p>
</div>
<span class="section-tag">חלק 4</span> <span class="ai ok">מודל שפה: מותר</span>
<h2 class="section-title" id="ext">הרחבות</h2>
<!-- הרחבה. בלי צעד-צעד: דרישה, הגדרת הצלחה, רמז, ועצירת אימות פנימית. -->
<div class="task">
<span class="ai ok">מודל שפה: מותר</span>
<h3><span>הרחבה 1: [שם]</span><span class="pts-badge">10 נק'</span></h3>
<p>[הדרישה]</p>
<p class="success">הצלחה: [איך יודעים שזה עובד]</p>
<details><summary>רמז</summary><p>[הרמז]</p></details>
<div class="verify inner">
<div class="v-head"><span class="v-title">אימות הבנה עם המורה</span><span class="pts-badge">4 נק'</span></div>
<p>[שאלת "מה יקרה אם", או שינוי קטן שמבצעים מול המורה.]</p>
</div>
</div>
<!-- פרומפט מוצע לתלמיד. רקע סגול, טקסט מימין לשמאל. רק בשלבים של "מודל שפה: חובה". -->
<div class="codebox prompt"><pre>[פרומפט שהתלמיד מעתיק ומשלים]</pre></div>
<span class="section-tag">חלק 5</span>
<h2 class="section-title" id="adv">מסלול מתקדם</h2>
<!-- משימה מתקדמת. רקע סגול. בלי צעדים ובלי רמזים: יעד וקישור לתיעוד. -->
<div class="task adv">
<h3><span>מתקדם 1: [שם]</span><span class="pts-badge">+10</span></h3>
<p>[היעד]</p>
<p class="success">למורה: [שאלה שהתלמיד יצטרך לענות עליה]</p>
</div>
<span class="section-tag">חלק 6</span>
<h2 class="section-title" id="score">הניקוד שלי</h2>
<!-- data-p הוא מספר הנקודות, data-k הוא שם ייחודי. הסקריפט מסכם. -->
<div class="score" id="score-list">
<label><input type="checkbox" data-p="5" data-k="warm">חזרה<span class="p">5</span></label>
<label><input type="checkbox" data-p="30" data-k="base">הפרויקט<span class="p">30</span></label>
</div>
<div class="total" aria-live="polite"><span id="total">0</span> <small>נקודות</small></div>
<div class="done">
<div class="done-title">סיימתם</div>
<p>[איך מגישים]</p>
</div>
</div>
<script>
(function(){
var KEY='guide-[שם-קצר-באנגלית]';
var saved={};
try{saved=JSON.parse(localStorage.getItem(KEY)||'{}')||{};}catch(e){saved={};}
var boxes=document.querySelectorAll('#score-list input');
function calc(){
var t=0;
boxes.forEach(function(b){if(b.checked)t+=Number(b.dataset.p);saved[b.dataset.k]=b.checked;});
var out=document.getElementById('total');if(out)out.textContent=t;
try{localStorage.setItem(KEY,JSON.stringify(saved));}catch(e){}
}
boxes.forEach(function(b){b.checked=!!saved[b.dataset.k];b.addEventListener('change',calc);});
calc();
document.querySelectorAll('.codebox').forEach(function(box){
var pre=box.querySelector('pre');
var n=pre.textContent.split('\n').length;
var isPrompt=box.classList.contains('prompt');var long=n>8&&!isPrompt;
var bar=document.createElement('div');bar.className='bar';
var info=document.createElement('span');info.className='lines';info.textContent=isPrompt?'פרומפט להעתקה':n+' שורות';
bar.appendChild(info);
var more=null,tog=null;
function set(shut){
box.classList.toggle('shut',shut);
tog.textContent=shut?'פתיחת כל הקוד':'סגירה';
tog.setAttribute('aria-expanded',String(!shut));
}
if(long){
tog=document.createElement('button');tog.type='button';
tog.addEventListener('click',function(){set(!box.classList.contains('shut'));});
bar.appendChild(tog);
more=document.createElement('button');more.type='button';more.className='more';
more.textContent='יש עוד קוד, לחצו לפתיחה';
more.addEventListener('click',function(){set(false);});
}
var btn=document.createElement('button');btn.type='button';btn.textContent='העתקה';
btn.addEventListener('click',function(){
var text=pre.textContent;
function ok(){btn.textContent='הועתק';setTimeout(function(){btn.textContent='העתקה';},1500);}
function fallback(){
try{
var ta=document.createElement('textarea');ta.value=text;ta.style.position='absolute';ta.style.opacity='0';
document.body.appendChild(ta);ta.select();document.execCommand('copy');document.body.removeChild(ta);ok();
}catch(e){btn.textContent='סמנו והעתיקו ידנית';}
}
if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(text).then(ok,fallback);}else{fallback();}
});
bar.appendChild(btn);
box.insertBefore(bar,pre);
if(long){box.appendChild(more);set(true);}
});
})();
</script>
</body>
</html>