線上簽到系統
Google試算表
試算表名稱：0603線上點名-自主學習。
欄A:班級，欄B:座號，欄C:姓名，欄D:學號，欄E:核取方塊。
程式碼.gs
function doGet() {
var htmlOutput = HtmlService.createHtmlOutputFromFile('index')
.setTitle('學生線上簽到系統');
return htmlOutput;
}
function searchStudent(studentId) {
var spreadsheet = SpreadsheetApp.openById('Google試算表ID');
var sheet = spreadsheet.getSheetByName('工作表1');
var data = sheet.getDataRange().getValues();
for (var i = 1; i < data.length; i++) {
if (data[i][3] === studentId) {
sheet.getRange(i + 1, 5).setValue(true);
return data[i][2] + " 簽到完成";
}
}
return '查無此學號';
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>學生線上簽到系統</h1>
<input type="text" id="studentId" placeholder="請輸入學生學號（6碼）">
<button onclick="signIn()">簽到</button>
<p id="result"></p>
<script>
function signIn() {
var studentId = document.getElementById('studentId').value;
google.script.run.withSuccessHandler(updateResult).searchStudent(studentId);
}
function updateResult(result) {
document.getElementById('result').textContent = result;
document.getElementById("studentId").value = "";
}
</script>
</body>
</html>
給chatGPT的詢問內容
你是一位教師，想要使用Google試算表完成一個線上簽到系統。
Google試算表結構如下：
1.ID: 改成自己的試算表ID。
2.工作表名稱：工作表1。
3.第一列是標題列。
4.欄A:班級，欄B:座號，欄C:姓名，欄D:學號，欄E:核取方塊。
線上簽到系統功能
1.於GAS的「檔案」>「HTML」新增一個index.html網頁表單，網頁標題「學生線上簽到系統」，輸入學生學號(6碼)，可輸入學生學號(6碼)當作簽到。
2.透過「學號」尋找Google試算表的相對學號。
3.找到學號則簽到成功，找不到則簽到未成功。
4.簽到成功：核取方塊打勾，回傳姓名給html。簽到未成功：回傳無此學號。
5.將GAS程式碼打包成網頁應用程式。
請詳細解說撰寫步驟。
自行加入
GAS編輯器的index.html：
function updateResult(result) {
document.getElementById('result').textContent = result;
document.getElementById("studentId").value = ""; //清除已輸入的學號
}