Embedded Files
This is not a guide, just a record of frustration along the way. Might help someone starting out. Hopefully it shows the need to use a combination of AI coding and actually taking charge of the coding and editing it yourself.
This is not a guide, just a record of frustration along the way. Might help someone starting out. Hopefully it shows the need to use a combination of AI coding and actually taking charge of the coding and editing it yourself.
AI Prompting to create HTML code:
AI Prompting to create HTML code:
Created by ChatGPT (I cut&paste working code as a start): Getting the code below took a while, working together designing the input and getting sample outputs. Fixing some errors. One of the ongoing issues is that when one thing gets fixed something that was previously awesome gets broken. It takes time! Interestingly the code below is really good, but as I ask for changes the quality declines. I wonder if the model for "fixing code" is a lower level, and it actually does more harm than good. The code for the Sentence Builder below is too long to be pasted into CoPilot, quite a cool layout style.
Created by ChatGPT (I cut&paste working code as a start): Getting the code below took a while, working together designing the input and getting sample outputs. Fixing some errors. One of the ongoing issues is that when one thing gets fixed something that was previously awesome gets broken. It takes time! Interestingly the code below is really good, but as I ask for changes the quality declines. I wonder if the model for "fixing code" is a lower level, and it actually does more harm than good. The code for the Sentence Builder below is too long to be pasted into CoPilot, quite a cool layout style.
Above: Working code thanks to ChatGPT5, however, the colour coding has gone. So I asked for that to be fixed and it was not fully fixed, and the layout was mucked up.
Above: Working code thanks to ChatGPT5, however, the colour coding has gone. So I asked for that to be fixed and it was not fully fixed, and the layout was mucked up.
My prompt: "nice, but the "build sentence" is no longer required, so remove, colour the tense, in english and maori green, the verbs red, the pronouns blue, the "ki/to i/on" black, the object purple - leave all other formating in tact"
My prompt: "nice, but the "build sentence" is no longer required, so remove, colour the tense, in english and maori green, the verbs red, the pronouns blue, the "ki/to i/on" black, the object purple - leave all other formating in tact"
My Prompt: You broke the layout, and the sentence you built in both languages did not have the colour coding, fix, and make the font of the built sentences 50% larger.
My Prompt: You broke the layout, and the sentence you built in both languages did not have the colour coding, fix, and make the font of the built sentences 50% larger.
MASSIVE ERROR introduced by CoPilot, the order of the Te Reo sentence is now WRONG. But I missed that at the time, so...I paid a high price to get the colours!
MASSIVE ERROR introduced by CoPilot, the order of the Te Reo sentence is now WRONG. But I missed that at the time, so...I paid a high price to get the colours!
Ran out of ChatGPT, so asked CoPilot:
Ran out of ChatGPT, so asked CoPilot:
My Prompt: Can you make the colours of the input fields match the colour of the output sentence and have one line for each input field "<cut&paste CODE>"
My Prompt: Can you make the colours of the input fields match the colour of the output sentence and have one line for each input field "<cut&paste CODE>"
Lots of errors to be fixed until I get something OK to use for learning:
Lots of errors to be fixed until I get something OK to use for learning:
Below is for people interested in AI:
Below is for people interested in AI:
Leading Multimodal and Language Models
Leading Multimodal and Language Models
These are the most powerful and versatile models, capable of handling a wide range of tasks.
These are the most powerful and versatile models, capable of handling a wide range of tasks.
- GPT-4o / GPT-5
Behind it: OpenAI
Behind it: OpenAI
Notable for: Widely considered a leader in general intelligence, reasoning, and multimodal capabilities, handling text, images, and audio with impressive speed and accuracy.
Notable for: Widely considered a leader in general intelligence, reasoning, and multimodal capabilities, handling text, images, and audio with impressive speed and accuracy.
- Gemini
Behind it: Google
Behind it: Google
Notable for: Strong performance in deep search, data analysis, and seamless integration within Google's ecosystem. It is a powerful all-in-one assistant, particularly for those who use Google's services.
Notable for: Strong performance in deep search, data analysis, and seamless integration within Google's ecosystem. It is a powerful all-in-one assistant, particularly for those who use Google's services.
- Claude
Behind it: Anthropic
Behind it: Anthropic
Notable for: Its strong focus on safety, ethical AI, and handling very long contexts. It's often favored for tasks requiring clean, reliable code generation and thoughtful, nuanced text.
Notable for: Its strong focus on safety, ethical AI, and handling very long contexts. It's often favored for tasks requiring clean, reliable code generation and thoughtful, nuanced text.
- Grok
Behind it: xAI
Behind it: xAI
Notable for: Its real-time knowledge and witty, often unfiltered conversational style. It is uniquely integrated with the social media platform X for up-to-the-minute information.
Notable for: Its real-time knowledge and witty, often unfiltered conversational style. It is uniquely integrated with the social media platform X for up-to-the-minute information.
- DeepSeek
Behind it: DeepSeek
Behind it: DeepSeek
Notable for: High performance in reasoning and problem-solving benchmarks, making it a strong competitor to the more established models.
Notable for: High performance in reasoning and problem-solving benchmarks, making it a strong competitor to the more established models.
- Llama
Behind it: Meta
Behind it: Meta
Notable for: This is a family of open-source models that has become a cornerstone for developers and researchers. Its open nature allows for customization and innovation.
Notable for: This is a family of open-source models that has become a cornerstone for developers and researchers. Its open nature allows for customization and innovation.
Leading Specialized Tools
Leading Specialized Tools
These generative AI tools are highly effective but are typically designed for a specific purpose.
These generative AI tools are highly effective but are typically designed for a specific purpose.
Coding Assistants
Coding Assistants
- GitHub Copilot
Behind it: GitHub (owned by Microsoft) and OpenAI
Behind it: GitHub (owned by Microsoft) and OpenAI
Notable for: An AI pair programmer that provides real-time code suggestions, completes functions, and helps with debugging. It is a dominant force in the software development world, with deep integrations into popular IDEs. It is powered by foundational models from OpenAI, and now allows users to select from a variety of models, including those from Anthropic and Google.
Notable for: An AI pair programmer that provides real-time code suggestions, completes functions, and helps with debugging. It is a dominant force in the software development world, with deep integrations into popular IDEs. It is powered by foundational models from OpenAI, and now allows users to select from a variety of models, including those from Anthropic and Google.
- Amazon Q Developer
Behind it: Amazon
Behind it: Amazon
Notable for: Amazon's answer to GitHub Copilot, it offers real-time code suggestions, security scans, and can answer questions about AWS. It is built on Amazon's proprietary Bedrock model.
Notable for: Amazon's answer to GitHub Copilot, it offers real-time code suggestions, security scans, and can answer questions about AWS. It is built on Amazon's proprietary Bedrock model.
- Tabnine
Behind it: Tabnine
Behind it: Tabnine
Notable for: This AI coding assistant focuses heavily on privacy and is known for its ability to learn from a developer's specific coding style, providing highly personalized and relevant code completions.
Notable for: This AI coding assistant focuses heavily on privacy and is known for its ability to learn from a developer's specific coding style, providing highly personalized and relevant code completions.
Image and Creative Generation
Image and Creative Generation
- Midjourney
Behind it: Midjourney, Inc.
Behind it: Midjourney, Inc.
Notable for: Produces exceptionally artistic and visually stunning images. It is a favorite for professional artists and designers who value creativity and aesthetic quality.
Notable for: Produces exceptionally artistic and visually stunning images. It is a favorite for professional artists and designers who value creativity and aesthetic quality.
- DALL-E
Behind it: OpenAI
Behind it: OpenAI
Notable for: Seamless integration into the ChatGPT platform, making it highly accessible. It is known for its ability to generate high-quality images from simple text prompts.
Notable for: Seamless integration into the ChatGPT platform, making it highly accessible. It is known for its ability to generate high-quality images from simple text prompts.
- Adobe Firefly
Behind it: Adobe Inc.
Behind it: Adobe Inc.
Notable for: Its direct integration into Adobe Creative Cloud apps, which makes it a powerful and intuitive tool for creative professionals who want to incorporate generative AI into their existing workflows.
Notable for: Its direct integration into Adobe Creative Cloud apps, which makes it a powerful and intuitive tool for creative professionals who want to incorporate generative AI into their existing workflows.
- Ideogram
Behind it: Ideogram AI
Behind it: Ideogram AI
Notable for: Excelling at a task that most other image models struggle with: generating images with accurate and legible text.
Notable for: Excelling at a task that most other image models struggle with: generating images with accurate and legible text.
Writing Assistants
Writing Assistants
- Jasper / Copy.ai
Behind it: Jasper and Copy.ai
Behind it: Jasper and Copy.ai
Notable for: These tools are powerful AI writing assistants designed for businesses and marketers. They are optimized for creating high-volume, on-brand content for blogs, social media, emails, and more.
Notable for: These tools are powerful AI writing assistants designed for businesses and marketers. They are optimized for creating high-volume, on-brand content for blogs, social media, emails, and more.
- GrammarlyGO
Behind it: Grammarly
Behind it: Grammarly
Notable for: An extension of the popular grammar checker, GrammarlyGO uses AI to help with brainstorming, drafting, and rewriting. It is a writing assistant built for a wide range of use cases.
Notable for: An extension of the popular grammar checker, GrammarlyGO uses AI to help with brainstorming, drafting, and rewriting. It is a writing assistant built for a wide range of use cases.
ChatGPT SAID: For teachers, it really depends on how you plan to use AI — lesson planning, marking, admin, student engagement, or resource creation.
ChatGPT SAID: For teachers, it really depends on how you plan to use AI — lesson planning, marking, admin, student engagement, or resource creation.
Here’s a teacher-focused comparison of Google Gemini vs ChatGPT (GPT-5):
Here’s a teacher-focused comparison of Google Gemini vs ChatGPT (GPT-5):
1. Lesson & Resource Creation
1. Lesson & Resource Creation
- ChatGPT (GPT-5)
- Strong for creative writing, brainstorming, and tailoring material to different student abilities.
- Great at producing worksheets, quizzes, role-play scripts, and differentiated learning activities.
- Can use colour-coded scaffolds, multiple-choice generators, or text simplifiers — handy for literacy & language classes.
- Has a consistent conversational memory within a chat for step-by-step building.
- Gemini
- Strong for fact-checking and research because of its real-time Google Search integration.
- Can bring in up-to-date academic articles, statistics, and images without leaving the chat.
- Handles multimodal tasks — you can paste an image (e.g., a student’s project) and get feedback or create resources from it.
- Massive token window means you can paste an entire curriculum document and have it summarised or turned into a teaching plan.
2. Classroom Use
2. Classroom Use
- ChatGPT
- Flexible for student-facing interactions (e.g., roleplay historical figures, interactive storytelling, guided problem solving).
- Can create fun and culturally responsive learning prompts, like your Te Haerenga framework.
- Less likely to block creative but harmless content that’s culturally specific or niche.
- Gemini
- Can analyse student-submitted photos, diagrams, or audio recordings instantly.
- Good for quick, accurate lookups during class (like a supercharged Google).
- More conservative filtering, which can be both a pro (safety) and a con (overblocking certain creative ideas).
3. Admin & Marking
3. Admin & Marking
- ChatGPT
- Strong in giving structured marking rubrics and feedback phrased in student-friendly language.
- Great at generating positive, growth-mindset comments in bulk.
- Can rephrase reports to meet tone guidelines without losing meaning.
- Gemini
- If you’re in Google Workspace, Gemini can directly interact with Docs, Sheets, Slides and pull content together across your drive.
- Can extract and organise marking data if you upload sheets or forms.
- Better at bulk summarising large document sets.
4. Which Wins for Teachers?
4. Which Wins for Teachers?
- If you want creative, adaptable, culturally responsive teaching materials → ChatGPT (GPT-5)
- If you want multimodal feedback, huge document handling, and Google integration → Gemini
- Best of Both → Use Gemini for research & file integration, ChatGPT for lesson design & student engagement.
If you want, I can make you a "teacher’s dual AI workflow" — where Gemini does the research & bulk data, and ChatGPT crafts the learning activities.
That way, you get the strengths of both without doubling your work.
If you want, I can make you a "teacher’s dual AI workflow" — where Gemini does the research & bulk data, and ChatGPT crafts the learning activities.
That way, you get the strengths of both without doubling your work.
Embed <Code>: Copy & Paste Below
Embed <Code>: Copy & Paste Below
Make your OWN sentence builder?
Make your OWN sentence builder?
If you want to play with embedding code into YOUR google site, you could start with the working code below. You can change the VERBS & FEELINGS manually (or cut&paste the code to AI and say "change the verbs and feelings to...".
If you want to play with embedding code into YOUR google site, you could start with the working code below. You can change the VERBS & FEELINGS manually (or cut&paste the code to AI and say "change the verbs and feelings to...".
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="mi">
<html lang="mi">
<head>
<head>
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Te Reo Māori Sentence Builder</title>
<title>Te Reo Māori Sentence Builder</title>
<style>
<style>
body {
body {
font-family: Arial, sans-serif;
font-family: Arial, sans-serif;
font-size: 1.5em;
font-size: 1.5em;
padding: 20px;
padding: 20px;
background-color: #f0f8ff;
background-color: #f0f8ff;
color: #333;
color: #333;
}
}
h1 {
h1 {
color: #006400;
color: #006400;
text-align: center;
text-align: center;
}
}
.input-row {
.input-row {
display: flex;
display: flex;
align-items: center;
align-items: center;
gap: 10px;
gap: 10px;
margin: 15px auto;
margin: 15px auto;
width: 90%;
width: 90%;
max-width: 600px;
max-width: 600px;
}
}
label {
label {
flex: 1.2;
flex: 1.2;
}
}
select {
select {
flex: 2;
flex: 2;
font-size: 1em;
font-size: 1em;
}
}
button {
button {
display: block;
display: block;
margin: 15px auto;
margin: 15px auto;
width: 90%;
width: 90%;
max-width: 600px;
max-width: 600px;
padding: 10px;
padding: 10px;
background-color: #006400;
background-color: #006400;
color: white;
color: white;
border: none;
border: none;
border-radius: 5px;
border-radius: 5px;
font-size: 1em;
font-size: 1em;
}
}
#output {
#output {
margin-top: 30px;
margin-top: 30px;
text-align: center;
text-align: center;
font-weight: bold;
font-weight: bold;
}
}
.tense { color: green; }
.tense { color: green; }
.pronoun { color: blue; }
.pronoun { color: blue; }
.verb { color: red; }
.verb { color: red; }
.feeling { color: orange; }
.feeling { color: orange; }
</style>
</style>
</head>
</head>
<body>
<body>
<h1>Te Reo Māori Sentence Builder</h1>
<h1>Te Reo Māori Sentence Builder</h1>
<div class="input-row">
<div class="input-row">
<label for="tense">Tense Marker:</label>
<label for="tense">Tense Marker:</label>
<select id="tense">
<select id="tense">
<option value="Kei te">Kei te (Present)</option>
<option value="Kei te">Kei te (Present)</option>
<option value="I">I (Past)</option>
<option value="I">I (Past)</option>
<option value="Ka">Ka (Future)</option>
<option value="Ka">Ka (Future)</option>
<option value="Kua">Kua (Perfect)</option>
<option value="Kua">Kua (Perfect)</option>
<option value="E">E...ana (Continuous)</option>
<option value="E">E...ana (Continuous)</option>
</select>
</select>
</div>
</div>
<div class="input-row">
<div class="input-row">
<label for="verb">Verb or Feeling:</label>
<label for="verb">Verb or Feeling:</label>
<select id="verb">
<select id="verb">
<option value="oma">oma (run)</option>
<option value="oma">oma (run)</option>
<option value="kai">kai (eat)</option>
<option value="kai">kai (eat)</option>
<option value="pānui">pānui (read)</option>
<option value="pānui">pānui (read)</option>
<option value="mahi">mahi (work)</option>
<option value="mahi">mahi (work)</option>
<option value="tākaro">tākaro (play)</option>
<option value="tākaro">tākaro (play)</option>
<option value="harikoa">harikoa (happy)</option>
<option value="harikoa">harikoa (happy)</option>
<option value="ngenge">ngenge (tired)</option>
<option value="ngenge">ngenge (tired)</option>
<option value="pōuri">pōuri (sad)</option>
<option value="pōuri">pōuri (sad)</option>
<option value="hiamoe">hiamoe (sleepy)</option>
<option value="hiamoe">hiamoe (sleepy)</option>
<option value="pukuriri">pukuriri (angry)</option>
<option value="pukuriri">pukuriri (angry)</option>
</select>
</select>
</div>
</div>
<div class="input-row">
<div class="input-row">
<label for="pronoun">Pronoun:</label>
<label for="pronoun">Pronoun:</label>
<select id="pronoun">
<select id="pronoun">
<option value="ahau">ahau (I)</option>
<option value="ahau">ahau (I)</option>
<option value="ia">ia (he/she)</option>
<option value="ia">ia (he/she)</option>
<option value="koe">koe (you)</option>
<option value="koe">koe (you)</option>
<option value="tāua">tāua (you and I)</option>
<option value="tāua">tāua (you and I)</option>
<option value="māua">māua (we two, not you)</option>
<option value="māua">māua (we two, not you)</option>
<option value="tātou">tātou (we all)</option>
<option value="tātou">tātou (we all)</option>
<option value="mātou">mātou (we all, not you)</option>
<option value="mātou">mātou (we all, not you)</option>
<option value="kōrua">kōrua (you two)</option>
<option value="kōrua">kōrua (you two)</option>
<option value="koutou">koutou (you all)</option>
<option value="koutou">koutou (you all)</option>
<option value="rāua">rāua (those two)</option>
<option value="rāua">rāua (those two)</option>
<option value="rātou">rātou (they all)</option>
<option value="rātou">rātou (they all)</option>
</select>
</select>
</div>
</div>
<button onclick="generateSentence()">Generate Sentence</button>
<button onclick="generateSentence()">Generate Sentence</button>
<div id="output"></div>
<div id="output"></div>
<script>
<script>
function generateSentence() {
function generateSentence() {
const tense = document.getElementById("tense").value;
const tense = document.getElementById("tense").value;
const verb = document.getElementById("verb").value;
const verb = document.getElementById("verb").value;
const pronoun = document.getElementById("pronoun").value;
const pronoun = document.getElementById("pronoun").value;
const feelings = ["harikoa", "ngenge", "pōuri", "hiamoe", "pukuriri"];
const feelings = ["harikoa", "ngenge", "pōuri", "hiamoe", "pukuriri"];
const verbClass = feelings.includes(verb) ? "feeling" : "verb";
const verbClass = feelings.includes(verb) ? "feeling" : "verb";
const teReoSentence = (tense === "E")
const teReoSentence = (tense === "E")
? `<span class='tense'>E</span> <span class='${verbClass}'>${verb}</span> <span class='tense'>ana</span> <span class='pronoun'>${pronoun}</span>.`
? `<span class='tense'>E</span> <span class='${verbClass}'>${verb}</span> <span class='tense'>ana</span> <span class='pronoun'>${pronoun}</span>.`
: `<span class='tense'>${tense}</span> <span class='${verbClass}'>${verb}</span> <span class='pronoun'>${pronoun}</span>.`;
: `<span class='tense'>${tense}</span> <span class='${verbClass}'>${verb}</span> <span class='pronoun'>${pronoun}</span>.`;
const englishPronouns = {
const englishPronouns = {
"ahau": "I",
"ahau": "I",
"koe": "You",
"koe": "You",
"ia": "He/She",
"ia": "He/She",
"tāua": "You and I",
"tāua": "You and I",
"māua": "We two (not you)",
"māua": "We two (not you)",
"tātou": "We all",
"tātou": "We all",
"mātou": "We all (not you)",
"mātou": "We all (not you)",
"kōrua": "You two",
"kōrua": "You two",
"koutou": "You all",
"koutou": "You all",
"rāua": "Those two",
"rāua": "Those two",
"rātou": "They all"
"rātou": "They all"
};
};
const englishVerbs = {
const englishVerbs = {
"oma": ["run", "ran", "run", "run", "running"],
"oma": ["run", "ran", "run", "run", "running"],
"kai": ["eat", "ate", "eat", "eaten", "eating"],
"kai": ["eat", "ate", "eat", "eaten", "eating"],
"pānui": ["read", "read", "read", "read", "reading"],
"pānui": ["read", "read", "read", "read", "reading"],
"mahi": ["work", "worked", "work", "worked", "working"],
"mahi": ["work", "worked", "work", "worked", "working"],
"tākaro": ["play", "played", "play", "played", "playing"],
"tākaro": ["play", "played", "play", "played", "playing"],
"harikoa": ["happy", "was happy", "be happy", "been happy", "being happy"],
"harikoa": ["happy", "was happy", "be happy", "been happy", "being happy"],
"ngenge": ["tired", "was tired", "be tired", "been tired", "being tired"],
"ngenge": ["tired", "was tired", "be tired", "been tired", "being tired"],
"pōuri": ["sad", "was sad", "be sad", "been sad", "being sad"],
"pōuri": ["sad", "was sad", "be sad", "been sad", "being sad"],
"hiamoe": ["sleepy", "was sleepy", "be sleepy", "been sleepy", "being sleepy"],
"hiamoe": ["sleepy", "was sleepy", "be sleepy", "been sleepy", "being sleepy"],
"pukuriri": ["angry", "was angry", "be angry", "been angry", "being angry"]
"pukuriri": ["angry", "was angry", "be angry", "been angry", "being angry"]
};
};
const subject = englishPronouns[pronoun];
const subject = englishPronouns[pronoun];
const verbForms = englishVerbs[verb];
const verbForms = englishVerbs[verb];
function getAuxiliary(subj) {
function getAuxiliary(subj) {
if (subj === "I") return "am";
if (subj === "I") return "am";
if (subj === "He/She") return "is";
if (subj === "He/She") return "is";
return "are";
return "are";
}
}
function isPlural(subj) {
function isPlural(subj) {
return [
return [
"You and I", "We two (not you)", "We all", "We all (not you)",
"You and I", "We two (not you)", "We all", "We all (not you)",
"You two", "You all", "Those two", "They all"
"You two", "You all", "Those two", "They all"
].includes(subj);
].includes(subj);
}
}
let englishSentence = "";
let englishSentence = "";
if (tense === "Kei te" || tense === "E") {
if (tense === "Kei te" || tense === "E") {
englishSentence = `<span class='pronoun'>${subject}</span> <span class='tense'>${getAuxiliary(subject)}</span> <span class='${verbClass}'>${verbForms[4]}</span>.`;
englishSentence = `<span class='pronoun'>${subject}</span> <span class='tense'>${getAuxiliary(subject)}</span> <span class='${verbClass}'>${verbForms[4]}</span>.`;
} else if (tense === "I") {
} else if (tense === "I") {
if (feelings.includes(verb)) {
if (feelings.includes(verb)) {
const wasWere = isPlural(subject) ? "were" : "was";
const wasWere = isPlural(subject) ? "were" : "was";
englishSentence = `<span class='pronoun'>${subject}</span> <span class='tense'>${wasWere}</span> <span class='${verbClass}'>${verbForms[0]}</span>.`;
englishSentence = `<span class='pronoun'>${subject}</span> <span class='tense'>${wasWere}</span> <span class='${verbClass}'>${verbForms[0]}</span>.`;
} else {
} else {
englishSentence = `<span class='pronoun'>${subject}</span> <span class='${verbClass}'>${verbForms[1]}</span>.`;
englishSentence = `<span class='pronoun'>${subject}</span> <span class='${verbClass}'>${verbForms[1]}</span>.`;
}
}
} else if (tense === "Ka") {
} else if (tense === "Ka") {
englishSentence = `<span class='pronoun'>${subject}</span> <span class='tense'>will</span> <span class='${verbClass}'>${verbForms[2]}</span>.`;
englishSentence = `<span class='pronoun'>${subject}</span> <span class='tense'>will</span> <span class='${verbClass}'>${verbForms[2]}</span>.`;
} else if (tense === "Kua") {
} else if (tense === "Kua") {
englishSentence = `<span class='pronoun'>${subject}</span> <span class='tense'>have</span> <span class='${verbClass}'>${verbForms[3]}</span>.`;
englishSentence = `<span class='pronoun'>${subject}</span> <span class='tense'>have</span> <span class='${verbClass}'>${verbForms[3]}</span>.`;
}
}
englishSentence = englishSentence.charAt(0).toUpperCase() + englishSentence.slice(1);
englishSentence = englishSentence.charAt(0).toUpperCase() + englishSentence.slice(1);
document.getElementById("output").innerHTML = `
document.getElementById("output").innerHTML = `
<p><strong><h2>${teReoSentence}</strong></h2></p>
<p><strong><h2>${teReoSentence}</strong></h2></p>
<p><strong><h2>${englishSentence}</strong></h2></p>
<p><strong><h2>${englishSentence}</strong></h2></p>
`;
`;
}
}
</script>
</script>
</body>
</body>
</html>
</html>
Output:
Output:
Te Reo Māori Pāngarau Pātaitaitanga
Te Reo Māori Pāngarau Pātaitaitanga
Can you read the code? Can you work out how to make 10 questions instead of 5? Can you see how you might change the levels?
Can you read the code? Can you work out how to make 10 questions instead of 5? Can you see how you might change the levels?
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="mi">
<html lang="mi">
<head>
<head>
<meta charset="UTF-8">
<meta charset="UTF-8">
<title>Te Reo Māori Pāngarau Pātaitaitanga</title>
<title>Te Reo Māori Pāngarau Pātaitaitanga</title>
<style>
<style>
body, input, button {
body, input, button {
font-family: Arial, sans-serif;
font-family: Arial, sans-serif;
font-size: 24px;
font-size: 24px;
}
}
.correct { color: green; }
.correct { color: green; }
.incorrect { color: red; }
.incorrect { color: red; }
.equals-green, .equals-red { font-weight: bold; }
.equals-green, .equals-red { font-weight: bold; }
.equals-green { color: green; }
.equals-green { color: green; }
.equals-red { color: red; }
.equals-red { color: red; }
.difficulty-button {
.difficulty-button {
padding: 10px 20px;
padding: 10px 20px;
margin: 5px;
margin: 5px;
border: none;
border: none;
cursor: pointer;
cursor: pointer;
font-size: 24px;
font-size: 24px;
}
}
#easy { background-color: green; color: white; }
#easy { background-color: green; color: white; }
#medium { background-color: orange; color: white; }
#medium { background-color: orange; color: white; }
#hard { background-color: red; color: white; }
#hard { background-color: red; color: white; }
#regenerate { background-color: gray; color: white; }
#regenerate { background-color: gray; color: white; }
.ka-puta { color: purple; }
.ka-puta { color: purple; }
.operation { color: purple; }
.operation { color: purple; }
</style>
</style>
</head>
</head>
<body>
<body>
<h2>Te Reo Māori Pāngarau Pātaitaitanga</h2>
<h2>Te Reo Māori Pāngarau Pātaitaitanga</h2>
<h3><span class="operation">+</span> tāpiri, <span class="operation">-</span> tango, <span class="operation">*</span> whakarau, <span class="operation">/</span> whakawehe, <span class="ka-puta">= ka puta</span></h3>
<h3><span class="operation">+</span> tāpiri, <span class="operation">-</span> tango, <span class="operation">*</span> whakarau, <span class="operation">/</span> whakawehe, <span class="ka-puta">= ka puta</span></h3>
<div>
<div>
<button class="difficulty-button" id="easy" onclick="generateQuiz('easy')">Ngāwari</button>
<button class="difficulty-button" id="easy" onclick="generateQuiz('easy')">Ngāwari</button>
<button class="difficulty-button" id="medium" onclick="generateQuiz('medium')">Waenga</button>
<button class="difficulty-button" id="medium" onclick="generateQuiz('medium')">Waenga</button>
<button class="difficulty-button" id="hard" onclick="generateQuiz('hard')">Uaua</button>
<button class="difficulty-button" id="hard" onclick="generateQuiz('hard')">Uaua</button>
<button class="difficulty-button" id="regenerate" onclick="generateQuiz(currentDifficulty)">Anō</button>
<button class="difficulty-button" id="regenerate" onclick="generateQuiz(currentDifficulty)">Anō</button>
</div>
</div>
<form id="quiz-form"></form>
<form id="quiz-form"></form>
<script>
<script>
const numberWords = [
const numberWords = [
"kore", "tahi", "rua", "toru", "whā", "rima", "ono", "whitu", "waru", "iwa", "tekau",
"kore", "tahi", "rua", "toru", "whā", "rima", "ono", "whitu", "waru", "iwa", "tekau",
"tekau mā tahi", "tekau mā rua", "tekau mā toru", "tekau mā whā", "tekau mā rima",
"tekau mā tahi", "tekau mā rua", "tekau mā toru", "tekau mā whā", "tekau mā rima",
"tekau mā ono", "tekau mā whitu", "tekau mā waru", "tekau mā iwa", "rua tekau",
"tekau mā ono", "tekau mā whitu", "tekau mā waru", "tekau mā iwa", "rua tekau",
"rua tekau mā tahi", "rua tekau mā rua", "rua tekau mā toru", "rua tekau mā whā",
"rua tekau mā tahi", "rua tekau mā rua", "rua tekau mā toru", "rua tekau mā whā",
"rua tekau mā rima", "rua tekau mā ono", "rua tekau mā whitu", "rua tekau mā waru",
"rua tekau mā rima", "rua tekau mā ono", "rua tekau mā whitu", "rua tekau mā waru",
"rua tekau mā iwa", "toru tekau", "toru tekau mā tahi", "toru tekau mā rua",
"rua tekau mā iwa", "toru tekau", "toru tekau mā tahi", "toru tekau mā rua",
"toru tekau mā toru", "toru tekau mā whā", "toru tekau mā rima", "toru tekau mā ono",
"toru tekau mā toru", "toru tekau mā whā", "toru tekau mā rima", "toru tekau mā ono",
"toru tekau mā whitu", "toru tekau mā waru", "toru tekau mā iwa", "whā tekau"
"toru tekau mā whitu", "toru tekau mā waru", "toru tekau mā iwa", "whā tekau"
];
];
const operations = {
const operations = {
"+": "tāpiri",
"+": "tāpiri",
"-": "tango",
"-": "tango",
"*": "whakarau",
"*": "whakarau",
"/": "whakawehe"
"/": "whakawehe"
};
};
let currentDifficulty = "medium";
let currentDifficulty = "medium";
function getMaoriNumber(n) {
function getMaoriNumber(n) {
return numberWords[n] || n;
return numberWords[n] || n;
}
}
function generateQuiz(difficulty) {
function generateQuiz(difficulty) {
currentDifficulty = difficulty;
currentDifficulty = difficulty;
const form = document.getElementById("quiz-form");
const form = document.getElementById("quiz-form");
form.innerHTML = "";
form.innerHTML = "";
let questions = [];
let questions = [];
while (questions.length < 5) {
while (questions.length < 5) {
let a = Math.floor(Math.random() * 21);
let a = Math.floor(Math.random() * 21);
let b = Math.floor(Math.random() * 21);
let b = Math.floor(Math.random() * 21);
let op = "+";
let op = "+";
let answer = a + b;
let answer = a + b;
if (difficulty === "easy") {
if (difficulty === "easy") {
if (answer > 15) continue;
if (answer > 15) continue;
} else if (difficulty === "hard") {
} else if (difficulty === "hard") {
const ops = ["+", "-", "*", "/"];
const ops = ["+", "-", "*", "/"];
op = ops[Math.floor(Math.random() * ops.length)];
op = ops[Math.floor(Math.random() * ops.length)];
if (op === "+") {
if (op === "+") {
answer = a + b;
answer = a + b;
} else if (op === "-") {
} else if (op === "-") {
if (a < b) [a, b] = [b, a];
if (a < b) [a, b] = [b, a];
answer = a - b;
answer = a - b;
} else if (op === "*") {
} else if (op === "*") {
a = Math.floor(Math.random() * 11);
a = Math.floor(Math.random() * 11);
b = Math.floor(Math.random() * 11);
b = Math.floor(Math.random() * 11);
answer = a * b;
answer = a * b;
} else if (op === "/") {
} else if (op === "/") {
b = Math.floor(Math.random() * 10) + 1;
b = Math.floor(Math.random() * 10) + 1;
answer = Math.floor(Math.random() * 10);
answer = Math.floor(Math.random() * 10);
a = b * answer;
a = b * answer;
}
}
}
}
questions.push({ a, b, op, answer });
questions.push({ a, b, op, answer });
}
}
questions.forEach((q, i) => {
questions.forEach((q, i) => {
const maoriQuestion = `<strong>${getMaoriNumber(q.a)}</strong> <span class='operation'>${operations[q.op]}</span> <strong>${getMaoriNumber(q.b)}</strong> <span class='ka-puta'>ka puta</span>`;
const maoriQuestion = `<strong>${getMaoriNumber(q.a)}</strong> <span class='operation'>${operations[q.op]}</span> <strong>${getMaoriNumber(q.b)}</strong> <span class='ka-puta'>ka puta</span>`;
const div = document.createElement("div");
const div = document.createElement("div");
div.innerHTML = `
div.innerHTML = `
<div>
<div>
<label>${i + 1}. ${maoriQuestion}:</label>
<label>${i + 1}. ${maoriQuestion}:</label>
<input type="text" id="q${i}" data-a="${q.a}" data-b="${q.b}" data-op="${q.op}" data-answer="${q.answer}">
<input type="text" id="q${i}" data-a="${q.a}" data-b="${q.b}" data-op="${q.op}" data-answer="${q.answer}">
</div>
</div>
<div id="feedback${i}" class="feedback-line"></div>
<div id="feedback${i}" class="feedback-line"></div>
`;
`;
form.appendChild(div);
form.appendChild(div);
});
});
const submitBtn = document.createElement("button");
const submitBtn = document.createElement("button");
submitBtn.textContent = "māka";
submitBtn.textContent = "māka";
submitBtn.type = "button";
submitBtn.type = "button";
submitBtn.onclick = checkAnswers;
submitBtn.onclick = checkAnswers;
form.appendChild(submitBtn);
form.appendChild(submitBtn);
}
}
function checkAnswers() {
function checkAnswers() {
for (let i = 0; i < 5; i++) {
for (let i = 0; i < 5; i++) {
const input = document.getElementById("q" + i);
const input = document.getElementById("q" + i);
const feedback = document.getElementById("feedback" + i);
const feedback = document.getElementById("feedback" + i);
const a = parseInt(input.getAttribute("data-a"));
const a = parseInt(input.getAttribute("data-a"));
const b = parseInt(input.getAttribute("data-b"));
const b = parseInt(input.getAttribute("data-b"));
const op = input.getAttribute("data-op");
const op = input.getAttribute("data-op");
const correctAnswer = parseFloat(input.getAttribute("data-answer"));
const correctAnswer = parseFloat(input.getAttribute("data-answer"));
let userAnswer = input.value.trim().toLowerCase();
let userAnswer = input.value.trim().toLowerCase();
if (!isNaN(userAnswer)) {
if (!isNaN(userAnswer)) {
userAnswer = parseFloat(userAnswer);
userAnswer = parseFloat(userAnswer);
} else {
} else {
userAnswer = numberWords.indexOf(userAnswer);
userAnswer = numberWords.indexOf(userAnswer);
}
}
const isCorrect = userAnswer === correctAnswer;
const isCorrect = userAnswer === correctAnswer;
const colorClass = isCorrect ? "correct" : "incorrect";
const colorClass = isCorrect ? "correct" : "incorrect";
const equalsClass = isCorrect ? "equals-green" : "equals-red";
const equalsClass = isCorrect ? "equals-green" : "equals-red";
const mathEquation = `<strong>${a}</strong> <span class='operation'>${op}</span> <strong>${b}</strong> <span class='${equalsClass}'>=</span> <strong>${correctAnswer}</strong>`;
const mathEquation = `<strong>${a}</strong> <span class='operation'>${op}</span> <strong>${b}</strong> <span class='${equalsClass}'>=</span> <strong>${correctAnswer}</strong>`;
const maoriEquation = `<strong>${getMaoriNumber(a)}</strong> <span class='operation'>${operations[op]}</span> <strong>${getMaoriNumber(b)}</strong> <span class='ka-puta'>ka puta</span> <strong>${getMaoriNumber(correctAnswer)}</strong>`;
const maoriEquation = `<strong>${getMaoriNumber(a)}</strong> <span class='operation'>${operations[op]}</span> <strong>${getMaoriNumber(b)}</strong> <span class='ka-puta'>ka puta</span> <strong>${getMaoriNumber(correctAnswer)}</strong>`;
feedback.innerHTML = (isCorrect ? "✅ Tika! " : "❌ Hē ") + mathEquation + " — " + maoriEquation;
feedback.innerHTML = (isCorrect ? "✅ Tika! " : "❌ Hē ") + mathEquation + " — " + maoriEquation;
feedback.className = colorClass;
feedback.className = colorClass;
}
}
}
}
generateQuiz(currentDifficulty);
generateQuiz(currentDifficulty);
</script>
</script>
</body>
</body>
</html>
</html>
Output:
Output:
Video (No Sound) Showing Code Being cut&paste & embed
Video (No Sound) Showing Code Being cut&paste & embed
rjb-bbcj-wge (2025-08-13 08:43 GMT+12)Page updated
Google Sites
Report abuse