Code: Reo ā-iwi

<!DOCTYPE html>

<head>

<title>Māori Dialect Pronunciation Quiz</title>

<style>

body {

background-color: #e6f2ff; /* restore original light blue */

font-family: Arial, sans-serif;

margin: 20px;

}

table { border-collapse: collapse; width: 100%; }

th, td { border: 1px solid #ccc; padding: 10px; text-align: center; vertical-align: middle; }

thead th { background: #f4f4f4; font-weight: bold; }

/* Per-select feedback */

select { font-size: 1rem; padding: 4px; }

.sel-correct { background-color: #c8e6c9; }

.sel-incorrect { background-color: #ffcdd2; }

/* Row-wide state: RED until everything is correct, then GREEN */

tbody tr.incorrect td { background-color: #ffe5e7; }

tbody tr.correct td { background-color: #dff5e1; }

/* Recall hook reveal */

.hook { opacity: 0; max-height: 0; overflow: hidden; transition: opacity .5s ease, max-height .5s ease; }

tr.correct .hook { opacity: 1; max-height: 200px; }

</style>

</head>

<body>

<h2 style="text-align:center">Ngā Rerekētanga o te Reo – Dialect Pronunciation Differences</h2>

<p style="text-align:center;margin-top:-6px">Left & right columns are fixed. Five iwi dropdowns in the middle. Rows shuffle each load.</p>

<thead>

<tr>

<th>Māori Word</th>

<th>Ngāpuhi</th>

<th>Taranaki</th>

<th>Tainui</th>

<th>Tūhoe</th>

<th>Recall Hook</th>

</tr>

</thead>

</table>

// Column order matters here and in each row's answers

const IWI_ORDER = ["Ngāpuhi", "Taranaki", "Tainui", "Tūhoe", "Kāi Tahu"];

// 10 rows showing wh, ng→n, and ā→ē differences

const ROWS = [

{ word: "whare", answers: {"Ngāpuhi":"fa-re","Taranaki":"wa-re","Tainui":"wa-re","Tūhoe":"hwa-re","Kāi Tahu":"wa-re"}, hook: "wh → f / w / hw" },

{ word: "whenua", answers: {"Ngāpuhi":"fe-nu-a","Taranaki":"we-nu-a","Tainui":"we-nu-a","Tūhoe":"hwe-nu-a","Kāi Tahu":"we-nu-a"}, hook: "wh → f / w / hw" },

{ word: "whānau", answers: {"Ngāpuhi":"fā-nau","Taranaki":"wā-nau","Tainui":"wā-nau","Tūhoe":"hwā-nau","Kāi Tahu":"wā-nau"}, hook: "wh → f / w / hw" },

{ word: "whakarongo", answers: {"Ngāpuhi":"fa-ka-ro-ngo","Taranaki":"wa-ka-ro-ngo","Tainui":"wa-ka-ro-ngo","Tūhoe":"hwa-ka-ro-ngo","Kāi Tahu":"wa-ka-ro-ngo"}, hook: "wh → f / w / hw" },

{ word: "whakaaro", answers: {"Ngāpuhi":"fa-kā-ro","Taranaki":"wā-kā-ro","Tainui":"wā-kā-ro","Tūhoe":"hwā-kā-ro","Kāi Tahu":"wā-kā-ro"}, hook: "wh → f / w / hw" },

{ word: "ngā", answers: {"Ngāpuhi":"ngā","Taranaki":"ngā","Tainui":"ngā","Tūhoe":"ngā","Kāi Tahu":"nā"}, hook: "ng → n (Kāi Tahu)" },

{ word: "tangata", answers: {"Ngāpuhi":"ta-nga-ta","Taranaki":"ta-nga-ta","Tainui":"ta-nga-ta","Tūhoe":"ta-nga-ta","Kāi Tahu":"ta-na-ta"}, hook: "ng → n (Kāi Tahu)" },

{ word: "ngahere", answers: {"Ngāpuhi":"nga-he-re","Taranaki":"nga-he-re","Tainui":"nga-he-re","Tūhoe":"nga-he-re","Kāi Tahu":"na-he-re"}, hook: "ng → n (Kāi Tahu)" },

{ word: "kāinga", answers: {"Ngāpuhi":"kāi-nga","Taranaki":"kāi-nga","Tainui":"kāi-nga","Tūhoe":"kāi-nga","Kāi Tahu":"kēi-na"}, hook: "ā → ē (Kāi Tahu)" },

{ word: "rākau", answers: {"Ngāpuhi":"rā-kau","Taranaki":"rā-kau","Tainui":"rā-kau","Tūhoe":"rā-kau","Kāi Tahu":"rē-kau"}, hook: "ā → ē (Kāi Tahu)" }

];

function shuffle(arr){

for(let i=arr.length-1;i>0;i--){

const j=Math.floor(Math.random()*(i+1));

[arr[i],arr[j]]=[arr[j],arr[i]];

}

return arr;

}

function buildOptions(correctMap){

// Use the five dialect variants as options

const opts = IWI_ORDER.map(iwi => correctMap[iwi]);

return shuffle([...new Set(opts)]); // de-dupe then shuffle

}

function checkRow(tr){

const correctSeq = tr.dataset.answer.split("|");

const selects = tr.querySelectorAll("select");

let allCorrect = true;

selects.forEach((sel, i) => {

// per-select marking

if(!sel.value){

sel.classList.remove("sel-correct","sel-incorrect");

allCorrect = false;

} else if(sel.value === correctSeq[i]){

sel.classList.add("sel-correct");

sel.classList.remove("sel-incorrect");

} else {

sel.classList.add("sel-incorrect");

sel.classList.remove("sel-correct");

allCorrect = false;

}

});

// Row-wide state & hook reveal

tr.classList.toggle("correct", allCorrect);

tr.classList.toggle("incorrect", !allCorrect);

}

function buildQuiz(){

const tbody = document.getElementById("quizBody");

tbody.innerHTML = "";

const shuffled = shuffle([...ROWS]);

shuffled.forEach(row => {

const tr = document.createElement("tr");

tr.classList.add("incorrect"); // start RED until solved

// Left fixed: Māori word

const tdWord = document.createElement("td");

tdWord.textContent = row.word;

tr.appendChild(tdWord);

// Middle: 5 iwi dropdowns in fixed order

const correctSeq = IWI_ORDER.map(iwi => row.answers[iwi]);

tr.dataset.answer = correctSeq.join("|");

const optionsPool = buildOptions(row.answers);

IWI_ORDER.forEach((iwi, idx) => {

const td = document.createElement("td");

const sel = document.createElement("select");

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

def.value = ""; def.textContent = "-- Select --";

sel.appendChild(def);

// Shuffle options independently per column so columns don't line up

shuffle([...optionsPool]).forEach(opt => {

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

o.value = opt; o.textContent = opt;

sel.appendChild(o);

});

sel.addEventListener("change", () => checkRow(tr));

td.appendChild(sel);

tr.appendChild(td);

});

// Right fixed: Recall hook (reveals on correct)

const tdHook = document.createElement("td");

const hook = document.createElement("div");

hook.className = "hook";

hook.textContent = row.hook;

tdHook.appendChild(hook);

tr.appendChild(tdHook);

tbody.appendChild(tr);

});

}

buildQuiz();

</script>

</body>

</html>

Dialects: Journey to choose headings

5 main dialects (Js): Ngāpuhi, Taranaki, Tainui, Tuhoe, Kaitahu

Ngāpuhi – Te Tai Tokerau (Far North)

Taranaki – Te Tai Hauāuru (West Coast North Island)

Tainui – Central North Island (Waikato region)

Tūhoe – Te Urewera (Eastern Bay of Plenty)

Kāi Tahu (Ngāi Tahu) – Te Tai Tonga (South Island)

Te Tai Tokerau – Northland Region

Main Dialect: Ngāpuhi
Iwi Examples: Ngāpuhi, Ngāti Kahu, Te Aupōuri, Te Rarawa, Ngāti Kurī

Te Tai Rāwhiti – East Coast Region

Main Dialect: Tūhoe (Te Urewera, Eastern Bay of Plenty)
Iwi Examples: Ngāti Porou, Te Aitanga-a-Hauiti, Rongowhakaata, Ngāi Tāmanuhiri

Te Tai Hauāuru – West Coast of the North Island

Main Dialect: Taranaki
Iwi Examples: Ngāti Raukawa, Ngāti Toa Rangatira, Te Āti Awa, Ngāti Tama, Ngāti Mutunga, Ngāti Maniapoto, Whanganui iwi

Te Tai Tonga – South Island

Main Dialect: Kāi Tahu (Ngāi Tahu)
Iwi Examples: Ngāi Tahu, Kāti Māmoe, Waitaha

Te Tai Poutini – West Coast of the South Island

Note: Often considered part of Ngāi Tahu territory, but includes iwi with distinct identities.
Iwi Examples: Ngāti Waewae, Ngāti Māhaki

Tainui Dialect – Central North Island (Waikato region)
Associated Iwi: Waikato-Tainui and related iwi (not listed under a specific Te Tai region above)