From 2785c25dc99e78c2997cf2eaa0397d78d331a90a Mon Sep 17 00:00:00 2001
From: wonder <hezhaohui0807@163.com>
Date: Fri, 4 Sep 2026 12:20:43 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20code=5Freading/scenario=20=E9=A2=98?=
 =?UTF-8?q?=E8=A7=A3=E6=B8=B2=E6=9F=93=E4=BB=A3=E7=A0=81=E5=9D=97=E4=B8=8E?=
 =?UTF-8?q?=E5=AD=90=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 71 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 65 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index fba934e..4a7f4f6 100644
--- a/index.html
+++ b/index.html
@@ -171,6 +171,20 @@ body { font-family: -apple-system, 'Segoe UI', sans-serif; background: var(--bg)
 .answer-box .answer-text { color: var(--green); font-weight: 600; margin-bottom: 8px; }
 .answer-box .explanation { color: var(--text2); line-height: 1.7; }
 
+/* Code block (code_reading / scenario) */
+.code-block { margin-top: 12px; border: 1px solid var(--surface2); border-radius: 8px; overflow: hidden; }
+.code-lang { padding: 4px 12px; background: var(--surface2); color: var(--text2); font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; }
+.code-block pre { margin: 0; padding: 12px 14px; overflow-x: auto; background: #0b1220; }
+.code-block code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12.5px; line-height: 1.6; color: #e2e8f0; white-space: pre; }
+
+/* Sub-questions (code_reading / scenario) */
+.sub-questions { margin-top: 12px; border-top: 1px dashed var(--surface2); padding-top: 8px; }
+.sub-question { margin-bottom: 10px; }
+.sub-q-text { font-weight: 500; margin-bottom: 6px; }
+.sub-options { margin-top: 4px; }
+.sub-answer { margin-top: 6px; color: var(--green); font-weight: 600; font-size: 13px; }
+.sub-explain { color: var(--text2); font-size: 13px; line-height: 1.7; margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--surface2); }
+
 /* Tags */
 .q-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
 .q-tag { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: var(--surface2); color: var(--text2); }
@@ -512,6 +526,14 @@ function renderQuestionCard(q, i) {
 
   html += `</div>`;
 
+  // 代码块：code_reading / scenario
+  if ((q.type === 'code_reading' || q.type === 'scenario') && q.code) {
+    const lang = (q.language || '').trim();
+    html += `<div class="code-block">`
+      + (lang ? `<div class="code-lang"><span>${escapeHtml(lang)}</span></div>` : '')
+      + `<pre><code>${escapeHtml(q.code)}</code></pre></div>`;
+  }
+
   // Options for single_choice and multiple_choice
   if ((q.type === 'single_choice' || q.type === 'multiple_choice') && q.options) {
     const isMC = q.type === 'multiple_choice';
@@ -545,6 +567,35 @@ function renderQuestionCard(q, i) {
     html += `</div>`;
   }
 
+  // 子问题：code_reading / scenario
+  if ((q.type === 'code_reading' || q.type === 'scenario') && q.sub_questions?.length) {
+    html += `<div class="sub-questions">`;
+    q.sub_questions.forEach(sq => {
+      const subType = sq.type || 'short_answer';
+      html += `<div class="sub-question">
+        <div class="sub-q-text"><strong>子题 ${sq.index}.</strong> ${escapeHtml(sq.question)}</div>`;
+      if (subType === 'single_choice' && sq.options) {
+        html += `<div class="options sub-options">`;
+        for (const [letter, text] of Object.entries(sq.options)) {
+          let optClass = '';
+          if (revealed && sq.answer === letter) optClass = 'correct';
+          html += `<div class="option ${optClass}">
+            <div class="radio"></div>
+            <span><strong>${letter}.</strong> ${escapeHtml(text)}</span>
+          </div>`;
+        }
+        html += `</div>`;
+      }
+      if (revealed) {
+        const sa = Array.isArray(sq.answer) ? sq.answer.join(' / ') : (sq.answer ?? '');
+        html += `<div class="sub-answer">答案：${escapeHtml(sa)}</div>`;
+        if (sq.explanation) html += `<div class="sub-explain">💡 ${escapeHtml(sq.explanation)}</div>`;
+      }
+      html += `</div>`;
+    });
+    html += `</div>`;
+  }
+
   // Actions
   html += `<div class="actions">`;
   if (!revealed) {
@@ -556,12 +607,20 @@ function renderQuestionCard(q, i) {
   html += `</div>`;
 
   // Answer box
-  const answerText = Array.isArray(q.answer) ? q.answer.join(' / ') : String(q.answer);
-  html += `<div class="answer-box ${revealed ? 'show' : ''}" id="ans-${q.id}">
-    <div class="label">正确答案</div>
-    <div class="answer-text">${escapeHtml(answerText)}</div>
-    <div class="explanation">💡 ${escapeHtml(q.explanation || '')}</div>
-  </div>`;
+  const isSubQType = q.type === 'code_reading' || q.type === 'scenario';
+  let answerHtmlInner = '';
+  if (isSubQType) {
+    // 答案在各子题中已展示, 这里只放整体解析
+    answerHtmlInner += q.explanation
+      ? `<div class="explanation">💡 ${escapeHtml(q.explanation)}</div>`
+      : `<div class="explanation">💡 各子题答案见上方对应子题。</div>`;
+  } else {
+    const answerText = Array.isArray(q.answer) ? q.answer.join(' / ') : String(q.answer ?? '');
+    answerHtmlInner += `<div class="label">正确答案</div>
+      <div class="answer-text">${escapeHtml(answerText)}</div>
+      <div class="explanation">💡 ${escapeHtml(q.explanation || '')}</div>`;
+  }
+  html += `<div class="answer-box ${revealed ? 'show' : ''}" id="answer-${q.id}">${answerHtmlInner}</div>`;
 
   // Tags
   if (q.tags?.length) {