Embed

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ควิซ: การตั้งเป้าหมาย ให้เดินหน้าได้จริง</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Sarabun', sans-serif;
        }
        .quiz-option {
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }
        .quiz-option:hover {
            background-color: #e0f2fe; /* light-sky-100 */
        }
        /* Custom styling for the selected radio button's label */
        input[type="radio"]:checked + span + span {
            /* This could be used for more direct styling if needed */
        }
        input[type="radio"]:checked + span {
             background-color: #38bdf8; /* sky-500 */
             border-color: #0ea5e9; /* sky-600 */
        }
        .quiz-option.selected {
            background-color: #f0f9ff; /* sky-50 */
            border-color: #38bdf8; /* sky-500 */
        }
        .correct {
            background-color: #dcfce7; /* green-100 */
            border-color: #4ade80; /* green-500 */
        }
        .incorrect {
            background-color: #fee2e2; /* red-100 */
            border-color: #f87171; /* red-500 */
        }
    </style>
</head>
<body class="bg-slate-50 text-slate-800 flex items-center justify-center min-h-screen p-4">

    <div id="quiz-container" class="w-full max-w-2xl mx-auto bg-white p-6 sm:p-8 rounded-2xl shadow-lg">
        <div id="quiz-header" class="text-center mb-6">
            <h1 class="text-2xl sm:text-3xl font-bold text-sky-700">ควิซ: การตั้งเป้าหมาย ให้เดินหน้าได้จริง</h1>
            <p class="text-slate-500 mt-2">ทดสอบความเข้าใจจาก Podcast 7</p>
        </div>

        <div id="quiz-content">
            
        </div>

        <div id="quiz-footer" class="mt-8 text-center">
            <button id="submit-btn" class="bg-sky-600 text-white font-bold py-3 px-8 rounded-full hover:bg-sky-700 transition-colors duration-300 shadow-md w-full sm:w-auto">ส่งคำตอบ</button>
        </div>

        <div id="result-container" class="hidden mt-8 text-center">
            <h2 class="text-2xl font-bold mb-2 text-slate-700">สรุปผลคะแนน</h2>
            <p id="score-text" class="text-4xl font-bold text-sky-600 mb-4"></p>
            <p id="feedback-text" class="text-lg text-slate-600 mb-6"></p>
            
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                <button id="share-line-btn" class="bg-green-500 text-white font-bold py-3 px-6 rounded-full hover:bg-green-600 transition-colors duration-300 flex items-center gap-2 w-full sm:w-auto">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-share-2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                    แชร์ผลลัพธ์ไปที่ LINE
                </button>
                <button id="retry-btn" class="bg-slate-200 text-slate-700 font-bold py-3 px-6 rounded-full hover:bg-slate-300 transition-colors duration-300 w-full sm:w-auto">ทำอีกครั้ง</button>
            </div>
        </div>
    </div>

    <script>
        // --- Data for the Quiz ---
        const quizData = [
            {
                question: "Podcast แนะนำให้แบ่งเป้าหมายออกเป็นกี่ระดับ และมีอะไรบ้าง?",
                options: ["1 ระดับ: เป้าหมายรายวัน", "2 ระดับ: เป้าหมายระยะยาว และเป้าหมายระยะสั้น", "3 ระดับ: เป้าหมายเล็ก กลาง และใหญ่", "4 ระดับ: เป้าหมายส่วนตัวและทีม"],
                answer: "2 ระดับ: เป้าหมายระยะยาว และเป้าหมายระยะสั้น"
            },
            {
                question: "สิ่งใดที่ช่วยดึงดูดพลังให้เราทำตาม 'เป้าหมายระยะยาว' ได้สำเร็จ?",
                options: ["จำนวนเงินที่จะได้รับ", "การจินตนาการถึง 'อารมณ์' ที่จะรู้สึกเมื่อทำสำเร็จ", "การบอกเป้าหมายให้คนอื่นรู้เยอะๆ", "การทำงานให้หนักขึ้นกว่าเดิม"],
                answer: "การจินตนาการถึง 'อารมณ์' ที่จะรู้สึกเมื่อทำสำเร็จ"
            },
            {
                question: "การตั้ง 'เป้าหมายระยะสั้น' ที่ดีควรมีลักษณะอย่างไร?",
                options: ["ต้องใหญ่และท้าทายมากๆ", "วัดผลและลงมือทำได้ง่าย", "ต้องทำให้สำเร็จภายใน 1 วัน", "ไม่จำเป็นต้องเขียนออกมา"],
                answer: "วัดผลและลงมือทำได้ง่าย"
            },
            {
                question: "ทำไมจึงควรเขียนเป้าหมายแล้ววางไว้ในที่ที่เห็นบ่อยๆ?",
                options: ["เพื่ออวดคนอื่น", "เพื่อช่วยเตือนตัวเองและไม่หลุดโฟกัส", "เพื่อให้ดูเป็นคนมีระเบียบ", "เพื่อให้ง่ายต่อการขีดฆ่าเมื่อทำไม่ได้"],
                answer: "เพื่อช่วยเตือนตัวเองและไม่หลุดโฟกัส"
            },
            {
                question: "ถ้ามีเป้าหมายใหญ่คือ 'มีรายได้ 30,000 บาท/เดือน' ควรทำอย่างไรต่อ?",
                options: ["รอให้มีแรงบันดาลใจก่อนค่อยทำ", "ซอยออกมาเป็นเป้าหมายย่อยที่ทำได้ในแต่ละวัน/สัปดาห์", "เปลี่ยนไปทำเป้าหมายที่เล็กกว่าแทน", "บอกเป้าหมายนี้กับอัพไลน์เท่านั้น"],
                answer: "ซอยออกมาเป็นเป้าหมายย่อยที่ทำได้ในแต่ละวัน/สัปดาห์"
            }
        ];

        // --- DOM Elements ---
        const quizContent = document.getElementById('quiz-content');
        const submitBtn = document.getElementById('submit-btn');
        const resultContainer = document.getElementById('result-container');
        const scoreText = document.getElementById('score-text');
        const feedbackText = document.getElementById('feedback-text');
        const shareLineBtn = document.getElementById('share-line-btn');
        const retryBtn = document.getElementById('retry-btn');
        const quizFooter = document.getElementById('quiz-footer');

        let userAnswers = {};

        // --- Functions ---

        /**
         * Renders the quiz questions and options on the page.
         */
        function renderQuiz() {
            // Clear previous content and state
            quizContent.innerHTML = '';
            resultContainer.classList.add('hidden');
            quizFooter.classList.remove('hidden');
            userAnswers = {};

            quizData.forEach((item, index) => {
                const questionEl = document.createElement('div');
                questionEl.classList.add('mb-6');
                
                const questionTitle = document.createElement('p');
                questionTitle.classList.add('text-lg', 'font-semibold', 'mb-4', 'text-slate-800');
                questionTitle.textContent = `${index + 1}. ${item.question}`;
                questionEl.appendChild(questionTitle);
                
                const optionsContainer = document.createElement('div');
                optionsContainer.classList.add('space-y-3');
                
                item.options.forEach((optionText, optionIndex) => {
                    const optionId = `q${index}-o${optionIndex}`;

                    const optionLabel = document.createElement('label');
                    optionLabel.htmlFor = optionId;
                    optionLabel.classList.add('quiz-option', 'flex', 'items-center', 'p-4', 'border-2', 'border-slate-200', 'rounded-lg', 'cursor-pointer');
                    
                    const optionInput = document.createElement('input');
                    optionInput.type = 'radio';
                    optionInput.name = `question${index}`;
                    optionInput.value = optionText;
                    optionInput.id = optionId;
                    optionInput.classList.add('hidden');

                    optionInput.addEventListener('change', () => {
                        userAnswers[index] = optionText;
                        document.querySelectorAll(`input[name="question${index}"]`).forEach(radio => {
                            radio.parentElement.classList.remove('selected');
                        });
                        optionLabel.classList.add('selected');
                    });
                    
                    const customRadio = document.createElement('span');
                    customRadio.classList.add('w-5', 'h-5', 'border-2', 'border-slate-400', 'rounded-full', 'mr-4', 'flex-shrink-0', 'transition-colors');

                    const optionContent = document.createElement('span');
                    optionContent.textContent = optionText;
                    
                    optionLabel.appendChild(optionInput);
                    optionLabel.appendChild(customRadio);
                    optionLabel.appendChild(optionContent);
                    optionsContainer.appendChild(optionLabel);
                });
                
                questionEl.appendChild(optionsContainer);
                quizContent.appendChild(questionEl);
            });
        }

        /**
         * Calculates the score, displays results, and provides feedback.
         */
        function showResults() {
            let score = 0;
            
            const allInputs = quizContent.querySelectorAll('input[type="radio"]');
            allInputs.forEach(input => input.disabled = true);

            quizData.forEach((item, index) => {
                const selectedOption = userAnswers[index];
                const options = quizContent.querySelectorAll(`input[name="question${index}"]`);
                
                options.forEach(optionInput => {
                    const parentLabel = optionInput.parentElement;
                    parentLabel.classList.remove('selected');
                    if (optionInput.value === item.answer) {
                        parentLabel.classList.add('correct');
                    }
                    if (optionInput.value === selectedOption && selectedOption !== item.answer) {
                        parentLabel.classList.add('incorrect');
                    }
                });

                if (selectedOption === item.answer) {
                    score++;
                }
            });

            scoreText.textContent = `${score} / ${quizData.length}`;
            
            let feedback = '';
            if (score === quizData.length) {
                feedback = 'ยอดเยี่ยมมาก! คุณเข้าใจหลักการตั้งเป้าหมายเป็นอย่างดี';
            } else if (score >= quizData.length / 2) {
                feedback = 'ทำได้ดี! ทบทวนอีกนิดเพื่อให้เป้าหมายชัดเจนขึ้นนะครับ';
            } else {
                feedback = 'ไม่เป็นไรนะ ลองกลับไปฟัง Podcast แล้วมาลองทำอีกครั้ง!';
            }
            feedbackText.textContent = feedback;
            
            quizFooter.classList.add('hidden');
            resultContainer.classList.remove('hidden');
            
            resultContainer.scrollIntoView({ behavior: 'smooth' });
        }
        
        /**
         * Shares the result to LINE.
         */
        function shareToLine() {
            const score = scoreText.textContent;
            // Updated share text for the new quiz
            const text = `ฉันทำควิซ "การตั้งเป้าหมาย ให้เดินหน้าได้จริง" ได้คะแนน ${score}!\n\nคุณก็มาลองทดสอบความรู้ได้เลย`;
            const encodedText = encodeURIComponent(text);
            const lineUrl = `https://line.me/R/msg/text/?${encodedText}`;
            window.open(lineUrl, '_blank');
        }

        // --- Event Listeners ---
        submitBtn.addEventListener('click', () => {
            const answeredQuestions = Object.keys(userAnswers).length;
            if (answeredQuestions < quizData.length) {
                alert('กรุณาตอบคำถามให้ครบทุกข้อก่อนส่งคำตอบครับ');
                return;
            }
            showResults();
        });
        
        retryBtn.addEventListener('click', () => {
            renderQuiz();
            document.getElementById('quiz-container').scrollIntoView({ behavior: 'smooth' });
        });

        shareLineBtn.addEventListener('click', shareToLine);

        // --- Initial Load ---
        renderQuiz();

    </script>
</body>
</html>