ตั้งค่า

ตัวอย่าง

กำหนดวัตถุประสงค์ของปัญหา (Objective)

<div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); margin-bottom: 20px; border-left: 6px solid #f6c23e; line-height: 1.6; font-size: 15px;">
        <strong>วัตถุประสงค์:</strong> เพื่อสร้างโปรแกรมที่สามารถ 
        <span style="color: #e74a3b; font-weight: bold; background-color: #ffeaea; padding: 2px 5px; border-radius: 4px;">รับค่าตัวเลข 2 จำนวนจากผู้ใช้</span> แล้ว 
        <span style="color: #f6c23e; font-weight: bold; background-color: #fff8e1; padding: 2px 5px; border-radius: 4px;">นำมาบวกกัน</span> และ 
        <span style="color: #1cc88a; font-weight: bold; background-color: #e3fbed; padding: 2px 5px; border-radius: 4px;">แสดงผลรวมนั้นออกมา</span>
    </div>

<h4 style="font-size: 15px; color: #333; margin-bottom: 10px;">🛠️ โครงสร้างสำหรับนำไปปรับใช้:</h4>
    <div style="background-color: #ffffff; padding: 15px; border-radius: 8px; border: 1px solid #e3e6f0; font-size: 14px;">
        <div style="margin-bottom: 8px;">
            <span style="font-size: 18px; vertical-align: middle;">📥</span> 
            <strong>ส่วนที่ 1:</strong> เพื่อสร้างโปรแกรมที่ <span style="color: #e74a3b; border-bottom: 1px dashed #e74a3b;">[ระบุข้อมูลที่ต้องรับเข้า / Input]</span>
        </div>
        <div style="margin-bottom: 8px;">
            <span style="font-size: 18px; vertical-align: middle;">⚙️</span> 
            <strong>ส่วนที่ 2:</strong> แล้วนำมา <span style="color: #f6c23e; border-bottom: 1px dashed #f6c23e;">[ระบุวิธีการประมวลผล / Process]</span>
        </div>
        <div>
            <span style="font-size: 18px; vertical-align: middle;">🖥️</span> 
            <strong>ส่วนที่ 3:</strong> และ <span style="color: #1cc88a; border-bottom: 1px dashed #1cc88a;">[ระบุผลลัพธ์ที่ต้องการ / Output]</span>
        </div>
    </div>
    
    <p style="text-align: center; margin-top: 15px; margin-bottom: 0; font-size: 13px; color: #858796;">
        <em>ลองนำโครงสร้างนี้ไปเขียนกับสถานการณ์ของน้องๆ ดูนะครับ!</em>
    </p>

</div>

กำหนดรูปแบบผลลัพธ์ที่ต้องการ

<div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 15px; border-left: 6px solid #1cc88a; line-height: 1.6;">
        <div style="font-weight: bold; color: #1cc88a; font-size: 15px; margin-bottom: 5px;">
            <span style="font-size: 18px; vertical-align: middle;">🖥️</span> 1. รูปแบบผลลัพธ์ที่ต้องการ (Output)
        </div>
        <div style="font-size: 14px; padding-left: 28px; color: #444;">
            คือ <span style="background-color: #e3fbed; padding: 2px 5px; border-radius: 4px; font-weight: bold; color: #158b60;">ตัวเลขผลรวม</span> (ของตัวเลขทั้ง 2 จำนวน)
        </div>
    </div>

<div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 15px; border-left: 6px solid #e74a3b; line-height: 1.6;">
        <div style="font-weight: bold; color: #e74a3b; font-size: 15px; margin-bottom: 5px;">
            <span style="font-size: 18px; vertical-align: middle;">📥</span> 2. ข้อมูลนำเข้า (Input)
        </div>
        <div style="font-size: 14px; padding-left: 28px; color: #444;">
            คือ <span style="background-color: #ffeaea; padding: 2px 5px; border-radius: 4px; font-weight: bold; color: #b1352a;">ตัวเลขจำนวนที่ 1</span> และ <span style="background-color: #ffeaea; padding: 2px 5px; border-radius: 4px; font-weight: bold; color: #b1352a;">ตัวเลขจำนวนที่ 2</span>
        </div>
    </div>

<div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 20px; border-left: 6px solid #f6c23e; line-height: 1.6;">
        <div style="font-weight: bold; color: #d8a018; font-size: 15px; margin-bottom: 5px;">
            <span style="font-size: 18px; vertical-align: middle;">⚙️</span> 3. ข้อมูลที่ใช้ในการแก้ปัญหา (Process)
        </div>
        <div style="font-size: 14px; padding-left: 28px; color: #444;">
            คือ การนำ <span style="background-color: #fff8e1; padding: 2px 5px; border-radius: 4px; font-weight: bold; color: #b78611;">ตัวเลขจำนวนที่ 1 มาบวก (+) กับ ตัวเลขจำนวนที่ 2</span>
        </div>
    </div>

<h4 style="font-size: 14px; color: #333; margin-bottom: 10px;">🛠️ เทคนิคการตั้งคำถามกับตัวเอง:</h4>
    <div style="background-color: #ffffff; padding: 12px 15px; border-radius: 8px; border: 1px solid #e3e6f0; font-size: 13px;">
        <ul style="margin: 0; padding-left: 20px; color: #555; line-height: 1.6;">
            <li style="margin-bottom: 6px;"><strong>Output:</strong> "สุดท้ายแล้วโปรแกรมต้องแสดงค่าอะไรออกมาให้เราเห็น?"</li>
            <li style="margin-bottom: 6px;"><strong>Input:</strong> "ผู้ใช้ต้องพิมพ์ข้อมูลอะไรเข้าไปให้โปรแกรมคิดบ้าง?"</li>
            <li><strong>Process:</strong> "โปรแกรมต้องเอา Input ไปทำอะไร (บวก ลบ คูณ หาร) ถึงจะได้ Output ออกมา?"</li>
        </ul>
    </div>

</div>

กำหนดข้อมูลนำเข้า

<div style="font-family: 'Prompt', 'Kanit', sans-serif; background-color: #f8faff; border: 2px dashed #e74a3b; border-radius: 12px; padding: 20px; color: #333; max-width: 600px; margin: 0 auto;">
    <h3 style="color: #e74a3b; margin-top: 0; text-align: center; font-size: 18px;">
        📥 แนวทางการกำหนดข้อมูลนำเข้า (Input)
    </h3>
    <p style="font-size: 14px; text-align: center; color: #555; margin-bottom: 20px;">
        <strong>สถานการณ์ต่อเนื่อง:</strong> หาผลรวมของตัวเลข 2 จำนวน
    </p>
    <div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 15px; border-left: 6px solid #e74a3b; line-height: 1.6;">
        <div style="font-size: 15px; color: #444;">
            <strong>ตัวอย่างการเขียน:</strong> <br>
            <span style="background-color: #ffeaea; padding: 2px 5px; border-radius: 4px; font-weight: bold; color: #b1352a;">ตัวเลขจำนวนที่ 1, ตัวเลขจำนวนที่ 2</span>
        </div>
    </div>
    <div style="background-color: #ffffff; padding: 12px 15px; border-radius: 8px; border: 1px solid #e3e6f0; font-size: 13px;">
        <strong style="color: #333;">💡 เทคนิคการคิด:</strong> 
        <span style="color: #555;">ให้ถามตัวเองว่า "เพื่อให้ได้ผลลัพธ์นั้น เราต้องป้อนข้อมูลอะไรเข้าไปในโปรแกรมบ้าง?"</span>
    </div>
</div>

กำหนดข้อมูลอื่นๆ ที่ใช้ในการแก้ปัญหา

<div style="font-family: 'Prompt', 'Kanit', sans-serif; background-color: #f8faff; border: 2px dashed #f6c23e; border-radius: 12px; padding: 20px; color: #333; max-width: 600px; margin: 0 auto;">
    <h3 style="color: #d8a018; margin-top: 0; text-align: center; font-size: 18px;">
        ⚙️ แนวทางการกำหนดข้อมูลที่ใช้แก้ปัญหา (Process/Variables)
    </h3>
    <p style="font-size: 14px; text-align: center; color: #555; margin-bottom: 20px;">
        <strong>สถานการณ์ต่อเนื่อง:</strong> หาผลรวมของตัวเลข 2 จำนวน
    </p>
    <div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 15px; border-left: 6px solid #f6c23e; line-height: 1.6;">
        <div style="font-size: 15px; color: #444;">
            <strong>ตัวอย่างการเขียน:</strong> <br>
            <span style="background-color: #fff8e1; padding: 2px 5px; border-radius: 4px; font-weight: bold; color: #b78611;">ตัวแปรเก็บตัวเลขที่ 1 (number1), ตัวแปรเก็บตัวเลขที่ 2 (number2), ตัวแปรเก็บผลรวม (sum)</span>
        </div>
    </div>
    <div style="background-color: #ffffff; padding: 12px 15px; border-radius: 8px; border: 1px solid #e3e6f0; font-size: 13px;">
        <strong style="color: #333;">💡 เทคนิคการคิด:</strong> 
        <span style="color: #555;">ให้ถามตัวเองว่า "เราต้องสร้าง 'กล่องเก็บของ' หรือตัวแปรอะไรบ้างเพื่อใช้เก็บข้อมูลและการคำนวณ?"</span>
    </div>
</div>

ระบุข้อมูลทั้งหมดที่ได้จากการแลกเปลี่ยนกับเพื่อนและจากการสืบค้นข้อมูล

<div style="font-family: 'Prompt', 'Kanit', sans-serif; background-color: #f8faff; border: 2px dashed #36b9cc; border-radius: 12px; padding: 20px; color: #333; max-width: 600px; margin: 0 auto;">
    <h3 style="color: #2c9faf; margin-top: 0; text-align: center; font-size: 18px;">
        🔍 แนวทางการระบุข้อมูลที่สืบค้นเพิ่มเติม
    </h3>
    <p style="font-size: 14px; text-align: center; color: #555; margin-bottom: 20px;">
        <strong>สถานการณ์ต่อเนื่อง:</strong> หาผลรวมของตัวเลข 2 จำนวน
    </p>
    <div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 15px; border-left: 6px solid #36b9cc; line-height: 1.6;">
        <div style="font-size: 14px; color: #444;">
            <strong>ตัวอย่างข้อมูลที่สืบค้นได้:</strong> <br>
            <ul style="margin-top: 8px; margin-bottom: 0; padding-left: 20px;">
                <li style="margin-bottom: 5px;"><span style="background-color: #e2f8fa; padding: 2px 5px; border-radius: 4px; font-weight: bold; color: #1f8997;">สูตรคณิตศาสตร์:</span> ผลรวม = ตัวเลขจำนวนที่ 1 + ตัวเลขจำนวนที่ 2</li>
                <li><span style="background-color: #e2f8fa; padding: 2px 5px; border-radius: 4px; font-weight: bold; color: #1f8997;">สัญลักษณ์ผังงานที่ต้องใช้:</span> สี่เหลี่ยมด้านขนาน (รับค่า/แสดงผล) และ สี่เหลี่ยมผืนผ้า (ประมวลผล)</li>
            </ul>
        </div>
    </div>
    <div style="background-color: #ffffff; padding: 12px 15px; border-radius: 8px; border: 1px solid #e3e6f0; font-size: 13px;">
        <strong style="color: #333;">💡 เทคนิคการคิด:</strong> 
        <span style="color: #555;">ถามตัวเองว่า "เราต้องรู้อะไรเพิ่มอีกบ้างเพื่อให้คอมพิวเตอร์ทำงานนี้ได้? (เช่น สูตรการคำนวณเฉพาะทาง หรือสัญลักษณ์ที่ถูกต้อง)"</span>
    </div>
</div>

ระบุลักษณะรูปแบบของผังงานของโปรแกรม

<div style="font-family: 'Prompt', 'Kanit', sans-serif; background-color: #f8faff; border: 2px dashed #6f42c1; border-radius: 12px; padding: 20px; color: #333; max-width: 600px; margin: 0 auto;">
    <h3 style="color: #5a32a3; margin-top: 0; text-align: center; font-size: 18px;">
        🛤️ แนวทางการระบุรูปแบบอัลกอริทึม
    </h3>
    <p style="font-size: 14px; text-align: center; color: #555; margin-bottom: 20px;">
        <strong>สถานการณ์ต่อเนื่อง:</strong> หาผลรวมของตัวเลข 2 จำนวน
    </p>
    <div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 15px; border-left: 6px solid #6f42c1; line-height: 1.6;">
        <div style="font-size: 14px; color: #444;">
            <strong>ตัวอย่างรูปแบบที่เลือก:</strong> <br>
            <span style="background-color: #f2eaff; padding: 2px 5px; border-radius: 4px; font-weight: bold; color: #4b238f; font-size: 15px;">แบบเรียงลำดับ (Sequence)</span>
            <div style="margin-top: 8px; font-size: 13px;">
                <strong>เหตุผล:</strong> เพราะโปรแกรมทำงานเป็นเส้นตรงตามลำดับขั้นตอน เริ่มจากรับค่า -> นำมาบวกกัน -> แสดงผล โดยไม่มีเงื่อนไขให้ตัดสินใจ หรือไม่มีการทำซ้ำ
            </div>
        </div>
    </div>
    <div style="background-color: #ffffff; padding: 12px 15px; border-radius: 8px; border: 1px solid #e3e6f0; font-size: 13px;">
        <strong style="color: #333;">💡 เทคนิคการคิด:</strong> 
        <span style="color: #555;">โปรแกรมของเราทำงานแบบไหน? เป็นเส้นตรง (แบบเรียงลำดับ), มีเงื่อนไขให้ต้องเลือก (แบบทางเลือก), หรือต้องทำสิ่งเดิมวนไปเรื่อยๆ (แบบทำซ้ำ)?</span>
    </div>
</div>

ออกแบบอัลกอริทึมด้วยภาษาธรรมชาติ

<div style="font-family: 'Prompt', 'Kanit', sans-serif; background-color: #f8faff; border: 2px dashed #fd7e14; border-radius: 12px; padding: 20px; color: #333; max-width: 600px; margin: 0 auto;">
    <h3 style="color: #e86100; margin-top: 0; text-align: center; font-size: 18px;">
        📝 แนวทางการเขียนภาษาธรรมชาติ
    </h3>
    <p style="font-size: 14px; text-align: center; color: #555; margin-bottom: 20px;">
        <strong>สถานการณ์ต่อเนื่อง:</strong> หาผลรวมของตัวเลข 2 จำนวน
    </p>
    <div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 15px; border-left: 6px solid #fd7e14; line-height: 1.6;">
        <div style="font-size: 14px; color: #444;">
            <strong>ตัวอย่างการเขียน:</strong> <br>
            <ol style="margin-top: 8px; margin-bottom: 0; padding-left: 20px; color: #d9534f; font-weight: bold;">
                <li style="margin-bottom: 5px;"><span style="color: #444; font-weight: normal;">เริ่มต้นการทำงาน</span></li>
                <li style="margin-bottom: 5px;"><span style="color: #444; font-weight: normal;">แสดงข้อความ "กรุณาป้อนตัวเลขที่ 1" เพื่อบอกผู้ใช้</span></li>
                <li style="margin-bottom: 5px;"><span style="color: #444; font-weight: normal;">รับค่าตัวเลขที่ 1 มาเก็บไว้ในตัวแปร <strong>number1</strong></span></li>
                <li style="margin-bottom: 5px;"><span style="color: #444; font-weight: normal;">แสดงข้อความ "กรุณาป้อนตัวเลขที่ 2" เพื่อบอกผู้ใช้</span></li>
                <li style="margin-bottom: 5px;"><span style="color: #444; font-weight: normal;">รับค่าตัวเลขที่ 2 มาเก็บไว้ในตัวแปร <strong>number2</strong></span></li>
                <li style="margin-bottom: 5px;"><span style="color: #444; font-weight: normal;">นำ <strong>number1</strong> มาบวกกับ <strong>number2</strong> แล้วเก็บผลลัพธ์ในตัวแปร <strong>sum</strong></span></li>
                </ol></div></div></div>

ออกแบบอัลกอริทึมด้วยรหัสจำลอง

<div style="font-family: 'Prompt', 'Kanit', sans-serif; background-color: #f8faff; border: 2px dashed #4e73df; border-radius: 12px; padding: 20px; color: #333; max-width: 600px; margin: 0 auto;">
    <h3 style="color: #4e73df; margin-top: 0; text-align: center; font-size: 18px;">
        💻 แนวทางการเขียนรหัสจำลอง (Pseudocode)
    </h3>
    <p style="font-size: 14px; text-align: center; color: #555; margin-bottom: 20px;">
        <strong>สถานการณ์ต่อเนื่อง:</strong> หาผลรวมของตัวเลข 2 จำนวน
    </p>
    <div style="background-color: #282c34; padding: 15px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-bottom: 15px; border-left: 6px solid #4e73df; line-height: 1.6; color: #abb2bf; font-family: 'Courier New', Courier, monospace;">
        <div style="font-size: 14px;">
            <span style="color: #c678dd; font-weight: bold;">START</span><br>
              <span style="color: #56b6c2;">PRINT</span> <span style="color: #98c379;">"กรุณาใส่ตัวเลขที่ 1:"</span><br>
              <span style="color: #56b6c2;">INPUT</span> <span style="color: #e06c75;">number1</span><br>
              <span style="color: #56b6c2;">PRINT</span> <span style="color: #98c379;">"กรุณาใส่ตัวเลขที่ 2:"</span><br>
              <span style="color: #56b6c2;">INPUT</span> <span style="color: #e06c75;">number2</span><br>
              <span style="color: #56b6c2;">SET</span> <span style="color: #e06c75;">sum</span> = <span style="color: #e06c75;">number1</span> + <span style="color: #e06c75;">number2</span><br>
              <span style="color: #56b6c2;">PRINT</span> <span style="color: #e06c75;">sum</span><br>
            <span style="color: #c678dd; font-weight: bold;">END</span>
        </div>
    </div>
    <div style="background-color: #ffffff; padding: 12px 15px; border-radius: 8px; border: 1px solid #e3e6f0; font-size: 13px;">
        <strong style="color: #333;">💡 เทคนิคการคิด:</strong> 
        <span style="color: #555;">แปลงข้อความจากภาษาธรรมชาติให้สั้นกระชับลง โดยใช้คำสั่งภาษาอังกฤษที่เป็นสากล เช่น นำเข้าใช้ INPUT, แสดงผลใช้ PRINT</span>
    </div>
</div>

ออกแบบอัลกอริทึมด้วยผังงาน

<div style="font-family: 'Prompt', 'Kanit', sans-serif; background-color: #f8faff; border: 2px dashed #e83e8c; border-radius: 12px; padding: 20px; color: #333; max-width: 600px; margin: 0 auto;">
    <h3 style="color: #d63384; margin-top: 0; text-align: center; font-size: 18px;">
        🖼️ แนวทางการออกแบบผังงาน (Flowchart)
    </h3>
    <p style="font-size: 14px; text-align: center; color: #555; margin-bottom: 20px;">
        <strong>สถานการณ์ต่อเนื่อง:</strong> หาผลรวมของตัวเลข 2 จำนวน
    </p>
    
    <div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 15px; border-left: 6px solid #e83e8c; line-height: 1.6; text-align: center;">
        <div style="font-size: 14px; color: #444; margin-bottom: 10px; text-align: left;">
            <strong>ตัวอย่างลำดับสัญลักษณ์ที่ต้องวาด:</strong>
        </div>
        
        <div style="display: inline-block; background-color: #fce4ec; border: 2px solid #f06292; border-radius: 20px; padding: 5px 20px; margin-bottom: 5px; font-size: 13px; font-weight: bold;">START (เริ่มต้น)</div><br>
        <span style="color: #aaa;">⬇️</span><br>
        <div style="display: inline-block; background-color: #e3f2fd; border: 2px solid #64b5f6; transform: skew(-15deg); padding: 5px 20px; margin-bottom: 5px; font-size: 13px;"><span style="display: inline-block; transform: skew(15deg);">INPUT number1</span></div><br>
        <span style="color: #aaa;">⬇️</span><br>
        <div style="display: inline-block; background-color: #e3f2fd; border: 2px solid #64b5f6; transform: skew(-15deg); padding: 5px 20px; margin-bottom: 5px; font-size: 13px;"><span style="display: inline-block; transform: skew(15deg);">INPUT number2</span></div><br>
        <span style="color: #aaa;">⬇️</span><br>
        <div style="display: inline-block; background-color: #fff9c4; border: 2px solid #ffd54f; padding: 5px 20px; margin-bottom: 5px; font-size: 13px;">sum = number1 + number2</div><br>
        <span style="color: #aaa;">⬇️</span><br>
        <div style="display: inline-block; background-color: #e3f2fd; border: 2px solid #64b5f6; transform: skew(-15deg); padding: 5px 20px; margin-bottom: 5px; font-size: 13px;"><span style="display: inline-block; transform: skew(15deg);">PRINT sum</span></div><br>
        <span style="color: #aaa;">⬇️</span><br>
        <div style="display: inline-block; background-color: #fce4ec; border: 2px solid #f06292; border-radius: 20px; padding: 5px 20px; font-size: 13px; font-weight: bold;">END (จบ)</div>
    </div>
    
    <div style="background-color: #ffffff; padding: 12px 15px; border-radius: 8px; border: 1px solid #e3e6f0; font-size: 13px;">
        <strong style="color: #333;">💡 ขั้นตอนที่น้องๆ ต้องทำ:</strong> 
        <span style="color: #555;">คลิกลิงก์ไปที่ <strong>app.diagrams.net</strong> วาดสัญลักษณ์ตามรหัสจำลองที่เขียนไว้ บันทึกเป็นไฟล์รูปภาพ (เช่น .png หรือ .jpg) แล้วนำมาอัปโหลดในช่องด้านล่างนี้ครับ</span>
    </div>
</div>

กรอก HTML Code (Iframe)

<div style="font-family: 'Prompt', 'Kanit', sans-serif; background-color: #f8faff; border: 2px dashed #4C97FF; border-radius: 12px; padding: 20px; color: #333; max-width: 600px; margin: 0 auto;">
    <h3 style="color: #0f4c81; margin-top: 0; text-align: center; font-size: 18px;">
        🎮 แนวทางการนำโค้ดจาก Scratch มาส่ง
    </h3>
    <p style="font-size: 14px; text-align: center; color: #555; margin-bottom: 20px;">
        <strong>สถานการณ์ต่อเนื่อง:</strong> หาผลรวมของตัวเลข 2 จำนวน
    </p>

<div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 15px; border-left: 6px solid #4C97FF; line-height: 1.6;">
        <div style="font-size: 14px; color: #444; margin-bottom: 10px;">
            <strong>ตัวอย่างหน้าตาของโค้ด HTML (Iframe) ที่ถูกต้อง:</strong>
        </div>
        
        <div style="background-color: #282c34; padding: 10px; border-radius: 6px; font-family: 'Courier New', Courier, monospace; font-size: 12px; color: #abb2bf; overflow-wrap: break-word; word-wrap: break-word;">
            <span style="color: #e06c75;"><iframe</span> <span style="color: #d19a66;">src</span>=<span style="color: #98c379;">"https://scratch.mit.edu/projects/123456789/embed"</span> <span style="color: #d19a66;">allowtransparency</span>=<span style="color: #98c379;">"true"</span> <span style="color: #d19a66;">width</span>=<span style="color: #98c379;">"485"</span> <span style="color: #d19a66;">height</span>=<span style="color: #98c379;">"402"</span> <span style="color: #d19a66;">frameborder</span>=<span style="color: #98c379;">"0"</span> <span style="color: #d19a66;">scrolling</span>=<span style="color: #98c379;">"no"</span> <span style="color: #d19a66;">allowfullscreen</span><span style="color: #e06c75;">></iframe></span>
        </div>
        
        <div style="margin-top: 10px; font-size: 13px; color: #d9534f; font-weight: bold;">
            *จุดสังเกต: โค้ดของน้องๆ จะต้องขึ้นต้นด้วย <iframe> และลงท้ายด้วย </iframe> เสมอครับ!
        </div>
    </div>

<div style="background-color: #ffffff; padding: 12px 15px; border-radius: 8px; border: 1px solid #e3e6f0; font-size: 13px;">
        <strong style="color: #333;">💡 ทบทวนขั้นตอนการนำโค้ดมาส่ง:</strong>
        <ol style="margin: 5px 0 0 0; padding-left: 20px; color: #555; line-height: 1.6;">
            <li>เปิดเว็บไซต์ Scratch Online (scratch.mit.edu) เขียนและทดสอบโปรแกรมจนทำงานได้ถูกต้อง [cite: 53, 57]</li>
            <li>ที่หน้าโปรเจกต์ของน้องๆ ให้กดปุ่ม <strong>Copy Link</strong></li>
            <li>คัดลอกโค้ดสำหรับฝัง (Embed <iframe>) ของโปรเจกต์ Scratch มาทั้งหมด [cite: 58]</li>
            <li>นำโค้ด <iframe> มาวางในช่องที่กำหนดบนเว็บไซต์ SmartyQuizKids.com แล้วกด "บันทึก" ได้เลย! [cite: 59]</li>
        </ol>
    </div>
</div>