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

Back

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

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

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

Title

Description

Keyword

Detail

/* ส่วนหัว (Header) */
  .quiz-header {
    background-color: #673AB7;
    color: white;
    padding: 15px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }

/* หน้าแต่ละหน้า (Step) */
  .quiz-step {
    display: none;
    padding: 25px;
    text-align: center;
    animation: fadeIn 0.5s;
  }

.quiz-step.active { display: block; }

/* ตัวเลือกคำตอบ */
  .choice-btn {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 12px;
    background: #EDE7F6; /* ม่วงอ่อน */
    border: 2px solid #673AB7;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    color: #333;
    transition: 0.2s;
  }

.choice-btn:hover {
    background-color: #D1C4E9;
    transform: scale(1.02);
  }

/* กล่องเฉลย (ซ่อนอยู่ตอนแรก) */
  .feedback-box {
    display: none;
    margin-top: 15px;
    padding: 15px;
    border-radius: 8px;
    font-weight: bold;
  }
  
  .feedback-correct { background-color: #D4EDDA; color: #155724; border: 1px solid #C3E6CB; }
  .feedback-wrong { background-color: #F8D7DA; color: #721C24; border: 1px solid #F5C6CB; }

/* ปุ่มไปต่อ */
  .btn-next-step {
    display: none; /* ซ่อนจนกว่าจะตอบ */
    margin-top: 15px;
    padding: 10px 25px;
    background-color: #673AB7;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
  }

/* หน้าสรุปผล */
  .score-display {
    font-size: 40px;
    color: #FF9800; /* สีทอง */
    font-weight: bold;
    margin: 20px 0;
  }
  
  .trophy-icon { font-size: 60px; margin-bottom: 10px; display:block;}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

<div class="quiz-container-final">
  <div class="quiz-header">🏆 ภารกิจพิชิตอัลกอริทึม</div>

<div class="quiz-step active" id="q-step-1">
    <div style="color:#007bff; font-weight:bold; margin-bottom:10px;">ข้อที่ 1/3 (เรื่องลำดับ)</div>
    <p>สัญลักษณ์ใดใน Flowchart ต้องเขียนเป็น <strong>"ลำดับแรก"</strong> เสมอ?</p>
    
    <button class="choice-btn" onclick="checkFinal(1, 'A')">A. สี่เหลี่ยมผืนผ้า (Process)</button>
    <button class="choice-btn" onclick="checkFinal(1, 'B')">B. วงรี (Start/End)</button>
    <button class="choice-btn" onclick="checkFinal(1, 'C')">C. สี่เหลี่ยมขนมเปียกปูน (Decision)</button>

<div class="quiz-step" id="q-step-2">
    <div style="color:#e65100; font-weight:bold; margin-bottom:10px;">ข้อที่ 2/3 (เรื่องการตัดสินใจ)</div>
    <p>ถ้าต้องการตรวจสอบว่า <strong>"คะแนนมากกว่า 50 หรือไม่?"</strong> ต้องใช้สัญลักษณ์ใด?</p>
    
    <button class="choice-btn" onclick="checkFinal(2, 'A')">A. สี่เหลี่ยมขนมเปียกปูน (Decision)</button>
    <button class="choice-btn" onclick="checkFinal(2, 'B')">B. วงกลม (Connector)</button>
    <button class="choice-btn" onclick="checkFinal(2, 'C')">C. สี่เหลี่ยมผืนผ้า (Process)</button>

<div class="quiz-step" id="q-step-3">
    <div style="color:#f57f17; font-weight:bold; margin-bottom:10px;">ข้อที่ 3/3 (เรื่องการทำซ้ำ)</div>
    <p>ถ้าต้องการสั่งให้ตัวละคร <strong>"เดินไปข้างหน้า 100 ก้าว"</strong> ควรใช้วิธีใดดีที่สุด?</p>
    
    <button class="choice-btn" onclick="checkFinal(3, 'A')">A. เขียนคำสั่ง "เดิน" ต่อกัน 100 บรรทัด</button>
    <button class="choice-btn" onclick="checkFinal(3, 'B')">B. ใช้คำสั่ง Loop (ทำซ้ำ 100 รอบ)</button>
    <button class="choice-btn" onclick="checkFinal(3, 'C')">C. ใช้คำสั่ง If-Else (ถ้า...แล้ว)</button>

<div id="fb-3" class="feedback-box"></div>
    <button class="btn-next-step" id="btn-3" onclick="nextStep(4)">ดูคะแนนรวม ➔</button>
  </div>

<div class="quiz-step" id="q-step-4">
    <h3>ยินดีด้วย! ภารกิจจบแล้ว</h3>
    <span class="trophy-icon">🏆</span>
    <p>คะแนนของคุณคือ</p>
    <div class="score-display" id="final-score">0 / 3</div>
    <p id="score-msg">กำลังประมวลผล...</p>
    
    <button class="choice-btn" style="background:#673AB7; color:white;" onclick="location.reload()">🔄 ลองทำใหม่อีกครั้ง</button>
  </div>

</div>

function checkFinal(qNum, selectedChoice) {
    // ป้องกันการกดซ้ำ
    if (document.getElementById(`btn-${qNum}`).style.display === 'inline-block') return;

const fbBox = document.getElementById(`fb-${qNum}`);
    const correctChoice = answers[qNum].correct;

if (selectedChoice === correctChoice) {
        totalScore++; // บวกคะแนน
        fbBox.className = 'feedback-box feedback-correct';
        fbBox.innerHTML = '✅ ' + answers[qNum].desc;
    } else {
        fbBox.className = 'feedback-box feedback-wrong';
        fbBox.innerHTML = '❌ ผิดครับ... คำตอบที่ถูกคือข้อ ' + correctChoice;
    }

fbBox.style.display = 'block';
    document.getElementById(`btn-${qNum}`).style.display = 'inline-block'; // โชว์ปุ่มไปต่อ
  }

// ถ้าเป็นหน้าสุดท้าย ให้สรุปผล
    if (stepNum === 4) {
        document.getElementById('final-score').innerText = totalScore + ' / 3';
        const msg = document.getElementById('score-msg');
        if (totalScore === 3) msg.innerHTML = 'สุดยอด! คุณคือมาสเตอร์อัลกอริทึม! 🌟';
        else if (totalScore === 2) msg.innerHTML = 'เก่งมาก! พลาดไปนิดเดียว 👍';
        else msg.innerHTML = 'สู้ๆ นะ! ลองกลับไปทบทวนบทเรียนอีกรอบ ✌️';
    }
  }
</script>