\u9a6c\u6765\u6587\u914d\u5bf9\u6e38\u620f<\/title>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <style>\n body {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Comic Sans MS', 'Arial', sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .game-container {\n width: 95%;\n max-width: 1200px;\n background: white;\n border-radius: 24px;\n padding: 32px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n margin: 20px auto;\n }\n\n .header {\n text-align: center;\n margin-bottom: 24px;\n }\n\n .title {\n font-size: 42px;\n font-weight: bold;\n color: #667eea;\n margin: 0 0 12px 0;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);\n }\n\n .instructions {\n font-size: 18px;\n color: #555;\n margin: 0 0 16px 0;\n }\n\n .mode-selector {\n display: flex;\n justify-content: center;\n gap: 16px;\n margin-bottom: 24px;\n }\n\n .mode-button {\n padding: 16px 32px;\n background: #e0e0e0;\n border: 3px solid transparent;\n border-radius: 16px;\n font-size: 18px;\n font-weight: bold;\n cursor: pointer;\n transition: all 0.3s ease;\n color: #666;\n }\n\n .mode-button:hover {\n background: #d0d0d0;\n transform: translateY(-2px);\n }\n\n .mode-button.active {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n color: white;\n border-color: #f5576c;\n box-shadow: 0 4px 12px rgba(245, 87, 108, 0.4);\n }\n\n .stats {\n display: flex;\n justify-content: center;\n gap: 32px;\n margin-bottom: 24px;\n }\n\n .stat-item {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n padding: 12px 24px;\n border-radius: 16px;\n color: white;\n font-weight: bold;\n font-size: 18px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n }\n\n .cards-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 16px;\n margin-bottom: 24px;\n }\n\n .card {\n aspect-ratio: 1;\n background: white;\n border: 4px solid #667eea;\n border-radius: 16px;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 16px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n position: relative;\n overflow: hidden;\n }\n\n .card:hover {\n transform: translateY(-4px);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n .card.selected {\n border-color: #f5576c;\n background: #fff5f7;\n transform: scale(1.05);\n }\n\n .card.matched {\n border-color: #4caf50;\n background: #f1f8e9;\n opacity: 0.6;\n pointer-events: none;\n }\n\n .card.wrong {\n animation: shake 0.4s;\n border-color: #ff6b6b;\n }\n\n @keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-8px); }\n 75% { transform: translateX(8px); }\n }\n\n \/* \u7ffb\u724c\u6a21\u5f0f\u6837\u5f0f *\/\n .card.flip-mode {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n }\n\n .card.flip-mode.flipped {\n background: white;\n animation: flipCard 0.4s;\n }\n\n @keyframes flipCard {\n 0% { transform: rotateY(0deg); }\n 50% { transform: rotateY(90deg); }\n 100% { transform: rotateY(0deg); }\n }\n\n .card-back {\n font-size: 56px;\n color: white;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .card-front {\n display: none;\n }\n\n .card.flip-mode.flipped .card-back {\n display: none;\n }\n\n .card.flip-mode.flipped .card-front {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100%;\n }\n\n .card-content {\n font-size: 72px;\n margin-bottom: 8px;\n }\n\n .card-text {\n font-size: 20px;\n font-weight: bold;\n color: #333;\n text-align: center;\n word-break: break-word;\n }\n\n .reset-button {\n display: block;\n margin: 0 auto;\n padding: 16px 48px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n border-radius: 32px;\n font-size: 20px;\n font-weight: bold;\n cursor: pointer;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n transition: all 0.3s ease;\n }\n\n .reset-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);\n }\n\n .success-message {\n text-align: center;\n font-size: 28px;\n font-weight: bold;\n color: #4caf50;\n margin: 24px 0;\n padding: 24px;\n background: #f1f8e9;\n border-radius: 16px;\n display: none;\n animation: bounce 0.6s;\n }\n\n @keyframes bounce {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n }\n\n .success-message.show {\n display: block;\n }\n <\/style>\n <style>@view-transition { navigation: auto; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <script src=\"https:\/\/cdn.tailwindcss.com\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body>\n <main class=\"game-container\">\n <header class=\"header\">\n <h1 class=\"title\" id=\"gameTitle\">\ud83c\udfae \u9a6c\u6765\u6587\u914d\u5bf9\u6e38\u620f \ud83c\udfae<\/h1>\n <p class=\"instructions\" id=\"gameInstructions\">\u9009\u62e9\u6e38\u620f\u6a21\u5f0f\u5f00\u59cb\u5b66\u4e60\uff01<\/p>\n <\/header>\n <div class=\"mode-selector\"><button class=\"mode-button active\" id=\"mode1Button\">\ud83c\udfaf \u76f4\u63a5\u914d\u5bf9\u6a21\u5f0f<\/button> <button class=\"mode-button\" id=\"mode2Button\">\ud83c\udccf \u7ffb\u724c\u8bb0\u5fc6\u6a21\u5f0f<\/button>\n <\/div>\n <div class=\"stats\">\n <div class=\"stat-item\">\n \ud83c\udfaf \u914d\u5bf9: <span id=\"matches\">0<\/span>\/22\n <\/div>\n <div class=\"stat-item\">\n \ud83d\udd04 \u5c1d\u8bd5: <span id=\"attempts\">0<\/span>\n <\/div>\n <\/div>\n <div class=\"success-message\" id=\"successMessage\">\n \ud83c\udf89 \u592a\u68d2\u4e86\uff01\u4f60\u5b8c\u6210\u4e86\u6240\u6709\u914d\u5bf9\uff01\ud83c\udf89\n <\/div>\n <div class=\"cards-grid\" id=\"cardsGrid\"><\/div><button class=\"reset-button\" id=\"resetButton\">\ud83d\udd04 \u91cd\u65b0\u5f00\u59cb<\/button>\n <\/main>\n <script>\n const defaultConfig = {\n game_title: \"\ud83c\udfae \u9a6c\u6765\u6587\u914d\u5bf9\u6e38\u620f \ud83c\udfae\",\n instructions: \"\u9009\u62e9\u6e38\u620f\u6a21\u5f0f\u5f00\u59cb\u5b66\u4e60\uff01\",\n mode1_title: \"\ud83c\udfaf \u76f4\u63a5\u914d\u5bf9\u6a21\u5f0f\",\n mode2_title: \"\ud83c\udccf \u7ffb\u724c\u8bb0\u5fc6\u6a21\u5f0f\",\n success_message: \"\ud83c\udf89 \u592a\u68d2\u4e86\uff01\u4f60\u5b8c\u6210\u4e86\u6240\u6709\u914d\u5bf9\uff01\ud83c\udf89\"\n };\n\n const words = [\n { word: 'bapa', emoji: '\ud83d\udc68', category: 'family' },\n { word: 'ayah', emoji: '\ud83d\udc68\u200d\ud83d\udcbc', category: 'family' },\n { word: 'emak', emoji: '\ud83d\udc69\u200d\ud83c\udf73', category: 'family' },\n { word: 'ibu', emoji: '\ud83d\udc69', category: 'family' },\n { word: 'kakak', emoji: '\ud83d\udc67', category: 'family' },\n { word: 'abang', emoji: '\ud83d\udc66', category: 'family' },\n { word: 'adik', emoji: '\ud83d\udc76', category: 'family' },\n { word: 'lelaki', emoji: '\ud83d\ude4b\u200d\u2642\ufe0f', category: 'family' },\n { word: 'perempuan', emoji: '\ud83d\ude4b\u200d\u2640\ufe0f', category: 'family' },\n { word: 'datuk', emoji: '\ud83d\udc74', category: 'family' },\n { word: 'nenek', emoji: '\ud83d\udc75', category: 'family' },\n { word: 'roti', emoji: '\ud83c\udf5e', category: 'food' },\n { word: 'bijirin', emoji: '\ud83e\udd63', category: 'food' },\n { word: 'susu', emoji: '\ud83e\udd5b', category: 'food' },\n { word: 'epal', emoji: '\ud83c\udf4e', category: 'food' },\n { word: 'nasi', emoji: '\ud83c\udf5a', category: 'food' },\n { word: 'ikan', emoji: '\ud83d\udc1f', category: 'food' },\n { word: 'sawi', emoji: '\ud83e\udd6c', category: 'food' },\n { word: 'betik', emoji: '\ud83e\udd6d', category: 'food' },\n { word: 'ayam', emoji: '\ud83c\udf57', category: 'food' },\n { word: 'bayam', emoji: '\ud83e\udd57', category: 'food' },\n { word: 'anggur', emoji: '\ud83c\udf47', category: 'food' }\n ];\n\n let cards = [];\n let selectedCards = [];\n let matchedPairs = 0;\n let attempts = 0;\n let currentMode = 1; \/\/ 1: \u76f4\u63a5\u914d\u5bf9, 2: \u7ffb\u724c\u6a21\u5f0f\n\n function initGame() {\n matchedPairs = 0;\n attempts = 0;\n selectedCards = [];\n updateStats();\n document.getElementById('successMessage').classList.remove('show');\n \n cards = [];\n words.forEach((item, index) => {\n cards.push({ id: index * 2, type: 'emoji', content: item.emoji, word: item.word, pairId: index });\n cards.push({ id: index * 2 + 1, type: 'text', content: item.word, word: item.word, pairId: index });\n });\n \n cards = shuffleArray(cards);\n renderCards();\n }\n\n function shuffleArray(array) {\n const newArray = [...array];\n for (let i = newArray.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [newArray[i], newArray[j]] = [newArray[j], newArray[i]];\n }\n return newArray;\n }\n\n function renderCards() {\n const grid = document.getElementById('cardsGrid');\n grid.innerHTML = '';\n \n cards.forEach((card, index) => {\n const cardElement = document.createElement('div');\n cardElement.className = 'card';\n if (currentMode === 2) {\n cardElement.classList.add('flip-mode');\n }\n cardElement.dataset.index = index;\n \n if (currentMode === 1) {\n \/\/ \u6a21\u5f0f1: \u76f4\u63a5\u663e\u793a\n if (card.type === 'emoji') {\n cardElement.innerHTML = `\n <div class=\"card-content\">${card.content}<\/div>\n `;\n } else {\n cardElement.innerHTML = `\n <div class=\"card-text\">${card.content}<\/div>\n `;\n }\n } else {\n \/\/ \u6a21\u5f0f2: \u7ffb\u724c\u6a21\u5f0f\n if (card.type === 'emoji') {\n cardElement.innerHTML = `\n <div class=\"card-back\">\u2753<\/div>\n <div class=\"card-front\">\n <div class=\"card-content\">${card.content}<\/div>\n <\/div>\n `;\n } else {\n cardElement.innerHTML = `\n <div class=\"card-back\">\u2753<\/div>\n <div class=\"card-front\">\n <div class=\"card-text\">${card.content}<\/div>\n <\/div>\n `;\n }\n }\n \n cardElement.addEventListener('click', () => handleCardClick(index));\n grid.appendChild(cardElement);\n });\n }\n\n function handleCardClick(index) {\n const cardElement = document.querySelectorAll('.card')[index];\n \n if (cardElement.classList.contains('matched') || \n (currentMode === 1 && cardElement.classList.contains('selected')) ||\n (currentMode === 2 && cardElement.classList.contains('flipped')) ||\n selectedCards.length >= 2) {\n return;\n }\n \n if (currentMode === 2) {\n cardElement.classList.add('flipped');\n }\n cardElement.classList.add('selected');\n selectedCards.push(index);\n \n if (selectedCards.length === 2) {\n attempts++;\n updateStats();\n checkMatch();\n }\n }\n\n function checkMatch() {\n const [index1, index2] = selectedCards;\n const card1 = cards[index1];\n const card2 = cards[index2];\n const cardElements = document.querySelectorAll('.card');\n \n setTimeout(() => {\n if (card1.pairId === card2.pairId && card1.type !== card2.type) {\n cardElements[index1].classList.add('matched');\n cardElements[index2].classList.add('matched');\n cardElements[index1].classList.remove('selected');\n cardElements[index2].classList.remove('selected');\n matchedPairs++;\n updateStats();\n \n if (matchedPairs === words.length) {\n setTimeout(() => {\n document.getElementById('successMessage').classList.add('show');\n }, 500);\n }\n } else {\n cardElements[index1].classList.add('wrong');\n cardElements[index2].classList.add('wrong');\n \n setTimeout(() => {\n cardElements[index1].classList.remove('selected', 'wrong');\n cardElements[index2].classList.remove('selected', 'wrong');\n if (currentMode === 2) {\n cardElements[index1].classList.remove('flipped');\n cardElements[index2].classList.remove('flipped');\n }\n }, 600);\n }\n \n selectedCards = [];\n }, 800);\n }\n\n function updateStats() {\n document.getElementById('matches').textContent = matchedPairs;\n document.getElementById('attempts').textContent = attempts;\n }\n\n function switchMode(mode) {\n currentMode = mode;\n const mode1Button = document.getElementById('mode1Button');\n const mode2Button = document.getElementById('mode2Button');\n \n if (mode === 1) {\n mode1Button.classList.add('active');\n mode2Button.classList.remove('active');\n } else {\n mode1Button.classList.remove('active');\n mode2Button.classList.add('active');\n }\n \n initGame();\n }\n\n document.getElementById('mode1Button').addEventListener('click', () => switchMode(1));\n document.getElementById('mode2Button').addEventListener('click', () => switchMode(2));\n document.getElementById('resetButton').addEventListener('click', initGame);\n\n async function onConfigChange(config) {\n document.getElementById('gameTitle').textContent = config.game_title || defaultConfig.game_title;\n document.getElementById('gameInstructions').textContent = config.instructions || defaultConfig.instructions;\n document.getElementById('mode1Button').textContent = config.mode1_title || defaultConfig.mode1_title;\n document.getElementById('mode2Button').textContent = config.mode2_title || defaultConfig.mode2_title;\n document.getElementById('successMessage').textContent = config.success_message || defaultConfig.success_message;\n }\n\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig: defaultConfig,\n onConfigChange: onConfigChange,\n mapToCapabilities: (config) => ({\n recolorables: [],\n borderables: [],\n fontEditable: undefined,\n fontSizeable: undefined\n }),\n mapToEditPanelValues: (config) => new Map([\n [\"game_title\", config.game_title || defaultConfig.game_title],\n [\"instructions\", config.instructions || defaultConfig.instructions],\n [\"mode1_title\", config.mode1_title || defaultConfig.mode1_title],\n [\"mode2_title\", config.mode2_title || defaultConfig.mode2_title],\n [\"success_message\", config.success_message || defaultConfig.success_message]\n ])\n });\n }\n\n initGame();\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9a0d8a569765b91f',t:'MTc2MzUzMjU4My4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u9a6c\u6765\u6587\u914d\u5bf9\u6e38\u620f \ud83c\udfae \u9a6c\u6765\u6587\u914d\u5bf9\u6e38\u620f \ud83c\udfae \u9009\u62e9\u6e38\u620f\u6a21\u5f0f\u5f00\u59cb\u5b66\u4e60\uff01 \ud83c\udfaf \u76f4\u63a5\u914d\u5bf9\u6a21\u5f0f \ud83c\udccf \u7ffb\u724c\u8bb0\u5fc6\u6a21\u5f0f \ud83c\udfaf \u914d\u5bf9: 0\/22 \ud83d\udd04 \u5c1d\u8bd5: 0 \ud83c\udf89 \u592a\u68d2\u4e86\uff01\u4f60\u5b8c\u6210\u4e86\u6240\u6709\u914d\u5bf9\uff01\ud83c\udf89 \ud83d\udd04 \u91cd\u65b0\u5f00\u59cb<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"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":"","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-227","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kawan4u.com\/index.php?rest_route=\/wp\/v2\/pages\/227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kawan4u.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kawan4u.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kawan4u.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kawan4u.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=227"}],"version-history":[{"count":1,"href":"https:\/\/kawan4u.com\/index.php?rest_route=\/wp\/v2\/pages\/227\/revisions"}],"predecessor-version":[{"id":228,"href":"https:\/\/kawan4u.com\/index.php?rest_route=\/wp\/v2\/pages\/227\/revisions\/228"}],"wp:attachment":[{"href":"https:\/\/kawan4u.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":227,"date":"2025-11-19T06:19:03","date_gmt":"2025-11-19T06:19:03","guid":{"rendered":"https:\/\/kawan4u.com\/?page_id=227"},"modified":"2025-11-19T06:19:04","modified_gmt":"2025-11-19T06:19:04","slug":"%e9%a9%ac%e6%9d%a5%e6%96%87%e9%85%8d%e5%af%b9%e6%b8%b8%e6%88%8f","status":"publish","type":"page","link":"https:\/\/kawan4u.com\/?page_id=227","title":{"rendered":"\u9a6c\u6765\u6587\u914d\u5bf9\u6e38\u620f"},"content":{"rendered":"\n\n\n \n \n \n \u9a6c\u6765\u6587\u914d\u5bf9\u6e38\u620f<\/title>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <style>\n body {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Comic Sans MS', 'Arial', sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .game-container {\n width: 95%;\n max-width: 1200px;\n background: white;\n border-radius: 24px;\n padding: 32px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n margin: 20px auto;\n }\n\n .header {\n text-align: center;\n margin-bottom: 24px;\n }\n\n .title {\n font-size: 42px;\n font-weight: bold;\n color: #667eea;\n margin: 0 0 12px 0;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);\n }\n\n .instructions {\n font-size: 18px;\n color: #555;\n margin: 0 0 16px 0;\n }\n\n .mode-selector {\n display: flex;\n justify-content: center;\n gap: 16px;\n margin-bottom: 24px;\n }\n\n .mode-button {\n padding: 16px 32px;\n background: #e0e0e0;\n border: 3px solid transparent;\n border-radius: 16px;\n font-size: 18px;\n font-weight: bold;\n cursor: pointer;\n transition: all 0.3s ease;\n color: #666;\n }\n\n .mode-button:hover {\n background: #d0d0d0;\n transform: translateY(-2px);\n }\n\n .mode-button.active {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n color: white;\n border-color: #f5576c;\n box-shadow: 0 4px 12px rgba(245, 87, 108, 0.4);\n }\n\n .stats {\n display: flex;\n justify-content: center;\n gap: 32px;\n margin-bottom: 24px;\n }\n\n .stat-item {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n padding: 12px 24px;\n border-radius: 16px;\n color: white;\n font-weight: bold;\n font-size: 18px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n }\n\n .cards-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 16px;\n margin-bottom: 24px;\n }\n\n .card {\n aspect-ratio: 1;\n background: white;\n border: 4px solid #667eea;\n border-radius: 16px;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 16px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n position: relative;\n overflow: hidden;\n }\n\n .card:hover {\n transform: translateY(-4px);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n .card.selected {\n border-color: #f5576c;\n background: #fff5f7;\n transform: scale(1.05);\n }\n\n .card.matched {\n border-color: #4caf50;\n background: #f1f8e9;\n opacity: 0.6;\n pointer-events: none;\n }\n\n .card.wrong {\n animation: shake 0.4s;\n border-color: #ff6b6b;\n }\n\n @keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-8px); }\n 75% { transform: translateX(8px); }\n }\n\n \/* \u7ffb\u724c\u6a21\u5f0f\u6837\u5f0f *\/\n .card.flip-mode {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n }\n\n .card.flip-mode.flipped {\n background: white;\n animation: flipCard 0.4s;\n }\n\n @keyframes flipCard {\n 0% { transform: rotateY(0deg); }\n 50% { transform: rotateY(90deg); }\n 100% { transform: rotateY(0deg); }\n }\n\n .card-back {\n font-size: 56px;\n color: white;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .card-front {\n display: none;\n }\n\n .card.flip-mode.flipped .card-back {\n display: none;\n }\n\n .card.flip-mode.flipped .card-front {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100%;\n }\n\n .card-content {\n font-size: 72px;\n margin-bottom: 8px;\n }\n\n .card-text {\n font-size: 20px;\n font-weight: bold;\n color: #333;\n text-align: center;\n word-break: break-word;\n }\n\n .reset-button {\n display: block;\n margin: 0 auto;\n padding: 16px 48px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n border-radius: 32px;\n font-size: 20px;\n font-weight: bold;\n cursor: pointer;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n transition: all 0.3s ease;\n }\n\n .reset-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);\n }\n\n .success-message {\n text-align: center;\n font-size: 28px;\n font-weight: bold;\n color: #4caf50;\n margin: 24px 0;\n padding: 24px;\n background: #f1f8e9;\n border-radius: 16px;\n display: none;\n animation: bounce 0.6s;\n }\n\n @keyframes bounce {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n }\n\n .success-message.show {\n display: block;\n }\n <\/style>\n <style>@view-transition { navigation: auto; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <script src=\"https:\/\/cdn.tailwindcss.com\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body>\n <main class=\"game-container\">\n <header class=\"header\">\n <h1 class=\"title\" id=\"gameTitle\">\ud83c\udfae \u9a6c\u6765\u6587\u914d\u5bf9\u6e38\u620f \ud83c\udfae<\/h1>\n <p class=\"instructions\" id=\"gameInstructions\">\u9009\u62e9\u6e38\u620f\u6a21\u5f0f\u5f00\u59cb\u5b66\u4e60\uff01<\/p>\n <\/header>\n <div class=\"mode-selector\"><button class=\"mode-button active\" id=\"mode1Button\">\ud83c\udfaf \u76f4\u63a5\u914d\u5bf9\u6a21\u5f0f<\/button> <button class=\"mode-button\" id=\"mode2Button\">\ud83c\udccf \u7ffb\u724c\u8bb0\u5fc6\u6a21\u5f0f<\/button>\n <\/div>\n <div class=\"stats\">\n <div class=\"stat-item\">\n \ud83c\udfaf \u914d\u5bf9: <span id=\"matches\">0<\/span>\/22\n <\/div>\n <div class=\"stat-item\">\n \ud83d\udd04 \u5c1d\u8bd5: <span id=\"attempts\">0<\/span>\n <\/div>\n <\/div>\n <div class=\"success-message\" id=\"successMessage\">\n \ud83c\udf89 \u592a\u68d2\u4e86\uff01\u4f60\u5b8c\u6210\u4e86\u6240\u6709\u914d\u5bf9\uff01\ud83c\udf89\n <\/div>\n <div class=\"cards-grid\" id=\"cardsGrid\"><\/div><button class=\"reset-button\" id=\"resetButton\">\ud83d\udd04 \u91cd\u65b0\u5f00\u59cb<\/button>\n <\/main>\n <script>\n const defaultConfig = {\n game_title: \"\ud83c\udfae \u9a6c\u6765\u6587\u914d\u5bf9\u6e38\u620f \ud83c\udfae\",\n instructions: \"\u9009\u62e9\u6e38\u620f\u6a21\u5f0f\u5f00\u59cb\u5b66\u4e60\uff01\",\n mode1_title: \"\ud83c\udfaf \u76f4\u63a5\u914d\u5bf9\u6a21\u5f0f\",\n mode2_title: \"\ud83c\udccf \u7ffb\u724c\u8bb0\u5fc6\u6a21\u5f0f\",\n success_message: \"\ud83c\udf89 \u592a\u68d2\u4e86\uff01\u4f60\u5b8c\u6210\u4e86\u6240\u6709\u914d\u5bf9\uff01\ud83c\udf89\"\n };\n\n const words = [\n { word: 'bapa', emoji: '\ud83d\udc68', category: 'family' },\n { word: 'ayah', emoji: '\ud83d\udc68\u200d\ud83d\udcbc', category: 'family' },\n { word: 'emak', emoji: '\ud83d\udc69\u200d\ud83c\udf73', category: 'family' },\n { word: 'ibu', emoji: '\ud83d\udc69', category: 'family' },\n { word: 'kakak', emoji: '\ud83d\udc67', category: 'family' },\n { word: 'abang', emoji: '\ud83d\udc66', category: 'family' },\n { word: 'adik', emoji: '\ud83d\udc76', category: 'family' },\n { word: 'lelaki', emoji: '\ud83d\ude4b\u200d\u2642\ufe0f', category: 'family' },\n { word: 'perempuan', emoji: '\ud83d\ude4b\u200d\u2640\ufe0f', category: 'family' },\n { word: 'datuk', emoji: '\ud83d\udc74', category: 'family' },\n { word: 'nenek', emoji: '\ud83d\udc75', category: 'family' },\n { word: 'roti', emoji: '\ud83c\udf5e', category: 'food' },\n { word: 'bijirin', emoji: '\ud83e\udd63', category: 'food' },\n { word: 'susu', emoji: '\ud83e\udd5b', category: 'food' },\n { word: 'epal', emoji: '\ud83c\udf4e', category: 'food' },\n { word: 'nasi', emoji: '\ud83c\udf5a', category: 'food' },\n { word: 'ikan', emoji: '\ud83d\udc1f', category: 'food' },\n { word: 'sawi', emoji: '\ud83e\udd6c', category: 'food' },\n { word: 'betik', emoji: '\ud83e\udd6d', category: 'food' },\n { word: 'ayam', emoji: '\ud83c\udf57', category: 'food' },\n { word: 'bayam', emoji: '\ud83e\udd57', category: 'food' },\n { word: 'anggur', emoji: '\ud83c\udf47', category: 'food' }\n ];\n\n let cards = [];\n let selectedCards = [];\n let matchedPairs = 0;\n let attempts = 0;\n let currentMode = 1; \/\/ 1: \u76f4\u63a5\u914d\u5bf9, 2: \u7ffb\u724c\u6a21\u5f0f\n\n function initGame() {\n matchedPairs = 0;\n attempts = 0;\n selectedCards = [];\n updateStats();\n document.getElementById('successMessage').classList.remove('show');\n \n cards = [];\n words.forEach((item, index) => {\n cards.push({ id: index * 2, type: 'emoji', content: item.emoji, word: item.word, pairId: index });\n cards.push({ id: index * 2 + 1, type: 'text', content: item.word, word: item.word, pairId: index });\n });\n \n cards = shuffleArray(cards);\n renderCards();\n }\n\n function shuffleArray(array) {\n const newArray = [...array];\n for (let i = newArray.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [newArray[i], newArray[j]] = [newArray[j], newArray[i]];\n }\n return newArray;\n }\n\n function renderCards() {\n const grid = document.getElementById('cardsGrid');\n grid.innerHTML = '';\n \n cards.forEach((card, index) => {\n const cardElement = document.createElement('div');\n cardElement.className = 'card';\n if (currentMode === 2) {\n cardElement.classList.add('flip-mode');\n }\n cardElement.dataset.index = index;\n \n if (currentMode === 1) {\n \/\/ \u6a21\u5f0f1: \u76f4\u63a5\u663e\u793a\n if (card.type === 'emoji') {\n cardElement.innerHTML = `\n <div class=\"card-content\">${card.content}<\/div>\n `;\n } else {\n cardElement.innerHTML = `\n <div class=\"card-text\">${card.content}<\/div>\n `;\n }\n } else {\n \/\/ \u6a21\u5f0f2: \u7ffb\u724c\u6a21\u5f0f\n if (card.type === 'emoji') {\n cardElement.innerHTML = `\n <div class=\"card-back\">\u2753<\/div>\n <div class=\"card-front\">\n <div class=\"card-content\">${card.content}<\/div>\n <\/div>\n `;\n } else {\n cardElement.innerHTML = `\n <div class=\"card-back\">\u2753<\/div>\n <div class=\"card-front\">\n <div class=\"card-text\">${card.content}<\/div>\n <\/div>\n `;\n }\n }\n \n cardElement.addEventListener('click', () => handleCardClick(index));\n grid.appendChild(cardElement);\n });\n }\n\n function handleCardClick(index) {\n const cardElement = document.querySelectorAll('.card')[index];\n \n if (cardElement.classList.contains('matched') || \n (currentMode === 1 && cardElement.classList.contains('selected')) ||\n (currentMode === 2 && cardElement.classList.contains('flipped')) ||\n selectedCards.length >= 2) {\n return;\n }\n \n if (currentMode === 2) {\n cardElement.classList.add('flipped');\n }\n cardElement.classList.add('selected');\n selectedCards.push(index);\n \n if (selectedCards.length === 2) {\n attempts++;\n updateStats();\n checkMatch();\n }\n }\n\n function checkMatch() {\n const [index1, index2] = selectedCards;\n const card1 = cards[index1];\n const card2 = cards[index2];\n const cardElements = document.querySelectorAll('.card');\n \n setTimeout(() => {\n if (card1.pairId === card2.pairId && card1.type !== card2.type) {\n cardElements[index1].classList.add('matched');\n cardElements[index2].classList.add('matched');\n cardElements[index1].classList.remove('selected');\n cardElements[index2].classList.remove('selected');\n matchedPairs++;\n updateStats();\n \n if (matchedPairs === words.length) {\n setTimeout(() => {\n document.getElementById('successMessage').classList.add('show');\n }, 500);\n }\n } else {\n cardElements[index1].classList.add('wrong');\n cardElements[index2].classList.add('wrong');\n \n setTimeout(() => {\n cardElements[index1].classList.remove('selected', 'wrong');\n cardElements[index2].classList.remove('selected', 'wrong');\n if (currentMode === 2) {\n cardElements[index1].classList.remove('flipped');\n cardElements[index2].classList.remove('flipped');\n }\n }, 600);\n }\n \n selectedCards = [];\n }, 800);\n }\n\n function updateStats() {\n document.getElementById('matches').textContent = matchedPairs;\n document.getElementById('attempts').textContent = attempts;\n }\n\n function switchMode(mode) {\n currentMode = mode;\n const mode1Button = document.getElementById('mode1Button');\n const mode2Button = document.getElementById('mode2Button');\n \n if (mode === 1) {\n mode1Button.classList.add('active');\n mode2Button.classList.remove('active');\n } else {\n mode1Button.classList.remove('active');\n mode2Button.classList.add('active');\n }\n \n initGame();\n }\n\n document.getElementById('mode1Button').addEventListener('click', () => switchMode(1));\n document.getElementById('mode2Button').addEventListener('click', () => switchMode(2));\n document.getElementById('resetButton').addEventListener('click', initGame);\n\n async function onConfigChange(config) {\n document.getElementById('gameTitle').textContent = config.game_title || defaultConfig.game_title;\n document.getElementById('gameInstructions').textContent = config.instructions || defaultConfig.instructions;\n document.getElementById('mode1Button').textContent = config.mode1_title || defaultConfig.mode1_title;\n document.getElementById('mode2Button').textContent = config.mode2_title || defaultConfig.mode2_title;\n document.getElementById('successMessage').textContent = config.success_message || defaultConfig.success_message;\n }\n\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig: defaultConfig,\n onConfigChange: onConfigChange,\n mapToCapabilities: (config) => ({\n recolorables: [],\n borderables: [],\n fontEditable: undefined,\n fontSizeable: undefined\n }),\n mapToEditPanelValues: (config) => new Map([\n [\"game_title\", config.game_title || defaultConfig.game_title],\n [\"instructions\", config.instructions || defaultConfig.instructions],\n [\"mode1_title\", config.mode1_title || defaultConfig.mode1_title],\n [\"mode2_title\", config.mode2_title || defaultConfig.mode2_title],\n [\"success_message\", config.success_message || defaultConfig.success_message]\n ])\n });\n }\n\n initGame();\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9a0d8a569765b91f',t:'MTc2MzUzMjU4My4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u9a6c\u6765\u6587\u914d\u5bf9\u6e38\u620f \ud83c\udfae \u9a6c\u6765\u6587\u914d\u5bf9\u6e38\u620f \ud83c\udfae \u9009\u62e9\u6e38\u620f\u6a21\u5f0f\u5f00\u59cb\u5b66\u4e60\uff01 \ud83c\udfaf \u76f4\u63a5\u914d\u5bf9\u6a21\u5f0f \ud83c\udccf \u7ffb\u724c\u8bb0\u5fc6\u6a21\u5f0f \ud83c\udfaf \u914d\u5bf9: 0\/22 \ud83d\udd04 \u5c1d\u8bd5: 0 \ud83c\udf89 \u592a\u68d2\u4e86\uff01\u4f60\u5b8c\u6210\u4e86\u6240\u6709\u914d\u5bf9\uff01\ud83c\udf89 \ud83d\udd04 \u91cd\u65b0\u5f00\u59cb<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"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":"","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-227","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kawan4u.com\/index.php?rest_route=\/wp\/v2\/pages\/227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kawan4u.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kawan4u.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kawan4u.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kawan4u.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=227"}],"version-history":[{"count":1,"href":"https:\/\/kawan4u.com\/index.php?rest_route=\/wp\/v2\/pages\/227\/revisions"}],"predecessor-version":[{"id":228,"href":"https:\/\/kawan4u.com\/index.php?rest_route=\/wp\/v2\/pages\/227\/revisions\/228"}],"wp:attachment":[{"href":"https:\/\/kawan4u.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}