border: 1px solid #333; z-index: 1; background: rgba(255,255,255,0.9); box-shadow: 0px 8px 20px rgba(255,255,255,0.9); width: 400px; border-radius: 10px; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); display: none; } .login-form .login-container{ background: #ffffff; width: 100%; padding: 14px; border-radius: 10px; animation: animate 0.6s; } @keyframes animate{ from{transform: scale(0);} to{transform: scale(1);} } .login-form .login-container .img-container{ text-align: center; margin: 24px 0 12px 0;
position: relative; } .login-form .login-container img{ width: 40%; border-radius: 50%; } .login-form .login-container .close{ position: absolute; top: -20px; right: 10px; font-size: 30px; color: #ff4367; cursor: pointer; } .login-form .container label{ display: block; margin-top: 8px; font-size: 17px; color: #666; font-weight: 500; } input[type="text"], input[type="password"]{ width: 100%; padding: 12px 14px; color: #555;
font-size: 16px; border: 1px solid #666; border-radius: 5px; outline: none; margin-top: 4px; } input[type="submit"]{ font-size: 24px; width: 100%; color: #555; font-weight: 600; border: 1px solid #666; border-radius: 8px; cursor: pointer; padding: 11px 12px; margin-top: 13px; } input[type="submit"]:hover{ color: #fff; background: #ff4367; } .login-form .checkbox{ display: flex; align-items: center; gap: 5px; margin-top: 10px;
font-size: 14px; } .login-form .checkbox a{ cursor: pointer; color: #555; } .login-form .password{ font-size: 14px; color: #555; margin: 12px 0; display: flex; align-items: center; gap: 5px; } .login-form .password a{ color: #ff4367; cursor: pointer; } #loading{ background:#ff4367; background-size:10%; height:100vh; width:100%; position:fixed; z-index:100; }
</style>
Line Hackathon27 ระบบ การใช การประเมินมุงเนนผลปฏิบัติ/กิจเฉพาะ แสดงผลผาน line Hackathon27 Code
Code.gs /**********************************************************************/ //** # Title: PSN //** # Update: V1. 20/02/2023 - 13.30 PM //** # Developed by: ร.ท.พิษณุ ปนชาติ 095-3429374 //** # Email: [email protected] //** # Line ID: nu2739 //** # Tactical Studies Section //** # Education //** # Army Non Commissioned Officer School /*********************************************************************** /** เรียกหนาเพจ */ function doGet() { return HtmlService.createTemplateFromFile('index').evaluate() .setTitle('PSN Test NCO') .setFaviconUrl('https://sv1.picz.in.th/images/2022/11/02/v5V9zI.png') .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) .addMetaTag('viewport', 'width=device-width, initial-scale=1') } /** ดึงไฟล */ function include(file) { return HtmlService.createHtmlOutputFromFile(file).getContent() } /** เกร็ดความรู ----------------------------- * JavaScript สมัยใหม นิยมใช let และ const * let จะใชกับตัวแปรที่สามารถเปลี่ยนคาได * const จะใชกับตัวแปรคงที่ (ไมสามารถเปลี่ยนคาได) -----------------------------------------*/
/** กำหนดคา Global Variable */ const ss = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0] /** บันทึกขอมูล */ function createData(obj) { /** * 1. กำหนดตัวแปร id เพื่อคนหา id ในตำแหนง getRange("A1:A") โดยใช createTextFinder(ไอดี) กำหนดใหตรงกับคาใช matchEntireCell(true) และ matchCase(true) ถาไมเจอใหหาตอไป findNext() * 2. กำหนดตัวแปร output เปนแบบ Object * 3. ใช if-else กำหนดเงื่อนไขจากการหาคา id ถา output ไมเทากับ null แสดงวามี id อยูแลว ถาเทากับ null แสดงวา วางก็ให appendRow เพื่อนำขอมูลลงแถว * 4. จากนั้นใหดึง data ออกมาแลวกลับไปรีเทิรนคา output.data ทางฝง javascript */ // เริ่มเขียนโคด let id = ss.getRange("A1:A").createTextFinder(obj.d1).matchEntireCell(true).matchCase(true).findNext() let output ={} if(id !==null){ Logger.log( 'มี ID') output.result=false }else{ output.result=true ss.appendRow([ obj.d1, obj.d2, obj.d3, obj.d4, obj.d5, obj.d6, obj.d7, obj.d8, obj.d9, obj.d10, obj.d11,
obj.d12, obj.d13, obj.d14, obj.d15, obj.d16, obj.d17, obj.d18, obj.d19, obj.d20, obj.d21, // obj.d22, // obj.d23, // obj.d24, // obj.d25, // obj.d26, // obj.d27, // obj.d28, // obj.d29, // obj.d30, // obj.d31, // obj.d32, // obj.d33, // obj.d34, // obj.d35, ]) data = ss.getRange(ss.getLastRow(),1,1, ss.getLastColumn()).getValues()[0] output.data = data } return output } /** คนหาขอมูลมาแสดง */ function readData(id) { /**
* 1. กำหนดตัวแปร row เพื่อคนหาแถวของ id สำหรับอานขอมูลในแถวนั้นในตำแหนง "A1:A" โดยใช createTextFinder , matchEntireCell , matchCase และตามดวย getRow * 2. ลอง Logger row เพื่อดูวา id อยูแถวไหนของชีต * 3. ใช if-else กำหนดเงื่อนไขจากการหาแถว ถา row นั้นเทากับวาง ให Log ขอความวา ไมมี ID นี้ ถาไมวางหรือเจอแถวให ดึง data ออกมา * 4. ทดสอบลอง Log ดูคา data และรีเทิรน data */ // เริ่มเขียนโคด let row = ss.getRange("A1:A").createTextFinder(id).matchEntireCell(true).matchCase(true).findNext().getRow() Logger.log(row) if (row == null){ Logger.log('ไมมี ID') return }else { data = ss.getRange(row,1,1,ss.getLastColumn()).getDisplayValues() Logger.log(data) return data } } /** อัพเดทขอมูล */ function updateData(obj,id) { /** * 1. กำหนดตัวแปร row เพื่อคนหาแถวของ id สำหรับอานขอมูลในแถวนั้นในตำแหนง "A1:A" โดยใช createTextFinder , matchEntireCell , matchCase และตามดวย getRow * 2. ลอง Logger row เพื่อดูวา id อยูแถวไหนของชีต * 3. ss.getRange() ไปยังตำแหนงของ (แถวที่เจอ, เริ่มคอลัมภที่ 2, จำนวน 1 แถว, จนถึงคอลัมภสุดทาย-1) และเซ็ตคา setValues ดวย Object * 4. รีเทิรน */ // เริ่มเขียนโคด let row = ss.getRange("A1:A").createTextFinder(id).matchEntireCell(true).matchCase(true).findNext().getRow() Logger.log(row) ss.getRange(row,2,1,ss.getLastColumn()-1).setValues([[ //นับคอลัม obj.d2, obj.d3,
obj.d4, obj.d5, obj.d6, obj.d7, obj.d8, obj.d9, obj.d10, obj.d11, obj.d12, obj.d13, obj.d14, obj.d15, obj.d16, obj.d17, obj.d18, obj.d19, obj.d20, obj.d21, // obj.d22, // obj.d23, // obj.d24, // obj.d25, // obj.d26, // obj.d27, // obj.d28, // obj.d29, // obj.d30, // obj.d31, // obj.d32, // obj.d33, // obj.d34, // obj.d35, ]]) return }
/** ลบขอมูล */ function deleteData(id) { /** * 1. กำหนดตัวแปร row เพื่อคนหาแถวของ id สำหรับอานขอมูลในแถวนั้นโดยใช createTextFinder , matchEntireCell , matchCase และตามดวย getRow * 2. สั่งลบแถว deleteRow(ตัวแปรแถว) * 3. รีเทิรน */ // เริ่มเขียนโคด let row = ss.getRange("A1:A").createTextFinder(id).matchEntireCell(true).matchCase(true).findNext().getRow() ss.deleteRow(row) return } js.html <script> /** ฟงกชั่นบันทึกขอมูล */ function save() { event.preventDefault(); // ทำใหฟอรมคืนคาเดิม if (document.getElementById("data1").value == "") { showError("เพิ่มขอมูลกรุณากรอกรหัสนักเรียน"); return; } if (document.getElementById("data2").value == "") { showError("กรุณากรอกชื่อ-สกุล"); return; } if (document.getElementById("data3").value == "") {
showError("กรุณากรอกสังกัด"); return; } if (document.getElementById("data4").value == "") { showError("กรุณากรอกตอนที่"); return; } if (document.getElementById("data5").value == "") { showError("กรุณากรอกEmail"); return; } if (document.getElementById("data6").value == "") { showError("กรุณากรอกขอมูล"); return; } if (document.getElementById("data7").value == "") { showError("กรุณากรอกขอมูล"); return; } if (document.getElementById("data8").value == "") { showError("กรุณากรอกขอมูล"); return; } if (document.getElementById("data9").value == "") { showError("กรุณากรอกขอมูล"); return;
} if (document.getElementById("data10").value == "") { showError("กรุณากรอกขอมูล"); return; } if (document.getElementById("data11").value == "") { showError("กรุณากรอกขอมูล"); return; } if (document.getElementById("data12").value == "") { showError("กรุณากรอกขอมูล"); return; } if (document.getElementById("data13").value == "") { showError("กรุณากรอกขอมูล"); return; } if (document.getElementById("data14").value == "") { showError("กรุณากรอกขอมูล"); return; } if (document.getElementById("data15").value == "") { showError("กรุณากรอกขอมูล"); return; } if (document.getElementById("data16").value == "") {
showError("เกรุณากรอกขอมูล"); return; } if (document.getElementById("data17").value == "") { showError("กรุณากรอกขอมูล"); return; } if (document.getElementById("data18").value == "") { showError("กรุณากรอกขอมูล"); return; } if (document.getElementById("data19").value == "") { showError("กรุณากรอกขอมูล"); return; } if (document.getElementById("data20").value == "") { showError("กรุณากรอกขอมูล"); return; } if (document.getElementById("data21").value == "") { showError("กรุณากรอกขอมูล"); return; } // if (document.getElementById("data22").value == "") { // showError("กรุณากรอกขอมูล"); // return;
// } // if (document.getElementById("data23").value == "") { // showError("กรุณากรอกขอมูล"); // return; // } // if (document.getElementById("data24").value == "") { // showError("กรุณากรอกขอมูล"); // return; // } // if (document.getElementById("data25").value == "") { // showError("กรุณากรอกขอมูล"); // return; // } // if (document.getElementById("data26").value == "") { // showError("กรุณากรอกขอมูล"); // return; // } // if (document.getElementById("data27").value == "") { // showError("กรุณากรอกขอมูล"); // return; // } // if (document.getElementById("data28").value == "") { // showError("กรุณากรอกขอมูล"); // return; // } // if (document.getElementById("data29").value == "") {
// showError("กรุณากรอกขอมูล"); // return; // } // if (document.getElementById("data30").value == "") { // showError("กรุณากรอกขอมูล"); // return; // } // if (document.getElementById("data31").value == "") { // showError("กรุณากรอกขอมูล"); // return; // } // if (document.getElementById("data32").value == "") { // showError("กรุณากรอกขอมูล"); // return; // } // if (document.getElementById("data33").value == "") { // showError("กรุณากรอกขอมูล"); // return; // } // if (document.getElementById("data34").value == "") { // showError("กรุณากรอกขอมูล"); // return; // } // if (document.getElementById("data35").value == "") { // showError("กรุณากรอกขอมูล"); // return;
// } let obj = {}; obj.d1 = $("#data1").val(); obj.d2 = $("#data2").val(); obj.d3 = $("#data3").val(); obj.d4 = $("#data4").val(); obj.d5 = $("#data5").val(); obj.d6 = $("#data6").val(); obj.d7 = $("#data7").val(); obj.d8 = $("#data8").val(); obj.d9 = $("#data9").val(); obj.d10 = $("#data10").val(); obj.d11 = $("#data11").val(); obj.d12 = $("#data12").val(); obj.d13 = $("#data13").val(); obj.d14 = $("#data14").val(); obj.d15 = $("#data15").val(); obj.d16 = $("#data16").val(); obj.d17 = $("#data17").val(); obj.d18 = $("#data18").val(); obj.d19 = $("#data19").val(); obj.d20 = $("#data20").val(); obj.d21 = $("#data21").val(); // obj.d22 = $("#data22").val(); // obj.d23 = $("#data23").val();
// obj.d24 = $("#data24").val(); // obj.d25 = $("#data25").val(); // obj.d26 = $("#data26").val(); // obj.d27 = $("#data27").val(); // obj.d28 = $("#data28").val(); // obj.d29 = $("#data29").val(); // obj.d30 = $("#data30").val(); // obj.d31 = $("#data31").val(); // obj.d32 = $("#data32").val(); // obj.d33 = $("#data33").val(); // obj.d34 = $("#data34").val(); // obj.d35 = $("#data35").val(); google.script.run.withSuccessHandler(success).createData(obj); // ใหไปเรียกฟงกชั่น createData(obj) ในฝงโคด gs } // เมื่อบันทึกขอมูลเสร็จแลวใหแสดง function success(output) { /** โหลดหนาเพจ ----------------- */ // เวลาเริ่ม let beforeload = new Date().getTime(); if (output.result == true) { $("#myForm")[0].reset(); Swal.fire({ position: "center", icon: "success", title: "บันทึกขอมูลแลว",
showConfirmButton: false, timer: 1500, }); console.log("เพิ่มขอมูลเรียบรอยแลว"); // เวลาสิ้นสุด let afterload = new Date().getTime(); seconds = (afterload - beforeload) / 1000; $("#load_time").show(); $("#load_time").text("ใชเวลาเพิ่มขอมูล " + seconds + " วินาที"); setTimeout(function () { $("#load_time").hide(); }, 5000); /** ---------------------------- */ } else { Swal.fire({ position: "center", icon: "error", title: "บันทึกขอมูลไมสำเร็จ IDซ้ำ", showConfirmButton: false, timer: 1500, }); console.log("เพิ่มขอมูลไมสำเร็จ ID ซ้ำ"); } } /** ฟงกชั่นคนหาขอมูล */ function seach() {
event.preventDefault(); if (document.getElementById("searchID").value == "") { showError("กรุณากรอกชองคนหา"); return; } let id = document.getElementById("searchID").value; google.script.run.withSuccessHandler(findSuccess).readData(id); // ใหไปเรียกฟงกชั่น readData(id) ในฝงโคด gs } // เมื่อคนหาขอมูลเสร็จใหแสดงขอมูลออกมา function findSuccess(output) { if (output !== null && output.length != 0) { /** โหลดหนาเพจ ----------------- */ // เวลาเริ่ม let beforeload = new Date().getTime(); document.getElementById("data1").value = output[0][0]; document.getElementById("data2").value = output[0][1]; document.getElementById("data3").value = output[0][2]; document.getElementById("data4").value = output[0][3]; document.getElementById("data5").value = output[0][4]; document.getElementById("data6").value = output[0][5]; document.getElementById("data7").value = output[0][6]; document.getElementById("data8").value = output[0][7]; document.getElementById("data9").value = output[0][8]; document.getElementById("data10").value = output[0][9]; document.getElementById("data11").value = output[0][10];
document.getElementById("data12").value = output[0][11]; document.getElementById("data13").value = output[0][12]; document.getElementById("data14").value = output[0][13]; document.getElementById("data15").value = output[0][14]; document.getElementById("data16").value = output[0][15]; document.getElementById("data17").value = output[0][16]; document.getElementById("data18").value = output[0][17]; document.getElementById("data19").value = output[0][18]; document.getElementById("data20").value = output[0][19]; document.getElementById("data21").value = output[0][20]; // document.getElementById("data22").value = output[0][21]; // document.getElementById("data23").value = output[0][22]; // document.getElementById("data24").value = output[0][23]; // document.getElementById("data25").value = output[0][24]; // document.getElementById("data26").value = output[0][25]; // document.getElementById("data27").value = output[0][26]; // document.getElementById("data28").value = output[0][27]; // document.getElementById("data29").value = output[0][28]; // document.getElementById("data30").value = output[0][29]; // document.getElementById("data31").value = output[0][30]; // document.getElementById("data32").value = output[0][31]; // document.getElementById("data33").value = output[0][32]; // document.getElementById("data34").value = output[0][33]; // document.getElementById("data35").value = output[0][34];
// เวลาสิ้นสุด let afterload = new Date().getTime(); seconds = (afterload - beforeload) / 1000; $("#load_time").show(); $("#load_time").text("ใชเวลาโหลดขอมูล " + seconds + " วินาที"); setTimeout(function () { $("#load_time").hide(); }, 5000); /** ---------------------------- */ } else { Swal.fire({ position: "center", icon: "error", title: "ไมพบขอมูล", showConfirmButton: false, timer: 1500, }); } } /** ฟงกชั่นอัพเดทขอมูล */ function update() { event.preventDefault(); if (document.getElementById("data1").value == "") { showError("ไมมีรหัสนักเรียน"); return; }
/** โหลดหนาเพจ ----------------- */ // เวลาเริ่ม let beforeload = new Date().getTime(); let id = document.getElementById("searchID").value; let obj = {}; obj.d1 = $("#data1").val(); obj.d2 = $("#data2").val(); obj.d3 = $("#data3").val(); obj.d4 = $("#data4").val(); obj.d5 = $("#data5").val(); obj.d6 = $("#data6").val(); obj.d7 = $("#data7").val(); obj.d8 = $("#data8").val(); obj.d9 = $("#data9").val(); obj.d10 = $("#data10").val(); obj.d11 = $("#data11").val(); obj.d12 = $("#data12").val(); obj.d13 = $("#data13").val(); obj.d14 = $("#data14").val(); obj.d15 = $("#data15").val(); obj.d16 = $("#data16").val(); obj.d17 = $("#data17").val(); obj.d18 = $("#data18").val(); obj.d19 = $("#data19").val(); obj.d20 = $("#data20").val();
obj.d21 = $("#data21").val(); // obj.d22 = $("#data22").val(); // obj.d23 = $("#data23").val(); // obj.d24 = $("#data24").val(); // obj.d25 = $("#data25").val(); // obj.d26 = $("#data26").val(); // obj.d27 = $("#data27").val(); // obj.d28 = $("#data28").val(); // obj.d29 = $("#data29").val(); // obj.d30 = $("#data30").val(); // obj.d31 = $("#data31").val(); // obj.d32 = $("#data32").val(); // obj.d33 = $("#data33").val(); // obj.d34 = $("#data34").val(); // obj.d35 = $("#data35").val(); google.script.run.updateData(obj, id); // ใหไปเรียกฟงกชั่น updateData(obj, id) ในฝงโคด gs โดยเอาตัวแปร id ไปดวย $("#myForm")[0].reset(); Swal.fire({ position: "center", icon: "success", title: "อัพเดทขอมูลแลว", showConfirmButton: false, timer: 1500, });
// เวลาสิ้นสุด let afterload = new Date().getTime(); seconds = (afterload - beforeload) / 1000; $("#load_time").show(); $("#load_time").text("ใชเวลาอัพเดทขอมูล " + seconds + " วินาที"); setTimeout(function () { $("#load_time").hide(); }, 5000); /** ---------------------------- */ } /** ฟงกชั่นลบขอมูล */ function del() { delelteLogin(); // เรียกฟงกชั่น delelteLogin() event.preventDefault(); if (document.getElementById("data1").value == "") { showError("ไมมีรหัสนักเรียน"); return; } } // ฟงกชั่น daleteLogin ใหกรอกรหัสผานกอนลบขอมูล function delelteLogin() { Swal.fire({ title: "รหัสผาน", html: `<input type="password" id="password" class="swal2-input" placeholder="Password">`, confirmButtonText: "ตกลง",
focusConfirm: false, preConfirm: () => { const password = Swal.getPopup().querySelector("#password").value; if (password == "2739") { //*************************รหัสลบขอมูล Swal.fire(`รหัสผาน: 'ถูกตอง'`.trim()); /** โหลดหนาเพจ ----------------- */ // เวลาเริ่ม let beforeload = new Date().getTime(); let id = document.getElementById("searchID").value; google.script.run.deleteData(id); // ใหไปเรียกฟงกชั่น deleteData(id) ในฝงโคด gs $("#myForm")[0].reset(); Swal.fire({ position: "center", icon: "warning", title: "ลบขอมูลแลว", showConfirmButton: false, timer: 1500, }); // เวลาสิ้นสุด let afterload = new Date().getTime(); seconds = (afterload - beforeload) / 1000; $("#load_time").show(); $("#load_time").text("ใชเวลาลบขอมูล " + seconds + " วินาที"); setTimeout(function () { $("#load_time").hide();
}, 5000); /** ---------------------------- */ } else { Swal.fire(`รหัสผาน: 'ไมถูกตอง'`.trim()); } if (!password) { Swal.showValidationMessage(`กรุณากรอกรหัสผาน`); } return { password: password }; }, }); } // ฟงกชั่นแสดง Error ในการสรางเงื่อนไข function showError(e) { Swal.fire({ title: e, // text: e, icon: "warning", timer: 2000, // confirmButtonText: "ตกลง", }); } </script>
index.html <!DOCTYPE html> <html lang="en"> <head> <base target="_top" /> <title>WebApps</title> <!-- BootStrap CSS 5.2.3 --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <!-- jQuery 3.6.1 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <?!= include("css"); ?> </head> <body> <main> <div class="dummy-container"> <h3 class="text-left"><img src="https://sv1.picz.in.th/images/2022/11/02/v5V9zI.png" width="130px" height="130px" />ใบบันทึกผล กิจเฉพาะ : การเคลื่อนที่ รูปขบวน หมู ปล. </h3> <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> <!-- <script> $(document).ready(function () { // typing text animation script var typed = new Typed(".typing", { strings: ["เพิ่มขอมูลใหม", "คนหาขอมูลที่มี", "พรอมอัพเดทขอมูลเดิม", "และลบขอมูลที่ตองการ", "เวอรชั่นที่เร็ว ที่สุด", "ในขอมูลระดับ 1 แสนแถว!!!"], typeSpeed: 100,
backSpeed: 60, loop: true, }); }); </script> --> <!-- <div class="h5 text-center text-primary"><span class="typing"></span></div> --> <!-- <h5 class="text-center text-danger">PSN: Pitsanu</h5> --> <hr /> <form class="row g-3" id="myForm"> <div class="col6 col-md-6 col-lg-3"> <label for="searchID" class="form-label">รหัสคนหา</label> <input type="text" class="form-control" id="searchID" /> </div> <div class="col6 col-md-6 col-lg-3"> <label for="data1" class="form-label">รหัส/เลขที่กองพัน</label> <input type="text" class="form-control" id="data1" /> </div> <div class="col12 col-md-6"> <label for="data2" class="form-label">ชื่อสกุล</label> <input type="text" class="form-control" id="data2" /> </div> <div class="col6 col-md-6 col-lg-4"> <label for="data3" class="form-label">สังกัด</label> <input type="text" class="form-control" id="data3" /> </div>
<div class="col6 col-md-6 col-lg-4"> <label for="data4" class="form-label">ตอนที่</label> <input type="text" class="form-control" id="data4" /> </div> <div class="col6 col-md-6 col-lg-4"> <label for="data5" class="form-label">E-mail</label> <input type="text" class="form-control" id="data5" /> </div> <div class="col-12"> <center> <!-- <button type="submit" class="btn btn-outline-primary" onclick="save()">เพิ่ม</button> --> <button type="submit" class="btn btn-outline-info" onclick="seach()">คนหา</button> <!-- <button type="submit" class="btn btn-outline-success" onclick="update()">อัพเดท</button> -- <!-- <button type="submit" class="btn btn-outline-danger" onclick="del()">ลบ</button> --> <!-- <button type="reset" class="btn btn-outline-warning">รีเซ็ต</button> --> </center> </div> <hr /> <!-- <h6 class="text-center">ปฏิบัติทาสัญญาณมือไดอยางถูกตอง และใชเวลาไมเกิน 10 วินาที ในแตละทา ปฏิบัติ</h6> --> <h6 class="text-center">การเคลื่อนที่ รูปขบวน หมู ปล.</h6> <h6 class="text- center">การเคลื่อนที่ รูปขบวนหมูแถวตอน/ประเมินเปนบุคคล</h6> <div class="col6 col-md-10 "> <label for="data6" class="text-center text-danger">กิจเฉพาะที่1</label> <input type="text-left" class="form-control" id="data6" /> </div>
<div class="col-md-2" id="div2"> <label for="data14" class="text-center text-danger">ผลการประเมิน1</label> <input type="text-left" class="form-control" id="data14" /> <!-- <select name="classSTD" class="form-select" id="data17"> <option>......</option> <option>ผานครั้งที่1</option> <option>ผานครั้งที่2</option> <option>ผานครั้งที่3</option> <option>ไมผาน</option> </select> --> </div> <div class="col6 col-md-10 "> <label for="data7" class="text-center text-danger">กิจเฉพาะที่2</label> <input type="text-left" class="form-control" id="data7" /> </div> <div class="col-md-2" id="div2"> <label for="data15" class="text-center text-danger">ผลการประเมิน2</label> <input type="text-left" class="form-control" id="data15" /> <!-- <select name="classSTD" class="form-select" id="data18"> <option>......</option> <option>ผานครั้งที่1</option> <option>ผานครั้งที่2</option> <option>ผานครั้งที่3</option> <option>ไมผาน</option> </select> --> </div>
<div class="col6 col-md-10 "> <label for="data8" class="text-center text-danger">กิจเฉพาะที่3</label> <input type="text-left" class="form-control" id="data8" /> </div> <div class="col-md-2" id="div2"> <label for="data16" class="text-center text-danger">ผลการประเมิน3</label> <input type="text-left" class="form-control" id="data16" /> <!-- <select name="classSTD" class="form-select" id="data19"> <option>......</option> <option>ผานครั้งที่1</option> <option>ผานครั้งที่2</option> <option>ผานครั้งที่3</option> <option>ไมผาน</option> </select> --> </div> <h6 class="text- center">การเคลื่อนที่ รูปขบวนหมูหนากระดาน/ประเมินเปนบุคคล</h6> <div class="col6 col-md-10 "> <label for="data9" class="text-center text-danger">กิจเฉพาะที่4</label> <input type="text-left" class="form-control" id="data9" /> </div> <div class="col-md-2" id="div2"> <label for="data17" class="text-center text-danger">ผลการประเมิน4</label> <input type="text-left" class="form-control" id="data17" /> <!-- <select name="classSTD" class="form-select" id="data20"> <option>......</option>
<option>ผานครั้งที่1</option> <option>ผานครั้งที่2</option> <option>ผานครั้งที่3</option> <option>ไมผาน</option> </select> --> </div> <!-- <h6 class="text- center">การคลานสูง</h6> --> <div class="col6 col-md-10 "> <label for="data10" class="text-center text-danger">กิจเฉพาะที่5</label> <input type="text-left" class="form-control" id="data10" /> </div> <div class="col-md-2" id="div2"> <label for="data18" class="text-center text-danger">ผลการประเมิน5</label> <input type="text-left" class="form-control" id="data18" /> <!-- <select name="classSTD" class="form-select" id="data21"> <option>......</option> <option>ผานครั้งที่1</option> <option>ผานครั้งที่2</option> <option>ผานครั้งที่3</option> <option>ไมผาน</option> </select> --> </div> <div class="col6 col-md-10 "> <label for="data11" class="text-center text-danger">กิจเฉพาะที่6</label> <input type="text-left" class="form-control" id="data11" /> </div>
<div class="col-md-2" id="div2"> <label for="data19" class="text-center text-danger">ผลการประเมิน6</label> <input type="text-left" class="form-control" id="data19" /> <!-- <select name="classSTD" class="form-select" id="data22"> <option>......</option> <option>ผานครั้งที่1</option> <option>ผานครั้งที่2</option> <option>ผานครั้งที่3</option> <option>ไมผาน</option> </select> --> </div> <h6 class="text- center">การเคลื่อนที่ รูปขบวนหมูแถวตอน/ประเมินเปนหนวย</h6> <div class="col6 col-md-10 "> <label for="data12" class="text-center text-danger">กิจเฉพาะที่7</label> <input type="text-left" class="form-control" id="data12" /> </div> <div class="col-md-2" id="div2"> <label for="data20" class="text-center text-danger">ผลการประเมิน7</label> <input type="text-left" class="form-control" id="data20" /> <!-- <select name="classSTD" class="form-select" id="data23"> <option>......</option> <option>ผานครั้งที่1</option> <option>ผานครั้งที่2</option> <option>ผานครั้งที่3</option> <option>ไมผาน</option> </select> -->
</div> <h6 class="text- center">การเคลื่อนที่ รูปขบวนหมูหนากระดาน/ประเมินเปนหนวย</h6> <div class="col6 col-md-10 "> <label for="data13" class="text-center text-danger">กิจเฉพาะที่8</label> <input type="text-left" class="form-control" id="data13" /> </div> <div class="col-md-2" id="div2"> <label for="data21" class="text-center text-danger">ผลการประเมิน8</label> <input type="text-left" class="form-control" id="data21" /> <!-- <select name="classSTD" class="form-select" id="data24"> <option>......</option> <option>ผานครั้งที่1</option> <option>ผานครั้งที่2</option> <option>ผานครั้งที่3</option> <option>ไมผาน</option> </select> --> </div> <!-- <div class="col6 col-md-10 "> <label for="data14" class="text-center text-danger">กิจเฉพาะ9</label> <input type="text-left" class="form-control" id="data14" /> </div> <div class="col-md-2" id="div2"> <label for="data25" class="text-center text-danger">ผลการประเมิน9</label> <select name="classSTD" class="form-select" id="data25"> <option>......</option>
<option>ผานครั้งที่1</option> <option>ผานครั้งที่2</option> <option>ผานครั้งที่3</option> <option>ไมผาน</option> </select> </div> --> <!-- <div class="col6 col-md-10 "> <label for="data15" class="text-center text-danger">กิจเฉพาะ10</label> <input type="text-left" class="form-control" id="data15" /> </div> <div class="col-md-2" id="div2"> <label for="data26" class="text-center text-danger">ผลการประเมิน10</label> <select name="classSTD" class="form-select" id="data26"> <option>......</option> <option>ผานครั้งที่1</option> <option>ผานครั้งที่2</option> <option>ผานครั้งที่3</option> <option>ไมผาน</option> </select> </div> --> <!-- <div class="col6 col-md-10 "> <label for="data16" class="text-center text-danger">กิจเฉพาะ11</label> <input type="text-left" class="form-control" id="data16" /> </div>
<div class="col-md-2" id="div2"> <label for="data27" class="text-center text-danger">ผลการประเมิน11</label> <select name="classSTD" class="form-select" id="data27"> <option>......</option> <option>ผานครั้งที่1</option> <option>ผานครั้งที่2</option> <option>ผานครั้งที่3</option> <option>ไมผาน</option> </select> </div> --> <!-- <div class="col6 col-md-10 "> <label for="data17" class="text-center text-danger">กิจเฉพาะ12</label> <input type="text-left" class="form-control" id="data17" /> </div> <div class="col-md-2" id="div2"> <label for="data32" class="text-center text-danger">ผลการประเมิน12</label> <select name="classSTD" class="form-select" id="data32"> <option>......</option> <option>ผานครั้งที่1</option> <option>ผานครั้งที่2</option> <option>ผานครั้งที่3</option> <option>ไมผาน</option> </select> </div> --> <!-- <div class="col6 col-md-10 "> <label for="data18" class="text-center text-danger">กิจเฉพาะ13</label>
<input type="text-left" class="form-control" id="data18" /> </div> <div class="col-md-2" id="div2"> <label for="data33" class="text-center text-danger">ผลการประเมิน13</label> <select name="classSTD" class="form-select" id="data33"> <option>......</option> <option>ผานครั้งที่1</option> <option>ผานครั้งที่2</option> <option>ผานครั้งที่3</option> <option>ไมผาน</option> </select> </div> --> <!-- <div class="col6 col-md-10 "> <label for="data19" class="text-center text-danger">กิจเฉพาะ14</label> <input type="text-left" class="form-control" id="data19" /> </div> <div class="col-md-2" id="div2"> <label for="data34" class="text-center text-danger">ผลการประเมิน14</label> <select name="classSTD" class="form-select" id="data34"> <option>......</option> <option>ผานครั้งที่1</option> <option>ผานครั้งที่2</option> <option>ผานครั้งที่3</option> <option>ไมผาน</option> </select> </div> -->
<!-- <div class="col6 col-md-10 "> <label for="data20" class="text-center text-danger">กิจเฉพาะ15</label> <input type="text-left" class="form-control" id="data20" /> </div> <div class="col-md-2" id="div2"> <label for="data35" class="text-center text-danger">ผลการประเมิน15</label> <select name="classSTD" class="form-select" id="data35"> <option>......</option> <option>ผานครั้งที่1</option> <option>ผานครั้งที่2</option> <option>ผานครั้งที่3</option> <option>ไมผาน</option> </select> </div> --> <hr /> <div class="col-12"> <center> <!-- <button type="submit" class="btn btn-outline-primary" onclick="save()">เพิ่ม</button> --> <!-- <button type="submit" class="btn btn-outline-info" onclick="seach()">คนหา</button> --> <button type="submit" class="btn btn-outline-success" onclick="update()">บันทึก</button> <!-- <button type="submit" class="btn btn-outline-danger" onclick="del()">ลบ</button> --> <!-- <button type="reset" class="btn btn-outline-warning">รีเซ็ต</button> --> </center> </div> </form>
<br /> <div class="row"> <p class="loadtime text-center text-primary" id="load_time"></p> <p class="mini text-center text-success"> © <script> document.write(new Date().getFullYear()); </script> ผูจัดทำ <i class="fa fa-star"></i> ร.ท.พิษณุ ปนชาติ | ติดตอ 095-3429374 </p> </div> </div> </main> <!-- ไฟล JavaScript --> <?!= include("js"); ?> <!-- JavaScript Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> </body> </html>
css.html <style> /* import google fonts */ @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700&family=Kanit:wght@400;500;700& display=swap'); body { background-image: url('https://sv1.picz.in.th/images/2022/10/06/pPiS8q.jpg'); background-size: cover; background-repeat: no-repeat; height: 100%; font-family: 'Kanit', Helvetica, Arial; padding: 50px 0; } body .page-title { color: #fff; } body .form-control:focus { outline: none; box-shadow: none; border-color: #0e1087; } .dummy-container { background: #fff; border-bottom: 3px solid #ddd;
border-radius: 10px; box-shadow: 0 0 10px white; padding: 50px 50px; margin: 30px 0; position: absolute; transform: translate(-50%); padding: 1rem 1rem; min-width: 300px; max-width: 800px; top: 2%; left: 50%; } .mini { font-size: 12px } </style>
Line Hackathon27 ระบบ การทดสอบ กอน-หลังเรียน แบบสุมขอ และจับเวลา แสดงผลผาน line Hackathon27 Code
Code.gs function include(filename) { return HtmlService.createTemplateFromFile(filename).evaluate().getContent() } function getQuestions(){ var sheetName = "Database" var ws = SpreadsheetApp.getActive().getSheetByName(sheetName) var dataRange = ws.getDataRange() var values = dataRange.getValues() var questions = {} for (var i = 1; i < values.length; i ++){ var rowData = values[i] var key = rowData[0] var title = rowData[1] var option = rowData[2] var point = rowData[3] var correct = rowData[4] if (questions[key]){ questions[key].options.push(option) if (correct){ questions[key].corrects.push(option) }
}else{ questions[key] = { id: key, title: title, options: [option], point: point, corrects: correct ? [option]:[], selected: [], disabled: false, correct: true, } } } questions = Object.keys(questions).map(function(key){ return questions[key] }) Logger.log(questions) return questions } function getEmails(){ var sheetName = "Results" var ws = SpreadsheetApp.getActive().getSheetByName(sheetName) var values = ws.getDataRange().getValues() var emails = [] values.forEach(function(row, index){ if (index > 0){
var email = row[1].toString().toLowerCase().trim() if (emails.indexOf(email) === -1){ emails.push(email) } } }) return emails } function getData(){ var docProps = PropertiesService.getDocumentProperties() var count = docProps.getProperty("count") || 20 var time = docProps.getProperty("time") || 20 var questions = getQuestions() var emails = getEmails() data = { config: { count: count, time: time }, questions: questions, emails: emails } return data } function doGet() { return HtmlService.createTemplateFromFile('index').evaluate()
.setTitle('แบบทดสอบ กอนเรียน') .addMetaTag('viewport', 'width=device-width , initial-scale=1') .setFaviconUrl('https://sv1.picz.in.th/images/2022/11/02/v5V9zI.png') .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) } function loadConfiguration(){ var docProps = PropertiesService.getDocumentProperties() var count = docProps.getProperty("count") if (count){ count = parseInt(count) }else{ count = 20 docProps.setProperty("count", count) } var time = docProps.getProperty("time") if (time){ time = parseInt(time) }else{ time = 20 docProps.setProperty("time", time) } var config = {count: count, time: time} return config } function saveConfiguration(config){ var docProps = PropertiesService.getDocumentProperties()
Object.keys(config).forEach(function(key){ docProps.setProperty(key, config[key]) }) } function saveData(result){ var sheetName = "Results" var ws = SpreadsheetApp.getActive().getSheetByName(sheetName) var rowContents = [new Date()].concat(result) var headers = ["Timestamp", "เลขที่กองพัน", "Score"] ws.getRange(1, 1, 1, headers.length).setValues([headers]) ws.appendRow(rowContents) } function showSidebar(){ var title = " แบบทดสอบออนไลน กอนเรียน" var userInterface = HtmlService.createTemplateFromFile("sidebar").evaluate().setTitle(title) SpreadsheetApp.getUi().showSidebar(userInterface) } function openQuizSheetApp(){ var url = ScriptApp.getService().getUrl() var html = "<script>window.open('" + url + "');google.script.host.close();</script>" var userInterface = HtmlService.createTemplate(html).evaluate().setTitle("Opening...") SpreadsheetApp.getUi().showSidebar(userInterface) } function onOpen(){ SpreadsheetApp.getUi().createMenu("App") .addItem("Open quizz sheet app", "openQuizSheetApp")
.addItem("Configuration", "showSidebar") .addToUi() } js.html <script> function randomSelectArray(arr, count){ if (count > arr.length){ count = arr.length } let data = arr.slice() let newArr = [] for (let i = 0; i < count; i ++) { let newItem = data.splice(Math.floor(Math.random() * data.length), 1) newArr = newArr.concat(newItem) } return newArr } function formatTime(seconds){ let h = Math.floor(seconds / 3600) if (h < 10){ h = "0" + h } let m = Math.floor((seconds % 3600) / 60)