Code Tunu Kai

<!DOCTYPE html>

<html>

<head>

<title>Tunu Kai Kupu Learning Tools</title>

<style>

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

/* ================= FLASHCARDS ================= */

#flashcards-section {

display: flex;

flex-wrap: wrap;

gap: 10px;

}

#flashcards-section .card {

width: 160px;

height: 100px;

padding: 10px;

margin: 5px;

border: 4px solid #333;

border-radius: 10px;

cursor: pointer;

display: flex;

align-items: center;

justify-content: center;

text-align: center;

font-weight: bold;

font-size: 18px;

word-wrap: break-word;

transition: transform 0.6s, background-color 0.6s;

background-color: lightyellow;

}

#flashcards-section .card.flipped {

background-color: lightblue;

}

/* ================= QUIZ ================= */

#quiz-section .quiz-question {

margin: 10px 0;

}

#quiz-section .quiz-question button {

font-size: 16px;

padding: 4px 8px;

margin: 2px;

}

/* ================= MATCHING ================= */

.matching-container {

display: flex;

justify-content: space-between;

gap: 20px;

margin-top: 20px;

}

.matching-box {

flex: 1;

min-height: 200px;

border: 2px dashed #ccc;

padding: 10px;

border-radius: 10px;

background-color: #fafafa;

display: flex;

flex-wrap: wrap;

gap: 10px;

}

#matching-section .drag-item {

flex: 1 1 45%;

height: 50px;

border: 2px solid #666;

background: #eee;

cursor: pointer;

text-align: center;

display: flex;

align-items: center;

justify-content: center;

font-weight: bold;

font-size: 16px;

box-sizing: border-box;

}

.matched-container {

display: flex;

flex-wrap: wrap;

gap: 5px;

margin-bottom: 10px;

}

.pair {

padding: 5px 8px;

border-radius: 5px;

font-weight: bold;

display: flex;

gap: 4px;

align-items: center;

}

.pair .sep { font-weight: bold; }

</style>

</head>

<body>

<h2>Tunu Kai Kupu Learning Tools</h2>

<h3>Flashcards</h3>

<h3>Matching - CLICK - CLICK</h3>

// Vocabulary data from the provided quiz

const data = [

["kīhini", "kitchen"],

["tunu", "to cook/bake"],

["rēwena", "sourdough bread"],

["rēmana", "lemon"],

["horoi ringa", "wash hands"],

["tapahi", "to cut"],

["whakaranu", "to mix"],

["rauemi", "ingredients"],

["kata", "to laugh"],

["waiata", "to sing"],

["umu", "oven"],

["kai", "food / to eat"],

["whānau", "family"],

["hinamona", "cinnamon"],

["reka", "delicious/sweet"],

["ako", "to learn"],

["tuakana", "older sibling (same gender)"],

["wā whakahirahira", "special time"],

["kakara", "scent/fragrance"],

["kuhu", "to enter"],

["hā", "breath, essence, smell, scent, or aroma"],

["whakakakara", "to flavour"],

["whakahirahira", "to emphasise, to highlight, significant, important, noteworthy"]

];

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;

}

/* ========== FLASHCARDS ========== */

function showFlashcards() {

const container = document.getElementById('flashcards-section');

container.innerHTML = '';

if (!data || data.length === 0) return container.textContent = 'No data found';

const seen = new Set();

const uniqueCards = [];

const shuffled = [...data].sort(() => Math.random() - 0.5);

for (let row of shuffled) {

if (!seen.has(row[0])) {

uniqueCards.push(row);

seen.add(row[0]);

}

if (uniqueCards.length >= 10) break;

}

uniqueCards.forEach(row => {

const card = document.createElement('div');

card.className = 'card';

card.textContent = row[0];

card.onclick = () => {

if (!card.classList.contains('flipped')) {

card.classList.add('flipped');

card.textContent = row[1];

} else {

card.classList.remove('flipped');

card.textContent = row[0];

}

};

container.appendChild(card);

});

}

/* ========== QUIZ ========== */

function showQuiz() {

const container = document.getElementById('quiz-section');

container.innerHTML = '';

if (data.length === 0) return container.textContent = 'No data found';

const shuffled = shuffleArray([...data]);

const questions = shuffled.slice(0, Math.min(10, shuffled.length));

questions.forEach((row, i) => {

const qDiv = document.createElement('div');

qDiv.className = 'quiz-question';

qDiv.innerHTML = `<b>Q${i+1}: ${row[0]}</b><br>`;

const distractors = [];

while (distractors.length < 3) {

const r = data[Math.floor(Math.random() * data.length)][1];

if (r !== row[1] && !distractors.includes(r)) distractors.push(r);

}

const options = shuffleArray([row[1], ...distractors]);

options.forEach(opt => {

const btn = document.createElement('button');

btn.textContent = opt;

btn.onclick = () => {

if (btn.disabled) return;

if (opt === row[1]) {

btn.style.backgroundColor = 'lightgreen';

} else {

btn.style.backgroundColor = 'lightcoral';

}

[...qDiv.querySelectorAll('button')].forEach(b => b.disabled = true);

};

qDiv.appendChild(btn);

});

container.appendChild(qDiv);

});

}

/* ========== MATCHING (Click-Click) ========== */

function showMatching() {

const container = document.getElementById('matching-section');

container.innerHTML = '';

const shuffled = shuffleArray([...data]);

const pairs = shuffled.slice(0, 10).filter(row => row[0] && row[1]);

if (pairs.length === 0) return;

const matchingContainer = document.createElement('div');

matchingContainer.className = 'matching-container';

container.appendChild(matchingContainer);

const leftCol = document.createElement('div');

leftCol.className = 'matching-box';

const rightCol = document.createElement('div');

rightCol.className = 'matching-box';

matchingContainer.appendChild(leftCol);

matchingContainer.appendChild(rightCol);

leftCol.style.display = 'flex';

leftCol.style.flexWrap = 'wrap';

leftCol.style.gap = '10px';

rightCol.style.display = 'flex';

rightCol.style.flexWrap = 'wrap';

rightCol.style.gap = '10px';

const leftWords = pairs.map(p => p[0]);

const rightWords = shuffleArray(pairs.map(p => p[1]));

let firstSelection = null;

const palette = ['#FFB3B3', '#FFD1A3', '#FFF3A3', '#C9F7B5', '#B7F0F6', '#C9C6FF', '#F7B3FF', '#DE85A6','#F0A326', '#E9FC6D'];

let colorIndex = 0;

function createBox(word, side) {

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

div.className = 'drag-item';

div.innerText = word;

div.dataset.side = side;

div.dataset.word = word;

div.style.flex = '1 1 45%';

div.style.height = '50px';

div.style.display = 'flex';

div.style.alignItems = 'center';

div.style.justifyContent = 'center';

div.style.border = '2px solid #666';

div.style.cursor = 'pointer';

div.style.backgroundColor = '#eee';

div.onclick = () => handleClick(div);

return div;

}

function handleClick(box) {

if (!firstSelection) {

firstSelection = box;

box.style.border = '2px solid blue';

} else if (box.dataset.side !== firstSelection.dataset.side) {

const leftWord = firstSelection.dataset.side === 'left' ? firstSelection.dataset.word : box.dataset.word;

const rightWord = firstSelection.dataset.side === 'right' ? firstSelection.dataset.word : box.dataset.word;

const correctRight = pairs.find(p => p[0] === leftWord)?.[1];

if (rightWord === correctRight) {

const color = palette[colorIndex % palette.length];

colorIndex++;

[firstSelection, box].forEach(el => {

el.style.backgroundColor = color;

el.onclick = null;

});

const pairChip = document.createElement('div');

pairChip.className = 'pair';

pairChip.style.backgroundColor = color;

pairChip.innerHTML = `<span>${leftWord}</span><span class="sep">↔</span><span>${rightWord}</span>`;

container.insertBefore(pairChip, matchingContainer);

} else {

[firstSelection, box].forEach(el => {

el.style.backgroundColor = 'lightcoral';

setTimeout(() => el.style.backgroundColor = '#eee', 500);

});

}

firstSelection.style.border = '';

firstSelection = null;

}

leftWords.forEach(w => leftCol.appendChild(createBox(w, 'left')));

rightWords.forEach(w => rightCol.appendChild(createBox(w, 'right')));

}

// Initialize the sections

showFlashcards();

showQuiz();

showMatching();

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Tunu Kai Kupu Learning Tools</title>

<style>

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

/* ================= DROPDOWN ================= */

#category-selector {

margin-bottom: 20px;

}

#category-selector select {

font-size: 16px;

padding: 5px;

}

/* ================= FLASHCARDS ================= */

#flashcards-section {

display: flex;

flex-wrap: wrap;

gap: 10px;

}

#flashcards-section .card {

width: 160px;

height: 100px;

padding: 10px;

margin: 5px;

border: 4px solid #333;

border-radius: 10px;

cursor: pointer;

display: flex;

align-items: center;

justify-content: center;

text-align: center;

font-weight: bold;

font-size: 18px;

word-wrap: break-word;

transition: transform 0.6s, background-color 0.6s;

background-color: lightyellow;

}

#flashcards-section .card.flipped {

background-color: lightblue;

}

/* ================= QUIZ ================= */

#quiz-section .quiz-question {

margin: 10px 0;

}

#quiz-section .quiz-question button {

font-size: 16px;

padding: 4px 8px;

margin: 2px;

}

/* ================= MATCHING ================= */

.matching-container {

display: flex;

justify-content: space-between;

gap: 20px;

margin-top: 20px;

}

.matching-box {

flex: 1;

min-height: 200px;

border: 2px dashed #ccc;

padding: 10px;

border-radius: 10px;

background-color: #fafafa;

display: flex;

flex-wrap: wrap;

gap: 10px;

}

#matching-section .drag-item {

flex: 1 1 45%;

height: 50px;

border: 2px solid #666;

background: #eee;

cursor: pointer;

text-align: center;

display: flex;

align-items: center;

justify-content: center;

font-weight: bold;

font-size: 16px;

box-sizing: border-box;

}

.matched-container {

display: flex;

flex-wrap: wrap;

gap: 5px;

margin-bottom: 10px;

}

.pair {

padding: 5px 8px;

border-radius: 5px;

font-weight: bold;

display: flex;

gap: 4px;

align-items: center;

}

.pair .sep { font-weight: bold; }

</style>

</head>

<body>

<h2>Tunu Kai Kupu Learning Tools</h2>

<label for="category">Select Category: </label>

<option value="phrases">Phrases</option>

<option value="sentences">Sentence Matching</option>

</select>

</div>

<h3>Flashcards</h3>

<h3>Matching - CLICK - CLICK</h3>

// Vocabulary data organized by categories

const data = {

phrases: [

["auē", "wow / oh!"],

["he tino reka", "very tasty / delicious"],

["te āhua o…", "the appearance of…"],

["keke tīhi", "cheesecake"],

["rerekē", "unusual / strange"],

["rīhi", "dish (as in a food dish)"],

["ātaahua", "beautiful / appealing"],

["ngā hēki", "the eggs"],

["kei roto", "inside / in"],

["me whakaaro au", "I should think / I wonder"],

["ka tunu tātou", "we will cook"],

["ā tērā wā", "next time / in the future"]

],

sentences: [

["Pipi: Ko Pipi tōku ingoa.", "My name is Pipi."],

["Rangi: Ko Rangi tōku ingoa. He tino pai ki au te tunu kai.", "My name is Rangi. I really enjoy baking."],

["Pipi: I tēnei rā, ka tunu tāua i tētahi keke tiakarete.", "Today, we’re going to bake a chocolate cake."],

["Rangi: He keke tiakarete tēnei.", "This is a chocolate cake."],

["Pipi: He tino reka tēnei ranunga!", "This mixture is super delicious!"],

["Rangi: Tāpirihia te huka me ngā hēki ki te peihana.", "Add the sugar and eggs to the bowl."],

["Pipi: Kei te umu te keke ināianei.", "The cake is now in the oven."],

["Rangi: Me tunu mō ngā meneti whā tekau mā rima.", "Bake for 45 minutes."],

["Pipi: Kei te hiainu au.", "I’m thirsty."],

["Rangi: Anei he kapu tī māu – he inu wera tino pai!", "Here’s a cup of tea for you – a lovely hot drink!"],

["Pipi: He tino pai rawa atu te keke me te tī!", "Cake and tea are the best!"],

["Rangi: Ka mau te wehi!", "Awesome!"]

]

};

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;

}

/* ========== FLASHCARDS ========== */

function showFlashcards(category) {

const container = document.getElementById('flashcards-section');

container.innerHTML = '';

const categoryData = data[category] || [];

if (categoryData.length === 0) return container.textContent = 'No data found';

const seen = new Set();

const uniqueCards = [];

const shuffled = shuffleArray([...categoryData]);

for (let row of shuffled) {

if (!seen.has(row[0])) {

uniqueCards.push(row);

seen.add(row[0]);

}

if (uniqueCards.length >= 10) break;

}

uniqueCards.forEach(row => {

const card = document.createElement('div');

card.className = 'card';

card.textContent = row[0];

card.onclick = () => {

if (!card.classList.contains('flipped')) {

card.classList.add('flipped');

card.textContent = row[1];

} else {

card.classList.remove('flipped');

card.textContent = row[0];

}

};

container.appendChild(card);

});

}

/* ========== QUIZ ========== */

function showQuiz(category) {

const container = document.getElementById('quiz-section');

container.innerHTML = '';

const categoryData = data[category] || [];

if (categoryData.length === 0) return container.textContent = 'No data found';

const shuffled = shuffleArray([...categoryData]);

const questions = shuffled.slice(0, Math.min(10, shuffled.length));

questions.forEach((row, i) => {

const qDiv = document.createElement('div');

qDiv.className = 'quiz-question';

qDiv.innerHTML = `<b>Q${i+1}: ${row[0]}</b><br>`;

const distractors = [];

while (distractors.length < 3) {

const r = categoryData[Math.floor(Math.random() * categoryData.length)][1];

if (r !== row[1] && !distractors.includes(r)) distractors.push(r);

}

const options = shuffleArray([row[1], ...distractors]);

options.forEach(opt => {

const btn = document.createElement('button');

btn.textContent = opt;

btn.onclick = () => {

if (btn.disabled) return;

if (opt === row[1]) {

btn.style.backgroundColor = 'lightgreen';

} else {

btn.style.backgroundColor = 'lightcoral';

}

[...qDiv.querySelectorAll('button')].forEach(b => b.disabled = true);

};

qDiv.appendChild(btn);

});

container.appendChild(qDiv);

});

}

/* ========== MATCHING (Click-Click) ========== */

function showMatching(category) {

const container = document.getElementById('matching-section');

container.innerHTML = '';

const categoryData = data[category] || [];

const shuffled = shuffleArray([...categoryData]);

const pairs = shuffled.slice(0, 10).filter(row => row[0] && row[1]);

if (pairs.length === 0) return container.textContent = 'No data found';

const matchingContainer = document.createElement('div');

matchingContainer.className = 'matching-container';

container.appendChild(matchingContainer);

const leftCol = document.createElement('div');

leftCol.className = 'matching-box';

const rightCol = document.createElement('div');

rightCol.className = 'matching-box';

matchingContainer.appendChild(leftCol);

matchingContainer.appendChild(rightCol);

leftCol.style.display = 'flex';

leftCol.style.flexWrap = 'wrap';

leftCol.style.gap = '10px';

rightCol.style.display = 'flex';

rightCol.style.flexWrap = 'wrap';

rightCol.style.gap = '10px';

const leftWords = pairs.map(p => p[0]);

const rightWords = shuffleArray(pairs.map(p => p[1])).map((word, index) =>

category === 'sentences' && index % 2 === 1 ? `after: ${word}` : word

);

let firstSelection = null;

const palette = ['#FFB3B3', '#FFD1A3', '#FFF3A3', '#C9F7B5', '#B7F0F6', '#C9C6FF', '#F7B3FF', '#DE85A6', '#E6CCFF', '#F0A326', '#E9FC6D'];

let colorIndex = 0;

function createBox(word, side) {

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

div.className = 'drag-item';

div.innerText = word;

div.dataset.side = side;

div.dataset.word = word.startsWith('after: ') ? word.slice(7) : word; // Store original word without "after: "

div.style.flex = '1 1 45%';

div.style.height = '50px';

div.style.display = 'flex';

div.style.alignItems = 'center';

div.style.justifyContent = 'center';

div.style.border = '2px solid #666';

div.style.cursor = 'pointer';

div.style.backgroundColor = '#eee';

div.onclick = () => handleClick(div);

return div;

}

function handleClick(box) {

if (!firstSelection) {

firstSelection = box;

box.style.border = '2px solid blue';

} else if (box.dataset.side !== firstSelection.dataset.side) {

const leftWord = firstSelection.dataset.side === 'left' ? firstSelection.dataset.word : box.dataset.word;

const rightWord = firstSelection.dataset.side === 'right' ? firstSelection.dataset.word : box.dataset.word;

const correctRight = pairs.find(p => p[0] === leftWord)?.[1];

if (rightWord === correctRight) {

const color = palette[colorIndex % palette.length];

colorIndex++;

[firstSelection, box].forEach(el => {

el.style.backgroundColor = color;

el.onclick = null;

});

const pairChip = document.createElement('div');

pairChip.className = 'pair';

pairChip.style.backgroundColor = color;

pairChip.innerHTML = `<span>${leftWord}</span><span class="sep">↔</span><span>${rightWord}</span>`;

container.insertBefore(pairChip, matchingContainer);

} else {

[firstSelection, box].forEach(el => {

el.style.backgroundColor = 'lightcoral';

setTimeout(() => el.style.backgroundColor = '#eee', 500);

});

}

firstSelection.style.border = '';

firstSelection = null;

}

leftWords.forEach(w => leftCol.appendChild(createBox(w, 'left')));

rightWords.forEach(w => rightCol.appendChild(createBox(w, 'right')));

}

/* ========== UPDATE CONTENT BASED ON DROPDOWN ========== */

function updateContent() {

const category = document.getElementById('category').value;

showFlashcards(category);

showQuiz(category);

showMatching(category);

}

// Initialize with default category

updateContent();

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Tunu Kai Kupu Learning Tools</title>

<style>

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

/* ================= DROPDOWN ================= */

#category-selector {

margin-bottom: 20px;

}

#category-selector select {

font-size: 16px;

padding: 5px;

}

/* ================= FLASHCARDS ================= */

#flashcards-section {

display: flex;

flex-wrap: wrap;

gap: 10px;

}

#flashcards-section .card {

width: 160px;

height: 100px;

padding: 10px;

margin: 5px;

border: 4px solid #333;

border-radius: 10px;

cursor: pointer;

display: flex;

align-items: center;

justify-content: center;

text-align: center;

font-weight: bold;

font-size: 18px;

word-wrap: break-word;

transition: transform 0.6s, background-color 0.6s;

background-color: lightyellow;

}

#flashcards-section .card.flipped {

background-color: lightblue;

}

/* ================= QUIZ ================= */

#quiz-section .quiz-question {

margin: 10px 0;

}

#quiz-section .quiz-question button {

font-size: 16px;

padding: 4px 8px;

margin: 2px;

}

/* ================= MATCHING ================= */

.matching-container {

display: flex;

justify-content: space-between;

gap: 20px;

margin-top: 20px;

}

.matching-box {

flex: 1;

min-height: 200px;

border: 2px dashed #ccc;

padding: 10px;

border-radius: 10px;

background-color: #fafafa;

display: flex;

flex-wrap: wrap;

gap: 10px;

}

#matching-section .drag-item {

flex: 1 1 45%;

height: 50px;

border: 2px solid #666;

background: #eee;

cursor: pointer;

text-align: center;

display: flex;

align-items: center;

justify-content: center;

font-weight: bold;

font-size: 16px;

box-sizing: border-box;

}

.matched-container {

display: flex;

flex-wrap: wrap;

gap: 5px;

margin-bottom: 10px;

}

.pair {

padding: 5px 8px;

border-radius: 5px;

font-weight: bold;

display: flex;

gap: 4px;

align-items: center;

}

.pair .sep { font-weight: bold; }

</style>

</head>

<body>

<h2>Tunu Kai Kupu Learning Tools</h2>

<label for="category">Select Category: </label>

<option value="phrases">Phrases</option>

<option value="sentences">Sentence Matching</option>

</select>

</div>

<h3>Flashcards</h3>

<h3>Matching - CLICK - CLICK</h3>

// Vocabulary data organized by categories

const data = {

phrases: [

["auē", "wow / oh!"],

["he tino reka", "very tasty / delicious"],

["te āhua o…", "the appearance of…"],

["keke tīhi", "cheesecake"],

["rerekē", "unusual / strange"],

["rīhi", "dish (as in a food dish)"],

["ātaahua", "beautiful / appealing"],

["ngā hēki", "the eggs"],

["kei roto", "inside / in"],

["me whakaaro au", "I should think / I wonder"],

["ka tunu tātou", "we will cook"],

["ā tērā wā", "next time / in the future"]

],

sentences: [

["Pipi: Ko Pipi tōku ingoa.", "My name is Pipi."],

["Rangi: Ko Rangi tōku ingoa. He tino pai ki au te tunu kai.", "My name is Rangi. I really enjoy baking."],

["Pipi: I tēnei rā, ka tunu tāua i tētahi keke tiakarete.", "Today, we’re going to bake a chocolate cake."],

["Rangi: He keke tiakarete tēnei.", "This is a chocolate cake."],

["Pipi: He tino reka tēnei ranunga!", "This mixture is super delicious!"],

["Rangi: Tāpirihia te huka me ngā hēki ki te peihana.", "Add the sugar and eggs to the bowl."],

["Pipi: Kei te umu te keke ināianei.", "The cake is now in the oven."],

["Rangi: Me tunu mō ngā meneti whā tekau mā rima.", "Bake for 45 minutes."],

["Pipi: Kei te hiainu au.", "I’m thirsty."],

["Rangi: Anei he kapu tī māu – he inu wera tino pai!", "Here’s a cup of tea for you – a lovely hot drink!"],

["Pipi: He tino pai rawa atu te keke me te tī!", "Cake and tea are the best!"],

["Rangi: Ka mau te wehi!", "Awesome!"]

]

};

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;

}

/* ========== FLASHCARDS ========== */

function showFlashcards(category) {

const container = document.getElementById('flashcards-section');

container.innerHTML = '';

const categoryData = data[category] || [];

if (categoryData.length === 0) return container.textContent = 'No data found';

const seen = new Set();

const uniqueCards = [];

const shuffled = shuffleArray([...categoryData]);

for (let row of shuffled) {

if (!seen.has(row[0])) {

uniqueCards.push(row);

seen.add(row[0]);

}

if (uniqueCards.length >= 10) break;

}

uniqueCards.forEach(row => {

const card = document.createElement('div');

card.className = 'card';

card.textContent = row[0];

card.onclick = () => {

if (!card.classList.contains('flipped')) {

card.classList.add('flipped');

card.textContent = row[1];

} else {

card.classList.remove('flipped');

card.textContent = row[0];

}

};

container.appendChild(card);

});

}

/* ========== QUIZ ========== */

function showQuiz(category) {

const container = document.getElementById('quiz-section');

container.innerHTML = '';

const categoryData = data[category] || [];

if (categoryData.length === 0) return container.textContent = 'No data found';

const shuffled = shuffleArray([...categoryData]);

const questions = shuffled.slice(0, Math.min(10, shuffled.length));

questions.forEach((row, i) => {

const qDiv = document.createElement('div');

qDiv.className = 'quiz-question';

qDiv.innerHTML = `<b>Q${i+1}: ${row[0]}</b><br>`;

const distractors = [];

while (distractors.length < 3) {

const r = categoryData[Math.floor(Math.random() * categoryData.length)][1];

if (r !== row[1] && !distractors.includes(r)) distractors.push(r);

}

const options = shuffleArray([row[1], ...distractors]);

options.forEach(opt => {

const btn = document.createElement('button');

btn.textContent = opt;

btn.onclick = () => {

if (btn.disabled) return;

if (opt === row[1]) {

btn.style.backgroundColor = 'lightgreen';

} else {

btn.style.backgroundColor = 'lightcoral';

}

[...qDiv.querySelectorAll('button')].forEach(b => b.disabled = true);

};

qDiv.appendChild(btn);

});

container.appendChild(qDiv);

});

}

/* ========== MATCHING (Click-Click) ========== */

function showMatching(category) {

const container = document.getElementById('matching-section');

container.innerHTML = '';

const categoryData = data[category] || [];

const shuffled = shuffleArray([...categoryData]);

const pairs = shuffled.slice(0, 10).filter(row => row[0] && row[1]);

if (pairs.length === 0) return container.textContent = 'No data found';

const matchingContainer = document.createElement('div');

matchingContainer.className = 'matching-container';

container.appendChild(matchingContainer);

const leftCol = document.createElement('div');

leftCol.className = 'matching-box';

const rightCol = document.createElement('div');

rightCol.className = 'matching-box';

matchingContainer.appendChild(leftCol);

matchingContainer.appendChild(rightCol);

leftCol.style.display = 'flex';

leftCol.style.flexWrap = 'wrap';

leftCol.style.gap = '10px';

rightCol.style.display = 'flex';

rightCol.style.flexWrap = 'wrap';

rightCol.style.gap = '10px';

const leftWords = pairs.map(p => p[0]);

const rightWords = shuffleArray(pairs.map(p => p[1]));

let firstSelection = null;

const palette = ['#FFB3B3', '#FFD1A3', '#FFF3A3', '#C9F7B5', '#B7F0F6', '#C9C6FF', '#F7B3FF', '#DE85A6', '#F0A326', '#E9FC6D'];

let colorIndex = 0;

function createBox(word, side) {

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

div.className = 'drag-item';

div.innerText = word;

div.dataset.side = side;

div.dataset.word = word;

div.style.flex = '1 1 45%';

div.style.height = '50px';

div.style.display = 'flex';

div.style.alignItems = 'center';

div.style.justifyContent = 'center';

div.style.border = '2px solid #666';

div.style.cursor = 'pointer';

div.style.backgroundColor = '#eee';

div.onclick = () => handleClick(div);

return div;

}

function handleClick(box) {

if (!firstSelection) {

firstSelection = box;

box.style.border = '2px solid blue';

} else if (box.dataset.side !== firstSelection.dataset.side) {

const leftWord = firstSelection.dataset.side === 'left' ? firstSelection.dataset.word : box.dataset.word;

const rightWord = firstSelection.dataset.side === 'right' ? firstSelection.dataset.word : box.dataset.word;

const correctRight = pairs.find(p => p[0] === leftWord)?.[1];

if (rightWord === correctRight) {

const color = palette[colorIndex % palette.length];

colorIndex++;

[firstSelection, box].forEach(el => {

el.style.backgroundColor = color;

el.onclick = null;

});

const pairChip = document.createElement('div');

pairChip.className = 'pair';

pairChip.style.backgroundColor = color;

pairChip.innerHTML = `<span>${leftWord}</span><span class="sep">↔</span><span>${rightWord}</span>`;

container.insertBefore(pairChip, matchingContainer);

} else {

[firstSelection, box].forEach(el => {

el.style.backgroundColor = 'lightcoral';

setTimeout(() => el.style.backgroundColor = '#eee', 500);

});

}

firstSelection.style.border = '';

firstSelection = null;

}

leftWords.forEach(w => leftCol.appendChild(createBox(w, 'left')));

rightWords.forEach(w => rightCol.appendChild(createBox(w, 'right')));

}

/* ========== UPDATE CONTENT BASED ON DROPDOWN ========== */

function updateContent() {

const category = document.getElementById('category').value;

showFlashcards(category);

showQuiz(category);

showMatching(category);

}

// Initialize with default category

updateContent();

</script>

</body>

</html>