Update app.py

app.py

@@ -1,5 +1,6 @@
 # -*- coding: utf-8 -*-
-# صفحتان: إدخال بسيط + صفحة أسئلة مع Submit لكل سؤال
+# صفحتان ثابتتان + Submit لكل سؤال يعمل فعليًا + منع تغيّر أبعاد صفحة الإدخال
+
 import os, json, uuid, random, unicodedata
 from dataclasses import dataclass
 from pathlib import Path
@@ -235,9 +236,16 @@ body{direction:rtl; font-family:system-ui,'Cairo','IBM Plex Arabic',sans-serif;
 .gradio-container{max-width:980px;margin:0 auto;padding:12px 12px 40px;}
 h2.top{color:#eaeaf2;margin:6px 0 16px}
 
-.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:0 16px 38px rgba(0,0,0,.35)}
+/* صفحة الإدخال ثابتة الارتفاع ولا تتغير بعد الرفع */
+.input-panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;
+  box-shadow:0 16px 38px rgba(0,0,0,.35); min-height:360px; display:flex; flex-direction:column; gap:12px;}
 .small{opacity:.9;color:#d9dee8}
-.upload-like{border:2px dashed #3b3f52;background:#121318;border-radius:12px;padding:10px;color:#cfd5e3}
+
+/* منع لوحة المعاينة الخاصة بالملفات التي تغيّر التخطيط */
+[data-testid="file"] .file-preview, [data-testid="file"] .file-preview * { display:none !important; }
+[data-testid="file"] .grid-wrap { display:block !important; }
+.upload-like{border:2px dashed #3b3f52;background:#121318;border-radius:12px;padding:12px;color:#cfd5e3;min-height:90px}
+
 .button-primary>button{background:linear-gradient(180deg,var(--accent),var(--accent2));border:none;color:#0b0d10;font-weight:800}
 .button-primary>button:hover{filter:brightness(.95)}
 textarea{min-height:120px}
@@ -268,44 +276,50 @@ textarea{min-height:120px}
 .q-note.warn{color:#ffd1d6}
 """
 
-# ------------------ JS: ربط أزرار Submit بعد الرندر ------------------
+# ------------------ JS: ربط Submit بعد الرندر (مع Output مخفي لضمان التنفيذ) ------------------
 ATTACH_LISTENERS_JS = """
 () => {
-  const bind = (btn) => {
-    if (btn.dataset.bound === '1') return;
-    btn.dataset.bound = '1';
-    btn.addEventListener('click', (e) => {
-      const card   = e.target.closest('.q-card');
-      const qid    = card.getAttribute('data-qid');
-      const correct= card.getAttribute('data-correct');
-      const note   = document.getElementById('n_'+qid);
-      const badge  = document.getElementById('b_'+qid);
-      const chosen = card.querySelector('input[type="radio"]:checked');
-
-      if (!chosen) {
-        if (note){ note.textContent = 'اختر إجابة أولاً'; note.className='q-note warn'; }
-        return;
-      }
-      // نظّف ألوان سابقة
-      card.querySelectorAll('.opt').forEach(l => l.classList.remove('ok','err'));
-
-      const chosenLabel = chosen.closest('.opt');
-      if (chosen.value === correct) {
-        chosenLabel.classList.add('ok');
-        if (badge){ badge.hidden=false; badge.className='q-badge ok'; badge.textContent='Correct!'; }
-      } else {
-        chosenLabel.classList.add('err');
-        if (badge){ badge.hidden=false; badge.className='q-badge err'; badge.textContent='Incorrect.'; }
-      }
-      // أقفل السؤال
-      card.querySelectorAll('input[type="radio"]').forEach(i => i.disabled = true);
-      e.target.disabled = true;
-      if (note) note.textContent = '';
-    });
-  };
-
-  document.querySelectorAll('.q-card .q-submit').forEach(bind);
-  return [];
+  // تفويض عام على مستوى الوثيقة: يعمل حتى بعد أي إعادة إنشاء للعناصر
+  if (window.__q_submit_bound) { return 'already'; }
+  window.__q_submit_bound = true;
+
+  document.addEventListener('click', function(e){
+    if (!e.target || !e.target.classList) return;
+    if (!e.target.classList.contains('q-submit')) return;
+
+    const card   = e.target.closest('.q-card');
+    if (!card) return;
+
+    const qid     = card.getAttribute('data-qid');
+    const correct = card.getAttribute('data-correct');
+    const note    = document.getElementById('n_'+qid);
+    const badge   = document.getElementById('b_'+qid);
+    const chosen  = card.querySelector('input[type="radio"]:checked');
+
+    if (!chosen) {
+      if (note){ note.textContent = 'اختر إجابة أولاً'; note.className='q-note warn'; }
+      return;
+    }
+
+    // تنظيف ألوان سابقة
+    card.querySelectorAll('.opt').forEach(l => l.classList.remove('ok','err'));
+
+    const chosenLabel = chosen.closest('.opt');
+    if (chosen.value === correct) {
+      chosenLabel.classList.add('ok');
+      if (badge){ badge.hidden=false; badge.className='q-badge ok'; badge.textContent='Correct!'; }
+    } else {
+      chosenLabel.classList.add('err');
+      if (badge){ badge.hidden=false; badge.className='q-badge err'; badge.textContent='Incorrect.'; }
+    }
+
+    // قفل هذا السؤال
+    card.querySelectorAll('input[type="radio"]').forEach(i => i.disabled = true);
+    e.target.disabled = true;
+    if (note) note.textContent = '';
+  });
+
+  return 'wired';
 }
 """
 
@@ -313,8 +327,8 @@ ATTACH_LISTENERS_JS = """
 with gr.Blocks(title="Question Generator", css=CSS) as demo:
     gr.Markdown("<h2 class='top'>Question Generator</h2>")
 
-    # الصفحة 1
-    page1 = gr.Group(visible=True, elem_classes=["panel"])
+    # الصفحة 1: إدخال ثابت لا تتغير أبعاده
+    page1 = gr.Group(visible=True, elem_classes=["input-panel"])
     with page1:
         gr.Markdown("اختر **أحد** الخيارين ثم اضغط الزر.", elem_classes=["small"])
         text_area = gr.Textbox(lines=6, placeholder="ألصق نصك هنا...", label="لصق نص")
@@ -335,19 +349,19 @@ with gr.Blocks(title="Question Generator", css=CSS) as demo:
         btn_build = gr.Button("generate quistion", elem_classes=["button-primary"])
         warn = gr.Markdown("", elem_classes=["small"])
 
-    # الصفحة 2
+    # الصفحة 2: الأسئلة
     page2 = gr.Group(visible=False)
     with page2:
         quiz_html = gr.HTML("")
+        js_wired  = gr.Textbox(visible=False)   # Output مخفي لضمان تنفيذ JS
 
-    # بناء الامتحان + إظهار الصفحة 2
+    # بناء الامتحان + تبديل الصفحات + ربط الـJS
     btn_build.click(
         build_quiz,
         inputs=[text_area, file_comp, num_q, trocr_model, trocr_zoom],
         outputs=[quiz_html, page1, page2, warn]
-    ).then(  # بعد عرض الـHTML اربط أزرار Submit
-        None, inputs=None, outputs=[],
-        js=ATTACH_LISTENERS_JS
+    ).then(
+        None, inputs=None, outputs=[js_wired], js=ATTACH_LISTENERS_JS
     )
 
 if __name__ == "__main__":