ตั้งค่า

ตัวอย่าง

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

<div style="font-family: 'Sarabun', sans-serif; text-align: left; line-height: 1.6; color: #333;">
  <h3 style="color: #c0392b; text-align: center; margin-bottom: 15px;">💡 สูตรจำง่าย! สำหรับเขียนวัตถุประสงค์</h3>
  <p style="font-size: 16px;">น้องๆ สามารถท่องโครงสร้างนี้ แล้วกดปิดหน้าต่างไปพิมพ์ได้เลยครับ:</p>
  
  <div style="background-color: #f9f9f9; border-left: 5px solid #2980b9; padding: 15px; margin-bottom: 20px; font-weight: bold; font-size: 16px;">
    "เพื่อสร้างโปรแกรมที่ <span style="color: #e74c3c;">[รับค่า...]</span> <br>แล้วนำมา <span style="color: #f39c12;">[ประมวลผล...]</span> <br>และแสดงผล <span style="color: #27ae60;">[คำตอบ...]</span>"
  </div>
  
  <p style="font-size: 16px;"><b>👉 ดูตัวอย่าง (เรื่องการหาผลรวม):</b></p>
  <div style="background-color: #e8f8f5; border: 2px dashed #1abc9c; padding: 15px; border-radius: 8px; font-size: 16px;">
    เพื่อสร้างโปรแกรมที่ <span style="color: #e74c3c;"><b>รับค่าตัวเลข 2 จำนวน</b></span> <br>แล้วนำมา <span style="color: #f39c12;"><b>บวกกัน</b></span> <br>และแสดงผล <span style="color: #27ae60;"><b>ผลรวมนั้นออกมา</b></span>
  </div>
  
  <p style="text-align: center; color: #7f8c8d; font-size: 14px; margin-top: 15px;">
    <i>จำคีย์เวิร์ด 3 คำนี้ไว้: <b style="color: #2c3e50;">"รับค่า -> นำมา -> แสดงผล"</b> <br>จำได้แล้ว กดกากบาทปิดหน้าต่างไปพิมพ์ได้เลย!</i>
  </p>
</div>

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

<div style="font-family: 'Sarabun', sans-serif; text-align: left; line-height: 1.6; color: #333;">
  <h3 style="color: #1abc9c; text-align: center; margin-bottom: 15px;">🖥️ สูตรจำง่าย! การกำหนดรูปแบบผลลัพธ์ (Output)</h3>
  
  <div style="background-color: #f9f9f9; border-left: 5px solid #1abc9c; padding: 15px; margin-bottom: 20px; font-size: 16px;">
    <b>เทคนิคการตั้งคำถามกับตัวเอง:</b><br>
    <i>"สุดท้ายแล้ว โปรแกรมต้องแสดงค่าอะไรออกมาให้เราเห็นบนหน้าจอ?"</i>
  </div>
  
  <p style="font-size: 16px;"><b>👉 ดูตัวอย่าง (ถ้าโจทย์คือการหาผลรวมของตัวเลข 2 จำนวน):</b></p>
  <div style="background-color: #e8f8f5; border: 2px dashed #1abc9c; padding: 15px; border-radius: 8px; font-size: 16px;">
    รูปแบบผลลัพธ์ที่ต้องการ (Output) คือ : <span style="color: #16a085;"><b>ตัวเลขผลรวม</b></span> (ของตัวเลขทั้ง 2 จำนวน)
  </div>
  
  <p style="text-align: center; color: #7f8c8d; font-size: 14px; margin-top: 15px;">
    <i>เมื่อรู้แล้วว่าผลลัพธ์สุดท้ายคืออะไร กดกากบาทปิดหน้าต่างไปพิมพ์ได้เลย!</i>
  </p>
</div>

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

<div style="font-family: 'Sarabun', sans-serif; text-align: left; line-height: 1.6; color: #333;">
  <h3 style="color: #e74c3c; text-align: center; margin-bottom: 15px;">📥 สูตรจำง่าย! การกำหนดข้อมูลนำเข้า (Input)</h3>
  
  <div style="background-color: #f9f9f9; border-left: 5px solid #e74c3c; padding: 15px; margin-bottom: 20px; font-size: 16px;">
    <b>เทคนิคการตั้งคำถามกับตัวเอง:</b><br>
    <i>"เพื่อให้ได้ผลลัพธ์นั้น เราต้องป้อนข้อมูลอะไรเข้าไปให้โปรแกรมคิดบ้าง?"</i>
  </div>
  
  <p style="font-size: 16px;"><b>👉 ดูตัวอย่าง (ถ้าโจทย์คือการหาผลรวมของตัวเลข 2 จำนวน):</b></p>
  <div style="background-color: #fadbd8; border: 2px dashed #e74c3c; padding: 15px; border-radius: 8px; font-size: 16px;">
    ข้อมูลนำเข้า (Input) คือ : <span style="color: #c0392b;"><b>ตัวเลขจำนวนที่ 1</b></span> และ <span style="color: #c0392b;"><b>ตัวเลขจำนวนที่ 2</b></span>
  </div>
  
  <p style="text-align: center; color: #7f8c8d; font-size: 14px; margin-top: 15px;">
    <i>เมื่อรู้แล้วว่าต้องป้อนข้อมูลอะไร กดกากบาทปิดหน้าต่างไปพิมพ์ได้เลย!</i>
  </p>
</div>

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

<div style="font-family: 'Sarabun', sans-serif; text-align: left; line-height: 1.6; color: #333;">
  <h3 style="color: #f39c12; text-align: center; margin-bottom: 15px;">⚙️ สูตรจำง่าย! การประมวลผลและตัวแปร (Process)</h3>
  
  <div style="background-color: #f9f9f9; border-left: 5px solid #f39c12; padding: 15px; margin-bottom: 20px; font-size: 16px;">
    <b>เทคนิคการตั้งคำถามกับตัวเอง (ต้องตอบให้ครบ 2 ข้อนะ!):</b><br>
    <i>1. โปรแกรมต้องเอาข้อมูลมาคำนวณยังไง? (บวก ลบ คูณ หาร)<br>
    2. เราต้องสร้าง "กล่อง" (ตัวแปร) ชื่ออะไรบ้าง เพื่อมาเก็บข้อมูล?</i>
  </div>
  
  <p style="font-size: 16px;"><b>👉 ดูตัวอย่าง (ถ้าโจทย์คือการหาผลรวมของตัวเลข 2 จำนวน):</b></p>
  <div style="background-color: #fef5e7; border: 2px dashed #f39c12; padding: 15px; border-radius: 8px; font-size: 16px;">
    การประมวลผล คือ : <span style="color: #d68910;"><b>นำตัวเลขจำนวนที่ 1 มาบวก (+) กับตัวเลขจำนวนที่ 2</b></span><br>
    ตัวแปรที่ใช้ คือ : <span style="color: #d68910;"><b>ตัวแปรเก็บตัวเลขที่ 1, ตัวแปรเก็บตัวเลขที่ 2, ตัวแปรเก็บผลรวม</b></span>
  </div>
  
  <p style="text-align: center; color: #7f8c8d; font-size: 14px; margin-top: 15px;">
    <i>เมื่อรู้สูตรคำนวณและชื่อตัวแปรแล้ว กดกากบาทปิดหน้าต่างไปพิมพ์ได้เลย!</i>
  </p>
</div>

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

<div style="font-family: 'Sarabun', sans-serif; text-align: left; line-height: 1.6; color: #333;">
  <h3 style="color: #2980b9; text-align: center; margin-bottom: 15px;">🔵 สูตรจำง่าย! กฎการตั้งชื่อตัวแปรและสูตร</h3>
  
  <div style="background-color: #ebf5fb; border-left: 5px solid #2980b9; padding: 15px; margin-bottom: 20px; font-size: 16px;">
    <b style="color: #c0392b;">🚩 กฎเหล็ก 4 ข้อในการตั้งชื่อตัวแปร (Variable):</b><br>
    1. ใช้ภาษาอังกฤษเท่านั้น (เช่น weight, price)<br>
    2. ห้ามเว้นวรรค (ใช้ totalPrice หรือ total_price)<br>
    3. ห้ามขึ้นต้นด้วยตัวเลข<br>
    4. ต้องเขียนให้ตรงกันเป๊ะ! (ตัวเล็ก-ตัวใหญ่ต้องเหมือนเดิมตลอด)
  </div>
  
  <p style="font-size: 16px;"><b>👉 ดูตัวอย่าง (ถ้าโจทย์คือการหาผลรวมของตัวเลข 2 จำนวน):</b></p>
  <div style="background-color: #f4f6f7; border: 2px dashed #2980b9; padding: 15px; border-radius: 8px; font-size: 16px;">
    <b>ตัวแปรที่ใช้:</b> <span style="color: #2471a3;">number1</span>, <span style="color: #2471a3;">number2</span> และ <span style="color: #2471a3;">sum</span><br>
    <b>สูตรคำนวณ:</b> <span style="color: #2471a3;">sum = number1 + number2</span>
  </div>
  
  <p style="text-align: center; color: #7f8c8d; font-size: 14px; margin-top: 15px;">
    <i>เมื่อปรึกษากับเพื่อนและได้ชื่อตัวแปรภาษาอังกฤษแล้ว กดปิดหน้าต่างไปพิมพ์ได้เลย!</i>
  </p>
</div>

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

<div style="font-family: 'Sarabun', sans-serif; text-align: left; line-height: 1.6; color: #333;">
  <h3 style="color: #8e44ad; text-align: center; margin-bottom: 15px;">🟣 สูตรจำง่าย! การเลือกรูปแบบผังงาน</h3>
  
  <div style="background-color: #f5eef8; border-left: 5px solid #8e44ad; padding: 15px; margin-bottom: 20px; font-size: 16px;">
    <b>เทคนิคการตั้งคำถามกับตัวเอง (เพื่อเช็คตรรกะ):</b><br>
    <i>1. "โจทย์ข้อนี้ต้องมีการตัดสินใจ (มีทางแยก ใช่/ไม่ใช่) ไหม?"<br>
    2. "โจทย์ข้อนี้ต้องมีการทำงานซ้ำๆ (วนลูป) ไหม?"<br>
    👉 ถ้าคำตอบคือ "ไม่" ทั้งสองข้อ = เป็น <b>แบบเรียงลำดับ</b> แน่นอน!</i>
  </div>
  
  <p style="font-size: 16px;"><b>👉 ดูตัวอย่าง (ถ้าโจทย์คือการหาผลรวมของตัวเลข 2 จำนวน):</b></p>
  <div style="background-color: #fbf9fb; border: 2px dashed #8e44ad; padding: 15px; border-radius: 8px; font-size: 16px;">
    รูปแบบผังงานที่ใช้ คือ : <span style="color: #7d3c98;"><b>แบบเรียงลำดับ (Sequence)</b></span><br>
    <div style="margin-top: 10px; font-size: 14px; color: #e67e22;">
      <b>⚠️ ข้อควรระวัง:</b> เมื่อเลือกแบบนี้แล้ว ตอนวาดผังงาน (Flowchart) จะต้องลากลูกศรเป็นเส้นตรงไหลลงมาทางเดียว ห้ามมีทางแยกเด็ดขาด!
    </div>
  </div>
  
  <p style="text-align: center; color: #7f8c8d; font-size: 14px; margin-top: 15px;">
    <i>เมื่อวิเคราะห์รูปแบบผังงานได้แล้ว กดปิดหน้าต่างไปพิมพ์คำตอบได้เลย!</i>
  </p>
</div>

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

<div style="font-family: 'Sarabun', sans-serif; text-align: left; line-height: 1.6; color: #333;">
  <h3 style="color: #d35400; text-align: center; margin-bottom: 15px;">📝 สูตรจำง่าย! เขียนอัลกอริทึมภาษาธรรมชาติ</h3>
  
  <div style="background-color: #fdf2e9; border-left: 5px solid #d35400; padding: 15px; margin-bottom: 20px; font-size: 16px;">
    <b>เทคนิคการคิด (เอาข้อมูลเก่ามาประกอบร่าง!):</b><br>
    <i>การเขียนอัลกอริทึม ต้องเขียนเรียงเป็นข้อๆ โดยมี 5 โครงสร้างหลัก คือ:<br>
    1. <b>เริ่ม</b> (ต้องมีคำว่า เริ่มต้นการทำงาน)<br>
    2. <b>รับ</b> (ถามผู้ใช้ และรับค่ามาเก็บใน "ตัวแปร Input")<br>
    3. <b>คิด</b> (คำนวณตาม "สูตร" แล้วเก็บผลลัพธ์ใน "ตัวแปร Output")<br>
    4. <b>โชว์</b> (นำผลลัพธ์มาแสดงออกทางหน้าจอ)<br>
    5. <b>จบ</b> (ต้องมีคำว่า สิ้นสุดการทำงาน)</i>
  </div>
  
  <p style="font-size: 16px;"><b>👉 ดูตัวอย่าง (เรื่องการหาผลรวมของตัวเลข 2 จำนวน):</b></p>
  <div style="background-color: #fcf3cf; border: 2px dashed #d35400; padding: 15px; border-radius: 8px; font-size: 16px;">
    1. <span style="color: #a04000;"><b>เริ่มต้น</b></span>การทำงาน<br>
    2. แสดงข้อความ "กรุณาป้อนตัวเลขที่ 1" เพื่อบอกผู้ใช้<br>
    3. <span style="color: #c0392b;"><b>รับค่า</b></span>ตัวเลขที่ 1 มาเก็บไว้ในตัวแปร <b>number1</b><br>
    4. แสดงข้อความ "กรุณาป้อนตัวเลขที่ 2" เพื่อบอกผู้ใช้<br>
    5. <span style="color: #c0392b;"><b>รับค่า</b></span>ตัวเลขที่ 2 มาเก็บไว้ในตัวแปร <b>number2</b><br>
    6. <span style="color: #d68910;"><b>นำ number1 มาบวกกับ number2</b></span> แล้วเก็บผลลัพธ์ในตัวแปร <b>sum</b><br>
    7. <span style="color: #27ae60;"><b>แสดงผลลัพธ์</b></span>ที่เก็บอยู่ในตัวแปร <b>sum</b> ออกทางหน้าจอ<br>
    8. <span style="color: #a04000;"><b>สิ้นสุด</b></span>การทำงาน
  </div>
  
  <p style="text-align: center; color: #7f8c8d; font-size: 14px; margin-top: 15px;">
    <i>สังเกตไหม? เราแค่เอาข้อมูล Input, Process, Output ที่หาไว้มาแต่งเป็นประโยคเท่านั้นเอง!</i>
  </p>
</div>

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

<div style="font-family: 'Sarabun', sans-serif; text-align: left; line-height: 1.6; color: #333;">
  <h3 style="color: #34495e; text-align: center; margin-bottom: 15px;">💻 สูตรจำง่าย! แปลงร่างเป็นรหัสจำลอง (Pseudocode)</h3>
  
  <div style="background-color: #ebedef; border-left: 5px solid #34495e; padding: 15px; margin-bottom: 20px; font-size: 16px;">
    <b>เทคนิคการคิด (เปิดพจนานุกรมแปลภาษา!):</b><br>
    <i>นำ "ภาษาธรรมชาติ" จากข้อที่แล้ว มาแปลเป็นคำศัพท์สากล ดังนี้:<br>
    1. เริ่มต้น / สิ้นสุด ➔ <b>START / END</b><br>
    2. แสดงข้อความ ➔ <b>PRINT</b> "..."<br>
    3. รับค่าตัวแปร ➔ <b>INPUT</b> (ตามด้วยชื่อตัวแปร)<br>
    4. คำนวณ/กำหนดค่า ➔ <b>SET</b> (ตามด้วยสูตรคำนวณ)</i>
  </div>
  
  <p style="font-size: 16px;"><b>👉 ดูตัวอย่าง (เรื่องการหาผลรวมของตัวเลข 2 จำนวน):</b></p>
  <div style="background-color: #2c3e50; color: #ecf0f1; border: 2px solid #1abc9c; padding: 15px; border-radius: 8px; font-family: 'Courier New', Courier, monospace; font-size: 16px; line-height: 1.8;">
    <span style="color: #e74c3c; font-weight: bold;">START</span><br>
      <span style="color: #3498db; font-weight: bold;">PRINT</span> "กรุณาใส่ตัวเลขที่ 1:"<br>
      <span style="color: #f1c40f; font-weight: bold;">INPUT</span> number1<br>
      <span style="color: #3498db; font-weight: bold;">PRINT</span> "กรุณาใส่ตัวเลขที่ 2:"<br>
      <span style="color: #f1c40f; font-weight: bold;">INPUT</span> number2<br>
      <span style="color: #2ecc71; font-weight: bold;">SET</span> sum = number1 + number2<br>
      <span style="color: #3498db; font-weight: bold;">PRINT</span> sum<br>
    <span style="color: #e74c3c; font-weight: bold;">END</span>
  </div>
  
  <p style="text-align: center; color: #7f8c8d; font-size: 14px; margin-top: 15px;">
    <i>เมื่อรู้คำศัพท์ภาษาอังกฤษสากลแล้ว กดกากบาทปิดหน้าต่างไปเขียนโค้ดได้เลย!</i>
  </p>
</div>

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

<div style="font-family: 'Sarabun', sans-serif; text-align: left; line-height: 1.6; color: #333;">
  <h3 style="color: #e83e8c; text-align: center; margin-bottom: 15px;">🎀 สูตรจำง่าย! แปลงรหัสจำลองเป็นผังงาน (Flowchart)</h3>
  
  <div style="background-color: #fce4ec; border-left: 5px solid #e83e8c; padding: 15px; margin-bottom: 20px; font-size: 16px;">
    <b>เทคนิคการคิด (ลอกของเดิม มาเติมกรอบ!):</b><br>
    <i style="color: #c0392b;"><b>กฎเหล็ก:</b> ให้นำ "รหัสจำลอง (Pseudocode)" ที่น้องๆ เขียนไว้ในข้อที่แล้ว มาวาดใส่กรอบสัญลักษณ์ทีละบรรทัด ห้ามคิดคำขึ้นมาใหม่เด็ดขาด!</i>
  </div>
  
  <p style="font-size: 16px;"><b>🔠 พจนานุกรมสัญลักษณ์ผังงาน (ที่ถูกต้องตามหลักวิชาการ):</b></p>
  <div style="background-color: #fdfefe; border: 2px dashed #e83e8c; padding: 15px; border-radius: 8px; font-size: 15px;">
    
    <p style="margin-top: 0;"><b>1. สัญลักษณ์ แคปซูล (Terminator)</b> 💊<br>
    👉 นำมาครอบคำว่า: <b>START</b> และ <b>END</b><br>
    💡 <i>เหตุผล: รูปทรงนี้ใช้เป็นประตู เพื่อเป็นจุดสังเกตให้รู้ว่าโปรแกรมมี "จุดเริ่มต้น" และ "จุดสิ้นสุด" ที่ตรงไหน</i></p>
    
    <p><b>2. สัญลักษณ์ สี่เหลี่ยมด้านขนาน (Data)</b> ▱<br>
    👉 นำมาครอบคำว่า: <b>INPUT</b> (รับค่า) และ <b>PRINT</b> (แสดงข้อความ/ผลลัพธ์)<br>
    💡 <i>เหตุผล: สัญลักษณ์ที่มีความเอียงนี้ ใช้แทน "ข้อมูล" ที่กำลังไหลเข้าสู่ระบบ (ตอนผู้ใช้พิมพ์) หรือกำลังไหลออกจากระบบ (ตอนโชว์บนหน้าจอ) ครับ</i></p>
    
    <p style="margin-bottom: 0;"><b>3. สัญลักษณ์ สี่เหลี่ยมผืนผ้า (Process)</b> ▭<br>
    👉 นำมาครอบคำว่า: <b>SET</b> (การคำนวณ/กำหนดค่า)<br>
    💡 <i>เหตุผล: รูปทรงกล่องทึบๆ นี้ ใช้แทน "การประมวลผล" หรือการคำนวณทางคณิตศาสตร์ที่คอมพิวเตอร์แอบคิดอยู่หลังบ้าน (ผู้ใช้มองไม่เห็น) ครับ</i></p>

</div>
  
  <p style="text-align: center; color: #7f8c8d; font-size: 14px; margin-top: 15px;">
    <i>จำคู่สัญลักษณ์ให้แม่นๆ แล้วคลิกลิงก์ app.diagrams.net ไปวาดผังงาน เซฟรูปลงเครื่อง แล้วอัปโหลดส่งได้เลย!</i>
  </p>
</div>

กรอก HTML Code (Iframe)

<details style="background-color: #fdfefe; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px;">
    <summary style="padding: 10px; font-weight: bold; font-size: 16px; cursor: pointer; color: #2980b9; outline: none;">
      🧩 1. พจนานุกรมแปลงผังงานเป็น Scratch (คลิกเพื่อดู)
    </summary>
    <div style="padding: 15px; border-top: 1px solid #ccc; font-size: 14px;">
      
      
      <table style="width: 100%; border-collapse: collapse; text-align: center;">
        <tbody><tr style="border-bottom: 1px dashed #eee;">
          <td style="padding: 10px 5px; width: 45%;">
            <b>เริ่มต้น / สิ้นสุด</b><br>
            <span style="background: #fadbd8; border: 2px solid #e74c3c; border-radius: 20px; padding: 4px 12px; color: #c0392b; display: inline-block; margin-top: 5px;">💊 แคปซูล</span>
          </td>
          <td style="font-size: 20px; width: 10%;">➡️</td>
          <td style="padding: 10px 5px; width: 45%;">
            <b>บล็อกเหตุการณ์ / ควบคุม</b><br>
            <span style="background: #f1c40f; border-radius: 5px 5px 0 0; padding: 4px 12px; color: #fff; font-weight: bold; display: inline-block; margin-top: 5px; text-shadow: 1px 1px 1px #d35400;">เมื่อคลิก ⛳</span>
          </td>
        </tr>
        
        <tr style="border-bottom: 1px dashed #eee;">
          <td style="padding: 10px 5px;">
            <b>รับข้อมูล / แสดงผล</b><br>
            <span style="background: #d4e6f1; border: 2px solid #2980b9; padding: 4px 12px; color: #154360; display: inline-block; margin-top: 5px;">▱ สี่เหลี่ยมด้านขนาน</span>
          </td>
          <td style="font-size: 20px;">➡️</td>
          <td style="padding: 10px 5px;">
            <b>บล็อกตรวจจับ / รูปลักษณ์</b><br>
            <span style="background: #5dade2; border-radius: 5px; padding: 4px 12px; color: #fff; font-weight: bold; display: inline-block; margin-top: 5px;">ถาม ... แล้วรอ</span>
          </td>
        </tr>

<tr style="border-bottom: 1px dashed #eee;">
          <td style="padding: 10px 5px;">
            <b>ประมวลผล / คำนวณ</b><br>
            <span style="background: #fcf3cf; border: 2px solid #f39c12; padding: 4px 12px; color: #7e5109; display: inline-block; margin-top: 5px;">▭ สี่เหลี่ยมผืนผ้า</span>
          </td>
          <td style="font-size: 20px;">➡️</td>
          <td style="padding: 10px 5px;">
            <b>บล็อกตัวแปร / คำนวณ</b><br>
            <span style="background: #ff8c00; border-radius: 5px; padding: 4px 12px; color: #fff; font-weight: bold; display: inline-block; margin-top: 5px;">ตั้งค่า [ตัวแปร] เป็น ...</span>
          </td>
        </tr>

<tr>
          <td style="padding: 10px 5px;">
            <b>ตัดสินใจ / เงื่อนไข</b><br>
            <span style="background: #ebdef0; border: 2px solid #8e44ad; padding: 4px 12px; color: #512e5f; display: inline-block; margin-top: 5px;">⬦ สี่เหลี่ยมข้าวหลามตัด</span>
          </td>
          <td style="font-size: 20px;">➡️</td>
          <td style="padding: 10px 5px;">
            <b>บล็อกเงื่อนไข (If-Else)</b><br>
            <span style="background: #e67e22; border-radius: 5px; padding: 4px 12px; color: #fff; font-weight: bold; display: inline-block; margin-top: 5px;">ถ้า ... แล้ว</span>
          </td>
        </tr>
      </tbody></table>
      
      <div style="background-color: #f4f6f7; padding: 8px; margin-top: 10px; border-radius: 5px; text-align: center; font-size: 13px; color: #7f8c8d;">
        💡 <b>ทริค:</b> สังเกต "สี" ของบล็อกคำสั่งให้ดี! สีใน Scratch ถูกแบ่งตามหมวดหมู่ไว้แล้ว!
      </div>
    </div>
  </details>

<details style="background-color: #fdfefe; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px;">
    <summary style="padding: 10px; font-weight: bold; font-size: 16px; cursor: pointer; color: #c0392b; outline: none;">
      🛠️ 2. คลินิกแก้บั๊ก (โค้ดไม่รัน เช็คตรงนี้!)
    </summary>
    <div style="padding: 15px; border-top: 1px solid #ccc; font-size: 15px; background-color: #fff9f9;">
      <b>เช็คลิสต์ก่อนส่งงาน:</b><br>
      <span style="color: #c0392b;">⬜</span> พิมพ์ชื่อตัวแปร (Variable) ถูกต้องทุกตัวอักษรไหม?<br>
      <span style="color: #c0392b;">⬜</span> ลำดับของบล็อกคำสั่ง เรียงตามลูกศรในผังงานเป๊ะๆ หรือยัง?<br>
      <span style="color: #c0392b;">⬜</span> ใส่เครื่องหมายคณิตศาสตร์ (+, -, *, /) ถูกช่องสีเขียวไหม?
    </div>
  </details>

<details open="" style="background-color: #fdfefe; border: 2px dashed #d35400; border-radius: 5px; margin-bottom: 10px;">
    <summary style="padding: 10px; font-weight: bold; font-size: 16px; cursor: pointer; color: #d35400; outline: none;">
      📤 3. ขั้นตอนการนำโค้ดมาส่ง
    </summary>
    <div style="padding: 15px; border-top: 1px dashed #d35400; font-size: 15px;">
      1. ไปที่ <b>scratch.mit.edu</b> สร้างโปรเจกต์และต่อบล็อก<br>
      2. 🚨 <b>สำคัญมาก!</b> ต้องกดปุ่ม <b>Share (แชร์)</b> สีส้มด้านบนเสมอ<br>
      3. กดปุ่ม <b>Copy Link</b> (คัดลอกลิงก์) ที่อยู่ด้านล่างขวาของจอ<br>
      4. คลิกคำว่า <b>Copy Embed</b> (คัดลอกโค้ดสำหรับฝัง)<br>
      5. นำโค้ดที่ได้ มา Paste (วาง) ลงในกล่องข้อความของระบบ
      <div style="background-color: #f2f3f4; padding: 10px; margin-top: 15px; border-radius: 5px; text-align: center; font-size: 14px;">
        📌 <b>จุดสังเกต:</b> โค้ดของน้องๆ จะต้องมีคำว่า <br>
        <code style="color: #e74c3c; background: #fadbd8; padding: 4px 8px; border-radius: 3px; font-weight: bold; display: inline-block; margin-top: 5px;">< iframe ></code> เสมอ!
      </div>
    </div>
  </details>
</div>