UNIT 3 Occupations

<!DOCTYPE html>

<html>

<head>

<title>Occupations</title>

<style>

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

h2 { margin-bottom: 10px; }

#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; 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:16px; word-wrap:break-word; transition: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:#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;}

.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>Occupations</h2>

<div id="category-selector">

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

<select id="category" onchange="updateContent()">

<option value="vocab">📚 Vocab</option>

<option value="basicSentences">🏙 Basic Sentences</option>

<option value="tenseSentences">⏳ Tense Sentences</option>

<option value="timeSentences">🕒 Time Sentences</option>

</select>

</div>

<h3>Flashcards</h3>

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

const data = {

vocab: [

["kaiako", "teacher"], ["tumuaki", "principal"], ["kaitiaki pukapuka", "librarian"],

["nēhi", "nurse"], ["rata", "doctor"], ["rata niho", "dentist"],

["kaitunu kai", "chef"], ["kaimahi", "waiter"], ["kaihanga parāoa", "baker"],

["kaihanga whare", "builder"], ["kaimahi paipa", "plumber"], ["kaimahi hiko", "electrician"],

["hēkeretari", "secretary"], ["kaiwhakatika rorohiko", "computer technician"], ["kaihoahoa ā-ataata", "graphic designer"],

["pirihimana", "police officer"], ["kaipatu ahi", "firefighter"], ["hōia", "soldier"],

["kaitoi", "artist"], ["kaituhi", "writer"], ["kaiwaiata", "musician"]

],

basicSentences: [

["He kaiako a Frida.", "Frida is a teacher."],

["He tumuaki a Hemi.", "Hemi is a principal."],

["He kaitiaki pukapuka a Mere.", "Mere is a librarian."],

["He nēhi a Rangi.", "Rangi is a nurse."],

["He rata a Anahera.", "Anahera is a doctor."],

["He rata niho a Wiremu.", "Wiremu is a dentist."],

["He kaitunu kai a Moana.", "Moana is a chef."],

["He kaimahi a Tama.", "Tama is a waiter."],

["He kaihanga parāoa a Kiri.", "Kiri is a baker."],

["He pirihimana a Pita.", "Pita is a police officer."]

],

tenseSentences: [

["I mahi te kaiako ki te kura.", "The teacher worked at the school."],

["Kua mahi te nēhi ki te hōhipera.", "The nurse has worked at the hospital."],

["Kei te mahi te kaitunu kai ki te wharekai.", "The chef is working at the restaurant."],

["Ka mahi te pirihimana ki te tāone.", "The police officer will work in town."],

["I tuhi te kaituhi i tētahi pukapuka.", "The writer wrote a book."],

["Kua waiata te kaiwaiata ki te marae.", "The musician has sung at the marae."],

["Kei te hanga whare te kaihanga whare.", "The builder is building a house."],

["Ka tahu ahi te kaipatu ahi.", "The firefighter will put out a fire."],

["I tuhi pikitia te kaihoahoa ā-ataata.", "The graphic designer drew pictures."],

["Kua whakaora te rata i te tūroro.", "The doctor has healed the patient."]

],

timeSentences: [

["I te ata, ka mahi te kaiako ki te kura.", "In the morning, the teacher works at the school."],

["I te ata, ka mahi te nēhi ki te hōhipera.", "In the morning, the nurse works at the hospital."],

["I te awatea, ka tunu kai te kaitunu kai ki te wharekai.", "In the middle of the day, the chef cooks at the restaurant."],

["I te awatea, ka tiaki pukapuka te kaitiaki pukapuka.", "In the middle of the day, the librarian looks after the books."],

["I te ahiahi, ka waiata te kaiwaiata ki te marae.", "In the afternoon, the musician sings at the marae."],

["I te ahiahi, ka tākaro toi te kaitoi ki te whare toi.", "In the afternoon, the artist creates in the art room."],

["I te pō, ka patu ahi te kaipatu ahi.", "At night, the firefighter puts out fires."],

["I te pō, ka tiaki te pirihimana i te tāone.", "At night, the police officer guards the town."]

]

};

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>=12)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(12,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 */

function showMatching(category){

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

const categoryData=data[category]||[]; const shuffled=shuffleArray([...categoryData]); const pairs=shuffled.slice(0,12).filter(r=>r[0]&&r[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);

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

let firstSelection=null;

const palette = ['#F4F4A0', '#BCF4A0', '#A0F4F4', '#B5C8EF', '#DCB5EF', '#F4A0D8', '#CDC7C7', '#E0C3B4', '#F6AEAE', '#EFD2B5', '#C8EFB5', '#AB8DE7'];

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.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 */

function updateContent(){const category=document.getElementById('category').value; showFlashcards(category); showQuiz(category); showMatching(category);}

updateContent();

</script>

</body>

</html>

Page updated

Google Sites

Report abuse