jettcheng1018
/
dramaling-vocab-learning
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ux: 優化選擇題模式的對齊方式和答案回饋 

- 統一選擇題內容為左對齊：問題文字、選項按鈕、答案回饋
- 完善答案顯示：答對和答錯時都顯示詞彙、音標和播放功能
- 改善學習回饋體驗，確保用戶獲得完整的發音資訊
- 優化視覺一致性，與翻卡模式保持統一設計語言

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
鄭沛軒 2025-09-19 23:36:53 +08:00
parent 5bd823ee91
commit 15c4bffe3d
1 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/app/learn/page.tsx
View File

@ -454,7 +454,7 @@ export default function LearnPage() {
<h3 className="font-semibold text-gray-900 mb-2 text-left">定義</h3> <h3 className="font-semibold text-gray-900 mb-2 text-left">定義</h3>
<p className="text-gray-700 text-left">{currentCard.definition}</p> <p className="text-gray-700 text-left">{currentCard.definition}</p>
</div> </div>
<p className="text-lg text-gray-700 mb-2 text-center"> <p className="text-lg text-gray-700 mb-2 text-left">
請選擇符合上述定義的英文詞彙： 請選擇符合上述定義的英文詞彙：
</p> </p>
</div> </div>
@ -465,7 +465,7 @@ export default function LearnPage() {
key={idx} key={idx}
onClick={() => !showResult && handleQuizAnswer(option)} onClick={() => !showResult && handleQuizAnswer(option)}
disabled={showResult} disabled={showResult}
className={`w-full p-4 text-center rounded-lg border-2 transition-all ${ className={`w-full p-4 text-left rounded-lg border-2 transition-all ${
showResult showResult
? option === currentCard.word ? option === currentCard.word
? 'border-green-500 bg-green-50 text-green-700' ? 'border-green-500 bg-green-50 text-green-700'
@ -495,13 +495,15 @@ export default function LearnPage() {
</p> </p>
{selectedAnswer !== currentCard.word && ( {selectedAnswer !== currentCard.word && (
<p className="text-gray-700 mt-2"> <p className="text-gray-700 mt-2">
正確答案是：<strong>{currentCard.word}</strong> 正確答案是：<strong>{currentCard.word}</strong> {currentCard.pronunciation}
</p> </p>
)} )}
<div className="mt-3 text-center"> {selectedAnswer === currentCard.word && (
<p className="text-gray-600 text-sm mb-2"> <p className="text-gray-700 mt-2">
翻譯：{currentCard.translation} <strong>{currentCard.word}</strong> {currentCard.pronunciation}
</p> </p>
)}
<div className="mt-3 text-left">
<AudioPlayer text={currentCard.word} /> <AudioPlayer text={currentCard.word} />
</div> </div>
</div> </div>