|
|
<!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> |
|
|
|
