File size: 8,525 Bytes
c75a099 f58f8f9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 |
<!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>
|