Build a Vocabulary Matching Game as a Single HTML File

This walkthrough builds a vocabulary matching game your students can play in any browser - no install, no accounts. It’s a single HTML file you can open from a classroom computer or drop into your school site.

What you’ll need

Claude (claude.ai is fine) and a list of terms with their definitions.

Step 1: Give Claude the job and your content

Paste a prompt like this, with your own term-definition pairs:

You are helping me, a teacher, build a simple classroom game. Create a single self-contained HTML file (HTML, CSS, and JavaScript inline - no external libraries) for a vocabulary matching game where students click a term and then its matching definition. Use these pairs: photosynthesis: how plants make food from sunlight habitat: the natural home of an animal or plant [add 6-10 of your own] Make it colorful and mobile-friendly, keep score, and celebrate when all pairs are matched. Give me the full file to copy and paste.

Step 2: Save the file

Claude returns a block of code. Copy all of it, paste into a plain text editor (TextEdit, Notepad, or Google Docs, then download it as plain text), and save it as vocab-game.html. The .html ending is what makes it a webpage.

Step 3: Open and test it

Double-click the file. It opens in your browser as a working game. Play through it once to check the content and that matches register correctly.

Step 4: Ask for changes

Anything you’d tweak, just ask: “Make the cards bigger,” “Add a timer,” “Use a winter theme,” or “Add five more pairs about the water cycle.” Claude returns an updated file - save over the old one.

Step 5: Share it

Email the file to students, put it on a shared drive, or ask your tech coordinator to host it on the school site. Because it’s one self-contained file with no logins, it just works.