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

Back

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

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

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

Title

Description

Keyword

Detail

.project-header {
    background-color: #D32F2F;
    color: white;
    padding: 20px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
  }

.project-content {
    padding: 30px;
  }

h3.section-title {
    color: #D32F2F;
    border-left: 5px solid #D32F2F;
    padding-left: 15px;
    margin-top: 30px;
  }

/* ส่วนเปรียบเทียบ Logic vs Code */
  .comparison-section {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start; /* จัดให้กล่องเริ่มที่ความสูงเท่ากัน */
  }

.comparison-card {
    flex: 1;
    background: #FFEBEE;
    border: 2px solid #FFCDD2;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
  }
  
  .card-icon { font-size: 40px; margin-bottom: 10px; display:block; }

/* ส่วนฝังเกม Scratch */
  .scratch-embed-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 83%; /* อัตราส่วนมาตรฐานของ Scratch */
    border: 4px solid #333;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  }

.scratch-embed-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

/* Responsive สำหรับมือถือ */
  @media (max-width: 600px) {
    .comparison-section {
      flex-direction: column;
      align-items: stretch;  /* <--- เพิ่มบรรทัดนี้ครับ เพื่อสั่งให้กว้างเท่ากัน */
    }
  }

</style>

<div class="project-container">
  <div class="project-header">🍎 โปรเจกต์: เกมรับแอปเปิล (Catch Game)</div>

<div class="project-content">
    <p style="font-size:18px; text-align:center;">ยินดีต้อนรับสู่โปรเจกต์แรก! เราจะนำความรู้เรื่อง <strong>Loop</strong> และ <strong>Decision</strong> มาสร้างเกมกันครับ</p>

<h3 class="section-title">ส่วนที่ 1: เบื้องหลังความสนุก (Logic & Code)</h3>
    <p>หัวใจของเกมนี้คือการทำให้แอปเปิลตกลงมาเรื่อยๆ และตรวจสอบว่าชนตะกร้าหรือยัง</p>

<div class="comparison-section">
      <div class="comparison-card">
        <span class="card-icon">🔄</span>
        <h4>ตรรกะ (Flowchart)</h4>
        <p>ต้องใช้ <strong>Loop (วนซ้ำ)</strong> <br>เพื่อให้แอปเปิลตกลงมาตลอดเวลา <br>ไม่หยุด</p>
        
        <div style="text-align: center; margin: 15px 0;">
    <img src="https://www.smartyquizkids.com/assets/images/smn/0336dcbab05b9d5ad24f4333c7658a0e20260127102958.png" alt="คลิกเพื่อขยาย Flowchart" title="คลิกที่รูปเพื่อขยาย/ย่อ" onclick="if(this.style.width=='100%'){this.style.width='140px';this.style.cursor='zoom-in';}else{this.style.width='100%';this.style.cursor='zoom-out';}" style="width: 140px; cursor: zoom-in; transition: width 0.3s ease; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); display: inline-block;">
    
    <p style="font-size: 12px; color: #888; margin-top: 5px;">(แตะที่รูปเพื่อขยาย)</p>
</div>
            
          
        </div>
        </div>

<div class="comparison-card">
        <span class="card-icon">🟧</span>
        <h4>คำสั่ง (Scratch Blocks)</h4>
        <p>เราจะใช้บล็อกสีส้ม <br><strong>"Forever" (วนซ้ำตลอด)</strong> <br>มาครอบคำสั่งการเคลื่อนที่</p>
        <div style="background:#FFAB19; color:white; padding:10px; border-radius:5px; font-weight:bold; text-align:left;">
            forever { <br>
              change y by -10 <br>
            }
        </div>
      </div>
    </div>

<h3 class="section-title">ส่วนที่ 2: ลองเล่นเกมจริง! (Playground)</h3>
    <p style="text-align:center; margin-bottom:20px;">👇 กดที่ <strong>ธงเขียว (Green Flag)</strong> เพื่อเริ่มเกม! 👇<br>(ใช้เมาส์ หรือ นิ้ว เลื่อนตะกร้าไปรับแอปเปิล)</p>

<div class="scratch-embed-wrapper">
      <iframe src="https://scratch.mit.edu/projects/546244532/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen=""></iframe>
    </div>
    
    <p style="text-align:center; margin-top:20px; font-size:14px; color:#666;">
        *หมายเหตุ: นี่คือเกมตัวอย่างเพื่อการศึกษา (Credit: Project ID 546244532 on Scratch)
    </p>

</div>

<div class="quiz-interactive-container">
  <div class="quiz-header-b">🎮 เกมทายปัญหา: แฟนพันธุ์แท้ Loop</div>

<div class="question-block" id="q1-block">
    <div class="q-text">1. เส้นลูกศรที่วนกลับขึ้นไปหากล่องด้านบน หมายความว่าอย่างไร?</div>
    <label class="choice-label"><input type="radio" name="q1" value="A"> ก. จบเกมทันที</label>
    <label class="choice-label"><input type="radio" name="q1" value="B"> ข. ให้ทำงานซ้ำวนไปเรื่อยๆ (Infinity Loop)</label>
    <label class="choice-label"><input type="radio" name="q1" value="C"> ค. ให้แอปเปิลหยุดค้างอยู่กับที่</label>
    <label class="choice-label"><input type="radio" name="q1" value="D"> ง. ให้แอปเปิลเด้งกลับขึ้นไปข้างบน</label>
    <button class="check-btn" onclick="checkAnswer('q1', 'B', 'msg1')">ส่งคำตอบ</button>
    <div id="msg1" class="result-msg"></div>
  </div>

<div class="question-block" id="q2-block">
    <div class="q-text">2. ถ้าจะเขียนโค้ด Loop ใน Scratch ต้องใช้บล็อกสีส้มชื่อว่าอะไร?</div>
    <label class="choice-label"><input type="radio" name="q2" value="A"> ก. If ... then</label>
    <label class="choice-label"><input type="radio" name="q2" value="B"> ข. Repeat 10</label>
    <label class="choice-label"><input type="radio" name="q2" value="C"> ค. Forever</label>
    <label class="choice-label"><input type="radio" name="q2" value="D"> ง. Wait 1 seconds</label>
    <button class="check-btn" onclick="checkAnswer('q2', 'C', 'msg2')">ส่งคำตอบ</button>
    <div id="msg2" class="result-msg"></div>
  </div>

<div class="question-block" id="q3-block">
    <div class="q-text">3. ถ้าลืมใส่บล็อก Forever ครอบคำสั่ง Change Y จะเกิดอะไรขึ้น?</div>
    <label class="choice-label"><input type="radio" name="q3" value="A"> ก. แอปเปิลจะตกลงมานิดเดียว แล้วหยุด</label>
    <label class="choice-label"><input type="radio" name="q3" value="B"> ข. แอปเปิลจะตกลงมาเรื่อยๆ เหมือนเดิม</label>
    <label class="choice-label"><input type="radio" name="q3" value="C"> ค. แอปเปิลจะลอยขึ้นฟ้าแทน</label>
    <label class="choice-label"><input type="radio" name="q3" value="D"> ง. แอปเปิลจะหายไปจากหน้าจอ</label>
    <button class="check-btn" onclick="checkAnswer('q3', 'A', 'msg3')">ส่งคำตอบ</button>
    <div id="msg3" class="result-msg"></div>
  </div>
</div>

msgBox.style.display = "block";
    if (selected === "") {
      msgBox.innerHTML = "⚠️ กรุณาเลือกคำตอบก่อนนะครับ";
      msgBox.style.color = "#FF9800";
    } else if (selected === correctVal) {
      msgBox.innerHTML = "🎉 ถูกต้องครับ! เก่งมาก";
      msgBox.style.color = "green";
    } else {
      msgBox.innerHTML = "❌ ยังไม่ใช่นะครับ ลองใหม่นะ";
      msgBox.style.color = "red";
    }
  }
</script>