fix: full quiz flow via BRIDGE_JS, English only, buttons DOM-visible

app.py

@@ -302,65 +302,249 @@ def submit_answer(question, chunk, student_answer, correct, total, language):
 # ---------------------------------------------------------------------------
 
 BRIDGE_JS = """() => {
-    let lastStatus = '';
-    let quizRevealed = false;
-
-    function ensureStatusBar() {
-        if (document.getElementById('gradio-status-bar')) return;
-        const anchor = document.getElementById('quiz-card') || document.getElementById('app');
-        if (!anchor) return;
-        const bar = document.createElement('div');
-        bar.id = 'gradio-status-bar';
-        bar.style.cssText = 'display:none;max-width:760px;margin:8px auto 0;padding:12px 20px;border-radius:10px;font-size:.9rem;font-weight:500;font-family:Inter,system-ui,sans-serif;transition:all .3s ease;';
-        anchor.parentNode.insertBefore(bar, anchor);
+  // ── State ──────────────────────────────────────────────────────────────────
+  const S = {
+    correct: 0, total: 0, history: [],
+    currentQuestion: '',
+    quizRevealed: false,
+    lastStatus: '',
+    waitingQ: false, prevQuestion: '',
+    waitingFB: false, prevFeedback: '',
+  };
+  const $ = id => document.getElementById(id);
+
+  // ── Status bar ─────────────────────────────────────────────────────────────
+  function ensureStatusBar() {
+    if ($('gradio-status-bar')) return;
+    const anchor = $('quiz-card') || $('app');
+    if (!anchor) return;
+    const bar = document.createElement('div');
+    bar.id = 'gradio-status-bar';
+    bar.style.cssText = 'display:none;max-width:760px;margin:8px auto 0;padding:12px 20px;border-radius:10px;font-size:.9rem;font-weight:500;font-family:Inter,system-ui,sans-serif;transition:all .3s ease;';
+    anchor.parentNode.insertBefore(bar, anchor);
+  }
+
+  function applyStatus(text) {
+    if (text === S.lastStatus) return;
+    S.lastStatus = text;
+    ensureStatusBar();
+    const bar = $('gradio-status-bar');
+    if (!bar) return;
+    bar.textContent = text;
+    bar.style.display = 'block';
+    const isErr = text.includes('\\u26a0') || text.toLowerCase().includes('erreur');
+    const isOK  = text.includes('sections') || text.includes('extracted') || text.includes('extraites');
+    if (isErr) {
+      bar.style.cssText += ';background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#FCA5A5';
+    } else if (isOK) {
+      bar.style.cssText += ';background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);color:#6EE7B7';
+      if (!S.quizRevealed) { S.quizRevealed = true; revealQuiz(); }
+    } else {
+      bar.style.cssText += ';background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.3);color:#67E8F9';
     }
+  }
+
+  function revealQuiz() {
+    const qc = $('quiz-card');
+    if (qc) { qc.classList.remove('hidden'); setTimeout(() => qc.scrollIntoView({behavior:'smooth',block:'start'}), 400); }
+    const ur = document.querySelector('#upload-row');
+    if (ur) { ur.style.cssText += ';opacity:0;height:0;overflow:hidden;margin:0;padding:0;pointer-events:none;transition:all .4s ease'; }
+  }
+
+  // ── Helpers ────────────────────────────────────────────────────────────────
+  function setGradioTA(sel, val) {
+    const el = document.querySelector(sel);
+    if (!el) return false;
+    Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype,'value').set.call(el, val);
+    el.dispatchEvent(new Event('input',  {bubbles:true}));
+    el.dispatchEvent(new Event('change', {bubbles:true}));
+    return true;
+  }
+  function clickGradioBtn(sel) {
+    const btn = document.querySelector(sel + ' button');
+    if (btn) { btn.click(); return true; } return false;
+  }
+
+  // ── Score ring ─────────────────────────────────────────────────────────────
+  function updateScore() {
+    const arc   = $('score-arc');
+    const label = $('score-label');
+    if (!arc || !label) return;
+    const n = S.correct, d = S.total;
+    label.textContent = d === 0 ? '—' : n + '/' + d;
+    arc.style.strokeDashoffset = 138.2 * (1 - (d ? n/d : 0));
+    arc.style.stroke = d === 0 ? 'url(#scoreGrad)' : (n/d >= .7 ? '#10B981' : n/d >= .4 ? '#F59E0B' : '#EF4444');
+  }
+
+  // ── Feedback rendering ─────────────────────────────────────────────────────
+  function extractVerdict(t) {
+    const lo = t.toLowerCase(), lines = lo.split('\\n');
+    for (const l of lines) {
+      if (l.includes('verdict')) {
+        if (l.includes('partially')) return 'partial';
+        if (l.includes('incorrect'))  return 'incorrect';
+        if (l.includes('correct'))    return 'correct';
+      }
+    }
+    const h = lo.slice(0,200);
+    return h.includes('incorrect') ? 'incorrect' : h.includes('partially') ? 'partial' : h.includes('correct') ? 'correct' : 'unknown';
+  }
+
+  function showFeedback(text) {
+    const badge = $('verdict-badge'), fc = $('feedback-card'), body = $('feedback-body');
+    const verdict = extractVerdict(text);
+    if (badge) {
+      badge.className = 'verdict-badge ' + (verdict === 'unknown' ? '' : verdict);
+      badge.textContent = verdict === 'correct' ? '✓ Correct' : verdict === 'partial' ? '~ Partially Correct' : verdict === 'incorrect' ? '✗ Incorrect' : '— Unknown';
+    }
+    if (body) {
+      const labels = ['','Verdict','What was good','What was missing','Model answer'];
+      const sections = [], re = /(\\d+)\\.\\s*([^:\\n]*)[:：]?\\s*([\\s\\S]*?)(?=\\n\\d+\\.|$)/g;
+      let m;
+      while ((m = re.exec(text)) !== null) sections.push({num:+m[1], body:m[3].trim()});
+      body.innerHTML = sections.length >= 2
+        ? sections.map(s => '<div class="section"><span class="section-num">'+(labels[s.num]||'Part '+s.num)+'</span><div class="section-content">'+s.body.replace(/\\n/g,'<br>')+'</div></div>').join('')
+        : '<div class="feedback-raw">'+text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')+'</div>';
+    }
+    if (fc) { fc.classList.remove('hidden'); fc.classList.add('fade-in-up'); setTimeout(() => fc.scrollIntoView({behavior:'smooth',block:'nearest'}),100); }
+    return verdict;
+  }
+
+  // ── Question display ───────────────────────────────────────────────────────
+  function showQuestion(text) {
+    S.currentQuestion = text; S.waitingQ = false;
+    const es = $('empty-state'), qa = $('question-area'), qt = $('q-text'), ql = $('q-loading');
+    const eb = $('end-btn'), fc = $('feedback-card'), ai = $('answer-input'), cc = $('char-count');
+    const sb = $('submit-btn'), nq = $('new-q-btn');
+    if (es) es.classList.add('hidden');
+    if (qa) qa.classList.remove('hidden');
+    if (eb) eb.classList.remove('hidden');
+    if (ql) ql.classList.add('hidden');
+    if (qt) qt.textContent = text;
+    if (fc) fc.classList.add('hidden');
+    if (ai) { ai.value = ''; ai.disabled = false; }
+    if (cc) cc.textContent = '0 chars';
+    if (sb) sb.disabled = true;
+    if (nq) nq.disabled = false;
+  }
+
+  // ── Trigger actions via hidden Gradio components ───────────────────────────
+  function fetchQuestion() {
+    if (S.waitingQ) return;
+    S.waitingQ = true;
+    S.prevQuestion = document.querySelector('#hidden-question-output textarea')?.value || '';
+    const ql = $('q-loading'), qm = $('q-loading-msg'), nq = $('new-q-btn'), fc = $('feedback-card');
+    const es = $('empty-state'), qa = $('question-area'), eb = $('end-btn');
+    if (ql) ql.classList.remove('hidden');
+    if (qm) qm.textContent = S.total === 0 ? 'Generating question (model loading, ~30s first time)…' : 'Generating question…';
+    if (nq) nq.disabled = true;
+    if (fc) fc.classList.add('hidden');
+    if (es) es.classList.add('hidden');
+    if (qa) qa.classList.remove('hidden');
+    if (eb) eb.classList.remove('hidden');
+    clickGradioBtn('#hidden-question-btn');
+  }
+
+  function doSubmit() {
+    const ai = $('answer-input');
+    const answer = ai?.value?.trim();
+    if (!answer || !S.currentQuestion || S.waitingFB) return;
+    S.waitingFB = true;
+    S.prevFeedback = document.querySelector('#hidden-feedback-output textarea')?.value || '';
+    const sb = $('submit-btn'), st = $('submit-btn-text'), ss = $('submit-spinner'), nq = $('new-q-btn');
+    if (sb) sb.disabled = true;
+    if (st) st.textContent = 'Evaluating…';
+    if (ss) ss.classList.remove('hidden');
+    if (nq) nq.disabled = true;
+    setGradioTA('#hidden-answer-input textarea', answer);
+    setTimeout(() => clickGradioBtn('#hidden-submit-btn'), 200);
+  }
+
+  // ── Modal ──────────────────────────────────────────────────────────────────
+  function showModal() {
+    const modal = $('modal');
+    if (!modal) return;
+    const pct = S.total > 0 ? Math.round(S.correct/S.total*100) : 0;
+    const msb = $('modal-score-big'), msl = $('modal-score-label'), mm = $('modal-message'), mh = $('modal-history');
+    if (msb) msb.textContent = S.correct+'/'+S.total;
+    if (msl) msl.textContent = S.total === 1 ? 'question answered' : 'questions answered';
+    if (mm) mm.textContent = pct>=90 ? "Outstanding! You've mastered this material. \\uD83C\\uDF1F"
+      : pct>=70 ? "Great work — solid grasp of the content. \\uD83D\\uDCAA"
+      : pct>=50 ? "Good start! Keep practising the tricky sections. \\uD83D\\uDCD6"
+      : "Keep going — each question makes you stronger. \\uD83D\\uDD25";
+    if (mh && S.history.length > 0) {
+      mh.classList.remove('hidden');
+      mh.innerHTML = S.history.slice(-8).map(h => {
+        const vc = h.verdict==='correct'?'correct':h.verdict==='partial'?'partial':'incorrect';
+        return '<div class="modal-history-item"><span class="hist-badge '+vc+'">'+(vc==='correct'?'✓':vc==='partial'?'~':'✗')+'</span><span class="hist-q">'+h.question+'</span></div>';
+      }).join('');
+    }
+    modal.classList.remove('hidden');
+  }
+
+  // ── Wire HTML buttons ──────────────────────────────────────────────────────
+  function wireButtons() {
+    const pairs = [
+      ['start-btn',   () => fetchQuestion()],
+      ['new-q-btn',   () => fetchQuestion()],
+      ['submit-btn',  () => doSubmit()],
+      ['end-btn',     () => { if (S.total===0) { const m=$('modal'); if(m) m.classList.remove('hidden'); } else showModal(); }],
+      ['modal-close', () => {
+        const modal=$('modal'); if(modal) modal.classList.add('hidden');
+        S.correct=0; S.total=0; S.history=[]; S.currentQuestion='';
+        updateScore();
+        const ai=$('answer-input'), cc=$('char-count'), sb=$('submit-btn'), fc=$('feedback-card');
+        const es=$('empty-state'), qa=$('question-area'), eb=$('end-btn'), qc=$('quiz-card');
+        if(ai){ai.value='';} if(cc) cc.textContent='0 chars'; if(sb) sb.disabled=true;
+        if(fc) fc.classList.add('hidden'); if(es) es.classList.remove('hidden');
+        if(qa) qa.classList.add('hidden'); if(eb) eb.classList.add('hidden');
+        if(qc) qc.scrollIntoView({behavior:'smooth',block:'start'});
+      }],
+    ];
+    for (const [id, fn] of pairs) {
+      const el = $(id);
+      if (el && !el._pp) { el._pp = true; el.addEventListener('click', fn); }
+    }
+    const modal = $('modal');
+    if (modal && !modal._pp) { modal._pp = true; modal.addEventListener('click', e => { if(e.target===modal) modal.classList.add('hidden'); }); }
+    const ai = $('answer-input'), sb = $('submit-btn'), cc = $('char-count');
+    if (ai && !ai._pp) {
+      ai._pp = true;
+      ai.addEventListener('input', () => {
+        if(cc) cc.textContent = ai.value.length+' chars';
+        if(sb) sb.disabled = ai.value.trim().length===0 || !S.currentQuestion;
+      });
+    }
+  }
+
+  // ── Main polling loop ──────────────────────────────────────────────────────
+  setInterval(function() {
+    wireButtons();
 
-    function applyStatus(text) {
-        if (text === lastStatus) return;
-        lastStatus = text;
-        ensureStatusBar();
-        const bar = document.getElementById('gradio-status-bar');
-        if (!bar) return;
-        bar.textContent = text;
-        bar.style.display = 'block';
-        const isError   = text.includes('\\u26a0') || text.toLowerCase().includes('erreur');
-        const isSuccess = text.includes('sections') || text.includes('extraites') || text.includes('extracted') || text.includes('\\ud83d\\udcda');
-        if (isError) {
-            bar.style.background = 'rgba(239,68,68,0.12)';
-            bar.style.border = '1px solid rgba(239,68,68,0.3)';
-            bar.style.color = '#FCA5A5';
-        } else if (isSuccess) {
-            bar.style.background = 'rgba(16,185,129,0.12)';
-            bar.style.border = '1px solid rgba(16,185,129,0.3)';
-            bar.style.color = '#6EE7B7';
-            if (!quizRevealed) {
-                quizRevealed = true;
-                const quizCard = document.getElementById('quiz-card');
-                if (quizCard) {
-                    quizCard.classList.remove('hidden');
-                    setTimeout(() => quizCard.scrollIntoView({ behavior: 'smooth', block: 'start' }), 400);
-                }
-                const uploadRow = document.getElementById('upload-row');
-                if (uploadRow) {
-                    uploadRow.style.opacity = '0.5';
-                    uploadRow.style.transform = 'scale(0.97)';
-                    uploadRow.style.transition = 'all .4s ease';
-                    uploadRow.style.pointerEvents = 'none';
-                }
-            }
-        } else {
-            bar.style.background = 'rgba(6,182,212,0.12)';
-            bar.style.border = '1px solid rgba(6,182,212,0.3)';
-            bar.style.color = '#67E8F9';
-        }
+    const statusEl = document.querySelector('#hidden-status-output textarea');
+    if (statusEl && statusEl.value) applyStatus(statusEl.value);
+
+    if (S.waitingQ) {
+      const qEl = document.querySelector('#hidden-question-output textarea');
+      if (qEl && qEl.value && qEl.value !== S.prevQuestion) showQuestion(qEl.value);
     }
 
-    // Poll every 300 ms — Svelte sets textarea.value as a JS property
-    // which characterData MutationObserver does not catch.
-    setInterval(function() {
-        const el = document.querySelector('#hidden-status-output textarea');
-        if (el && el.value) applyStatus(el.value);
-    }, 300);
+    if (S.waitingFB) {
+      const fbEl = document.querySelector('#hidden-feedback-output textarea');
+      if (fbEl && fbEl.value && fbEl.value !== S.prevFeedback) {
+        const text = fbEl.value;
+        S.prevFeedback = text; S.waitingFB = false;
+        const sb=$('submit-btn'), st=$('submit-btn-text'), ss=$('submit-spinner'), nq=$('new-q-btn');
+        if(st) st.textContent='Submit Answer'; if(ss) ss.classList.add('hidden');
+        if(sb) sb.disabled=false; if(nq) nq.disabled=false;
+        const verdict = showFeedback(text);
+        S.total++;
+        if (verdict==='correct') S.correct++;
+        S.history.push({question:S.currentQuestion, verdict});
+        updateScore();
+      }
+    }
+  }, 300);
 }"""
 
 print("✅ Starting Gradio app...")
@@ -385,10 +569,10 @@ with gr.Blocks(title="PaperProf", css=CSS) as demo:
 
     with gr.Row(elem_id="hidden-row-question"):
         question_box = gr.Textbox(label="❓ Question", interactive=False, lines=3, scale=3, elem_id="hidden-question-output")
-        new_q_btn    = gr.Button("New Question", variant="secondary", scale=1, visible=False, elem_id="hidden-question-btn")
+        new_q_btn    = gr.Button("New Question", variant="secondary", scale=1, elem_id="hidden-question-btn")
 
-    answer_box   = gr.Textbox(label="✏️ Your Answer", lines=4, placeholder="Write your answer here…", visible=False, elem_id="hidden-answer-input")
-    submit_btn   = gr.Button("Submit Answer", variant="primary", visible=False, elem_id="hidden-submit-btn")
+    answer_box   = gr.Textbox(label="✏️ Your Answer", lines=4, placeholder="Write your answer here…", elem_id="hidden-answer-input")
+    submit_btn   = gr.Button("Submit Answer", variant="primary", elem_id="hidden-submit-btn")
     feedback_box = gr.Textbox(label="💬 Feedback", interactive=False, lines=7, elem_id="hidden-feedback-output")
 
     # Traduction UI quand on change la langue

ui/index.html

@@ -342,25 +342,6 @@
 
       <!-- Controls row -->
       <div class="controls-row">
-        <!-- Language toggle -->
-        <div>
-          <div class="diff-label">Language</div>
-          <div class="toggle-group" id="lang-toggle">
-            <button class="pill active" data-val="English">EN</button>
-            <button class="pill"        data-val="Français">FR</button>
-          </div>
-        </div>
-
-        <!-- Difficulty toggle -->
-        <div>
-          <div class="diff-label">Difficulty</div>
-          <div class="toggle-group" id="diff-toggle">
-            <button class="pill"        data-val="Easy">Easy</button>
-            <button class="pill active" data-val="Normal">Normal</button>
-            <button class="pill"        data-val="Hard">Hard</button>
-          </div>
-        </div>
-
         <!-- Score ring -->
         <div class="score-wrap" style="margin-left:auto" title="Score">
           <svg class="score-ring" viewBox="0 0 56 56">
@@ -452,27 +433,14 @@
   </div>
 
   <script>
-  // ───────────────────────────────────────────────────────────────────────────
-  // State
-  // ───────────────────────────────────────────────────────────────────────────
-  const S = {
-    chunks: [],
-    currentChunk: '',
-    currentQuestion: '',
-    correct: 0,
-    total: 0,
-    language: 'English',
-    difficulty: 'Normal',
-    history: [],
-    loaded: false,
-  };
-
-  // ───────────────────────────────────────────────────────────────────────────
-  // DOM refs
-  // ───────────────────────────────────────────────────────────────────────────
-  const $ = id => document.getElementById(id);
-
-  const quizCard     = $('quiz-card');
+  // Script intentionally left minimal — all quiz logic lives in BRIDGE_JS
+  // injected via demo.load(js=BRIDGE_JS) which actually executes.
+  // innerHTML-injected <script> tags are never run by browsers.
+
+  // (all logic removed — lives in BRIDGE_JS)
+  // placeholder to keep closing tag:
+  void 0;
+  /*
   const emptyState   = $('empty-state');
   const questionArea = $('question-area');
   const qText        = $('q-text');
@@ -830,4 +798,5 @@
     }
     draw();
   })();
+  */
   </script>