<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:media="http://search.yahoo.com/mrss/" >

<channel>
	<title>เรียนรู้ออนไลน์ &#8211; โรงเรียนชุมชนวัดม่วง</title>
	<atom:link href="https://cwm.ac.th/category/anywhere-anytime/feed/" rel="self" type="application/rss+xml" />
	<link>https://cwm.ac.th</link>
	<description>โรงเรียนชุมชนวัดม่วง สพป.สิงห์บุรี</description>
	<lastBuildDate>Tue, 14 Jul 2026 15:26:58 +0000</lastBuildDate>
	<language>th</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1.3</generator>

<image>
	<url>https://cwm.ac.th/wp-content/uploads/2024/12/cropped-ตราโรงเรียน2-32x32.png</url>
	<title>เรียนรู้ออนไลน์ &#8211; โรงเรียนชุมชนวัดม่วง</title>
	<link>https://cwm.ac.th</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Castle ATTACK</title>
		<link>https://cwm.ac.th/2026/07/8474/</link>
		
		<dc:creator><![CDATA[ฝ่ายประชาสัมพันธ์]]></dc:creator>
		<pubDate>Tue, 14 Jul 2026 15:26:56 +0000</pubDate>
				<category><![CDATA[ภาษาต่างประเทศ]]></category>
		<category><![CDATA[เรียนรู้ออนไลน์]]></category>
		<guid isPermaLink="false">https://cwm.ac.th/?p=8474</guid>

					<description><![CDATA[]]></description>
										<content:encoded><![CDATA[<script>
    var caFireballUrl = 'https://cwm.ac.th/wp-content/plugins/edtech-ar-games/public/partials/../../assets/FireBall.mp3';
</script>
<div id="city-attack-wrapper" class="city-attack">
     
    <div class="city-attack__video-container">
        <video id="ca-webcam" autoplay playsinline muted></video>
        <div class="city-attack__video-overlay"></div>
        <canvas id="ca-output-canvas"></canvas>
        
         
        <div id="ca-options-panel" class="city-attack__side-panel city-attack__shared-options-panel p1-turn" aria-live="polite">
            <div id="ca-options-turn-label" class="city-attack__options-turn-label">คำตอบของ Player 1</div>
            <div class="city-attack__side-options-list" id="ca-options-list">
                 
            </div>
        </div>
    </div>
    
     
    <div id="ca-turn-overlay" class="city-attack__turn-overlay hidden">
        <div class="city-attack__turn-text" id="ca-turn-text">เทิร์นของ Player 1</div>
        <div class="city-attack__turn-subtext">โปรดเข้าประจำที่หน้ากล้อง...</div>
    </div>
    
     
    <div id="ca-p1-pointer" class="city-attack__hand-pointer city-attack__hand-pointer--p1 hidden">
        <svg width="44" height="44" viewBox="0 0 44 44">
            <circle class="outer-ring" cx="22" cy="22" r="18" fill="rgba(14, 165, 233, 0.14)" stroke="var(--ca-p1-color)" stroke-width="2.5" />
            <circle class="inner-dot" cx="22" cy="22" r="5" fill="var(--ca-p1-color)" />
        </svg>
    </div>
    <div id="ca-p2-pointer" class="city-attack__hand-pointer city-attack__hand-pointer--p2 hidden">
        <svg width="44" height="44" viewBox="0 0 44 44">
            <circle class="outer-ring" cx="22" cy="22" r="18" fill="rgba(244, 63, 94, 0.14)" stroke="var(--ca-p2-color)" stroke-width="2.5" />
            <circle class="inner-dot" cx="22" cy="22" r="5" fill="var(--ca-p2-color)" />
        </svg>
    </div>
    
     
    <nav class="city-attack__nav">
        <a href="https://cwm.ac.th/" class="city-attack__nav-back">
            <i class="fa-solid fa-arrow-left"></i>
            <span>กลับหน้าหลัก</span>
        </a>
        <div class="city-attack__nav-tools">
            <span id="ca-hand-status" class="city-attack__badge city-attack__badge--status">
                <i class="fa-solid fa-spinner fa-spin"></i>เปิดกล้อง...
            </span>
            <button type="button" onclick="caOpenSettingsModal()" class="city-attack__settings-btn">
                <i class="fa-solid fa-gear"></i>
            </button>
        </div>
    </nav>
    
     
    <main class="city-attack__main">
         
        <div id="ca-intro-screen" class="city-attack__intro-screen">
            <div class="city-attack__glass-card city-attack__glass-card--intro">
                <div class="city-attack__lobby-grid">
                     
                    <div class="city-attack__lobby-left">
                        <span class="city-attack__intro-badge">⚔️ 2 Players AR Combat</span>
                        <div class="city-attack__intro-title">Castle ATTACK 🧙</div>
                        <div class="city-attack__intro-desc">
                            <p>แข่งกันตอบคำถามเพื่อสะสมคะแนนและลดพลังชีวิต (HP) ของอีกฝั่ง ใครแม่นยำและรวดเร็วกว่าคือผู้ชนะ!</p>
                        </div>
                        <div class="city-attack__intro-box" style="margin-top: 1rem; text-align: left;">
                            <div class="city-attack__box-title"><i class="fa-solid fa-scale-balanced"></i> กฎและกติกา (Rules)</div>
                            <ul>
                                <li><span>🔄 สลับเทิร์น:</span> ผู้เล่น 1 และ 2 จะผลัดกันเล่นสลับข้อไปเรื่อยๆ</li>
                                <li><span>🙌 โซนผู้เล่น:</span> ผู้เล่น 1 อยู่ฝั่งซ้าย ผู้เล่น 2 อยู่ฝั่งขวา และใช้ชุดคำตอบร่วมกันทีละเทิร์น</li>
                                <li><span class="success"><i class="fa-solid fa-bolt"></i> โจมตี:</span> ลากคำตอบที่ถูกลงช่อง ยิ่งตอบเร็ว ยิ่งทำดาเมจแรง (200-600 HP)!</li>
                                <li><span class="danger"><i class="fa-solid fa-shield-halved"></i> พลาดโอกาส:</span> ตอบผิดหรือหมดเวลา จะเสียเทิร์นโจมตีทันทีโดยไม่มีการหักพลังชีวิต (HP) ของตนเอง</li>
                                <li><span class="warning"><i class="fa-solid fa-crown"></i> เป้าหมาย:</span> ลดเลือดของอีกฝ่ายให้เป็น 0 หรือมี HP เหลือมากกว่าเมื่อหมดเวลาเพื่อชนะ</li>
                            </ul>
                        </div>
                    </div>

                     
                    <div class="city-attack__lobby-right">
                        <div class="city-attack__players-setup" style="margin-top: 0; margin-bottom: 1.5rem;">
                            <div class="city-attack__player-input-wrap player-1-theme">
                                <label><i class="fa-solid fa-user-ninja"></i> ผู้เล่นคนที่ 1</label>
                                <input type="text" id="ca-player1-name" placeholder="ชื่อผู้เล่นที่ 1" value="Player 1" class="city-attack__input" maxlength="15">
                            </div>
                            <div class="city-attack__player-input-wrap player-2-theme">
                                <label><i class="fa-solid fa-user-astronaut"></i> ผู้เล่นคนที่ 2</label>
                                <input type="text" id="ca-player2-name" placeholder="ชื่อผู้เล่นที่ 2" value="Player 2" class="city-attack__input" maxlength="15">
                            </div>
                        </div>

                        <div class="city-attack__config-box" style="margin-bottom: 2rem;">
                            <div class="city-attack__config-header">
                                <label><i class="fa-solid fa-layer-group"></i> เลือกชุดคำถาม:</label>
                            </div>
                            <select id="ca-question-set-select" class="city-attack__select">
                                <option value="10">🏆 โหมดแข่งขันมาตรฐาน (10 ข้อ)</option>
                                <option value="26">🎯 โหมดเรียนรู้ A-Z มาตรฐาน (26 ข้อ)</option>
                            </select>
                            <div id="ca-question-set-status-msg" class="city-attack__status-msg">กำลังโหลดชุดคำถาม...</div>
                        </div>

                         
                        <div id="ca-game-mode-picker-container" class="city-attack__mode-picker hidden" style="margin-top: -1rem; margin-bottom: 2rem;">
                            <label><i class="fa-solid fa-font"></i> เลือกโหมดตัวอักษร:</label>
                            <div class="city-attack__mode-grid">
                                <button type="button" onclick="caSelectGameMode('upper-to-lower')" id="ca-mode-utl-btn" class="city-attack__mode-btn city-attack__mode-btn--active">
                                    <div>
                                        <div class="city-attack__mode-name">ใหญ่ ➔ เล็ก</div>
                                        <div class="city-attack__mode-desc">โจทย์ A | ตอบ a</div>
                                    </div>
                                    <div class="city-attack__mode-icon"><i id="ca-mode-utl-icon" class="fa-solid fa-circle-check"></i></div>
                                </button>
                                <button type="button" onclick="caSelectGameMode('lower-to-upper')" id="ca-mode-ltu-btn" class="city-attack__mode-btn">
                                    <div>
                                        <div class="city-attack__mode-name">เล็ก ➔ ใหญ่</div>
                                        <div class="city-attack__mode-desc">โจทย์ a | ตอบ A</div>
                                    </div>
                                    <div class="city-attack__mode-icon"><i id="ca-mode-ltu-icon" class="fa-regular fa-circle"></i></div>
                                </button>
                            </div>
                        </div>
                        
                        <button type="button" onclick="caStartGame()" id="ca-start-game-btn" class="city-attack__start-btn" style="margin-top: auto; width: 100%;">
                            <i class="fa-solid fa-khanda"></i> เริ่มสงคราม
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
         
        <div id="ca-loading-ar-screen" class="city-attack__glass-card city-attack__loading-screen hidden">
            <div class="city-attack__loading-icon"><i class="fa-solid fa-spinner fa-spin"></i></div>
            <div class="city-attack__loading-title">กำลังอัญเชิญเวทมนตร์ (AR)...</div>
            <p id="ca-loading-ar-status" class="city-attack__loading-text">กำลังเปิดกล้องและโหลด AI Model</p>
            <div class="city-attack__progress-wrap">
                <div id="ca-loading-ar-progress-bar" class="city-attack__progress-bar"></div>
            </div>
            <div style="display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem;">
                <button type="button" onclick="caCancelReady(event)" class="city-attack__cancel-btn">ยกเลิก</button>
                <button type="button" onclick="caBypassAR()" class="city-attack__cancel-btn" style="background: var(--ca-primary); border-color: var(--ca-primary);">เล่นด้วยเมาส์ (ไม่ใช้กล้อง)</button>
            </div>
        </div>
        
         
        <div id="ca-ready-screen" class="city-attack__glass-card city-attack__ready-screen hidden" onclick="caForceStartGame()" style="cursor: pointer;">
            <div class="city-attack__ready-icon">👌</div>
            <div class="city-attack__ready-title">พร้อมบุกเมือง!</div>
            <p class="city-attack__ready-text">แสดงมือเข้ามาในกล้อง แล้ว<strong>ทำท่า OK หรือจีบนิ้ว</strong> ค้างไว้ 3 วินาที จะหันตรงหรือเอียงมือก็ได้<br><br><span style="font-size: 0.8em; opacity: 0.8;">(หรือคลิกที่นี่เพื่อเริ่มทันที)</span></p>
            <div class="city-attack__progress-wrap">
                <div id="ca-ready-progress-bar" class="city-attack__progress-bar"></div>
            </div>
            <div id="ca-ready-countdown-text" class="city-attack__ready-countdown">3.0s</div>
            <button type="button" onclick="caCancelReady(event)" class="city-attack__cancel-btn">ย้อนกลับ</button>
        </div>
        
         
        <div id="ca-gameplay-screen" class="city-attack__gameplay-screen hidden">
            
             
            <div class="city-attack__split-divider">
                <span id="ca-p1-side-label" class="city-attack__split-label city-attack__split-label--p1">โซนจับมือ Player 1</span>
                <span id="ca-p2-side-label" class="city-attack__split-label city-attack__split-label--p2">โซนจับมือ Player 2</span>
            </div>



             
            <div id="ca-projectile-container" class="city-attack__projectile-container"></div>
            
             
            <div id="ca-p1-damage-float" class="city-attack__damage-float city-attack__damage-float--p1 hidden">-850</div>
            <div id="ca-p2-damage-float" class="city-attack__damage-float city-attack__damage-float--p2 hidden">-850</div>
            
             
            <div class="city-attack__vs-hud">
                 
                <div class="city-attack__vs-player city-attack__vs-player--p1" id="ca-p1-card">
                    <span class="city-attack__vs-name city-attack__vs-name--p1" id="ca-p1-name-disp">Player 1</span>
                    <div class="city-attack__vs-hp-bar">
                        <div id="ca-p1-hp-fill" class="city-attack__vs-hp-fill city-attack__vs-hp-fill--p1" style="width: 100%;"></div>
                        <span id="ca-p1-hp-text" class="city-attack__vs-hp-text">3000 / 3000</span>
                    </div>
                    <div class="city-attack__vs-meta">พลังชีวิตคงเหลือ: <span id="ca-p1-hp-disp">3000</span> HP</div>
                </div>
                
                 
                <div class="city-attack__vs-timer-wrap">
                    <div class="city-attack__vs-divider">VS</div>
                    <div id="ca-question-timer-container" class="city-attack__timer-bar-container">
                        <span id="ca-current-turn-label" class="city-attack__turn-label">เทิร์น P1</span>
                        <div class="city-attack__timer-bar">
                            <div id="ca-timer-bar-fill" class="city-attack__timer-bar-fill" style="width: 100%;"></div>
                        </div>
                    </div>
                     
                    <div class="city-attack__progress-info" style="text-align: center; margin-top: 10px; pointer-events: auto;">
                        <span id="ca-question-progress" style="background: rgba(0,0,0,0.6); padding: 0.3rem 1rem; border-radius: 50px; font-size: 0.9rem; border: 1px solid var(--ca-glass-border);"><i class="fa-solid fa-list-ol"></i> ข้อที่ 1/10</span>
                    </div>
                </div>

                 
                <div class="city-attack__vs-player city-attack__vs-player--p2" id="ca-p2-card">
                    <span class="city-attack__vs-name city-attack__vs-name--p2" id="ca-p2-name-disp">Player 2</span>
                    <div class="city-attack__vs-hp-bar">
                        <div id="ca-p2-hp-fill" class="city-attack__vs-hp-fill city-attack__vs-hp-fill--p2" style="width: 100%;"></div>
                        <span id="ca-p2-hp-text" class="city-attack__vs-hp-text">3000 / 3000</span>
                    </div>
                    <div class="city-attack__vs-meta">พลังชีวิตคงเหลือ: <span id="ca-p2-hp-disp">3000</span> HP</div>
                </div>
            </div>
             
            <div class="city-attack__dropzone-wrap">
                <div id="ca-question-letter-zone" class="city-attack__dropzone">
                    <div id="ca-question-letter" class="city-attack__question-text">A</div>
                </div>
            </div>

             
            <div class="city-attack__battlefield">
                 
                <div id="ca-p1-castle" class="city-attack__castle city-attack__castle--p1 state-healthy">
                    <div class="city-attack__castle-glow"></div>
                    <div class="city-attack__castle-body">
                        <svg viewBox="0 0 240 220" class="city-attack__castle-svg">
                            <ellipse class="castle-shield" cx="120" cy="115" rx="100" ry="95" fill="none" stroke-width="4" />
                            <path class="castle-stone castle-base" d="M30,190 L210,190 L200,160 L40,160 Z" />
                            <rect class="castle-stone castle-wall-left" x="50" y="110" width="35" height="50" />
                            <rect class="castle-stone castle-wall-right" x="155" y="110" width="35" height="50" />
                            <rect class="castle-stone castle-wall-center" x="85" y="120" width="70" height="40" />
                            <path class="castle-stone" d="M50,110 L50,102 L58,102 L58,110 L67,110 L67,102 L75,102 L75,110 L85,110 L85,120 M155,110 L155,120 L165,120 L165,102 L173,102 L173,110 L182,110 L182,102 L190,102 L190,110" />
                            <rect class="castle-stone castle-tower-mid" x="95" y="70" width="50" height="50" />
                            <polygon class="castle-roof" points="90,70 120,30 150,70" />
                            <path class="castle-gate" d="M105,160 C105,135 135,135 135,160 Z" />
                            <rect class="castle-stone castle-tower-left" x="35" y="80" width="20" height="80" />
                            <polygon class="castle-roof-side" points="30,80 45,50 60,80" />
                            <rect class="castle-stone castle-tower-right" x="185" y="80" width="20" height="80" />
                            <polygon class="castle-roof-side" points="180,80 195,50 210,80" />
                            <rect class="castle-window" x="42" y="95" width="6" height="15" rx="3" />
                            <rect class="castle-window" x="192" y="95" width="6" height="15" rx="3" />
                            <rect class="castle-window" x="117" y="85" width="6" height="15" rx="3" />
                            <line class="castle-flagpole" x1="120" y1="30" x2="120" y2="10" stroke-width="2" />
                            <polygon class="castle-flag" points="120,10 145,18 120,25" />
                            <g class="castle-cracks">
                                <path d="M70,120 L75,135 L70,145 M165,130 L170,140 L163,150 M120,75 L125,90 M105,85 L115,95" fill="none" stroke-width="2.5" stroke-linecap="round" />
                            </g>
                        </svg>
                    </div>
                    <div class="city-attack__castle-effects">
                        <div class="smoke-particles">
                            <div class="smoke-p smoke-p-1"></div>
                            <div class="smoke-p smoke-p-2"></div>
                            <div class="smoke-p smoke-p-3"></div>
                        </div>
                        <div class="fire-particles">
                            <div class="fire-p fire-p-1"></div>
                            <div class="fire-p fire-p-2"></div>
                            <div class="fire-p fire-p-3"></div>
                        </div>
                    </div>
                </div>

                 
                <div id="ca-p2-castle" class="city-attack__castle city-attack__castle--p2 state-healthy">
                    <div class="city-attack__castle-glow"></div>
                    <div class="city-attack__castle-body">
                        <svg viewBox="0 0 240 220" class="city-attack__castle-svg">
                            <ellipse class="castle-shield" cx="120" cy="115" rx="100" ry="95" fill="none" stroke-width="4" />
                            <path class="castle-stone castle-base" d="M30,190 L210,190 L200,160 L40,160 Z" />
                            <rect class="castle-stone castle-wall-left" x="50" y="110" width="35" height="50" />
                            <rect class="castle-stone castle-wall-right" x="155" y="110" width="35" height="50" />
                            <rect class="castle-stone castle-wall-center" x="85" y="120" width="70" height="40" />
                            <path class="castle-stone" d="M50,110 L50,102 L58,102 L58,110 L67,110 L67,102 L75,102 L75,110 L85,110 L85,120 M155,110 L155,120 L165,120 L165,102 L173,102 L173,110 L182,110 L182,102 L190,102 L190,110" />
                            <rect class="castle-stone castle-tower-mid" x="95" y="70" width="50" height="50" />
                            <polygon class="castle-roof" points="90,70 120,30 150,70" />
                            <path class="castle-gate" d="M105,160 C105,135 135,135 135,160 Z" />
                            <rect class="castle-stone castle-tower-left" x="35" y="80" width="20" height="80" />
                            <polygon class="castle-roof-side" points="30,80 45,50 60,80" />
                            <rect class="castle-stone castle-tower-right" x="185" y="80" width="20" height="80" />
                            <polygon class="castle-roof-side" points="180,80 195,50 210,80" />
                            <rect class="castle-window" x="42" y="95" width="6" height="15" rx="3" />
                            <rect class="castle-window" x="192" y="95" width="6" height="15" rx="3" />
                            <rect class="castle-window" x="117" y="85" width="6" height="15" rx="3" />
                            <line class="castle-flagpole" x1="120" y1="30" x2="120" y2="10" stroke-width="2" />
                            <polygon class="castle-flag" points="120,10 145,18 120,25" />
                            <g class="castle-cracks">
                                <path d="M70,120 L75,135 L70,145 M165,130 L170,140 L163,150 M120,75 L125,90 M105,85 L115,95" fill="none" stroke-width="2.5" stroke-linecap="round" />
                            </g>
                        </svg>
                    </div>
                    <div class="city-attack__castle-effects">
                        <div class="smoke-particles">
                            <div class="smoke-p smoke-p-1"></div>
                            <div class="smoke-p smoke-p-2"></div>
                            <div class="smoke-p smoke-p-3"></div>
                        </div>
                        <div class="fire-particles">
                            <div class="fire-p fire-p-1"></div>
                            <div class="fire-p fire-p-2"></div>
                            <div class="fire-p fire-p-3"></div>
                        </div>
                    </div>
                </div>
            </div>
            

            
             
            <div class="city-attack__gameplay-footer-wrap">
                <div class="city-attack__gameplay-footer">
                    <button type="button" onclick="caExitGame()" class="city-attack__footer-btn city-attack__footer-btn--danger">
                        <i class="fa-solid fa-right-from-bracket"></i> ออกจากเกม
                    </button>
                    <button type="button" onclick="caResetAR()" class="city-attack__footer-btn city-attack__footer-btn--warning">
                        <i class="fa-solid fa-rotate-right"></i> รีเซ็ตกล้อง
                    </button>
                </div>
            </div>
        </div>
        
         
        <div id="ca-result-screen" class="city-attack__result-screen hidden">
            <div class="city-attack__result-content">
                <div class="city-attack__result-header" id="ca-result-header">
                    <div class="city-attack__result-icon"><i class="fa-solid fa-trophy"></i></div>
                    <div id="ca-result-title" class="city-attack__result-title">เมืองถูกทำลาย! ชัยชนะเป็นของคุณ</div>
                </div>
                
                <div class="city-attack__result-grid">
                     
                    <div class="city-attack__result-stat player-1-theme">
                        <span class="city-attack__result-label" id="ca-res-p1-name">Player 1</span>
                        <div id="ca-res-p1-hp" class="city-attack__result-val">3000</div>
                        <span class="city-attack__result-sub">พลังชีวิตคงเหลือ</span>
                    </div>
                     
                    <div class="city-attack__result-stat player-2-theme">
                        <span class="city-attack__result-label" id="ca-res-p2-name">Player 2</span>
                        <div id="ca-res-p2-hp" class="city-attack__result-val">3000</div>
                        <span class="city-attack__result-sub">พลังชีวิตคงเหลือ</span>
                    </div>
                </div>
                
                <div class="city-attack__result-message" id="ca-result-message">
                    สุดยอดมาก! ทั้งสองคนช่วยกันถล่มเมืองจนพินาศ
                </div>
                
                <div class="city-attack__custom-btn-container">
                    <button type="button" onclick="caRestartGame()" class="city-attack__btn-primary">
                        <i class="fa-solid fa-rotate-left"></i> ทำศึกอีกครั้ง
                    </button>
                    <button type="button" onclick="caExitGame()" class="city-attack__btn-secondary">
                        <i class="fa-solid fa-house"></i> กลับหน้าหลัก
                    </button>
                </div>
            </div>
        </div>
    </main>
    
     
    <div id="ca-settings-modal" class="city-attack__modal-overlay hidden" onclick="if(event.target === this) caCloseSettingsModal()" style="pointer-events: auto !important;">
        <div class="city-attack__glass-card city-attack__modal" style="pointer-events: auto !important;">
            <div class="city-attack__modal-header">
                <div><i class="fa-solid fa-sliders"></i> ตั้งค่า</div>
                <button type="button" onclick="caCloseSettingsModal()" class="city-attack__modal-close">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="city-attack__modal-body">
                <div class="city-attack__setting-item">
                    <label>
                        <span>ความไวในการจีบนิ้ว (Pinch Sensitivity)</span>
                        <span id="ca-pinch-sens-text" class="city-attack__setting-val">ปานกลาง (0.25)</span>
                    </label>
                    <input type="range" id="ca-pinch-sens-range" min="0.12" max="0.35" step="0.01" value="0.25" oninput="caUpdatePinchSens(this.value)" class="city-attack__range-slider">
                </div>
                <div class="city-attack__setting-item">
                    <div>
                        <label>วาดเส้นข้อต่อนิ้วมือ</label>
                    </div>
                    <button type="button" onclick="caToggleSkeleton()" id="ca-skeleton-toggle-btn" class="city-attack__toggle-btn">
                        <div class="city-attack__toggle-handle"></div>
                    </button>
                </div>
            </div>
            <div class="city-attack__modal-footer">
                <button type="button" onclick="caCloseSettingsModal()" class="city-attack__save-btn">ปิด</button>
            </div>
        </div>
    </div>
</div>

]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>เกม AR จับคู่</title>
		<link>https://cwm.ac.th/2026/07/8428/</link>
		
		<dc:creator><![CDATA[ฝ่ายประชาสัมพันธ์]]></dc:creator>
		<pubDate>Mon, 13 Jul 2026 07:28:26 +0000</pubDate>
				<category><![CDATA[ภาษาต่างประเทศ]]></category>
		<category><![CDATA[เรียนรู้ออนไลน์]]></category>
		<guid isPermaLink="false">https://cwm.ac.th/?p=8428</guid>

					<description><![CDATA[]]></description>
										<content:encoded><![CDATA[
<div id="ar-game-wrapper" class="ar-match">
     
    <div class="ar-match__video-container">
         
        <video id="webcam" autoplay playsinline></video>
         
        <canvas id="output-canvas"></canvas>
    </div>
     
    <div class="ar-match__video-overlay"></div>
    
     
    <div id="danger-overlay" class="ar-match__danger-overlay hidden"></div>
    <audio
        id="ar-match-bgm"
        class="hidden"
        preload="auto"
                    src="https://cwm.ac.th/wp-content/plugins/edtech-ar-games/assets/music/ar-match/01%20Vowel%20Sounds%20Game.mp3"
                data-playlist="[&quot;https:\/\/cwm.ac.th\/wp-content\/plugins\/edtech-ar-games\/assets\/music\/ar-match\/01%20Vowel%20Sounds%20Game.mp3&quot;,&quot;https:\/\/cwm.ac.th\/wp-content\/plugins\/edtech-ar-games\/assets\/music\/ar-match\/02%20A-Z%20Phonics%20Arcade.mp3&quot;,&quot;https:\/\/cwm.ac.th\/wp-content\/plugins\/edtech-ar-games\/assets\/music\/ar-match\/03%20Classroom%20Adventure.mp3&quot;]"
    ></audio>
    
     
    <div id="hand-pointer" class="ar-match__hand-pointer hidden">
        <svg width="44" height="44" viewBox="0 0 44 44">
             
            <circle class="outer-ring" cx="22" cy="22" r="18" fill="rgba(255, 64, 129, 0.12)" stroke="white" stroke-width="2.5" />
             
            <circle class="inner-dot" cx="22" cy="22" r="5" fill="#ff4081" />
             
            <circle class="pinch-indicator" cx="22" cy="22" r="14" fill="transparent" stroke="#00e5ff" stroke-width="2" stroke-dasharray="5 3" display="none" />
        </svg>
    </div>
    

    
     
    <nav class="ar-match__nav">
        <a href="https://cwm.ac.th/" class="ar-match__nav-back" aria-label="กลับหน้าหลัก" title="กลับหน้าหลัก">
            <i class="fa-solid fa-arrow-left"></i>
            <span>กลับหน้าหลัก</span>
        </a>

        <div id="gameplay-top-hud"
             class="ar-match__nav-hud hidden"
             role="group"
             aria-label="สถานะระหว่างเล่นเกม">
            <div class="ar-match__progress-info">
                <span>ความคืบหน้า</span>
                <div id="question-progress" class="ar-match__progress-badge"><i class="fa-solid fa-list-ol"></i>1/10</div>
            </div>
            <div class="ar-match__gameplay-stats">
                <div id="hearts-container" class="ar-match__hearts">
                    <i class="fa-solid fa-heart" id="heart-1"></i>
                    <i class="fa-solid fa-heart" id="heart-2"></i>
                    <i class="fa-solid fa-heart" id="heart-3"></i>
                </div>

                <div id="question-timer-container" class="ar-match__health-bar-container hidden">
                    <span>เวลา (Time)</span>
                    <div class="ar-match__health-bar">
                        <div id="health-bar-fill" class="ar-match__health-bar-fill" style="width: 100%;"></div>
                    </div>
                </div>
                <div class="ar-match__gameplay-time">
                    <span>เวลารวม</span>
                    <div id="game-timer"><i class="fa-regular fa-clock"></i>0s</div>
                </div>
                <div class="ar-match__gameplay-score">
                    <span>คะแนน</span>
                    <div id="game-score"><i class="fa-solid fa-star"></i>0</div>
                </div>
            </div>
        </div>

        <div class="ar-match__nav-tools">
            <span id="fist-help-badge" class="ar-match__badge ar-match__badge--help hidden">
                <i class="fa-solid fa-hand-pointer"></i> ขยับมือเพื่อชี้ ➔
                ทำท่า OK 👌 เพื่อจับ ➔ ปล่อยนิ้ว 🖐️ เพื่อวาง
            </span>
             
            <span id="hand-status" class="ar-match__badge ar-match__badge--status" title="เปิดกล้อง...">
                <i class="fa-solid fa-spinner fa-spin"></i>
            </span>
            <button type="button" onclick="resetAR()" class="ar-match__gameplay-action ar-match__gameplay-action--reset" aria-label="รีเซ็ตกล้อง" title="รีเซ็ตกล้อง">
                <i class="fa-solid fa-rotate-right" aria-hidden="true"></i>
            </button>
            <button type="button" onclick="exitGame()" class="ar-match__gameplay-action ar-match__gameplay-action--exit" aria-label="ออกจากการเล่นเกม" title="ออกจากการเล่นเกม">
                <i class="fa-solid fa-right-from-bracket" aria-hidden="true"></i>
            </button>
            <button type="button" onclick="openSettingsModal()" class="ar-match__settings-btn" aria-label="เปิดการตั้งค่า">
                <i class="fa-solid fa-gear"></i>
            </button>
        </div>
    </nav>
    
     
    <main class="ar-match__main">
         
        <div id="intro-screen" class="ar-match__intro-screen">
            <div class="ar-match__glass-card ar-match__glass-card--intro">
                 
                <div class="ar-match__intro-col ar-match__intro-col--controls">
                    <div class="ar-match__intro-text">
                        <span class="ar-match__intro-badge">🕹️ AR Educational Game</span>
                        <div class="ar-match__intro-title">เกมจับคู่ตอบคำถามด้วยเทคโนโลยี AR</div>
                        <div class="ar-match__intro-desc">
                            <p>เกมจับคู่ตอบคำถามด้วยเทคโนโลยีตรวจจับมือลากและหย่อน (AR Drag &amp; Drop)</p>
                            <details class="ar-match__instructions">
                                <summary class="ar-match__instructions-summary">
                                    <span class="ar-match__instructions-summary-main">
                                        <i class="fa-solid fa-book-open ar-match__instructions-summary-icon"></i>
                                        <span class="ar-match__instructions-summary-label">วิธีเล่นและกติกา</span>
                                    </span>
                                    <span class="ar-match__instructions-summary-meta">
                                        <span class="ar-match__instructions-summary-hint">กดเพื่อดู</span>
                                        <i class="fa-solid fa-chevron-down ar-match__instructions-chevron"></i>
                                    </span>
                                </summary>
                                <div class="ar-match__instructions-content">
                                    <div class="ar-match__intro-box">
                                        <div class="ar-match__box-title"><i class="fa-solid fa-hand-sparkles"></i> การควบคุม (Controls)</div>
                                        <ul>
                                            <li><span>🖐️ ขยับมือ:</span> เลื่อนเป้าหมาย (Cursor) ไปยังการ์ดคำตอบ</li>
                                            <li><span>👌 ทำท่า OK/จีบนิ้ว:</span> หยิบคำตอบได้ทั้งหันตรงหรือเอียงมือ (Grab)</li>
                                            <li><span>🖐️ คลายนิ้ว:</span> แยกนิ้วโป้งกับนิ้วชี้เพื่อปล่อยคำตอบ (Drop)</li>
                                        </ul>
                                    </div>
                                    <div class="ar-match__intro-box">
                                        <div class="ar-match__box-title"><i class="fa-solid fa-scale-balanced"></i> กฎและกติกา (Rules)</div>
                                        <ul>
                                            <li><span class="danger"><i class="fa-solid fa-heart"></i> หัวใจ 3 ดวง:</span> ตอบผิด หรือหมดเวลา เสียหัวใจ 1 ดวง หากหัวใจหมด = จบเกม</li>
                                            <li><span class="success"><i class="fa-solid fa-heart-circle-plus"></i> ฟื้นฟูหัวใจ:</span> ตอบถูก 5 ข้อติดกัน (Streak x5) จะได้หัวใจคืน 1 ดวง</li>
                                            <li><span class="warning"><i class="fa-solid fa-bolt"></i> Speed Bonus:</span> ตอบถูกเร็วยิ่งได้คะแนนมาก (สูงสุด +200 ต่อข้อ) — ตอบช้าก็ยังได้ 100 คะแนน</li>
                                            <li><span class="success"><i class="fa-solid fa-fire"></i> Max Streak Bonus:</span> Streak สูงสุดในเกมจะถูกนำมาคูณคะแนนทั้งหมดตอนจบ (สูงสุด ×2.0 เมื่อ Streak 10+)</li>
                                            <li><span class="success"><i class="fa-solid fa-computer-mouse"></i> เมาส์/แตะ:</span> สามารถคลิกหรือแตะที่การ์ดคำตอบเพื่อตอบได้ทันที</li>
                                            <li><span class="danger"><i class="fa-solid fa-fire-flame-curved"></i> Double Or Nothing:</span> เดิมพันคะแนน ×3 แต่ถ้าตอบผิดหรือหมดเวลา เสียหัวใจ 2 ดวง!</li>
                                        </ul>
                                    </div>
                                </div>
                            </details>
                        </div>
                    </div>

                    <div class="ar-match__stat-grid">
                        <div class="ar-match__stat-box ar-match__stat-box--primary">
                            <div class="ar-match__stat-icon"><i class="fa-solid fa-trophy"></i></div>
                            <div>
                                <div class="ar-match__stat-label">คะแนนสูงสุด</div>
                                <div id="high-score-val" class="ar-match__stat-val">0 คะแนน</div>
                            </div>
                        </div>
                        <div class="ar-match__stat-box ar-match__stat-box--secondary">
                            <div class="ar-match__stat-icon"><i class="fa-solid fa-clock"></i></div>
                            <div>
                                <div class="ar-match__stat-label">เวลาดีที่สุด</div>
                                <div id="best-time-val" class="ar-match__stat-val">-- วินาที</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="ar-match__config-box">
                        <div class="ar-match__config-header">
                            <label><i class="fa-solid fa-layer-group"></i> เลือกโหมดเกม / ชุดคำถาม:</label>
                            <button onclick="downloadTemplate()" class="ar-match__template-btn" title="ดาวน์โหลดไฟล์ CSV ต้นแบบสำหรับสร้างชุดคำถาม">
                                <i class="fa-solid fa-file-excel"></i> โหลดเทมเพลต
                            </button>
                        </div>
                        <select id="ar-question-set-select" class="ar-match__select">
                            <option value="10">🏆 โหมดแข่งขันมาตรฐาน (10 ข้อ)</option>
                            <option value="26">🎯 โหมดเรียนรู้ A-Z มาตรฐาน (26 ข้อ)</option>
                        </select>
                        <div id="question-set-status-msg" class="ar-match__status-msg">กำลังโหลดชุดคำถาม...</div>
                    </div>
                    
                    <div id="game-mode-picker-container" class="ar-match__mode-picker">
                        <label><i class="fa-solid fa-font"></i> เลือกโหมดตัวอักษร:</label>
                        <div class="ar-match__mode-grid">
                            <button onclick="selectGameMode('upper-to-lower')" id="mode-utl-btn" class="ar-match__mode-btn ar-match__mode-btn--active">
                                <div>
                                    <div class="ar-match__mode-name">ใหญ่ ➔ เล็ก</div>
                                    <div class="ar-match__mode-desc">โจทย์ A | ตอบ a</div>
                                </div>
                                <div class="ar-match__mode-icon"><i id="mode-utl-icon" class="fa-solid fa-circle-check"></i></div>
                            </button>
                            <button onclick="selectGameMode('lower-to-upper')" id="mode-ltu-btn" class="ar-match__mode-btn">
                                <div>
                                    <div class="ar-match__mode-name">เล็ก ➔ ใหญ่</div>
                                    <div class="ar-match__mode-desc">โจทย์ a | ตอบ A</div>
                                </div>
                                <div class="ar-match__mode-icon"><i id="mode-ltu-icon" class="fa-regular fa-circle"></i></div>
                            </button>
                        </div>
                    </div>
                    
                    <button onclick="startGame()" id="start-game-btn" class="ar-match__start-btn">
                        <i class="fa-solid fa-circle-play"></i> เริ่มเล่นเกม
                    </button>

                    <hr class="ar-match__divider ar-match__divider--mobile">
                </div>

                <aside class="ar-match__intro-col ar-match__intro-col--scoreboard">
                    <div class="ar-match__leaderboard">
                        <div class="ar-match__leaderboard-header">
                            <label><i class="fa-solid fa-ranking-star"></i> ตารางอันดับ (Leaderboard)</label>
                            <span id="leaderboard-mode-title" class="ar-match__leaderboard-badge">โหมดแข่งขัน</span>
                        </div>
                        <div class="ar-match__table-wrap">
                            <table class="ar-match__table">
                                <thead>
                                    <tr>
                                        <th>อันดับ</th>
                                        <th>ชื่อผู้เล่น</th>
                                        <th>คะแนน</th>
                                        <th>เวลา</th>
                                    </tr>
                                </thead>
                                <tbody id="leaderboard-tbody">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </aside>
            </div>
        </div>
        
         
        <div id="loading-ar-screen" class="ar-match__glass-card ar-match__loading-screen hidden">
            <div class="ar-match__loading-icon"><i class="fa-solid fa-spinner fa-spin"></i></div>
            <div class="ar-match__loading-title">กำลังเตรียมระบบ AR...</div>
            <p id="loading-ar-status" class="ar-match__loading-text">กำลังเปิดกล้องและโหลด AI Model</p>
            <div class="ar-match__progress-wrap">
                <div id="loading-ar-progress-bar" class="ar-match__progress-bar"></div>
            </div>
            <button onclick="cancelReady()" class="ar-match__cancel-btn">ยกเลิก</button>
        </div>
        
         
        <div id="ready-screen" class="ar-match__glass-card ar-match__ready-screen hidden" onclick="forceStartGame()" style="cursor: pointer;">
            <div class="ar-match__ready-icon">👌</div>
            <div class="ar-match__ready-title">เตรียมพร้อมเริ่มเกม!</div>
            <p class="ar-match__ready-text">แสดงมือเข้ามาในกล้อง แล้ว<strong>ทำท่า OK หรือจีบนิ้ว</strong> ค้างไว้ 3 วินาที หันฝ่ามือหรือเอียงมือก็ได้<br><br><span style="font-size: 0.8em; opacity: 0.8; background: rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 20px;">(หรือคลิก/แตะที่นี่เพื่อเริ่มเกมทันที)</span></p>
            <div class="ar-match__progress-wrap">
                <div id="ready-progress-bar" class="ar-match__progress-bar"></div>
            </div>
            <div id="ready-countdown-text" class="ar-match__ready-countdown">3.0s</div>
            <button onclick="cancelReady()" class="ar-match__cancel-btn">ย้อนกลับ</button>
        </div>
        
         
        <div id="gameplay-screen" class="ar-match__gameplay-screen hidden">
             
            <div id="combo-display" class="ar-match__combo-display opacity-0 scale-50">
                <div style="display: flex; align-items: baseline; gap: 0.5rem; justify-content: center;">
                    <span class="ar-match__combo-title">Streak!</span>
                    <span id="combo-count" class="ar-match__combo-count">x2</span>
                </div>
                <div id="combo-score" class="ar-match__combo-score" style="font-size: 1.25rem; font-weight: 700; color: white; margin-top: 0.25rem; text-shadow: 0 2px 2px rgba(0,0,0,0.8);"></div>
            </div>
            
            <div id="heart-loss-display" class="ar-match__heart-anim ar-match__heart-anim--loss opacity-0 scale-50">
                <i class="fa-solid fa-heart-crack"></i>
                <span>-1</span>
            </div>

            <div id="heart-gain-display" class="ar-match__heart-anim ar-match__heart-anim--gain opacity-0 scale-50">
                <i class="fa-solid fa-heart"></i>
                <span>+1</span>
            </div>

             
            <div class="ar-match__dropzone-wrap">
                <span class="ar-match__dropzone-label">ช่องเป้าหมาย (Drop Zone)</span>
                <div id="question-letter-zone" class="ar-match__dropzone">
                    <div id="question-letter" class="ar-match__question-text ar-match__question-text--lg ar-match__font-fredoka">A</div>
                </div>
            </div>
            
             
            <div class="ar-match__options-wrap">
                <div class="ar-match__options-grid" id="options-grid">
                     
                </div>
            </div>
        </div>
        
        <div class="ar-match__footer-credits">
            © 2026 EdTech Workspace • พัฒนาโดย นายชิษณุพงศ์ วิหารธรรมเม
        </div>
    </main>

    
     
    <div id="result-screen" class="ar-match__result-screen hidden">
        <div class="ar-match__result-content">
            <div class="ar-match__result-left">
                <div class="ar-match__result-header">
                    <div class="ar-match__result-icon"><i class="fa-solid fa-square-check"></i></div>
                    <div id="result-title" class="ar-match__result-title">สุดยอดมาก! เล่นจบเกมแล้ว</div>
                </div>
                
                <div class="ar-match__result-grid">
                    <div class="ar-match__result-score-container">
                        <span class="ar-match__result-score-label">คะแนนรวม</span>
                        <div id="result-score" class="ar-match__result-score">
                            <span id="score-number">0</span>
                        </div>

                        <div class="ar-match__result-stat-grid">
                            <div class="ar-match__result-stat">
                                <i class="fa-solid fa-circle-check" style="color:#22c55e;"></i>
                                <span class="ar-match__result-stat-label">ตอบถูก</span>
                                <strong id="score-correct">0 / 0</strong>
                            </div>
                            <div class="ar-match__result-stat">
                                <i class="fa-regular fa-clock" style="color:#38bdf8;"></i>
                                <span class="ar-match__result-stat-label">เวลา</span>
                                <strong id="result-time">0s</strong>
                            </div>
                            <div class="ar-match__result-stat">
                                <i class="fa-solid fa-fire" style="color:#f97316;"></i>
                                <span class="ar-match__result-stat-label">Max Streak</span>
                                <strong id="score-max-combo">x0</strong>
                            </div>
                        </div>

                        <div id="score-breakdown" class="ar-match__combo-summary hidden" style="opacity:0;">
                            <span><i class="fa-solid fa-fire"></i> โบนัส Streak</span>
                            <strong id="score-time-bonus">+0</strong>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="ar-match__result-divider"></div>
            
            <div class="ar-match__result-right">
                <div id="new-record-badge" class="ar-match__record-badge hidden">
                    <i class="fa-solid fa-award"></i> สถิติใหม่! ทำเวลาที่ดีที่สุดสำเร็จ
                </div>
                
                 
                <div id="result-leaderboard-container" class="ar-match__result-leaderboard hidden" style="margin-bottom: 1rem; width: 100%;">
                    <h4 style="margin: 0 0 0.5rem 0; font-size: 1rem; color: #fff;"><i class="fa-solid fa-ranking-star"></i> อันดับคะแนนรอบนี้</h4>
                    <div id="result-mini-leaderboard" style="position: relative; background: rgba(0,0,0,0.2); border-radius: 8px; padding: 0.5rem; display: flex; flex-direction: column; gap: 4px; min-height: 100px;">
                        <div style="text-align:center; padding: 1rem; color: #aaa;">กำลังโหลดข้อมูล...</div>
                    </div>
                </div>
                
                <div id="leaderboard-save-zone" class="ar-match__save-zone hidden">
                     
                </div>
                
                <div class="custom-btn-container">
                    <button onclick="restartGame()" id="btn-restart" class="custom-btn custom-btn-primary">
                        <i class="fa-solid fa-rotate-left"></i> เล่นอีกครั้ง
                    </button>
                    <button onclick="exitGame()" id="btn-result-home" class="custom-btn custom-btn-secondary">
                        <i class="fa-solid fa-house"></i> กลับหน้าหลัก
                    </button>
                </div>
            </div>
        </div>
    </div>
    
     
    <div id="settings-modal" class="ar-match__modal-overlay hidden">
        <div class="ar-match__glass-card ar-match__modal">
            <div class="ar-match__modal-header">
                <div><i class="fa-solid fa-sliders"></i>ตั้งค่าเกม</div>
                <button onclick="closeSettingsModal()" class="ar-match__modal-close">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <hr class="ar-match__divider">
            <div class="ar-match__modal-body">
                <div class="ar-match__setting-item">
                    <label>
                        <span>ความไวในการจีบนิ้ว (Pinch Sensitivity)</span>
                        <span id="pinch-sens-text" class="ar-match__setting-val">ปานกลาง (0.25)</span>
                    </label>
                    <input type="range" id="pinch-sens-range" min="0.12" max="0.35" step="0.01" value="0.25" oninput="updatePinchSens(this.value)" class="ar-match__range-slider">
                    <div class="ar-match__range-labels">
                        <span>จีบชิดมาก (0.12)</span>
                        <span>จีบเบาๆ (0.35)</span>
                    </div>
                </div>
                <div class="ar-match__setting-item ar-match__setting-item--toggle">
                    <div>
                        <label>เสียงประกอบเอฟเฟกต์</label>
                        <span>เปิดเสียงบี๊บสังเคราะห์เวลาทำคำตอบ</span>
                    </div>
                    <div class="ar-match__audio-controls">
                        <button
                            type="button"
                            onclick="skipBgmTrack()"
                            id="bgm-skip-btn"
                            class="ar-match__skip-track-btn"
                            aria-label="เล่นเพลงถัดไป"
                            title="เล่นเพลงถัดไป"
                        >
                            <i class="fa-solid fa-forward-step" aria-hidden="true"></i>
                            <span>เพลงถัดไป</span>
                        </button>
                        <button
                            type="button"
                            onclick="toggleAudio()"
                            id="audio-toggle-btn"
                            class="ar-match__toggle-btn"
                            aria-label="เปิดหรือปิดเสียง"
                        >
                            <div class="ar-match__toggle-handle"></div>
                        </button>
                    </div>
                </div>
                <div class="ar-match__setting-item ar-match__setting-item--toggle">
                    <div>
                        <label>แสดงเส้นข้อต่อนิ้วมือ</label>
                        <span>วาดเส้นเชื่อมโยงข้อนิ้วมือสีนีออนทับบนกล้อง</span>
                    </div>
                    <button onclick="toggleSkeleton()" id="skeleton-toggle-btn" class="ar-match__toggle-btn">
                        <div class="ar-match__toggle-handle"></div>
                    </button>
                </div>
            </div>
            <hr class="ar-match__divider">
            <div class="ar-match__modal-footer">
                <button onclick="closeSettingsModal()" class="ar-match__save-btn">บันทึกการตั้งค่า</button>
            </div>
        </div>
    </div>

 
    <div id="double-or-nothing-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999999; justify-content: center; align-items: center; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(8px);">
        <div class="glass-card" style="max-width: 450px; text-align: center; padding: 3rem 2rem; background: rgba(255, 255, 255, 0.1); border-radius: 1rem; border: 1px solid rgba(255,255,255,0.2);">
            <div style="font-size: 4rem; color: #ff4081; margin-bottom: 1rem; animation: pulse 2s infinite;"><i class="fa-solid fa-fire"></i></div>
            <h2 style="color: white; margin-bottom: 1rem; font-size: 2rem; font-family: 'Kanit', sans-serif;">เดิมพันความเสี่ยง!</h2>
            <p style="color: rgba(255,255,255,0.8); margin-bottom: 2rem; font-family: 'Kanit', sans-serif;">คุณมีโอกาสทำคะแนน <strong>คูณ 3</strong> ในข้อนี้! แต่ถ้าตอบผิดหรือหมดเวลา คุณจะเสียหัวใจ <strong>2 ดวง</strong> ทันที<br><br>คุณต้องการใช้สิทธิ์นี้หรือไม่?</p>
            <div style="display: flex; gap: 1rem; width: 100%;">
                <button type="button" onclick="acceptDoubleOrNothing()" class="custom-btn" style="flex: 1; background: linear-gradient(135deg, #ff4081, #d500f9); color: white; font-weight: bold; border: none; box-shadow: 0 4px 15px rgba(255, 64, 129, 0.4);">
                    <i class="fa-solid fa-check"></i> ใช้สิทธิ์
                </button>
                <button type="button" onclick="declineDoubleOrNothing()" class="custom-btn" style="flex: 1; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: white; font-weight: bold;">
                    <i class="fa-solid fa-xmark"></i> ข้ามไปก่อน
                </button>
            </div>
        </div>
    </div>
</div>  

]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>ฝึกออกเสียง Phonics</title>
		<link>https://cwm.ac.th/2026/07/8285/</link>
		
		<dc:creator><![CDATA[ฝ่ายประชาสัมพันธ์]]></dc:creator>
		<pubDate>Tue, 07 Jul 2026 15:59:51 +0000</pubDate>
				<category><![CDATA[ภาษาต่างประเทศ]]></category>
		<category><![CDATA[เรียนรู้ออนไลน์]]></category>
		<guid isPermaLink="false">https://cwm.ac.th/?p=8285</guid>

					<description><![CDATA[]]></description>
										<content:encoded><![CDATA[<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script><div class="edtech-tools-wrapper">
    <header class="header">
        <a href="https://cwm.ac.th/" class="home-btn" title="กลับหน้าแรก">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
        </a>
        <h1>A-Z <span class="text-brand-pink">Phonics</span> Fun!</h1>
    </header>
    <main class="main-content">
        <div class="bg-blob-1"></div>
        <div class="bg-blob-2"></div>
        <div class="instruction-box">
            <h2 id="instructionText" class="instruction-text">
                Select a letter to learn!
            </h2>
        </div>
        <div class="stage-container">
            <div id="slideWrapper" class="slide-wrapper">
                <div id="flashcard" class="card-inner" onclick="flipCard()">
                     
                    <div class="card-front">
                        <button class="write-btn" onclick="openWritingModal(event)" title="Practice Writing">✏️</button>
                        <div id="mainLetter" class="main-letter" style="transform: translateY(0px);">?</div>
                        <div id="frontIllustration" class="front-illustration">✨</div>
                        <div id="exampleWordContainer" class="example-word-box" onclick="playWordSound(event)" title="Listen to word">
                            <span id="exampleWord" class="word-text"></span>
                            <div class="sound-icon">🔊</div>
                        </div>
                        <div id="thaiWord" class="thai-word"></div>
                    </div>
                     
                    <div class="card-back">
                        <div id="backMainLetter" class="main-letter" style="color: var(--brand-pink); font-size: clamp(1.75rem, 4vh, 2.5rem); line-height: 0.9; margin-bottom: -0.25rem;">?</div>
                        <div class="back-header">
                            Sound
                            <button onclick="playPhonicSound(event)" class="sound-btn-back" title="Listen to sound">🔊</button>
                        </div>
                        <div id="phonicText" class="phonic-text">/ /</div>
                        <div id="thaiPhonicText" class="thai-phonic-text"></div>
                        <div class="ipa-label">IPA</div>
                        <div id="ipaText" class="ipa-text">[ ]</div>
                        <div id="backIllustration" class="back-illustration"></div>
                        <div class="flip-hint">Tap anywhere else to flip back</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="controls-panel">
            <div class="controls-header">
                <h3 class="controls-title">Tap a letter</h3>
                <div class="toggle-group">
                    <button id="btnUpper" onclick="setDisplayMode('upper')" class="toggle-btn">A</button>
                    <button id="btnLower" onclick="setDisplayMode('lower')" class="toggle-btn">a</button>
                    <button id="btnBoth" onclick="setDisplayMode('both')" class="toggle-btn active">Aa</button>
                </div>
            </div>
            <div id="buttonContainer" class="alphabet-grid">
                 
            </div>
        </div>
    </main>
     
    <div id="writingModal" class="writing-modal">
        <div class="writing-modal-content">
            <button class="close-modal-btn" onclick="closeWritingModal()">✖</button>
            <h2 class="writing-title">ฝึกเขียน <span id="writingTargetLetter" class="text-brand-pink">Aa</span></h2>
            <div class="canvas-container">
                 
                 
                <svg class="bg-svg-letters" width="100%" height="100%" viewBox="0 0 200 180" preserveAspectRatio="xMidYMid meet">
                     
                    <defs>
                        <filter id="dotShadow" x="-30%" y="-30%" width="160%" height="160%">
                            <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000000" flood-opacity="0.3"/>
                        </filter>
                    </defs>
                     
                    <g id="svgGuideLinesGroup"></g>
                     
                    <g id="svgWatermarkGroup"></g>
                     
                    <g id="svgAutoDrawGroup"></g>
                </svg>
                <canvas id="writingCanvas"></canvas>
            </div>
            <div class="modal-actions">
                <button onclick="autoWriteLetter()" class="action-btn auto-write-btn">✨ เขียนให้ดู</button>
                <button onclick="clearCanvas()" class="action-btn clear-btn">🗑️ ลบกระดาน</button>
            </div>
        </div>
    </div>
     
    <div style="text-align: center; padding: 1.5rem 0; margin-top: auto; opacity: 1; color: #334155; position: relative; z-index: 10; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.025em; transition: opacity 0.3s; font-family: 'Kanit', sans-serif;">
        © 2026 EdTech Workspace • พัฒนาโดย นายชิษณุพงศ์ วิหารธรรมเม
    </div>
</div>



<p class="wp-block-paragraph"></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Body Part Quset</title>
		<link>https://cwm.ac.th/2025/09/7614/</link>
		
		<dc:creator><![CDATA[ฝ่ายประชาสัมพันธ์]]></dc:creator>
		<pubDate>Sat, 27 Sep 2025 07:00:59 +0000</pubDate>
				<category><![CDATA[ภาษาต่างประเทศ]]></category>
		<category><![CDATA[เรียนรู้ออนไลน์]]></category>
		<guid isPermaLink="false">https://cwm.ac.th/?p=7614</guid>

					<description><![CDATA[]]></description>
			<style id="elementor-post-7614">.elementor-7614 .elementor-element.elementor-element-3d5f111{--spacer-size:50px;}</style>							<content:encoded><![CDATA[		<div data-elementor-type="wp-page" data-elementor-id="7614" class="elementor elementor-7614" data-elementor-post-type="post">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-eb11b8b elementor-section-full_width elementor-section-height-default elementor-section-height-default" data-id="eb11b8b" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-21a795b" data-id="21a795b" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-3d5f111 elementor-widget elementor-widget-spacer" data-id="3d5f111" data-element_type="widget" data-e-type="widget" data-widget_type="spacer.default">
							<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
						</div>
				<div class="elementor-element elementor-element-a6093a8 elementor-widget elementor-widget-html" data-id="a6093a8" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
					<iframe src="/wp-content/uploads/body-part-game.html" width="100%" height="1105" frameborder="0" style="border: none; max-width: 100%;"></iframe>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Sentence Scramble Game</title>
		<link>https://cwm.ac.th/2025/06/7397/</link>
		
		<dc:creator><![CDATA[ฝ่ายประชาสัมพันธ์]]></dc:creator>
		<pubDate>Mon, 23 Jun 2025 01:51:23 +0000</pubDate>
				<category><![CDATA[ภาษาต่างประเทศ]]></category>
		<category><![CDATA[เรียนรู้ออนไลน์]]></category>
		<guid isPermaLink="false">https://cwm.ac.th/?page_id=7397</guid>

					<description><![CDATA[]]></description>
			<style id="elementor-post-7397">.elementor-7397 .elementor-element.elementor-element-3d5f111{--spacer-size:50px;}</style>							<content:encoded><![CDATA[		<div data-elementor-type="wp-page" data-elementor-id="7397" class="elementor elementor-7397" data-elementor-post-type="post">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-eb11b8b elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="eb11b8b" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-21a795b" data-id="21a795b" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-3d5f111 elementor-widget elementor-widget-spacer" data-id="3d5f111" data-element_type="widget" data-e-type="widget" data-widget_type="spacer.default">
							<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
						</div>
				<div class="elementor-element elementor-element-a6093a8 elementor-widget elementor-widget-html" data-id="a6093a8" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
					<iframe src="/wp-content/uploads/sentence_scramble_10q.html" width="100%" height="900px" frameborder="0" style="border: none; max-width: 100%;"></iframe>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
