Skip to content
resoluna.
LivePeriod:2026-04 – 2026-08

Earth Day × Six Thinking Hats

A classroom tool that builds Six Thinking Hats into group discussion, iterated live on classroom feedback

My role
Product & instructional design, requirements; built with Claude
Stack
HTML/CSS/JSFirebase FirestoreFirebase AuthAzure OpenAINode.js
AI collaboration
Claude CodeAzure OpenAI GPT
87
Students · About 87 seventh graders
3
Classes · Three homerooms
6
Green actions · Picked from Earth Day Taiwan's list of 42
6
Thinking hats · Unlocked in sequence

01Problem

For Earth Day week, I wanted seventh graders to discuss Earth Day Taiwan's "Million Green Actions" in groups and commit to one action they would actually do. Ordinary group discussion tends to be carried by a few voices while others drift. Classroom engagement tools such as Mentimeter, Kahoot and Pear Deck are good at quizzes and polls, but not at walking a group through a full line of reasoning.

So instead of a quiz, I built the Six Thinking Hats framework into the flow itself: white (facts) → red (gut feeling) → yellow (value) → black (risk) → green (ideas) → blue (decision). That takes students from evidence to a concrete plan, step by step.

02Users & Context

  • Students: seventh graders in three classes (704, 708, 717), about 87 in total, answering on tablets in small groups.
  • Teacher (me): needed to see each group's progress in class, and afterwards to edit, review and export results and assess the quality of thinking.
  • Setting: real lessons during Earth Day week, with limited time, uneven devices and network, and a wide spread of ability. Six actions from the official list of 42, grouped as plastic reduction, carbon reduction and saving resources.

03Constraints

  • No engineering team: I owned the instructional design and requirements, and the code was built with Claude. The stack had to stay simple: plain HTML/JS plus Firebase.
  • Used while being built: fixes shipped between and during lessons, and nothing could break a class.
  • Student data: the console can edit and delete answers, so it needed real authentication. Nothing public may identify a student.
  • Cost: AI analysis runs after class in batches on Azure OpenAI, not live.

04Approach & Trade-offs

  • Sequential unlocking: the next hat opens only after the right teammates save, so nobody skips ahead.
  • Group-locked actions: everyone in a group discusses the same shortlisted actions.
  • Assigned roles → open participation with Pass: at first each student owned one hat. In class, students without a hat tuned out, so I switched to whole-group answering with an explicit Pass.
  • Green hat sees black hat: the green prompt asks for fixes to black-hat concerns, so those concerns now appear live on the green screen.
  • Blue-hat consensus: the final plan needs consensus, but only the students who disagree re-choose.
  • Firebase Authentication replaced a password hard-coded in the console.
  • Coherence over AI detection: I assess whether answers connect across hats, not whether AI wrote them.

Key decisions

05How I Worked with AI

I defined problems and rules, and Claude implemented and debugged. Three patterns:

  • I observe, it locates: after the switch to open participation, Save got locked. I reported the symptom, and Claude traced it to subscribeHatReadiness and a hatKey race condition.
  • I set the teaching goal, it builds the UI: I wanted green to answer black, so Claude added a live black-hat reference panel.
  • I define the frame, it builds the tool: for post-class analysis I set three questions (yellow cites white, green answers black, blue is concrete). Claude wrote a script that computes the stats in code and then hands them, with the raw answers, to Azure OpenAI for interpretation.

Human–AI moments

  1. Fixing a sync-state bug

    What I decided

    After switching to open participation, the Save button on the student screen got locked. I handed Claude the symptom.

    What AI did

    Claude traced it to subscribeHatReadiness mis-handling open-to-all mode plus a hatKey race condition, and fixed both.

    Outcome

    Save works again under open participation; the fix is in the commit history.

    Lesson When you change the flow rules, re-check every sync assumption built on the old ones

  2. Turning a teaching goal into UI

    What I decided

    I wanted green hat to respond to black hat's concerns, so I asked for the group's black-hat answers to be visible while answering green hat.

    What AI did

    Claude added a live-subscribed “our group's black-hat concerns” panel to the green-hat screen that updates as teammates save.

    Outcome

    Black→green response went from memory to something on screen, and later became one dimension of the post-class analysis.

    Lesson If you want to assess a behavior, first make it possible in the interface

  3. Changing product rules from classroom observation

    What I decided

    After teaching with it, I dropped one-hat-per-student for whole-group answering with Pass, split white hat into specific fields, and asked for answer editing in the teacher console.

    What AI did

    Claude fixed the answer buttons, split white hat into three fields, implemented Pass, and added answer editing to the console.

    Outcome

    Everyone has a task under every hat; skipped fields have an explicit way out instead of blocking the group.

    Lesson Let a real classroom test the role design of a prototype

  4. Post-class AI analysis

    What I decided

    I defined the frame: not AI detection, but whether yellow cites white's facts, green answers black's concerns, and blue is a concrete plan.

    What AI did

    Claude wrote analyze-708.js: read Firestore, compute completion rates, blue-hat consistency and action distribution in code, then hand stats and raw answers to Azure OpenAI for qualitative analysis.

    Outcome

    A report on 708's 28 responses with per-group coherence and three teaching recommendations.

    Lesson Let code compute the numbers; let the model interpret them

06Outcomes

  • Used in real Earth Day lessons across 3 classes, about 87 students.
  • Class 708 analysis (28 responses):
    • Full-completion rate by hat: white 36%, red 57%, yellow 46%, black 50%, green 54%.
    • Final choices: Action 1 (carry your own bag, utensils and bottle) with 13 students and Action 32 (take the stairs) with 10.
    • 6 of 8 groups reached blue-hat consensus.
    • Three teaching recommendations: a white-hat data template, a blue-hat plan template and peer review.
  • The framework doesn't depend on the topic. It can carry SWOT, literary critique or civic-issue debates.

Screens

Earth Day × Six Thinking Hats – 1
Earth Day × Six Thinking Hats – 2
Earth Day × Six Thinking Hats – 3
Earth Day × Six Thinking Hats – 4
Earth Day × Six Thinking Hats – 5
Earth Day × Six Thinking Hats – 6

07What I'd Do Differently

  • Scaffold white hat from day one. At 36% it had the lowest completion. A data-and-source template should come first, not after the report.
  • Give blue hat a format covering what, when and how to check, because some plans read like slogans.
  • Compute more in code. In the report, the model's own count of groups by coherence level didn't add up. Every number should come from code, and the model should only interpret.
  • Handle secrets from the first API call. The analysis script first parsed its key from a local document and only later moved to environment variables.