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

Back

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

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

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

Title

Description

Keyword

Detail

.quiz-header {
    text-align: center;
    background: linear-gradient(135deg, #1565C0, #0D47A1);
    color: white;
    padding: 20px;
    border-radius: 10px 10px 0 0;
    margin: -20px -20px 20px -20px;
  }

.quiz-header h2 { margin: 0; font-size: 24px; }
  .quiz-header p { margin: 5px 0 0; font-size: 16px; opacity: 0.9; }

.q-item {
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 5px solid #FFC107; /* แถบสีทอง */
    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-options label {
    display: block;
    padding: 8px 10px;
    margin-bottom: 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.2s;
  }

.q-options label:hover {
    background-color: #F5F5F5;
  }

.check-btn {
    background-color: #1565C0;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    box-shadow: 0 3px #0D47A1;
    transition: all 0.1s;
    display: block;
    width: 100%;
    max-width: 200px;
  }

.check-btn:hover { background-color: #1976D2; }
  .check-btn:active { box-shadow: 0 1px #0D47A1; transform: translateY(2px); }

.msg-box {
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    display: none;
  }
  
  .correct { background-color: #E8F5E9; color: #2E7D32; border: 1px solid #C8E6C9; }
  .incorrect { background-color: #FFEBEE; color: #C62828; border: 1px solid #FFCDD2; }

</style>

<div class="final-quiz-container">
  <div class="quiz-header">
    <h2>🏆 แบบทดสอบวัดระดับ (Final Quiz)</h2>
    <p>พิชิต 10 ข้อเพื่อเป็น Scratch Master!</p>
  </div>

<div class="q-item">
    <div class="q-question">1. บล็อกคำสั่งใดเปรียบเสมือน "ปุ่มสตาร์ท" เริ่มต้นโปรแกรม?</div>
    <div class="q-options">
      <label><input type="radio" name="q1" value="A" autocomplete="new-password"> ก. When space key pressed</label>
      <label><input type="radio" name="q1" value="B" autocomplete="new-password"> ข. When green flag clicked</label>
      <label><input type="radio" name="q1" value="C" autocomplete="new-password"> ค. Forever</label>
      <label><input type="radio" name="q1" value="D" autocomplete="new-password"> ง. Stop all</label>
    </div>
    <button class="check-btn" onclick="checkFinal('q1', 'B', 'msg1')">ส่งคำตอบ</button>
    <div id="msg1" class="msg-box"></div>
  </div>

<div class="q-item">
    <div class="q-question">2. หากต้องการให้ทำงานซ้ำ "ตลอดไป" ต้องใช้บล็อกใด?</div>
    <div class="q-options">
      <label><input type="radio" name="q2" value="A" autocomplete="new-password"> ก. Repeat (10)</label>
      <label><input type="radio" name="q2" value="B" autocomplete="new-password"> ข. Wait 1 seconds</label>
      <label><input type="radio" name="q2" value="C" autocomplete="new-password"> ค. Forever</label>
      <label><input type="radio" name="q2" value="D" autocomplete="new-password"> ง. If-Then</label>
    </div>
    <button class="check-btn" onclick="checkFinal('q2', 'C', 'msg2')">ส่งคำตอบ</button>
    <div id="msg2" class="msg-box"></div>
  </div>

<div class="q-item">
    <div class="q-question">3. ช่องว่าง "รูปหกเหลี่ยม" ในบล็อก If-Then มีไว้สำหรับใส่ค่าแบบใด?</div>
    <div class="q-options">
      <label><input type="radio" name="q3" value="A" autocomplete="new-password"> ก. ใส่ตัวเลข (Circle)</label>
      <label><input type="radio" name="q3" value="B" autocomplete="new-password"> ข. ใส่เงื่อนไข จริง/เท็จ (Hexagon)</label>
      <label><input type="radio" name="q3" value="C" autocomplete="new-password"> ค. ใส่ข้อความ (Rectangle)</label>
      <label><input type="radio" name="q3" value="D" autocomplete="new-password"> ง. ใส่รูปภาพ</label>
    </div>
    <button class="check-btn" onclick="checkFinal('q3', 'B', 'msg3')">ส่งคำตอบ</button>
    <div id="msg3" class="msg-box"></div>
  </div>

<div class="q-item">
    <div class="q-question">4. ถ้าต้องการสร้างระบบ "นับคะแนน" ต้องใช้บล็อกหมวดใด?</div>
    <div class="q-options">
      <label><input type="radio" name="q4" value="A" autocomplete="new-password"> ก. Motion (เคลื่อนไหว)</label>
      <label><input type="radio" name="q4" value="B" autocomplete="new-password"> ข. Looks (รูปลักษณ์)</label>
      <label><input type="radio" name="q4" value="C" autocomplete="new-password"> ค. Variables (ตัวแปร)</label>
      <label><input type="radio" name="q4" value="D" autocomplete="new-password"> ง. Events (เหตุการณ์)</label>
    </div>
    <button class="check-btn" onclick="checkFinal('q4', 'C', 'msg4')">ส่งคำตอบ</button>
    <div id="msg4" class="msg-box"></div>
  </div>

<div class="q-item">
    <div class="q-question">5. คำสั่งใดใช้สำหรับ "รีเซ็ตคะแนนให้เป็น 0" เมื่อเริ่มเกม?</div>
    <div class="q-options">
      <label><input type="radio" name="q5" value="A" autocomplete="new-password"> ก. Change Score by 1</label>
      <label><input type="radio" name="q5" value="B" autocomplete="new-password"> ข. Set Score to 0</label>
      <label><input type="radio" name="q5" value="C" autocomplete="new-password"> ค. Show Variable Score</label>
      <label><input type="radio" name="q5" value="D" autocomplete="new-password"> ง. Hide Variable Score</label>
    </div>
    <button class="check-btn" onclick="checkFinal('q5', 'B', 'msg5')">ส่งคำตอบ</button>
    <div id="msg5" class="msg-box"></div>
  </div>

<div class="q-item">
    <div class="q-question">6. ในเกม Coin Hunter บล็อก Sensing ใดใช้ตรวจสอบว่า "แมวชนเหรียญ" แล้ว?</div>
    <div class="q-options">
      <label><input type="radio" name="q6" value="A" autocomplete="new-password"> ก. Touching color ?</label>
      <label><input type="radio" name="q6" value="B" autocomplete="new-password"> ข. Distance to mouse-pointer</label>
      <label><input type="radio" name="q6" value="C" autocomplete="new-password"> ค. Touching [Cat] ?</label>
      <label><input type="radio" name="q6" value="D" autocomplete="new-password"> ง. Ask and wait</label>
    </div>
    <button class="check-btn" onclick="checkFinal('q6', 'C', 'msg6')">ส่งคำตอบ</button>
    <div id="msg6" class="msg-box"></div>
  </div>

<div class="q-item">
    <div class="q-question">7. หากต้องการให้ตัวละครเดินไปทาง "ขวา" ค่า X ต้องเปลี่ยนแปลงอย่างไร?</div>
    <div class="q-options">
      <label><input type="radio" name="q7" value="A" autocomplete="new-password"> ก. Change X by 10 (ค่าบวก)</label>
      <label><input type="radio" name="q7" value="B" autocomplete="new-password"> ข. Change X by -10 (ค่าลบ)</label>
      <label><input type="radio" name="q7" value="C" autocomplete="new-password"> ค. Change Y by 10</label>
      <label><input type="radio" name="q7" value="D" autocomplete="new-password"> ง. Set rotation style</label>
    </div>
    <button class="check-btn" onclick="checkFinal('q7', 'A', 'msg7')">ส่งคำตอบ</button>
    <div id="msg7" class="msg-box"></div>
  </div>

<div class="q-item">
    <div class="q-question">8. ทำไมต้องใส่บล็อกตรวจสอบปุ่มกด (If Key Pressed) ไว้ใน Forever?</div>
    <div class="q-options">
      <label><input type="radio" name="q8" value="A" autocomplete="new-password"> ก. เพื่อให้โค้ดดูยาวขึ้น</label>
      <label><input type="radio" name="q8" value="B" autocomplete="new-password"> ข. เพื่อให้ตรวจสอบการกดปุ่ม "ตลอดเวลา"</label>
      <label><input type="radio" name="q8" value="C" autocomplete="new-password"> ค. เพื่อให้ตัวละครเปลี่ยนสี</label>
      <label><input type="radio" name="q8" value="D" autocomplete="new-password"> ง. เพราะ If ใช้เดี่ยวๆ ไม่ได้</label>
    </div>
    <button class="check-btn" onclick="checkFinal('q8', 'B', 'msg8')">ส่งคำตอบ</button>
    <div id="msg8" class="msg-box"></div>
  </div>

<div class="q-item">
    <div class="q-question">9. เมื่อเก็บเหรียญได้แล้ว ต้องการให้เหรียญย้ายที่ทันที ควรใช้คำสั่งใด?</div>
    <div class="q-options">
      <label><input type="radio" name="q9" value="A" autocomplete="new-password"> ก. Go to random position</label>
      <label><input type="radio" name="q9" value="B" autocomplete="new-password"> ข. Glide 1 secs to random position</label>
      <label><input type="radio" name="q9" value="C" autocomplete="new-password"> ค. Hide</label>
      <label><input type="radio" name="q9" value="D" autocomplete="new-password"> ง. Change size by 10</label>
    </div>
    <button class="check-btn" onclick="checkFinal('q9', 'A', 'msg9')">ส่งคำตอบ</button>
    <div id="msg9" class="msg-box"></div>
  </div>

<div class="q-item">
    <div class="q-question">10. ลำดับการสร้างเกมที่ถูกต้องและง่ายที่สุดคือข้อใด?</div>
    <div class="q-options">
      <label><input type="radio" name="q10" value="A" autocomplete="new-password"> ก. สร้างตัวแปร -> ใส่เสียง -> เขียนโค้ดเดิน</label>
      <label><input type="radio" name="q10" value="B" autocomplete="new-password"> ข. เขียนโค้ดเดิน -> การชนและเหรียญ -> นับคะแนน</label>
      <label><input type="radio" name="q10" value="C" autocomplete="new-password"> ค. ใส่พื้นหลัง -> จบงาน -> เขียนโค้ด</label>
      <label><input type="radio" name="q10" value="D" autocomplete="new-password"> ง. เขียนโค้ดการชน -> สร้างตัวแปร -> เขียนโค้ดเดิน</label>
    </div>
    <button class="check-btn" onclick="checkFinal('q10', 'B', 'msg10')">ส่งคำตอบ</button>
    <div id="msg10" class="msg-box"></div>
  </div>

</div>

msg.style.display = "block";
    msg.className = "msg-box"; // Reset class

if(val == "") {
      msg.innerHTML = "⚠️ กรุณาเลือกคำตอบก่อนนะครับ";
      msg.style.color = "#E65100";
      msg.style.backgroundColor = "#FFF3E0";
      msg.style.border = "1px solid #FFE0B2";
    } else if(val == correctVal) {
      msg.innerHTML = "✅ ถูกต้อง! เก่งมากครับ";
      msg.classList.add("correct");
    } else {
      msg.innerHTML = "❌ ยังไม่ถูก ลองทบทวนดูอีกนิดนะครับ";
      msg.classList.add("incorrect");
    }
  }
</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>