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

Back

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

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

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

Title

Description

Keyword

Detail

.proj-header {
    background-color: #9C27B0;
    color: #FFFFFF;
    padding: 25px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border-bottom: 5px solid #6A1B9A; /* ม่วงมืด */
    background-image: linear-gradient(45deg, #BA68C8, #7B1FA2);
  }

.proj-content {
    padding: 30px;
  }

.mission-box {
    background-color: white;
    border: 2px dashed #9C27B0;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 25px;
    text-align: center;
  }
  
  .mission-title {
    color: #7B1FA2;
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 10px;
  }

/* --- Card Accordion --- */
  .step-card {
    background-color: white;
    border: 2px solid #CE93D8;
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  }
  
  .step-header {
    background-color: #F3E5F5;
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 6px solid #8E24AA; /* แถบสีม่วง */
  }

.step-header:hover { background-color: #E1BEE7; }
  
  .step-title {
    font-size: 18px;
    font-weight: bold;
    color: #6A1B9A;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .icon-box { font-size: 24px; width: 40px; text-align: center; }
  .toggle-icon { font-size: 20px; color: #9C27B0; transition: transform 0.3s; }

/* เนื้อหา */
  .step-detail {
    display: none;
    padding: 20px;
    background-color: white;
    border-top: 1px solid #eee;
    color: #444;
    line-height: 1.6;
  }

.step-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 20px auto 10px;
    border-radius: 8px;
    border: 3px solid #E1BEE7;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }
  .img-caption { text-align: center; font-size: 14px; color: #666; margin-bottom: 20px; font-style: italic; }

/* Code Block Simulation */
  .code-block {
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    font-family: monospace;
    color: #333;
    margin: 10px 0;
    border-left: 4px solid #7B1FA2;
  }

/* Active State */
  .step-card.active .step-detail { display: block; }
  .step-card.active .toggle-icon { transform: rotate(180deg); }
  .step-card.active .step-header { background-color: #E1BEE7; }

/* --- Challenge --- */
  .challenge-section {
    margin-top: 40px;
    background-color: #FFF3E0; /* พื้นหลังสีส้มอ่อนตัดกับม่วง */
    border: 3px solid #FF9800;
    border-radius: 15px;
    padding: 25px;
    position: relative;
    text-align: center;
  }
  .challenge-section::after {
      content: '🏆';
      font-size: 40px;
      position: absolute;
      top: -20px;
      right: -10px;
      transform: rotate(15deg);
  }
  .challenge-btn {
    background-color: #7B1FA2;
    color: white;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: bold;
    display: inline-block;
    margin-top: 15px;
    box-shadow: 0 4px #4A148C;
    transition: all 0.2s;
  }
  .challenge-btn:hover { background-color: #8E24AA; color: white; transform: scale(1.05); }

</style>

<div class="scratch-proj-container">
  <div class="proj-header">🚀 ภารกิจสร้างเกมแรก: แมวเหมียวล่าสมบัติ (Coin Hunter)</div>

<div class="proj-content">
    <div class="mission-box">
      <div class="mission-title">📜 ภารกิจของคุณ</div>
      <p>นำความรู้ทั้ง 4 บท (Events, Loop, Condition, Variable) มาประกอบร่าง!<br>
      <b>เป้าหมาย:</b> สร้างเกมให้แมวเดินเก็บเหรียญเพื่อสะสมคะแนน</p>
    </div>

<p style="text-align:center; font-size:16px; color:#6A1B9A; margin-bottom:20px; font-weight:500;">
      👇 <b>ทำตาม 3 ขั้นตอนง่ายๆ นี้เลย!</b> 👇
    </p>

<div class="step-card active" onclick="toggleStep(this)">
      <div class="step-header">
        <div class="step-title"><span class="icon-box">🎮</span> ขั้นที่ 1: บังคับแมวเดิน (Events + Condition)</div>
        <div class="toggle-icon">▼</div>
      </div>
      <div class="step-detail">
        <p>อันดับแรก เราต้องทำให้ผู้เล่นควบคุมแมวได้ก่อน</p>
        <div class="code-block">
          <b>เมื่อคลิกธงเขียว 🚩</b><br>
          <b>วนซ้ำตลอด (Forever) 🔁</b><br>
            ถ้า <span style="color:orange;">[กดปุ่มขวา 👉]</span> แล้ว <span style="color:blue;">[เปลี่ยน x ทีละ 10]</span><br>
            ถ้า <span style="color:orange;">[กดปุ่มซ้าย 👈]</span> แล้ว <span style="color:blue;">[เปลี่ยน x ทีละ -10]</span>
        </div>
        <p><i>💡 <b>เทคนิค:</b> การใส่ If ไว้ใน Forever จะทำให้โปรแกรมเช็คปุ่มกดตลอดเวลา ทำให้แมวเดินลื่นไหลไม่สะดุดครับ</i></p>
        <img src=" https://smartyquizkids.com/assets/images/smn/eb160de1de89d9058fcb0b968dbbbd6820260203093717.jpg" style="width: 100%;">
      </div>
    </div>

<div class="step-card active" onclick="toggleStep(this)">
      <div class="step-header">
        <div class="step-title"><span class="icon-box">💰</span> ขั้นที่ 2: เหรียญหายตัวได้ (Sensing)</div>
        <div class="toggle-icon">▼</div>
      </div>
      <div class="step-detail">
        <p>มาเขียนโค้ดที่ตัว <b>"เหรียญ (Coin)"</b> กันบ้าง</p>
        <div class="code-block">
          <b>เมื่อคลิกธงเขียว 🚩</b><br>
          <b>วนซ้ำตลอด (Forever) 🔁</b><br>
            ถ้า <span style="color:#29B6F6;">[แตะโดน แมวเหมียว 🐱]</span> แล้ว<br>
              1. <span style="color:blue;">[ไปที่ตำแหน่งสุ่ม (Random Position)]</span><br>
              2. <span style="color:#E64A19;">[เล่นเสียง "Ding"]</span>
        </div>
        <p><i>💡 <b>อธิบาย:</b> พอแมวเดินมาชนปุ๊บ เหรียญจะหนีไปโผล่ที่อื่นทันที ทำให้เราต้องตามไปเก็บเรื่อยๆ ครับ</i></p>
        <img src=" https://smartyquizkids.com/assets/images/smn/82161242827b703e6acf9c726942a1e420260203093809.jpg" style="width: 100%;">
      </div>
    </div>

<div class="step-card active" onclick="toggleStep(this)">
      <div class="step-header">
        <div class="step-title"><span class="icon-box">🏆</span> ขั้นที่ 3: ระบบคะแนน (Variable)</div>
        <div class="toggle-icon">▼</div>
      </div>
      <div class="step-detail">
        <p>เกมจะสนุกได้ไงถ้าไม่มีคะแนน! มาสร้าง Variable ชื่อ <b>"Score"</b> กัน</p>
        <p><b>เพิ่มโค้ดเข้าไปในส่วนของ "เหรียญ":</b></p>
        <div class="code-block">
          <b>เมื่อคลิกธงเขียว 🚩</b><br>
          <span style="color:#D84315;">👉 ตั้งค่า [Score] เป็น 0 (เริ่มเกมรีเซ็ตคะแนน)</span><br>
          <b>วนซ้ำตลอด (Forever) 🔁</b><br>
            ถ้า <span style="color:#29B6F6;">[แตะโดน แมวเหมียว 🐱]</span> แล้ว<br>
              <span style="color:#D84315;">👉 เปลี่ยนค่า [Score] ทีละ 1 (บวกคะแนน!)</span><br>
              [ไปที่ตำแหน่งสุ่ม]
        </div>
       <img src=" https://smartyquizkids.com/assets/images/smn/76dc611d6ebaafc66cc0879c71b5db5c20260203093914.jpg" style="width: 100%;">
      </div>
    </div>

<div class="challenge-section">
      <h3 style="color:#E65100; margin-top:0;">🎉 ยินดีด้วย! เกมแรกของคุณเสร็จแล้ว</h3>
      <p>ตอนนี้คุณคือ <b>"Game Creator"</b> เต็มตัวแล้วนะ</p>
      <p>ลองนำโค้ดไปทำจริงใน Scratch แล้วส่งผลงานมาอวดเพื่อนๆ กันเถอะ!</p>
      <a href="https://scratch.mit.edu/" target="_blank" class="challenge-btn">ไปที่เว็บ Scratch เพื่อสร้างเกม 🚀</a>
    </div>

</div>
</div>