選擇正確的中文意思
/pronunciation/
正確！👏
<html lang="en"><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=Poppins:wght@400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
min-height: 100vh;
}
.option-btn {
transition: all 0.3s ease;
}
.option-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.correct {
background-color: #4ade80 !important;
color: white !important;
}
.incorrect {
background-color: #f87171 !important;
color: white !important;
}
.word-card {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.score-badge {
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(5px);
}
.modal {
backdrop-filter: blur(5px);
}
.code-block {
font-family: monospace;
white-space: pre-wrap;
max-height: 70vh;
overflow-y: auto;
}
</style>
<style>*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.fixed{position:fixed}.inset-0{inset:0px}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.mb-8{margin-bottom:2rem}.mr-2{margin-right:0.5rem}.mt-2{margin-top:0.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-full{width:100%}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.space-x-3 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.75rem * var(--tw-space-x-reverse));margin-left:calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-xl{border-radius:0.75rem}.border-r{border-right-width:1px}.border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-opacity-50{--tw-bg-opacity:0.5}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pt-6{padding-top:1.5rem}.text-center{text-align:center}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-5xl{font-size:3rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.italic{font-style:italic}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61 / var(--tw-text-opacity, 1))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-indigo-700{--tw-text-opacity:1;color:rgb(67 56 202 / var(--tw-text-opacity, 1))}.text-indigo-800{--tw-text-opacity:1;color:rgb(55 48 163 / var(--tw-text-opacity, 1))}.text-indigo-900{--tw-text-opacity:1;color:rgb(49 46 129 / var(--tw-text-opacity, 1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.hover\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.hover\:bg-indigo-100:hover{--tw-bg-opacity:1;background-color:rgb(224 231 255 / var(--tw-bg-opacity, 1))}.hover\:bg-indigo-700:hover{--tw-bg-opacity:1;background-color:rgb(67 56 202 / var(--tw-bg-opacity, 1))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}</style></head>
<body class="p-4">
<div class="container mx-auto max-w-3xl">
<!-- Header -->
<header class="text-center mb-8 pt-6">
<h1 class="text-3xl font-bold text-indigo-900">英文單字學習遊戲</h1>
<p class="text-indigo-700 mt-2">選擇正確的中文意思</p>
<!-- Score display -->
<div class="flex justify-center mt-4">
<div class="score-badge px-4 py-2 rounded-full flex items-center space-x-3">
<div>
<span class="text-green-700 font-medium">正確: </span>
<span id="correct-count" class="text-green-700 font-bold">10</span>
</div>
<div class="h-4 border-r border-gray-400"></div>
<div>
<span class="text-red-700 font-medium">錯誤: </span>
<span id="incorrect-count" class="text-red-700 font-bold">0</span>
</div>
</div>
</div>
</header>
<!-- Main Game Area -->
<div class="word-card bg-white rounded-2xl p-8 mb-8">
<!-- Word Display -->
<div class="text-center mb-10">
<h2 id="english-word" class="text-5xl font-bold text-indigo-600 mb-2">Education</h2>
<p class="text-gray-500 italic">/pronunciation/</p>
</div>
<!-- Options -->
<div id="options-container" class="grid grid-cols-2 gap-4"><button class="option-btn bg-indigo-50 hover:bg-indigo-100 text-indigo-800 font-medium py-4 px-6 rounded-xl text-lg">蘋果</button><button class="option-btn bg-indigo-50 hover:bg-indigo-100 text-indigo-800 font-medium py-4 px-6 rounded-xl text-lg">電腦</button><button class="option-btn bg-indigo-50 hover:bg-indigo-100 text-indigo-800 font-medium py-4 px-6 rounded-xl text-lg">教育</button><button class="option-btn bg-indigo-50 hover:bg-indigo-100 text-indigo-800 font-medium py-4 px-6 rounded-xl text-lg">狗</button></div>
<!-- Feedback Message -->
<div id="feedback" class="mt-6 text-center hidden">
<p id="feedback-message" class="text-xl font-medium text-green-600">正確！👏</p>
<button id="next-word" class="mt-4 bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg">
下一個單字 →
</button>
</div>
</div>
<!-- Developer Mode Button -->
<div class="flex justify-end">
<button id="dev-mode-btn" class="bg-gray-700 hover:bg-gray-800 text-white font-medium py-2 px-4 rounded-lg flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
開發者模式
</button>
</div>
</div>
<!-- Developer Mode Modal -->
<div id="dev-modal" class="fixed inset-0 bg-black bg-opacity-50 modal hidden flex items-center justify-center p-4">
<div class="bg-white rounded-xl max-w-4xl w-full p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-gray-800">原始程式碼</h3>
<button id="close-modal" class="text-gray-500 hover:text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="code-block bg-gray-100 p-4 rounded-lg text-sm">
<pre id="source-code">// Loading source code...</pre>
</div>
</div>
</div>
<script>
// Vocabulary data
const vocabulary = [
{ english: "Apple", chinese: "蘋果", pronunciation: "/ˈæp.əl/" },
{ english: "Book", chinese: "書", pronunciation: "/bʊk/" },
{ english: "Computer", chinese: "電腦", pronunciation: "/kəmˈpjuː.tər/" },
{ english: "Dog", chinese: "狗", pronunciation: "/dɒɡ/" },
{ english: "Education", chinese: "教育", pronunciation: "/ˌed.jʊˈkeɪ.ʃən/" },
{ english: "Friend", chinese: "朋友", pronunciation: "/frend/" },
{ english: "Garden", chinese: "花園", pronunciation: "/ˈɡɑː.dən/" },
{ english: "House", chinese: "房子", pronunciation: "/haʊs/" },
{ english: "Internet", chinese: "網際網路", pronunciation: "/ˈɪn.tə.net/" },
{ english: "Journey", chinese: "旅程", pronunciation: "/ˈdʒɜː.ni/" }
];
// Game state
let currentWord = null;
let options = [];
let correctCount = 0;
let incorrectCount = 0;
// DOM elements
const englishWordElement = document.getElementById('english-word');
const optionsContainer = document.getElementById('options-container');
const feedbackElement = document.getElementById('feedback');
const feedbackMessage = document.getElementById('feedback-message');
const nextWordButton = document.getElementById('next-word');
const correctCountElement = document.getElementById('correct-count');
const incorrectCountElement = document.getElementById('incorrect-count');
const devModeButton = document.getElementById('dev-mode-btn');
const devModal = document.getElementById('dev-modal');
const closeModalButton = document.getElementById('close-modal');
const sourceCodeElement = document.getElementById('source-code');
// Initialize the game
function initGame() {
loadNewWord();
// Event listeners
nextWordButton.addEventListener('click', loadNewWord);
devModeButton.addEventListener('click', () => {
sourceCodeElement.textContent = document.documentElement.outerHTML;
devModal.classList.remove('hidden');
});
closeModalButton.addEventListener('click', () => {
devModal.classList.add('hidden');
});
// Close modal when clicking outside
devModal.addEventListener('click', (e) => {
if (e.target === devModal) {
devModal.classList.add('hidden');
}
});
}
// Load a new word
function loadNewWord() {
// Hide feedback
feedbackElement.classList.add('hidden');
// Select a random word
const randomIndex = Math.floor(Math.random() * vocabulary.length);
currentWord = vocabulary[randomIndex];
// Display the word
englishWordElement.textContent = currentWord.english;
// Generate options (1 correct + 3 incorrect)
generateOptions();
// Display options
displayOptions();
}
// Generate answer options
function generateOptions() {
options = [currentWord.chinese]; // Add correct answer
// Add incorrect options
while (options.length < 4) {
const randomIndex = Math.floor(Math.random() * vocabulary.length);
const randomChinese = vocabulary[randomIndex].chinese;
// Avoid duplicates
if (randomChinese !== currentWord.chinese && !options.includes(randomChinese)) {
options.push(randomChinese);
}
}
// Shuffle options
options = shuffleArray(options);
}
// Display options as buttons
function displayOptions() {
optionsContainer.innerHTML = '';
options.forEach(option => {
const button = document.createElement('button');
button.textContent = option;
button.className = 'option-btn bg-indigo-50 hover:bg-indigo-100 text-indigo-800 font-medium py-4 px-6 rounded-xl text-lg';
button.addEventListener('click', () => checkAnswer(option, button));
optionsContainer.appendChild(button);
});
}
// Check if the selected answer is correct
function checkAnswer(selectedOption, buttonElement) {
const isCorrect = selectedOption === currentWord.chinese;
// Disable all option buttons
const optionButtons = optionsContainer.querySelectorAll('button');
optionButtons.forEach(btn => {
btn.disabled = true;
// Highlight correct answer
if (btn.textContent === currentWord.chinese) {
btn.classList.add('correct');
}
});
// Mark selected button if incorrect
if (!isCorrect) {
buttonElement.classList.add('incorrect');
}
// Update score
if (isCorrect) {
correctCount++;
correctCountElement.textContent = correctCount;
feedbackMessage.textContent = '正確！👏';
feedbackMessage.className = 'text-xl font-medium text-green-600';
} else {
incorrectCount++;
incorrectCountElement.textContent = incorrectCount;
feedbackMessage.textContent = `錯誤！正確答案是：${currentWord.chinese}`;
feedbackMessage.className = 'text-xl font-medium text-red-600';
}
// Show feedback
feedbackElement.classList.remove('hidden');
}
// Utility function to shuffle an array
function shuffleArray(array) {
const newArray = [...array];
for (let i = newArray.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[newArray[i], newArray[j]] = [newArray[j], newArray[i]];
}
return newArray;
}
// Start the game when page loads
window.addEventListener('DOMContentLoaded', initGame);
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'947494da848bf1f0',t:'MTc0ODUwNjkyMC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script><iframe height="1" width="1" style="position: absolute; top: 0px; left: 0px; border: none; visibility: hidden;"></iframe>
</body></html>