Code Whānau

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Whānau Matching Exercise - Set 1</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #fff;

padding: 20px;

max-width: 900px;

margin: auto;

font-size: 125%;

}

h2 {

color: #c71585;

}

.question {

display: flex;

align-items: center;

margin-bottom: 12px;

}

.question label {

flex: 1;

margin-right: 10px;

}

select {

font-size: 100%;

padding: 4px;

}

.feedback {

margin-left: 10px;

font-weight: bold;

}

.correct {

color: green;

}

.incorrect {

color: red;

}

</style>

</head>

<body>

<h2>Whānau Matching Exercise - Set 1</h2>

<p>Choose the correct English meaning for each te reo Māori phrase. Feedback will appear instantly.</p>

<div id="quiz"></div>

<script>

const questions = [

{ maori: "Ko Hōne tōku pāpā.", options: ["Mere is my mum.", "Hōne is my dad.", "Hōne is my uncle.", "I live with my parents."], correct: "Hōne is my dad." },

{ maori: "Tamariki", options: ["Parents", "Children", "Cousins", "Grandparents"], correct: "Children" },

{ maori: "Tōku whare", options: ["My house", "My book", "My job", "My pet"], correct: "My house" },

{ maori: "Tāku mahi", options: ["My school", "My job", "My car", "My uncle"], correct: "My job" },

{ maori: "Whaea kēkē", options: ["Aunt (parent’s sister)", "Grandmother", "Cousin", "Sister"], correct: "Aunt (parent’s sister)" },

{ maori: "Tōku tinana", options: ["My child", "My body", "My phone", "My table"], correct: "My body" },

{ maori: "Tāku kurī", options: ["My dog (pet)", "My car", "My cousin", "My teacher"], correct: "My dog (pet)" },

{ maori: "Ko Ani tōku tuahine.", options: ["Ani is my sister (said by a boy)", "Ani is my cousin", "Ani is my niece", "Ani is my grandmother"], correct: "Ani is my sister (said by a boy)" },

{ maori: "Whānau", options: ["Family", "School", "Shelter", "Friend"], correct: "Family" },

{ maori: "Tamariki mokopuna", options: ["Grandchildren", "Great-grandchildren", "Nieces and nephews", "Parents"], correct: "Great-grandchildren" }

];

const quizDiv = document.getElementById("quiz");

questions.forEach((q, index) => {

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

div.className = "question";

div.innerHTML = `

<label for="q${index}"><strong>${index + 1}. ${q.maori}</strong></label>

<select id="q${index}" onchange="checkAnswer(${index})">

<option value="">-- Select --</option>

${q.options.map(opt => `<option value="${opt}">${opt}</option>`).join("")}

</select>

<span id="feedback${index}" class="feedback"></span>

`;

quizDiv.appendChild(div);

});

function checkAnswer(index) {

const selected = document.getElementById(`q${index}`).value;

const correct = questions[index].correct;

const feedback = document.getElementById(`feedback${index}`);

if (selected === correct) {

feedback.textContent = "✓ Correct";

feedback.className = "feedback correct";

} else {

feedback.textContent = "✗ Incorrect";

feedback.className = "feedback incorrect";

}

}

</script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Whānau Matching Exercise – Set 2</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #fff;

padding: 20px;

max-width: 900px;

margin: auto;

font-size: 125%;

}

h2 {

color: #c71585;

}

.question {

display: flex;

align-items: center;

margin-bottom: 12px;

}

.question label {

flex: 1;

margin-right: 10px;

}

select {

font-size: 100%;

padding: 4px;

}

.feedback {

margin-left: 10px;

font-weight: bold;

}

.correct {

color: green;

}

.incorrect {

color: red;

}

</style>

</head>

<body>

<h2>Whānau Matching Exercise – Set 2</h2>

<p>Choose the correct English meaning for each te reo Māori phrase. Feedback will appear instantly.</p>

<div id="quiz"></div>

<script>

const questions = [

{ maori: "Ko Tui tōku kuia.", options: ["Tui is my cousin.", "Tui is my grandmother.", "Tui is my sister.", "Tui is my aunt."], correct: "Tui is my grandmother." },

{ maori: "Ko Hēmi tōku koroua.", options: ["Hēmi is my grandfather.", "Hēmi is my uncle.", "Hēmi is my brother.", "Hēmi is my dad."], correct: "Hēmi is my grandfather." },

{ maori: "E noho ana au ki te kāinga me ōku mātua.", options: ["I live with my children.", "I live at home with my parents.", "I live with my cousins.", "I live with my grandparents."], correct: "I live at home with my parents." },

{ maori: "He mokopuna au nā tōku kuia.", options: ["I am a niece of my grandmother.", "I am a cousin of my grandmother.", "I am a grandchild of my grandmother.", "I am a sibling of my grandmother."], correct: "I am a grandchild of my grandmother." },

{ maori: "E tākaro ana ahau me tāku tungāne.", options: ["I’m playing with my cousin.", "I’m playing with my brother.", "I’m playing with my uncle.", "I’m playing with my son."], correct: "I’m playing with my brother." },

{ maori: "I haere au ki te whare o tōku whaea kēkē.", options: ["I went to my aunt’s house.", "I went to my cousin’s house.", "I went to my grandmother’s house.", "I went to my sister’s house."], correct: "I went to my aunt’s house." },

{ maori: "Ko Matiu tōku hoa rangatira.", options: ["Matiu is my teacher.", "Matiu is my friend.", "Matiu is my partner/spouse.", "Matiu is my cousin."], correct: "Matiu is my partner/spouse." },

{ maori: "Tāku pukapuka", options: ["My book", "My school", "My house", "My car"], correct: "My book" },

{ maori: "Tōku waka", options: ["My apple", "My car", "My pet", "My job"], correct: "My car" },

{ maori: "Tāku rorohiko", options: ["My computer", "My phone", "My table", "My umbrella"], correct: "My computer" }

];

const quizDiv = document.getElementById("quiz");

questions.forEach((q, index) => {

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

div.className = "question";

div.innerHTML = `

<label for="q${index}"><strong>${index + 1}. ${q.maori}</strong></label>

<select id="q${index}" onchange="checkAnswer(${index})">

<option value="">-- Select --</option>

${q.options.map(opt => `<option value="${opt}">${opt}</option>`).join("")}

</select>

<span id="feedback${index}" class="feedback"></span>

`;

quizDiv.appendChild(div);

});

function checkAnswer(index) {

const selected = document.getElementById(`q${index}`).value;

const correct = questions[index].correct;

const feedback = document.getElementById(`feedback${index}`);

if (selected === correct) {

feedback.textContent = "✓ Correct";

feedback.className = "feedback correct";

} else {

feedback.textContent = "✗ Incorrect";

feedback.className = "feedback incorrect";

}

}

</script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Whānau Matching Exercise – Set 3</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #fff;

padding: 20px;

max-width: 900px;

margin: auto;

font-size: 125%;

}

h2 {

color: #c71585;

}

.question {

display: flex;

align-items: center;

margin-bottom: 12px;

}

.question label {

flex: 1;

margin-right: 10px;

}

select {

font-size: 100%;

padding: 4px;

}

.feedback {

margin-left: 10px;

font-weight: bold;

}

.correct {

color: green;

}

.incorrect {

color: red;

}

</style>

</head>

<body>

<h2>Whānau Matching Exercise – Set 3</h2>

<p>Choose the correct English meaning for each te reo Māori phrase. Feedback will appear instantly.</p>

<div id="quiz"></div>

<script>

const questions = [

{ maori: "Ko Rangi tōku tuakana.", options: ["Rangi is my cousin.", "Rangi is my older sibling (same gender).", "Rangi is my younger sibling.", "Rangi is my uncle."], correct: "Rangi is my older sibling (same gender)." },

{ maori: "Ko Hine tōku teina.", options: ["Hine is my older sibling.", "Hine is my younger sibling (same gender).", "Hine is my niece.", "Hine is my cousin."], correct: "Hine is my younger sibling (same gender)." },

{ maori: "Ko Anaru tōku tungāne.", options: ["Anaru is my brother (said by a girl).", "Anaru is my cousin.", "Anaru is my uncle.", "Anaru is my son."], correct: "Anaru is my brother (said by a girl)." },

{ maori: "Ko Ani tōku tuahine.", options: ["Ani is my sister (said by a boy).", "Ani is my cousin.", "Ani is my aunt.", "Ani is my grandmother."], correct: "Ani is my sister (said by a boy)." },

{ maori: "Tāku tēpu", options: ["My table", "My chair", "My book", "My umbrella"], correct: "My table" },

{ maori: "Tōku kura", options: ["My school", "My job", "My house", "My car"], correct: "My school" },

{ maori: "Tāku pouaka whakaata", options: ["My television", "My radio", "My phone", "My computer"], correct: "My television" },

{ maori: "Tōku ruma", options: ["My room", "My house", "My car", "My school"], correct: "My room" },

{ maori: "Tōku tūru", options: ["My chair", "My table", "My umbrella", "My book"], correct: "My chair" },

{ maori: "Tāku waea pūkoro", options: ["My mobile phone", "My landline", "My radio", "My television"], correct: "My mobile phone" }

];

const quizDiv = document.getElementById("quiz");

questions.forEach((q, index) => {

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

div.className = "question";

div.innerHTML = `

<label for="q${index}"><strong>${index + 1}. ${q.maori}</strong></label>

<select id="q${index}" onchange="checkAnswer(${index})">

<option value="">-- Select --</option>

${q.options.map(opt => `<option value="${opt}">${opt}</option>`).join("")}

</select>

<span id="feedback${index}" class="feedback"></span>

`;

quizDiv.appendChild(div);

});

function checkAnswer(index) {

const selected = document.getElementById(`q${index}`).value;

const correct = questions[index].correct;

const feedback = document.getElementById(`feedback${index}`);

if (selected === correct) {

feedback.textContent = "✓ Correct";

feedback.className = "feedback correct";

} else {

feedback.textContent = "✗ Incorrect";

feedback.className = "feedback incorrect";

}

}

</script>

</body>

</html>

<!DOCTYPE html>

<html lang="mi">

<head>

<meta charset="UTF-8" />

<title>Tōku Matching — 3 Dropdowns</title>

<style>

body { font-family: Arial, sans-serif; background: #f9f9ff; padding: 20px; }

h2 { color: #333366; margin-top: 0; }

table { border-collapse: collapse; width: 100%; margin: 16px 0; }

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

th { background: #eef; text-align: left; }

select { padding: 6px; font-size: 1em; width: 100%; max-width: 360px; }

button { padding: 10px 16px; margin-right: 8px; border: none; border-radius: 8px; cursor: pointer; font-size: 1em; }

#markBtn { background-color: #4CAF50; color: white; }

#resetBtn { background-color: #d9534f; color: white; }

.correct { background-color: #c8f7c5; }

.incorrect { background-color: #f7c5c5; }

#score { margin-top: 8px; font-weight: bold; }

</style>

</head>

<body>

<h2>Match the Māori kupu, English meaning, and both sentences</h2>

<table id="matchingTable">

<tr>

<th>Māori kupu</th>

<th>English meaning</th>

<th>Māori sentence</th>

<th>English sentence</th>

</tr>

</table>

<button id="markBtn">Mark</button>

<button id="resetBtn">Reset</button>

<div id="score" aria-live="polite"></div>

<script>

// ----- Data -----

const pairs = [

{ mi: "tōku māmā", en: "my mother", miSent: "Ko Mere tōku māmā.", enSent: "Mere is my mother." },

{ mi: "tōku pāpā", en: "my father", miSent: "Ko Hōne tōku pāpā.", enSent: "Hōne is my father." },

{ mi: "tōku kuia", en: "my grandmother", miSent: "Ko Rangi tōku kuia.", enSent: "Rangi is my grandmother." },

{ mi: "tōku koroua", en: "my grandfather", miSent: "E noho ana tōku koroua ki te pāmu.", enSent: "My grandfather lives at the farm." },

{ mi: "tōku whare", en: "my house", miSent: "He nui tōku whare.", enSent: "My house is big." },

{ mi: "tōku kāinga", en: "my home", miSent: "Ka hoki au ki tōku kāinga.", enSent: "I return to my home." },

{ mi: "tōku waka", en: "my car", miSent: "He hou tōku waka.", enSent: "My car is new." },

{ mi: "tōku tinana", en: "my body", miSent: "E mamae ana tōku tinana.", enSent: "My body is sore." },

{ mi: "tōku kura", en: "my school", miSent: "Kei tōku kura ahau e ako ana.", enSent: "I am learning at my school." },

{ mi: "tōku ruma", en: "my room", miSent: "Kei tōku ruma te tūru.", enSent: "The chair is in my room." }

];

// Master option lists per column

const EN_LIST = pairs.map(p => p.en);

const MISENT_LIST = pairs.map(p => p.miSent);

const ENSENT_LIST = pairs.map(p => p.enSent);

const table = document.getElementById("matchingTable");

const score = document.getElementById("score");

function shuffle(arr) {

const a = arr.slice();

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

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

[a[i], a[j]] = [a[j], a[i]];

}

return a;

}

function optionHTML(value, label = value) {

return `<option value="${value}">${label}</option>`;

}

function buildSelect(allOptions, currentValue, placeholder) {

// Exclude already-chosen options (handled in updateDropdowns), but include current value

let html = `<option value="">${placeholder}</option>`;

const opts = shuffle(allOptions.slice());

opts.forEach(v => { html += optionHTML(v); });

// If current value is not empty, ensure it appears and stays selected

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

select.innerHTML = html;

if (currentValue) {

if (![...select.options].some(o => o.value === currentValue)) {

select.innerHTML += optionHTML(currentValue);

}

select.value = currentValue;

} else {

select.value = "";

}

return select;

}

function buildRow(p) {

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

// Fixed Māori kupu

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

tdMi.textContent = p.mi;

tr.appendChild(tdMi);

// English meaning dropdown

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

const selEn = buildSelect(EN_LIST, "", "-- Select English meaning --");

selEn.className = "sel-en";

selEn.dataset.correct = p.en;

tdEn.appendChild(selEn);

tr.appendChild(tdEn);

// Māori sentence dropdown

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

const selMiSent = buildSelect(MISENT_LIST, "", "-- Select Māori sentence --");

selMiSent.className = "sel-mi-sent";

selMiSent.dataset.correct = p.miSent;

tdMiSent.appendChild(selMiSent);

tr.appendChild(tdMiSent);

// English sentence dropdown

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

const selEnSent = buildSelect(ENSENT_LIST, "", "-- Select English sentence --");

selEnSent.className = "sel-en-sent";

selEnSent.dataset.correct = p.enSent;

tdEnSent.appendChild(selEnSent);

tr.appendChild(tdEnSent);

return tr;

}

function buildTable() {

// Clear existing rows except header

table.querySelectorAll("tr:not(:first-child)").forEach(tr => tr.remove());

score.textContent = "";

// Build rows (keep Māori kupu order)

pairs.forEach(p => table.appendChild(buildRow(p)));

// Attach change listeners

table.addEventListener("change", onAnyChange);

updateDropdowns();

}

function getChosen(selector) {

return Array.from(document.querySelectorAll(selector))

.map(s => s.value)

.filter(v => v !== "");

}

// Rebuild each select's options from master list, excluding already chosen (except its own current)

function refreshColumn(selector, allList, placeholder) {

const selects = Array.from(document.querySelectorAll(selector));

const chosen = new Set(getChosen(selector));

selects.forEach(sel => {

const current = sel.value;

const available = allList.filter(v => !chosen.has(v) || v === current);

// Rebuild options

const newSel = buildSelect(available, current, placeholder);

newSel.className = sel.className;

newSel.dataset.correct = sel.dataset.correct;

sel.replaceWith(newSel);

});

}

function updateDropdowns() {

refreshColumn(".sel-en", EN_LIST, "-- Select English meaning --");

refreshColumn(".sel-mi-sent", MISENT_LIST, "-- Select Māori sentence --");

refreshColumn(".sel-en-sent", ENSENT_LIST, "-- Select English sentence --");

}

function onAnyChange(e) {

if (e.target.tagName === "SELECT") {

// Clear previous marking on change

e.target.classList.remove("correct","incorrect");

updateDropdowns();

}

}

document.getElementById("markBtn").addEventListener("click", () => {

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

let correctCount = 0;

selects.forEach(sel => {

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

if (sel.value && sel.value === sel.dataset.correct) {

sel.classList.add("correct");

correctCount++;

} else {

sel.classList.add("incorrect");

}

});

const total = selects.length; // 3 per row

score.textContent = `Correct: ${correctCount} / ${total}`;

});

document.getElementById("resetBtn").addEventListener("click", () => {

buildTable();

});

// init

buildTable();

</script>

</body>

</html>

<!DOCTYPE html>

<html lang="mi">

<head>

<meta charset="UTF-8">

<title>Sentence Matching Quiz</title>

<style>

body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }

table { border-collapse: collapse; width: 100%; margin-top: 20px; }

th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }

th { background: #333; color: #fff; }

select { padding: 5px; width: 100%; }

.correct { background-color: #c8e6c9; }

.incorrect { background-color: #ffcdd2; }

</style>

</head>

<body>

<h2>Match the Māori Sentence to its English Translation</h2>

<p>Select the correct English translation for each Māori sentence. Each option can only be used once.</p>

<table id="quizTable">

<thead>

<tr>

<th>Māori Sentence</th>

<th>English Translation</th>

</tr>

</thead>

<tbody></tbody>

</table>

<script>

const pairs = [

{

maori: "I te Rāhoroi, ka haere te whānau ki te marae.",

english: "On Saturday, the family went to the marae."

},

{

maori: "Ka kī te marae i te harikoa me te katakata.",

english: "The marae was full of joy and laughter."

},

{

maori: "Ka kai rātou i te kai reka.",

english: "They ate delicious food."

},

{

maori: "Ka tākaro ngā tamariki ki waho i te papa tākaro.",

english: "The children played outside on the playground."

},

{

maori: "Ka oma, ka katakata, ka koa rātou.",

english: "They ran, laughed, and were happy."

},

{

maori: "He rā tino pai mō te whānau katoa!",

english: "It was a really good day for the whole family!"

}

];

let usedOptions = new Set();

function shuffle(array) {

return array.map(value => ({ value, sort: Math.random() }))

.sort((a, b) => a.sort - b.sort)

.map(({ value }) => value);

}

function createDropdown(correctAnswer, row) {

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

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

defaultOption.textContent = "-- Select --";

defaultOption.value = "";

select.appendChild(defaultOption);

const shuffledOptions = shuffle(pairs.map(pair => pair.english));

shuffledOptions.forEach(text => {

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

option.value = text;

option.textContent = text;

select.appendChild(option);

});

select.addEventListener("change", () => {

const selected = select.value;

const allSelects = document.querySelectorAll("select");

// Reset used options

usedOptions.clear();

allSelects.forEach(s => {

if (s.value) usedOptions.add(s.value);

});

// Disable used options in all dropdowns

allSelects.forEach(s => {

Array.from(s.options).forEach(opt => {

opt.disabled = usedOptions.has(opt.value) && s.value !== opt.value;

});

});

// Mark correct/incorrect

row.classList.remove("correct", "incorrect");

if (selected === correctAnswer) {

row.classList.add("correct");

} else {

row.classList.add("incorrect");

}

});

return select;

}

function generateQuiz() {

const tbody = document.querySelector("#quizTable tbody");

tbody.innerHTML = "";

pairs.forEach(pair => {

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

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

maoriCell.textContent = pair.maori;

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

const dropdown = createDropdown(pair.english, row);

dropdownCell.appendChild(dropdown);

row.appendChild(maoriCell);

row.appendChild(dropdownCell);

tbody.appendChild(row);

});

}

generateQuiz();

</script>

</body>

</html>

Page updated

Google Sites

Report abuse