Quiz App สุ่มตำแหน่งของคำถามและตัวเลือก

bysemicon -
3

 



Quiz App

1. สุ่มคำถามจากชุดคำถามทั้งหมด
  • ใช้ฟังก์ชัน shuffleArray เพื่อสุ่มตำแหน่งของคำถามและตัวเลือก
  • เลือกเฉพาะ 10 คำถามจากคำถามที่สุ่มมาเพื่อแสดงในแบบทดสอบ
2. แสดงคำถามและตัวเลือก
  • ใช้ HTML และ JavaScript เพื่อแสดงคำถามและตัวเลือกในหน้าเว็บ
  • หากมีภาพประกอบในคำถาม จะแสดงภาพนั้นอัตโนมัติ
3. ตรวจสอบคำตอบและคำนวณคะแนน
  • หลังจากผู้ใช้ส่งคำตอบ ระบบจะตรวจสอบคำตอบที่ถูกต้องและคำนวณคะแนนที่ผู้ใช้ได้
  • บันทึกผลลัพธ์ของผู้ใช้ (ชื่อ, คะแนน) ลงใน Google Sheets
4. การใช้งาน Google Apps Script
  • ใช้ Google Apps Script ในการดึงข้อมูลคำถามจาก Google Sheets และจัดการการบันทึกผลลัพธ์


1: สร้าง Google Sheet สำหรับเก็บข้อมูลคำถามและตัวเลือกคำตอบ

  1. สร้าง Google Sheet ใหม่.

  2. ตั้งชื่อแผ่นงานเป็น QuizData.

  3. เพิ่มข้อมูลในแต่ละคอลัมน์ดังนี้:

    • Column A: คำถาม
    • Column B: URL รูปภาพ (ถ้ามี)
    • Column C: ตัวเลือกที่ 1 (ตัวเลือคำตอบที่ถูกต้อง)
    • Column D: ตัวเลือกที่ 2
    • Column E: ตัวเลือกที่ 3
    • Column F: ตัวเลือกที่ 4

  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>



ขอให้สนุกกับการพัฒนางาน และเป็นวันที่ดีครับ!

Tags:

3 ความคิดเห็น

แสดงความคิดเห็น
ใหม่กว่า เก่ากว่า