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

Back

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

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

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

Title

Description

Keyword

Detail

/* Quiz Style */
  .quiz-section { border-top: 2px dashed #CCC; padding-top: 30px; margin-top: 10px; }
  .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; }
</style>

<div class="ep-container">
  <div class="ep-head">
    <div class="ep-icon"><i class="fas fa-trophy"></i></div>
    <div>
      <h1 style="margin:0; font-family:'Kanit'; font-size: 28px;">EP.5: บททดสอบก่อนลงสนามจริง</h1>
      <p style="margin:5px 0 0; opacity:0.9; font-size: 18px;">ทบทวนความรู้ทั้งหมด เพื่อเตรียมพร้อมสร้างเกมแรกของคุณ</p>
    </div>
  </div>

<div class="content">
    <p>เดินทางมาถึงบทสุดท้ายของการเตรียมความพร้อมแล้วครับ! ตลอด 4 บทที่ผ่านมา เราได้เรียนรู้ตั้งแต่จุดเริ่มต้นของการสร้างเกม ทำความรู้จักกับแพลตฟอร์ม <b>Scratch</b> เข้าใจหลักการ <b>Game Design</b> และเห็นภาพโครงสร้างของ <b>บล็อกคำสั่ง</b> กันไปแล้ว</p>

<div class="tip-box">
      <b><i class="fas fa-check-circle"></i> Are you ready?</b><br>
      แบบทดสอบนี้จะช่วยทบทวนความเข้าใจของคุณ หากคุณตอบได้มั่นใจ แปลว่าคุณพร้อมแล้วที่จะปลดปล่อยความคิดสร้างสรรค์ และก้าวขึ้นเป็น <b>"นักพัฒนาเกม"</b> อย่างเต็มตัว!
    </div>

<div class="quiz-section">
      <div class="quiz-header">🏆 Final Quiz: ทบทวนความรู้ Scratch </div>

<div class="q-block">
        <div class="q-question">1. แนวคิดหลักของการเรียนในคอร์ส "Scratch " คือข้อใด?</div>
        <button class="q-btn" onclick="checkScratchFinal(this, 's5_q1', false)">ก. เน้นท่องจำโค้ดภาษาอังกฤษให้ขึ้นใจ</button>
        <button class="q-btn" onclick="checkScratchFinal(this, 's5_q1', false)">ข. เรียนแต่ทฤษฎี ไม่ต้องลงมือปฏิบัติ</button>
        <button class="q-btn" onclick="checkScratchFinal(this, 's5_q1', true)">ค. เรียนรู้ผ่านการลงมือทำ (Hands-on) โดยสร้างเกมที่เล่นได้จริง 3 เกม</button>
        <button class="q-btn" onclick="checkScratchFinal(this, 's5_q1', false)">ง. สร้างเกมเดียวที่ยากที่สุดตั้งแต่บทแรก</button>
        <div id="fb-s5_q1" class="feedback"></div>
      </div>

<div class="q-block">
        <div class="q-question">2. ทำไมถึงเปรียบเทียบ Scratch ว่าเหมือน "Digital Lego"?</div>
        <button class="q-btn" onclick="checkScratchFinal(this, 's5_q2', true)">ก. เพราะใช้การลากวางบล็อกคำสั่งมาต่อกัน (Drag and Drop)</button>
        <button class="q-btn" onclick="checkScratchFinal(this, 's5_q2', false)">ข. เพราะเกมที่สร้างได้จะมีแต่รูปทรงสี่เหลี่ยมเท่านั้น</button>
        <button class="q-btn" onclick="checkScratchFinal(this, 's5_q2', false)">ค. เพราะต้องซื้อตัวต่อของจริงมาต่อเข้ากับคอมพิวเตอร์</button>
        <button class="q-btn" onclick="checkScratchFinal(this, 's5_q2', false)">ง. เพราะเป็นโปรแกรมที่ผลิตโดยบริษัทเลโก้</button>
        <div id="fb-s5_q2" class="feedback"></div>
      </div>

<div class="q-block">
        <div class="q-question">3. นอกจากการเขียนโปรแกรม (Programming) แล้ว คอร์สนี้ยังสอนทักษะใดควบคู่ไปด้วยเพื่อทำให้เกมน่าเล่น?</div>
        <button class="q-btn" onclick="checkScratchFinal(this, 's5_q3', false)">ก. การตลาดสำหรับเกมเมอร์</button>
        <button class="q-btn" onclick="checkScratchFinal(this, 's5_q3', true)">ข. การออกแบบเกม (Game Design) เช่น การจัดการเลเยอร์และกลไกของเกม</button>
        <button class="q-btn" onclick="checkScratchFinal(this, 's5_q3', false)">ค. การแต่งเพลงประกอบเกม</button>
        <button class="q-btn" onclick="checkScratchFinal(this, 's5_q3', false)">ง. การประกอบคอมพิวเตอร์</button>
        <div id="fb-s5_q3" class="feedback"></div>
      </div>

<div class="q-block">
        <div class="q-question">4. บล็อกคำสั่ง "สีเหลือง" ใน Scratch มักจะทำหน้าที่อะไรเป็นหลัก?</div>
        <button class="q-btn" onclick="checkScratchFinal(this, 's5_q4', false)">ก. ควบคุมทิศทางให้ตัวละครเดินซ้าย-ขวา</button>
        <button class="q-btn" onclick="checkScratchFinal(this, 's5_q4', false)">ข. สร้างเงื่อนไขวนซ้ำ (Loop)</button>
        <button class="q-btn" onclick="checkScratchFinal(this, 's5_q4', true)">ค. เป็นจุดเริ่มต้นของเหตุการณ์ (Events) เช่น เมื่อคลิกธงเขียว</button>
        <button class="q-btn" onclick="checkScratchFinal(this, 's5_q4', false)">ง. เปลี่ยนสีตัวละคร</button>
        <div id="fb-s5_q4" 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 = "❌ ยังไม่ถูกนะครับ ไม่เป็นไรนะ ลองกลับไปทบทวนเนื้อหา EP ก่อนหน้าดูอีกครั้งครับ"; 
    fb.className = "feedback wrong"; 
  }
  fb.style.display = "block";
}
</script>
<div style="background-color: #f8f9fa; border: 1px solid #e9ecef; border-left: 5px solid #0d6efd; padding: 20px; margin-top: 50px; margin-bottom: 20px; border-radius: 8px; font-family: 'Sarabun', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
    <div style="display: flex; align-items: center; margin-bottom: 10px;">
        <span style="font-size: 1.5em; margin-right: 10px;">💡</span>
        <strong style="color: #0d6efd; font-size: 1.2em;">พบข้อผิดพลาดหรือมีข้อเสนอแนะ?</strong>
    </div>
    <p style="color: #495057; font-size: 1em; margin-bottom: 15px; line-height: 1.6;">
        หากนักเรียนหรือคุณครูพบจุดที่ควรแก้ไขในบทเรียน/แบบทดสอบนี้ หรือมีข้อเสนอแนะเพิ่มเติม สามารถแจ้งครูพิสิฐเพื่อนำไปปรับปรุงเนื้อหาให้สมบูรณ์ยิ่งขึ้นได้เลยครับ <br>
        <span style="font-size: 0.9em; color: #6c757d;">(ขอบคุณที่ร่วมเป็นส่วนหนึ่งในการพัฒนาการเรียนรู้ไปด้วยกันครับ)</span>
    </p>
    <a href="mailto:tpisit@wsst.ac.th?subject=แจ้งข้อเสนอแนะ/ข้อผิดพลาด บทเรียน SmartyQuizKids" style="display: inline-block; background-color: #0d6efd; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-size: 1em; font-weight: bold;">
        ✉️ ส่งอีเมลแจ้งครูพิสิฐ
    </a>
</div>