Te Whakapapa o Te Wh\u0101nau H\u016bia – Interactive Portal<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\n <style>\n :root {\n --bg-black: #0a0a0a;\n --accent-yellow: #fbbf24;\n --text-white: #ffffff;\n --text-grey: #9ca3af;\n --accent-red: #dc2626;\n }\n \n body {\n background-color: var(--bg-black);\n color: var(--text-white);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n overflow-x: hidden;\n }\n \n .yellow-accent {\n color: var(--accent-yellow);\n }\n \n .white-studio {\n color: var(--text-white);\n font-weight: 300;\n }\n \n .grey-text {\n color: var(--text-grey);\n }\n \n .red-accent {\n color: var(--accent-red);\n }\n \n .glass-effect {\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n \n .hover-glow:hover {\n box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);\n transform: translateY(-2px);\n transition: all 0.3s ease;\n }\n \n .tree-node {\n position: relative;\n transition: all 0.3s ease;\n }\n \n .tree-node:hover {\n transform: scale(1.05);\n color: var(--accent-yellow);\n }\n \n .story-card {\n opacity: 0;\n transform: translateY(20px);\n transition: all 0.6s ease;\n }\n \n .story-card.active {\n opacity: 1;\n transform: translateY(0);\n }\n \n .game-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 1rem;\n }\n \n .memory-card {\n aspect-ratio: 1;\n background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));\n border: 1px solid rgba(251, 191, 36, 0.3);\n cursor: pointer;\n transition: all 0.3s ease;\n }\n \n .memory-card:hover {\n background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.1));\n }\n \n .family-tree-line {\n stroke: var(--accent-yellow);\n stroke-width: 2;\n fill: none;\n }\n \n .quiz-option {\n transition: all 0.3s ease;\n }\n \n .quiz-option:hover {\n background-color: rgba(251, 191, 36, 0.1);\n border-color: var(--accent-yellow);\n }\n \n .floating-element {\n animation: float 6s ease-in-out infinite;\n }\n \n @keyframes float {\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-10px); }\n }\n \n .pulse-glow {\n animation: pulse 2s infinite;\n }\n \n @keyframes pulse {\n 0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7); }\n 70% { box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); }\n 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen\">\n <div class=\"container mx-auto px-4 py-8\">\n \n <header class=\"text-center mb-12\">\n <h1 class=\"text-4xl md:text-6xl font-bold mb-4\">\n <span class=\"yellow-accent\">Te Whakapapa<\/span>\n <br>\n <span class=\"white-studio text-2xl\">o Te Wh\u0101nau H\u016bia<\/span>\n <\/h1>\n <p class=\"grey-text text-lg\">Interactive Portal – Explore, Learn, Connect<\/p>\n <\/header>\n\n \n <nav class=\"flex flex-wrap justify-center gap-4 mb-12\">\n <button onclick=\"showSection('story')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-book-open mr-2\"><\/i>Interactive Story\n <\/button>\n <button onclick=\"showSection('games')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-gamepad mr-2\"><\/i>Games\n <\/button>\n <button onclick=\"showSection('learning')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-graduation-cap mr-2\"><\/i>Learning Tools\n <\/button>\n <button onclick=\"showSection('tree')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-sitemap mr-2\"><\/i>Family Tree\n <\/button>\n <\/nav>\n\n \n <section id=\"story-section\" class=\"section-content\">\n <div class=\"max-w-4xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">Interactive Story Book<\/h2>\n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <div id=\"story-content\" class=\"story-card active\">\n <h3 class=\"text-2xl mb-4 white-studio\">From the Roots of Time Eternal<\/h3>\n <p class=\"grey-text leading-relaxed\">\n K\u014dt\u016ba and H\u0101p\u0113kait\u014da begat Pa\u012bh\u0101u, the first of our line. \n Their love was as enduring as the mountains, as deep as the ocean.\n <\/p>\n <\/div>\n <div class=\"flex justify-between mt-6\">\n <button onclick=\"prevStory()\" class=\"px-4 py-2 glass-effect rounded yellow-accent hover-glow\">\n <i class=\"fas fa-chevron-left\"><\/i> Previous\n <\/button>\n <span id=\"story-counter\" class=\"grey-text\">1\/5<\/span>\n <button onclick=\"nextStory()\" class=\"px-4 py-2 glass-effect rounded yellow-accent hover-glow\">\n Next <i class=\"fas fa-chevron-right\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"games-section\" class=\"section-content hidden\">\n <div class=\"max-w-6xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">Interactive Games<\/h2>\n \n \n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Memory Match – Whakapapa Edition<\/h3>\n <div id=\"memory-game\" class=\"game-grid max-w-2xl mx-auto\"><\/div>\n <div class=\"text-center mt-4\">\n <button onclick=\"resetMemoryGame()\" class=\"px-4 py-2 glass-effect rounded yellow-accent hover-glow\">\n Reset Game\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-effect rounded-xl p-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Whakapapa Quiz Challenge<\/h3>\n <div id=\"quiz-container\">\n <div id=\"quiz-question\" class=\"text-xl mb-4 grey-text\"><\/div>\n <div id=\"quiz-options\" class=\"space-y-2\"><\/div>\n <div id=\"quiz-result\" class=\"mt-4\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"learning-section\" class=\"section-content hidden\">\n <div class=\"max-w-4xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">Learning Tools<\/h2>\n \n \n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Pronunciation Guide<\/h3>\n <div class=\"grid md:grid-cols-2 gap-4\">\n <div class=\"p-4 bg-black\/20 rounded\">\n <h4 class=\"yellow-accent mb-2\">K\u014dt\u016ba<\/h4>\n <p class=\"grey-text text-sm\">Koh-TOO-ah<\/p>\n <button onclick=\"playAudio('kotua')\" class=\"mt-2 px-3 py-1 glass-effect rounded text-sm\">\n <i class=\"fas fa-play\"><\/i> Play\n <\/button>\n <\/div>\n <div class=\"p-4 bg-black\/20 rounded\">\n <h4 class=\"yellow-accent mb-2\">H\u014dr\u014dta\u012b<\/h4>\n <p class=\"grey-text text-sm\">HOH-roh-tie<\/p>\n <button onclick=\"playAudio('horotai')\" class=\"mt-2 px-3 py-1 glass-effect rounded text-sm\">\n <i class=\"fas fa-play\"><\/i> Play\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-effect rounded-xl p-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Interactive Timeline<\/h3>\n <div id=\"timeline-container\" class=\"relative\">\n <div class=\"absolute left-4 top-0 bottom-0 w-0.5 yellow-accent\"><\/div>\n <div class=\"space-y-6\">\n <div class=\"relative pl-12\">\n <div class=\"absolute left-2 w-4 h-4 yellow-accent rounded-full\"><\/div>\n <h4 class=\"yellow-accent\">Generation 1<\/h4>\n <p class=\"grey-text text-sm\">K\u014dt\u016ba and H\u0101p\u0113kait\u014da<\/p>\n <\/div>\n <div class=\"relative pl-12\">\n <div class=\"absolute left-2 w-4 h-4 yellow-accent rounded-full\"><\/div>\n <h4 class=\"yellow-accent\">Generation 14<\/h4>\n <p class=\"grey-text text-sm\">Ryder H\u016bia<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"tree-section\" class=\"section-content hidden\">\n <div class=\"max-w-7xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">Create Your Family Tree<\/h2>\n \n \n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Te Wh\u0101nau H\u016bia Tree<\/h3>\n <div id=\"family-tree\" class=\"overflow-x-auto\">\n <svg id=\"tree-svg\" width=\"100%\" height=\"600\"><\/svg>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-effect rounded-xl p-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Add Your Wh\u0101nau<\/h3>\n <form id=\"family-form\" class=\"space-y-4\">\n <div>\n <label class=\"block mb-2 grey-text\">Name<\/label>\n <input type=\"text\" id=\"member-name\" class=\"w-full p-3 bg-black\/20 border border-gray-600 rounded text-white\" placeholder=\"Enter name\">\n <\/div>\n <div>\n <label class=\"block mb-2 grey-text\">Relationship<\/label>\n <select id=\"member-relation\" class=\"w-full p-3 bg-black\/20 border border-gray-600 rounded text-white\">\n <option value=\"parent\">Parent<\/option>\n <option value=\"child\">Child<\/option>\n <option value=\"spouse\">Spouse<\/option>\n <\/select>\n <\/div>\n <button type=\"submit\" class=\"px-6 py-3 glass-effect rounded yellow-accent hover-glow\">\n Add to Tree\n <\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <script>\n \/\/ Story Content\n const stories = [\n {\n title: \"From the Roots of Time Eternal\",\n content: \"K\u014dt\u016ba and H\u0101p\u0113kait\u014da begat Pa\u012bh\u0101u, the first of our line. Their love was as enduring as the mountains, as deep as the ocean.\"\n },\n {\n title: \"The Second Generation\",\n content: \"Pa\u012bh\u0101u and P\u016bn\u0101t\u014dt\u014d brought forth K\u0101\u0101wa, who would carry the wisdom of the ancestors forward into new lands.\"\n },\n {\n title: \"The Third Generation\",\n content: \"K\u0101\u0101wa with K\u012br\u012bw\u0101\u0113p\u0101na bore H\u014dr\u014dta\u012b, whose name echoes through the valleys like the call of the kiwi bird.\"\n },\n {\n title: \"Fourteen Generations\",\n content: \"From K\u014dt\u016ba to Ryder H\u016bia, fourteen generations stand tall, each adding their own thread to our sacred whakapapa.\"\n },\n {\n title: \"The Living Legacy\",\n content: \"Today, Ryder H\u016bia carries forward the dreams and aspirations of thirteen generations before him, a living bridge between past and future.\"\n }\n ];\n\n let currentStory = 0;\n\n \/\/ Navigation\n function showSection(section) {\n document.querySelectorAll('.section-content').forEach(s => s.classList.add('hidden'));\n document.getElementById(section + '-section').classList.remove('hidden');\n \n document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('pulse-glow'));\n event.target.classList.add('pulse-glow');\n \n if (section === 'tree') {\n drawFamilyTree();\n }\n }\n\n \/\/ Story Navigation\n function nextStory() {\n if (currentStory < stories.length - 1) {\n currentStory++;\n updateStory();\n }\n }\n\n function prevStory() {\n if (currentStory > 0) {\n currentStory--;\n updateStory();\n }\n }\n\n function updateStory() {\n const content = document.getElementById('story-content');\n content.classList.remove('active');\n \n setTimeout(() => {\n content.innerHTML = `\n <h3 class=\"text-2xl mb-4 white-studio\">${stories[currentStory].title}<\/h3>\n <p class=\"grey-text leading-relaxed\">${stories[currentStory].content}<\/p>\n `;\n content.classList.add('active');\n }, 300);\n \n document.getElementById('story-counter').textContent = `${currentStory + 1}\/${stories.length}`;\n }\n\n \/\/ Memory Game\n const memoryPairs = [\n { name: 'K\u014dt\u016ba', pair: 1 },\n { name: 'H\u0101p\u0113kait\u014da', pair: 1 },\n { name: 'Pa\u012bh\u0101u', pair: 2 },\n { name: 'K\u0101\u0101wa', pair: 2 },\n { name: 'H\u014dr\u014dta\u012b', pair: 3 },\n { name: 'Ryder', pair: 3 }\n ];\n\n let flippedCards = [];\n let matchedPairs = 0;\n\n function initMemoryGame() {\n const gameContainer = document.getElementById('memory-game');\n const shuffled = [...memoryPairs].sort(() => Math.random() - 0.5);\n \n gameContainer.innerHTML = '';\n shuffled.forEach((card, index) => {\n const div = document.createElement('div');\n div.className = 'memory-card flex items-center justify-center text-center';\n div.dataset.pair = card.pair;\n div.dataset.index = index;\n div.innerHTML = `<span class=\"text-sm\">${card.name}<\/span>`;\n div.onclick = () => flipCard(div);\n gameContainer.appendChild(div);\n });\n }\n\n function flipCard(card) {\n if (flippedCards.length === 2 || card.classList.contains('matched')) return;\n \n card.style.background = 'rgba(251, 191, 36, 0.3)';\n flippedCards.push(card);\n \n if (flippedCards.length === 2) {\n setTimeout(checkMatch, 1000);\n }\n }\n\n function checkMatch() {\n const [card1, card2] = flippedCards;\n if (card1.dataset.pair === card2.dataset.pair) {\n card1.classList.add('matched');\n card2.classList.add('matched');\n card1.style.background = 'rgba(34, 197, 94, 0.3)';\n card2.style.background = 'rgba(34, 197, 94, 0.3)';\n matchedPairs++;\n \n if (matchedPairs === 3) {\n setTimeout(() => alert('Congratulations! You matched all pairs!'), 500);\n }\n } else {\n card1.style.background = '';\n card2.style.background = '';\n }\n flippedCards = [];\n }\n\n function resetMemoryGame() {\n flippedCards = [];\n matchedPairs = 0;\n initMemoryGame();\n }\n\n \/\/ Quiz\n const quizQuestions = [\n {\n question: \"Who was the first ancestor mentioned in our whakapapa?\",\n options: [\"Ryder H\u016bia\", \"K\u014dt\u016ba\", \"Pa\u012bh\u0101u\", \"H\u014dr\u014dta\u012b\"],\n correct: 1\n },\n {\n question: \"How many generations are in our whakapapa?\",\n options: [\"10\", \"12\", \"14\", \"16\"],\n correct: 2\n }\n ];\n\n let currentQuiz = 0;\n\n function loadQuiz() {\n const question = quizQuestions[currentQuiz];\n document.getElementById('quiz-question').textContent = question.question;\n \n const optionsContainer = document.getElementById('quiz-options');\n optionsContainer.innerHTML = '';\n \n question.options.forEach((option, index) => {\n const div = document.createElement('div');\n div.className = 'quiz-option p-3 glass-effect rounded cursor-pointer';\n div.textContent = option;\n div.onclick = () => checkAnswer(index);\n optionsContainer.appendChild(div);\n });\n }\n\n function checkAnswer(selected) {\n const question = quizQuestions[currentQuiz];\n const result = document.getElementById('quiz-result');\n \n if (selected === question.correct) {\n result.innerHTML = '<span class=\"text-green-400\">Correct! Well done!<\/span>';\n } else {\n result.innerHTML = '<span class=\"text-red-400\">Try again! Remember our whakapapa.<\/span>';\n }\n }\n\n \/\/ Audio (placeholder)\n function playAudio(name) {\n \/\/ In a real implementation, you would play actual audio files\n console.log(`Playing pronunciation for ${name}`);\n }\n\n \/\/ Family Tree Drawing\n function drawFamilyTree() {\n const svg = document.getElementById('tree-svg');\n svg.innerHTML = '';\n \n \/\/ Simple tree structure (would be more complex in real implementation)\n const treeData = [\n { x: 400, y: 50, name: 'K\u014dt\u016ba & H\u0101p\u0113kait\u014da' },\n { x: 400, y: 150, name: 'Pa\u012bh\u0101u' },\n { x: 400, y: 250, name: 'K\u0101\u0101wa' },\n { x: 400, y: 350, name: 'H\u014dr\u014dta\u012b' },\n { x: 400, y: 450, name: 'Ryder H\u016bia' }\n ];\n \n \/\/ Draw connections\n for (let i = 0; i < treeData.length - 1; i++) {\n const line = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n line.setAttribute('x1', treeData[i].x);\n line.setAttribute('y1', treeData[i].y + 20);\n line.setAttribute('x2', treeData[i + 1].x);\n line.setAttribute('y2', treeData[i + 1].y - 20);\n line.setAttribute('class', 'family-tree-line');\n svg.appendChild(line);\n }\n \n \/\/ Draw nodes\n treeData.forEach(node => {\n const g = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'g');\n const circle = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'circle');\n circle.setAttribute('cx', node.x);\n circle.setAttribute('cy', node.y);\n circle.setAttribute('r', 30);\n circle.setAttribute('fill', 'rgba(251, 191, 36, 0.2)');\n circle.setAttribute('stroke', '#fbbf24');\n \n const text = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'text');\n text.setAttribute('x', node.x);\n text.setAttribute('y', node.y + 5);\n text.setAttribute('text-anchor', 'middle');\n text.setAttribute('fill', 'white');\n text.setAttribute('font-size', '12');\n text.textContent = node.name;\n \n g.appendChild(circle);\n g.appendChild(text);\n svg.appendChild(g);\n });\n }\n\n \/\/ Add Family Member\n document.getElementById('family-form').addEventListener('submit', (e) => {\n e.preventDefault();\n const name = document.getElementById('member-name').value;\n const relation = document.getElementById('member-relation').value;\n \n if (name) {\n \/\/ In a real implementation, this would add to the tree\n alert(`Added ${name} as ${relation}`);\n document.getElementById('member-name').value = '';\n }\n });\n\n \/\/ Initialize\n initMemoryGame();\n loadQuiz();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Te Whakapapa o Te Wh\u0101nau H\u016bia – Interactive Portal Te Whakapapa o Te Wh\u0101nau H\u016bia Interactive Portal – Explore, Learn, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","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":""},"class_list":["post-577","page","type-page","status-publish","hentry"],"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 Whakapapa o Te Wh\u0101nau H\u016bia – Interactive Portal Te Whakapapa o Te Wh\u0101nau H\u016bia Interactive Portal – Explore, Learn, […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"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=577"}],"version-history":[{"count":1,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/577\/revisions"}],"predecessor-version":[{"id":578,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/577\/revisions\/578"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=577"}],"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":577,"date":"2025-08-13T21:22:31","date_gmt":"2025-08-13T21:22:31","guid":{"rendered":"https:\/\/taonga.nxfanz.com\/?page_id=577"},"modified":"2025-08-13T21:22:31","modified_gmt":"2025-08-13T21:22:31","slug":"all-in-one","status":"publish","type":"page","link":"https:\/\/taonga.nxfanz.com\/?page_id=577","title":{"rendered":"all in one-"},"content":{"rendered":"\n\n\n\n \n \n Te Whakapapa o Te Wh\u0101nau H\u016bia – Interactive Portal<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\n <style>\n :root {\n --bg-black: #0a0a0a;\n --accent-yellow: #fbbf24;\n --text-white: #ffffff;\n --text-grey: #9ca3af;\n --accent-red: #dc2626;\n }\n \n body {\n background-color: var(--bg-black);\n color: var(--text-white);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n overflow-x: hidden;\n }\n \n .yellow-accent {\n color: var(--accent-yellow);\n }\n \n .white-studio {\n color: var(--text-white);\n font-weight: 300;\n }\n \n .grey-text {\n color: var(--text-grey);\n }\n \n .red-accent {\n color: var(--accent-red);\n }\n \n .glass-effect {\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n \n .hover-glow:hover {\n box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);\n transform: translateY(-2px);\n transition: all 0.3s ease;\n }\n \n .tree-node {\n position: relative;\n transition: all 0.3s ease;\n }\n \n .tree-node:hover {\n transform: scale(1.05);\n color: var(--accent-yellow);\n }\n \n .story-card {\n opacity: 0;\n transform: translateY(20px);\n transition: all 0.6s ease;\n }\n \n .story-card.active {\n opacity: 1;\n transform: translateY(0);\n }\n \n .game-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 1rem;\n }\n \n .memory-card {\n aspect-ratio: 1;\n background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));\n border: 1px solid rgba(251, 191, 36, 0.3);\n cursor: pointer;\n transition: all 0.3s ease;\n }\n \n .memory-card:hover {\n background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.1));\n }\n \n .family-tree-line {\n stroke: var(--accent-yellow);\n stroke-width: 2;\n fill: none;\n }\n \n .quiz-option {\n transition: all 0.3s ease;\n }\n \n .quiz-option:hover {\n background-color: rgba(251, 191, 36, 0.1);\n border-color: var(--accent-yellow);\n }\n \n .floating-element {\n animation: float 6s ease-in-out infinite;\n }\n \n @keyframes float {\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-10px); }\n }\n \n .pulse-glow {\n animation: pulse 2s infinite;\n }\n \n @keyframes pulse {\n 0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7); }\n 70% { box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); }\n 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen\">\n <div class=\"container mx-auto px-4 py-8\">\n \n <header class=\"text-center mb-12\">\n <h1 class=\"text-4xl md:text-6xl font-bold mb-4\">\n <span class=\"yellow-accent\">Te Whakapapa<\/span>\n <br>\n <span class=\"white-studio text-2xl\">o Te Wh\u0101nau H\u016bia<\/span>\n <\/h1>\n <p class=\"grey-text text-lg\">Interactive Portal – Explore, Learn, Connect<\/p>\n <\/header>\n\n \n <nav class=\"flex flex-wrap justify-center gap-4 mb-12\">\n <button onclick=\"showSection('story')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-book-open mr-2\"><\/i>Interactive Story\n <\/button>\n <button onclick=\"showSection('games')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-gamepad mr-2\"><\/i>Games\n <\/button>\n <button onclick=\"showSection('learning')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-graduation-cap mr-2\"><\/i>Learning Tools\n <\/button>\n <button onclick=\"showSection('tree')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-sitemap mr-2\"><\/i>Family Tree\n <\/button>\n <\/nav>\n\n \n <section id=\"story-section\" class=\"section-content\">\n <div class=\"max-w-4xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">Interactive Story Book<\/h2>\n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <div id=\"story-content\" class=\"story-card active\">\n <h3 class=\"text-2xl mb-4 white-studio\">From the Roots of Time Eternal<\/h3>\n <p class=\"grey-text leading-relaxed\">\n K\u014dt\u016ba and H\u0101p\u0113kait\u014da begat Pa\u012bh\u0101u, the first of our line. \n Their love was as enduring as the mountains, as deep as the ocean.\n <\/p>\n <\/div>\n <div class=\"flex justify-between mt-6\">\n <button onclick=\"prevStory()\" class=\"px-4 py-2 glass-effect rounded yellow-accent hover-glow\">\n <i class=\"fas fa-chevron-left\"><\/i> Previous\n <\/button>\n <span id=\"story-counter\" class=\"grey-text\">1\/5<\/span>\n <button onclick=\"nextStory()\" class=\"px-4 py-2 glass-effect rounded yellow-accent hover-glow\">\n Next <i class=\"fas fa-chevron-right\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"games-section\" class=\"section-content hidden\">\n <div class=\"max-w-6xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">Interactive Games<\/h2>\n \n \n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Memory Match – Whakapapa Edition<\/h3>\n <div id=\"memory-game\" class=\"game-grid max-w-2xl mx-auto\"><\/div>\n <div class=\"text-center mt-4\">\n <button onclick=\"resetMemoryGame()\" class=\"px-4 py-2 glass-effect rounded yellow-accent hover-glow\">\n Reset Game\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-effect rounded-xl p-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Whakapapa Quiz Challenge<\/h3>\n <div id=\"quiz-container\">\n <div id=\"quiz-question\" class=\"text-xl mb-4 grey-text\"><\/div>\n <div id=\"quiz-options\" class=\"space-y-2\"><\/div>\n <div id=\"quiz-result\" class=\"mt-4\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"learning-section\" class=\"section-content hidden\">\n <div class=\"max-w-4xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">Learning Tools<\/h2>\n \n \n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Pronunciation Guide<\/h3>\n <div class=\"grid md:grid-cols-2 gap-4\">\n <div class=\"p-4 bg-black\/20 rounded\">\n <h4 class=\"yellow-accent mb-2\">K\u014dt\u016ba<\/h4>\n <p class=\"grey-text text-sm\">Koh-TOO-ah<\/p>\n <button onclick=\"playAudio('kotua')\" class=\"mt-2 px-3 py-1 glass-effect rounded text-sm\">\n <i class=\"fas fa-play\"><\/i> Play\n <\/button>\n <\/div>\n <div class=\"p-4 bg-black\/20 rounded\">\n <h4 class=\"yellow-accent mb-2\">H\u014dr\u014dta\u012b<\/h4>\n <p class=\"grey-text text-sm\">HOH-roh-tie<\/p>\n <button onclick=\"playAudio('horotai')\" class=\"mt-2 px-3 py-1 glass-effect rounded text-sm\">\n <i class=\"fas fa-play\"><\/i> Play\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-effect rounded-xl p-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Interactive Timeline<\/h3>\n <div id=\"timeline-container\" class=\"relative\">\n <div class=\"absolute left-4 top-0 bottom-0 w-0.5 yellow-accent\"><\/div>\n <div class=\"space-y-6\">\n <div class=\"relative pl-12\">\n <div class=\"absolute left-2 w-4 h-4 yellow-accent rounded-full\"><\/div>\n <h4 class=\"yellow-accent\">Generation 1<\/h4>\n <p class=\"grey-text text-sm\">K\u014dt\u016ba and H\u0101p\u0113kait\u014da<\/p>\n <\/div>\n <div class=\"relative pl-12\">\n <div class=\"absolute left-2 w-4 h-4 yellow-accent rounded-full\"><\/div>\n <h4 class=\"yellow-accent\">Generation 14<\/h4>\n <p class=\"grey-text text-sm\">Ryder H\u016bia<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"tree-section\" class=\"section-content hidden\">\n <div class=\"max-w-7xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">Create Your Family Tree<\/h2>\n \n \n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Te Wh\u0101nau H\u016bia Tree<\/h3>\n <div id=\"family-tree\" class=\"overflow-x-auto\">\n <svg id=\"tree-svg\" width=\"100%\" height=\"600\"><\/svg>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-effect rounded-xl p-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Add Your Wh\u0101nau<\/h3>\n <form id=\"family-form\" class=\"space-y-4\">\n <div>\n <label class=\"block mb-2 grey-text\">Name<\/label>\n <input type=\"text\" id=\"member-name\" class=\"w-full p-3 bg-black\/20 border border-gray-600 rounded text-white\" placeholder=\"Enter name\">\n <\/div>\n <div>\n <label class=\"block mb-2 grey-text\">Relationship<\/label>\n <select id=\"member-relation\" class=\"w-full p-3 bg-black\/20 border border-gray-600 rounded text-white\">\n <option value=\"parent\">Parent<\/option>\n <option value=\"child\">Child<\/option>\n <option value=\"spouse\">Spouse<\/option>\n <\/select>\n <\/div>\n <button type=\"submit\" class=\"px-6 py-3 glass-effect rounded yellow-accent hover-glow\">\n Add to Tree\n <\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <script>\n \/\/ Story Content\n const stories = [\n {\n title: \"From the Roots of Time Eternal\",\n content: \"K\u014dt\u016ba and H\u0101p\u0113kait\u014da begat Pa\u012bh\u0101u, the first of our line. Their love was as enduring as the mountains, as deep as the ocean.\"\n },\n {\n title: \"The Second Generation\",\n content: \"Pa\u012bh\u0101u and P\u016bn\u0101t\u014dt\u014d brought forth K\u0101\u0101wa, who would carry the wisdom of the ancestors forward into new lands.\"\n },\n {\n title: \"The Third Generation\",\n content: \"K\u0101\u0101wa with K\u012br\u012bw\u0101\u0113p\u0101na bore H\u014dr\u014dta\u012b, whose name echoes through the valleys like the call of the kiwi bird.\"\n },\n {\n title: \"Fourteen Generations\",\n content: \"From K\u014dt\u016ba to Ryder H\u016bia, fourteen generations stand tall, each adding their own thread to our sacred whakapapa.\"\n },\n {\n title: \"The Living Legacy\",\n content: \"Today, Ryder H\u016bia carries forward the dreams and aspirations of thirteen generations before him, a living bridge between past and future.\"\n }\n ];\n\n let currentStory = 0;\n\n \/\/ Navigation\n function showSection(section) {\n document.querySelectorAll('.section-content').forEach(s => s.classList.add('hidden'));\n document.getElementById(section + '-section').classList.remove('hidden');\n \n document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('pulse-glow'));\n event.target.classList.add('pulse-glow');\n \n if (section === 'tree') {\n drawFamilyTree();\n }\n }\n\n \/\/ Story Navigation\n function nextStory() {\n if (currentStory < stories.length - 1) {\n currentStory++;\n updateStory();\n }\n }\n\n function prevStory() {\n if (currentStory > 0) {\n currentStory--;\n updateStory();\n }\n }\n\n function updateStory() {\n const content = document.getElementById('story-content');\n content.classList.remove('active');\n \n setTimeout(() => {\n content.innerHTML = `\n <h3 class=\"text-2xl mb-4 white-studio\">${stories[currentStory].title}<\/h3>\n <p class=\"grey-text leading-relaxed\">${stories[currentStory].content}<\/p>\n `;\n content.classList.add('active');\n }, 300);\n \n document.getElementById('story-counter').textContent = `${currentStory + 1}\/${stories.length}`;\n }\n\n \/\/ Memory Game\n const memoryPairs = [\n { name: 'K\u014dt\u016ba', pair: 1 },\n { name: 'H\u0101p\u0113kait\u014da', pair: 1 },\n { name: 'Pa\u012bh\u0101u', pair: 2 },\n { name: 'K\u0101\u0101wa', pair: 2 },\n { name: 'H\u014dr\u014dta\u012b', pair: 3 },\n { name: 'Ryder', pair: 3 }\n ];\n\n let flippedCards = [];\n let matchedPairs = 0;\n\n function initMemoryGame() {\n const gameContainer = document.getElementById('memory-game');\n const shuffled = [...memoryPairs].sort(() => Math.random() - 0.5);\n \n gameContainer.innerHTML = '';\n shuffled.forEach((card, index) => {\n const div = document.createElement('div');\n div.className = 'memory-card flex items-center justify-center text-center';\n div.dataset.pair = card.pair;\n div.dataset.index = index;\n div.innerHTML = `<span class=\"text-sm\">${card.name}<\/span>`;\n div.onclick = () => flipCard(div);\n gameContainer.appendChild(div);\n });\n }\n\n function flipCard(card) {\n if (flippedCards.length === 2 || card.classList.contains('matched')) return;\n \n card.style.background = 'rgba(251, 191, 36, 0.3)';\n flippedCards.push(card);\n \n if (flippedCards.length === 2) {\n setTimeout(checkMatch, 1000);\n }\n }\n\n function checkMatch() {\n const [card1, card2] = flippedCards;\n if (card1.dataset.pair === card2.dataset.pair) {\n card1.classList.add('matched');\n card2.classList.add('matched');\n card1.style.background = 'rgba(34, 197, 94, 0.3)';\n card2.style.background = 'rgba(34, 197, 94, 0.3)';\n matchedPairs++;\n \n if (matchedPairs === 3) {\n setTimeout(() => alert('Congratulations! You matched all pairs!'), 500);\n }\n } else {\n card1.style.background = '';\n card2.style.background = '';\n }\n flippedCards = [];\n }\n\n function resetMemoryGame() {\n flippedCards = [];\n matchedPairs = 0;\n initMemoryGame();\n }\n\n \/\/ Quiz\n const quizQuestions = [\n {\n question: \"Who was the first ancestor mentioned in our whakapapa?\",\n options: [\"Ryder H\u016bia\", \"K\u014dt\u016ba\", \"Pa\u012bh\u0101u\", \"H\u014dr\u014dta\u012b\"],\n correct: 1\n },\n {\n question: \"How many generations are in our whakapapa?\",\n options: [\"10\", \"12\", \"14\", \"16\"],\n correct: 2\n }\n ];\n\n let currentQuiz = 0;\n\n function loadQuiz() {\n const question = quizQuestions[currentQuiz];\n document.getElementById('quiz-question').textContent = question.question;\n \n const optionsContainer = document.getElementById('quiz-options');\n optionsContainer.innerHTML = '';\n \n question.options.forEach((option, index) => {\n const div = document.createElement('div');\n div.className = 'quiz-option p-3 glass-effect rounded cursor-pointer';\n div.textContent = option;\n div.onclick = () => checkAnswer(index);\n optionsContainer.appendChild(div);\n });\n }\n\n function checkAnswer(selected) {\n const question = quizQuestions[currentQuiz];\n const result = document.getElementById('quiz-result');\n \n if (selected === question.correct) {\n result.innerHTML = '<span class=\"text-green-400\">Correct! Well done!<\/span>';\n } else {\n result.innerHTML = '<span class=\"text-red-400\">Try again! Remember our whakapapa.<\/span>';\n }\n }\n\n \/\/ Audio (placeholder)\n function playAudio(name) {\n \/\/ In a real implementation, you would play actual audio files\n console.log(`Playing pronunciation for ${name}`);\n }\n\n \/\/ Family Tree Drawing\n function drawFamilyTree() {\n const svg = document.getElementById('tree-svg');\n svg.innerHTML = '';\n \n \/\/ Simple tree structure (would be more complex in real implementation)\n const treeData = [\n { x: 400, y: 50, name: 'K\u014dt\u016ba & H\u0101p\u0113kait\u014da' },\n { x: 400, y: 150, name: 'Pa\u012bh\u0101u' },\n { x: 400, y: 250, name: 'K\u0101\u0101wa' },\n { x: 400, y: 350, name: 'H\u014dr\u014dta\u012b' },\n { x: 400, y: 450, name: 'Ryder H\u016bia' }\n ];\n \n \/\/ Draw connections\n for (let i = 0; i < treeData.length - 1; i++) {\n const line = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n line.setAttribute('x1', treeData[i].x);\n line.setAttribute('y1', treeData[i].y + 20);\n line.setAttribute('x2', treeData[i + 1].x);\n line.setAttribute('y2', treeData[i + 1].y - 20);\n line.setAttribute('class', 'family-tree-line');\n svg.appendChild(line);\n }\n \n \/\/ Draw nodes\n treeData.forEach(node => {\n const g = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'g');\n const circle = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'circle');\n circle.setAttribute('cx', node.x);\n circle.setAttribute('cy', node.y);\n circle.setAttribute('r', 30);\n circle.setAttribute('fill', 'rgba(251, 191, 36, 0.2)');\n circle.setAttribute('stroke', '#fbbf24');\n \n const text = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'text');\n text.setAttribute('x', node.x);\n text.setAttribute('y', node.y + 5);\n text.setAttribute('text-anchor', 'middle');\n text.setAttribute('fill', 'white');\n text.setAttribute('font-size', '12');\n text.textContent = node.name;\n \n g.appendChild(circle);\n g.appendChild(text);\n svg.appendChild(g);\n });\n }\n\n \/\/ Add Family Member\n document.getElementById('family-form').addEventListener('submit', (e) => {\n e.preventDefault();\n const name = document.getElementById('member-name').value;\n const relation = document.getElementById('member-relation').value;\n \n if (name) {\n \/\/ In a real implementation, this would add to the tree\n alert(`Added ${name} as ${relation}`);\n document.getElementById('member-name').value = '';\n }\n });\n\n \/\/ Initialize\n initMemoryGame();\n loadQuiz();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Te Whakapapa o Te Wh\u0101nau H\u016bia – Interactive Portal Te Whakapapa o Te Wh\u0101nau H\u016bia Interactive Portal – Explore, Learn, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","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":""},"class_list":["post-577","page","type-page","status-publish","hentry"],"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 Whakapapa o Te Wh\u0101nau H\u016bia – Interactive Portal Te Whakapapa o Te Wh\u0101nau H\u016bia Interactive Portal – Explore, Learn, […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"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=577"}],"version-history":[{"count":1,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/577\/revisions"}],"predecessor-version":[{"id":578,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/577\/revisions\/578"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}