File size: 10,096 Bytes
8e271fd | 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 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 | <!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>測驗平台 - 選擇測驗</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<style>
.quiz-card {
transition: all 0.3s ease;
}
.quiz-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.quiz-card.ring-2:hover {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 4px rgba(59, 130, 246, 0.1);
}
.google-btn {
transition: all 0.3s ease;
}
.google-btn:hover {
box-shadow: 0 4px 6px -1px rgba(66, 133, 244, 0.3), 0 2px 4px -1px rgba(66, 133, 244, 0.2);
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- Header -->
<header class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div class="flex justify-between items-center">
<h1 class="text-2xl font-bold text-gray-800">測驗平台</h1>
<div id="google-signin-btn" class="google-btn bg-white border border-gray-300 rounded-lg px-4 py-2 flex items-center space-x-2 cursor-pointer">
<i data-feather="log-in" class="w-5 h-5"></i>
<span>Google 登入</span>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Welcome Section -->
<section class="text-center mb-12" data-aos="fade-up">
<h2 class="text-3xl font-bold text-gray-800 mb-4">歡迎來到測驗平台</h2>
<p class="text-gray-600 text-lg max-w-2xl mx-auto">
這裡提供單選題和多選題的多項測驗類型，請選擇您想要參加的測驗並開始挑戰！
</p>
</section>
<!-- Quiz Selection -->
<section class="mb-12">
<h3 class="text-2xl font-semibold text-gray-800 mb-6">選擇測驗</h3>
<div id="quiz-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
</div>
</section>
<!-- Terms and Conditions -->
<section class="bg-white rounded-xl shadow-md p-6 mb-8" data-aos="fade-up">
<h3 class="text-xl font-semibold text-gray-800 mb-4">作答規範</h3>
<div class="prose prose-gray max-w-none">
<ul class="list-disc list-inside space-y-2 mb-6">
<li>測驗期間不可離開測驗頁面</li>
<li>測驗無法暫停，請確保有足夠時間完成</li>
<li>測驗開始後無法中途退出</li>
<li>請確保網路連線穩定</li>
<li>禁止使用任何外部協助工具</li>
</ul>
</div>
<div class="flex items-center">
<input type="checkbox" id="terms-agree" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
<label for="terms-agree" class="ml-2 text-sm font-medium text-gray-900">我已閱讀並同意作答規範</label>
</div>
</section>
<!-- Start Quiz Button -->
<div class="text-center" data-aos="fade-up">
<button id="start-quiz-btn" class="bg-gray-400 text-white py-3 px-8 rounded-lg text-lg font-semibold transition-colors duration-200 cursor-not-allowed" disabled>
開始測驗
</button>
</div>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<p>© 2024 測驗平台. All rights reserved.</p>
</div>
</footer>
<script>
// Initialize AOS
AOS.init({
duration: 800,
once: true
});
// Initialize Feather Icons
feather.replace();
let selectedQuizId = null;
let userLoggedIn = false;
const quizzes = [
{
id: 1,
type: '單選題',
time: '30分鐘',
title: '基礎數學測驗',
desc: '測試您的基礎數學能力，包含代數、幾何和統計學的基礎知識。',
color: 'blue'
},
{
id: 2,
type: '多選題',
time: '45分鐘',
title: '程式設計知識測驗',
desc: '涵蓋多種程式語言和開發概念的綜合測驗，適合有一定經驗的開發者。',
color: 'green'
},
{
id: 3,
type: '單選+多選',
time: '60分鐘',
title: '綜合知識測驗',
desc: '包含各種主題的綜合測驗，測試您的廣泛知識和問題解決能力。',
color: 'purple'
}
];
function renderQuizzes() {
const container = document.getElementById('quiz-container');
container.innerHTML = '';
quizzes.forEach((quiz, index) => {
const card = document.createElement('div');
const isSelected = quiz.id === selectedQuizId;
card.className = `quiz-card bg-white rounded-xl shadow-md overflow-hidden ${isSelected ? 'ring-2 ring-blue-500' : ''}`;
card.setAttribute('data-aos', 'fade-up');
card.setAttribute('data-aos-delay', (index + 1) * 100);
card.innerHTML = `
<div class="p-6">
<div class="flex items-center justify-between mb-4">
<span class="bg-${quiz.color}-100 text-${quiz.color}-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
${quiz.type}
</span>
<span class="text-gray-500 text-sm flex items-center">
<i data-feather="clock" class="w-4 h-4 mr-1"></i>
${quiz.time}
</span>
</div>
<h4 class="text-xl font-semibold text-gray-800 mb-2">${quiz.title}</h4>
<p class="text-gray-600 mb-4">${quiz.desc}</p>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200" onclick="selectQuiz(${quiz.id})">
選擇測驗
</button>
</div>
`;
container.appendChild(card);
});
AOS.refresh();
feather.replace();
}
// Google Sign-In Configuration
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID', // Replace with your actual Google Client ID
callback: handleGoogleSignIn
});
document.getElementById('google-signin-btn').addEventListener('click', () => {
google.accounts.id.prompt();
});
renderQuizzes();
};
function handleGoogleSignIn(response) {
// Handle Google Sign-In response
console.log('Google Sign-In successful:', response);
userLoggedIn = true;
updateUI();
// You would typically send the credential to your server for verification
// fetch('/api/auth/google', {
// method: 'POST',
// headers: { 'Content-Type': 'application/json' },
// body: JSON.stringify({ credential: response.credential })
// });
}
function selectQuiz(quizId) {
selectedQuizId = quizId;
renderQuizzes();
updateUI();
}
function updateUI() {
const termsAgreed = document.getElementById('terms-agree').checked;
const startButton = document.getElementById('start-quiz-btn');
if (userLoggedIn && selectedQuizId && termsAgreed) {
startButton.classList.remove('bg-gray-400', 'cursor-not-allowed');
startButton.classList.add('bg-green-600', 'hover:bg-green-700', 'cursor-pointer');
startButton.disabled = false;
startButton.onclick = () => startQuiz(selectedQuizId);
} else {
startButton.classList.remove('bg-green-600', 'hover:bg-green-700', 'cursor-pointer');
startButton.classList.add('bg-gray-400', 'cursor-not-allowed');
startButton.disabled = true;
}
}
function startQuiz(quizId) {
alert(`開始測驗 ID: ${quizId}`);
// Redirect to quiz page or show quiz interface
// window.location.href = `/quiz/${quizId}`;
}
// Add event listeners
document.getElementById('terms-agree').addEventListener('change', updateUI);
</script>
</body>
</html> |