fix: 更新組件內容和提示文字優化
## 🔧 組件內容改善 - VocabChoiceTest: 移除同義詞顯示區塊,簡化布局 - SentenceReorderTest: 優化提示文字為"請嘗試組成完整句子" ## 🎯 用戶體驗改善 - 更清晰的指導文字 - 更簡潔的界面設計 - 保持功能完整性 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
ae342961d9
commit
441bc5bb05
|
|
@ -94,7 +94,7 @@ const SentenceReorderTestComponent: React.FC<SentenceReorderTestProps> = ({
|
||||||
<div className="relative min-h-[120px] bg-gray-50 rounded-lg p-4 border-2 border-dashed border-gray-300">
|
<div className="relative min-h-[120px] bg-gray-50 rounded-lg p-4 border-2 border-dashed border-gray-300">
|
||||||
{arrangedWords.length === 0 ? (
|
{arrangedWords.length === 0 ? (
|
||||||
<div className="absolute inset-0 flex items-center justify-center text-gray-400 text-lg">
|
<div className="absolute inset-0 flex items-center justify-center text-gray-400 text-lg">
|
||||||
將下方單字拖拽到這裡組成完整句子
|
請嘗試組成完整句子
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="flex flex-wrap gap-2">
|
||||||
|
|
|
||||||
|
|
@ -54,23 +54,6 @@ const VocabChoiceTestComponent: React.FC<VocabChoiceTestProps> = ({
|
||||||
<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">{cardData.definition}</p>
|
<p className="text-gray-700 text-left">{cardData.definition}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 同義詞顯示 */}
|
|
||||||
{cardData.synonyms && cardData.synonyms.length > 0 && (
|
|
||||||
<div className="bg-blue-50 rounded-lg p-4 mb-6">
|
|
||||||
<h3 className="font-semibold text-gray-900 mb-2 text-left">同義詞提示</h3>
|
|
||||||
<div className="flex flex-wrap gap-2 justify-start">
|
|
||||||
{cardData.synonyms.map((synonym, index) => (
|
|
||||||
<span
|
|
||||||
key={index}
|
|
||||||
className="px-3 py-1 bg-blue-100 text-blue-700 text-sm rounded-full font-medium"
|
|
||||||
>
|
|
||||||
{synonym}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 選項區域 - 響應式網格布局 */}
|
{/* 選項區域 - 響應式網格布局 */}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue