Christmas Quiz Runner 

#แจกเกม #QuizRunner ธีมคริสมาส เอาไว้เล่นกับนักเรียนฟรี

🧚🏻‍♀️✨ ลองไปเล่นเกม Quiz Runner ต้นฉบับดูก่อนนะคะ🧚🏻‍♀️ ✨

https://sites.google.com/chula.ac.th/gemini/library-examples/%E0%B8%95%E0%B8%A7%E0%B8%AD%E0%B8%A2%E0%B8%B2%E0%B8%87%E0%B8%81%E0%B8%88%E0%B8%81%E0%B8%A3%E0%B8%A3%E0%B8%A1-canvas/quiz-runner-game-christmas-app-script?authuser=0

🧚🏻‍♀️✨วิธีการสร้างเกม 🧚🏻‍♀️✨

🌠✨รูปแบบที่ 1 เล่นเกมแบบไม่บันทึกคะแนนผู้เรียน (#GeminiCanvas)

1. คลิกที่ลิงค์ต้นแบบเกม https://gemini.google.com/share/32e984749f06

2. เลือกคำว่า Try Gemini Canvas

3. Gemini จะทำสำเนาเกมไปที่ Account ของท่าน

4. สามารถพิมพ์คำสั่งปรับแต่ง เช่น เปลี่ยนธีมเป็นสวนสนุก เปลี่ยนคำถามเป็นเรื่องห่วงโซ่อาหาร เป็นต้น

5. จะได้เกมสำหรับนำไปแชร์หรือฝังรหัสในเว็บไซต์ พร้อมเล่นได้ทันที

🌠✨รูปแบบที่ 2 เล่นเกมแบบบันทึกคะแนนผู้เรียนใน (#GeminiCanvas & #AppScript)

🚀ส่วนที่ 1 การเตรียมเกม

1. ทำตามขั้นตอนของรูปแบบที่ 1

2. ไปที่แชร์แล้วเลือก คัดลอกเนื้อหา หรือไปที่ Code แล้วคัดลอก Code ทุกบรรทัดเก็บไว้ใช้ในส่วนที่ 3

🚀ส่วนที่ 2 การเตรียมไฟล์สำหรับเก็บคะแนน

1. สร้าง Google Sheet เปล่า ตั้งชื่อ Quiz Runner Game ตั้งชื่อแท็บแรกว่า "Sheet1" (ภาษาอังกฤษเท่านั้น เพื่อให้ตรงกับ Code.gs ที่เตรียมไว้ให้)

2. คัดลอก Sheet ID โดยไปที่ URL ของ Google Sheet และ SheetID จะอยู่ใรตำแหน่งตามตัวอย่าง คือ /d/SheetID/edit

3. เก็บ SheetID ที่คัดลอกไว้ เพื่อนำไปใช้งานส่วนที่ 3

🚀ส่วนที่ 3 การสร้างเว็บไซต์ที่เชื่อมโยงกับไฟล์เก็บคะแนนด้วย App Script

⭐️ส่วนที่ 3.1 การเตรียมไฟล์ Code.gs เพื่อเชื่อมต่อการเก็บคะแนน

1. ไปที่ Google App Script หรือ script.google.com

2. สร้างโครงการใหม่ จะมีไฟล์ชื่อ Code.gs หรือ รหัส.gs (หากใช้งานแบบภาษาไทย) ขึ้นมาโดยอัตโนมัติ

3. คัดลอก Script ที่เตรียมไว้ให้ด้านล่าง (หรือไปคัดลอกจาก Prompt template หมวด Gemini Canvas ในโครงการ gemini.edii.in.th )

4. เปิดไฟล์ Code.gs ลบ Code เดิมทิ้งให้หมด

5. นำ Script ที่คัดลอกไว้จากข้อ 3 มาวางในไฟล์ Code.gs

6. เปลี่ยน SheetID ให้เป็น ID ที่เราสร้างในส่วนที่ 2 ดังนี้

- บรรทัดที่ 10 นำ SheetID ไปแทนที่ในข้อความ "xxx" เพื่อบันทึกคะแนนการเล่นเกมไปยังไฟล์เก็บคะแนน

- บรรทัดที่ 36 นำ SheetID ไปแทนที่ในข้อความ "xxx" เพื่อเรียกดูคะแนนที่บันทึกไว้มาแสดงผลการจัดอันดับ 10 อันดับเมื่อเล่นเกมจบ

7. ท่านจะได้ Script สำหรับสั่งงานให้รับผลคะแนนไปบันทึกหรือเรียกคะแนนกลับมาแสดงผล

⭐️ส่วนที่ 3.2 การนำเกมมาเชื่อมต่อเข้ากับ App Script ให้สมบูรณ์

1. ในโปรเจคของ App Script ที่เตรียมไว้จะมีไฟล์ตั้งต้นแค่ Code.gs ให้ทำการเพิ่มไฟล์ประเภท HTML ตั้งชื่อว่า index (จะแสดงผลเป็น index.html)

2. เปิดไฟล์ index.html ลบ Code ที่มีอยู่เดิมทั้งหมด

3. นำ Code เกมที่เตรียมไว้จากส่วนที่ 1 คัดลอกและมาวางในไฟล์ index.html

4. ท่านจะได้หน้าเว็บไซต์สำหรับเล่มเกม

⭐️ส่วนที่ 3.3 การทำให้ระบบใช้งานได้ (Deploy)

เมื่อเตรียมส่วนที่ 3.1 และส่วนที่ 3.2 เสร็จเรียบร้อยแล้ว ให้ดำเนินการสั่งงานให้ระบบใช้งานได้ (Deploy) ดังนี้

1. ไปที่ปุ่มสีน้ำเงิน "การทำให้ใช้งาน" หรือ Deploy

2. เลือกการทำให้ใช้งานได้ใหม่ หรือ New deployment

3. คลิกที่รูปฟันเฟือง แล้วเลือกรูปแบบเป็นเว็บแอพ (Web app)

4. ตั้งค่าการเผยแพร่เป็นสาธารณะสำหรับทุกคน (Anyone)

5. คลิกทำให้ใช้งานได้ หรือ Deploy

6. คลิกคัดลอก (Copy) Web app URL (ในส่วนนี้จะมีหลายลิงค์ ให้เลื่อนหาคำว่า Web app ก่อนนะคะ ค่อยคัดลอก)

7. นำ Web app URL ไปเปิดใช้งานบน Browser เช่น Google Chrome

8. สามารถนำ Web app URL ไปฝัง (Embed) ใน Google Site เพื่อเผยแพร่ผ่านเว็บไซต์ที่มีอยู่แล้วได้เลย

เท่านี้ก็จะได้เกมจาก Gemini Canvas ในธีม Quiz Runner Game ไปเล่นกับเด็ก ๆ และบันทึกคะแนนเก็บไว้ได้แล้วค่ะ 

ด้านล่างต่อไปนี้เป็น Script สำหรับ Code.gs นะคะ

_________________________________

function doGet(e) {

 return HtmlService.createHtmlOutputFromFile('index')

     .setTitle("Quiz Runner Game (Xmas Edition)")

     .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)

     .addMetaTag('viewport', 'width=device-width, initial-scale=1');

}

// ฟังก์ชันบันทึกคะแนนและผลรายข้อ

function saveScore(name, score, questionResults) {

 var sheetId = "xxx";

 var sheetName = "Sheet1";

 try {

   var doc = SpreadsheetApp.openById(sheetId);

   var sheet = doc.getSheetByName(sheetName);

   var date = new Date();

   // สร้างแถวข้อมูล: [วันที่, ชื่อ, คะแนนรวม, ...ผลคะแนนรายข้อ]

   // ผลรายข้อจะเป็น Array เช่น [10, 0, 10, 10, ...]

   var rowData = [date, name, parseInt(score)];

   if (questionResults && Array.isArray(questionResults)) {

     rowData = rowData.concat(questionResults);

   }

   sheet.appendRow(rowData);

   return "success";

 } catch (e) {

   Logger.log(e);

   return "error: " + e.toString();

 }

}

function getLeaderboard() {

 var sheetId = "xxx";

 var sheetName = "Sheet1";

 try {

   var doc = SpreadsheetApp.openById(sheetId);

   var sheet = doc.getSheetByName(sheetName);

   var lastRow = sheet.getLastRow();

   if (lastRow < 2) return [];

   // ดึงเฉพาะชื่อ (Col B) และคะแนนรวม (Col C)

   var range = sheet.getRange(2, 2, lastRow - 1, 2);

   var values = range.getValues();

   // แปลงข้อมูลและกรองแถวว่างออก (สำคัญมาก! ช่วยแก้ปัญหา Leaderboard ไม่ขึ้น)

   var scores = values

     .map(function(row) {

       return { name: row[0], score: parseInt(row[1]) };

     })

     .filter(function(item) {

       // เอาเฉพาะที่มีชื่อและคะแนนเป็นตัวเลขเท่านั้น

       return item.name && item.name.toString().trim() !== "" && !isNaN(item.score);

     });

   // เรียงจากมากไปน้อย

   scores.sort(function(a, b) { return b.score - a.score; });

   return scores.slice(0, 10);

 } catch (e) {

   Logger.log(e);

   return [];

 }

}