Add OE/MC tabs and place MC order SVG above benchmark table

index.html

@@ -207,6 +207,7 @@
             </div>
             <section class="cross-judge-card" aria-label="Cross-judge model ranking comparison">
               <div class="cross-toolbar">
+                <div class="toggle-group task" id="task-toggle"></div>
                 <div class="toggle-group" id="judge-toggle"></div>
                 <div class="toggle-group metric" id="metric-toggle"></div>
               </div>
@@ -214,11 +215,17 @@
               <div class="results-panel" id="results-table"></div>
             </section>
           </div>
-          <figure class="paper-figure compact benchmark-figure">
-            <img src="./assets/wildtom_benchmark_comparison.png" alt="Benchmark capability coverage comparison including WildToM-Bench">
-            <figcaption>Benchmark capability coverage across representative ToM datasets.</figcaption>
-            <p class="benchmark-footnote">Rank consistency: Spearman &rho; = 0.867, p &lt; 0.01.</p>
-          </figure>
+          <div class="analysis-side">
+            <figure class="paper-figure compact mc-figure">
+              <img src="./assets/mc_order_gap_paper_style_v3.svg" alt="Mean MC accuracy by reasoning order across mental-state dimensions">
+              <figcaption>Mean MC accuracy by reasoning order across dimensions.</figcaption>
+            </figure>
+            <figure class="paper-figure compact benchmark-figure">
+              <img src="./assets/wildtom_benchmark_comparison.png" alt="Benchmark capability coverage comparison including WildToM-Bench">
+              <figcaption>Benchmark capability coverage across representative ToM datasets.</figcaption>
+              <p class="benchmark-footnote">Rank consistency: Spearman &rho; = 0.867, p &lt; 0.01.</p>
+            </figure>
+          </div>
         </div>
       </div>
     </section>

script.js

@@ -194,9 +194,22 @@ const judgeResults = {
   }
 };
 
+const mcResults = [
+  { model: "WildToM-Reasoner", mcAcc: 72.7, isOurs: true },
+  { model: "Qwen3-VL", mcAcc: 62.1 },
+  { model: "Qwen3-Omni", mcAcc: 61.8 },
+  { model: "GPT-4o-mini", mcAcc: 57.2 },
+  { model: "Emotion-Qwen", mcAcc: 54.2 },
+  { model: "GLM-4.6V", mcAcc: 51.2 },
+  { model: "MiniCPM-V-4.5", mcAcc: 46.8 },
+  { model: "AffectGPT", mcAcc: 35.9 },
+  { model: "Video-LLaVA", mcAcc: 25.8 }
+];
+
 const filterRoot = document.getElementById("showcase-filters");
 const showcaseRoot = document.getElementById("showcase-browser");
 const resultsRoot = document.getElementById("results-table");
+const taskToggleRoot = document.getElementById("task-toggle");
 const judgeToggleRoot = document.getElementById("judge-toggle");
 const metricToggleRoot = document.getElementById("metric-toggle");
 const resultsCaptionRoot = document.getElementById("results-caption");
@@ -205,6 +218,7 @@ const carouselState = {
   activeIndex: 0
 };
 const crossJudgeState = {
+  activeTask: "oe",
   activeJudge: "gpt4o",
   activeMetric: "oeAcc"
 };
@@ -336,53 +350,74 @@ function getDeltaClass(delta) {
   return delta > 0 ? "positive" : "negative";
 }
 
-function renderJudgeControls() {
-  if (!judgeToggleRoot || !metricToggleRoot) {
+function renderControls() {
+  if (!taskToggleRoot || !judgeToggleRoot || !metricToggleRoot) {
     return;
   }
 
-  const judgeItems = [
-    { key: "gpt4o", label: "GPT-4o (full set)" },
-    { key: "gemini", label: "Gemini-2.5-Flash (N=40)" }
+  const taskItems = [
+    { key: "oe", label: "OE" },
+    { key: "mc", label: "MC" }
   ];
-  judgeToggleRoot.innerHTML = "";
-  judgeItems.forEach((item) => {
+  taskToggleRoot.innerHTML = "";
+  taskItems.forEach((item) => {
     const button = document.createElement("button");
     button.type = "button";
-    button.className = `toggle-btn${item.key === crossJudgeState.activeJudge ? " active" : ""}`;
-    button.textContent = item.label;
+    button.className = `toggle-btn${item.key === crossJudgeState.activeTask ? " active" : ""}`;
+    button.textContent = item.label === "MC" ? "MC (main benchmark)" : "OE (cross-judge)";
     button.addEventListener("click", () => {
-      renderCrossJudgeResults(item.key, crossJudgeState.activeMetric);
+      renderResultsPanel(item.key, crossJudgeState.activeJudge, crossJudgeState.activeMetric);
     });
-    judgeToggleRoot.appendChild(button);
+    taskToggleRoot.appendChild(button);
   });
 
-  const metricItems = [
-    { key: "oeAcc", label: "OE_acc" },
-    { key: "oeScr", label: "OE_scr" }
-  ];
+  judgeToggleRoot.innerHTML = "";
   metricToggleRoot.innerHTML = "";
-  metricItems.forEach((item) => {
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = `toggle-btn${item.key === crossJudgeState.activeMetric ? " active" : ""}`;
-    button.textContent = item.label;
-    button.addEventListener("click", () => {
-      renderCrossJudgeResults(crossJudgeState.activeJudge, item.key);
+
+  if (crossJudgeState.activeTask === "oe") {
+    judgeToggleRoot.classList.remove("is-hidden");
+
+    const judgeItems = [
+      { key: "gpt4o", label: "GPT-4o (full set)" },
+      { key: "gemini", label: "Gemini-2.5-Flash (N=40)" }
+    ];
+    judgeItems.forEach((item) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = `toggle-btn${item.key === crossJudgeState.activeJudge ? " active" : ""}`;
+      button.textContent = item.label;
+      button.addEventListener("click", () => {
+        renderResultsPanel(crossJudgeState.activeTask, item.key, crossJudgeState.activeMetric);
+      });
+      judgeToggleRoot.appendChild(button);
     });
-    metricToggleRoot.appendChild(button);
-  });
-}
 
-function renderCrossJudgeResults(activeJudge = crossJudgeState.activeJudge, activeMetric = crossJudgeState.activeMetric) {
-  if (!resultsRoot) {
+    const metricItems = [
+      { key: "oeAcc", label: "OE_acc" },
+      { key: "oeScr", label: "OE_scr" }
+    ];
+    metricItems.forEach((item) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = `toggle-btn${item.key === crossJudgeState.activeMetric ? " active" : ""}`;
+      button.textContent = item.label;
+      button.addEventListener("click", () => {
+        renderResultsPanel(crossJudgeState.activeTask, crossJudgeState.activeJudge, item.key);
+      });
+      metricToggleRoot.appendChild(button);
+    });
     return;
   }
 
-  crossJudgeState.activeJudge = activeJudge;
-  crossJudgeState.activeMetric = activeMetric;
-  renderJudgeControls();
+  judgeToggleRoot.classList.add("is-hidden");
+  const mcButton = document.createElement("button");
+  mcButton.type = "button";
+  mcButton.className = "toggle-btn active";
+  mcButton.textContent = "MC_acc";
+  metricToggleRoot.appendChild(mcButton);
+}
 
+function renderOeResults(activeJudge, activeMetric) {
   const otherJudge = getOtherJudge(activeJudge);
   const currentRows = [...judgeResults[activeJudge].rows].sort((a, b) => {
     const valueDiff = getMetricValue(b, activeMetric) - getMetricValue(a, activeMetric);
@@ -424,5 +459,48 @@ function renderCrossJudgeResults(activeJudge = crossJudgeState.activeJudge, acti
   });
 }
 
-renderCrossJudgeResults("gpt4o", "oeAcc");
+function renderMcResults() {
+  const ranked = [...mcResults].sort((a, b) => b.mcAcc - a.mcAcc);
+  if (resultsCaptionRoot) {
+    resultsCaptionRoot.textContent = "Main benchmark (MC) · Sorted by MC_acc";
+  }
+
+  resultsRoot.innerHTML = "";
+  ranked.forEach((item, index) => {
+    const row = document.createElement("div");
+    row.className = `result-row${item.isOurs ? " ours" : ""}`;
+    row.innerHTML = `
+      <div class="result-rank">#${index + 1}</div>
+      <div class="result-model-wrap">
+        <div class="result-model">${item.model}</div>
+        ${item.isOurs ? '<span class="result-tag">Ours</span>' : ""}
+      </div>
+      <div class="result-score">${item.mcAcc.toFixed(1)}%</div>
+      <div class="result-delta neutral">single-judge MC setting</div>
+    `;
+    resultsRoot.appendChild(row);
+  });
+}
+
+function renderResultsPanel(
+  activeTask = crossJudgeState.activeTask,
+  activeJudge = crossJudgeState.activeJudge,
+  activeMetric = crossJudgeState.activeMetric
+) {
+  if (!resultsRoot) {
+    return;
+  }
+  crossJudgeState.activeTask = activeTask;
+  crossJudgeState.activeJudge = activeJudge;
+  crossJudgeState.activeMetric = activeMetric;
+
+  renderControls();
+  if (crossJudgeState.activeTask === "mc") {
+    renderMcResults();
+  } else {
+    renderOeResults(crossJudgeState.activeJudge, crossJudgeState.activeMetric);
+  }
+}
+
+renderResultsPanel("oe", "gpt4o", "oeAcc");
 renderSamples("Belief", 0);

styles.css

@@ -451,6 +451,12 @@ code {
   align-items: start;
 }
 
+.analysis-side {
+  display: grid;
+  gap: 12px;
+  margin-top: 72px;
+}
+
 .text-content {
   font-size: 1.05rem;
 }
@@ -476,6 +482,10 @@ code {
   margin-bottom: 8px;
 }
 
+.toggle-group.task .toggle-btn {
+  font-size: 0.84rem;
+}
+
 .toggle-group {
   display: flex;
   flex-wrap: wrap;
@@ -500,6 +510,10 @@ code {
   color: #ffffff;
 }
 
+.is-hidden {
+  display: none !important;
+}
+
 .results-caption {
   margin: 0 0 8px;
   font-size: 0.85rem;
@@ -599,6 +613,10 @@ code {
   border-radius: 10px;
 }
 
+.mc-figure {
+  background: #fdfcf9;
+}
+
 .benchmark-figure figcaption {
   margin-bottom: 3px;
 }
@@ -858,6 +876,10 @@ code {
     border-top: 1px solid var(--line);
   }
 
+  .analysis-side {
+    margin-top: 0;
+  }
+
   .table-grid {
     grid-template-columns: 1fr;
   }