แก้ไขบทเรียน

Back

รูปสินค้า (850 x 600 / .jpg , .png) *

ประเภทบทเรียน

ประเภทบทเรียนย่อย

Title

Description

Keyword

Detail

<div class="lesson-container" style="font-family: 'Sarabun', 'Prompt', sans-serif; line-height: 1.6; color: #333; max-width: 900px; margin: auto; background: #ffffff; padding: 20px; border-radius: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
    
    <div style="background: linear-gradient(135deg, #673AB7 0%, #9C27B0 50%, #E91E63 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #4A148C;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); color: #FFF;">🎮 หน่วยที่ 1 EP.3: สนุกกับเกมการแก้ปัญหา</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #F8BBD0; font-weight: bold;">บันไดงู, เททริส และ OX!</p>
    </div>

<div style="margin-bottom: 40px;">
        
        <p style="font-size: 18px;">รู้หรือไม่ว่า? การเล่นเกมไม่ได้มีแค่ความสนุกเท่านั้น แต่เกมหลายชนิดถูกออกแบบมาให้เราได้ฝึก <strong>"การแก้ปัญหาและคิดอย่างเป็นระบบ"</strong> ตามเงื่อนไขของเกม วันนี้เราจะมาถอดรหัสอัลกอริทึมที่ซ่อนอยู่ในเกมยอดฮิตกันครับ!</p>

<h3 style="color: #4A148C; border-left: 5px solid #E91E63; padding-left: 15px; font-size: 22px; margin-top: 30px;">🐍 1. เกมบันไดงู (Snakes and Ladders)</h3>
        <p>เกมกระดานสุดคลาสสิกที่มีผู้เล่นตั้งแต่ 2 คนขึ้นไป อัลกอริทึมของการเล่นเกมนี้ คือการทอดลูกเต๋าแล้วเดินตามแต้มที่ได้ แต่ความสนุกอยู่ที่ <strong>"เงื่อนไข (Condition)"</strong> ที่กำหนดไว้บนกระดานครับ:</p>
        
        <div style="background: #F3E5F5; padding: 20px; border-radius: 12px; border: 1px solid #CE93D8; margin-top: 15px;">
            <ul style="margin-top: 0; padding-left: 20px; color: #4A148C; margin-bottom: 0; line-height: 1.8; font-size: 15px;">
                <li><strong>เงื่อนไขที่ 1:</strong> 🪜 ถ้าเดินไปหยุดที่ช่องที่มี <strong>"บันได"</strong> พอดี 👉 <em>ให้เดินขึ้นบันไดไปชั้นบนได้เลย (ลัดทาง)</em></li>
                <li><strong>เงื่อนไขที่ 2:</strong> 🐍 ถ้าเดินไปหยุดที่ช่องที่มี <strong>"ปากงู"</strong> 👉 <em>ต้องลื่นตกลงมายังช่องที่เป็นหางงูทันที (ถอยหลัง)</em></li>
                <li><strong>เป้าหมาย:</strong> ผู้เล่นคนใดเดินทางไปถึงช่อง "เส้นชัย (Finish)" ได้ก่อน จะเป็นผู้ชนะ!</li>
            </ul>
        </div>

<h3 style="color: #4A148C; border-left: 5px solid #E91E63; padding-left: 15px; font-size: 22px; margin-top: 35px;">🧱 2. เกมเททริส (Tetris)</h3>
        <p>เกมต่อบล็อกปริศนา โดยจะมีบล็อกรูปทรงต่างๆ (ประกอบจากสี่เหลี่ยม 4 ชิ้น) สุ่มตกลงมาจากด้านบน เกมนี้ผู้เล่นต้องฝึกใช้ความคิดเพื่อแก้ปัญหาในพื้นที่จำกัดครับ</p>
        
        <div style="display: flex; flex-direction: column; gap: 15px; margin-top: 15px;">
            <div style="background: #E8EAF6; padding: 20px; border-radius: 12px; border-left: 6px solid #3F51B5;">
                <strong style="color: #1A237E; font-size: 18px;">อัลกอริทึมการเล่นเททริส</strong><br>
                <p style="font-size: 15px; margin-top: 5px; margin-bottom: 0;">ผู้เล่นต้อง <strong>"หมุนและเลื่อน"</strong> บล็อกที่ตกลงมาให้ไปต่อกันที่พื้นด้านล่าง โดยมีเงื่อนไขว่า <em>"ต้องเรียงบล็อกให้เต็มแถวแนวนอนโดยไม่มีช่องโหว่"</em> เมื่อแถวเต็ม บล็อกแถวนั้นจะหายไปและได้คะแนน แต่ถ้าเรียงพลาดจนบล็อกล้นทะลุขอบจอด้านบน จะถือว่า <strong>Game Over</strong> ทันที!</p>
            </div>
        </div>

<h3 style="color: #4A148C; border-left: 5px solid #E91E63; padding-left: 15px; font-size: 22px; margin-top: 35px;">❌⭕ 3. เกม OX (Tic-Tac-Toe)</h3>
        <p>เกมกระดาน 9 ช่อง (3x3) ที่ผลัดกันเขียนเครื่องหมาย O และ X ลงในตาราง เกมนี้ไม่ได้พึ่งพาดวง แต่ต้องใช้ <strong>"การคาดการณ์และวางแผนล่วงหน้า"</strong> หากใครสามารถเรียงเครื่องหมายของตัวเองติดกัน 3 ตัว (แนวตั้ง แนวนอน หรือแนวทแยง) ได้ก่อน จะเป็นผู้ชนะครับ</p>

<div style="background: #FFF3E0; padding: 15px; border-radius: 8px; margin-top: 20px; font-size: 15px; color: #E65100; text-align: center; border: 1px dashed #FF9800;">
            <em>💡 <strong>สรุป:</strong> การเล่นเกมเหล่านี้เป็นประจำ จะช่วยให้นักเรียนมีทักษะการดักจับเงื่อนไข คาดเดาผลลัพธ์ และแก้ปัญหาเฉพาะหน้าได้เก่งขึ้น ซึ่งนำไปใช้ในชีวิตจริงได้ด้วยครับ!</em>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #4A148C 0%, #E91E63 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">🧩 มินิควิซ ทบทวนความรู้ EP.3</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #F8BBD0;">มาทบทวนกฎกติกาและอัลกอริทึมของเกมกัน!</p>
        </div>
        
        <div style="border: 2px solid #E91E63; border-top: none; padding: 25px; border-radius: 0 0 12px 12px; background: #fafafa;">
            
            <div class="question-item" style="margin-bottom: 25px; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #4A148C;">ข้อที่ 1: ใน "เกมบันไดงู" หากนักเรียนทอดลูกเต๋าแล้วเดินไปตกที่ช่อง "ปากงู" เงื่อนไขของอัลกอริทึมจะสั่งให้เกิดอะไรขึ้น?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'ไม่ได้ถูกข้ามตานะครับ ต้องถอยหลังต่างหาก')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ผู้เล่นจะถูกทำโทษให้หยุดเล่น 1 ตา</button>
                    <button onclick="checkAnswer(this, false, 'อันนี้คือเงื่อนไขของการตกช่องบันไดครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ผู้เล่นจะได้เดินลัดขึ้นไปยังชั้นที่สูงกว่า</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! ตามกฎของเกมตกช่องปากงูเมื่อไหร่ ต้องลื่นไถลตกลงมาที่ช่องหางงูทันทีครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ผู้เล่นจะต้องถอยหลังลงมายังช่องที่เป็นหางงู</button>
                    <button onclick="checkAnswer(this, false, 'ผู้เล่นไม่สามารถเลือกเองได้ครับ ต้องทำตามกฎของกระดาน')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ผู้เล่นสามารถเลือกได้ว่าจะขึ้นบันไดหรือลงหางงู</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

<div class="question-item" style="margin-bottom: 25px; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #4A148C;">ข้อที่ 2: เป้าหมายหลัก (Goal) ในการเอาชนะ "เกมเททริส (Tetris)" คืออะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'ถ้าต่อจนถึงขอบจอด้านบน จะทำให้ Game Over นะครับ!')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. การเรียงบล็อกต่อกันให้สูงถึงขอบจอด้านบนให้เร็วที่สุด</button>
                    <button onclick="checkAnswer(this, true, 'ยอดเยี่ยมครับ! เราต้องพยายามหมุนบล็อกให้ลงล็อก และเรียงให้เต็มแถวแนวนอนเพื่อทำลายบล็อกทิ้งและเก็บคะแนนครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. การเรียงบล็อกให้เต็มแถวแนวนอนโดยไม่มีช่องโหว่</button>
                    <button onclick="checkAnswer(this, false, 'บล็อกในเกมนี้จะเป็นรูปทรงที่ประกอบจาก 4 ชิ้นส่วนครับ เรียงเป็นวงกลมไม่ได้')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. การต่อบล็อกให้เป็นรูปวงกลมที่สมบูรณ์</button>
                    <button onclick="checkAnswer(this, false, 'สีไม่ใช่ตัวกำหนดในการทำลายบล็อกของเกมเททริสคลาสสิกครับ ต้องเรียงให้เต็มแถว')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. การสะสมบล็อกสีเดียวกันให้ได้ 3 ชิ้นติดกัน</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

<div class="question-item" style="margin-bottom: 0; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #4A148C;">ข้อที่ 3: การเล่นเกม OX และเกมเศรษฐี ช่วยฝึกทักษะใดที่เป็นประโยชน์ในการดำเนินชีวิตประจำวันมากที่สุด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'การเล่นเกมกระดานไม่ได้ช่วยเรื่องกล้ามเนื้อโดยตรงครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ฝึกความแข็งแรงของกล้ามเนื้อมือ</button>
                    <button onclick="checkAnswer(this, false, 'ไม่เกี่ยวกับการวาดรูปครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ฝึกทักษะการวาดภาพและระบายสี</button>
                    <button onclick="checkAnswer(this, false, 'เราไม่ควรพึ่งพาดวงเพียงอย่างเดียวในการแก้ปัญหานะครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ฝึกการเสี่ยงโชคและพึ่งพาดวงชะตา</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! เกมเหล่านี้ต้องใช้ตรรกะ การคาดเดาใจคู่แข่ง และการวางแผนเป็นลำดับขั้นตอน (อัลกอริทึม) ซึ่งเป็นทักษะสำคัญในการแก้ปัญหาชีวิตจริงครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ฝึกการคิดอย่างเป็นระบบ การคาดการณ์ และการวางแผน</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

</div>
    </div>

</div>

buttons.forEach(b => {
        b.disabled = true;
        b.style.opacity = '0.6';
    });

feedback.style.display = 'block';
    feedback.style.padding = '12px';
    feedback.style.borderRadius = '8px';
    feedback.style.marginTop = '15px';

if(isCorrect) {
        btn.style.background = '#F3E5F5';
        btn.style.borderColor = '#9C27B0';
        btn.style.color = '#4A148C';
        btn.style.opacity = '1';
        feedback.style.background = '#F3E5F5';
        feedback.style.color = '#4A148C';
        feedback.innerHTML = "✅ ถูกต้องครับ! " + msg;
    } else {
        btn.style.background = '#FFEBEE';
        btn.style.borderColor = '#C62828';
        btn.style.color = '#B71C1C';
        btn.style.opacity = '1';
        feedback.style.background = '#FFEBEE';
        feedback.style.color = '#B71C1C';
        feedback.innerHTML = "❌ ยังไม่ใช่นะครับ: " + msg;
    }
}
</script>