{"id":229,"date":"2025-11-19T06:33:06","date_gmt":"2025-11-19T06:33:06","guid":{"rendered":"https:\/\/kawan4u.com\/?page_id=229"},"modified":"2025-11-19T06:33:07","modified_gmt":"2025-11-19T06:33:07","slug":"%e9%9f%b3%e8%8a%82%e6%8b%bc%e5%ad%97%e6%b8%b8%e6%88%8f","status":"publish","type":"page","link":"https:\/\/kawan4u.com\/?page_id=229","title":{"rendered":"\u97f3\u8282\u62fc\u5b57\u6e38\u620f"},"content":{"rendered":"\n

<\/h1>\n\n\n\n\n\n \n \n \n \u97f3\u8282\u62fc\u5b57\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, #a8edea 0%, #fed6e3 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: 1000px;\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: #ff6b9d;\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;\n }\n\n .image-section {\n text-align: center;\n margin: 24px 0;\n padding: 24px;\n background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);\n border-radius: 16px;\n }\n\n .activity-image {\n font-size: 120px;\n margin-bottom: 12px;\n animation: float 3s ease-in-out infinite;\n }\n\n @keyframes float {\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-10px); }\n }\n\n .target-word {\n font-size: 32px;\n font-weight: bold;\n color: #666;\n margin-top: 12px;\n }\n\n .answer-area {\n background: #f0f0f0;\n border: 4px dashed #ff6b9d;\n border-radius: 16px;\n padding: 24px;\n min-height: 80px;\n margin: 24px 0;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .syllable-in-answer {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 12px 24px;\n border-radius: 12px;\n font-size: 24px;\n font-weight: bold;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n animation: popIn 0.3s ease;\n }\n\n @keyframes popIn {\n 0% { transform: scale(0); }\n 50% { transform: scale(1.1); }\n 100% { transform: scale(1); }\n }\n\n .character-section {\n text-align: center;\n margin: 24px 0;\n position: relative;\n }\n\n .character {\n font-size: 150px;\n display: inline-block;\n animation: bounce 2s ease-in-out infinite;\n transition: transform 0.3s ease;\n }\n\n .character.eating {\n animation: eat 0.5s ease;\n }\n\n @keyframes bounce {\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-5px); }\n }\n\n @keyframes eat {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n }\n\n .syllables-container {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n justify-content: center;\n margin: 24px 0;\n }\n\n .syllable-button {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n color: white;\n border: none;\n padding: 16px 32px;\n border-radius: 16px;\n font-size: 24px;\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 .syllable-button:hover {\n transform: translateY(-4px);\n box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);\n }\n\n .syllable-button:active {\n transform: scale(0.95);\n }\n\n .syllable-button.used {\n opacity: 0.3;\n pointer-events: none;\n }\n\n .feedback {\n text-align: center;\n font-size: 32px;\n font-weight: bold;\n margin: 24px 0;\n min-height: 50px;\n }\n\n .feedback.correct {\n color: #4caf50;\n animation: celebrate 0.6s ease;\n }\n\n @keyframes celebrate {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n }\n\n .next-button {\n display: block;\n margin: 24px 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: 22px;\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 .next-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);\n }\n\n .next-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none;\n }\n\n .progress {\n text-align: center;\n font-size: 20px;\n font-weight: bold;\n color: #666;\n margin-bottom: 16px;\n }\n\n .complete-message {\n text-align: center;\n font-size: 36px;\n font-weight: bold;\n color: #4caf50;\n padding: 32px;\n background: #f1f8e9;\n border-radius: 16px;\n margin: 24px 0;\n display: none;\n animation: celebrate 0.8s ease;\n }\n\n .complete-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\">\ud83d\udc30 \u97f3\u8282\u62fc\u5b57\u6e38\u620f \ud83d\udc30<\/h1>\n <p class=\"instructions\" id=\"gameInstructions\">\u770b\u56fe\u7247\uff0c\u70b9\u51fb\u97f3\u8282\u5582\u7ed9\u5c0f\u5154\u5b50\uff0c\u62fc\u51fa\u6b63\u786e\u7684\u9a6c\u6765\u6587\u5355\u8bcd\uff01<\/p>\n <\/header>\n <div class=\"progress\" id=\"progress\">\n \u7b2c 1 \u9898 \/ \u5171 7 \u9898\n <\/div>\n <div class=\"image-section\">\n <div class=\"activity-image\" id=\"activityImage\">\n \ud83e\uddfd\ud83d\ude97\n <\/div>\n <div class=\"target-word\" id=\"targetWord\">\n ??? ??? ???\n <\/div>\n <\/div>\n <div class=\"answer-area\" id=\"answerArea\"><\/div>\n <div class=\"character-section\">\n <div class=\"character\" id=\"character\">\n \ud83d\udc30\n <\/div>\n <\/div>\n <div class=\"syllables-container\" id=\"syllablesContainer\"><\/div>\n <div class=\"feedback\" id=\"feedback\"><\/div><button class=\"next-button\" id=\"nextButton\" disabled>\u4e0b\u4e00\u9898 \u27a1\ufe0f<\/button>\n <div class=\"complete-message\" id=\"completeMessage\">\n \ud83c\udf89 \u592a\u68d2\u4e86\uff01\u4f60\u5b8c\u6210\u4e86\u6240\u6709\u5355\u8bcd\uff01\ud83c\udf89\n <\/div>\n <\/main>\n <script>\n const defaultConfig = {\n game_title: \"\ud83d\udc30 \u97f3\u8282\u62fc\u5b57\u6e38\u620f \ud83d\udc30\",\n instructions: \"\u770b\u56fe\u7247\uff0c\u70b9\u51fb\u97f3\u8282\u5582\u7ed9\u5c0f\u5154\u5b50\uff0c\u62fc\u51fa\u6b63\u786e\u7684\u9a6c\u6765\u6587\u5355\u8bcd\uff01\",\n correct_message: \"\u2705 \u592a\u68d2\u4e86\uff01\u62fc\u5bf9\u4e86\uff01\",\n next_button_text: \"\u4e0b\u4e00\u9898 \u27a1\ufe0f\",\n complete_message: \"\ud83c\udf89 \u592a\u68d2\u4e86\uff01\u4f60\u5b8c\u6210\u4e86\u6240\u6709\u5355\u8bcd\uff01\ud83c\udf89\"\n };\n\n const activities = [\n { word: 'mencuci kereta', syllables: ['men', 'cu', 'ci', 'ke', 're', 'ta'], emoji: '\ud83e\uddfd\ud83d\ude97', hintSpaces: 6 },\n { word: 'memancing ikan', syllables: ['me', 'man', 'cing', 'i', 'kan'], emoji: '\ud83c\udfa3', hintSpaces: 5 },\n { word: 'membaca surat khabar', syllables: ['mem', 'ba', 'ca', 'su', 'rat', 'kha', 'bar'], emoji: '\ud83d\udcf0', hintSpaces: 7 },\n { word: 'memasak', syllables: ['me', 'ma', 'sak'], emoji: '\ud83c\udf73', hintSpaces: 3 },\n { word: 'melawat', syllables: ['me', 'la', 'wat'], emoji: '\u2708\ufe0f', hintSpaces: 3 },\n { word: 'menonton televisyen', syllables: ['me', 'non', 'ton', 'te', 'le', 'vi', 'syen'], emoji: '\ud83d\udcfa', hintSpaces: 7 },\n { word: 'bermain catur', syllables: ['ber', 'ma', 'in', 'ca', 'tur'], emoji: '\u265f\ufe0f', hintSpaces: 5 }\n ];\n\n let currentActivityIndex = 0;\n let currentAnswer = [];\n let usedSyllables = [];\n let isCorrect = false;\n\n function initGame() {\n currentActivityIndex = 0;\n loadActivity();\n }\n\n function loadActivity() {\n if (currentActivityIndex >= activities.length) {\n showComplete();\n return;\n }\n\n const activity = activities[currentActivityIndex];\n currentAnswer = [];\n usedSyllables = [];\n isCorrect = false;\n\n document.getElementById('progress').textContent = `\u7b2c ${currentActivityIndex + 1} \u9898 \/ \u5171 ${activities.length} \u9898`;\n document.getElementById('activityImage').textContent = activity.emoji;\n document.getElementById('targetWord').textContent = '_ '.repeat(activity.hintSpaces);\n document.getElementById('feedback').textContent = '';\n document.getElementById('feedback').className = 'feedback';\n document.getElementById('nextButton').disabled = true;\n document.getElementById('answerArea').innerHTML = '';\n document.getElementById('completeMessage').classList.remove('show');\n\n renderSyllables();\n }\n\n function renderSyllables() {\n const activity = activities[currentActivityIndex];\n const container = document.getElementById('syllablesContainer');\n container.innerHTML = '';\n\n const shuffledSyllables = shuffleArray([...activity.syllables]);\n\n shuffledSyllables.forEach((syllable, index) => {\n const button = document.createElement('button');\n button.className = 'syllable-button';\n button.textContent = syllable;\n button.dataset.syllable = syllable;\n button.dataset.index = index;\n button.addEventListener('click', () => handleSyllableClick(syllable, button));\n container.appendChild(button);\n });\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 handleSyllableClick(syllable, button) {\n if (isCorrect || button.classList.contains('used')) return;\n\n button.classList.add('used');\n currentAnswer.push(syllable);\n\n const character = document.getElementById('character');\n character.classList.add('eating');\n setTimeout(() => {\n character.classList.remove('eating');\n }, 500);\n\n updateAnswerArea();\n checkAnswer();\n }\n\n function updateAnswerArea() {\n const answerArea = document.getElementById('answerArea');\n answerArea.innerHTML = '';\n\n currentAnswer.forEach(syllable => {\n const span = document.createElement('span');\n span.className = 'syllable-in-answer';\n span.textContent = syllable;\n answerArea.appendChild(span);\n });\n }\n\n function checkAnswer() {\n const activity = activities[currentActivityIndex];\n const userAnswer = currentAnswer.join('');\n const correctAnswer = activity.syllables.join('');\n\n if (userAnswer === correctAnswer) {\n isCorrect = true;\n const configCorrectMessage = window.elementSdk ? \n (window.elementSdk.config.correct_message || defaultConfig.correct_message) : \n defaultConfig.correct_message;\n document.getElementById('feedback').textContent = configCorrectMessage;\n document.getElementById('feedback').className = 'feedback correct';\n document.getElementById('targetWord').textContent = activity.word;\n document.getElementById('nextButton').disabled = false;\n }\n }\n\n function showComplete() {\n document.getElementById('completeMessage').classList.add('show');\n document.getElementById('nextButton').style.display = 'none';\n document.getElementById('syllablesContainer').style.display = 'none';\n document.getElementById('answerArea').style.display = 'none';\n document.querySelector('.character-section').style.display = 'none';\n }\n\n document.getElementById('nextButton').addEventListener('click', () => {\n currentActivityIndex++;\n loadActivity();\n });\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('nextButton').textContent = config.next_button_text || defaultConfig.next_button_text;\n document.getElementById('completeMessage').textContent = config.complete_message || defaultConfig.complete_message;\n \n if (isCorrect) {\n document.getElementById('feedback').textContent = config.correct_message || defaultConfig.correct_message;\n }\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 [\"correct_message\", config.correct_message || defaultConfig.correct_message],\n [\"next_button_text\", config.next_button_text || defaultConfig.next_button_text],\n [\"complete_message\", config.complete_message || defaultConfig.complete_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:'9a0d2810211d5dd7',t:'MTc2MzUyODU1OC4wMDAwMDA='};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>\u97f3\u8282\u62fc\u5b57\u6e38\u620f \ud83d\udc30 \u97f3\u8282\u62fc\u5b57\u6e38\u620f \ud83d\udc30 \u770b\u56fe\u7247\uff0c\u70b9\u51fb\u97f3\u8282\u5582\u7ed9\u5c0f\u5154\u5b50\uff0c\u62fc\u51fa\u6b63\u786e\u7684\u9a6c\u6765\u6587\u5355\u8bcd\uff01 \u7b2c 1 \u9898 \/ \u5171 7 \u9898 \ud83e\uddfd\ud83d\ude97 ??? ??? ??? \ud83d\udc30 \u4e0b\u4e00\u9898 \u27a1\ufe0f \ud83c\udf89 […]<\/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-229","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kawan4u.com\/index.php?rest_route=\/wp\/v2\/pages\/229","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=229"}],"version-history":[{"count":1,"href":"https:\/\/kawan4u.com\/index.php?rest_route=\/wp\/v2\/pages\/229\/revisions"}],"predecessor-version":[{"id":230,"href":"https:\/\/kawan4u.com\/index.php?rest_route=\/wp\/v2\/pages\/229\/revisions\/230"}],"wp:attachment":[{"href":"https:\/\/kawan4u.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}