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

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, #880E4F 0%, #C2185B 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.5: แปลงร่างข้อมูลสู่ "สัญลักษณ์และตรรกะ"</h2>
        <p style="margin: 10px 0 0 0; font-size: 18px; color: #F8BBD0;">เปลี่ยนภาษาคน เป็นภาษาคอมพิวเตอร์!</p>
    </div>

<div style="margin-bottom: 40px;">
        <h3 style="color: #880E4F; border-left: 5px solid #FFCA28; padding-left: 15px; font-size: 22px;">1. ลดทอนรายละเอียดสู่ "สัญลักษณ์" (Symbols)</h3>
        <p>นักเรียนจำเรื่อง "เลนส์วิเศษแห่งการคิดเชิงนามธรรม" ใน EP.2 ได้ไหมครับ? ที่เราตัดเปลือกนอกออกให้เหลือแต่ "แก่น" ของปัญหา ขั้นตอนต่อไปคือการนำ "แก่น" นั้นมา <b>"แปลงร่าง" ให้เป็นสัญลักษณ์พื้นฐาน</b> ครับ เพื่อลดความซับซ้อนและทำให้ง่ายต่อการนำไปเขียนโปรแกรม</p>
        
        <p>ลองดูตัวอย่างการแปลงข้อมูลในชีวิตจริงสิครับ:</p>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin-top: 15px;">
            <div style="background: #FCE4EC; padding: 15px; border-radius: 10px; border: 1px solid #F8BBD0;">
                <strong style="color: #C2185B; font-size: 18px;">✅ ข้อมูลดิบ ( Raw Data)</strong>
                <p style="font-size: 14px; margin-top: 5px;">- นายเอ, อายุ 15 ปี, สูง 170 ซม., น้ำหนัก 65 กก.<br>
                - ปัญหาเปิดไม่ติด สีชมพู ลายเคส<br>
                - ค่าอาหาร กก.ละ 30 บาท จำนวน 5 กก.</p>
            </div>
            <div style="background: #E8F5E9; padding: 15px; border-radius: 10px; border: 1px solid #A5D6A7;">
                <strong style="color: #2E7D32; font-size: 18px;">➡️ สัญลักษณ์ (Symbolic Representation)</strong>
                <p style="font-size: 14px; margin-top: 5px;">- ตัวแปร (Variable): Name, Age, Height, Weight<br>
                - ขั้นตอน (Process) -> สัญลักษณ์สี่เหลี่ยมผืนผ้า<br>
                - การตัดสินใจ (Decision) -> สัญลักษณ์สี่เหลี่ยมข้าวหลามตัด</p>
            </div>
        </div>
        <p style="margin-top: 15px;">เห็นไหมครับว่า พอเราแปลงข้อมูลดิบให้เป็นสัญลักษณ์และตัวแปร ปัญหาที่ซับซ้อนก็ดูเรียบง่ายขึ้นมาก!</p>

<h3 style="color: #880E4F; border-left: 5px solid #FFCA28; padding-left: 15px; margin-top:30px; font-size: 22px;">2. เพิ่มความฉลาดด้วย "ตรรกะแบบมีทางเลือก" (Boolean Logic)</h3>
        <p>คอมพิวเตอร์ไม่ได้ทำงานตามคำสั่งไปเรื่อยๆ จนจบอย่างเดียวนะครับ แต่มันสามารถ <b>"ตัดสินใจเลือกทางเดิน"</b> ได้ด้วย! โดยใช้ตรรกะง่ายๆ ที่เรียกว่า <b>Boolean Logic</b> (True/False หรือ Yes/No) มาเป็นเงื่อนไขในการทำงาน</p>
        
        <p>ลองดูตัวอย่างตรรกะแบบมีทางเลือกในผังงานสิครับ:</p>
        
        <div style="background: #F3E5F5; border-left: 5px solid #9C27B0; padding: 15px 20px; border-radius: 0 10px 10px 0; margin-top: 15px;">
            <p style="margin: 0; color: #4A148C; font-size: 16px;"><b>ตัวอย่างตรรกะ Boolean:</b><br>
            `ถ้า (คะแนน >= 50) { แสดงผล "ผ่าน" } `<br>
            `ถ้าไม่ { แสดงผล "ไม่ผ่าน" }`</p>
        </div>
        <p style="margin-top: 15px;">ตรรกะแบบนี้แหละครับ ที่เราจะนำไปใช้ในขั้นตอน **"พิมพ์เขียวมหัศจรรย์" (Flowchart)** เพื่อกำหนดลำดับขั้นตอนการตัดสินใจของโปรแกรม!</p>

<h3 style="color: #880E4F; border-left: 5px solid #FFCA28; padding-left: 15px; margin-top:30px; font-size: 22px;">3. สู่เส้นทางนักออกแบบอัลกอริทึม</h3>
        <p>เมื่อนักเรียนผ่านบทเรียน Micro Learning ทั้ง 5 EP นี้ไปแล้ว แสดงว่านักเรียนมีความพร้อมทั้งภาคทฤษฎีและภาคปฏิบัติในระดับพื้นฐานเรียบร้อยแล้วครับ! ทีนี้ก็ถึงเวลาลงมือปฏิบัติจริงในขั้นตอน **"การออกแบบอัลกอริทึม 6 ขั้นตอน"** บนเว็บไซต์ Smartyquizkids.com เพื่อสร้างสรรค์แบบทดสอบที่มีคุณภาพตามเป้าหมายที่เราตั้งไว้กันนะครับ!</p>

<div style="background: #FCE4EC; border-left: 5px solid #C2185B; padding: 15px 20px; border-radius: 0 10px 10px 0; margin-top: 30px;">
            <p style="margin: 0; color: #880E4F; 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: #880E4F; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFCA28;">✍️ มินิควิซ ทบทวนความรู้ (EP.5)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; opacity: 0.9;">ลองแปลงข้อมูลสู่สัญลักษณ์และตรรกะกันดูนะ!</p>
        </div>
        
        <div style="border: 2px solid #880E4F; 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: #880E4F;">ข้อที่ 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;">ก. ช่วยให้นักเรียนสามารถจดจำข้อมูลดิบทั้งหมดได้ง่ายขึ้น</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: 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: #880E4F;">ข้อที่ 2: ในการเขียนผังงาน (Flowchart) สัญลักษณ์สี่เหลี่ยมข้าวหลามตัด มักถูกนำมาใช้แทนความหมายใด?</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;">ก. กระบวนการหรือขั้นตอนการประมวลผล (Process)</button>
                    <button onclick="checkAnswer(this, true, 'เก่งมากครับ! สี่เหลี่ยมข้าวหลามตัดคือสัญลักษณ์ของการตัดสินใจหรือเงื่อนไขแบบมีทางเลือก')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. การตัดสินใจหรือเงื่อนไขแบบมีทางเลือก (Decision)</button>
                    <button onclick="checkAnswer(this, false, 'วงรีคือสัญลักษณ์ของจุดเริ่มต้นหรือจุดสิ้นสุดครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. จุดเริ่มต้นหรือจุดสิ้นสุดของอัลกอริทึม (Start/End)</button>
                    <button onclick="checkAnswer(this, false, 'ลูกศรคือสัญลักษณ์ของทิศทางการไหลของข้อมูลครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ทิศทางการไหลของข้อมูลและการทำงาน (Flowline)</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: #880E4F;">ข้อที่ 3: "Boolean Logic" ในทางคอมพิวเตอร์ มีความหมายตรงกับข้อใดมากที่สุด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'การคำนวณเลขทศนิยมไม่เกี่ยวกับตรรกะแบบ Boolean จ้า')" 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, 'ยอดเยี่ยมครับ! Boolean Logic คือตรรกะแบบมีทางเลือก Yes/No, True/False หรือ Yes/No ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ตรรกะแบบมีทางเลือก Yes/No หรือ True/False</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: #880E4F;">ข้อที่ 4: หลังจากที่นักเรียนผ่านบทเรียน Micro Learning ทั้ง 5 EP ไปเรียบร้อยแล้ว แสดงว่านักเรียนมีความพร้อมสำหรับขั้นตอนใดต่อไปบนเว็บไซต์ 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, true, 'ถูกต้องที่สุดครับ! เรานำทฤษฎีมาลงมือปฏิบัติจริงในขั้นตอนการออกแบบอัลกอริทึม 6 ขั้นตอนบนเว็บไซต์ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. การลงมือปฏิบัติจริงในขั้นตอน "การออกแบบอัลกอริทึม 6 ขั้นตอน" บนเว็บไซต์</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>
    </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 = '#FCE4EC';
        btn.style.borderColor = '#C2185B';
        btn.style.color = '#880E4F';
        btn.style.opacity = '1';
        feedback.style.background = '#FCE4EC';
        feedback.style.color = '#880E4F';
        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>