Update app.py

app.py

@@ -659,42 +659,84 @@ def finish_or_retire(pages_json, current_page, pid, orig_lev, action, session_st
 # ======================================================
 #  UI（タイトル表示を追加。それ以外は変更しない）
 #  ★追加：パスワード付きログCSVダウンロード
-#  ★追加：Group Radioの選択中ハイライトをJSで確実化
+#  ★改善：Edgeでも確実に「Group選択中」が分かるようJSでstyle直当て
 # ======================================================
 
-# ★追加：Group Radio専用ハイライトJS（DOM差を吸収して確実に効かせる）
-radio_js = """
+# ★差し替え：Edgeでも確実に効くハイライトJS（style直書き）
+radio_js = r"""
 () => {
   const root = document.getElementById("group_radio");
   if (!root) return;
 
+  const getScheme = () => {
+    try {
+      return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark" : "light";
+    } catch (e) {
+      return "light";
+    }
+  };
+
+  const clear = (labels) => {
+    labels.forEach(l => {
+      l.classList.remove("radio-selected");
+      l.style.background = "";
+      l.style.border = "";
+      l.style.boxShadow = "";
+      l.style.borderRadius = "";
+      l.style.padding = "";
+    });
+  };
+
+  const apply = (label) => {
+    const scheme = getScheme();
+    label.classList.add("radio-selected");
+
+    if (scheme === "dark") {
+      label.style.background = "#1f2937";
+      label.style.border = "2px solid #60a5fa";
+      label.style.boxShadow = "0 0 0 1px rgba(255,255,255,0.06) inset";
+    } else {
+      label.style.background = "#eef2ff";
+      label.style.border = "2px solid #4f46e5";
+      label.style.boxShadow = "0 0 0 1px rgba(0,0,0,0.04) inset";
+    }
+    label.style.borderRadius = "12px";
+    label.style.padding = "10px 12px";
+  };
+
   const update = () => {
-    // labelを全て取得してクラスを外す（Gradioの構造差を吸収）
     const labels = root.querySelectorAll("label");
-    labels.forEach(l => l.classList.remove("radio-selected"));
+    if (!labels || labels.length === 0) return;
+
+    clear(labels);
 
-    // 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");
-    }
+    if (!checked) return;
+
+    const label = checked.closest("label");
+    if (!label) return;
+
+    apply(label);
   };
 
-  // 初期反映
   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秒で停止
+    if (n >= 15) clearInterval(t);
   }, 200);
+
+  try {
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    mq.addEventListener?.("change", update);
+    mq.addListener?.(update);
+  } catch (e) {}
 };
 """
 
@@ -826,30 +868,10 @@ custom_css = """
     }
 }
 
-/* ===============================
-   ★追加：Group Radio の「選択中」を確実にハイライト（JSが付与するクラス）
-   =============================== */
+/* ★追加：Radio行が細くてハイライトが目立たない問題の保険（Edge向け） */
 #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;
-}
-
-@media (prefers-color-scheme: light) {
-  #group_radio label.radio-selected {
-    background: #eef2ff !important;
-    border: 2px solid #4f46e5 !important;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  #group_radio label.radio-selected {
-    background: #1f2937 !important;
-    border: 2px solid #60a5fa !important;
-  }
+  width: 100% !important;
+  box-sizing: border-box !important;
 }
 """
 
@@ -864,7 +886,7 @@ with gr.Blocks(css=custom_css, js=radio_js) as demo:
         choices=[("Group 1", 1), ("Group 2", 2)],
         label="実験グループを選択",
         value=2,
-        elem_id="group_radio"  # ★追加：CSS/JSで確実に狙うため
+        elem_id="group_radio"  # ★追加：Edgeでも確実に狙うため
     )
 
     level_input = gr.Dropdown(
@@ -989,4 +1011,3 @@ with gr.Blocks(css=custom_css, js=radio_js) as demo:
 
 demo.queue(max_size=64)
 demo.launch()
-