Update app.py

app.py

@@ -659,7 +659,45 @@ def finish_or_retire(pages_json, current_page, pid, orig_lev, action, session_st
 # ======================================================
 #  UI（タイトル表示を追加。それ以外は変更しない）
 #  ★追加：パスワード付きログCSVダウンロード
+#  ★追加：Group Radioの選択中ハイライトをJSで確実化
 # ======================================================
+
+# ★追加：Group Radio専用ハイライトJS（DOM差を吸収して確実に効かせる）
+radio_js = """
+() => {
+  const root = document.getElementById("group_radio");
+  if (!root) return;
+
+  const update = () => {
+    // labelを全て取得してクラスを外す（Gradioの構造差を吸収）
+    const labels = root.querySelectorAll("label");
+    labels.forEach(l => l.classList.remove("radio-selected"));
+
+    // checkedなinputを探して、その親labelをハイライト
+    const checked = root.querySelector('input[type="radio"]:checked');
+    if (checked) {
+      const label = checked.closest("label");
+      if (label) label.classList.add("radio-selected");
+    }
+  };
+
+  // 初期反映
+  update();
+
+  // 変更時反映
+  root.addEventListener("change", update);
+  root.addEventListener("click", update);
+
+  // Gradioが描画を差し替える場合に備えて軽い再同期（短時間だけ）
+  let n = 0;
+  const t = setInterval(() => {
+    update();
+    n += 1;
+    if (n >= 10) clearInterval(t); // 約2秒で停止
+  }, 200);
+};
+"""
+
 custom_css = """
 /* ===============================
    共通（両モード）
@@ -789,68 +827,33 @@ custom_css = """
 }
 
 /* ===============================
-   ★Radioの「選択中」を確実に見えるように（:has() 不要版）
+   ★追加：Group Radio の「選択中」を確実にハイライト（JSが付与するクラス）
    =============================== */
-
-/* まず選択肢の並びを「行っぽく」整える */
-.gradio-container .gr-radio label {
+#group_radio label {
   display: flex !important;
   align-items: center !important;
   gap: 10px !important;
   margin: 6px 0 !important;
+  padding: 8px 10px !important;
+  border-radius: 12px !important;
 }
 
-/* labelの中にある “文字部分” が span のケースが多いので、spanを箱にする */
-.gradio-container .gr-radio label > span {
-  display: block !important;
-  padding: 10px 12px !important;
-  border-radius: 10px !important;
-  border: 1px solid transparent !important;
-}
-
-/* checked のとき、inputの直後のspanをハイライト */
 @media (prefers-color-scheme: light) {
-  .gradio-container .gr-radio label > input[type="radio"]:checked + span {
+  #group_radio label.radio-selected {
     background: #eef2ff !important;
-    border-color: #c7d2fe !important;
-    color: #111 !important;
+    border: 2px solid #4f46e5 !important;
   }
 }
 
 @media (prefers-color-scheme: dark) {
-  .gradio-container .gr-radio label > input[type="radio"]:checked + span {
+  #group_radio label.radio-selected {
     background: #1f2937 !important;
-    border-color: #374151 !important;
-    color: #f0f0f0 !important;
-  }
-}
-
-/* もし span じゃなく div になってる版のGradioでも効くように追加（保険） */
-@media (prefers-color-scheme: light) {
-  .gradio-container .gr-radio label > input[type="radio"]:checked + div,
-  .gradio-container .gr-radio label > input[type="radio"]:checked + p {
-    background: #eef2ff !important;
-    border: 1px solid #c7d2fe !important;
-    border-radius: 10px !important;
-    padding: 10px 12px !important;
-    color: #111 !important;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .gradio-container .gr-radio label > input[type="radio"]:checked + div,
-  .gradio-container .gr-radio label > input[type="radio"]:checked + p {
-    background: #1f2937 !important;
-    border: 1px solid #374151 !important;
-    border-radius: 10px !important;
-    padding: 10px 12px !important;
-    color: #f0f0f0 !important;
+    border: 2px solid #60a5fa !important;
   }
 }
 """
 
-
-with gr.Blocks(css=custom_css) as demo:
+with gr.Blocks(css=custom_css, js=radio_js) as demo:
     gr.Markdown("# 📚 Reading Exercise")
 
     session_state = gr.State({"user_id": None, "level": None, "group": 2, "used_passages": []})
@@ -860,7 +863,8 @@ with gr.Blocks(css=custom_css) as demo:
     group_input = gr.Radio(
         choices=[("Group 1", 1), ("Group 2", 2)],
         label="実験グループを選択",
-        value=2
+        value=2,
+        elem_id="group_radio"  # ★追加：CSS/JSで確実に狙うため
     )
 
     level_input = gr.Dropdown(
@@ -985,3 +989,4 @@ with gr.Blocks(css=custom_css) as demo:
 
 demo.queue(max_size=64)
 demo.launch()
+