Quiz App
1. สุ่มคำถามจากชุดคำถามทั้งหมด
- ใช้ฟังก์ชัน shuffleArray เพื่อสุ่มตำแหน่งของคำถามและตัวเลือก
- เลือกเฉพาะ 10 คำถามจากคำถามที่สุ่มมาเพื่อแสดงในแบบทดสอบ
- ใช้ HTML และ JavaScript เพื่อแสดงคำถามและตัวเลือกในหน้าเว็บ
- หากมีภาพประกอบในคำถาม จะแสดงภาพนั้นอัตโนมัติ
3. ตรวจสอบคำตอบและคำนวณคะแนน
- หลังจากผู้ใช้ส่งคำตอบ ระบบจะตรวจสอบคำตอบที่ถูกต้องและคำนวณคะแนนที่ผู้ใช้ได้
- บันทึกผลลัพธ์ของผู้ใช้ (ชื่อ, คะแนน) ลงใน Google Sheets
4. การใช้งาน Google Apps Script
- ใช้ Google Apps Script ในการดึงข้อมูลคำถามจาก Google Sheets และจัดการการบันทึกผลลัพธ์
1: สร้าง Google Sheet สำหรับเก็บข้อมูลคำถามและตัวเลือกคำตอบ
สร้าง Google Sheet ใหม่.
ตั้งชื่อแผ่นงานเป็น QuizData.
เพิ่มข้อมูลในแต่ละคอลัมน์ดังนี้:
- Column A: คำถาม
- Column B: URL รูปภาพ (ถ้ามี)
- Column C: ตัวเลือกที่ 1 (ตัวเลือคำตอบที่ถูกต้อง)
- Column D: ตัวเลือกที่ 2
- Column E: ตัวเลือกที่ 3
- Column F: ตัวเลือกที่ 4
เพิ่มแผ่นงานและตั้งชื่อแผ่นงานเป็น Results.
- Column A: วันที่
- Column B: ชื่อ นามสกุล
- Column C: คะแนน
2: โค้ดเว็บแอพพลิเคชันที่เชื่อมต่อกับ Google Sheets
code.gs
const sheetQuizData = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('QuizData');
const sheetResults = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Results');
// แสดงหน้าเว็บแอพ
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setTitle('Quiz App')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
// ฟังก์ชันสำหรับเป็น Web App
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
// ฟังก์ชันสำหรับการดึงข้อมูลแบบทดสอบจาก Google Sheets และสุ่มข้อมูล
function getQuizData() {
const data = sheetQuizData.getDataRange().getValues();
const questions = data.slice(1).map(row => ({
question: row[0],
image: row[1] || null,
options: [row[2], row[3], row[4], row[5]], //4 ตัวเลือก คอลัมน์ C ถึง F คำตอบที่ถูกต้องจะต้องอยู่ในคอลัมน์ C ทุกข้อ
}));
return questions
}
//สุ่มคำถาม 10 ข้อ
function getQuestion(){
const quizdata = getQuizData()
return shuffledQuestions = shuffleArray(quizdata).slice(0, 10);
}
// ฟังก์ชันสำหรับตรวจสอบคำตอบและบันทึกคะแนน
function checkAndSaveResult(name, answers) {
let score = 0;
const questions = getQuizData(); // ดึงข้อมูลคำตอบที่ถูกต้อง
answers.forEach(answer => {
const question = questions.find(q => q.question === answer.question);
const correctAnswer = Object.values(question.options)[0]
if (question && correctAnswer === answer.selected) {
score++;
}
});
sheetResults.appendRow([new Date(), name, score]);
return score;
}
// ฟังก์ชันสำหรับสุ่มอาร์เรย์
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz App</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.question {
margin-bottom: 20px;
}
.options {
list-style-type: none;
padding: 0;
}
.options li {
margin-bottom: 10px;
}
.question-image {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
button {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Quiz App</h1>
<div id="quiz"></div>
<button onclick="submitQuiz()">Submit Answers</button>
<p id="result"></p>
<script>
let questions = [];
//โหลดข้อสอบ
document.addEventListener('DOMContentLoaded', function() {
google.script.run.withSuccessHandler(displayQuiz).getQuestion()
});
//แสดงข้อสอบ
function displayQuiz(data) {
questions = data;
const quizContainer = document.getElementById('quiz');
questions.forEach((q, index) => {
const options = shuffle(q.options); // สุ่มตัวเลือก
const questionDiv = document.createElement('div');
questionDiv.className = 'question';
let questionContent = `<p>${index + 1}. ${q.question}</p>`;
if (q.image) {
questionContent += `<img src="${q.image}" alt="Question Image" class="question-image">`;
}
questionContent += `
<ul class="options">
${options.map(option => `<li><label><input type="radio" name="q${index}" value="${option}"> ${option}</label></li>`).join('')}
</ul>
`;
questionDiv.innerHTML = questionContent;
quizContainer.appendChild(questionDiv);
});
}
// ฟังก์ชันสำหรับสุ่มอาร์เรย์
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// ส่งคำตอบ
function submitQuiz() {
const answers = [];
const questionsDivs = document.querySelectorAll('.question');
questionsDivs.forEach((questionDiv, index) => {
const selectedOption = questionDiv.querySelector('input[type="radio"]:checked');
console.log(selectedOption)
if (selectedOption) {
answers.push({
question: questions[index].question,
selected: selectedOption.value
});
console.log(answers)
}
});
const name = prompt("กรุณากรอกชื่อของคุณ:");
google.script.run.withSuccessHandler(displayScore).checkAndSaveResult(name, answers);
}
function displayScore(score) {
document.getElementById('result').textContent = `คุณได้คะแนน ${score} จาก 10 คะแนน`;
}
</script>
</body>
</html>
ขอให้สนุกกับการพัฒนางาน และเป็นวันที่ดีครับ!
ที่มาครูสมชายคัดมาจาก : {getButton} $text={อ้างอิงที่มา} $icon={link} $color={red}
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.
I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
THANKS FOR VISITING thumariya.blogspot
Have a nice day!
-------------------------- -------------------------
ฉันจะพยายามระดับของฉันให้ดีที่สุดเพื่อแก้ไขปัญหา
ขอบคุณสำหรับการเยี่ยมชม thumariya.blogspot
ขอให้เป็นวันที่ดี!
-------------------------- -------------------------
{fullWidth}