دليل تركيب رحلة إتقان الضرب على موقعك

اختاري طريقة الحفظ

بدون أي إعداد تعمل اللعبة فورًا، ويُحفظ التقدم على جهاز الطفل فقط، وتصل النتائج للمعلمة عبر «رمز التقدّم». للحفظ المشترك عبر الإنترنت (طفل في البيت ومعلمة تتابع من جهاز آخر) فعّلي Firebase أو Supabase. يكفي واحد منهما.

1. ادخلي console.firebase.google.com وأنشئي مشروعًا جديدًا (Google Analytics غير مطلوب).
2. من القائمة: Build ← Firestore Database ← Create database، واختاري أقرب موقع لك.
3. افتحي تبويب Rules والصقي القواعد التالية ثم Publish:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /classes/{cls}/students/{sid} {
      allow read: if true;
      allow create, update: if request.resource.data.name is string
        && request.resource.data.name.size() <= 24
        && request.resource.data.key == sid;
      allow delete: if false;
    }
  }
}

4. من ⚙️ Project settings ← General ← Your apps اضغطي أيقونة الويب </>، سجّلي تطبيقًا، وانسخي القيم apiKey وauthDomain وprojectId.
5. افتحي index.html في أي محرر نصوص، وابحثي عن SITE_CONFIG في بداية الكود، وغيّري السطر هكذا:

firebase: { apiKey: "AIza...", authDomain: "اسم-مشروعك.firebaseapp.com", projectId: "اسم-مشروعك" },

مفتاح apiKey في Firebase ليس سريًا ووجوده في الصفحة طبيعي. الحماية تأتي من القواعد أعلاه.

1. أنشئي مشروعًا في supabase.com، ثم افتحي SQL Editor وشغّلي:

create table mj_students (
  key text primary key,
  cls text not null,
  data jsonb not null,
  updated_at timestamptz default now()
);
create index on mj_students (cls);
alter table mj_students enable row level security;
create policy "read"   on mj_students for select using (true);
create policy "insert" on mj_students for insert with check (true);
create policy "update" on mj_students for update using (true);

2. من Project Settings ← API انسخي Project URL وanon public key، وضعيهما في SITE_CONFIG:

supabase: { url: "https://xxxx.supabase.co", anonKey: "eyJhbGciOi..." },

ارفعي الصفحة على موقعك

موقع خاص أو استضافة عادية: ارفعي index.html في مجلد مثل /multiplication/، فتصبح اللعبة على yoursite.com/multiplication/.

WordPress: ارفعي الملف عبر مدير الملفات في الاستضافة (أو إضافة مثل File Manager) إلى مجلد داخل موقعك، ثم ضعي في أي صفحة كتلة «HTML مخصص» فيها كود التضمين أدناه. لا تلصقي اللعبة كاملة داخل الكتلة، فوردبريس يعدّل الأكواد الطويلة.

Hotmart أو Systeme أو منصات الصفحات: استضيفي الملف في مكان يقبل ملفات HTML (مثل Netlify Drop أو GitHub Pages مجانًا)، ثم ضعي كود التضمين في عنصر HTML داخل صفحتك.

كود التضمين (غيّري الرابط إلى رابط صفحتك):

<iframe src="https://yoursite.com/multiplication/"
  title="رحلة إتقان الضرب"
  style="width:100%;height:92vh;min-height:720px;border:0;border-radius:20px"
  allow="clipboard-write"></iframe>

الأفضل فتح اللعبة في صفحة كاملة مستقلة على الجوال والآيباد. التضمين مناسب لصفحة تعريفية فيها اللعبة.

جرّبيها قبل المشاركة

1. من تبويب «معلمة أو ولي أمر» أنشئي رمز فصل.
2. من جهاز آخر (الجوال مثلًا) ابدئي رحلة طالب بهذا الرمز وأجيبي عن سؤالين.
3. ارجعي إلى لوحة المتابعة: إذا ظهر الطالب وكُتب «البيانات محدّثة تلقائيًا» فالحفظ المشترك يعمل.

الخصوصية: لا تُحفظ إلا الأسماء الأولى والنتائج. أي شخص يعرف رمز الفصل يستطيع رؤية أسماء طلابه ونتائجهم، فشاركي الرمز مع الفصل فقط.

القراءة الصوتية تستخدم صوت الجهاز العربي. تعمل على أغلب أجهزة آيفون وأندرويد وكروم، وإذا لم يوجد صوت عربي يختفي زر الاستماع تلقائيًا ويُستبدل السؤال السمعي بسؤال بصري.

الطباعة: زر «اطبع التقرير» يفتح نافذة الطباعة مباشرة، ومنها يمكن الحفظ PDF.

الألوان: كل ألوان التصميم متغيرات في أول وسم <style> داخل الملف (مثل --sea و--saffron)، والوضع الليلي يعمل تلقائيًا حسب إعداد الجهاز.