-
-
定義
-
{card.definition}
+ {/* 問題區域 */}
+
+
+
定義
+
{card.definition}
+
+
+ 請選擇符合上述定義的英文詞彙:
+
-
- 請選擇符合上述定義的英文詞彙:
-
-
- {/* 選項區域 */}
-
-
- {options.map((option, index) => {
- const isSelected = selectedAnswer === option
- const isCorrectOption = option === card.word
-
- let buttonClass = 'p-4 rounded-lg border-2 text-center font-medium transition-all duration-200 cursor-pointer active:scale-95'
-
- if (showResult) {
- if (isSelected && isCorrectOption) {
- // 選中且正確
- buttonClass += ' bg-green-100 text-green-700 border-green-200 ring-2 ring-green-400'
- } else if (isSelected && !isCorrectOption) {
- // 選中但錯誤
- buttonClass += ' bg-red-100 text-red-700 border-red-200 ring-2 ring-red-400'
- } else if (!isSelected && isCorrectOption) {
- // 未選中但是正確答案
- buttonClass += ' bg-green-50 text-green-600 border-green-200'
- } else {
- // 未選中且非正確答案
- buttonClass += ' bg-gray-50 text-gray-500 border-gray-200'
- }
- } else {
- // 未答題狀態
- buttonClass += ' bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100'
- }
-
- return (
-
- )
- })}
-
-
-
- {/* 結果顯示區域 */}
- {showResult && (
+ {/* 選項區域 */}
-
-
-
- {isCorrect ? '✅' : '❌'}
-
-
- {isCorrect ? '答對了!' : '答錯了'}
-
-
+
+ {options.map((option, index) => {
+ const isSelected = selectedAnswer === option
+ const isCorrectOption = option === card.word
-
-
- 正確答案: {card.word}
-
-
- 發音: {card.pronunciation}
-
-
- 例句: "{card.example}"
-
-
- {card.exampleTranslation}
-
-
+ let buttonClass = 'p-4 rounded-lg border-2 text-center font-medium transition-all duration-200 cursor-pointer active:scale-95'
+
+ if (showResult) {
+ if (isSelected && isCorrectOption) {
+ // 選中且正確
+ buttonClass += ' bg-green-100 text-green-700 border-green-200 ring-2 ring-green-400'
+ } else if (isSelected && !isCorrectOption) {
+ // 選中但錯誤
+ buttonClass += ' bg-red-100 text-red-700 border-red-200 ring-2 ring-red-400'
+ } else if (!isSelected && isCorrectOption) {
+ // 未選中但是正確答案
+ buttonClass += ' bg-green-50 text-green-600 border-green-200'
+ } else {
+ // 未選中且非正確答案
+ buttonClass += ' bg-gray-50 text-gray-500 border-gray-200'
+ }
+ } else {
+ // 未答題狀態
+ buttonClass += ' bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100'
+ }
+
+ return (
+
+ )
+ })}
- )}
- {/* 跳過按鈕 */}
+ {/* 結果顯示區域 */}
+ {showResult && (
+
+
+
+
+ {isCorrect ? '✅' : '❌'}
+
+
+ {isCorrect ? '答對了!' : '答錯了'}
+
+
+
+
+
+ 正確答案: {card.word}
+
+
+ 發音: {card.pronunciation}
+
+
+ 例句: "{card.example}"
+
+
+ {card.exampleTranslation}
+
+
+
+
+ )}
+
+
+ {/* 跳過按鈕 - 移到卡片外面 */}
{!showResult && (