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

Back

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

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

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

Title

Description

Keyword

Detail

.tip-box { background: #FFF7ED; border-left: 5px solid #F97316; padding: 15px; border-radius: 8px; margin-top: 20px; margin-bottom: 20px; font-size: 16px; color: #9A3412; }

/* สไตล์เพิ่มเติมสำหรับจำลองบล็อกในบทนี้ (เผื่ออยากให้เห็นภาพชัดเจน) */
  .mock-block { display: inline-block; padding: 4px 12px; border-radius: 5px; color: white; font-weight: bold; font-size: 14px; margin: 2px 0; }
  .b-yellow { background-color: #FFBF00; }
  .b-orange { background-color: #FF8C1A; }
  .b-blue { background-color: #4C97FF; }

/* Quiz Style */
  .quiz-section { border-top: 2px dashed #CCC; padding-top: 30px; margin-top: 30px; }
  .quiz-header { font-family: 'Kanit'; font-size: 24px; color: #F97316; margin-bottom: 20px; text-align: center; font-weight: bold; }
  .q-block { margin-bottom: 25px; background: #F8FAFC; padding: 20px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border: 1px solid #E2E8F0; }
  .q-question { font-weight: bold; font-size: 18px; color: #1E293B; margin-bottom: 15px; }
  .q-btn { width: 100%; padding: 12px; margin-top: 8px; background: white; border: 1px solid #CBD5E1; border-radius: 8px; text-align: left; cursor: pointer; transition: 0.2s; font-size: 16px; font-family: 'Sarabun'; }
  .q-btn:hover { background: #FFF7ED; border-color: #F97316; }
  .feedback { margin-top: 15px; padding: 12px; border-radius: 8px; display: none; font-weight: bold; font-size: 16px; }
  .correct { background: #DCFCE7; color: #166534; border: 1px solid #166534; }
  .wrong { background: #FEE2E2; color: #991B1B; border: 1px solid #991B1B; }
  
  @media (max-width: 600px) {
    .feature-grid { grid-template-columns: 1fr; }
  }
</style>

<div class="ep-container">
  <div class="ep-head">
    <div class="ep-icon"><i class="fas fa-code"></i></div>
    <div>
      <h1 style="margin:0; font-family:'Kanit'; font-size: 28px;">EP.4: โครงสร้างบล็อกคำสั่ง Scratch</h1>
      <p style="margin:5px 0 0; opacity:0.9; font-size: 18px;">แอบดูหน้าตาการทำงานจริงของการต่อบล็อก</p>
    </div>
  </div>

<div class="content">
    <p>ความลับที่ทำให้ Scratch ใช้งานง่าย คือการ <b>"แบ่งหมวดหมู่คำสั่งตามสี"</b> ซึ่งช่วยให้เราจดจำตรรกะและลอจิกของการเขียนโปรแกรมได้รวดเร็วขึ้น ลองจินตนาการว่าเรากำลังจะสั่งให้ตัวละคร <i>"เดินหน้าไปเรื่อยๆ เมื่อเรากดปุ่มเริ่มเกม"</i></p>

<div class="tip-box">
      <b><i class="fas fa-flag"></i> ธงเขียว (Green Flag) คือจุดสตาร์ท!</b><br>
      ทุกเกมต้องมีจุดเริ่มต้น ใน Scratch เรามักจะใช้บล็อก <span class="mock-block b-yellow">เมื่อคลิก 🏳️</span> เป็นบล็อกแรกสุด (คล้ายหมวกที่อยู่บนสุด) เพื่อบอกระบบว่า "ให้เริ่มทำงานคำสั่งที่อยู่ด้านล่างนี้ได้เลย!"
    </div>

<div class="tech-card">
      <h3><i class="fas fa-palette"></i> 3 หมวดหมู่สีหลักที่ใช้บ่อยที่สุด</h3>
      <p>โครงสร้างพื้นฐานของเกมส่วนใหญ่ มักจะประกอบไปด้วยบล็อก 3 สีนี้ที่ทำงานร่วมกันครับ:</p>
      
      <div class="feature-grid">
        <div class="feature-box">
          <i class="fas fa-bolt" style="color: #FFBF00;"></i>
          <h4 style="color: #B28600;">1. สีเหลือง (Events)</h4>
          <p><b>เหตุการณ์:</b> เป็นบล็อกที่ทำหน้าที่ "รอรับคำสั่ง" เพื่อเริ่มต้นทำงาน เช่น เมื่อคลิกธงเขียว, เมื่อกดปุ่ม Spacebar หรือเมื่อคลิกที่ตัวละคร</p>
        </div>
        
        <div class="feature-box">
          <i class="fas fa-sync" style="color: #FF8C1A;"></i>
          <h4 style="color: #CC6A00;">2. สีส้ม (Control)</h4>
          <p><b>การควบคุม:</b> เป็นตัวกำหนดตรรกะว่าเกมจะดำเนินไปอย่างไร เช่น สั่งให้ <span class="mock-block b-orange">วนซ้ำตลอด</span> หรือบล็อกเงื่อนไข "ถ้า...แล้ว (If...Then)"</p>
        </div>

<div class="feature-box">
          <i class="fas fa-walking" style="color: #4C97FF;"></i>
          <h4 style="color: #1E40AF;">3. สีฟ้า (Motion)</h4>
          <p><b>การเคลื่อนไหว:</b> จัดการตำแหน่งและทิศทางของตัวละครในเกม เช่น สั่งให้ <span class="mock-block b-blue">เคลื่อนที่ 10 ก้าว</span> หรือหมุนตัว</p>
        </div>

<div class="feature-box">
          <i class="fas fa-link"></i>
          <h4>การทำงานร่วมกัน</h4>
          <p>เราแค่นำบล็อก <b>สีฟ้า</b> ไปใส่ไว้ในกรอบของบล็อก <b>สีส้ม</b> แล้วนำทั้งหมดไปต่อใต้บล็อก <b>สีเหลือง</b> เท่านี้ตัวละครก็ขยับได้แล้ว!</p>
        </div>
      </div>
    </div>

<div class="quiz-section">
      <div class="quiz-header">📝 แบบทดสอบ Mini Quiz EP.4</div>

<div class="q-block">
        <div class="q-question">1. หากเราต้องการกำหนด "จุดเริ่มต้น" ของการทำงานในเกม เราควรใช้บล็อกคำสั่งหมวดสีอะไร?</div>
        <button class="q-btn" onclick="checkScratchQuiz4(this, 's4_q1', false)">ก. สีฟ้า (Motion)</button>
        <button class="q-btn" onclick="checkScratchQuiz4(this, 's4_q1', true)">ข. สีเหลือง (Events)</button>
        <button class="q-btn" onclick="checkScratchQuiz4(this, 's4_q1', false)">ค. สีส้ม (Control)</button>
        <button class="q-btn" onclick="checkScratchQuiz4(this, 's4_q1', false)">ง. สีเขียว (Operators)</button>
        <div id="fb-s4_q1" class="feedback"></div>
      </div>

<div class="q-block">
        <div class="q-question">2. บล็อก "วนซ้ำตลอด (Forever)" จัดอยู่ในกลุ่มคำสั่งหมวดใด?</div>
        <button class="q-btn" onclick="checkScratchQuiz4(this, 's4_q2', false)">ก. หมวด Events</button>
        <button class="q-btn" onclick="checkScratchQuiz4(this, 's4_q2', true)">ข. หมวด Control</button>
        <button class="q-btn" onclick="checkScratchQuiz4(this, 's4_q2', false)">ค. หมวด Motion</button>
        <button class="q-btn" onclick="checkScratchQuiz4(this, 's4_q2', false)">ง. หมวด Looks</button>
        <div id="fb-s4_q2" class="feedback"></div>
      </div>

<div class="q-block">
        <div class="q-question">3. จากบทเรียน การจะทำให้ตัวละครเคลื่อนที่ไปข้างหน้าเรื่อยๆ เราต้องนำบล็อก "สีฟ้า (เคลื่อนที่)" ไปใส่ไว้ในบล็อกสีอะไร?</div>
        <button class="q-btn" onclick="checkScratchQuiz4(this, 's4_q3', false)">ก. สีเหลือง (เมื่อคลิกธงเขียว)</button>
        <button class="q-btn" onclick="checkScratchQuiz4(this, 's4_q3', true)">ข. สีส้ม (วนซ้ำตลอด)</button>
        <button class="q-btn" onclick="checkScratchQuiz4(this, 's4_q3', false)">ค. สีแดง (หยุดการทำงาน)</button>
        <button class="q-btn" onclick="checkScratchQuiz4(this, 's4_q3', false)">ง. ไม่ต้องใส่ในบล็อกใดเลย</button>
        <div id="fb-s4_q3" class="feedback"></div>
      </div>

</div>
  </div>
</div>

if(correct) {
    btn.style.background = '#DCFCE7';
    btn.style.borderColor = '#166534';
    btn.style.color = '#14532D';
    fb.innerHTML = "✅ ถูกต้องครับ! คุณเข้าใจการแบ่งสีและหน้าที่ของบล็อกหลักๆ แล้วครับ"; 
    fb.className = "feedback correct"; 
  } else {
    btn.style.background = '#FEE2E2';
    btn.style.borderColor = '#991B1B';
    btn.style.color = '#7F1D1D';
    fb.innerHTML = "❌ ยังไม่ถูกนะครับ ลองกลับไปดูหมวดหมู่สีในกรอบด้านบนอีกครั้งนะ!"; 
    fb.className = "feedback wrong"; 
  }
  fb.style.display = "block";
}
</script>