วิธีสร้างเกมการศึกษา วิชาภาษาไทย เรื่องเวสสันดรชาดก

27/04/2025

วิธีสร้างเกมการศึกษา วิชาภาษาไทย เรื่องเวสสันดรชาดก พร้อมบันทึกผลคะแนนอัตโนมัติด้วย Google App Script

สวัสดีครับ วันนี้ครูเชียงรายมีบทความพิเศษสำหรับครูและผู้สนใจการจัดการเรียนรู้ผ่าน “เกมการศึกษา” มาฝากกันครับ โดยเนื้อหานี้จะพาไปดูวิธีสร้างเกมวิชาภาษาไทย เรื่อง “เวสสันดรชาดก” ที่เชื่อมต่อกับ Google Sheets เพื่อเก็บข้อมูลผลคะแนนของผู้เล่นแบบอัตโนมัติ เหมาะสำหรับครูที่อยากนำเทคโนโลยีไปใช้ในการจัดการเรียนรู้แบบ Active Learning หรือ Game-based Learning ครับ

ขอบคุณข้อมูลจาก เรียนรู้ AI ไปกับครูหนุ่ม

จุดเด่นของเกมเวสสันดรชาดก

คำถามแบบปรนัย 10 ข้อ พร้อมระบบจับเวลา 1 นาทีต่อข้อ
ผู้เล่นกรอกชื่อ-นามสกุล, ชั้น, เลขที่ ก่อนเริ่มเกม
ระบบคิดคะแนน +1 เมื่อตอบถูก / -1 เมื่อตอบผิด
เอฟเฟกต์เสียงสนุกเมื่อกดคำตอบ
ได้คะแนนเต็ม 10 จะแสดงหน้าจอแสดงความยินดีพร้อมดาว “คุณคือแฟนพันธุ์แท้ เวสสันดรชาดก”
เก็บสถิติการเล่นย้อนหลังใน LocalStorage
ส่งข้อมูลไปยัง Google Sheets อัตโนมัติ

ขั้นตอนที่ 1: สร้าง Google Sheet เพื่อเก็บข้อมูล

ไปที่ Google Sheets
ตั้งชื่อว่า “เวสสันดรชาดก Quiz Results”
ใส่หัวตาราง: วันที่/เวลา | ชื่อ-นามสกุล | ชั้น | เลขที่ | คะแนน
บันทึก Sheet และเปิดใช้ Google Apps Script โดยคลิก Extensions > Apps Script

ขั้นตอนที่ 2: เขียนโค้ด Google Apps Script

ใช้โค้ดนี้ในไฟล์ Script:

function doGet(e) {
 return handleResponse(e);
}

function doPost(e) {
 return handleResponse(e);
}

function handleResponse(e) {
 var params = e.parameter;
 if (!params.name || !params.class || !params.number || !params.score) {
   return ContentService.createTextOutput(JSON.stringify({
     'result': 'error',
     'message': 'Missing required parameters'
   })).setMimeType(ContentService.MimeType.JSON);
 }
 try {
   var spreadsheet = SpreadsheetApp.openById("14o9meG5Z6JAXObTPZfN5cy-lfimcrLeWENMdR0L7Xsc");
   var sheet = spreadsheet.getSheetByName("results");
   sheet.appendRow([
     new Date(),
     params.name,
     params.class,
     params.number,
     params.score
   ]);
   return ContentService.createTextOutput(JSON.stringify({
     'result': 'success',
     'message': 'Data saved successfully'
   })).setMimeType(ContentService.MimeType.JSON);
 } catch(error) {
   return ContentService.createTextOutput(JSON.stringify({
     'result': 'error',
     'message': error.toString()
   })).setMimeType(ContentService.MimeType.JSON);
 }
}

หลังจากนั้นให้ Deploy > New deployment > Web App
เลือก “Execute as: Me” และ “Anyone” แล้ว Copy URL มาวางใน HTML ของเกม

ขั้นตอนที่ 3: แทรกฟังก์ชันใน HTML เกม

เพิ่มโค้ด JavaScript สำหรับส่งข้อมูลไปยัง Google Sheets ดังนี้:

function sendToGoogleSheets(data) {
  const scriptURL = 'https://script.google.com/macros/s/AKfycbyZpOfGsoBWD2rBH-RKvJHofmssHUT2SoXc82eNQ190i2kYhbIM531bl9MMZi_AGAhN/exec';
  const formData = new FormData();
  formData.append('name', data.player.name);
  formData.append('class', data.player.class);
  formData.append('number', data.player.number);
  formData.append('score', data.score);

  fetch(scriptURL, {
    method: 'POST',
    body: formData
  })
  .then(response => console.log('Success!', response))
  .catch(error => console.error('Error!', error.message));
}

ในฟังก์ชัน endQuiz() ให้เพิ่ม sendToGoogleSheets(gameResult); เพื่อส่งข้อมูลเมื่อจบเกม

Footer:

จัดทำโดย ครูภัสภูมิ กิตติรัตนบุตร
โรงเรียนชุมพลโพนพิสัย
เว็บไซต์: www.kruchiangrai.net

สรุป

เกมการศึกษาเรื่องเวสสันดรชาดกนี้สามารถใช้สอนในห้องเรียนได้จริง พร้อมฟีเจอร์ที่ช่วยครูเก็บคะแนน บันทึกข้อมูล และวิเคราะห์ผลการเรียนรู้ได้แบบอัตโนมัติ เหมาะกับยุคดิจิทัลที่การเรียนรู้ต้องสนุกและวัดผลได้ในทันที

ครูเชียงรายหวังว่าบทความนี้จะเป็นประโยชน์สำหรับครูทั่วประเทศที่กำลังมองหาแนวทางใหม่ ๆ ในการออกแบบการเรียนรู้เชิงสร้างสรรค์ครับ

แหล่งข้อมูลอ้างอิง: