| | <!DOCTYPE html> |
| | <html lang="zh-TW"> |
| | <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> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap'); |
| | body { |
| | font-family: 'Noto Sans TC', sans-serif; |
| | background-color: #f0f4f8; |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-100 min-h-screen flex items-center justify-center p-4"> |
| |
|
| | <div id="quiz-container" class="bg-white rounded-xl shadow-lg p-8 w-full max-w-lg transition-all duration-300 transform"> |
| | <h1 class="text-3xl font-bold text-center text-gray-800 mb-6">洋蔥式穿搭測驗</h1> |
| | |
| | <div id="quiz-question" class="transition-opacity duration-500 ease-in-out"> |
| | <h2 id="question-text" class="text-xl font-semibold text-gray-700 mb-4"></h2> |
| | <div id="answer-options" class="space-y-4"></div> |
| | </div> |
| |
|
| | <div id="quiz-result" class="hidden text-center transition-opacity duration-500 ease-in-out"> |
| | <h2 class="text-2xl font-bold text-green-600 mb-4">測驗完成！</h2> |
| | <p class="text-xl text-gray-700">你的分數是：<span id="score" class="font-bold text-3xl text-blue-600"></span> / <span id="total-questions" class="font-bold text-3xl text-blue-600"></span></p> |
| | <p id="result-message" class="mt-4 text-gray-600"></p> |
| | <button id="restart-btn" class="mt-6 px-6 py-3 bg-blue-500 text-white rounded-full font-bold shadow-lg hover:bg-blue-600 transition-all duration-300">重新開始</button> |
| | </div> |
| | </div> |
| |
|
| | <div id="feedback-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center p-4 z-50"> |
| | <div class="bg-white rounded-lg p-6 max-w-sm w-full text-center shadow-2xl"> |
| | <p id="feedback-text" class="text-xl font-bold mb-4"></p> |
| | <button id="next-btn" class="px-6 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition-all duration-300">下一題</button> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | const questions = [ |
| | { |
| | question: "洋蔥式穿搭中，最貼近皮膚的「基礎層」主要功能是什麼？", |
| | options: ["防風防水", "鎖住熱空氣", "排汗"], |
| | answer: "排汗" |
| | }, |
| | { |
| | question: "以下哪種材質最不適合用作洋蔥式穿搭的「基礎層」？", |
| | options: ["羊毛", "聚酯纖維", "棉質"], |
| | answer: "棉質" |
| | }, |
| | { |
| | question: "「保暖層」的主要功能是透過捕捉什麼來保持身體溫暖？", |
| | options: ["水分", "熱空氣", "光線"], |
| | answer: "熱空氣" |
| | }, |
| | { |
| | question: "「防護層」的主要功能是防風和防水，這層最常見的設計是什麼？", |
| | options: ["透氣拉鍊", "隱藏式口袋", "可拆式帽子"], |
| | answer: "透氣拉鍊" |
| | }, |
| | { |
| | question: "在寒冷的天氣下，為什麼穿著濕掉的棉質衣物會讓人覺得更冷？", |
| | options: ["因為水會吸收太陽熱能", "因為水會加速身體熱量散失", "因為棉質衣物會變得更重"], |
| | answer: "因為水會加速身體熱量散失" |
| | }, |
| | { |
| | question: "如果你覺得身體很熱，但又不想脫掉整件外套，可以怎麼做來調節體溫？", |
| | options: ["把帽子戴起來", "拉開外套的透氣拉鍊", "繫緊外套的袖口"], |
| | answer: "拉開外套的透氣拉鍊" |
| | }, |
| | { |
| | question: "保暖層如果被雨淋濕，會發生什麼事？", |
| | options: ["保暖效果會更好", "會變得更輕", "會失去鎖住熱空氣的能力"], |
| | answer: "會失去鎖住熱空氣的能力" |
| | }, |
| | { |
| | question: "為什麼「防護層」的防風功能很重要？", |
| | options: ["因為風會讓衣服變得太重", "因為風會吹散保暖層裡鎖住的熱空氣", "因為風會讓衣服顏色變淡"], |
| | answer: "因為風會吹散保暖層裡鎖住的熱空氣" |
| | }, |
| | { |
| | question: "洋蔥式穿搭最主要的好處是什麼？", |
| | options: ["讓外觀看起來更時尚", "可以減少衣物數量", "方便根據環境變化調節體溫"], |
| | answer: "方便根據環境變化調節體溫" |
| | }, |
| | { |
| | question: "哪一層是為了應對強風和下雨等外部環境變化？", |
| | options: ["基礎層", "保暖層", "防護層"], |
| | answer: "防護層" |
| | } |
| | ]; |
| | |
| | let currentQuestionIndex = 0; |
| | let score = 0; |
| | |
| | const quizQuestionDiv = document.getElementById('quiz-question'); |
| | const questionText = document.getElementById('question-text'); |
| | const answerOptionsDiv = document.getElementById('answer-options'); |
| | const quizResultDiv = document.getElementById('quiz-result'); |
| | const scoreSpan = document.getElementById('score'); |
| | const totalQuestionsSpan = document.getElementById('total-questions'); |
| | const resultMessage = document.getElementById('result-message'); |
| | const restartBtn = document.getElementById('restart-btn'); |
| | const feedbackModal = document.getElementById('feedback-modal'); |
| | const feedbackText = document.getElementById('feedback-text'); |
| | const nextBtn = document.getElementById('next-btn'); |
| | |
| | function showQuestion() { |
| | if (currentQuestionIndex < questions.length) { |
| | const q = questions[currentQuestionIndex]; |
| | questionText.textContent = q.question; |
| | answerOptionsDiv.innerHTML = ''; |
| | q.options.forEach(option => { |
| | const button = document.createElement('button'); |
| | button.textContent = option; |
| | button.className = "w-full py-3 px-4 bg-gray-200 text-gray-700 font-medium rounded-full hover:bg-blue-500 hover:text-white transition-colors duration-300 shadow-md"; |
| | button.onclick = () => checkAnswer(option); |
| | answerOptionsDiv.appendChild(button); |
| | }); |
| | } else { |
| | showResults(); |
| | } |
| | } |
| | |
| | function checkAnswer(selectedOption) { |
| | const q = questions[currentQuestionIndex]; |
| | const isCorrect = selectedOption === q.answer; |
| | if (isCorrect) { |
| | score += 10; |
| | feedbackText.textContent = "答對了！"; |
| | feedbackText.className = "text-xl font-bold text-green-600 mb-4"; |
| | } else { |
| | feedbackText.textContent = `答錯了... 正確答案是：「${q.answer}」`; |
| | feedbackText.className = "text-xl font-bold text-red-600 mb-4"; |
| | } |
| | feedbackModal.style.display = 'flex'; |
| | } |
| | |
| | nextBtn.onclick = () => { |
| | feedbackModal.style.display = 'none'; |
| | currentQuestionIndex++; |
| | showQuestion(); |
| | }; |
| | |
| | function showResults() { |
| | quizQuestionDiv.classList.add('hidden'); |
| | quizResultDiv.classList.remove('hidden'); |
| | scoreSpan.textContent = score; |
| | totalQuestionsSpan.textContent = 100; |
| | if (score === 100) { |
| | resultMessage.textContent = "太棒了！你完全掌握了洋蔥式穿搭的精髓！"; |
| | } else if (score >= 60) { |
| | resultMessage.textContent = "做得很好！再多練習幾次，你就能完全掌握了！"; |
| | } else { |
| | resultMessage.textContent = "沒關係，洋蔥式穿搭需要多練習。可以回到前面再複習一次喔！"; |
| | } |
| | } |
| | |
| | restartBtn.onclick = () => { |
| | currentQuestionIndex = 0; |
| | score = 0; |
| | quizResultDiv.classList.add('hidden'); |
| | quizQuestionDiv.classList.remove('hidden'); |
| | showQuestion(); |
| | }; |
| | |
| | document.addEventListener('DOMContentLoaded', () => { |
| | showQuestion(); |
| | }); |
| | </script> |
| | </body> |
| | </html> |
| |
|
