Code

Getting started?

Copilot says: Here's a clear, bullet-pointed 200-word guide for teachers writing prompts to get Copilot to generate code for quizzes, matching activities, or flash cards to embed into a Google Site:

Purpose of Writing Prompts for Copilot

Guide Copilot to generate custom code for interactive learning tools.
Ensure the output matches your curriculum and classroom needs.
Save time by automating HTML/JavaScript creation.

Prompt Writing Tips

Be specific: Include the type of activity (e.g., “Create a matching game”).
Mention content: Specify the topic (e.g., “Te Reo Māori colours”).
Define format: Say if it’s multiple choice, drag-and-drop, or flip cards.
Include design preferences: Colours, layout, feedback style, etc.
State embedding goal: Ask for code that works in Google Sites.

Example Prompts

“Write HTML and JavaScript for a Te Reo Māori colour matching activity with instant feedback and no duplicates.”
“Create a flash card set for possessive pronouns in Te Reo Māori with flip animation and colour-coded categories.”
“Generate a multiple-choice quiz about tense markers with green highlights for correct answers.”

Embedding Tip

Ask Copilot to provide plain HTML/JS code for direct copy-paste into a Google Site embed block.

“Write HTML and JavaScript for a Te Reo Māori colour matching activity with instant feedback and no duplicates.”

“Create a flash card set for possessive pronouns in Te Reo Māori with flip animation and colour-coded categories.”

“Generate a multiple-choice quiz about tense markers with green highlights for correct answers.”

The above were made in minutes, so would need some upgrading to be of use. Once something is made, often one can think of improvements, and build from the base.

this is messed up - the sort order needs to be all the me, the māua mātou, then all the you, then all the them then tāua & tātou at the end - the colours need to be clarified with the order - list each in the chat in order with colour

/* Colour coding with more variation, 2 shades per group */

.my-dark { background-color: #B71C1C; } /* Mine O-category (dark red) */

.my-light { background-color: #FF8A80; } /* Mine A-category (light red) */

.your-dark { background-color: #0D47A1; } /* Yours O-category (dark blue) */

.your-light { background-color: #64B5F6; } /* Yours A-category (light blue) */

.his-dark { background-color: #1B5E20; } /* Theirs O-category (dark green) */

.his-light { background-color: #81C784; } /* Theirs A-category (light green) */

.youandi-dark { background-color: #4A148C; } /* Inclusive O-category (dark purple) */

.youandi-light { background-color: #BA68C8; } /* Inclusive A-category (light purple) */

.friends-dark { background-color: #E65100; } /* Exclusive O-category (dark orange) */

.friends-light { background-color: #FFB74D; } /* Exclusive A-category (light orange) */

.youplural-dark { background-color: #0D47A1; } /* You(2+/3+) O-category (dark blue) */

.youplural-light { background-color: #64B5F6; }/* You(2+/3+) A-category (light blue) */

.they-dark { background-color: #1B5E20; } /* They O-category (dark green) */

.they-light { background-color: #81C784; } /* They A-category (light green) */

<!DOCTYPE html>

<html>

<head>

<title>Te Reo Māori Possessive Pronoun Flash Cards</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f0f8ff;

padding: 20px;

text-align: center;

}

.controls {

margin-bottom: 16px;

display: flex;

flex-wrap: wrap;

gap: 8px;

justify-content: center;

}

button {

padding: 8px 14px;

border: none;

border-radius: 6px;

background-color: #4682b4;

color: white;

font-weight: bold;

cursor: pointer;

}

button:hover { background-color: #315f7d; }

.status { margin: 8px 0 16px; font-size: 0.95rem; color: #333; }

.card-container {

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 15px;

}

.card {

width: 160px;

height: 110px;

perspective: 1000px;

flex: 0 1 auto;

}

.card-inner {

position: relative;

width: 100%;

height: 100%;

text-align: center;

transition: transform 0.6s;

transform-style: preserve-3d;

cursor: pointer;

}

.card:hover .card-inner { transform: rotateY(180deg); }

.card-front, .card-back {

position: absolute;

width: 100%;

height: 100%;

backface-visibility: hidden;

display: flex;

align-items: center;

justify-content: center;

border-radius: 8px;

color: white;

font-size: 16px;

font-weight: bold;

padding: 10px;

box-sizing: border-box;

}

.card-back {

background-color: #32cd32; /* keep your original back colour */

transform: rotateY(180deg);

color: black;

}

/* Original colour coding (kept) */

.my-dark { background-color: #c71585; } /* My O (dark pink) */

.my-light { background-color: #db7093; } /* My A (light pink) */

.your-dark { background-color: #ff4500; } /* Your O (dark orange) */

.your-light { background-color: #ffa07a; } /* Your A (light orange) */

/* Change here: his = same family as they (indigo), light=A, dark=O */

.his-dark { background-color: #4b0082; } /* match they-dark */

.his-light { background-color: #8a2be2; } /* match they-light */

.youandi-dark { background-color: #228b22; } /* You & I O (dark green) */

.youandi-light { background-color: #66cdaa; } /* You & I A (light green) */

.friends-dark { background-color: #8b0000; } /* Friends & I O (dark red) */

.friends-light { background-color: #cd5c5c; } /* Friends & I A (light red) */

.youplural-dark { background-color: #00008b; } /* You(2+)/O (dark blue) */

.youplural-light { background-color: #4169e1; }/* You(2+)/A (light blue) */

.they-dark { background-color: #4b0082; } /* They O (dark indigo) */

.they-light { background-color: #8a2be2; } /* They A (light indigo) */

</style>

</head>

<body>

<h2>Ngā Kārāti – Possessive Pronouns (A & O Categories)</h2>

<button onclick="setFilter('category','A')">A-category</button>

<button onclick="setFilter('category','O')">O-category</button>

<button onclick="setFilter('number','singular')">Single thing</button>

<button onclick="setFilter('number','plural')">Plural things</button>

<button onclick="setFilter('group','yours')">Yours</button>

<button onclick="setFilter('group','theirs')">Theirs</button>

<button onclick="setFilter('group','exclusive')">Ours (exclusive)</button>

<button onclick="setFilter('group','inclusive')">Us (inclusive)</button>

</div>

// Data: COMPLETE set, with metadata for filters.

// category: 'A' or 'O' | number: 'singular' or 'plural'

// group: 'mine' | 'yours' | 'theirs' | 'inclusive' | 'exclusive'

const flashCards = [

// My (mine)

{ front: "tāku", back: "My (1 person), singular item, A-category", class: "my-light", category:"A", number:"singular", group:"mine" },

{ front: "tōku", back: "My (1 person), singular item, O-category", class: "my-dark", category:"O", number:"singular", group:"mine" },

{ front: "āku", back: "My (1 person), plural items, A-category", class: "my-light", category:"A", number:"plural", group:"mine" },

{ front: "ōku", back: "My (1 person), plural items, O-category", class: "my-dark", category:"O", number:"plural", group:"mine" },

// Your (singular) → yours

{ front: "tāu", back: "Your (1 person), singular item, A-category", class: "your-light", category:"A", number:"singular", group:"yours" },

{ front: "tōu", back: "Your (1 person), singular item, O-category", class: "your-dark", category:"O", number:"singular", group:"yours" },

{ front: "āu", back: "Your (1 person), plural items, A-category", class: "your-light", category:"A", number:"plural", group:"yours" },

{ front: "ōu", back: "Your (1 person), plural items, O-category", class: "your-dark", category:"O", number:"plural", group:"yours" },

// His/Her → treat as THEIRS (same colour family as they)

{ front: "tāna", back: "His/Her/Their (1), singular item, A-category", class: "his-light", category:"A", number:"singular", group:"theirs" },

{ front: "tōna", back: "His/Her/Their (1), singular item, O-category", class: "his-dark", category:"O", number:"singular", group:"theirs" },

{ front: "āna", back: "His/Her/Their (1), plural items, A-category", class: "his-light", category:"A", number:"plural", group:"theirs" },

{ front: "ōna", back: "His/Her/Their (1), plural items, O-category", class: "his-dark", category:"O", number:"plural", group:"theirs" },

// You and I (tāua) → inclusive

{ front: "tā tāua", back: "You and I (2), singular item, A-category", class: "youandi-light", category:"A", number:"singular", group:"inclusive" },

{ front: "tō tāua", back: "You and I (2), singular item, O-category", class: "youandi-dark", category:"O", number:"singular", group:"inclusive" },

{ front: "ā tāua", back: "You and I (2), plural items, A-category", class: "youandi-light", category:"A", number:"plural", group:"inclusive" },

{ front: "ō tāua", back: "You and I (2), plural items, O-category", class: "youandi-dark", category:"O", number:"plural", group:"inclusive" },

// Friends and I (māua) → exclusive

{ front: "tā māua", back: "Friends and I (2), singular item, A-category", class: "friends-light", category:"A", number:"singular", group:"exclusive" },

{ front: "tō māua", back: "Friends and I (2), singular item, O-category", class: "friends-dark", category:"O", number:"singular", group:"exclusive" },

{ front: "ā māua", back: "Friends and I (2), plural items, A-category", class: "friends-light", category:"A", number:"plural", group:"exclusive" },

{ front: "ō māua", back: "Friends and I (2), plural items, O-category", class: "friends-dark", category:"O", number:"plural", group:"exclusive" },

// You (2 people) → yours

{ front: "tā kōrua", back: "You (2), singular item, A-category", class: "youplural-light", category:"A", number:"singular", group:"yours" },

{ front: "tō kōrua", back: "You (2), singular item, O-category", class: "youplural-dark", category:"O", number:"singular", group:"yours" },

{ front: "ā kōrua", back: "You (2), plural items, A-category", class: "youplural-light", category:"A", number:"plural", group:"yours" },

{ front: "ō kōrua", back: "You (2), plural items, O-category", class: "youplural-dark", category:"O", number:"plural", group:"yours" },

// They (2 people) → theirs

{ front: "tā rāua", back: "They (2), singular item, A-category", class: "they-light", category:"A", number:"singular", group:"theirs" },

{ front: "tō rāua", back: "They (2), singular item, O-category", class: "they-dark", category:"O", number:"singular", group:"theirs" },

{ front: "ā rāua", back: "They (2), plural items, A-category", class: "they-light", category:"A", number:"plural", group:"theirs" },

{ front: "ō rāua", back: "They (2), plural items, O-category", class: "they-dark", category:"O", number:"plural", group:"theirs" },

// You and I (3+ – tātou) → inclusive

{ front: "tā tātou", back: "You and I (3+), singular item, A-category", class: "youandi-light", category:"A", number:"singular", group:"inclusive" },

{ front: "tō tātou", back: "You and I (3+), singular item, O-category", class: "youandi-dark", category:"O", number:"singular", group:"inclusive" },

{ front: "ā tātou", back: "You and I (3+), plural items, A-category", class: "youandi-light", category:"A", number:"plural", group:"inclusive" },

{ front: "ō tātou", back: "You and I (3+), plural items, O-category", class: "youandi-dark", category:"O", number:"plural", group:"inclusive" },

// Friends and I (3+ – mātou) → exclusive

{ front: "tā mātou", back: "Friends and I (3+), singular item, A-category", class: "friends-light", category:"A", number:"singular", group:"exclusive" },

{ front: "tō mātou", back: "Friends and I (3+), singular item, O-category", class: "friends-dark", category:"O", number:"singular", group:"exclusive" },

{ front: "ā mātou", back: "Friends and I (3+), plural items, A-category", class: "friends-light", category:"A", number:"plural", group:"exclusive" },

{ front: "ō mātou", back: "Friends and I (3+), plural items, O-category", class: "friends-dark", category:"O", number:"plural", group:"exclusive" },

// You (3+ – koutou) → yours

{ front: "tā koutou", back: "You (3+), singular item, A-category", class: "youplural-light", category:"A", number:"singular", group:"yours" },

{ front: "tō koutou", back: "You (3+), singular item, O-category", class: "youplural-dark", category:"O", number:"singular", group:"yours" },

{ front: "ā koutou", back: "You (3+), plural items, A-category", class: "youplural-light", category:"A", number:"plural", group:"yours" },

{ front: "ō koutou", back: "You (3+), plural items, O-category", class: "youplural-dark", category:"O", number:"plural", group:"yours" },

// They (3+ – rātou) → theirs

{ front: "tā rātou", back: "They (3+), singular item, A-category", class: "they-light", category:"A", number:"singular", group:"theirs" },

{ front: "tō rātou", back: "They (3+), singular item, O-category", class: "they-dark", category:"O", number:"singular", group:"theirs" },

{ front: "ā rātou", back: "They (3+), plural items, A-category", class: "they-light", category:"A", number:"plural", group:"theirs" },

{ front: "ō rātou", back: "They (3+), plural items, O-category", class: "they-dark", category:"O", number:"plural", group:"theirs" }

];

const container = document.getElementById("cards");

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

const active = { category: null, number: null, group: null };

function renderCards(list) {

container.innerHTML = "";

list.forEach(card => {

container.innerHTML += `

<div class="card-front ${card.class}">${card.front}</div>

</div>

`;

});

}

function applyFilters() {

const filtered = flashCards.filter(c =>

(!active.category || c.category === active.category) &&

(!active.number || c.number === active.number) &&

(!active.group || c.group === active.group)

);

renderCards(filtered);

updateStatus();

}

function setFilter(type, value) {

// cumulative: set or overwrite that dimension only

active[type] = value;

applyFilters();

}

function resetFilters() {

active.category = active.number = active.group = null;

applyFilters();

}

function updateStatus() {

const parts = [];

if (active.category) parts.push(`${active.category}-category`);

if (active.number) parts.push(active.number === 'singular' ? 'single thing' : 'plural things');

if (active.group) {

const label = active.group === 'inclusive' ? 'us (inclusive)'

: active.group === 'exclusive' ? 'ours (exclusive)'

: active.group;

parts.push(label);

}

status.textContent = parts.length ? `Filters: ${parts.join(' + ')}` : 'Filters: (none)';

}

// initial render

applyFilters();

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Te Reo Māori Possessive Pronoun Flash Cards</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f0f8ff;

padding: 20px;

text-align: center;

}

.controls {

margin-bottom: 16px;

display: flex;

flex-wrap: wrap;

gap: 8px;

justify-content: center;

}

button {

padding: 8px 14px;

border: none;

border-radius: 6px;

background-color: #4682b4;

color: white;

font-weight: bold;

cursor: pointer;

}

button:hover { background-color: #315f7d; }

.status { margin: 8px 0 16px; font-size: 0.95rem; color: #333; }

.card-container {

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 15px;

}

.card {

width: 160px;

height: 110px;

perspective: 1000px;

flex: 0 1 auto;

}

.card-inner {

position: relative;

width: 100%;

height: 100%;

text-align: center;

transition: transform 0.6s;

transform-style: preserve-3d;

cursor: pointer;

}

.card:hover .card-inner { transform: rotateY(180deg); }

.card-front, .card-back {

position: absolute;

width: 100%;

height: 100%;

backface-visibility: hidden;

display: flex;

align-items: center;

justify-content: center;

border-radius: 8px;

color: white;

font-size: 16px;

font-weight: bold;

padding: 10px;

box-sizing: border-box;

}

.card-back {

background-color: #32cd32; /* keep your original back colour */

transform: rotateY(180deg);

color: black;

}

/* Colour coding with more variation, 2 shades per group */

.my-dark { background-color: #B71C1C; } /* Mine O-category (dark red) */

.my-light { background-color: #FF8A80; } /* Mine A-category (light red) */

.your-dark { background-color: #0D47A1; } /* Yours O-category (dark blue) */

.your-light { background-color: #64B5F6; } /* Yours A-category (light blue) */

.his-dark { background-color: #1B5E20; } /* Theirs O-category (dark green) */

.his-light { background-color: #81C784; } /* Theirs A-category (light green) */

.youandi-dark { background-color: #4A148C; } /* Inclusive O-category (dark purple) */

.youandi-light { background-color: #BA68C8; } /* Inclusive A-category (light purple) */

.friends-dark { background-color: #E65100; } /* Exclusive O-category (dark orange) */

.friends-light { background-color: #FFB74D; } /* Exclusive A-category (light orange) */

.youplural-dark { background-color: #0D47A1; } /* You(2+/3+) O-category (dark blue) */

.youplural-light { background-color: #64B5F6; }/* You(2+/3+) A-category (light blue) */

.they-dark { background-color: #1B5E20; } /* They O-category (dark green) */

.they-light { background-color: #81C784; } /* They A-category (light green) */

</style>

</head>

<body>

<h2>Ngā Kārāti – Possessive Pronouns (A & O Categories)</h2>

<button onclick="setFilter('category','A')">A-category</button>

<button onclick="setFilter('category','O')">O-category</button>

<button onclick="setFilter('number','singular')">Single thing</button>

<button onclick="setFilter('number','plural')">Plural things</button>

<button onclick="setFilter('group','yours')">Yours</button>

<button onclick="setFilter('group','theirs')">Theirs</button>

<button onclick="setFilter('group','exclusive')">Ours (exclusive)</button>

<button onclick="setFilter('group','inclusive')">Us (inclusive)</button>

</div>

// Data: COMPLETE set, with metadata for filters.

// category: 'A' or 'O' | number: 'singular' or 'plural'

// group: 'mine' | 'yours' | 'theirs' | 'inclusive' | 'exclusive'

const flashCards = [

// My (mine)

{ front: "tāku", back: "My (1 person), singular item, A-category", class: "my-light", category:"A", number:"singular", group:"mine" },

{ front: "tōku", back: "My (1 person), singular item, O-category", class: "my-dark", category:"O", number:"singular", group:"mine" },

{ front: "āku", back: "My (1 person), plural items, A-category", class: "my-light", category:"A", number:"plural", group:"mine" },

{ front: "ōku", back: "My (1 person), plural items, O-category", class: "my-dark", category:"O", number:"plural", group:"mine" },

// Your (singular) → yours

{ front: "tāu", back: "Your (1 person), singular item, A-category", class: "your-light", category:"A", number:"singular", group:"yours" },

{ front: "tōu", back: "Your (1 person), singular item, O-category", class: "your-dark", category:"O", number:"singular", group:"yours" },

{ front: "āu", back: "Your (1 person), plural items, A-category", class: "your-light", category:"A", number:"plural", group:"yours" },

{ front: "ōu", back: "Your (1 person), plural items, O-category", class: "your-dark", category:"O", number:"plural", group:"yours" },

// His/Her → treat as THEIRS (same colour family as they)

{ front: "tāna", back: "His/Her/Their (1), singular item, A-category", class: "his-light", category:"A", number:"singular", group:"theirs" },

{ front: "tōna", back: "His/Her/Their (1), singular item, O-category", class: "his-dark", category:"O", number:"singular", group:"theirs" },

{ front: "āna", back: "His/Her/Their (1), plural items, A-category", class: "his-light", category:"A", number:"plural", group:"theirs" },

{ front: "ōna", back: "His/Her/Their (1), plural items, O-category", class: "his-dark", category:"O", number:"plural", group:"theirs" },

// You and I (tāua) → inclusive

{ front: "tā tāua", back: "You and I (2), singular item, A-category", class: "youandi-light", category:"A", number:"singular", group:"inclusive" },

{ front: "tō tāua", back: "You and I (2), singular item, O-category", class: "youandi-dark", category:"O", number:"singular", group:"inclusive" },

{ front: "ā tāua", back: "You and I (2), plural items, A-category", class: "youandi-light", category:"A", number:"plural", group:"inclusive" },

{ front: "ō tāua", back: "You and I (2), plural items, O-category", class: "youandi-dark", category:"O", number:"plural", group:"inclusive" },

// Friends and I (māua) → exclusive

{ front: "tā māua", back: "Friends and I (2), singular item, A-category", class: "friends-light", category:"A", number:"singular", group:"exclusive" },

{ front: "tō māua", back: "Friends and I (2), singular item, O-category", class: "friends-dark", category:"O", number:"singular", group:"exclusive" },

{ front: "ā māua", back: "Friends and I (2), plural items, A-category", class: "friends-light", category:"A", number:"plural", group:"exclusive" },

{ front: "ō māua", back: "Friends and I (2), plural items, O-category", class: "friends-dark", category:"O", number:"plural", group:"exclusive" },

// You (2 people) → yours

{ front: "tā kōrua", back: "You (2), singular item, A-category", class: "youplural-light", category:"A", number:"singular", group:"yours" },

{ front: "tō kōrua", back: "You (2), singular item, O-category", class: "youplural-dark", category:"O", number:"singular", group:"yours" },

{ front: "ā kōrua", back: "You (2), plural items, A-category", class: "youplural-light", category:"A", number:"plural", group:"yours" },

{ front: "ō kōrua", back: "You (2), plural items, O-category", class: "youplural-dark", category:"O", number:"plural", group:"yours" },

// They (2 people) → theirs

{ front: "tā rāua", back: "They (2), singular item, A-category", class: "they-light", category:"A", number:"singular", group:"theirs" },

{ front: "tō rāua", back: "They (2), singular item, O-category", class: "they-dark", category:"O", number:"singular", group:"theirs" },

{ front: "ā rāua", back: "They (2), plural items, A-category", class: "they-light", category:"A", number:"plural", group:"theirs" },

{ front: "ō rāua", back: "They (2), plural items, O-category", class: "they-dark", category:"O", number:"plural", group:"theirs" },

// You and I (3+ – tātou) → inclusive

{ front: "tā tātou", back: "You and I (3+), singular item, A-category", class: "youandi-light", category:"A", number:"singular", group:"inclusive" },

{ front: "tō tātou", back: "You and I (3+), singular item, O-category", class: "youandi-dark", category:"O", number:"singular", group:"inclusive" },

{ front: "ā tātou", back: "You and I (3+), plural items, A-category", class: "youandi-light", category:"A", number:"plural", group:"inclusive" },

{ front: "ō tātou", back: "You and I (3+), plural items, O-category", class: "youandi-dark", category:"O", number:"plural", group:"inclusive" },

// Friends and I (3+ – mātou) → exclusive

{ front: "tā mātou", back: "Friends and I (3+), singular item, A-category", class: "friends-light", category:"A", number:"singular", group:"exclusive" },

{ front: "tō mātou", back: "Friends and I (3+), singular item, O-category", class: "friends-dark", category:"O", number:"singular", group:"exclusive" },

{ front: "ā mātou", back: "Friends and I (3+), plural items, A-category", class: "friends-light", category:"A", number:"plural", group:"exclusive" },

{ front: "ō mātou", back: "Friends and I (3+), plural items, O-category", class: "friends-dark", category:"O", number:"plural", group:"exclusive" },

// You (3+ – koutou) → yours

{ front: "tā koutou", back: "You (3+), singular item, A-category", class: "youplural-light", category:"A", number:"singular", group:"yours" },

{ front: "tō koutou", back: "You (3+), singular item, O-category", class: "youplural-dark", category:"O", number:"singular", group:"yours" },

{ front: "ā koutou", back: "You (3+), plural items, A-category", class: "youplural-light", category:"A", number:"plural", group:"yours" },

{ front: "ō koutou", back: "You (3+), plural items, O-category", class: "youplural-dark", category:"O", number:"plural", group:"yours" },

// They (3+ – rātou) → theirs

{ front: "tā rātou", back: "They (3+), singular item, A-category", class: "they-light", category:"A", number:"singular", group:"theirs" },

{ front: "tō rātou", back: "They (3+), singular item, O-category", class: "they-dark", category:"O", number:"singular", group:"theirs" },

{ front: "ā rātou", back: "They (3+), plural items, A-category", class: "they-light", category:"A", number:"plural", group:"theirs" },

{ front: "ō rātou", back: "They (3+), plural items, O-category", class: "they-dark", category:"O", number:"plural", group:"theirs" }

];

const container = document.getElementById("cards");

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

const active = { category: null, number: null, group: null };

function renderCards(list) {

container.innerHTML = "";

list.forEach(card => {

container.innerHTML += `

<div class="card-front ${card.class}">${card.front}</div>

</div>

`;

});

}

function applyFilters() {

const filtered = flashCards.filter(c =>

(!active.category || c.category === active.category) &&

(!active.number || c.number === active.number) &&

(!active.group || c.group === active.group)

);

renderCards(filtered);

updateStatus();

}

function setFilter(type, value) {

// cumulative: set or overwrite that dimension only

active[type] = value;

applyFilters();

}

function resetFilters() {

active.category = active.number = active.group = null;

applyFilters();

}

function updateStatus() {

const parts = [];

if (active.category) parts.push(`${active.category}-category`);

if (active.number) parts.push(active.number === 'singular' ? 'single thing' : 'plural things');

if (active.group) {

const label = active.group === 'inclusive' ? 'us (inclusive)'

: active.group === 'exclusive' ? 'ours (exclusive)'

: active.group;

parts.push(label);

}

status.textContent = parts.length ? `Filters: ${parts.join(' + ')}` : 'Filters: (none)';

}

// initial render

applyFilters();

</script>

</body>

</html>

Code

Getting started?

Copilot says: Here's a clear, bullet-pointed 200-word guide for teachers writing prompts to get Copilot to generate code for quizzes, matching activities, or flash cards to embed into a Google Site:

Purpose of Writing Prompts for Copilot

Guide Copilot to generate custom code for interactive learning tools.

Ensure the output matches your curriculum and classroom needs.

Save time by automating HTML/JavaScript creation.

Prompt Writing Tips

Be specific: Include the type of activity (e.g., “Create a matching game”).

Mention content: Specify the topic (e.g., “Te Reo Māori colours”).

Define format: Say if it’s multiple choice, drag-and-drop, or flip cards.

Include design preferences: Colours, layout, feedback style, etc.

State embedding goal: Ask for code that works in Google Sites.

Example Prompts

“Write HTML and JavaScript for a Te Reo Māori colour matching activity with instant feedback and no duplicates.”

“Create a flash card set for possessive pronouns in Te Reo Māori with flip animation and colour-coded categories.”

“Generate a multiple-choice quiz about tense markers with green highlights for correct answers.”

Embedding Tip

Ask Copilot to provide plain HTML/JS code for direct copy-paste into a Google Site embed block.

“Write HTML and JavaScript for a Te Reo Māori colour matching activity with instant feedback and no duplicates.”

“Create a flash card set for possessive pronouns in Te Reo Māori with flip animation and colour-coded categories.”

“Generate a multiple-choice quiz about tense markers with green highlights for correct answers.”

The above were made in minutes, so would need some upgrading to be of use. Once something is made, often one can think of improvements, and build from the base.

this is messed up - the sort order needs to be all the me, the māua mātou, then all the you, then all the them then tāua & tātou at the end - the colours need to be clarified with the order - list each in the chat in order with colour

/* Original colour coding (kept) */

.my-dark { background-color: #c71585; } /* My O (dark pink) */

.my-light { background-color: #db7093; } /* My A (light pink) */

.your-dark { background-color: #ff4500; } /* Your O (dark orange) */

.your-light { background-color: #ffa07a; } /* Your A (light orange) */

/* Change here: his = same family as they (indigo), light=A, dark=O */

.his-dark { background-color: #4b0082; } /* match they-dark */

.his-light { background-color: #8a2be2; } /* match they-light */

.youandi-dark { background-color: #228b22; } /* You & I O (dark green) */

.youandi-light { background-color: #66cdaa; } /* You & I A (light green) */

.friends-dark { background-color: #8b0000; } /* Friends & I O (dark red) */

.friends-light { background-color: #cd5c5c; } /* Friends & I A (light red) */

.youplural-dark { background-color: #00008b; } /* You(2+)/O (dark blue) */

.youplural-light { background-color: #4169e1; }/* You(2+)/A (light blue) */

.they-dark { background-color: #4b0082; } /* They O (dark indigo) */

.they-light { background-color: #8a2be2; } /* They A (light indigo) */

/* Colour coding with more variation, 2 shades per group */

.my-dark { background-color: #B71C1C; } /* Mine O-category (dark red) */

.my-light { background-color: #FF8A80; } /* Mine A-category (light red) */

.your-dark { background-color: #0D47A1; } /* Yours O-category (dark blue) */

.your-light { background-color: #64B5F6; } /* Yours A-category (light blue) */

.his-dark { background-color: #1B5E20; } /* Theirs O-category (dark green) */

.his-light { background-color: #81C784; } /* Theirs A-category (light green) */

.youandi-dark { background-color: #4A148C; } /* Inclusive O-category (dark purple) */

.youandi-light { background-color: #BA68C8; } /* Inclusive A-category (light purple) */

.friends-dark { background-color: #E65100; } /* Exclusive O-category (dark orange) */

.friends-light { background-color: #FFB74D; } /* Exclusive A-category (light orange) */

.youplural-dark { background-color: #0D47A1; } /* You(2+/3+) O-category (dark blue) */

.youplural-light { background-color: #64B5F6; }/* You(2+/3+) A-category (light blue) */

.they-dark { background-color: #1B5E20; } /* They O-category (dark green) */

.they-light { background-color: #81C784; } /* They A-category (light green) */