<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ngā Mahi – Matching Card Game</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f7f7fa;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
margin: 0;
}
h1 {
color: #333;
font-size: 24px;
margin-bottom: 20px;
}
h2 {
color: #333;
font-size: 18px;
margin: 20px 0 10px;
}
.section {
max-width: 800px;
width: 100%;
margin-bottom: 30px;
}
.section-container {
display: grid;
gap: 10px;
justify-content: center;
}
.section-container.small {
grid-template-columns: repeat(3, 120px);
}
.section-container.medium {
grid-template-columns: repeat(4, 120px);
}
.card {
width: 120px;
height: 80px;
background: #fff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 14px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
perspective: 1000px;
}
.card-inner {
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card.flipped .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
padding: 5px;
}
.card-front {
background: #ccc;
}
.card-back {
transform: rotateY(180deg);
}
.card.education { background-color: #a3d8ff; }
.card.health { background-color: #ff9999; }
.card.hospitality { background-color: #90ee90; }
.card.trades { background-color: #ffd28a; }
.card.office { background-color: #b19cd9; }
.card.services { background-color: #ffe066; }
.card.arts { background-color: #ffccf2; }
.card.correct::after {
content: "✓";
position: absolute;
top: 5px;
left: 5px;
color: green;
font-size: 20px;
font-weight: bold;
}
.card.incorrect::after {
content: "✗";
position: absolute;
top: 5px;
left: 5px;
color: red;
font-size: 20px;
font-weight: bold;
}
.card:hover {
box-shadow: 0 0 10px rgba(0,0,0,0.2);
transform: scale(1.05);
}
#completion-message {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #4CAF50;
color: white;
padding: 20px;
border-radius: 8px;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Ngā Mahi – Match the Occupations</h1>
<div class="section">
<h2>Education & Teaching / Mātauranga me te Whakaako</h2>
<div class="section-container small" id="education-container"></div>
</div>
<div class="section">
<h2>Health & Care / Hauora</h2>
<div class="section-container small" id="health-container"></div>
</div>
<div class="section">
<h2>Food & Hospitality / Kai me te Manaaki</h2>
<div class="section-container small" id="hospitality-container"></div>
</div>
<div class="section">
<h2>Trades & Office / Mahi ā-Ringa me te Tari</h2>
<div class="section-container medium" id="trades_office-container"></div>
</div>
<div class="section">
<h2>Services & Arts / Ratonga me te Toi</h2>
<div class="section-container medium" id="services_arts-container"></div>
</div>
<div id="completion-message">Tino Pai!</div>
<script>
const items = [
];
function shuffle(a) {
return a.sort(() => Math.random() - 0.5);
}
let selectedCards = { education: [], health: [], hospitality: [], trades_office: [], services_arts: [] };
let matchedPairs = { education: 0, health: 0, hospitality: 0, trades_office: 0, services_arts: 0 };
const totalPairs = items.length;
function checkCompletion() {
const totalMatched = matchedPairs.education + matchedPairs.health + matchedPairs.hospitality + matchedPairs.trades_office + matchedPairs.services_arts;
if (totalMatched === totalPairs) {
document.getElementById('completion-message').style.display = 'block';
}
}
function createCard(content, type, category, pairId, section) {
const card = document.createElement("div");
card.className = `card ${category}`;
card.dataset.type = type;
card.dataset.pairId = pairId;
card.dataset.section = section;
const cardInner = document.createElement("div");
cardInner.className = "card-inner";
const cardFront = document.createElement("div");
cardFront.className = "card-front";
cardFront.textContent = "?";
const cardBack = document.createElement("div");
cardBack.className = "card-back";
cardBack.textContent = content;
cardInner.appendChild(cardFront);
cardInner.appendChild(cardBack);
card.appendChild(cardInner);
card.addEventListener("click", () => {
if (card.classList.contains("flipped") || card.classList.contains("correct")) return;
card.classList.add("flipped");
selectedCards[section].push(card);
if (selectedCards[section].length === 2) {
const [card1, card2] = selectedCards[section];
if (card1.dataset.pairId === card2.dataset.pairId && card1.dataset.type !== card2.dataset.type) {
card1.classList.add("correct");
card2.classList.add("correct");
matchedPairs[section]++;
checkCompletion();
} else {
card1.classList.add("incorrect");
card2.classList.add("incorrect");
setTimeout(() => {
card1.classList.remove("flipped", "incorrect");
card2.classList.remove("flipped", "incorrect");
}, 1000);
}
selectedCards[section] = [];
}
});
return card;
}
const containers = {
education: document.getElementById("education-container"),
health: document.getElementById("health-container"),
hospitality: document.getElementById("hospitality-container"),
trades_office: document.getElementById("trades_office-container"),
services_arts: document.getElementById("services_arts-container")
};
const sectionItems = {
education: items.filter(item => item.category === "education"),
health: items.filter(item => item.category === "health"),
hospitality: items.filter(item => item.category === "hospitality"),
trades_office: items.filter(item => ["trades", "office"].includes(item.category)),
services_arts: items.filter(item => ["services", "arts"].includes(item.category))
};
Object.keys(sectionItems).forEach(section => {
const sectionCards = [];
sectionItems[section].forEach((item, index) => {
sectionCards.push({ content: item.ma, type: "ma", category: item.category, pairId: `${section}-${index}` });
sectionCards.push({ content: item.en, type: "en", category: item.category, pairId: `${section}-${index}` });
});
shuffle(sectionCards).forEach(card => {
const cardElement = createCard(card.content, card.type, card.category, card.pairId, section);
containers[section].appendChild(cardElement);
});
});
</script>
</body>
</html>