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

Back

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

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

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

Title

Description

Keyword

Detail

/* Quiz Style */
  .quiz-section { border-top: 2px dashed #CCC; padding-top: 30px; margin-top: 40px; }
  .quiz-header { font-family: 'Kanit'; font-size: 24px; color: #00897B; margin-bottom: 20px; text-align: center; font-weight: bold; }
  .q-block { margin-bottom: 25px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
  .q-question { font-weight: bold; font-size: 18px; color: #333; margin-bottom: 15px; }
  .q-btn { width: 100%; padding: 12px; margin-top: 8px; background: #FAFAFA; border: 1px solid #DDD; border-radius: 8px; text-align: left; cursor: pointer; transition: 0.2s; font-size: 16px; font-family: 'Sarabun'; }
  .q-btn:hover { background: #E0F2F1; border-color: #4DB6AC; }
  .feedback { margin-top: 15px; padding: 12px; border-radius: 8px; display: none; font-weight: bold; font-size: 16px; }
  .correct { background: #C8E6C9; color: #2E7D32; border: 1px solid #2E7D32; }
  .wrong { background: #FFCDD2; color: #C62828; border: 1px solid #C62828; }
</style>

<div class="ep-container">
  <div class="ep6-head">
    <div class="ep-icon"><i class="fas fa-tools"></i></div>
    <div>
      <h1 style="margin:0; font-family:'Kanit'; font-size: 28px;">EP.6: สร้างต้นแบบ & ทดสอบ</h1>
      <p style="margin:5px 0 0; opacity:0.9; font-size: 18px;">เปลี่ยนไอเดียในกระดาษ ให้กลายเป็นของจริง!</p>
    </div>
  </div>

<div class="content">
    <div class="intro-box">
      <b>ก้าวสู่สนามจริง!</b> หลังจากที่เราได้ไอเดียจาก SCAMPER แล้ว ขั้นตอนสุดท้ายคือการลงมือทำ ซึ่งประกอบด้วย 3 ส่วนสำคัญ คือ <b>วางแผน > สร้างต้นแบบ > ทดสอบประเมินผล</b> 
    </div>
    
    <div class="step-box">
      <div class="step-badge">Phase 1</div>
      <h3>📅 การวางแผนและดำเนินการ (Planning)</h3>
      <p>ก่อนจับเครื่องมือ ต้องวางแผนให้ชัดเจน เพื่อประหยัดเวลาและลดข้อผิดพลาด</p>
      
      <ul>
        <li><b>กำหนดขั้นตอน:</b> ลำดับว่าต้องทำอะไรก่อน-หลัง (อาจเขียนเป็น <b>Flowchart</b> หรือผังงาน)</li>
        <li><b>ตารางเวลา (Gantt Chart):</b> กำหนดชัดเจนว่างานไหนใช้เวลาเท่าไหร่ ใครรับผิดชอบ</li>
        <li><b>เตรียมทรัพยากร:</b> ลิสต์รายการวัสดุและเครื่องมือที่ต้องใช้ให้ครบถ้วน</li>
      </ul>
    </div>

<div class="step-box">
      <div class="step-badge">Phase 2</div>
      <h3>⚙️ การสร้างต้นแบบ (Prototyping)</h3>
      <p>ลงมือสร้างชิ้นงานจำลอง หรือที่เรียกว่า <b>"ต้นแบบ (Prototype)"</b> เพื่อดูว่าไอเดียของเราสามารถทำงานได้จริงหรือไม่</p>
      <ul>
        <li>ไม่จำเป็นต้องใช้วัสดุจริงที่ราคาแพงเสมอไป (เช่น ใช้กระดาษลัง ลวด หรือดินน้ำมันแทนก่อนได้)</li>
        <li><b>ข้อควรระวัง:</b> ต้องคำนึงถึง <b>"ความปลอดภัย"</b> ในการใช้เครื่องมือช่างเสมอ และใช้วัสดุอย่างประหยัด</li>
      </ul>
    </div>

<div class="step-box">
      <div class="step-badge">Phase 3</div>
      <h3>🧪 การทดสอบและประเมินผล (Testing & Evaluation)</h3>
      <p>เมื่อได้ต้นแบบแล้ว ต้องนำไปทดสอบในสถานการณ์จริง เพื่อหา <b>ข้อบกพร่อง (Defect)</b></p>
      
      <ul>
        <li>กำหนดเกณฑ์การประเมินให้ชัดเจน (เช่น ชิ้นงานต้องรับน้ำหนักได้ 5 กก.)</li>
        <li>จดบันทึกปัญหาที่พบทุกครั้งอย่างละเอียด</li>
        <li><b>จำไว้ว่า:</b> การทดสอบแล้ว "ล้มเหลว" ไม่ใช่เรื่องแย่ แต่มันคือการค้นพบจุดที่เราต้องนำไป <b>ปรับปรุงแก้ไข (Iterate)</b> ให้ชิ้นงานสมบูรณ์แบบที่สุด</li>
      </ul>
    </div>

<div class="quiz-section">
      <div class="quiz-header">🧠 แบบทดสอบทบทวน (5 ข้อ)</div>

<div class="q-block">
        <div class="q-question">1. สิ่งใดที่ช่วยให้การทำงานเป็นระบบ เห็นลำดับก่อน-หลัง และรู้ว่าใครรับผิดชอบงานใด?</div>
        <button class="q-btn" onclick="check(this, 'q1', false)">ก. การสร้างต้นแบบ (Prototype)</button>
        <button class="q-btn" onclick="check(this, 'q1', false)">ข. การทดสอบ (Testing)</button>
        <button class="q-btn" onclick="check(this, 'q1', true)">ค. การเขียนตารางเวลา (Gantt Chart) และผังงาน</button>
        <button class="q-btn" onclick="check(this, 'q1', false)">ง. การนำเสนอผลงาน (Presentation)</button>
        <div id="fb-q1" class="feedback"></div>
      </div>

<div class="q-block">
        <div class="q-question">2. จุดประสงค์หลักของการสร้าง "ต้นแบบ (Prototype)" คืออะไร?</div>
        <button class="q-btn" onclick="check(this, 'q2', true)">ก. เพื่อทดสอบว่าไอเดียที่คิดไว้สามารถทำงานได้จริงหรือไม่ ก่อนผลิตจริง</button>
        <button class="q-btn" onclick="check(this, 'q2', false)">ข. เพื่อนำไปขายทำกำไรให้เร็วที่สุด</button>
        <button class="q-btn" onclick="check(this, 'q2', false)">ค. เพื่อประกวดความสวยงาม</button>
        <button class="q-btn" onclick="check(this, 'q2', false)">ง. เพื่อใช้วัสดุที่มีราคาแพงที่สุดในการทดลอง</button>
        <div id="fb-q2" class="feedback"></div>
      </div>

<div class="q-block">
        <div class="q-question">3. ข้อใดคือสิ่งที่ "สำคัญที่สุด" ในขณะที่ลงมือปฏิบัติงานสร้างชิ้นงาน?</div>
        <button class="q-btn" onclick="check(this, 'q3', false)">ก. ความรวดเร็วในการทำงาน</button>
        <button class="q-btn" onclick="check(this, 'q3', true)">ข. ความปลอดภัยในการใช้เครื่องมือช่าง</button>
        <button class="q-btn" onclick="check(this, 'q3', false)">ค. ความสวยงามของสีสัน</button>
        <button class="q-btn" onclick="check(this, 'q3', false)">ง. การใช้วัสดุนำเข้าจากต่างประเทศ</button>
        <div id="fb-q3" class="feedback"></div>
      </div>

<div class="q-block">
        <div class="q-question">4. หากนำชิ้นงานไปทดสอบแล้วพบว่า "ไม่สามารถแก้ปัญหาได้ตามที่ตั้งเป้าไว้" นักเรียนควรทำอย่างไร?</div>
        <button class="q-btn" onclick="check(this, 'q4', false)">ก. ทิ้งชิ้นงานนั้นแล้วล้มเลิกโครงการ</button>
        <button class="q-btn" onclick="check(this, 'q4', false)">ข. นำเสนอชิ้นงานไปทั้งที่ยังมีข้อผิดพลาด</button>
        <button class="q-btn" onclick="check(this, 'q4', true)">ค. บันทึกปัญหา วิเคราะห์สาเหตุ และกลับไปปรับปรุงแก้ไข</button>
        <button class="q-btn" onclick="check(this, 'q4', false)">ง. โทษเพื่อนในกลุ่มที่ทำงานผิดพลาด</button>
        <div id="fb-q4" class="feedback"></div>
      </div>

<div class="q-block">
        <div class="q-question">5. ข้อใดกล่าวถูกต้องเกี่ยวกับกระบวนการทดสอบและประเมินผล?</div>
        <button class="q-btn" onclick="check(this, 'q5', false)">ก. ทดสอบแค่ครั้งเดียวก็เพียงพอแล้ว</button>
        <button class="q-btn" onclick="check(this, 'q5', true)">ข. ต้องมี "เกณฑ์การประเมิน" ที่ชัดเจน เพื่อใช้วัดความสำเร็จของชิ้นงาน</button>
        <button class="q-btn" onclick="check(this, 'q5', false)">ค. ควรทดสอบด้วยความรู้สึก ไม่ต้องมีการจดบันทึก</button>
        <button class="q-btn" onclick="check(this, 'q5', false)">ง. หากชิ้นงานทำงานได้แล้ว ไม่จำเป็นต้องนำเสนอให้ผู้อื่นฟัง</button>
        <div id="fb-q5" class="feedback"></div>
      </div>

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

if(correct) {
    btn.style.background = '#C8E6C9';
    btn.style.borderColor = '#2E7D32';
    btn.style.color = '#1B5E20';
    btn.style.opacity = '1';
    fb.innerHTML = "✅ ถูกต้อง! เก่งมากครับ วิศวกรตัวน้อย!"; 
    fb.className = "feedback correct"; 
  } else {
    btn.style.background = '#FFCDD2';
    btn.style.borderColor = '#C62828';
    btn.style.color = '#B71C1C';
    btn.style.opacity = '1';
    fb.innerHTML = "❌ ผิดครับ ลองทบทวนเนื้อหาใน Phase 1-3 ดูอีกรอบนะ"; 
    fb.className = "feedback wrong"; 
  }
  fb.style.display = "block";
}
</script>