Classroom Empathy Generator

A single-page teacher-education discussion tool. It presents fictional student-scenario cards across ten modes (individual student, classroom dynamic, home & life context, engagement, behaviour signals, social dynamics, attendance, crisis indicators, identity & belonging, and academic struggle).

Each card opens with an observable situation — the surface a teacher actually sees. Pressing "What don't I know?" reveals the hidden context behind it, a short reframe, and the relevant Ontario framework tags. Turn on Facilitator mode to also reveal a discussion prompt for each card. Collapsing the sidebar switches to a full-random draw across all modes.

For discussion purposes only. All scenarios are fictional composites — not descriptions of real students or events.

About this project

This project was built for a Queen's University TEMS program class assignment. In our class, the phrase "What don't I know" came up a lot and it struck me as an important question to keep in mind as it encourages us to have empathy and curiosity. As teachers it might be easiest to observe something in the classroom and make assumptions or jump to conclusions. But there is so often more to the story that we don't know. The goal of this app is simply to help us remember that, and to embrace the empathy behind the question "what don't I know?".

The idea of this app was mine, but most of the code and many of the scenarios were generated by Claude AI. There is a toggle in the top right of the app to show or hide the generated AI content.

The app is available here: https://whatdontiknow.gv.ca/

Technology stack

Static Vite + vanilla JS app, served by Caddy. No frameworks, no backend.

Development

If you would like to develop this app further, follow the commands below.

npm install
npm run dev      # dev server with HMR at http://localhost:5173/
npm run build    # production build to dist/
npm run preview  # serve the built dist/ locally

All app source lives in app/ (index.html, main.js, style.css); scenario content is the modes object in app/main.js. See CLAUDE.md for the scenario data shape and content guardrails.

If you have ideas for improving this app or want to contribute more scenarios, feel free to contact me.