AI Code Example

This code (which is far from perfect) is provided so you can play, cut&paste the code into your google site, then change up the code and see what you can achive. If you break it, just cut&paste again, start fresh. The images below show you where to PASTE.

ChatGPT Code:

<!DOCTYPE html>

<head>

<title>Te Reo Māori Cooking Sentence Builder</title>

<style>

:root {

--pale-green: #eaf7ea; /* light pale green background */

--accent: #236b2b;

--muted: #333;

--card-bg: #ffffff;

}

html,body {

height: 100%;

margin: 0;

font-family: "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;

background: var(--pale-green);

color: var(--muted);

}

.wrap {

max-width: 820px;

margin: 28px auto;

padding: 20px;

}

header {

text-align: center;

margin-bottom: 18px;

}

h1 {

margin: 0 0 6px 0;

color: var(--accent);

font-size: 1.6rem;

}

p.sub {

margin: 0;

opacity: 0.85;

}

.card {

background: var(--card-bg);

padding: 16px;

border-radius: 12px;

box-shadow: 0 6px 18px rgba(0,0,0,0.06);

}

.grid {

display: grid;

grid-template-columns: 1fr;

gap: 12px;

}

@media(min-width:720px){

.grid {

grid-template-columns: 1fr 1fr;

}

label {

display: block;

font-weight: 600;

margin-bottom: 6px;

}

select, button {

width: 100%;

padding: 10px 12px;

font-size: 1rem;

border-radius: 8px;

border: 1px solid #cfe6cf;

background: #fff;

box-sizing: border-box;

}

.controls-row {

display: grid;

gap: 12px;

margin-bottom: 8px;

}

.big-button {

margin-top: 12px;

background: var(--accent);

color: white;

font-weight: 700;

border: none;

cursor: pointer;

}

#outputWrap {

margin-top: 18px;

text-align: center;

}

#maoriOut {

font-size: 1.4rem;

font-weight: 700;

color: #0b5137;

margin-bottom: 8px;

}

#engOut {

font-size: 1.1rem;

color: #333;

}

.hint {

font-size: 0.9rem;

color: #496a49;

margin-top: 8px;

}

</style>

</head>

<body>

<h1>Te Reo Māori — Tunu Kai Sentence Builder</h1>

<p class="sub">Pick tense, verb, who does it, and the object. The sentence will be built correctly (includes <em>a</em> before personal names).</p>

</header>

<div>

<label for="tense">Tense / Aspect</label>

<option value="Kei te">Kei te (Present)</option>

<option value="E">E...ana (Continuous)</option>

<option value="Ka">Ka (Future)</option>

<option value="Kua">Kua (Perfect)</option>

</select>

</div>

<div>

<label for="verb">Verb (Tūmahi)</label>

<option value="tunu">tunu (cook / bake / grill)</option>

<option value="tapatapahi">tapatapahi (chop / slice)</option>

<option value="whakakōhua">whakakōhua (boil)</option>

<option value="whakaranu">whakaranu (mix / combine)</option>

<option value="tāpiri">tāpiri (add)</option>

</select>

</div>

<div>

<label for="subject">Person / Group</label>

<option value="Aroha rāua ko Wiremu" data-name="true" data-en="Aroha and Wiremu" data-plural="true">Aroha rāua ko Wiremu</option>

<option value="Ngā kōtiro" data-name="false" data-en="The girls" data-plural="true">Ngā kōtiro</option>

<option value="Te whānau" data-name="false" data-en="The family" data-plural="true">Te whānau</option>

</select>

</div>

<div>

<label for="object">Object (changes by verb)</label>

</select>

</div>

<button class="big-button" onclick="generateSentence()">Build sentence</button>

<div class="hint">Tip: use the verb choices for cooking actions — the object list updates automatically.</div>

</div>

</div>

// object options stored WITHOUT leading article. article = 'i te' or 'i ngā' etc.

const objectOptions = {

"tunu": [

{ mi: "keke", en: "the cake", article: "i te" },

{ mi: "ika", en: "the fish", article: "i ngā" }, // plural

{ mi: "mīti", en: "the meat", article: "i te" }

],

"tapatapahi": [

{ mi: "huawhenua", en: "the vegetables", article: "i ngā" },

{ mi: "rīwai", en: "the potato", article: "i te" },

{ mi: "kāroti", en: "the carrot", article: "i te" }

],

"whakakōhua": [

{ mi: "heihei", en: "the chickens", article: "i ngā" },

{ mi: "mīti", en: "the meat", article: "i te" },

{ mi: "rīwai", en: "the potato", article: "i te" }

],

"whakaranu": [

// For compounds: give mi without leading 'te' on the first noun, article supplies 'i te' or 'i ngā'

{ mi: "ngā kai", en: "the ingredients", article: "i ngā" }, // keep 'ngā' inside mi for natural phrasing

{ mi: "pata me te huka", en: "the butter and sugar", article: "i te" },

{ mi: "paraoa me te wai", en: "the flour and water", article: "i te" }

],

"tāpiri": [

{ mi: "tōtē", en: "the salt", article: "i te" }, // note macron optional depending on fonts

{ mi: "huka", en: "the sugar", article: "i te" },

{ mi: "rēmana", en: "the lemons", article: "i ngā" }

]

};

// English verb forms

const enVerbs = {

"tunu": { base: "cook", past: "cooked", pastPart: "cooked", prog: "cooking" },

"tapatapahi": { base: "chop", past: "chopped", pastPart: "chopped", prog: "chopping" },

"whakakōhua": { base: "boil", past: "boiled", pastPart: "boiled", prog: "boiling" },

"whakaranu": { base: "mix", past: "mixed", pastPart: "mixed", prog: "mixing" },

"tāpiri": { base: "add", past: "added", pastPart: "added", prog: "adding" }

};

const verbSelect = document.getElementById("verb");

const objectSelect = document.getElementById("object");

const subjectSelect = document.getElementById("subject");

const tenseSelect = document.getElementById("tense");

function updateObjects() {

const v = verbSelect.value;

objectSelect.innerHTML = "";

(objectOptions[v] || []).forEach(obj => {

const opt = document.createElement("option");

// store the object data as JSON in the option value

opt.value = JSON.stringify(obj);

// display nicely: drop the leading 'i ' from article for clarity (show 'te keke' or 'ngā huawhenua')

let displayArticle = obj.article.replace(/^i\s+/, "");

// If mi already contains 'ngā' (as the ingredients one does), don't double up

if (/^ngā\s+/i.test(obj.mi)) {

opt.textContent = obj.mi; // e.g. "ngā kai"

} else {

opt.textContent = `${displayArticle} ${obj.mi}`; // e.g. "te keke" or "ngā huawhenua"

}

objectSelect.appendChild(opt);

});

// ensure UI updates to a sensible default

if (objectSelect.options.length > 0) objectSelect.selectedIndex = 0;

}

function needsAPrefix(optEl) {

// returns true if we should put 'a ' before the subject in te reo

return optEl.dataset.name === "true";

}

function isPluralOpt(optEl) {

return optEl.dataset.plural === "true";

}

function engSubject(optEl) {

// English label for the subject (from data-en)

return optEl.dataset.en || optEl.value;

}

function generateSentence() {

const tense = tenseSelect.value; // Kei te, E, I, Ka, Kua

const verb = verbSelect.value; // tunu, tapatapahi ...

const subjEl = subjectSelect.options[subjectSelect.selectedIndex];

const subjValue = subjectSelect.value;

const subjIsName = needsAPrefix(subjEl);

const subjIsPlural = isPluralOpt(subjEl);

const subjEng = engSubject(subjEl);

// Get object data:

let objData = { mi: "", en: "", article: "i te" };

try {

objData = JSON.parse(objectSelect.value);

} catch (e) {

// nothing selected yet

}

// Build te reo subject: add 'a ' before personal names (but not for pronouns like 'au' / 'koe')

const maoriSubject = subjIsName ? `a ${subjValue}` : subjValue;

// Build te reo object phrase: article + ' ' + mi

// If mi already starts with 'ngā', use it raw (objectOptions has one case: 'ngā kai')

let maoriObjectPhrase;

if (/^ngā\s+/i.test(objData.mi)) {

// 'ngā kai' already complete, but ensure article is 'i ngā'

maoriObjectPhrase = `${objData.article} ${objData.mi.replace(/^ngā\s+/i, objData.article.replace(/^i\s+/, ''))}`;

// simpler way: use article + bare noun (mi without 'ngā')

maoriObjectPhrase = `${objData.article} ${objData.mi.replace(/^ngā\s+/i, objData.mi.replace(/^ngā\s+/i, '').trim())}`;

// however to keep it simple (and avoid awkwardness), just build article + noun without double-ngā:

const noun = objData.mi.replace(/^ngā\s+/i, objData.mi.replace(/^ngā\s+/i, '').trim());

maoriObjectPhrase = `${objData.article} ${noun}`;

} else {

maoriObjectPhrase = `${objData.article} ${objData.mi}`.trim();

}

// If objectOptions used 'ngā kai' and article 'i ngā', earlier logic yields correct "i ngā kai".

// Final Māori sentence:

let maoriSentence = "";

if (tense === "E") {

// E verb ana [subject] [i te/ngā] [noun].

maoriSentence = `E ${verb} ana ${maoriSubject} ${maoriObjectPhrase}.`;

} else {

// Kei te / I / Ka / Kua

maoriSentence = `${tense} ${verb} ${maoriSubject} ${maoriObjectPhrase}.`;

}

// Clean up possible duplicate spaces:

maoriSentence = maoriSentence.replace(/\s+/g, " ").replace(/\s+\./, ".");

// English sentence generation

const vforms = enVerbs[verb] || { base: verb, past: verb + "ed", pastPart: verb + "ed", prog: verb + "ing" };

let englishSentence = "";

if (tense === "Kei te" || tense === "E") {

// present progressive

const aux = subjIsPlural ? "are" : (subjEng.toLowerCase() === "i" ? "am" : "is");

englishSentence = `${subjEng} ${aux} ${vforms.prog} ${objData.en}.`;

} else if (tense === "I") {

// past

englishSentence = `${subjEng} ${vforms.past} ${objData.en}.`;

} else if (tense === "Ka") {

// future

englishSentence = `${subjEng} will ${vforms.base} ${objData.en}.`;

} else if (tense === "Kua") {

// perfect

const aux = subjIsPlural ? "have" : (subjEng.toLowerCase() === "i" ? "have" : "has");

englishSentence = `${subjEng} ${aux} ${vforms.pastPart} ${objData.en}.`;

}

// Minor clean-ups (no double words, tidy spacing)

englishSentence = englishSentence.replace(/\s+/g, " ").trim();

document.getElementById("maoriOut").textContent = maoriSentence;

document.getElementById("engOut").textContent = englishSentence;

}

// initial population

updateObjects();

// initial sentence

generateSentence();

// keep sentences live when user changes selects

verbSelect.addEventListener("change", () => { updateObjects(); generateSentence(); });

objectSelect.addEventListener("change", generateSentence);

subjectSelect.addEventListener("change", generateSentence);

tenseSelect.addEventListener("change", generateSentence);

</script>

</body>

</html>

ChatGPT Code: Output:

Copilot Code:

<!DOCTYPE html>

<head>

<title>E hia / Kia hia / Tokohia – Hanga Rerenga</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f0fff0;

padding: 20px;

font-size: 1.3em;

}

.input-row {

margin: 10px 0;

}

label {

margin-right: 10px;

font-weight: bold;

}

select {

padding: 5px;

font-size: 1em;

font-family: inherit;

}

.green select, .green label { color: green; }

.blue select, .blue label { color: blue; }

.purple select, .purple label { color: purple; }

.red select, .red label { color: red; }

.output {

margin-top: 20px;

font-weight: bold;

}

.green { color: green; }

.blue { color: blue; }

.purple { color: purple; }

.red { color: red; }

</style>

</head>

<body>

<h2>E hia / Kia hia / Tokohia – Hanga Rerenga</h2>

<label for="structure">Structure:</label>

<option value="Tokohia|How many people">Tokohia</option>

</select>

</div>

<option value="ngā āporo|apples|thing">ngā āporo</option>

<option value="ngā pukapuka|books|thing">ngā pukapuka</option>

<option value="ngā motokā|cars|thing">ngā motokā</option>

<option value="ngā tamariki|children|person">ngā tamariki</option>

<option value="ngā ākonga|students|person">ngā ākonga</option>

<option value="ngā kaiako|teachers|person">ngā kaiako</option>

</select>

</div>

<label for="subject">Subject/Agent:</label>

<option value="mō mātou|for us|thing|mō mātou|for us">mō mātou</option>

<option value="mō rātou|for them|thing|mō rātou|for them">mō rātou</option>

<option value="i te akomanga|in the classroom|person|i te akomanga|in the classroom">i te akomanga</option>

<option value="i te papa tākaro|on the field|person|i te papa tākaro|on the field">i te papa tākaro</option>

</select>

</div>

<label for="number">Number:</label>

<option value="kotahi|one">kotahi</option>

<option value="whitu|seven">whitu</option>

<option value="tekau|ten">tekau</option>

</select>

</div>

function updateNounOptions() {

const structure = document.getElementById("structure").value.split("|")[0];

const nounSelect = document.getElementById("noun");

for (let option of nounSelect.options) {

const type = option.value.split("|")[2];

option.hidden = (structure === "Tokohia" && type !== "person") ||

(structure !== "Tokohia" && type === "person");

}

if (nounSelect.selectedOptions[0].hidden) {

for (let opt of nounSelect.options) {

if (!opt.hidden) { nounSelect.value = opt.value; break; }

}

function updateSubjectOptions() {

const nounType = document.getElementById("noun").value.split("|")[2];

const subjectSelect = document.getElementById("subject");

for (let option of subjectSelect.options) {

const type = option.value.split("|")[2];

option.hidden = (nounType === "person" && type !== "person") ||

(nounType !== "person" && type !== "thing");

}

if (subjectSelect.selectedOptions[0].hidden) {

for (let opt of subjectSelect.options) {

if (!opt.hidden) { subjectSelect.value = opt.value; break; }

}

function makeMaoriAnswer(number, noun, subject) {

const type = noun.split("|")[2];

const nounM = noun.split("|")[0];

const subjectM = subject.split("|")[3];

if (number === "kotahi") {

return `<span class="red">Kotahi</span> te <span class="purple">${nounM.replace("ngā ", "")}</span> <span class="blue">${subjectM}</span>.`;

}

if (number === "tekau") {

return `<span class="red">Tekau</span> <span class="purple">${nounM}</span> <span class="blue">${subjectM}</span>.`;

}

const prefix = type === "person" ? `Toko<span class="red">${number}</span>` : `E <span class="red">${number}</span>`;

return `${prefix} <span class="purple">${nounM}</span> <span class="blue">${subjectM}</span>.`;

}

function makeEnglishAnswer(number, noun, subject) {

const nounE = noun.split("|")[1];

const subjectE = subject.split("|")[4];

const nounFormatted = (number === "one" || number === "kotahi") ? nounE.replace(/s$/, "") : nounE;

const numberFormatted = number.charAt(0).toUpperCase() + number.slice(1);

return `<span class="red">${numberFormatted}</span> <span class="purple">${nounFormatted}</span> <span class="blue">${subjectE}</span>.`;

}

function updateSentences() {

updateNounOptions();

updateSubjectOptions();

const [structureM, structureE] = document.getElementById("structure").value.split("|");

const noun = document.getElementById("noun").value;

const subject = document.getElementById("subject").value;

const [numberM, numberE] = document.getElementById("number").value.split("|");

const nounM = noun.split("|")[0];

const nounE = noun.split("|")[1];

const subjectM = subject.split("|")[0];

const subjectE = subject.split("|")[1];

const questionM = `<span class="green">${structureM}</span> <span class="purple">${nounM}</span> <span class="blue">${subjectM}</span>?`;

const questionE = `<span class="green">${structureE}</span> <span class="purple">${nounE}</span> <span class="blue">${subjectE}</span>?`;

const answerM = makeMaoriAnswer(numberM, noun, subject);

const answerE = makeEnglishAnswer(numberE, noun, subject);

document.getElementById("questionM").innerHTML = "Māori (Question): " + questionM;

document.getElementById("questionE").innerHTML = "English (Question): " + questionE;

document.getElementById("answerM").innerHTML = "Māori (Answer): " + answerM;

document.getElementById("answerE").innerHTML = "English (Answer): " + answerE;

}

document.querySelectorAll("select").forEach(sel => {

sel.addEventListener("change", updateSentences);

});

updateSentences();

</script>

</body>

</html>

AI Code Example

This code (which is far from perfect) is provided so you can play, cut&paste the code into your google site, then change up the code and see what you can achive. If you break it, just cut&paste again, start fresh. The images below show you where to PASTE.

ChatGPT Code:

<title>Te Reo Māori Cooking Sentence Builder</title>

ChatGPT Code: Output:

Copilot Code:

<title>E hia / Kia hia / Tokohia – Hanga Rerenga</title>

<h2>E hia / Kia hia / Tokohia – Hanga Rerenga</h2>

Copilot Code: Output: