Unit 1 Te Haerenga ki te Tāone - Going To Town
Section A - Going to town 5
Section E - The destination - past/present/future 8
Section H - The purpose of your trip 9
Section I - Modes of transport 11
Section K - Culture - The marae 14
<title>Te Haerenga – Transport to places</title>
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-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-section .quiz-question { margin:10px 0; }
#quiz-section .quiz-question button { font-size:16px; padding:4px 8px; margin:2px; }
.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; }
<h2>Te Haerenga - Transport to places</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>
<div id="flashcards-section"></div>
<div id="quiz-section"></div>
<h3>Matching - CLICK - CLICK</h3>
<div id="matching-section"></div>
["kura", "school"], ["whare pukapuka", "library"], ["pāka", "park"], ["hokomaha", "supermarket"],
["paihikara", "bike"], ["mā raro", "by foot"], ["pahi", "bus"], ["motokā", "car"], ["tereina", "train"], ["takahī", "taxi"],
["i te ata", "in the morning"], ["i te awatea", "in the middle of the day"], ["i te ahiahi", "in the afternoon"], ["i te pō", "at night"]
["E haere ana a Hemi ki te kura mā runga paihikara.", "Hemi is going to school by bike."],
["E haere ana a Ana ki te whare pukapuka mā raro.", "Ana is going to the library by foot."],
["E haere ana a Hemi ki te hokomaha mā runga motokā.", "Hemi is going to the supermarket by car."],
["E haere ana a Ana ki te pāka mā te pahi.", "Ana is going to the park by bus."],
["E haere ana a Hemi ki te whare pukapuka mā runga tereina.", "Hemi is going to the library by train."],
["E haere ana a Ana ki te pāka mā runga takahī.", "Ana is going to the park by taxi."],
["Ka hui a Hemi rāua ko Ana i te pāka.", "Hemi and Ana meet at the park."],
["Ka haere rāua ki te whare pukapuka mā runga paihikara.", "They go to the library together by bike."],
["E hoki ana a Hemi ki te kāinga mā raro.", "Hemi is going home by foot."],
["E hoki ana a Ana ki te kāinga mā runga motokā.", "Ana is going home by car."]
["I haere a Hemi ki te kura mā runga paihikara.", "Hemi went to school by bike."],
["Kua haere a Ana ki te whare pukapuka mā raro.", "Ana has gone to the library by foot."],
["Kei te haere a Hemi ki te hokomaha mā runga motokā.", "Hemi is going to the supermarket by car."],
["Ka haere a Ana ki te pāka mā runga pahi.", "Ana will go to the park by bus."],
["I haere a Hemi ki te whare pukapuka mā runga tereina.", "Hemi went to the library by train."],
["Ka haere a Ana ki te pāka mā runga takahī.", "Ana will go to the park by taxi."],
["Kua hui a Hemi rāua ko Ana i te pāka.", "Hemi and Ana have met at the park."],
["Kei te haere rāua ki te whare pukapuka mā runga paihikara.", "They are going to the library together by bike."],
["I hoki a Hemi ki te kāinga mā raro.", "Hemi went home by foot."],
["Ka hoki a Ana ki te kāinga mā runga motokā.", "Ana will go home by car."]
["I te ata, ka haere a Hemi ki te kura mā runga paihikara.", "In the morning, Hemi goes to school by bike."],
["I te ata, ka haere a Ana ki te whare pukapuka mā raro.", "In the morning, Ana goes to the library by foot."],
["I te awatea, ka haere a Hemi ki te hokomaha mā runga motokā.", "In the middle of the day, Hemi goes to the supermarket by car."],
["I te awatea, ka haere a Ana ki te pāka mā runga pahi.", "In the middle of the day, Ana goes to the park by bus."],
["I te ahiahi, ka haere a Hemi ki te whare pukapuka mā runga tereina.", "In the afternoon, Hemi goes to the library by train."],
["I te ahiahi, ka haere a Ana ki te pāka mā runga takahī.", "In the afternoon, Ana goes to the park by taxi."],
["I te pō, ka hui a Hemi rāua ko Ana i te pāka.", "At night, Hemi and Ana meet at the park."],
["I te pō, ka haere rāua ki te whare pukapuka mā runga paihikara.", "At night, they go to the library together by bike."]
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 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);
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);
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]));
const palette = ['#F4F4A0', '#BCF4A0', '#A0F4F4', '#B5C8EF', '#DCB5EF', '#F4A0D8', '#CDC7C7', '#E0C3B4', '#F6AEAE', '#EFD2B5', '#C8EFB5', '#AB8DE7'];
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')));
function updateContent(){const category=document.getElementById('category').value; showFlashcards(category); showQuiz(category); showMatching(category);}