We are working together to build a te reo Māori learning resource.
Ask the user for a topic.
Generate 20 vocab words (te reo + English).
Generate 20 sentences (te reo + English).
Each vocab item must appear in its matching sentence (word #1 in sentence #1, etc).
Ask the user to check and approve or make edits.
Once approved, generate the HTML/CSS/JS resource.
🎨 HTML/CSS/JS Resource Specifications
Layout: Full width, stacked vertically, responsive for all devices.
Design: Rounded friendly font (e.g. Nunito), rainbow colour palette with light backgrounds, soft shadows, fun and encouraging.
Font size: Consistent, large, and easy to read across all sections.
Font color: Black text for maximum readability.
🌈 Activities (5 sections) IMPORTANT: All sections use the SAME 6 randomly selected word+sentence pairs
Two-sided cards: Show te reo VOCAB WORD on the FRONT, English translation on the BACK when clicked/flipped.
Display all 6 vocab cards simultaneously on screen (using the 6 selected word pairs).
Clear visual indication of front vs back of card.
Buttons: "Reload Cards" only (selects fresh random set of 6 word+sentence pairs for ALL sections).
Two-sided cards: Show te reo SENTENCE on the FRONT, English translation on the BACK when clicked/flipped.
Display all 6 sentence cards simultaneously on screen (using the same 6 sentence pairs from above).
Clear visual indication of front vs back of card.
Buttons: None needed (uses same 6 pairs as vocab flashcards).
Multiple Choice Questions
Display ALL 12 questions simultaneously on screen (6 vocab + 6 sentence questions from the same pairs).
Show English prompt, te reo answers.
Mix vocab questions (word pairs) and sentence questions (sentence pairs) from the same 6.
Instant feedback: green = correct, red = wrong for each question.
Buttons: None needed (all questions visible at once).
Display ALL 6 sentences simultaneously on screen (using the same 6 sentence pairs from above).
Te reo sentence with one missing word per sentence.
Dropdown gives choices (all te reo) for each gap.
Feedback shows instantly for each sentence.
Must use correct word boundaries — never split a single word (e.g. rāumati must not become rā umati).
Buttons: None needed (all sentences visible at once).
Word Order (Sentence Building)
Display ALL 6 sentences simultaneously on screen (using the same 6 sentence pairs from above).
Present scrambled words from each sentence separately.
Display the English translation of each target sentence prominently above its word bank.
Learner clicks words to rebuild each sentence independently.
Only the words from that specific sentence are used (no extras).
Keep full stops and capital letters outside the scramble (sentence frame stays intact).
NO "Check" button — each sentence frame turns green and shows "Correct!" immediately when words are in the correct order.
Buttons: "Reset" button for each individual sentence (clears that attempt, returns words to bank).
Feedback banners: 🎉 Tino pai! / ✖ Aroha mai — try again.
Celebrate success with big colourful banners: "Tino pai!", "Ka rawe!", "Congratulations!".
Errors give gentle encouragement: "Aroha mai — try again".
Always ensure word + sentence alignment (no nonsense splits).
Keep design fun, engaging, culturally affirming.
Black font for optimal readability across all sections.
CONSISTENCY: Same 6 word+sentence pairs used across all 5 sections until "Reload Cards" is pressed.
✅ Button Summary by Section:
Vocabulary Flashcards: "Reload Cards" only (refreshes the 6 pairs for ALL sections)
Sentence Flashcards: No buttons (uses same 6 pairs)
Multiple Choice: No buttons (all 12 questions visible)
Fill the Gaps: No buttons (all 6 sentences visible)
Word Order: Individual "Reset" button per sentence (all 6 visible)
This (in hindsight) was the best one. Some minor issues:
Word Order section - congratulations covered the correct answer. The colour red is best left for incorrect answers, and green for correct answers. I was not keen on the white font in places, however, in the heading it looks great. The icons were a bit generic for me, a kiwi vibe would be nicer. I think this was ChatGPT before I ran out of free prompts and the MINI takes over.