Update emotion second-order sample and collapse OE answer

script.js

@@ -112,19 +112,19 @@ const sampleData = [
     ]
   },
   {
-    qaId: "0pPOxAQwRgQ@3@character_1@emotion@second",
-    id: "0pPOxAQwRgQ",
+    qaId: "h9Zol4P5u9Q@4@character_2@emotion@second",
+    id: "h9Zol4P5u9Q",
     dimension: "Emotion",
     order: "Second-order",
-    target: "the other character being questioned",
-    question: "What does the woman think the other character feels when she asks 'Did you love her?'",
+    target: "Man",
+    question: "What does Woman think the man believes about her emotional state during her outburst?",
     openEndedAnswer:
-      "The woman's intense gaze and questioning suggest she perceives the other character as feeling guilty and uncomfortable, as he seems reluctant to openly admit his feelings.",
+      "The woman believes the man thinks she is overreacting because his lack of visible concern or engagement suggests he dismisses her emotional display as exaggerated.",
     options: [
-      { label: "A", text: "She thinks he feels guilt and discomfort but is reluctant to admit it.", correct: true },
-      { label: "B", text: "She thinks he feels distant, minimizing the significance of the question as if it doesn't matter much." },
-      { label: "C", text: "She thinks he feels confident, openly sharing his feelings about her mother without any sign of hesitation." },
-      { label: "D", text: "She thinks he feels uncertain, not realizing how much the question means to her emotionally." }
+      { label: "A", text: "She thinks he believes she is overreacting and being overly emotional without cause.", correct: true },
+      { label: "B", text: "She thinks he believes she is sincerely upset because of Sylvia's death and that he should comfort her." },
+      { label: "C", text: "She thinks he believes she is exaggerating for effect and not actually serious about her accusations." },
+      { label: "D", text: "She thinks he believes she is emotionally detached and unaffected by the situation with Sylvia." }
     ]
   },
   {
@@ -267,10 +267,13 @@ function renderSamples(active = carouselState.activeDimension, index = 0) {
   const detailBlocks = item.openEndedAnswer
     ? `
       <div class="oe-card">
-        <div class="oe-head">
+        <button type="button" class="oe-head oe-toggle" aria-expanded="false">
           <span class="oe-badge">Open-Ended Answer</span>
+          <span class="oe-caret" aria-hidden="true">&#9662;</span>
+        </button>
+        <div class="oe-body" hidden>
+          <p class="oe-text">${item.openEndedAnswer}</p>
         </div>
-        <p class="oe-text">${item.openEndedAnswer}</p>
       </div>
     `
     : "";
@@ -317,6 +320,16 @@ function renderSamples(active = carouselState.activeDimension, index = 0) {
   card.querySelector('[data-nav="next"]').addEventListener("click", () => {
     renderSamples(active, safeIndex + 1);
   });
+
+  const oeToggle = card.querySelector(".oe-toggle");
+  const oeBody = card.querySelector(".oe-body");
+  if (oeToggle && oeBody) {
+    oeToggle.addEventListener("click", () => {
+      const expanded = oeToggle.getAttribute("aria-expanded") === "true";
+      oeToggle.setAttribute("aria-expanded", String(!expanded));
+      oeBody.hidden = expanded;
+    });
+  }
 }
 
 function getMetricLabel(metric) {

styles.css

@@ -830,7 +830,34 @@ code {
 }
 
 .oe-head {
-  margin-bottom: 6px;
+  margin: 0;
+}
+
+.oe-toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+}
+
+.oe-caret {
+  color: #5a6f8c;
+  font-size: 0.8rem;
+  transition: transform 0.2s ease;
+}
+
+.oe-toggle[aria-expanded="true"] .oe-caret {
+  transform: rotate(180deg);
+}
+
+.oe-body {
+  margin-top: 8px;
 }
 
 .oe-badge {

videos/h9Zol4P5u9Q.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:74ebb062cceb5b51e02a9a4fc93b0341cdc4e7dc55bebe1047b447569b9d6a1b
+size 2228030