Deck Visual Patterns

ProblemReminder

Small label at bottom-left showing a condensed problem summary. Persists across all slides after "problem-setup".

Component

src/lib/deck/patterns/ProblemReminder.tsx

Props

Prop Type Description
x number X position (default: 12 in 640x360 viewport)
y number Y position (default: 340 in 640x360 viewport)
text string Condensed problem summary (max 15 words)

Usage

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

// Appears on all slides after problem-setup
<ProblemReminder
  x={12}
  y={340}
  text="30 nuggets total. 6 per student. How many students?"
/>

Default position

Bottom-left of the 640x360 viewport:

  • x=12
  • y=340

Writing guidelines

The text should be an ultra-condensed problem summary (max 15 words). Use short phrases, not full sentences.

Good examples:

  • "30 nuggets total. 6 per student. How many students?" (9 words)
  • "Drone: 150m in 30 sec. Find the speed." (8 words)
  • "Two turtles racing. Which is faster?" (5 words)

Bad examples (too long):

  • "A large box has 30 chicken nuggets. If each student gets 6 nuggets, how many students can have a snack?"
  • "Two turtles are racing. Turtle g travels at a constant speed. We need to find when turtle g catches up to turtle f."

Design

  • Background: #f1f5f9 (light slate)
  • Border-left: 4px solid #cbd5e1 (slate accent)
  • Border-radius: 8px
  • Text: 15px, #1d1d1d, line-height 1.4