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

Back

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

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

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

Title

Description

Keyword

Detail

<div style="font-family: 'Sarabun', sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.05);">
    <h2 style="color: #f39c12; border-bottom: 2px solid #e67e22; padding-bottom: 10px;">บทเรียนที่ 5: กำเนิดโปรแกรมเมอร์ (ปลุกชีพผังงานด้วย Scratch)</h2>
    <p><strong>🎯 เป้าหมาย:</strong> สามารถนำผังงาน (Flowchart) ที่ออกแบบไว้ ไปต่อบล็อกคำสั่งในโปรแกรม Scratch ได้จริง</p>
    <p><strong>💡 แนวคิด:</strong> Scratch จะแบ่งหมวดหมู่คำสั่งด้วย "สี" หน้าที่ของเราคือการหยิบบล็อกสีต่างๆ มาต่อกันให้เหมือนกับผังงานที่เราวาดไว้เป๊ะๆ!</p>

<h3 style="color: #27ae60;">1. พจนานุกรมแปลงผังงาน -> บล็อกสี Scratch</h3>
    <div style="background-color: #eafaf1; border-left: 5px solid #2ecc71; padding: 15px; margin-bottom: 20px;">
        <b>เปิดผังงานขึ้นมาดู แล้วเทียบสีตามนี้เลย:</b><br><br>
        🟡 <b>จุดเริ่มต้น (แคปซูล START):</b> ตรงกับหมวดเหตุการณ์ (สีเหลือง) -> บล็อก <code>เมื่อคลิกธงเขียว ⛳</code><br>
        🔵 <b>รับค่า/แสดงผล (สี่เหลี่ยมเอียง INPUT/PRINT):</b> ตรงกับหมวดตรวจจับ (สีฟ้า) -> บล็อก <code>ถาม...แล้วรอ</code> หรือหมวดรูปลักษณ์ (สีม่วง) -> บล็อก <code>พูด...</code><br>
        🟠 <b>ประมวลผล (สี่เหลี่ยมผืนผ้า SET):</b> ตรงกับหมวดตัวแปร (สีส้ม) -> บล็อก <code>ตั้งค่า [ตัวแปร] เป็น...</code>
    </div>

<h3 style="color: #34495e;">2. คลินิกแก้บั๊ก (เช็คให้ชัวร์ก่อนแชร์!)</h3>
    <div style="background-color: #ecf0f1; border-left: 5px solid #34495e; padding: 15px; margin-bottom: 20px;">
        ถ้ารันโปรแกรมแล้วผลลัพธ์ไม่ขึ้น ให้นักเรียนเช็ค 3 จุดนี้ครับ:<br>
        1. พิมพ์ชื่อตัวแปรถูกต้องทุกตัวอักษรไหม?<br>
        2. ลำดับของบล็อกคำสั่ง เรียงจากบนลงล่างตามลูกศรในผังงานเป๊ะๆ หรือยัง?<br>
        3. ใส่บล็อกเครื่องหมายคณิตศาสตร์ (+, -, *, /) สีเขียว ถูกช่องไหม?
    </div>

<h3 style="color: #c0392b;">3. เตรียมเสบียงโค้ด (Copy Embed)</h3>
    <div style="background-color: #fce4ec; border-left: 5px solid #e83e8c; padding: 15px; margin-bottom: 20px;">
        <div style="background-color: #ffe0e0; border-left: 5px solid #e74c3c; padding: 10px; margin-bottom: 15px;">
            🚨 <b>คำเตือนสำคัญระดับ 10 กะโหลก!:</b><br>
            เมื่อต่อบล็อกในเว็บ Scratch เสร็จแล้ว <b>ต้องกดปุ่ม "Share (แชร์)" สีส้มด้านบนเสมอ!</b> ไม่อย่างนั้นใครก็ดูผลงานเราไม่ได้ครับ
        </div>
        <b>วิธีเตรียมโค้ดเพื่อนำไปส่งในขั้นตอนต่อไป:</b><br>
        1. กดปุ่ม <b>Copy Link</b> (คัดลอกลิงก์) ที่มุมขวาล่างของ Scratch<br>
        2. คลิกเลือกคำว่า <b>Copy Embed</b> (คัดลอกโค้ดสำหรับฝัง)<br>
        3. <b>เก็บโค้ดที่คัดลอกไว้ให้ดี!</b> (สังเกตว่าจะขึ้นต้นด้วย <code><iframe...></code>) แล้วเตรียมนำไปวางใน <b>EP.6</b> ได้เลยครับ
    </div>
</div>