เหลือจะเชื่อ!!! Gemini สร้างบทเรียนพร้อมแบบทดสอบไพทอนง่ายๆใน 1 นาที
แจก Prompt ฟรีใต้โพสต์จ้าาาา ไปลองเล่นกันครับ
https://sites.google.com/sapit.ac.th/plan/python
คุณคือผู้เชี่ยวชาญด้านการออกแบบสื่อการสอนดิจิทัลและนักพัฒนาเกมบนเว็บไซต์ (Web-based Game Developer) ที่มีความสามารถในการสร้างสรรค์เนื้อหาการเรียนรู้ที่ซับซ้อนให้กลายเป็นเกมที่สนุกสนานและโต้ตอบได้
เป้าหมาย (Goal):
สร้างเว็บไซต์แบบหน้าเดียว (Single-page Application) สำหรับนักเรียนชั้นมัธยมศึกษาปีที่ 2 เพื่อใช้เป็นบทเรียนและเกมทบทวนความรู้เบื้องต้นเกี่ยวกับภาษา Python โดยต้องเปลี่ยนเนื้อหาจากเอกสาร PDF ที่ให้มา ให้กลายเป็นประสบการณ์การเรียนรู้ที่น่าตื่นเต้น ท้าทาย และส่งเสริมความเข้าใจ
กลุ่มเป้าหมาย (Target Audience):
นักเรียนชั้นมัธยมศึกษาปีที่ 2 (ช่วงอายุ 13-14 ปี) ดังนั้น ภาษาที่ใช้และดีไซน์ต้องมีความทันสมัย เป็นมิตร และเข้าใจง่าย
เนื้อหาหลัก (Core Content):
ส่วนทบทวนบทเรียน: สรุปเนื้อหาสำคัญตามหลักสูตรแกนกลางฯ สำหรับ ม.2 ได้แก่:
การแสดงผลด้วย print()
ตัวแปรและชนิดข้อมูลพื้นฐาน (String, Integer, Float)
การรับข้อมูลด้วย input()
ตัวดำเนินการทางคณิตศาสตร์พื้นฐาน
ส่วนเกมทดสอบ: สร้างชุดคำถามปรนัย (Multiple Choice) จำนวน 8-10 ข้อ ที่ครอบคลุมเนื้อหาข้างต้น
ฟีเจอร์ที่ต้องการ (Required Features):
หน้าลงทะเบียน: ก่อนเริ่มเกม ต้องมีฟอร์มให้นักเรียนกรอก ชื่อ-สกุล, ระดับชั้น (มีตัวเลือก ม.2/1 ถึง ม.2/13), และ เลขที่
ระบบจับเวลา: ในแต่ละคำถาม ให้มีเวลาจำกัด 15 วินาที พร้อมแสดงเวลาที่เหลืออย่างชัดเจน และมีเอฟเฟกต์กระตุ้นเมื่อใกล้หมดเวลา
ระบบเกม:
แสดงคำถามและตัวเลือกทีละข้อ
ตรวจคำตอบและให้ผลตอบรับ (Feedback) ทันที (เช่น ถูก/ผิด พร้อมเสียงประกอบ)
เมื่อหมดเวลาหรือตอบผิด ให้แสดงเฉลยของข้อนั้นๆ
หน้าสรุปผล:
แสดงข้อมูลนักเรียนที่กรอกไว้
แสดงคะแนนที่ทำได้ (เช่น 7/8) และเวลาทั้งหมดที่ใช้ไป
มีเอฟเฟกต์พิเศษ (เช่น คอนเฟตติ) เมื่อนักเรียนทำคะแนนได้ดี
โหมดทบทวนคำตอบ (เฉลย):
หลังจากดูคะแนนแล้ว ต้องมีปุ่มให้นักเรียนกดเข้าไปดูเฉลยทั้งหมดได้
ในหน้าเฉลย ให้แสดงคำถาม, ตัวเลือกทั้งหมด, ไฮไลท์คำตอบที่ถูก, แสดงคำตอบที่นักเรียนเลือก (ถ้าผิด), และมีคำอธิบายเหตุผลอย่างละเอียดในแต่ละข้อ
ข้อกำหนดเพิ่มเติม (Additional Requirements):
ดีไซน์: ต้องมีความสวยงาม น่าดึงดูด ใช้สีสันสดใส มีอนิเมชันประกอบเพื่อสร้างความ "ว้าว"
Footer: ใส่ข้อความ "เว็บไซต์บทเรียนออนไลน์ วิทยาการคำนวณ ม.2 โดย ครูกิ๊กจ้า :: กฤติยา พลหาญ"
เทคโนโลยี: ใช้ HTML, CSS (Tailwind CSS), และ JavaScript โดยต้องเป็นโค้ดที่สมบูรณ์ในไฟล์เดียว
⚙️ แนะนำฟังก์ชันสำคัญที่ขับเคลื่อนเว็บไซต์
เพื่อให้เว็บไซต์ทำงานได้อย่างราบรื่น ผมได้เขียนโค้ด JavaScript ที่มีฟังก์ชันหลักๆ ดังนี้ครับ
startGame()
หน้าที่: เป็นฟังก์ชันเริ่มต้นเกม ใช้สำหรับ "รีเซ็ต" ค่าต่างๆ ให้พร้อมเล่นใหม่ เช่น ตั้งค่าคะแนนเป็น 0, ล้างคำตอบเก่า, เริ่มนับเวลาที่ใช้ไปทั้งหมด และเรียกใช้ฟังก์ชัน showQuestion() เพื่อแสดงคำถามข้อแรก
showQuestion()
หน้าที่: แสดงคำถามและตัวเลือกของข้อปัจจุบันขึ้นมาบนหน้าจอ จะถูกเรียกใช้ทุกครั้งที่ขึ้นข้อใหม่ โดยฟังก์ชันนี้จะดึงข้อมูลคำถามจากชุดข้อมูลที่เราเตรียมไว้ และสร้างปุ่มตัวเลือกขึ้นมาทีละปุ่ม
startTimer()
หน้าที่: เริ่มนับเวลาถอยหลัง 15 วินาทีสำหรับแต่ละข้อ จะมีการอัปเดตตัวเลขบนหน้าจอทุกๆ 1 วินาที และถ้าเวลาหมดลง (เหลือ 0) มันจะสั่งให้เกมเฉลยคำตอบทันที
selectOption(button, option)
หน้าที่: ทำงานเมื่อนักเรียนกดเลือกคำตอบ จะหยุดเวลาทันที, บันทึกคำตอบของนักเรียน, และส่งข้อมูลไปให้ฟังก์ชัน handleAnswer() เพื่อตรวจว่าถูกหรือผิด
handleAnswer(isCorrect, selectedButton)
หน้าที่: จัดการผลลัพธ์หลังจากนักเรียนตอบ จะเพิ่มคะแนนถ้าตอบถูก, แสดงผลตอบรับ (Feedback) บนหน้าจอ (เช่น "ถูกต้องครับ!"), เล่นเสียงประกอบ, และไฮไลท์ตัวเลือกที่ถูกและผิด หลังจากนั้นจะรอ 2 วินาที แล้วเรียก showQuestion() เพื่อไปข้อต่อไป หรือเรียก showResults() ถ้าเป็นข้อสุดท้าย
showResults()
หน้าที่: แสดงหน้าสรุปผลทั้งหมด จะหยุดนับเวลาที่ใช้ไป, ซ่อนหน้าเกม, และแสดงหน้าผลลัพธ์ที่ประกอบด้วยข้อมูลนักเรียน, คะแนน, และเวลา พร้อมกับสั่งให้เอฟเฟกต์คอนเฟตติทำงานถ้าคะแนนดี
populateReviewSection()
หน้าที่: สร้างเนื้อหาสำหรับหน้า "ทบทวนคำตอบ" โดยจะวนลูปอ่านชุดคำถามทั้งหมด แล้วสร้างการ์ดเฉลยทีละข้อ ซึ่งในการ์ดแต่ละใบจะแสดงคำถาม, คำตอบที่ถูกต้อง, คำตอบที่นักเรียนเลือก, และคำอธิบายอย่างละเอียด
ไม่มีความคิดเห็น:
แสดงความคิดเห็น