Spaces:

Lashtw
/

Onion

Running

App Files Files Community

Lashtw commited on Sep 9, 2025

Commit

c75a099

verified ·

1 Parent(s): f58f8f9

Update index.html

Browse files

Files changed (1) hide show

index.html +173 -18

index.html CHANGED Viewed

@@ -1,19 +1,174 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

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