Te Reo M\u0101ori Flashcards<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap');\n\n body {\n font-family: 'Poppins', sans-serif;\n background-color: #f5f5f5;\n background-image: url(\"data:image\/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23000000' fill-opacity='0.05' fill-rule='evenodd'\/%3E%3C\/svg%3E\");\n }\n\n .poutama-container {\n position: relative;\n height: 100%;\n width: 60px;\n overflow: hidden;\n }\n\n .poutama-step {\n position: absolute;\n background-color: #000;\n }\n\n .flashcard {\n perspective: 1000px;\n height: 350px;\n width: 100%;\n max-width: 550px;\n }\n\n .flashcard-inner {\n position: relative;\n width: 100%;\n height: 100%;\n transition: transform 0.8s;\n transform-style: preserve-3d;\n box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);\n border-radius: 16px;\n }\n\n .flashcard.flipped .flashcard-inner {\n transform: rotateY(180deg);\n }\n\n .flashcard-front,\n .flashcard-back {\n position: absolute;\n width: 100%;\n height: 100%;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 16px;\n padding: 20px;\n overflow: hidden;\n }\n\n .flashcard-front {\n background-color: #D40000;\n \/* Red *\/\n color: #fff;\n }\n\n .flashcard-back {\n background-color: #000;\n \/* Black *\/\n color: #fff;\n transform: rotateY(180deg);\n }\n\n .card-content {\n z-index: 10;\n text-align: center;\n width: 100%;\n }\n\n .progress-bar {\n height: 12px;\n border-radius: 6px;\n background: #333;\n overflow: hidden;\n }\n\n .progress {\n height: 100%;\n background: linear-gradient(90deg, #D40000 0%, #FFD700 100%);\n transition: width 0.5s ease;\n }\n\n .btn {\n transition: all 0.3s ease;\n }\n\n .btn:hover {\n transform: translateY(-2px);\n }\n\n .btn:active {\n transform: translateY(1px);\n }\n\n .koru-pattern {\n position: absolute;\n bottom: 10px;\n right: 10px;\n width: 80px;\n height: 80px;\n opacity: 0.2;\n }\n\n .hint-badge {\n position: absolute;\n top: 15px;\n right: 15px;\n background-color: #FFD700;\n color: #000;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-weight: bold;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n z-index: 20;\n transition: all 0.3s ease;\n }\n\n .hint-badge:hover {\n transform: scale(1.1);\n }\n\n .hint-content {\n position: absolute;\n top: 60px;\n right: 15px;\n background-color: #FFD700;\n color: #000;\n padding: 10px;\n border-radius: 8px;\n max-width: 200px;\n box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);\n z-index: 20;\n display: none;\n }\n\n .score-badge {\n background-color: #FFD700;\n color: #000;\n border-radius: 20px;\n padding: 5px 15px;\n font-weight: bold;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n }\n\n @keyframes bounce {\n\n 0%,\n 20%,\n 50%,\n 80%,\n 100% {\n transform: translateY(0);\n }\n\n 40% {\n transform: translateY(-20px);\n }\n\n 60% {\n transform: translateY(-10px);\n }\n }\n\n .bounce {\n animation: bounce 1s;\n }\n\n \/* Poutama pattern *\/\n .poutama {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n width: 60px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n .step {\n background-color: rgba(255, 255, 255, 0.2);\n margin: 2px;\n }\n <\/style>\n <\/head>\n\n <body>\n <div class=\"min-h-screen flex flex-col items-center py-12 px-4\">\n <div class=\"w-full max-w-4xl\">\n \n <div class=\"text-center mb-10\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Te Reo M\u0101ori Whakaako<\/h1>\n <p class=\"text-lg text-gray-600\">Intermediate to Advanced Vocabulary<\/p>\n <\/div>\n\n \n <div class=\"mb-8 flex justify-between items-center\">\n <div class=\"flex items-center gap-2\">\n <span class=\"text-sm font-medium text-gray-700\" id=\"progress-text\">Card 1 of 5<\/span>\n <span class=\"score-badge\" id=\"mastered-text\">Mastered: 0\/5<\/span>\n <\/div>\n <div class=\"score-badge\" id=\"score-display\">Score: 0<\/div>\n <\/div>\n\n <div class=\"mb-4 w-full\">\n <div class=\"progress-bar\">\n <div class=\"progress\" id=\"progress-bar\" style=\"width: 20%\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"flashcard mx-auto mb-8 relative\" id=\"flashcard\">\n <div class=\"flashcard-inner\">\n <div class=\"flashcard-front\">\n \n <div class=\"poutama\">\n <div class=\"step h-1\/5\"><\/div>\n <div class=\"step h-1\/5\"><\/div>\n <div class=\"step h-1\/5\"><\/div>\n <div class=\"step h-1\/5\"><\/div>\n <div class=\"step h-1\/5\"><\/div>\n <\/div>\n\n <div class=\"card-content pl-16\">\n <h2 class=\"text-4xl font-bold mb-4\" id=\"front-text\">Whakaaro<\/h2>\n <div class=\"border-t border-white opacity-30 my-4 mx-auto w-3\/4\"><\/div>\n <p class=\"text-lg italic opacity-80\">Click to reveal meaning<\/p>\n <\/div>\n\n \n <div class=\"hint-badge\" id=\"hint-badge-front\">?<\/div>\n <div class=\"hint-content\" id=\"hint-content-front\">Starts with ‘T’<\/div>\n\n \n <svg class=\"koru-pattern\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M50,10 C30,10 10,30 10,50 C10,70 30,90 50,90 C70,90 90,70 90,50 C90,30 70,10 50,10 Z M50,80 C35,80 20,65 20,50 C20,35 35,20 50,20 C65,20 80,35 80,50 C80,65 65,80 50,80 Z M50,30 C40,30 30,40 30,50 C30,60 40,70 50,70 C60,70 70,60 70,50 C70,40 60,30 50,30 Z M50,60 C45,60 40,55 40,50 C40,45 45,40 50,40 C55,40 60,45 60,50 C60,55 55,60 50,60 Z\" fill=\"#fff\" fill-opacity=\"0.2\" \/>\n <\/svg>\n <\/div>\n <div class=\"flashcard-back\">\n \n <div class=\"poutama\">\n <div class=\"step h-1\/5\"><\/div>\n <div class=\"step h-1\/5\"><\/div>\n <div class=\"step h-1\/5\"><\/div>\n <div class=\"step h-1\/5\"><\/div>\n <div class=\"step h-1\/5\"><\/div>\n <\/div>\n\n <div class=\"card-content pl-16\">\n <h2 class=\"text-4xl font-bold mb-2\" id=\"back-text\">Thought, opinion<\/h2>\n <div class=\"border-t border-white opacity-30 my-4 mx-auto w-3\/4\"><\/div>\n <p class=\"text-lg mb-4\" id=\"example-text\">Example: He whakaaro pai t\u0113n\u0101.<\/p>\n <p class=\"text-sm italic opacity-80\">(That’s a good thought\/idea.)<\/p>\n <\/div>\n\n \n <div class=\"hint-badge\" id=\"hint-badge-back\">?<\/div>\n <div class=\"hint-content\" id=\"hint-content-back\">Mental process<\/div>\n\n \n <svg class=\"koru-pattern\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M50,10 C30,10 10,30 10,50 C10,70 30,90 50,90 C70,90 90,70 90,50 C90,30 70,10 50,10 Z M50,80 C35,80 20,65 20,50 C20,35 35,20 50,20 C65,20 80,35 80,50 C80,65 65,80 50,80 Z M50,30 C40,30 30,40 30,50 C30,60 40,70 50,70 C60,70 70,60 70,50 C70,40 60,30 50,30 Z M50,60 C45,60 40,55 40,50 C40,45 45,40 50,40 C55,40 60,45 60,50 C60,55 55,60 50,60 Z\" fill=\"#fff\" fill-opacity=\"0.2\" \/>\n <\/svg>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"flex flex-col sm:flex-row justify-center gap-4 mb-8\">\n <button id=\"flip-btn\" class=\"btn bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-lg shadow-md\">\n Flip Card\n <\/button>\n <button id=\"next-btn\" class=\"btn bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 px-6 rounded-lg shadow-md\">\n Next Card\n <\/button>\n <\/div>\n\n \n <div class=\"flex justify-center gap-4\">\n <button id=\"still-learning-btn\" class=\"btn bg-gray-800 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded-lg shadow-md\">\n Still Learning (0 pts)\n <\/button>\n <button id=\"mastered-btn\" class=\"btn bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg shadow-md\">\n Mastered! (+10 pts)\n <\/button>\n <\/div>\n\n \n <div id=\"results-modal\" class=\"fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50 hidden\">\n <div class=\"bg-white rounded-xl p-8 max-w-md w-full mx-4 relative overflow-hidden\">\n \n <div class=\"absolute left-0 top-0 h-full w-8\">\n <div class=\"bg-red-700 h-1\/5 w-full\"><\/div>\n <div class=\"bg-black h-1\/5 w-full\"><\/div>\n <div class=\"bg-red-700 h-1\/5 w-full\"><\/div>\n <div class=\"bg-black h-1\/5 w-full\"><\/div>\n <div class=\"bg-red-700 h-1\/5 w-full\"><\/div>\n <\/div>\n\n <div class=\"pl-10\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-4\">Ka pai! (Well done!)<\/h2>\n <p class=\"text-lg text-gray-600 mb-2\" id=\"results-text\">You’ve mastered 0 out of 5 cards.<\/p>\n <p class=\"text-lg text-gray-600 mb-6\" id=\"final-score-text\">Final score: 0 points<\/p>\n <div class=\"flex justify-center\">\n <button id=\"restart-btn\" class=\"btn bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-lg shadow-md\">\n Start Again\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Flashcard data for intermediate to advanced Te Reo M\u0101ori speakers\n const flashcards = [{\n front: \"Whakaaro\",\n back: \"Thought, opinion\",\n example: \"Example: He whakaaro pai t\u0113n\u0101.\",\n frontHint: \"Starts with 'W'\",\n backHint: \"Mental process\"\n },\n {\n front: \"Whakapapa\",\n back: \"Genealogy, lineage\",\n example: \"Example: Ko t\u0113nei t\u014dku whakapapa.\",\n frontHint: \"Family connections\",\n backHint: \"Ancestral lines\"\n },\n {\n front: \"Kaitiakitanga\",\n back: \"Guardianship, stewardship\",\n example: \"Example: Ko te kaitiakitanga o te taiao he mahi nui.\",\n frontHint: \"Protecting something\",\n backHint: \"Environmental concept\"\n },\n {\n front: \"Manaakitanga\",\n back: \"Hospitality, kindness\",\n example: \"Example: He iwi manaakitanga m\u0101tou.\",\n frontHint: \"Caring for others\",\n backHint: \"Cultural value\"\n },\n {\n front: \"Rangatiratanga\",\n back: \"Sovereignty, leadership\",\n example: \"Example: Kei a ia te rangatiratanga o te iwi.\",\n frontHint: \"Authority concept\",\n backHint: \"Chiefly quality\"\n }\n ];\n \/\/ Variables\n let currentCardIndex = 0;\n let masteredCards = new Array(flashcards.length).fill(false);\n let score = 0;\n let hintShown = false;\n \/\/ DOM elements\n const flashcard = document.getElementById('flashcard');\n const frontText = document.getElementById('front-text');\n const backText = document.getElementById('back-text');\n const exampleText = document.getElementById('example-text');\n const flipBtn = document.getElementById('flip-btn');\n const nextBtn = document.getElementById('next-btn');\n const stillLearningBtn = document.getElementById('still-learning-btn');\n const masteredBtn = document.getElementById('mastered-btn');\n const progressBar = document.getElementById('progress-bar');\n const progressText = document.getElementById('progress-text');\n const masteredText = document.getElementById('mastered-text');\n const resultsModal = document.getElementById('results-modal');\n const resultsText = document.getElementById('results-text');\n const finalScoreText = document.getElementById('final-score-text');\n const restartBtn = document.getElementById('restart-btn');\n const scoreDisplay = document.getElementById('score-display');\n const hintBadgeFront = document.getElementById('hint-badge-front');\n const hintContentFront = document.getElementById('hint-content-front');\n const hintBadgeBack = document.getElementById('hint-badge-back');\n const hintContentBack = document.getElementById('hint-content-back');\n \/\/ Initialize\n updateCard();\n updateProgress();\n updateScore();\n \/\/ Event listeners\n flipBtn.addEventListener('click', flipCard);\n flashcard.addEventListener('click', flipCard);\n nextBtn.addEventListener('click', nextCard);\n stillLearningBtn.addEventListener('click', () => {\n masteredCards[currentCardIndex] = false;\n updateMasteredCount();\n nextCard();\n });\n masteredBtn.addEventListener('click', () => {\n if (!masteredCards[currentCardIndex]) {\n score += 10;\n updateScore();\n }\n masteredCards[currentCardIndex] = true;\n updateMasteredCount();\n flashcard.classList.add('bounce');\n setTimeout(() => {\n flashcard.classList.remove('bounce');\n nextCard();\n }, 1000);\n });\n restartBtn.addEventListener('click', restartGame);\n \/\/ Hint functionality\n hintBadgeFront.addEventListener('click', function(e) {\n e.stopPropagation();\n toggleHint(hintContentFront);\n });\n hintBadgeBack.addEventListener('click', function(e) {\n e.stopPropagation();\n toggleHint(hintContentBack);\n });\n \/\/ Functions\n function toggleHint(hintElement) {\n if (hintElement.style.display === 'block') {\n hintElement.style.display = 'none';\n hintShown = false;\n } else {\n hintElement.style.display = 'block';\n if (!hintShown) {\n \/\/ Penalty for using hint\n score = Math.max(0, score - 2);\n updateScore();\n hintShown = true;\n }\n }\n }\n\n function flipCard() {\n flashcard.classList.toggle('flipped');\n \/\/ Hide hints when flipping\n hintContentFront.style.display = 'none';\n hintContentBack.style.display = 'none';\n }\n\n function nextCard() {\n if (flashcard.classList.contains('flipped')) {\n flashcard.classList.remove('flipped');\n \/\/ Small delay to ensure the flip animation completes before changing content\n setTimeout(() => {\n goToNextCard();\n }, 300);\n } else {\n goToNextCard();\n }\n }\n\n function goToNextCard() {\n currentCardIndex = (currentCardIndex + 1) % flashcards.length;\n updateCard();\n updateProgress();\n hintShown = false;\n \/\/ Check if we've gone through all cards\n if (currentCardIndex === 0) {\n showResults();\n }\n }\n\n function updateCard() {\n const card = flashcards[currentCardIndex];\n frontText.textContent = card.front;\n backText.textContent = card.back;\n exampleText.textContent = card.example;\n hintContentFront.textContent = card.frontHint;\n hintContentBack.textContent = card.backHint;\n \/\/ Hide hints\n hintContentFront.style.display = 'none';\n hintContentBack.style.display = 'none';\n }\n\n function updateProgress() {\n const progress = ((currentCardIndex + 1) \/ flashcards.length) * 100;\n progressBar.style.width = `${progress}%`;\n progressText.textContent = `Card ${currentCardIndex + 1} of ${flashcards.length}`;\n }\n\n function updateMasteredCount() {\n const masteredCount = masteredCards.filter(Boolean).length;\n masteredText.textContent = `Mastered: ${masteredCount}\/${flashcards.length}`;\n }\n\n function updateScore() {\n scoreDisplay.textContent = `Score: ${score}`;\n }\n\n function showResults() {\n const masteredCount = masteredCards.filter(Boolean).length;\n resultsText.textContent = `You've mastered ${masteredCount} out of ${flashcards.length} cards.`;\n finalScoreText.textContent = `Final score: ${score} points`;\n resultsModal.classList.remove('hidden');\n }\n\n function restartGame() {\n currentCardIndex = 0;\n masteredCards = new Array(flashcards.length).fill(false);\n score = 0;\n updateCard();\n updateProgress();\n updateMasteredCount();\n updateScore();\n resultsModal.classList.add('hidden');\n }\n \/\/ Create dynamic Poutama pattern\n function createPoutamaPattern() {\n const poutamaElements = document.querySelectorAll('.poutama');\n poutamaElements.forEach(poutama => {\n \/\/ Clear existing steps\n poutama.innerHTML = '';\n \/\/ Create steps\n for (let i = 0; i < 5; i++) {\n const step = document.createElement('div');\n step.className = 'step';\n step.style.height = '20%';\n poutama.appendChild(step);\n }\n });\n }\n createPoutamaPattern();\n });\n <\/script>\n <script>\n (function() {\n function c() {\n var b = a.contentDocument || a.contentWindow.document;\n if (b) {\n var d = b.createElement('script');\n d.innerHTML = \"window.__CF$cv$params={r:'96a5064ee6591c51',t:'MTc1NDM4MzU5My4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";\n b.getElementsByTagName('head')[0].appendChild(d)\n }\n }\n if (document.body) {\n var a = document.createElement('iframe');\n a.height = 1;\n a.width = 1;\n a.style.position = 'absolute';\n a.style.top = 0;\n a.style.left = 0;\n a.style.border = 'none';\n a.style.visibility = 'hidden';\n document.body.appendChild(a);\n if ('loading' !== document.readyState) c();\n else if (window.addEventListener) document.addEventListener('DOMContentLoaded', c);\n else {\n var e = document.onreadystatechange || function() {};\n document.onreadystatechange = function(b) {\n e(b);\n 'loading' !== document.readyState && (document.onreadystatechange = e, c())\n }\n }\n }\n })();\n <\/script>\n <\/body>\n\n <\/html>\n","protected":false},"excerpt":{"rendered":"<p>Te Reo M\u0101ori Flashcards Te Reo M\u0101ori Whakaako Intermediate to Advanced Vocabulary Card 1 of 5 Mastered: 0\/5 Score: 0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","pagelayer_contact_templates":[],"_pagelayer_content":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_kadence_starter_templates_imported_post":false,"footnotes":"","_wpscppro_dont_share_socialmedia":false,"_wpscppro_custom_social_share_image":0,"_facebook_share_type":"","_twitter_share_type":"","_linkedin_share_type":"","_pinterest_share_type":"","_linkedin_share_type_page":"","_instagram_share_type":"","_medium_share_type":"","_threads_share_type":"","_google_business_share_type":"","_selected_social_profile":[],"_wpsp_enable_custom_social_template":false,"_wpsp_social_scheduling":{"enabled":false,"datetime":null,"platforms":[],"status":"template_only","dateOption":"today","timeOption":"now","customDays":"","customHours":"","customDate":"","customTime":"","schedulingType":"absolute"},"_wpsp_active_default_template":true},"categories":[1],"tags":[],"class_list":["post-473","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Taonga Admin","author_link":"https:\/\/taonga.nxfanz.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Te Reo M\u0101ori Flashcards Te Reo M\u0101ori Whakaako Intermediate to Advanced Vocabulary Card 1 of 5 Mastered: 0\/5 Score: 0 […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/posts\/473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=473"}],"version-history":[{"count":1,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/posts\/473\/revisions"}],"predecessor-version":[{"id":474,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/posts\/473\/revisions\/474"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the astra-sites domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php on line 6170

Warning: include_once(/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/functions.php): Failed to open stream: No such file or directory in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 118

Warning: include_once(): Failed opening '/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/functions.php' for inclusion (include_path='.:/opt/cpanel/ea-php81/root/usr/share/pear') in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 118

Warning: include_once(/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/api-settings.php): Failed to open stream: No such file or directory in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 119

Warning: include_once(): Failed opening '/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/api-settings.php' for inclusion (include_path='.:/opt/cpanel/ea-php81/root/usr/share/pear') in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 119

Warning: session_start(): Session cannot be started after headers have already been sent in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/chatbot-ai-free-models/includes/class-chatbot-main.php on line 88

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6170) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1897

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6170) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1897

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6170) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1897

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6170) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1897

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6170) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1897

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6170) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1897

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6170) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1897

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6170) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1897
{"id":473,"date":"2025-08-10T19:34:00","date_gmt":"2025-08-10T19:34:00","guid":{"rendered":"https:\/\/taonga.nxfanz.com\/?p=473"},"modified":"2025-08-10T19:34:00","modified_gmt":"2025-08-10T19:34:00","slug":"learning-2","status":"publish","type":"post","link":"https:\/\/taonga.nxfanz.com\/?p=473","title":{"rendered":"learning 2"},"content":{"rendered":"\n\n \n\n \n \n \n Te Reo M\u0101ori Flashcards<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap');\n\n body {\n font-family: 'Poppins', sans-serif;\n background-color: #f5f5f5;\n background-image: url(\"data:image\/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23000000' fill-opacity='0.05' fill-rule='evenodd'\/%3E%3C\/svg%3E\");\n }\n\n .poutama-container {\n position: relative;\n height: 100%;\n width: 60px;\n overflow: hidden;\n }\n\n .poutama-step {\n position: absolute;\n background-color: #000;\n }\n\n .flashcard {\n perspective: 1000px;\n height: 350px;\n width: 100%;\n max-width: 550px;\n }\n\n .flashcard-inner {\n position: relative;\n width: 100%;\n height: 100%;\n transition: transform 0.8s;\n transform-style: preserve-3d;\n box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);\n border-radius: 16px;\n }\n\n .flashcard.flipped .flashcard-inner {\n transform: rotateY(180deg);\n }\n\n .flashcard-front,\n .flashcard-back {\n position: absolute;\n width: 100%;\n height: 100%;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 16px;\n padding: 20px;\n overflow: hidden;\n }\n\n .flashcard-front {\n background-color: #D40000;\n \/* Red *\/\n color: #fff;\n }\n\n .flashcard-back {\n background-color: #000;\n \/* Black *\/\n color: #fff;\n transform: rotateY(180deg);\n }\n\n .card-content {\n z-index: 10;\n text-align: center;\n width: 100%;\n }\n\n .progress-bar {\n height: 12px;\n border-radius: 6px;\n background: #333;\n overflow: hidden;\n }\n\n .progress {\n height: 100%;\n background: linear-gradient(90deg, #D40000 0%, #FFD700 100%);\n transition: width 0.5s ease;\n }\n\n .btn {\n transition: all 0.3s ease;\n }\n\n .btn:hover {\n transform: translateY(-2px);\n }\n\n .btn:active {\n transform: translateY(1px);\n }\n\n .koru-pattern {\n position: absolute;\n bottom: 10px;\n right: 10px;\n width: 80px;\n height: 80px;\n opacity: 0.2;\n }\n\n .hint-badge {\n position: absolute;\n top: 15px;\n right: 15px;\n background-color: #FFD700;\n color: #000;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-weight: bold;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n z-index: 20;\n transition: all 0.3s ease;\n }\n\n .hint-badge:hover {\n transform: scale(1.1);\n }\n\n .hint-content {\n position: absolute;\n top: 60px;\n right: 15px;\n background-color: #FFD700;\n color: #000;\n padding: 10px;\n border-radius: 8px;\n max-width: 200px;\n box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);\n z-index: 20;\n display: none;\n }\n\n .score-badge {\n background-color: #FFD700;\n color: #000;\n border-radius: 20px;\n padding: 5px 15px;\n font-weight: bold;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n }\n\n @keyframes bounce {\n\n 0%,\n 20%,\n 50%,\n 80%,\n 100% {\n transform: translateY(0);\n }\n\n 40% {\n transform: translateY(-20px);\n }\n\n 60% {\n transform: translateY(-10px);\n }\n }\n\n .bounce {\n animation: bounce 1s;\n }\n\n \/* Poutama pattern *\/\n .poutama {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n width: 60px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n .step {\n background-color: rgba(255, 255, 255, 0.2);\n margin: 2px;\n }\n <\/style>\n <\/head>\n\n <body>\n <div class=\"min-h-screen flex flex-col items-center py-12 px-4\">\n <div class=\"w-full max-w-4xl\">\n \n <div class=\"text-center mb-10\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Te Reo M\u0101ori Whakaako<\/h1>\n <p class=\"text-lg text-gray-600\">Intermediate to Advanced Vocabulary<\/p>\n <\/div>\n\n \n <div class=\"mb-8 flex justify-between items-center\">\n <div class=\"flex items-center gap-2\">\n <span class=\"text-sm font-medium text-gray-700\" id=\"progress-text\">Card 1 of 5<\/span>\n <span class=\"score-badge\" id=\"mastered-text\">Mastered: 0\/5<\/span>\n <\/div>\n <div class=\"score-badge\" id=\"score-display\">Score: 0<\/div>\n <\/div>\n\n <div class=\"mb-4 w-full\">\n <div class=\"progress-bar\">\n <div class=\"progress\" id=\"progress-bar\" style=\"width: 20%\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"flashcard mx-auto mb-8 relative\" id=\"flashcard\">\n <div class=\"flashcard-inner\">\n <div class=\"flashcard-front\">\n \n <div class=\"poutama\">\n <div class=\"step h-1\/5\"><\/div>\n <div class=\"step h-1\/5\"><\/div>\n <div class=\"step h-1\/5\"><\/div>\n <div class=\"step h-1\/5\"><\/div>\n <div class=\"step h-1\/5\"><\/div>\n <\/div>\n\n <div class=\"card-content pl-16\">\n <h2 class=\"text-4xl font-bold mb-4\" id=\"front-text\">Whakaaro<\/h2>\n <div class=\"border-t border-white opacity-30 my-4 mx-auto w-3\/4\"><\/div>\n <p class=\"text-lg italic opacity-80\">Click to reveal meaning<\/p>\n <\/div>\n\n \n <div class=\"hint-badge\" id=\"hint-badge-front\">?<\/div>\n <div class=\"hint-content\" id=\"hint-content-front\">Starts with ‘T’<\/div>\n\n \n <svg class=\"koru-pattern\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M50,10 C30,10 10,30 10,50 C10,70 30,90 50,90 C70,90 90,70 90,50 C90,30 70,10 50,10 Z M50,80 C35,80 20,65 20,50 C20,35 35,20 50,20 C65,20 80,35 80,50 C80,65 65,80 50,80 Z M50,30 C40,30 30,40 30,50 C30,60 40,70 50,70 C60,70 70,60 70,50 C70,40 60,30 50,30 Z M50,60 C45,60 40,55 40,50 C40,45 45,40 50,40 C55,40 60,45 60,50 C60,55 55,60 50,60 Z\" fill=\"#fff\" fill-opacity=\"0.2\" \/>\n <\/svg>\n <\/div>\n <div class=\"flashcard-back\">\n \n <div class=\"poutama\">\n <div class=\"step h-1\/5\"><\/div>\n <div class=\"step h-1\/5\"><\/div>\n <div class=\"step h-1\/5\"><\/div>\n <div class=\"step h-1\/5\"><\/div>\n <div class=\"step h-1\/5\"><\/div>\n <\/div>\n\n <div class=\"card-content pl-16\">\n <h2 class=\"text-4xl font-bold mb-2\" id=\"back-text\">Thought, opinion<\/h2>\n <div class=\"border-t border-white opacity-30 my-4 mx-auto w-3\/4\"><\/div>\n <p class=\"text-lg mb-4\" id=\"example-text\">Example: He whakaaro pai t\u0113n\u0101.<\/p>\n <p class=\"text-sm italic opacity-80\">(That’s a good thought\/idea.)<\/p>\n <\/div>\n\n \n <div class=\"hint-badge\" id=\"hint-badge-back\">?<\/div>\n <div class=\"hint-content\" id=\"hint-content-back\">Mental process<\/div>\n\n \n <svg class=\"koru-pattern\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M50,10 C30,10 10,30 10,50 C10,70 30,90 50,90 C70,90 90,70 90,50 C90,30 70,10 50,10 Z M50,80 C35,80 20,65 20,50 C20,35 35,20 50,20 C65,20 80,35 80,50 C80,65 65,80 50,80 Z M50,30 C40,30 30,40 30,50 C30,60 40,70 50,70 C60,70 70,60 70,50 C70,40 60,30 50,30 Z M50,60 C45,60 40,55 40,50 C40,45 45,40 50,40 C55,40 60,45 60,50 C60,55 55,60 50,60 Z\" fill=\"#fff\" fill-opacity=\"0.2\" \/>\n <\/svg>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"flex flex-col sm:flex-row justify-center gap-4 mb-8\">\n <button id=\"flip-btn\" class=\"btn bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-lg shadow-md\">\n Flip Card\n <\/button>\n <button id=\"next-btn\" class=\"btn bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 px-6 rounded-lg shadow-md\">\n Next Card\n <\/button>\n <\/div>\n\n \n <div class=\"flex justify-center gap-4\">\n <button id=\"still-learning-btn\" class=\"btn bg-gray-800 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded-lg shadow-md\">\n Still Learning (0 pts)\n <\/button>\n <button id=\"mastered-btn\" class=\"btn bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg shadow-md\">\n Mastered! (+10 pts)\n <\/button>\n <\/div>\n\n \n <div id=\"results-modal\" class=\"fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50 hidden\">\n <div class=\"bg-white rounded-xl p-8 max-w-md w-full mx-4 relative overflow-hidden\">\n \n <div class=\"absolute left-0 top-0 h-full w-8\">\n <div class=\"bg-red-700 h-1\/5 w-full\"><\/div>\n <div class=\"bg-black h-1\/5 w-full\"><\/div>\n <div class=\"bg-red-700 h-1\/5 w-full\"><\/div>\n <div class=\"bg-black h-1\/5 w-full\"><\/div>\n <div class=\"bg-red-700 h-1\/5 w-full\"><\/div>\n <\/div>\n\n <div class=\"pl-10\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-4\">Ka pai! (Well done!)<\/h2>\n <p class=\"text-lg text-gray-600 mb-2\" id=\"results-text\">You’ve mastered 0 out of 5 cards.<\/p>\n <p class=\"text-lg text-gray-600 mb-6\" id=\"final-score-text\">Final score: 0 points<\/p>\n <div class=\"flex justify-center\">\n <button id=\"restart-btn\" class=\"btn bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-lg shadow-md\">\n Start Again\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Flashcard data for intermediate to advanced Te Reo M\u0101ori speakers\n const flashcards = [{\n front: \"Whakaaro\",\n back: \"Thought, opinion\",\n example: \"Example: He whakaaro pai t\u0113n\u0101.\",\n frontHint: \"Starts with 'W'\",\n backHint: \"Mental process\"\n },\n {\n front: \"Whakapapa\",\n back: \"Genealogy, lineage\",\n example: \"Example: Ko t\u0113nei t\u014dku whakapapa.\",\n frontHint: \"Family connections\",\n backHint: \"Ancestral lines\"\n },\n {\n front: \"Kaitiakitanga\",\n back: \"Guardianship, stewardship\",\n example: \"Example: Ko te kaitiakitanga o te taiao he mahi nui.\",\n frontHint: \"Protecting something\",\n backHint: \"Environmental concept\"\n },\n {\n front: \"Manaakitanga\",\n back: \"Hospitality, kindness\",\n example: \"Example: He iwi manaakitanga m\u0101tou.\",\n frontHint: \"Caring for others\",\n backHint: \"Cultural value\"\n },\n {\n front: \"Rangatiratanga\",\n back: \"Sovereignty, leadership\",\n example: \"Example: Kei a ia te rangatiratanga o te iwi.\",\n frontHint: \"Authority concept\",\n backHint: \"Chiefly quality\"\n }\n ];\n \/\/ Variables\n let currentCardIndex = 0;\n let masteredCards = new Array(flashcards.length).fill(false);\n let score = 0;\n let hintShown = false;\n \/\/ DOM elements\n const flashcard = document.getElementById('flashcard');\n const frontText = document.getElementById('front-text');\n const backText = document.getElementById('back-text');\n const exampleText = document.getElementById('example-text');\n const flipBtn = document.getElementById('flip-btn');\n const nextBtn = document.getElementById('next-btn');\n const stillLearningBtn = document.getElementById('still-learning-btn');\n const masteredBtn = document.getElementById('mastered-btn');\n const progressBar = document.getElementById('progress-bar');\n const progressText = document.getElementById('progress-text');\n const masteredText = document.getElementById('mastered-text');\n const resultsModal = document.getElementById('results-modal');\n const resultsText = document.getElementById('results-text');\n const finalScoreText = document.getElementById('final-score-text');\n const restartBtn = document.getElementById('restart-btn');\n const scoreDisplay = document.getElementById('score-display');\n const hintBadgeFront = document.getElementById('hint-badge-front');\n const hintContentFront = document.getElementById('hint-content-front');\n const hintBadgeBack = document.getElementById('hint-badge-back');\n const hintContentBack = document.getElementById('hint-content-back');\n \/\/ Initialize\n updateCard();\n updateProgress();\n updateScore();\n \/\/ Event listeners\n flipBtn.addEventListener('click', flipCard);\n flashcard.addEventListener('click', flipCard);\n nextBtn.addEventListener('click', nextCard);\n stillLearningBtn.addEventListener('click', () => {\n masteredCards[currentCardIndex] = false;\n updateMasteredCount();\n nextCard();\n });\n masteredBtn.addEventListener('click', () => {\n if (!masteredCards[currentCardIndex]) {\n score += 10;\n updateScore();\n }\n masteredCards[currentCardIndex] = true;\n updateMasteredCount();\n flashcard.classList.add('bounce');\n setTimeout(() => {\n flashcard.classList.remove('bounce');\n nextCard();\n }, 1000);\n });\n restartBtn.addEventListener('click', restartGame);\n \/\/ Hint functionality\n hintBadgeFront.addEventListener('click', function(e) {\n e.stopPropagation();\n toggleHint(hintContentFront);\n });\n hintBadgeBack.addEventListener('click', function(e) {\n e.stopPropagation();\n toggleHint(hintContentBack);\n });\n \/\/ Functions\n function toggleHint(hintElement) {\n if (hintElement.style.display === 'block') {\n hintElement.style.display = 'none';\n hintShown = false;\n } else {\n hintElement.style.display = 'block';\n if (!hintShown) {\n \/\/ Penalty for using hint\n score = Math.max(0, score - 2);\n updateScore();\n hintShown = true;\n }\n }\n }\n\n function flipCard() {\n flashcard.classList.toggle('flipped');\n \/\/ Hide hints when flipping\n hintContentFront.style.display = 'none';\n hintContentBack.style.display = 'none';\n }\n\n function nextCard() {\n if (flashcard.classList.contains('flipped')) {\n flashcard.classList.remove('flipped');\n \/\/ Small delay to ensure the flip animation completes before changing content\n setTimeout(() => {\n goToNextCard();\n }, 300);\n } else {\n goToNextCard();\n }\n }\n\n function goToNextCard() {\n currentCardIndex = (currentCardIndex + 1) % flashcards.length;\n updateCard();\n updateProgress();\n hintShown = false;\n \/\/ Check if we've gone through all cards\n if (currentCardIndex === 0) {\n showResults();\n }\n }\n\n function updateCard() {\n const card = flashcards[currentCardIndex];\n frontText.textContent = card.front;\n backText.textContent = card.back;\n exampleText.textContent = card.example;\n hintContentFront.textContent = card.frontHint;\n hintContentBack.textContent = card.backHint;\n \/\/ Hide hints\n hintContentFront.style.display = 'none';\n hintContentBack.style.display = 'none';\n }\n\n function updateProgress() {\n const progress = ((currentCardIndex + 1) \/ flashcards.length) * 100;\n progressBar.style.width = `${progress}%`;\n progressText.textContent = `Card ${currentCardIndex + 1} of ${flashcards.length}`;\n }\n\n function updateMasteredCount() {\n const masteredCount = masteredCards.filter(Boolean).length;\n masteredText.textContent = `Mastered: ${masteredCount}\/${flashcards.length}`;\n }\n\n function updateScore() {\n scoreDisplay.textContent = `Score: ${score}`;\n }\n\n function showResults() {\n const masteredCount = masteredCards.filter(Boolean).length;\n resultsText.textContent = `You've mastered ${masteredCount} out of ${flashcards.length} cards.`;\n finalScoreText.textContent = `Final score: ${score} points`;\n resultsModal.classList.remove('hidden');\n }\n\n function restartGame() {\n currentCardIndex = 0;\n masteredCards = new Array(flashcards.length).fill(false);\n score = 0;\n updateCard();\n updateProgress();\n updateMasteredCount();\n updateScore();\n resultsModal.classList.add('hidden');\n }\n \/\/ Create dynamic Poutama pattern\n function createPoutamaPattern() {\n const poutamaElements = document.querySelectorAll('.poutama');\n poutamaElements.forEach(poutama => {\n \/\/ Clear existing steps\n poutama.innerHTML = '';\n \/\/ Create steps\n for (let i = 0; i < 5; i++) {\n const step = document.createElement('div');\n step.className = 'step';\n step.style.height = '20%';\n poutama.appendChild(step);\n }\n });\n }\n createPoutamaPattern();\n });\n <\/script>\n <script>\n (function() {\n function c() {\n var b = a.contentDocument || a.contentWindow.document;\n if (b) {\n var d = b.createElement('script');\n d.innerHTML = \"window.__CF$cv$params={r:'96a5064ee6591c51',t:'MTc1NDM4MzU5My4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";\n b.getElementsByTagName('head')[0].appendChild(d)\n }\n }\n if (document.body) {\n var a = document.createElement('iframe');\n a.height = 1;\n a.width = 1;\n a.style.position = 'absolute';\n a.style.top = 0;\n a.style.left = 0;\n a.style.border = 'none';\n a.style.visibility = 'hidden';\n document.body.appendChild(a);\n if ('loading' !== document.readyState) c();\n else if (window.addEventListener) document.addEventListener('DOMContentLoaded', c);\n else {\n var e = document.onreadystatechange || function() {};\n document.onreadystatechange = function(b) {\n e(b);\n 'loading' !== document.readyState && (document.onreadystatechange = e, c())\n }\n }\n }\n })();\n <\/script>\n <\/body>\n\n <\/html>\n","protected":false},"excerpt":{"rendered":"<p>Te Reo M\u0101ori Flashcards Te Reo M\u0101ori Whakaako Intermediate to Advanced Vocabulary Card 1 of 5 Mastered: 0\/5 Score: 0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","pagelayer_contact_templates":[],"_pagelayer_content":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_kadence_starter_templates_imported_post":false,"footnotes":"","_wpscppro_dont_share_socialmedia":false,"_wpscppro_custom_social_share_image":0,"_facebook_share_type":"","_twitter_share_type":"","_linkedin_share_type":"","_pinterest_share_type":"","_linkedin_share_type_page":"","_instagram_share_type":"","_medium_share_type":"","_threads_share_type":"","_google_business_share_type":"","_selected_social_profile":[],"_wpsp_enable_custom_social_template":false,"_wpsp_social_scheduling":{"enabled":false,"datetime":null,"platforms":[],"status":"template_only","dateOption":"today","timeOption":"now","customDays":"","customHours":"","customDate":"","customTime":"","schedulingType":"absolute"},"_wpsp_active_default_template":true},"categories":[1],"tags":[],"class_list":["post-473","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Taonga Admin","author_link":"https:\/\/taonga.nxfanz.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Te Reo M\u0101ori Flashcards Te Reo M\u0101ori Whakaako Intermediate to Advanced Vocabulary Card 1 of 5 Mastered: 0\/5 Score: 0 […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/posts\/473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=473"}],"version-history":[{"count":1,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/posts\/473\/revisions"}],"predecessor-version":[{"id":474,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/posts\/473\/revisions\/474"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}