\u0e40\u0e01\u0e21\u0e1d\u0e36\u0e01\u0e2d\u0e48\u0e32\u0e19\u0e04\u0e33\u0e44\u0e17\u0e22<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@300;400;700&family=Sarabun:wght@400;700&display=swap');\n \n body {\n font-family: 'Kanit', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n background-color: #ffffff;\n color: #333333;\n }\n .game-container {\n background-color: #f8f9fa;\n padding: 2rem;\n border-radius: 20px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n text-align: center;\n align-items: center;\n max-width: 100%;\n width: 400px;\n }\n h1 {\n color: #007bff;\n font-size: 2.5rem;\n margin-bottom: 1rem;\n text-shadow: 1px 1px 2px rgba(0,0,0,0.1);\n }\n #word {\n font-family: 'Sarabun', sans-serif;\n font-size: 5rem;\n margin: 1rem 0;\n color: #28a745;\n font-weight: 700;\n text-shadow: 0 0 10px rgba(40,167,69,0.2);\n }\n #score {\n font-size: 3rem;\n font-weight: 700;\n color: #343a40;\n line-height: 1;\n }\n .wordSetBtn {\n font-family: 'Kanit', sans-serif;\n font-weight: 500;\n font-size: 2rem;\n background-color: #007bff;\n color: white;\n border: none;\n padding: 5px 14px;\n margin: 2px;\n cursor: pointer;\n border-radius: 5px;\n transition: background-color 0.3s;\n }\n .wordSetBtn:hover, .wordSetBtn.selected {\n background-color: #0056b3;\n }\n #startBtn, #stopBtn {\n background-color: #007bff;\n color: white;\n border: none;\n padding: 0.8rem 1.5rem;\n font-size: 2.1rem;\n cursor: pointer;\n margin: 0.5rem;\n border-radius: 30px;\n transition: all 0.3s ease;\n font-family: 'Kanit', sans-serif;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n #stopBtn {\n background-color: #dc3545;\n }\n #progress-bar {\n width: 100%;\n background-color: #e0e0e0;\n border-radius: 5px;\n margin: 10px 0;\n }\n #progress {\n width: 0;\n height: 20px;\n background-color: #4CAF50;\n border-radius: 5px;\n transition: width 0.5s;\n }\n #micStatus {\n margin: 10px 0;\n }\n #gameSummary {\n margin-top: 20px;\n }\n\t\t#missedWords {\n margin-top: 1rem;\n font-size: 2rem;\n color: #dc3545;\n }\n #missedWordsList {\n list-style-type: none;\n padding: 0;\n margin-top: 0.5rem;\n }\n #missedWordsList li {\n background-color: #f8d7da;\n border: 1px solid #f5c6cb;\n border-radius: 5px;\n padding: 0.5rem;\n margin-bottom: 0.5rem;\n } \n .play-audio-btn {\n background: none;\n border: none;\n color: #007bff;\n cursor: pointer;\n font-size: 16px;\n padding: 5px;\n }\n .play-audio-btn:hover {\n color: #0056b3;\n }\n \n .clickable-word {\n cursor: pointer;\n color: #007bff;\n transition: color 0.3s;\n }\n .clickable-word:hover {\n color: #0056b3;\n \/\/text-decoration: underline;\n } \n <\/style>\n<\/head>\n<body>\n <div class=\"game-container\">\n <h1>\u0e40\u0e01\u0e21\u0e1d\u0e36\u0e01\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e2a\u0e35\u0e22\u0e07<\/h1>\n <div id=\"wordSetButtons\">\n <button class=\"wordSetBtn\" data-set=\"1\">\u0e1b.1<\/button>\n <button class=\"wordSetBtn\" data-set=\"2\">\u0e1b.2<\/button>\n <button class=\"wordSetBtn\" data-set=\"3\">\u0e1b.3<\/button>\n <button class=\"wordSetBtn\" data-set=\"4\">\u0e1b.4<\/button>\n <button class=\"wordSetBtn\" data-set=\"5\">\u0e1b.5<\/button>\n <button class=\"wordSetBtn\" data-set=\"6\">\u0e1b.6<\/button>\n <\/div>\n <div id=\"word\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e38\u0e14\u0e04\u0e33\u0e41\u0e25\u0e30\u0e01\u0e14\u0e40\u0e23\u0e34\u0e48\u0e21\u0e40\u0e01\u0e21<\/div>\n <div id=\"score\"> <\/div>\n <div id=\"progress-bar\"><div id=\"progress\"><\/div><\/div>\n <div id=\"timeDisplay\">\u0e40\u0e27\u0e25\u0e32: 6 \u0e27\u0e34\u0e19\u0e32\u0e17\u0e35 \/ \u0e04\u0e33 <\/div>\n <div id=\"micStatus\"><\/div>\n <button id=\"startBtn\">\u0e40\u0e23\u0e34\u0e48\u0e21\u0e40\u0e01\u0e21<\/button>\n <button id=\"stopBtn\" disabled>\u0e2b\u0e22\u0e38\u0e14\u0e40\u0e01\u0e21<\/button>\n <div id=\"gameSummary\"><\/div>\n <div id=\"missedWords\">\n <ul id=\"missedWordsList\"><\/ul>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/apis.google.com\/js\/api.js\"><\/script>\n<script>\n\n const SPREADSHEET_ID = '12AuKeJ4AvSRx5bICBxX9nh7PGF_xsDw-uyQjUGtz0-8';\n const API_KEY = 'AIzaSyDVEVyis4n3xHZb8M30FIrIObYDAnP4NOc';\n\n \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e01\u0e47\u0e1a\u0e04\u0e33\u0e28\u0e31\u0e1e\u0e17\u0e4c\n const words1 = [];\n const words2 = [];\n const words3 = [];\n const words4 = [];\n const words5 = [];\n const words6 = [];\n\n function initClient() {\n gapi.client.init({\n apiKey: API_KEY,\n discoveryDocs: [\"https:\/\/sheets.googleapis.com\/$discovery\/rest?version=v4\"],\n }).then(function() {\n fetchAllSheets();\n }).catch(function(error) {\n console.error('Error initializing Google Sheets API:', error);\n });\n }\n\n function fetchAllSheets() {\n Promise.all([\n fetchSheet('\u0e1b1', words1),\n fetchSheet('\u0e1b2', words2),\n fetchSheet('\u0e1b3', words3),\n fetchSheet('\u0e1b4', words4),\n fetchSheet('\u0e1b5', words5),\n fetchSheet('\u0e1b6', words6)\n ]).then(() => {\n console.log('All data fetched successfully');\n \/\/alert(\"OK\");\n \/\/console.log('words1:', words1);\n \/\/console.log('words2:', words2);\n \/\/console.log('words3:', words3);\n \/\/console.log('words4:', words4);\n \/\/console.log('words5:', words5);\n \/\/console.log('words6:', words6);\n }).catch(error => {\n console.error('Error fetching data:', error);\n });\n }\n\n function fetchSheet(sheetName, wordsArray) {\n return gapi.client.sheets.spreadsheets.values.get({\n spreadsheetId: SPREADSHEET_ID,\n range: `${sheetName}!A:A`\n }).then(response => {\n const values = response.result.values;\n if (values && values.length > 0) {\n values.forEach(row => {\n if (row[0] && row[0].trim() !== '') {\n wordsArray.push(row[0]);\n }\n });\n }\n });\n }\n\n gapi.load('client', initClient);\n\n\n\n\/\/-----------------------------------------------------------------------------------------\n\n \/\/ \u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21\u0e40\u0e01\u0e21\n let currentWordSet = words1;\n let selectedWords = [];\n let currentWordIndex = 0;\n let score = 0;\n let isGameActive = false;\n let startTime, endTime;\n let wordTimer;\n let timeLeft = 6;\n let missedWords = [];\n const maxWords = 10;\n\n \/\/ DOM Elements\n const wordElement = document.getElementById(\"word\");\n const scoreElement = document.getElementById(\"score\");\n const startBtn = document.getElementById(\"startBtn\");\n const stopBtn = document.getElementById(\"stopBtn\");\n const progressBar = document.getElementById(\"progress\");\n const micStatus = document.getElementById(\"micStatus\");\n const timeDisplay = document.getElementById(\"timeDisplay\");\n const gameSummary = document.getElementById(\"gameSummary\");\n const missedWordsContainer = document.getElementById(\"missedWords\");\n const missedWordsList = document.getElementById(\"missedWordsList\");\n const wordSetButtons = document.querySelectorAll('.wordSetBtn');\n\n \/\/ Speech Recognition\n let recognition;\n\n \/\/ Event Listeners\n document.addEventListener('DOMContentLoaded', () => {\n selectWordSet('1'); \/\/ \u0e40\u0e25\u0e37\u0e2d\u0e01 \u0e1b.1 \u0e42\u0e14\u0e22\u0e1b\u0e23\u0e34\u0e22\u0e32\u0e22\n });\n startBtn.addEventListener(\"click\", startGame);\n stopBtn.addEventListener(\"click\", stopGame);\n wordSetButtons.forEach(button => {\n button.addEventListener('click', () => selectWordSet(button.getAttribute('data-set')));\n });\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e38\u0e14\u0e04\u0e33\n function selectWordSet(setNumber) {\n wordSetButtons.forEach(btn => btn.classList.remove('selected'));\n const selectedButton = document.querySelector(`.wordSetBtn[data-set=\"${setNumber}\"]`);\n selectedButton.classList.add('selected');\n\n switch(setNumber) {\n case '1': currentWordSet = words1; break;\n case '2': currentWordSet = words2; break;\n case '3': currentWordSet = words3; break;\n case '4': currentWordSet = words4; break;\n case '5': currentWordSet = words5; break;\n case '6': currentWordSet = words6; break;\n }\n wordElement.textContent = `\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e38\u0e14\u0e04\u0e33 \u0e1b.${setNumber}`;\n startBtn.disabled = false;\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e40\u0e23\u0e34\u0e48\u0e21\u0e40\u0e01\u0e21\n function startGame() {\n if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {\n setupSpeechRecognition();\n initializeGame();\n startListening();\n } else {\n alert(\"\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e19\u0e35\u0e49\u0e44\u0e21\u0e48\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a Web Speech API\");\n }\n }\n\n \/\/ \u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32 Speech Recognition\n function setupSpeechRecognition() {\n const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n recognition = new SpeechRecognition();\n recognition.lang = 'th-TH';\n recognition.continuous = true;\n recognition.interimResults = true;\n\n recognition.onstart = () => {\n micStatus.textContent = \"\u0e44\u0e21\u0e42\u0e04\u0e23\u0e42\u0e1f\u0e19: \u0e01\u0e33\u0e25\u0e31\u0e07\u0e1f\u0e31\u0e07\";\n };\n\n recognition.onend = () => {\n if (isGameActive) {\n recognition.start();\n } else {\n micStatus.textContent = \"\u0e44\u0e21\u0e42\u0e04\u0e23\u0e42\u0e1f\u0e19: \u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\";\n }\n };\n\n recognition.onresult = (event) => {\n const transcript = Array.from(event.results)\n .map(result => result[0].transcript.trim().toLowerCase())\n .join(' ');\n checkWord(transcript);\n };\n\n recognition.onerror = (event) => {\n console.error(\"Speech recognition error\", event.error);\n micStatus.textContent = `\u0e44\u0e21\u0e42\u0e04\u0e23\u0e42\u0e1f\u0e19: \u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14 - ${event.error}`;\n };\n }\n\n \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e40\u0e01\u0e21\n function initializeGame() {\n selectedWords = getRandomWords(currentWordSet, maxWords);\n currentWordIndex = 0;\n score = 0;\n missedWords = [];\n scoreElement.textContent = \"0\";\n missedWordsContainer.style.display = \"none\";\n gameSummary.style.display = \"none\";\n \/\/missedWords.style.display = \"none\"; \n isGameActive = true;\n \/\/startBtn.disabled = true;\n stopBtn.disabled = false;\n startTime = Date.now();\n nextWord();\n }\n\n \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e01\u0e32\u0e23\u0e1f\u0e31\u0e07\u0e40\u0e2a\u0e35\u0e22\u0e07\n function startListening() {\n if (recognition && isGameActive) {\n recognition.start();\n }\n }\n\n \/\/ \u0e2b\u0e22\u0e38\u0e14\u0e40\u0e01\u0e21\n function stopGame() {\n isGameActive = false;\n if (recognition) {\n recognition.stop();\n }\n clearInterval(wordTimer);\n showGameSummary();\n }\n\n \/\/ \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e33\u0e17\u0e35\u0e48\u0e1e\u0e39\u0e14\n function checkWord(spokenWords) {\n const currentWord = selectedWords[currentWordIndex].toLowerCase();\n if (spokenWords.includes(currentWord)) {\n score++;\n scoreElement.textContent = `${score}`;\n clearInterval(wordTimer);\n currentWordIndex++;\n nextWord();\n }\n }\n\n \/\/ \u0e41\u0e2a\u0e14\u0e07\u0e04\u0e33\u0e16\u0e31\u0e14\u0e44\u0e1b\n function nextWord() {\n if (currentWordIndex < selectedWords.length) {\n wordElement.textContent = selectedWords[currentWordIndex];\n timeLeft = 6;\n updateProgressBar();\n startWordTimer();\n } else {\n stopGame();\n }\n }\n\n \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e31\u0e27\u0e08\u0e31\u0e1a\u0e40\u0e27\u0e25\u0e32\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e25\u0e30\u0e04\u0e33\n function startWordTimer() {\n clearInterval(wordTimer);\n wordTimer = setInterval(() => {\n timeLeft--;\n updateProgressBar();\n if (timeLeft <= 0) {\n missedWords.push(selectedWords[currentWordIndex]);\n currentWordIndex++;\n clearInterval(wordTimer);\n nextWord();\n }\n }, 1000);\n }\n\n \/\/ \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15 Progress Bar\n function updateProgressBar() {\n const progress = (timeLeft \/ 6) * 100;\n progressBar.style.width = `${progress}%`;\n timeDisplay.textContent = `\u0e40\u0e27\u0e25\u0e32: ${timeLeft} \u0e27\u0e34\u0e19\u0e32\u0e17\u0e35`;\n }\n\n \/\/ \u0e41\u0e2a\u0e14\u0e07\u0e2a\u0e23\u0e38\u0e1b\u0e40\u0e01\u0e21\n function showGameSummary() {\n endTime = Date.now();\n const totalTime = (endTime - startTime) \/ 1000;\n const accuracyPercentage = (score \/ maxWords) * 100;\n \n gameSummary.innerHTML = `\n <h3>\u0e2a\u0e23\u0e38\u0e1b\u0e1c\u0e25<\/h3>\n <p>\u0e04\u0e30\u0e41\u0e19\u0e19: ${score} \/ ${maxWords}<\/p>\n <p>\u0e04\u0e27\u0e32\u0e21\u0e41\u0e21\u0e48\u0e19\u0e22\u0e33: ${accuracyPercentage.toFixed(2)}%<\/p>\n <p>\u0e40\u0e27\u0e25\u0e32\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49: ${totalTime.toFixed(2)} \u0e27\u0e34\u0e19\u0e32\u0e17\u0e35<\/p>\n `;\n gameSummary.style.display = \"block\";\n missedWordsContainer.style.display = \"block\"; \n \/\/missedWords.style.display = \"block\";\n showMissedWords();\n \n wordElement.innerHTML = `\u0e08\u0e1a\u0e40\u0e01\u0e21`;\n }\n\n\/*\n \/\/ \u0e41\u0e2a\u0e14\u0e07\u0e04\u0e33\u0e17\u0e35\u0e48\u0e1e\u0e25\u0e32\u0e14\n function showMissedWords() {\n if (missedWords.length > 0) {\n missedWordsContainer.style.display = \"block\";\n missedWordsList.innerHTML = \"\";\n missedWords.forEach(word => {\n const li = document.createElement(\"li\");\n li.textContent = word;\n \n \/\/const playButton = document.createElement(\"button\");\n \/\/playButton.innerHTML = '<i class=\"fas fa-play\"><\/i>';\n \/\/playButton.className = \"play-audio-btn\";\n \/\/playButton.onclick = () => playWordAudio(word);\n \/\/li.appendChild(playButton);\n \n missedWordsList.appendChild(li);\n });\n } else {\n missedWordsContainer.style.display = \"block\";\n }\n }\n*\/\n\/\/ \u0e41\u0e2a\u0e14\u0e07\u0e04\u0e33\u0e17\u0e35\u0e48\u0e1e\u0e25\u0e32\u0e14\nfunction showMissedWords() {\n if (missedWords.length > 0) {\n missedWordsContainer.style.display = \"block\";\n missedWordsList.innerHTML = \"\u0e04\u0e33\u0e17\u0e35\u0e48\u0e2d\u0e48\u0e32\u0e19\u0e1c\u0e34\u0e14:(\u0e04\u0e25\u0e34\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1f\u0e31\u0e07)\";\n missedWords.forEach(word => {\n const li = document.createElement(\"li\");\n li.textContent = word;\n li.className = \"clickable-word\";\n li.onclick = () => playWordAudio(word);\n missedWordsList.appendChild(li);\n });\n } else {\n missedWordsContainer.style.display = \"block\";\n missedWordsList.innerHTML = \"<li>\u0e44\u0e21\u0e48\u0e21\u0e35\u0e04\u0e33\u0e17\u0e35\u0e48\u0e1e\u0e25\u0e32\u0e14<\/li>\";\n }\n}\n\t\t\/\/ \u0e40\u0e25\u0e48\u0e19\u0e40\u0e2a\u0e35\u0e22\u0e07\u0e04\u0e33\u0e2d\u0e48\u0e32\u0e19 (\u0e15\u0e48\u0e2d)\n function playWordAudio(word) {\n if ('speechSynthesis' in window) {\n const utterance = new SpeechSynthesisUtterance(word);\n utterance.lang = 'th-TH';\n utterance.rate = 0.8;\n utterance.pitch = 1;\n\n utterance.onerror = (event) => {\n console.error('SpeechSynthesis Error:', event.error);\n alert('\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e25\u0e48\u0e19\u0e40\u0e2a\u0e35\u0e22\u0e07\u0e44\u0e14\u0e49 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07');\n };\n\n speechSynthesis.speak(utterance);\n } else {\n console.error('Web Speech API \u0e44\u0e21\u0e48\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e43\u0e19\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e19\u0e35\u0e49');\n alert('\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e44\u0e21\u0e48\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e2a\u0e35\u0e22\u0e07');\n }\n }\n\n \/\/ \u0e2a\u0e38\u0e48\u0e21\u0e04\u0e33\n function getRandomWords(wordList, count) {\n const shuffled = [...wordList].sort(() => 0.5 - Math.random());\n return shuffled.slice(0, count);\n }\n\n \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e40\u0e01\u0e21\n selectWordSet('1');\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><br>\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e2a\u0e35\u0e22\u0e07\u0e20\u0e32\u0e29\u0e32\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29 <a href=\"https:\/\/tubtimsiam04.ac.th\/?page_id=2838\">\u0e04\u0e25\u0e34\u0e01\u0e15\u0e23\u0e07\u0e19\u0e35\u0e49<\/a><\/p>\n\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e40\u0e25\u0e48\u0e19\u0e40\u0e01\u0e21<br>1. \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e38\u0e14\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e04\u0e33 \u0e23\u0e30\u0e14\u0e31\u0e1a\u0e0a\u0e31\u0e49\u0e19 \u0e1b.1 – \u0e1b.6<br>2. \u0e40\u0e23\u0e34\u0e48\u0e21\u0e40\u0e01\u0e21<br> – \u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e1b\u0e38\u0e48\u0e21 “\u0e40\u0e23\u0e34\u0e48\u0e21\u0e40\u0e01\u0e21” \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e34\u0e48\u0e21\u0e01\u0e32\u0e23\u0e40\u0e25\u0e48\u0e19<br> – \u0e2d\u0e48\u0e32\u0e19\u0e04\u0e33 \u0e17\u0e35\u0e48\u0e44\u0e14\u0e49\u0e08\u0e32\u0e01\u0e01\u0e32\u0e23\u0e2a\u0e38\u0e48\u0e21 \u0e08\u0e19\u0e04\u0e23\u0e1a 10 \u0e04\u0e33<br>3.\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e08\u0e1a\u0e40\u0e01\u0e21\u0e41\u0e25\u0e49\u0e27 \u0e40\u0e14\u0e47\u0e01 \u0e46 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e14\u0e39\u0e04\u0e30\u0e41\u0e19\u0e19 \u0e41\u0e25\u0e30 \u0e1f\u0e31\u0e07\u0e04\u0e33\u0e17\u0e35\u0e48\u0e2d\u0e48\u0e32\u0e19\u0e1c\u0e34\u0e14 \u0e42\u0e14\u0e22\u0e01\u0e32\u0e23\u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e19\u0e31\u0e49\u0e19 \u0e46 <br><br>\u0e40\u0e14\u0e47\u0e01 \u0e46 \u0e2d\u0e48\u0e32\u0e19\u0e44\u0e14\u0e49\u0e01\u0e35\u0e48\u0e04\u0e30\u0e41\u0e19\u0e19 \u0e04\u0e23\u0e31\u0e1a<br> <br>\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e04\u0e33\u0e08\u0e32\u0e01\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c <a href=\"https:\/\/wirathadkamblog.wordpress.com\">https:\/\/wirathadkamblog.wordpress.com<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0e41\u0e2a\u0e14\u0e07\u0e04\u0e27\u0e32\u0e21\u0e04\u0e34\u0e14\u0e40\u0e2b\u0e47\u0e19\u0e17\u0e35\u0e48\u0e0a\u0e48\u0e2d\u0e07\u0e25\u0e48\u0e32\u0e07\u0e19\u0e35\u0e49\u0e44\u0e14\u0e49\u0e40\u0e25\u0e22\u0e04\u0e23\u0e31\u0e1a<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e40\u0e01\u0e21\u0e1d\u0e36\u0e01\u0e2d\u0e48\u0e32\u0e19\u0e04\u0e33 \u0e2b\u0e23\u0e37\u0e2d \u0e1d\u0e36<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"colormag_page_container_layout":"no_sidebar_full_width","colormag_page_sidebar_layout":"no_sidebar","footnotes":""},"class_list":["post-2794","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2794","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2794"}],"version-history":[{"count":62,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2794\/revisions"}],"predecessor-version":[{"id":7555,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2794\/revisions\/7555"}],"wp:attachment":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2794,"date":"2024-10-17T01:40:39","date_gmt":"2024-10-16T18:40:39","guid":{"rendered":"https:\/\/tubtimsiam04.ac.th\/?page_id=2794"},"modified":"2026-03-13T08:51:49","modified_gmt":"2026-03-13T01:51:49","slug":"%e0%b9%80%e0%b8%81%e0%b8%a1%e0%b8%9d%e0%b8%b6%e0%b8%81%e0%b8%ad%e0%b9%88%e0%b8%b2%e0%b8%99%e0%b8%9a%e0%b8%b1%e0%b8%8d%e0%b8%8a%e0%b8%b5%e0%b8%84%e0%b8%b3-%e0%b8%9b-1","status":"publish","type":"page","link":"https:\/\/tubtimsiam04.ac.th\/?page_id=2794","title":{"rendered":"\u0e40\u0e01\u0e21\u0e1d\u0e36\u0e01\u0e2d\u0e48\u0e32\u0e19\u0e04\u0e33 \u0e2b\u0e23\u0e37\u0e2d \u0e1d\u0e36\u0e01\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e2a\u0e35\u0e22\u0e07 \u0e08\u0e32\u0e01\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e04\u0e33\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19 \u0e1b.1 \u2013 \u0e1b.6"},"content":{"rendered":"\n

\u0e40\u0e01\u0e21\u0e1d\u0e36\u0e01\u0e2d\u0e48\u0e32\u0e19\u0e04\u0e33 \u0e2b\u0e23\u0e37\u0e2d \u0e1d\u0e36\u0e01\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e2a\u0e35\u0e22\u0e07 \u0e08\u0e32\u0e01\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e04\u0e33\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19 \u0e1b.1 – \u0e1b.6 \u0e40\u0e1b\u0e47\u0e19\u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e2a\u0e35\u0e22\u0e07\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22 (\u0e15\u0e49\u0e2d\u0e07\u0e21\u0e35\u0e44\u0e21\u0e42\u0e04\u0e23\u0e42\u0e1f\u0e19)
<\/p>\n\n\n\n\n\n\n \n \n \u0e40\u0e01\u0e21\u0e1d\u0e36\u0e01\u0e2d\u0e48\u0e32\u0e19\u0e04\u0e33\u0e44\u0e17\u0e22<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@300;400;700&family=Sarabun:wght@400;700&display=swap');\n \n body {\n font-family: 'Kanit', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n background-color: #ffffff;\n color: #333333;\n }\n .game-container {\n background-color: #f8f9fa;\n padding: 2rem;\n border-radius: 20px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n text-align: center;\n align-items: center;\n max-width: 100%;\n width: 400px;\n }\n h1 {\n color: #007bff;\n font-size: 2.5rem;\n margin-bottom: 1rem;\n text-shadow: 1px 1px 2px rgba(0,0,0,0.1);\n }\n #word {\n font-family: 'Sarabun', sans-serif;\n font-size: 5rem;\n margin: 1rem 0;\n color: #28a745;\n font-weight: 700;\n text-shadow: 0 0 10px rgba(40,167,69,0.2);\n }\n #score {\n font-size: 3rem;\n font-weight: 700;\n color: #343a40;\n line-height: 1;\n }\n .wordSetBtn {\n font-family: 'Kanit', sans-serif;\n font-weight: 500;\n font-size: 2rem;\n background-color: #007bff;\n color: white;\n border: none;\n padding: 5px 14px;\n margin: 2px;\n cursor: pointer;\n border-radius: 5px;\n transition: background-color 0.3s;\n }\n .wordSetBtn:hover, .wordSetBtn.selected {\n background-color: #0056b3;\n }\n #startBtn, #stopBtn {\n background-color: #007bff;\n color: white;\n border: none;\n padding: 0.8rem 1.5rem;\n font-size: 2.1rem;\n cursor: pointer;\n margin: 0.5rem;\n border-radius: 30px;\n transition: all 0.3s ease;\n font-family: 'Kanit', sans-serif;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n #stopBtn {\n background-color: #dc3545;\n }\n #progress-bar {\n width: 100%;\n background-color: #e0e0e0;\n border-radius: 5px;\n margin: 10px 0;\n }\n #progress {\n width: 0;\n height: 20px;\n background-color: #4CAF50;\n border-radius: 5px;\n transition: width 0.5s;\n }\n #micStatus {\n margin: 10px 0;\n }\n #gameSummary {\n margin-top: 20px;\n }\n\t\t#missedWords {\n margin-top: 1rem;\n font-size: 2rem;\n color: #dc3545;\n }\n #missedWordsList {\n list-style-type: none;\n padding: 0;\n margin-top: 0.5rem;\n }\n #missedWordsList li {\n background-color: #f8d7da;\n border: 1px solid #f5c6cb;\n border-radius: 5px;\n padding: 0.5rem;\n margin-bottom: 0.5rem;\n } \n .play-audio-btn {\n background: none;\n border: none;\n color: #007bff;\n cursor: pointer;\n font-size: 16px;\n padding: 5px;\n }\n .play-audio-btn:hover {\n color: #0056b3;\n }\n \n .clickable-word {\n cursor: pointer;\n color: #007bff;\n transition: color 0.3s;\n }\n .clickable-word:hover {\n color: #0056b3;\n \/\/text-decoration: underline;\n } \n <\/style>\n<\/head>\n<body>\n <div class=\"game-container\">\n <h1>\u0e40\u0e01\u0e21\u0e1d\u0e36\u0e01\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e2a\u0e35\u0e22\u0e07<\/h1>\n <div id=\"wordSetButtons\">\n <button class=\"wordSetBtn\" data-set=\"1\">\u0e1b.1<\/button>\n <button class=\"wordSetBtn\" data-set=\"2\">\u0e1b.2<\/button>\n <button class=\"wordSetBtn\" data-set=\"3\">\u0e1b.3<\/button>\n <button class=\"wordSetBtn\" data-set=\"4\">\u0e1b.4<\/button>\n <button class=\"wordSetBtn\" data-set=\"5\">\u0e1b.5<\/button>\n <button class=\"wordSetBtn\" data-set=\"6\">\u0e1b.6<\/button>\n <\/div>\n <div id=\"word\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e38\u0e14\u0e04\u0e33\u0e41\u0e25\u0e30\u0e01\u0e14\u0e40\u0e23\u0e34\u0e48\u0e21\u0e40\u0e01\u0e21<\/div>\n <div id=\"score\"> <\/div>\n <div id=\"progress-bar\"><div id=\"progress\"><\/div><\/div>\n <div id=\"timeDisplay\">\u0e40\u0e27\u0e25\u0e32: 6 \u0e27\u0e34\u0e19\u0e32\u0e17\u0e35 \/ \u0e04\u0e33 <\/div>\n <div id=\"micStatus\"><\/div>\n <button id=\"startBtn\">\u0e40\u0e23\u0e34\u0e48\u0e21\u0e40\u0e01\u0e21<\/button>\n <button id=\"stopBtn\" disabled>\u0e2b\u0e22\u0e38\u0e14\u0e40\u0e01\u0e21<\/button>\n <div id=\"gameSummary\"><\/div>\n <div id=\"missedWords\">\n <ul id=\"missedWordsList\"><\/ul>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/apis.google.com\/js\/api.js\"><\/script>\n<script>\n\n const SPREADSHEET_ID = '12AuKeJ4AvSRx5bICBxX9nh7PGF_xsDw-uyQjUGtz0-8';\n const API_KEY = 'AIzaSyDVEVyis4n3xHZb8M30FIrIObYDAnP4NOc';\n\n \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e01\u0e47\u0e1a\u0e04\u0e33\u0e28\u0e31\u0e1e\u0e17\u0e4c\n const words1 = [];\n const words2 = [];\n const words3 = [];\n const words4 = [];\n const words5 = [];\n const words6 = [];\n\n function initClient() {\n gapi.client.init({\n apiKey: API_KEY,\n discoveryDocs: [\"https:\/\/sheets.googleapis.com\/$discovery\/rest?version=v4\"],\n }).then(function() {\n fetchAllSheets();\n }).catch(function(error) {\n console.error('Error initializing Google Sheets API:', error);\n });\n }\n\n function fetchAllSheets() {\n Promise.all([\n fetchSheet('\u0e1b1', words1),\n fetchSheet('\u0e1b2', words2),\n fetchSheet('\u0e1b3', words3),\n fetchSheet('\u0e1b4', words4),\n fetchSheet('\u0e1b5', words5),\n fetchSheet('\u0e1b6', words6)\n ]).then(() => {\n console.log('All data fetched successfully');\n \/\/alert(\"OK\");\n \/\/console.log('words1:', words1);\n \/\/console.log('words2:', words2);\n \/\/console.log('words3:', words3);\n \/\/console.log('words4:', words4);\n \/\/console.log('words5:', words5);\n \/\/console.log('words6:', words6);\n }).catch(error => {\n console.error('Error fetching data:', error);\n });\n }\n\n function fetchSheet(sheetName, wordsArray) {\n return gapi.client.sheets.spreadsheets.values.get({\n spreadsheetId: SPREADSHEET_ID,\n range: `${sheetName}!A:A`\n }).then(response => {\n const values = response.result.values;\n if (values && values.length > 0) {\n values.forEach(row => {\n if (row[0] && row[0].trim() !== '') {\n wordsArray.push(row[0]);\n }\n });\n }\n });\n }\n\n gapi.load('client', initClient);\n\n\n\n\/\/-----------------------------------------------------------------------------------------\n\n \/\/ \u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21\u0e40\u0e01\u0e21\n let currentWordSet = words1;\n let selectedWords = [];\n let currentWordIndex = 0;\n let score = 0;\n let isGameActive = false;\n let startTime, endTime;\n let wordTimer;\n let timeLeft = 6;\n let missedWords = [];\n const maxWords = 10;\n\n \/\/ DOM Elements\n const wordElement = document.getElementById(\"word\");\n const scoreElement = document.getElementById(\"score\");\n const startBtn = document.getElementById(\"startBtn\");\n const stopBtn = document.getElementById(\"stopBtn\");\n const progressBar = document.getElementById(\"progress\");\n const micStatus = document.getElementById(\"micStatus\");\n const timeDisplay = document.getElementById(\"timeDisplay\");\n const gameSummary = document.getElementById(\"gameSummary\");\n const missedWordsContainer = document.getElementById(\"missedWords\");\n const missedWordsList = document.getElementById(\"missedWordsList\");\n const wordSetButtons = document.querySelectorAll('.wordSetBtn');\n\n \/\/ Speech Recognition\n let recognition;\n\n \/\/ Event Listeners\n document.addEventListener('DOMContentLoaded', () => {\n selectWordSet('1'); \/\/ \u0e40\u0e25\u0e37\u0e2d\u0e01 \u0e1b.1 \u0e42\u0e14\u0e22\u0e1b\u0e23\u0e34\u0e22\u0e32\u0e22\n });\n startBtn.addEventListener(\"click\", startGame);\n stopBtn.addEventListener(\"click\", stopGame);\n wordSetButtons.forEach(button => {\n button.addEventListener('click', () => selectWordSet(button.getAttribute('data-set')));\n });\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e38\u0e14\u0e04\u0e33\n function selectWordSet(setNumber) {\n wordSetButtons.forEach(btn => btn.classList.remove('selected'));\n const selectedButton = document.querySelector(`.wordSetBtn[data-set=\"${setNumber}\"]`);\n selectedButton.classList.add('selected');\n\n switch(setNumber) {\n case '1': currentWordSet = words1; break;\n case '2': currentWordSet = words2; break;\n case '3': currentWordSet = words3; break;\n case '4': currentWordSet = words4; break;\n case '5': currentWordSet = words5; break;\n case '6': currentWordSet = words6; break;\n }\n wordElement.textContent = `\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e38\u0e14\u0e04\u0e33 \u0e1b.${setNumber}`;\n startBtn.disabled = false;\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e40\u0e23\u0e34\u0e48\u0e21\u0e40\u0e01\u0e21\n function startGame() {\n if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {\n setupSpeechRecognition();\n initializeGame();\n startListening();\n } else {\n alert(\"\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e19\u0e35\u0e49\u0e44\u0e21\u0e48\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a Web Speech API\");\n }\n }\n\n \/\/ \u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32 Speech Recognition\n function setupSpeechRecognition() {\n const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n recognition = new SpeechRecognition();\n recognition.lang = 'th-TH';\n recognition.continuous = true;\n recognition.interimResults = true;\n\n recognition.onstart = () => {\n micStatus.textContent = \"\u0e44\u0e21\u0e42\u0e04\u0e23\u0e42\u0e1f\u0e19: \u0e01\u0e33\u0e25\u0e31\u0e07\u0e1f\u0e31\u0e07\";\n };\n\n recognition.onend = () => {\n if (isGameActive) {\n recognition.start();\n } else {\n micStatus.textContent = \"\u0e44\u0e21\u0e42\u0e04\u0e23\u0e42\u0e1f\u0e19: \u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\";\n }\n };\n\n recognition.onresult = (event) => {\n const transcript = Array.from(event.results)\n .map(result => result[0].transcript.trim().toLowerCase())\n .join(' ');\n checkWord(transcript);\n };\n\n recognition.onerror = (event) => {\n console.error(\"Speech recognition error\", event.error);\n micStatus.textContent = `\u0e44\u0e21\u0e42\u0e04\u0e23\u0e42\u0e1f\u0e19: \u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14 - ${event.error}`;\n };\n }\n\n \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e40\u0e01\u0e21\n function initializeGame() {\n selectedWords = getRandomWords(currentWordSet, maxWords);\n currentWordIndex = 0;\n score = 0;\n missedWords = [];\n scoreElement.textContent = \"0\";\n missedWordsContainer.style.display = \"none\";\n gameSummary.style.display = \"none\";\n \/\/missedWords.style.display = \"none\"; \n isGameActive = true;\n \/\/startBtn.disabled = true;\n stopBtn.disabled = false;\n startTime = Date.now();\n nextWord();\n }\n\n \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e01\u0e32\u0e23\u0e1f\u0e31\u0e07\u0e40\u0e2a\u0e35\u0e22\u0e07\n function startListening() {\n if (recognition && isGameActive) {\n recognition.start();\n }\n }\n\n \/\/ \u0e2b\u0e22\u0e38\u0e14\u0e40\u0e01\u0e21\n function stopGame() {\n isGameActive = false;\n if (recognition) {\n recognition.stop();\n }\n clearInterval(wordTimer);\n showGameSummary();\n }\n\n \/\/ \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e33\u0e17\u0e35\u0e48\u0e1e\u0e39\u0e14\n function checkWord(spokenWords) {\n const currentWord = selectedWords[currentWordIndex].toLowerCase();\n if (spokenWords.includes(currentWord)) {\n score++;\n scoreElement.textContent = `${score}`;\n clearInterval(wordTimer);\n currentWordIndex++;\n nextWord();\n }\n }\n\n \/\/ \u0e41\u0e2a\u0e14\u0e07\u0e04\u0e33\u0e16\u0e31\u0e14\u0e44\u0e1b\n function nextWord() {\n if (currentWordIndex < selectedWords.length) {\n wordElement.textContent = selectedWords[currentWordIndex];\n timeLeft = 6;\n updateProgressBar();\n startWordTimer();\n } else {\n stopGame();\n }\n }\n\n \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e31\u0e27\u0e08\u0e31\u0e1a\u0e40\u0e27\u0e25\u0e32\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e25\u0e30\u0e04\u0e33\n function startWordTimer() {\n clearInterval(wordTimer);\n wordTimer = setInterval(() => {\n timeLeft--;\n updateProgressBar();\n if (timeLeft <= 0) {\n missedWords.push(selectedWords[currentWordIndex]);\n currentWordIndex++;\n clearInterval(wordTimer);\n nextWord();\n }\n }, 1000);\n }\n\n \/\/ \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15 Progress Bar\n function updateProgressBar() {\n const progress = (timeLeft \/ 6) * 100;\n progressBar.style.width = `${progress}%`;\n timeDisplay.textContent = `\u0e40\u0e27\u0e25\u0e32: ${timeLeft} \u0e27\u0e34\u0e19\u0e32\u0e17\u0e35`;\n }\n\n \/\/ \u0e41\u0e2a\u0e14\u0e07\u0e2a\u0e23\u0e38\u0e1b\u0e40\u0e01\u0e21\n function showGameSummary() {\n endTime = Date.now();\n const totalTime = (endTime - startTime) \/ 1000;\n const accuracyPercentage = (score \/ maxWords) * 100;\n \n gameSummary.innerHTML = `\n <h3>\u0e2a\u0e23\u0e38\u0e1b\u0e1c\u0e25<\/h3>\n <p>\u0e04\u0e30\u0e41\u0e19\u0e19: ${score} \/ ${maxWords}<\/p>\n <p>\u0e04\u0e27\u0e32\u0e21\u0e41\u0e21\u0e48\u0e19\u0e22\u0e33: ${accuracyPercentage.toFixed(2)}%<\/p>\n <p>\u0e40\u0e27\u0e25\u0e32\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49: ${totalTime.toFixed(2)} \u0e27\u0e34\u0e19\u0e32\u0e17\u0e35<\/p>\n `;\n gameSummary.style.display = \"block\";\n missedWordsContainer.style.display = \"block\"; \n \/\/missedWords.style.display = \"block\";\n showMissedWords();\n \n wordElement.innerHTML = `\u0e08\u0e1a\u0e40\u0e01\u0e21`;\n }\n\n\/*\n \/\/ \u0e41\u0e2a\u0e14\u0e07\u0e04\u0e33\u0e17\u0e35\u0e48\u0e1e\u0e25\u0e32\u0e14\n function showMissedWords() {\n if (missedWords.length > 0) {\n missedWordsContainer.style.display = \"block\";\n missedWordsList.innerHTML = \"\";\n missedWords.forEach(word => {\n const li = document.createElement(\"li\");\n li.textContent = word;\n \n \/\/const playButton = document.createElement(\"button\");\n \/\/playButton.innerHTML = '<i class=\"fas fa-play\"><\/i>';\n \/\/playButton.className = \"play-audio-btn\";\n \/\/playButton.onclick = () => playWordAudio(word);\n \/\/li.appendChild(playButton);\n \n missedWordsList.appendChild(li);\n });\n } else {\n missedWordsContainer.style.display = \"block\";\n }\n }\n*\/\n\/\/ \u0e41\u0e2a\u0e14\u0e07\u0e04\u0e33\u0e17\u0e35\u0e48\u0e1e\u0e25\u0e32\u0e14\nfunction showMissedWords() {\n if (missedWords.length > 0) {\n missedWordsContainer.style.display = \"block\";\n missedWordsList.innerHTML = \"\u0e04\u0e33\u0e17\u0e35\u0e48\u0e2d\u0e48\u0e32\u0e19\u0e1c\u0e34\u0e14:(\u0e04\u0e25\u0e34\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1f\u0e31\u0e07)\";\n missedWords.forEach(word => {\n const li = document.createElement(\"li\");\n li.textContent = word;\n li.className = \"clickable-word\";\n li.onclick = () => playWordAudio(word);\n missedWordsList.appendChild(li);\n });\n } else {\n missedWordsContainer.style.display = \"block\";\n missedWordsList.innerHTML = \"<li>\u0e44\u0e21\u0e48\u0e21\u0e35\u0e04\u0e33\u0e17\u0e35\u0e48\u0e1e\u0e25\u0e32\u0e14<\/li>\";\n }\n}\n\t\t\/\/ \u0e40\u0e25\u0e48\u0e19\u0e40\u0e2a\u0e35\u0e22\u0e07\u0e04\u0e33\u0e2d\u0e48\u0e32\u0e19 (\u0e15\u0e48\u0e2d)\n function playWordAudio(word) {\n if ('speechSynthesis' in window) {\n const utterance = new SpeechSynthesisUtterance(word);\n utterance.lang = 'th-TH';\n utterance.rate = 0.8;\n utterance.pitch = 1;\n\n utterance.onerror = (event) => {\n console.error('SpeechSynthesis Error:', event.error);\n alert('\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e25\u0e48\u0e19\u0e40\u0e2a\u0e35\u0e22\u0e07\u0e44\u0e14\u0e49 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07');\n };\n\n speechSynthesis.speak(utterance);\n } else {\n console.error('Web Speech API \u0e44\u0e21\u0e48\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e43\u0e19\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e19\u0e35\u0e49');\n alert('\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e44\u0e21\u0e48\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e2a\u0e35\u0e22\u0e07');\n }\n }\n\n \/\/ \u0e2a\u0e38\u0e48\u0e21\u0e04\u0e33\n function getRandomWords(wordList, count) {\n const shuffled = [...wordList].sort(() => 0.5 - Math.random());\n return shuffled.slice(0, count);\n }\n\n \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e40\u0e01\u0e21\n selectWordSet('1');\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><br>\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e2a\u0e35\u0e22\u0e07\u0e20\u0e32\u0e29\u0e32\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29 <a href=\"https:\/\/tubtimsiam04.ac.th\/?page_id=2838\">\u0e04\u0e25\u0e34\u0e01\u0e15\u0e23\u0e07\u0e19\u0e35\u0e49<\/a><\/p>\n\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e40\u0e25\u0e48\u0e19\u0e40\u0e01\u0e21<br>1. \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e38\u0e14\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e04\u0e33 \u0e23\u0e30\u0e14\u0e31\u0e1a\u0e0a\u0e31\u0e49\u0e19 \u0e1b.1 – \u0e1b.6<br>2. \u0e40\u0e23\u0e34\u0e48\u0e21\u0e40\u0e01\u0e21<br> – \u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e1b\u0e38\u0e48\u0e21 “\u0e40\u0e23\u0e34\u0e48\u0e21\u0e40\u0e01\u0e21” \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e34\u0e48\u0e21\u0e01\u0e32\u0e23\u0e40\u0e25\u0e48\u0e19<br> – \u0e2d\u0e48\u0e32\u0e19\u0e04\u0e33 \u0e17\u0e35\u0e48\u0e44\u0e14\u0e49\u0e08\u0e32\u0e01\u0e01\u0e32\u0e23\u0e2a\u0e38\u0e48\u0e21 \u0e08\u0e19\u0e04\u0e23\u0e1a 10 \u0e04\u0e33<br>3.\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e08\u0e1a\u0e40\u0e01\u0e21\u0e41\u0e25\u0e49\u0e27 \u0e40\u0e14\u0e47\u0e01 \u0e46 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e14\u0e39\u0e04\u0e30\u0e41\u0e19\u0e19 \u0e41\u0e25\u0e30 \u0e1f\u0e31\u0e07\u0e04\u0e33\u0e17\u0e35\u0e48\u0e2d\u0e48\u0e32\u0e19\u0e1c\u0e34\u0e14 \u0e42\u0e14\u0e22\u0e01\u0e32\u0e23\u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e19\u0e31\u0e49\u0e19 \u0e46 <br><br>\u0e40\u0e14\u0e47\u0e01 \u0e46 \u0e2d\u0e48\u0e32\u0e19\u0e44\u0e14\u0e49\u0e01\u0e35\u0e48\u0e04\u0e30\u0e41\u0e19\u0e19 \u0e04\u0e23\u0e31\u0e1a<br> <br>\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e04\u0e33\u0e08\u0e32\u0e01\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c <a href=\"https:\/\/wirathadkamblog.wordpress.com\">https:\/\/wirathadkamblog.wordpress.com<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0e41\u0e2a\u0e14\u0e07\u0e04\u0e27\u0e32\u0e21\u0e04\u0e34\u0e14\u0e40\u0e2b\u0e47\u0e19\u0e17\u0e35\u0e48\u0e0a\u0e48\u0e2d\u0e07\u0e25\u0e48\u0e32\u0e07\u0e19\u0e35\u0e49\u0e44\u0e14\u0e49\u0e40\u0e25\u0e22\u0e04\u0e23\u0e31\u0e1a<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e40\u0e01\u0e21\u0e1d\u0e36\u0e01\u0e2d\u0e48\u0e32\u0e19\u0e04\u0e33 \u0e2b\u0e23\u0e37\u0e2d \u0e1d\u0e36<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"colormag_page_container_layout":"no_sidebar_full_width","colormag_page_sidebar_layout":"no_sidebar","footnotes":""},"class_list":["post-2794","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2794","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2794"}],"version-history":[{"count":62,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2794\/revisions"}],"predecessor-version":[{"id":7555,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2794\/revisions\/7555"}],"wp:attachment":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}