CfuAnswerCard

Two-stage reveal component for Check-for-Understanding and Answer boxes.

Component

src/lib/deck/patterns/CfuAnswerCard.tsx

Props

Prop	Type	Description
x	number	X position in SVG coordinate space (640x360)
y	number	Y position in SVG coordinate space (640x360)
question	string	The CFU question text
answer	string	The answer/explanation text
showCfu	boolean	Whether the CFU (yellow) box is visible
showAnswer	boolean	Whether the Answer (green) box is visible

Usage

The component uses separate slide IDs for progressive reveal instead of same-position overlay animation:

import { CfuAnswerCard } from "@/lib/deck/patterns/CfuAnswerCard";

// In your deck slide definitions:
// slide "step-1-cfu"  -> showCfu=true,  showAnswer=false
// slide "step-1-answer" -> showCfu=true, showAnswer=true

<CfuAnswerCard
  x={420}
  y={30}
  question="What operation does this describe?"
  answer="Division — splitting 30 nuggets into groups of 6."
  showCfu={show("step-1-cfu")}
  showAnswer={show("step-1-answer")}
/>

Design

CFU state (yellow):

Background: #fef3c7
Border: #f59e0b (left accent)
Header color: #92400e
Header text: "CHECK FOR UNDERSTANDING"

Answer state (green):

Background: #dcfce7
Border: #22c55e (left accent)
Header color: #166534
Header text: "ANSWER"

Key difference from old system

The old PPTX export system placed both boxes at the same position on a single slide, using z-index layering and click-based animation to reveal them sequentially. The new deck visual system uses separate slide IDs ("step-N-cfu" and "step-N-answer") so each state is its own slide. The show() predicate from SlideSystem controls visibility based on the current slide ID.