Layout: All sections (Vocabulary Flashcards, Sentence Flashcards, Vocabulary Multiple Choice, Sentence Multiple Choice, Fill the Gaps, Word Order) should be full-width and stacked vertically in a single column for a responsive, mobile-friendly design.
Laptop/Desktop (screens ≥768px): Vocabulary Flashcards and Sentence Flashcards should display 6 cards in a 2x3 grid (2 rows, 3 columns) to maximize horizontal space.
Mobile (screens <768px): Vocabulary Flashcards and Sentence Flashcards should stack vertically in a single column (6 rows) for ease of use on smaller screens.
Optional Flexibility: On some devices, a 3x2 grid (3 rows, 2 columns) may be used if it provides better visual balance, but prioritize 2x3 on laptops and vertical stacking on mobile.
Design: Use Nunito font, large black text everywhere (no white text), and light rainbow shades (light blues, purples, oranges, yellows, pinks; exclude red/green except for correct/incorrect feedback). Backgrounds should be light for contrast with black text. Incorporate New Zealand cultural elements (ferns, kiwi, kōwhai flowers, tūi) in headings.
Functionality: Maintain consistency with 6 random word+sentence pairs across all sections until "Reload Cards" is pressed. Provide instant green/red feedback for activities 3–6. Use success messages ("Tino pai!", "Ka rawe!") and error messages ("Aroha mai — try again") separately from answers. Include buttons: "Reload Cards" for Vocabulary Flashcards (section 1), "Reset" per sentence for Word Order (section 6), none elsewhere.
combine with:
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). Show te aka link to confirm word is valid.
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.
Font: Nunito, BLACK TEXT EVERYWHERE (no white text), LARGE SIZES maximizing container space
Colors: Light rainbow shades only (light blues, purples, oranges, yellows, pinks) - EXCLUDE red/green (reserved for marking)
Backgrounds: LIGHT SHADES ONLY for contrast with black text
Layout: Full width, stacked vertically, responsive
Messages: Success: "Tino pai!", "Ka rawe!" | Errors: "Aroha mai — try again"
Culture: New Zealand - use ferns, kiwi, kōwhai flowers, tūi, if icons are added in headings.
CONSISTENCY: Same 6 random word+sentence pairs across ALL sections until "Reload Cards" pressed
INSTANT MARKING (sections 3-6): Immediate GREEN=correct, RED=wrong feedback
SUCCESS MESSAGES SEPARATE: Don't override actual answers - show congratulations separately
Buttons: "Reload Cards" (section 1), "Reset" per sentence (section 6), none elsewhere
Vocabulary Flashcards - 6 cards, te reo front/English back, "Reload Cards" button
Sentence Flashcards - 6 cards, te reo front/English back
Vocab Multiple Choice - 6 questions, English→te reo, instant GREEN/RED feedback
Sentence Multiple Choice - 6 questions, English→te reo, instant GREEN/RED feedback
Fill the Gaps - 6 sentences with dropdowns, instant GREEN/RED feedback
Word Order - 6 scrambled sentences with English translations shown, instant GREEN feedback when correct, individual "Reset" buttons