כלי אינטראקטיבי לשרטוטים גיאומטריים

מה זה?

יצרתי כלי ציור גיאומטרי דיגיטלי שפועל ישירות בדפדפן — נגיש מכל מקום כך שאין צורך להתקין שום דבר. הכלי מדמה דף משבצות ומאפשר ללבנות צורות מנקודות וקטעים בצורה מדויקת ונקייה.

ניתן להניח נקודות, לחבר ביניהן קטעים, להוסיף תוויות אורך, ולייצא את הציור כתמונה — הכל בכמה קליקים פשוטים.

הרעיון והרציונאל החינוכי

במהלך ההוראה שלי, פעמים רבות אני רוצה לשרטט מודלים להוראת היקפים ושטחים. אז נכון שדף משבצות פיזי עושה את העבודה, אבל רציתי מנוע דיגיטלי שייתן לי כמה יתרונות משמעותיים:

• דיוק — שרטוטים נקיים ויפים.
• תיקון ללא סרבול של מחיקה — פעולת Undo, גרירה של נקודות למקום חדש, מחיקת קטעים. מהיר, נקי וגם מעודד ניסוי וטעייה לתלמידים.
• תוויות ומידות — אפשר לכתוב על כל קטע את אורכו, ולהוסיף הערות חופשיות.
• ייצוא נקי — בלחיצה אחת הציור הופך לתמונה בשחור-לבן בלי רשת הרקע, מוכנה להדבקה במסמך, במבחן או במצגת.
• נגישות — עובד מכל דפדפן, טאבלט או טלפון, ישירות מהאתר. אין צורך בהורדה, רישום או תשלום.

תהליך הבנייה: שילוב של בינה מלאכותית והגדרת צרכים מדויקת.

הכלי הזה נולד מתוך שיח מעמיק ומתמשך עם מודל ה AI של Claude.

שלב 1 — פרומפט מעמיק ומפורט

רשמתי אוסף של צרכים ורצונות והפכתי אותם לפרומפט מקיף ומדויק שמגדיר בדיוק מה הכלי צריך לעשות. ירדתי לפרטי פרטים, איך נראות המשבצות, התנהגות של כל נקודה, מה קורה כשלוחצים על קטע, איך נראה הייצוא, ומה לעשות כדי לפתור בעיות קצה שצפיתי מראש. הפרומפט המדויק סיפק תוצאה קרובה מאד למה שרציתי.

שלב 2 — בדיקה, חשיבה נוספת ותיקונים ראשונים

הגרסה הראשונה עבדה אבל לא באופן מושלם. לאחר השתעשעות עם המנוע, זיהיתי כמה בעיות, ערכתי רשימה מסודרת שלהן והסברתי ל-Claude מה לא עובד טוב ואיך לפתור את הבעיות.

שלב 3 — הוספת כלים מתקדמים

לאחר שהמנוע פעל כמו שצריך, הרגשתי שנחוץ ארגז כלים ברור: כפתור בחירה, כפתורי יצירת אובייקטים של נקודה וקטע. כפתורי עריכה ואיפוס. בדקתי שוב לא הכל פעל. ושוב פינג פונג עם Claude של תיאור מדויק של התקלה ושידרוג הקוד.

שלב 4 — שיופים אחרונים

כשכבר הכל פעל והרגיש מושלם הגיע הזמן לגעת בדברים הקטנים והמעצבנים – למשל האות של הנקודה הופיעה תמיד מימין ומעל לנקודה – זה לא מצב טבעי בשירטוטים – האות צריכה להופיע בהתאם למיקום הנקודה בשירטוט הכללי – לפעמים מימן לעפמים משמאל – היה כאן אתגר מחשבתי של איך לתת למכונה להבין את המיקום הנכון – בסוף ביקשתי ממנה למקם את האות בכיוון ההפוך לווקטור הממוצע של הקטעים שיוצאים ממנה – והתוצאה הייתה מושלמת. שיפרתי גם את כלי הקטע שיהיה יותר אינטואיטיבי וייצור נקודה אוטומטית בלחיצה על שטח ריק. גרירה של תוויות טקסט, ייצוא אוטומטי ל clipboard, מיחזור אותיות במקרה שנמחקת נקודה ועוד.

שלב 5 — התאמה לוורדפרס להטמעה באתר

בסוף ביקשתי גרסה מותאמת לאתר שלי והתוצאה: קוד טקסט נקי שפשוט הדבקתי כאן בבלוק קוד.

מסקנות ותהליך הלמידה שלי

• בניית פרומפט טוב זו רוב העבודה – חשוב לדעת מה רוצים ולהפוך את הרצון לרשימה מסודרת של צרכים – זה מאפשר לבינה לתת תוצאה כמה שיותר קרובה לחזון.
• לא לצפות לתוצאה מושלמת בניסיון הראשון. חלק מהתהליך הוא דיאלוג: בודקים, מזהים בעיות, ואפילו נפתחים לרעיונות חדשים תוך כדי עבודה.
• ידע זה כח – אמנם לא צריך להיות מתכנת כדי לבנות כלי שימושי, אבל הבנה של המושגים השונים מאפשרת יצירה מדויקת. בתהליך הבנייה שילבתי ידע בתחומים מגוונים מעולם המתמטיקה, ההוראה, העיצוב הגרפי, תיכנות ובניית אתרים – זה איפשר לי לבקש מהבינה לעשות עבורי משימות מדויקות ולזרוע שינויים קטנים בחוויית השימוש הסופית של המנוע.

תקווה

הכלי הזה נבנה לשימושי האישי, אך אני מקווה שהוא יעזור גם למורים ומורות נוספים להנגיש את לימוד הגיאומטריה בצורה ויזואלית וידידותית, וכן שתלמידים ייהנו לבנות צורות ולגלות את הקשרים בין אורך, היקף ושטח בעצמם.

בהמשך אני מתכוון להפוך את הכלי הזה למנוע אינטראקטיבי שישאל שאלות ויאפשר לתת תשובה ולתת משוב ויהפוך אותו מכלי למידה פאסיבי לכלי אקטיבי שמאפשר תירגול עצמי לתלמידים ברמות שונות. כך שיש למה לצפות.