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

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 15px rgba(0,0,0,0.08);">
    
    <div style="background: linear-gradient(135deg, #E65100 0%, #F57C00 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #FFECB3;">
        <h2 style="margin: 0; font-size: 30px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #FFECB3;">🌈 EP.4: "นามธรรม" ในชีวิตประจำวัน</h2>
        <p style="margin: 10px 0 0 0; font-size: 18px; color: #FFE082;">(Analogy & Symbols) แปลงเรื่องยากให้เป็นภาพจำ ด้วยการอุปมาอุปไมย!</p>
    </div>

<div style="margin-bottom: 40px;">
        <h3 style="color: #E65100; border-left: 5px solid #FFCA28; padding-left: 15px; font-size: 22px;">1. ลดทอนรายละเอียดด้วย "สัญลักษณ์"</h3>
        <p>นักเรียนรู้หรือไม่ครับว่า เราทุกคนใช้ "การคิดเชิงนามธรรม" กันอยู่ทุกวัน! ตัวอย่างที่เห็นชัดที่สุดคือ <b>การใช้อีโมจิ (Emoji)</b> ในการแชตครับ แทนที่เราจะพิมพ์ข้อความยาวๆ ว่า <i>"ตอนนี้ฉันรู้สึกมีความสุขและตลกมากจนน้ำตาไหล"</i> เราแค่ส่งสัญลักษณ์ 😂 ไปตัวเดียว เพื่อนก็เข้าใจความหมายทันที นี่แหละครับคือการตัดรายละเอียดแล้วเหลือไว้แค่ "แก่น" ของอารมณ์</p>
        
        <h3 style="color: #E65100; border-left: 5px solid #FFCA28; padding-left: 15px; margin-top:30px; font-size: 22px;">2. การคัดกรองข้อมูลในชีวิตจริง</h3>
        <p>สมมติว่าคุณครูต้องการประเมิน <b>"ระดับความมั่นคงทางกาย"</b> ของนักเรียน ข้อมูลประวัติของนักเรียนมีเยอะมาก ทั้งชื่อเล่น งานอดิเรก สีที่ชอบ หรือรายการอาหารที่กินเมื่อเช้า... แต่ถ้าเราใช้การคิดเชิงนามธรรม เราจะ "ตัด" ข้อมูลเหล่านั้นทิ้ง แล้ว "เลือก" เก็บเฉพาะตัวแปร (Variables) ที่จำเป็นมาให้คะแนน เช่น:</p>
        
        <div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px;">
            <div style="background: #FFF3E0; padding: 10px 15px; border-radius: 20px; border: 1px solid #FFE0B2; color: #E65100; font-weight: bold;">⚖️ น้ำหนัก / ส่วนสูง</div>
            <div style="background: #FFF3E0; padding: 10px 15px; border-radius: 20px; border: 1px solid #FFE0B2; color: #E65100; font-weight: bold;">🚴 พาหนะที่ใช้เดินทาง</div>
            <div style="background: #FFF3E0; padding: 10px 15px; border-radius: 20px; border: 1px solid #FFE0B2; color: #E65100; font-weight: bold;">📏 ระยะทางจากบ้านมาโรงเรียน</div>
        </div>
        <p style="margin-top: 15px;">การเลือกเฉพาะตัวแปรเหล่านี้มาคำนวณ จะช่วยให้โปรแกรมเมอร์เขียนสูตรแก้ปัญหาได้อย่างแม่นยำและไม่สับสนครับ</p>

<h3 style="color: #E65100; border-left: 5px solid #FFCA28; padding-left: 15px; margin-top:30px; font-size: 22px;">3. ทักษะการอุปมาอุปไมย (Analogy)</h3>
        <p>การอุปมาอุปไมย คือการ <b>"เปรียบเทียบสิ่งหนึ่งกับอีกสิ่งหนึ่ง"</b> ที่ดูเหมือนจะไม่เกี่ยวข้องกันเลย แต่มีความหมายหรือหลักการทำงาน (แก่น) คล้ายคลึงกัน ทักษะนี้ช่วยให้เราเข้าใจเรื่องยากๆ ได้ง่ายขึ้นครับ เช่น <i>"เรือนแพ คู่กับ พิษณุโลก"</i> ถ้าเปรียบเทียบแบบเดียวกัน <i>"รถม้า ก็ต้องคู่กับ ลำปาง"</i> เป็นต้น</p>
        <p>🌟 <b>รู้หรือไม่?</b> ในเว็บไซต์ Smartyquizkids.com เราก็ใช้การอุปมาอุปไมยครับ! เราเปรียบเทียบ <b>"การเขียนโปรแกรม"</b> ว่าเหมือนกับ <b>"การทำอาหาร"</b> (ข้อมูลเข้า = วัตถุดิบ, ประมวลผล = วิธีทำ) เพื่อให้นักเรียนเห็นภาพการทำงานของระบบได้ชัดเจนที่สุดนั่นเอง!</p>

<div style="background: #FFF8E1; border-left: 5px solid #F57F17; padding: 15px 20px; border-radius: 0 10px 10px 0; margin-top: 30px;">
            <p style="margin: 0; color: #E65100; font-size: 16px;">ความรู้ที่นักเรียนได้ศึกษาจากบทเรียนนี้ จะเป็นความรู้พื้นฐานที่สำคัญ ที่นักเรียนต้องมีติดตัวไป เพื่อนำไปเรียนรู้เรื่อง <b>การออกแบบอัลกอริทึม 6 ขั้นตอน</b> และนำความรู้ภาคทฤษฎีที่ได้ศึกษามา นำไปเป็นความรู้สำหรับการสร้างแบบทดสอบเพื่อทบทวนความรู้ความเข้าใจจากเรื่องที่ได้เรียน ซึ่งเป็นอีกหนึ่งกิจกรรมบนเว็บไซต์ <b>Smartyquizkids.com</b> ที่ครูต้องการให้นักเรียนได้ฝึกทักษะการตั้งคำถามครับ</p>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #E65100; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFECB3;">✍️ มินิควิซ ทบทวนความรู้ (EP.4)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; opacity: 0.9;">ลองเปรียบเทียบและหาคำตอบที่ถูกต้องดูนะ!</p>
        </div>
        
        <div style="border: 2px solid #E65100; 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: #E65100;">ข้อที่ 1: การใช้อีโมจิ (Emoji) รูปหน้าโกรธ 😡 ในการพิมพ์แชต จัดเป็นการใช้ทักษะใดในแนวคิดเชิงคำนวณ?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'การออกแบบขั้นตอนคือการวางแผน 1-2-3 ครับ แต่นี่คือการใช้สัญลักษณ์แทนความหมาย')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. การออกแบบขั้นตอน (Algorithm Design)</button>
                    <button onclick="checkAnswer(this, true, 'ยอดเยี่ยมครับ! มันคือการตัดรายละเอียดคำพูดที่ยาวเหยียดทิ้ง แล้วใช้สัญลักษณ์สื่อถึงแก่นของอารมณ์แทนครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. การคิดเชิงนามธรรม (Abstraction)</button>
                    <button onclick="checkAnswer(this, false, 'การแยกย่อยคือการแตกปัญหาใหญ่เป็นปัญหาย่อยครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. การแยกย่อย (Decomposition)</button>
                    <button onclick="checkAnswer(this, false, 'การทำงานแบบวนซ้ำคือโปรแกรมที่ทำงานแบบเดิมซ้ำๆ ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. การทำงานแบบวนซ้ำ (Looping)</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: #E65100;">ข้อที่ 2: หากต้องการเขียนโปรแกรมคำนวณ "ค่าดัชนีมวลกาย (BMI)" ข้อมูลใดที่โปรแกรมเมอร์ "ไม่จำเป็น" ต้องนำมาประมวลผล?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'น้ำหนักเป็นตัวแปรหลักที่ต้องนำมาใช้คำนวณ BMI เลยครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. น้ำหนักตัวของนักเรียน</button>
                    <button onclick="checkAnswer(this, false, 'ส่วนสูงเป็นอีกหนึ่งตัวแปรสำคัญในสูตรการคำนวณ BMI ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ส่วนสูงของนักเรียน</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! กีฬาที่ชอบไม่มีผลต่อสูตรการคำนวณตัวเลข BMI จึงเป็นข้อมูลที่ควรตัดทิ้งครับ')" 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: #E65100;">ข้อที่ 3: "การอุปมาอุปไมย (Analogy)" มีประโยชน์อย่างไรในการแก้ปัญหา?</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, 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>
                    <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: 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: #E65100;">ข้อที่ 4: ในเว็บไซต์ Smartyquizkids.com เราใช้หลักการอุปมาอุปไมย เปรียบเทียบ "การเขียนโปรแกรม" กับสิ่งใดในชีวิตประจำวัน?</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, true, 'ถูกต้องเลย! เราเปรียบเทียบกับการทำอาหาร (มีวัตถุดิบและวิธีทำ) ในขั้นตอนที่ 2: สูตรลับวัตถุดิบ ครับ')" 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>
    </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 = '#FFF3E0';
        btn.style.borderColor = '#F57C00';
        btn.style.color = '#E65100';
        btn.style.opacity = '1';
        feedback.style.background = '#FFF3E0';
        feedback.style.color = '#E65100';
        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>