Online Education

Knowledge checks, flip cards, puzzles โ€” tools for teaching and learning.

Knowledge Check

A multiple-choice quiz with instant feedback, explanations, and a score screen. Swap in your own questions in one spot.

Every question lives in one easy-to-edit list at the top of the file โ€” question, choices, the right answer, and an optional explanation shown after each guess. Great first project for turning any lesson into an interactive check for understanding.

๐Ÿ‘€ Peek at the code code/knowledge-check/index.html
index.html
Loading codeโ€ฆ
๐Ÿ‘€ Peek at the prompt code/knowledge-check/PROMPT.md
PROMPT.md
Loading codeโ€ฆ
Screenshot of Knowledge Check

Flip Cards

3D-flipping flashcards with shuffle, keyboard controls, and a deck you can rewrite in seconds.

Click a card (or press space) to flip it, arrow keys to move through the deck. The whole deck is a simple front/back list at the top of the script โ€” vocabulary, math facts, dates, definitions, whatever youโ€™re teaching. The CSS 3D flip is a fun trick to steal on its own.

๐Ÿ‘€ Peek at the code code/flip-cards/index.html
index.html
Loading codeโ€ฆ
๐Ÿ‘€ Peek at the prompt code/flip-cards/PROMPT.md
PROMPT.md
Loading codeโ€ฆ
Screenshot of Flip Cards

Mini Crossword

A real, playable crossword engine โ€” define your words, positions, and clues, and it builds the numbered grid for you.

Click a clue to jump to its word, type to auto-advance, then hit Check to see how you did (with Reveal for mercy). The engine numbers the grid automatically using standard crossword rules โ€” you just list the words, where they start, and their clues. Sketch your crossing words on paper first!

๐Ÿ‘€ Peek at the code code/crossword/index.html
index.html
Loading codeโ€ฆ
๐Ÿ‘€ Peek at the prompt code/crossword/PROMPT.md
PROMPT.md
Loading codeโ€ฆ
Screenshot of Mini Crossword

Interactive Content Delivery

Six turfgrass profiles turned into a branded, animated, accessible explorer โ€” produced from a single prompt with no follow-up messages.

This is what happens when you hand an extension publication to an AI and ask for something people will actually click. Pick a grass and watch it grow โ€” blades rise on a stagger, sway on a loop, and change color with the season, so warm-season types visibly go dormant in winter while cool-season types hang on.

The real lesson here is in the accordion below: the whole thing came from one prompt, with no follow-ups. Six lines that name the format, make accessibility a constraint rather than an afterthought, use โ€œin the style of John Deereโ€ as shorthand for an entire palette, point at real source content, and then deliberately leave one slot open with โ€œadd in one more feature to surprise me.โ€ That last line is where the season simulator and the regional lawn match finder came from โ€” pick your region and how much shade you get, and it recommends a grass and starts growing it.

Worth stealing beyond the prompt: it honors prefers-reduced-motion, gives the animated stage a text alternative, and drives the button group with aria-pressed rather than color alone.

๐Ÿ‘€ Peek at the code code/interactive-content-delivery/index.html
index.html
Loading codeโ€ฆ
๐Ÿ‘€ Peek at the prompt code/interactive-content-delivery/PROMPT.md
PROMPT.md
Loading codeโ€ฆ
Screenshot of Interactive Content Delivery

More Learning Tools Soon

Word searches, matching activities, timelines, and more classroom-ready tools are coming.

๐Ÿšง Coming soon

Branded example set

๐ŸŠ University of Tennessee Examples

The activities above are deliberately generic โ€” steal them and make them your own. This set shows what happens when you hand your AI a theme guide instead of describing colors every single time: one consistent, accessible, institution-branded look across a dozen different interactives.

How to use the theme guide

The guide is a plain Markdown file that describes a whole visual system: the exact color tokens, the type treatment, which backgrounds pair with which text colors, and โ€” most usefully โ€” the accessibility rules that keep the brand from going wrong. Drop it into a project and point your AI assistant at it:

  1. Save it in your project folder next to whatever you're building (many people rename it CLAUDE.md or reference it from one, so the assistant picks it up automatically).
  2. Reference it in your prompt: "Build a drag-and-drop sorting activity. Follow UT_STARTER_THEME_GUIDE.md exactly for colors, type, and component styling." That single sentence replaces a paragraph of color instructions โ€” and it produces the same look every time.
  3. Let it enforce accessibility for you. The guide spells out the trap most brand work falls into โ€” Tennessee Orange is gorgeous but fails contrast as a text color. It documents the measured ratios and tells the assistant to use orange for rules, borders, and markers, and to keep reading text on white, warm off-white, or Smokey Gray.
  4. Swap the tokens to re-brand everything. Change the hex values and font stack in the guide, and the same prompts produce the same activities in your institution's colors. That's the real trick โ€” the guide is the reusable part, not the activities.

Every activity below is a single self-contained HTML file with the theme tokens inlined at the top, so you can open one, change the questions, and hand it to students the same day. The CSS file above is the same theme extracted on its own if you'd rather link it than paste it.

Interactive Scoreboard

Big, projector-friendly team scores with one-tap points โ€” and it survives a closed tab.

The classroom workhorse: add teams, rename them by clicking, and hand out points in steps of 1, 5, or 10. Whoeverโ€™s ahead gets an orange rule and a LEADING flag, ties are called honestly, and the whole game is saved to the browser so an accidental refresh doesnโ€™t wipe your review session.

๐Ÿ‘€ Peek at the code code/utk-scoreboard/index.html
index.html
Loading codeโ€ฆ
๐Ÿ‘€ Peek at the prompt code/utk-scoreboard/PROMPT.md
PROMPT.md
Loading codeโ€ฆ
Screenshot of Interactive Scoreboard

Flashcards

Type an answer, check it, then flip the card in 3D to confirm โ€” with forgiving answer matching.

Answer checking ignores case, punctuation, and a leading โ€œtheโ€, and each card can list alternate spellings it should accept. The flip is pure CSS: perspective on the scene, rotateY on the card, backface-visibility hidden on each face.

๐Ÿ‘€ Peek at the code code/utk-flashcards/index.html
index.html
Loading codeโ€ฆ
๐Ÿ‘€ Peek at the prompt code/utk-flashcards/PROMPT.md
PROMPT.md
Loading codeโ€ฆ
Screenshot of Flashcards

Dialog Cards

Self-assessed flip cards with an audio cue โ€” learners judge their own recall and the deck keeps score.

Built for phonics and language practice: a big prompt on the front, a tone cue generated with the Web Audio API, and a set of labeled details on the back. Learners mark themselves right or wrong to advance, ending on a tally screen.

๐Ÿ‘€ Peek at the code code/utk-dialog-cards/index.html
index.html
Loading codeโ€ฆ
๐Ÿ‘€ Peek at the prompt code/utk-dialog-cards/PROMPT.md
PROMPT.md
Loading codeโ€ฆ
Screenshot of Dialog Cards

Dropdown Cloze

Fill-in-the-blank with dropdowns โ€” every correct answer appears in every menu, so learners have to actually know which is which.

Write your sentences as plain text with asterisks around the target word and the engine does the rest: it builds the dropdowns, pools all the answers together as distractors, and grades the set. Good for vocabulary, terminology, and any place youโ€™d otherwise print a word bank.

๐Ÿ‘€ Peek at the code code/utk-dropdown-cloze/index.html
index.html
Loading codeโ€ฆ
๐Ÿ‘€ Peek at the prompt code/utk-dropdown-cloze/PROMPT.md
PROMPT.md
Loading codeโ€ฆ
Screenshot of Dropdown Cloze

Interactive Timeline

Walk through a sequence of milestones on a clickable rail, each with context and a "why it mattered" callout.

Works for history, process stages, or project phases. The rail tracks three states per node โ€” unvisited, visited, and active โ€” and collapses into a horizontally scrolling row of chips on phones.

๐Ÿ‘€ Peek at the code code/utk-timeline/index.html
index.html
Loading codeโ€ฆ
๐Ÿ‘€ Peek at the prompt code/utk-timeline/PROMPT.md
PROMPT.md
Loading codeโ€ฆ
Screenshot of Interactive Timeline

Mark the Words

Click every word in a passage that matches the instruction โ€” verbs, key terms, literary devices, whatever you're teaching.

A close-reading exercise that distinguishes three outcomes after checking: words you correctly found, words you marked in error, and words you missed entirely. Each state uses both color and styling, plus a legend โ€” an accessibility habit worth copying into your own work.

๐Ÿ‘€ Peek at the code code/utk-mark-the-words/index.html
index.html
Loading codeโ€ฆ
๐Ÿ‘€ Peek at the prompt code/utk-mark-the-words/PROMPT.md
PROMPT.md
Loading codeโ€ฆ
Screenshot of Mark the Words

Drag the Words

Drag terms from a word bank into the sentences where they belong โ€” with tap-to-place support for tablets.

The same asterisk syntax as the cloze activity, but learners physically move words into position. Worth stealing: it handles real drag-and-drop and a tap-select-then-tap-target fallback, so it works just as well on a classroom iPad as on a laptop.

๐Ÿ‘€ Peek at the code code/utk-drag-the-words/index.html
index.html
Loading codeโ€ฆ
๐Ÿ‘€ Peek at the prompt code/utk-drag-the-words/PROMPT.md
PROMPT.md
Loading codeโ€ฆ
Screenshot of Drag the Words

Category Sort

Sort terms into labeled bins. Define any number of categories and the layout reflows to fit.

A classification drill for taxonomies, branches, phyla, genres โ€” anything with buckets. Chips mark themselves green or red in place when checked, so learners see exactly which ones they misfiled without losing their other work.

๐Ÿ‘€ Peek at the code code/utk-category-sort/index.html
index.html
Loading codeโ€ฆ
๐Ÿ‘€ Peek at the prompt code/utk-category-sort/PROMPT.md
PROMPT.md
Loading codeโ€ฆ
Screenshot of Category Sort

Find the Hotspot

A visual search puzzle that draws its own scene in SVG โ€” no image files, no licensing, a new puzzle every time.

The classic find-the-hidden-object activity, solved for people who donโ€™t have artwork to work with: it generates a forest of scattered trees and hides one orange-roofed cabin at a random spot. Hit detection is aspect-ratio aware, so the tolerance stays fair at any screen size. A comment explains how to swap in a real photo.

๐Ÿ‘€ Peek at the code code/utk-hotspot/index.html
index.html
Loading codeโ€ฆ
๐Ÿ‘€ Peek at the prompt code/utk-hotspot/PROMPT.md
PROMPT.md
Loading codeโ€ฆ
Screenshot of Find the Hotspot

Combining Different Activities

Four question types โ€” multiple choice, true/false, short answer, and select-all โ€” woven into one auto-graded set.

The capstone: one seamless assessment rather than four activities stapled together. Items lock after checking, learners can page back through their marked answers, and the results screen breaks down exactly what they got right. Add items of any type to the same list and the engine handles the rest.

๐Ÿ‘€ Peek at the code code/utk-quiz-set/index.html
index.html
Loading codeโ€ฆ
๐Ÿ‘€ Peek at the prompt code/utk-quiz-set/PROMPT.md
PROMPT.md
Loading codeโ€ฆ
Screenshot of Combining Different Activities

Volpardy

A full Jeopardy-style review game โ€” five categories, five point levels, and team scoring you drive from the front of the room.

Click a tile, read the clue aloud, reveal the answer, then award or deduct points for any team with one tap. Tiles retire as theyโ€™re played, negative scores are allowed for a bad buzz, and the last tile triggers final standings. Rename the teams by clicking them and add more mid-game.

๐Ÿ‘€ Peek at the code code/utk-volpardy/index.html
index.html
Loading codeโ€ฆ
๐Ÿ‘€ Peek at the prompt code/utk-volpardy/PROMPT.md
PROMPT.md
Loading codeโ€ฆ
Screenshot of Volpardy

Volopoly

A genuinely playable board game โ€” roll, move, buy up the campus, collect rent, and outlast everyone else.

Twenty-four spaces around a 7ร—7 board with a control console in the middle: two dice, property groups, Vol Draw chance cards, a Study Hall that costs you a turn, and real bankruptcy rules that put a busted playerโ€™s deeds back on the market. Rename the spaces for your own campus or subject and the whole game re-themes itself.

๐Ÿ‘€ Peek at the code code/utk-volopoly/index.html
index.html
Loading codeโ€ฆ
๐Ÿ‘€ Peek at the prompt code/utk-volopoly/PROMPT.md
PROMPT.md
Loading codeโ€ฆ
Screenshot of Volopoly

Branching Scenario

An AI-literacy ethics scenario where two courses have opposite AI policies โ€” three decisions, real consequences, and nothing graded until the debrief.

Built to the eight evidence-based rules in the guide below, and the engine enforces them rather than just aspiring to them. Every decision probes the same competency โ€” whether you make your AI use visible before someone asks โ€” so itโ€™s one moment of truth examined three times, not a string of unrelated choices. Nothing is marked right or wrong while you play; you get consequences instead, and the theory waits for the debrief.

The scenario itself is about transparency, not compliance. One professor permits AI and asks for disclosure; another forbids it without defining what counts. Youโ€™re stuck at 11pm with a group deadline. The tempting choices are the rationalisations capable students actually use, the worst ending is fully reachable, and in it nothing bad happens to you at all โ€” the cost is paid quietly by a teammate, a professor with an unclear syllabus, and a classmate who stops posting.

Worth stealing: transparency, trust, and belonging are tallied silently and only revealed at the end, because showing meters mid-story turns consequences back into a score. They come back as a temperature reading rather than a grade โ€” cold to warm, plus how much each individual decision added or cost, so you can see what you built each time instead of only where you finished. The context is front-loaded onto the opening page so every screen after it is short and the decisions arrive fast. Illustrations are framed placeholders describing the art that belongs there, so the whole thing is playable before anyone opens a design tool.

๐Ÿ‘€ Peek at the code code/utk-branching-scenario/index.html
index.html
Loading codeโ€ฆ
๐Ÿ‘€ Peek at the prompt code/utk-branching-scenario/PROMPT.md
PROMPT.md
Loading codeโ€ฆ
Screenshot of Branching Scenario