Code: Colour

Kākahu

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Te Reo Colours Dialect Quiz</title>

<style>

body {

background-color: #e6f2ff;

font-family: sans-serif;

}

table {

border-collapse: collapse;

margin: 20px auto;

width: 95%;

}

td, th {

border: 1px solid #ccc;

padding: 8px;

text-align: center;

}

select {

padding: 4px;

}

.correct {

background-color: #c8e6c9;

}

.incorrect {

background-color: #ffcdd2;

}

.explanation {

opacity: 0;

max-height: 0;

overflow: hidden;

font-size: 1.2em;

transition: opacity 0.6s ease, max-height 0.6s ease;

background: #e8f5e9;

padding: 6px;

border-radius: 6px;

margin-top: 4px;

}

.explanation.show {

opacity: 1;

max-height: 200px;

}

.swatch {

width: 50px;

height: 50px;

border-radius: 50%;

margin: auto;

}

thead tr:first-child th {

font-weight: bold;

}

thead tr:nth-child(2) th {

font-weight: normal;

font-style: italic;

}

</style>

</head>

<body>

<h2 style="text-align:center">Ngā Tae – Colours in Dialects</h2>

<table>

<thead>

<tr>

<th></th>

<th>Rāwhiti</th>

<th>Uru</th>

<th>Tonga</th>

<th>Whakamāoritanga</th>

<th>Ētahi Atu</th>

</tr>

<tr>

<th>Colour</th>

<th>Eastern</th>

<th>Western</th>

<th>Southern</th>

<th>Transliteration</th>

<th>Also</th>

</tr>

</thead>

<tbody>

<tr data-answer="Kura|Whero|Whero|Rēti|Ngangana">

<td><div class="swatch" style="background:red;"></div></td>

<td><select><option>-- Select --</option><option>Mangu</option><option>Kura</option><option>Kahurangi</option><option>Whero</option><option>Ngangana</option></select></td>

<td><select><option>-- Select --</option><option>Kikorangi</option><option>Pango</option><option>Whero</option><option>Kura</option><option>Ngangana</option></select></td>

<td><select><option>-- Select --</option><option>Kura</option><option>Whero</option><option>Kikoraki</option><option>Waiporoporo</option><option>Ngangana</option></select></td>

<td><select><option>-- Select --</option><option>Puru</option><option>Rēti</option><option>Papura</option><option>Kōwhai</option><option>Ngangana</option></select></td>

<td><select><option>-- Select --</option><option>Whero</option><option>Ngangana</option><option>Kura</option><option>Rēti</option><option>Kākāriki</option></select></td>

</tr>

<tr class="explanation-row">

<td colspan="6"><div class="explanation">Kura refers to a sacred or prized red; Whero is the everyday red; Rēti is seldom used transliteration; Ngangana describes a glowing, intense red.</div></td>

</tr>

<tr data-answer="Kahurangi|Kikorangi|Kikoraki|Purū|Ōrangi">

<td><div class="swatch" style="background:blue;"></div></td>

<td><select><option>-- Select --</option><option>Kikoraki</option><option>Waiporoporo</option><option>Kahurangi</option><option>Kikorangi</option><option>Ōrangi</option></select></td>

<td><select><option>-- Select --</option><option>Mangu</option><option>Kikorangi</option><option>Whero</option><option>Kahurangi</option><option>Ōrangi</option></select></td>

<td><select><option>-- Select --</option><option>Pango</option><option>Kikoraki</option><option>Whero</option><option>Kahurangi</option><option>Ōrangi</option></select></td>

<td><select><option>-- Select --</option><option>Papura</option><option>Purū</option><option>Rēti</option><option>Kōwhai</option><option>Ōrangi</option></select></td>

<td><select><option>-- Select --</option><option>Kikorangi</option><option>Ōrangi</option><option>Kahurangi</option><option>Purū</option><option>Kākāriki</option></select></td>

</tr>

<tr class="explanation-row">

<td colspan="6"><div class="explanation">Kahurangi is a sky blue, precious colour; Kikorangi and Kikoraki mean the blue of the sky; Puru is a transliteration; Ōrangi is another term for blue, often sky-related.</div></td>

</tr>

<tr data-answer="Mangu|Pango|Pango|Pango|Pōuri">

<td><div class="swatch" style="background:black;"></div></td>

<td><select><option>-- Select --</option><option>Pango</option><option>Kura</option><option>Mangu</option><option>Kahurangi</option><option>Pōuri</option></select></td>

<td><select><option>-- Select --</option><option>Mangu</option><option>Pango</option><option>Kikorangi</option><option>Waiporoporo</option><option>Pōuri</option></select></td>

<td><select><option>-- Select --</option><option>Mangu</option><option>Pango</option><option>Whero</option><option>Rēti</option><option>Pōuri</option></select></td>

<td><select><option>-- Select --</option><option>Puru</option><option>Pango</option><option>Papura</option><option>Kōwhai</option><option>Pōuri</option></select></td>

<td><select><option>-- Select --</option><option>Pango</option><option>Pōuri</option><option>Mangu</option><option>Harikoa</option><option>Kākāriki</option></select></td>

</tr>

<tr class="explanation-row">

<td colspan="6"><div class="explanation">Mangu describes a deep intense black such as soot or ink; Pango is ordinary black & the transliteration; Pōuri refers to darkness, often associated with black.</div></td>

</tr>

<tr data-answer="Waiporoporo|Waiporoporo|Papura|Papura|Tawa">

<td><div class="swatch" style="background:purple;"></div></td>

<td><select><option>-- Select --</option><option>Papura</option><option>Waiporoporo</option><option>Kura</option><option>Kikorangi</option><option>Tawa</option></select></td>

<td><select><option>-- Select --</option><option>Papura</option><option>Waiporoporo</option><option>Mangu</option><option>Pango</option><option>Tawa</option></select></td>

<td><select><option>-- Select --</option><option>Waiporoporo</option><option>Papura</option><option>Kikoraki</option><option>Kahurangi</option><option>Tawa</option></select></td>

<td><select><option>-- Select --</option><option>Puru</option><option>Papura</option><option>Rēti</option><option>Kōwhai</option><option>Tawa</option></select></td>

<td><select><option>-- Select --</option><option>Waiporoporo</option><option>Tawa</option><option>Papura</option><option>Kākāriki</option><option>Parak</option></select></td>

</tr>

<tr class="explanation-row">

<td colspan="6"><div class="explanation">Waiporoporo means the juice of the poroporo plant; Papura is a modern borrowing for purple; Tawa refers to the purple-like color of the tawa tree's fruit.</div></td>

</tr>

</tbody>

</table>

<script>

function shuffleArray(array) {

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

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

[array[i], array[j]] = [array[j], array[i]];

}

return array;

}

function checkRow(row) {

const answer = row.dataset.answer.split("|");

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

let allCorrect = true;

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

if (sel.value === "-- Select --") {

sel.className = "";

allCorrect = false;

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

sel.className = "correct";

} else {

sel.className = "incorrect";

allCorrect = false;

}

});

if (allCorrect) {

row.classList.add("correct");

row.classList.remove("incorrect");

row.nextElementSibling.querySelector(".explanation").classList.add("show");

} else {

row.classList.add("incorrect");

row.classList.remove("correct");

row.nextElementSibling.querySelector(".explanation").classList.remove("show");

}

}

document.querySelectorAll("tbody tr[data-answer]").forEach(row => {

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

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

});

});

</script>

</body>

</html>

Page updated

Google Sites

Report abuse