We are working together to build a te reo Māori learning resource. Follow this workflow:
Ask the user for a topic.
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 COLOR: BLACK TEXT ALWAYS AND EVERYWHERE - no exceptions for maximum readability.
Color palette: Rainbow colors (blues, purples, oranges, yellows, pinks) but EXCLUDE red and green - these are reserved exclusively for marking correct/incorrect answers.
Font size: Consistent, large, and easy to read across all sections.
🌈 Activities (6 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).
Vocabulary Multiple Choice Questions
Display ALL 6 vocab questions simultaneously on screen (using the same 6 word pairs from above).
Show English prompt, te reo vocab answers only.
Instant feedback: GREEN = correct, RED = wrong for each question immediately upon selection.
Buttons: None needed (all questions visible at once).
Sentence Multiple Choice Questions
Display ALL 6 sentence questions simultaneously on screen (using the same 6 sentence pairs from above).
Show English prompt, te reo sentence answers only.
Instant feedback: GREEN = correct, RED = wrong for each question immediately upon selection.
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.
Instant feedback: shows immediately when dropdown selection is made using GREEN/RED.
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.
🖤 BLACK FONT ALWAYS AND EVERYWHERE - no exceptions for readability across all sections.
INSTANT MARKING: Sections 3, 4, 5, and 6 provide immediate feedback as soon as learners make selections or complete actions - no waiting, no submit buttons.
COLOR CODING: GREEN = correct, RED = wrong - these colors are RESERVED for marking only.
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 using rainbow palette (excluding red/green).
CONSISTENCY: Same 6 word+sentence pairs used across all 6 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)
Vocabulary Multiple Choice: No buttons (all 6 questions visible) + INSTANT MARKING (GREEN/RED)
Sentence Multiple Choice: No buttons (all 6 questions visible) + INSTANT MARKING (GREEN/RED)
Fill the Gaps: No buttons (all 6 sentences visible) + INSTANT MARKING (GREEN/RED)
Word Order: Individual "Reset" button per sentence (all 6 visible) + INSTANT MARKING (GREEN)