משחק אישי ללימוד שפה

בנה לי משחק אישי ללימוד שפה, שאני אשחק בו בטלפון.

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

לפני שאתה כותב שורת קוד, שאל אותי 3-4 שאלות קצרות ורק אז תתחיל לבנות: מה הרמה שלי היום בשפה, אילו מילים או משפטים אני כבר מכיר/ה, מה הכי דחוף לי לדעת (מסעדות, קניות, כיוונים, שיחת חולין, חירום), ואם יש משהו ספציפי לחיים שלי שכדאי שייכנס לתוכן. תשתמש בתשובות שלי כדי לבחור את המילים והמשפטים בפועל — אני רוצה תוכן שמתאים לחיים שלי ולא רשימה גנרית מספר לימוד, ואל תבזבז תחנות שלמות על מה שאני כבר יודע/ת.

מה שאני רוצה זה קובץ HTML אחד, עצמאי לגמרי — כל ה-CSS וה-JavaScript בתוכו, בלי ספריות חיצוניות ובלי שרת. שאפתח אותו בדאבל-קליק וזה פשוט יעבוד, גם בלי אינטרנט. שמור את ההתקדמות ב-localStorage כך שהיא תשרוד סגירה של הדפדפן.

בתוך הקובץ אני רוצה מסלול למידה של שלושה פרקים, שלוש תחנות בכל אחד: פרק 1 — מתחילים לקרוא, פרק 2 — שפה שימושית ליום-יום, פרק 3 — מתחילים לדבר. המסך הראשי מציג פרק אחד בכל פעם, עם ניווט בין פרקים, סרגל התקדמות ורשימת התחנות, ולכל תחנה סטטוס ברור: הושלמה, פתוחה או נעולה. תחנה נפתחת כשהקודמת הושלמה בציון 75% ומעלה, ותחנה 1 פתוחה תמיד. אתה לא חייב תוכן מלא לכל תשע התחנות — עדיף שש או שבע תחנות עם תוכן אמיתי וטוב, ושתיים נעולות עם משפט שמסביר מה יהיה שם, מאשר תשע תחנות רדודות.

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

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

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

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

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

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

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

יש כמה דברים שאני מבקש/ת שתתייחס אליהם כדרישות ולא כהמלצות, כי נשרפים עליהם בפועל:

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

אל תעבור לשאלה הבאה לבד. התשובה הנכונה וההסבר נשארים על המסך עד שאני לוחץ/ת "המשך". מעבר אוטומטי אחרי שנייה לא מספיק כדי לקרוא.

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

מאגר קטן אומר סיבוב קצר. אם לקטגוריה יש חמישה פריטים, אל תייצר 12 שאלות עם חזרות — תקצר את הסיבוב.

בטקסט שמערבב שפות, סימני פיסוק קופצים לצד הלא נכון. השתמש ב-unicode-bidi: isolate על כל קטע בשפה הזרה.

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

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

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

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

תתחיל עכשיו — קודם השאלות, אחר כך הבנייה.