1683 lines
57 KiB
HTML
1683 lines
57 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-TW">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>詞彙學習 - Drama Ling</title>
|
||
<link rel="stylesheet" href="../assets/style.css">
|
||
<style>
|
||
.vocabulary-layout {
|
||
min-height: 100vh;
|
||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||
display: flex;
|
||
}
|
||
|
||
/* 側邊欄 - 與dashboard保持一致 */
|
||
.sidebar {
|
||
width: 280px;
|
||
background: var(--bg-card);
|
||
border-right: 1px solid var(--divider);
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: fixed;
|
||
height: 100vh;
|
||
z-index: 100;
|
||
}
|
||
|
||
.sidebar-header {
|
||
padding: var(--space-6);
|
||
border-bottom: 1px solid var(--divider);
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
color: var(--text-primary);
|
||
text-decoration: none;
|
||
font-size: var(--text-xl);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.sidebar-nav {
|
||
flex: 1;
|
||
padding: var(--space-6) 0;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.nav-section {
|
||
margin-bottom: var(--space-6);
|
||
}
|
||
|
||
.nav-section-title {
|
||
font-size: var(--text-xs);
|
||
font-weight: 600;
|
||
color: var(--text-tertiary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
margin-bottom: var(--space-3);
|
||
padding: 0 var(--space-6);
|
||
}
|
||
|
||
.nav-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3) var(--space-6);
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-size: var(--text-sm);
|
||
font-weight: 500;
|
||
transition: all 0.2s ease;
|
||
border-left: 3px solid transparent;
|
||
}
|
||
|
||
.nav-item:hover {
|
||
background: rgba(0, 229, 204, 0.1);
|
||
color: var(--primary-teal);
|
||
}
|
||
|
||
.nav-item.active {
|
||
background: rgba(0, 229, 204, 0.15);
|
||
color: var(--primary-teal);
|
||
border-left-color: var(--primary-teal);
|
||
}
|
||
|
||
.nav-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.sidebar-footer {
|
||
padding: var(--space-6);
|
||
border-top: 1px solid var(--divider);
|
||
}
|
||
|
||
.user-profile {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3);
|
||
background: var(--bg-secondary);
|
||
border-radius: var(--radius-lg);
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: var(--primary-teal);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 700;
|
||
color: white;
|
||
}
|
||
|
||
.user-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.user-name {
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.user-level {
|
||
font-size: var(--text-xs);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* 主內容區 */
|
||
.main-content {
|
||
flex: 1;
|
||
margin-left: 280px;
|
||
padding: var(--space-6);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.page-header {
|
||
margin-bottom: var(--space-8);
|
||
}
|
||
|
||
.header-section {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--space-6);
|
||
}
|
||
|
||
.header-text h1 {
|
||
font-size: var(--text-3xl);
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
.header-text p {
|
||
font-size: var(--text-lg);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.header-stats {
|
||
display: flex;
|
||
gap: var(--space-6);
|
||
align-items: center;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: var(--text-2xl);
|
||
font-weight: 700;
|
||
color: var(--primary-teal);
|
||
display: block;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: var(--text-sm);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* 學習模式選擇 */
|
||
.mode-selector {
|
||
display: flex;
|
||
gap: var(--space-4);
|
||
margin-bottom: var(--space-8);
|
||
}
|
||
|
||
.mode-card {
|
||
flex: 1;
|
||
background: var(--bg-card);
|
||
border: 2px solid var(--divider);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-6);
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.mode-card:hover {
|
||
border-color: var(--primary-teal);
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.mode-card.active {
|
||
border-color: var(--primary-teal);
|
||
background: rgba(0, 229, 204, 0.1);
|
||
}
|
||
|
||
.mode-icon {
|
||
font-size: var(--text-4xl);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
.mode-title {
|
||
font-size: var(--text-lg);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
.mode-description {
|
||
font-size: var(--text-sm);
|
||
color: var(--text-secondary);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.mode-progress {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: var(--text-sm);
|
||
color: var(--text-tertiary);
|
||
}
|
||
|
||
/* 詞彙卡片學習區 */
|
||
.vocabulary-section {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--divider);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-8);
|
||
margin-bottom: var(--space-8);
|
||
text-align: center;
|
||
}
|
||
|
||
.vocabulary-card {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
padding: var(--space-8);
|
||
position: relative;
|
||
}
|
||
|
||
.vocabulary-word {
|
||
font-size: var(--text-5xl);
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.vocabulary-phonetic {
|
||
font-size: var(--text-xl);
|
||
color: var(--text-secondary);
|
||
margin-bottom: var(--space-6);
|
||
}
|
||
|
||
.vocabulary-definition {
|
||
font-size: var(--text-lg);
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-6);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.vocabulary-example {
|
||
background: var(--bg-secondary);
|
||
padding: var(--space-4);
|
||
border-radius: var(--radius-lg);
|
||
margin-bottom: var(--space-6);
|
||
font-style: italic;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.vocabulary-controls {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: var(--space-4);
|
||
margin-top: var(--space-8);
|
||
}
|
||
|
||
.control-btn {
|
||
padding: var(--space-3) var(--space-6);
|
||
border: 2px solid var(--divider);
|
||
border-radius: var(--radius-lg);
|
||
background: var(--bg-card);
|
||
color: var(--text-primary);
|
||
font-size: var(--text-base);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.control-btn:hover {
|
||
border-color: var(--primary-teal);
|
||
background: rgba(0, 229, 204, 0.1);
|
||
}
|
||
|
||
.control-btn.primary {
|
||
background: var(--primary-teal);
|
||
border-color: var(--primary-teal);
|
||
color: white;
|
||
}
|
||
|
||
.control-btn.primary:hover {
|
||
background: #00b8a0;
|
||
}
|
||
|
||
.difficulty-buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: var(--space-3);
|
||
margin-top: var(--space-6);
|
||
}
|
||
|
||
.difficulty-btn {
|
||
padding: var(--space-2) var(--space-4);
|
||
border: 1px solid var(--divider);
|
||
border-radius: var(--radius-md);
|
||
background: var(--bg-card);
|
||
color: var(--text-secondary);
|
||
font-size: var(--text-sm);
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.difficulty-btn:hover {
|
||
background: var(--bg-secondary);
|
||
}
|
||
|
||
.difficulty-btn.easy {
|
||
border-color: var(--success-green);
|
||
color: var(--success-green);
|
||
}
|
||
|
||
.difficulty-btn.hard {
|
||
border-color: var(--error-red);
|
||
color: var(--error-red);
|
||
}
|
||
|
||
/* 詞彙清單 */
|
||
.vocabulary-list {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--divider);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-6);
|
||
}
|
||
|
||
.list-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--space-6);
|
||
}
|
||
|
||
.list-title {
|
||
font-size: var(--text-xl);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.filter-tabs {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.filter-tab {
|
||
padding: var(--space-2) var(--space-4);
|
||
border: 1px solid var(--divider);
|
||
border-radius: var(--radius-md);
|
||
background: var(--bg-secondary);
|
||
color: var(--text-secondary);
|
||
font-size: var(--text-sm);
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.filter-tab.active {
|
||
background: var(--primary-teal);
|
||
border-color: var(--primary-teal);
|
||
color: white;
|
||
}
|
||
|
||
.vocabulary-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: var(--space-4);
|
||
border: 1px solid var(--divider);
|
||
border-radius: var(--radius-lg);
|
||
margin-bottom: var(--space-3);
|
||
transition: all 0.2s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.vocabulary-item:hover {
|
||
border-color: var(--primary-teal);
|
||
background: rgba(0, 229, 204, 0.05);
|
||
}
|
||
|
||
.word-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.word-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
.word-main {
|
||
font-size: var(--text-lg);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.word-definition {
|
||
font-size: var(--text-sm);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.word-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
.mastery-indicator {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--text-tertiary);
|
||
}
|
||
|
||
.mastery-indicator.learned {
|
||
background: var(--success-green);
|
||
}
|
||
|
||
.mastery-indicator.learning {
|
||
background: var(--warning-yellow);
|
||
}
|
||
|
||
.play-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
border: none;
|
||
border-radius: 50%;
|
||
background: var(--primary-teal);
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.play-btn:hover {
|
||
background: #00b8a0;
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
/* 情境學習區樣式 */
|
||
.context-learning-section {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--divider);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-6);
|
||
margin-bottom: var(--space-8);
|
||
}
|
||
|
||
/* 場景選擇器 */
|
||
.scene-selector {
|
||
margin-bottom: var(--space-6);
|
||
}
|
||
|
||
.scene-title {
|
||
font-size: var(--text-lg);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-4);
|
||
text-align: center;
|
||
}
|
||
|
||
.scene-cards {
|
||
display: flex;
|
||
gap: var(--space-4);
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.scene-card {
|
||
background: var(--bg-secondary);
|
||
border: 2px solid var(--divider);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-4);
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
min-width: 100px;
|
||
}
|
||
|
||
.scene-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
border-color: var(--primary-teal);
|
||
}
|
||
|
||
.scene-card.active {
|
||
border-color: var(--primary-teal);
|
||
background: rgba(0, 229, 204, 0.1);
|
||
}
|
||
|
||
.scene-icon {
|
||
font-size: var(--text-2xl);
|
||
margin-bottom: var(--space-2);
|
||
display: block;
|
||
}
|
||
|
||
.scene-name {
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
/* 情境主要內容 */
|
||
.context-main {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr;
|
||
gap: var(--space-6);
|
||
margin-bottom: var(--space-6);
|
||
}
|
||
|
||
/* 故事背景 */
|
||
.story-background {
|
||
background: var(--bg-secondary);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-6);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.scene-illustration {
|
||
font-size: var(--text-6xl);
|
||
text-align: center;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.scene-description h4 {
|
||
font-size: var(--text-lg);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-2);
|
||
text-align: center;
|
||
}
|
||
|
||
.scene-description p {
|
||
font-size: var(--text-base);
|
||
color: var(--text-secondary);
|
||
line-height: 1.5;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 對話氣泡 */
|
||
.story-dialogue {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.dialogue-bubble {
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-4);
|
||
position: relative;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.dialogue-bubble.barista {
|
||
align-self: flex-start;
|
||
max-width: 85%;
|
||
border-left: 4px solid var(--primary-teal);
|
||
}
|
||
|
||
.dialogue-bubble.customer {
|
||
align-self: flex-end;
|
||
max-width: 85%;
|
||
border-left: 4px solid var(--secondary-purple);
|
||
}
|
||
|
||
.speaker-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
.speaker-avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
background: var(--primary-teal);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: var(--text-base);
|
||
}
|
||
|
||
.dialogue-bubble.customer .speaker-avatar {
|
||
background: var(--secondary-purple);
|
||
}
|
||
|
||
.speaker-name {
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.dialogue-content p {
|
||
font-size: var(--text-base);
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
.dialogue-content .translation {
|
||
font-size: var(--text-sm);
|
||
color: var(--text-secondary);
|
||
font-style: italic;
|
||
}
|
||
|
||
.target-vocabulary {
|
||
background: rgba(0, 229, 204, 0.2);
|
||
color: var(--primary-teal);
|
||
padding: var(--space-1) var(--space-2);
|
||
border-radius: var(--radius-sm);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 詞彙聚光燈 */
|
||
.context-vocabulary {
|
||
background: var(--bg-secondary);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-5);
|
||
}
|
||
|
||
.vocab-title {
|
||
font-size: var(--text-base);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-4);
|
||
text-align: center;
|
||
}
|
||
|
||
.vocab-card-context {
|
||
text-align: center;
|
||
}
|
||
|
||
.vocab-word-main {
|
||
font-size: var(--text-3xl);
|
||
font-weight: 700;
|
||
color: var(--primary-teal);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
.vocab-pronunciation {
|
||
font-size: var(--text-lg);
|
||
color: var(--text-secondary);
|
||
margin-bottom: var(--space-3);
|
||
font-family: 'Times New Roman', serif;
|
||
}
|
||
|
||
.vocab-definition {
|
||
font-size: var(--text-base);
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-4);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.vocab-context-examples {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
.context-example {
|
||
background: var(--bg-card);
|
||
padding: var(--space-3);
|
||
border-radius: var(--radius-md);
|
||
text-align: left;
|
||
}
|
||
|
||
.example-situation {
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
color: var(--primary-teal);
|
||
display: block;
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
|
||
.example-text {
|
||
font-size: var(--text-sm);
|
||
color: var(--text-primary);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 情境練習 */
|
||
.context-practice {
|
||
background: var(--bg-secondary);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-5);
|
||
}
|
||
|
||
.practice-title {
|
||
font-size: var(--text-lg);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-4);
|
||
text-align: center;
|
||
}
|
||
|
||
.practice-exercise {
|
||
margin-bottom: var(--space-5);
|
||
}
|
||
|
||
.exercise-question p {
|
||
font-size: var(--text-base);
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-4);
|
||
text-align: center;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.exercise-options {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
.option-btn {
|
||
padding: var(--space-3) var(--space-4);
|
||
background: var(--bg-card);
|
||
border: 2px solid var(--divider);
|
||
border-radius: var(--radius-lg);
|
||
color: var(--text-primary);
|
||
font-size: var(--text-base);
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
text-align: left;
|
||
}
|
||
|
||
.option-btn:hover {
|
||
border-color: var(--primary-teal);
|
||
background: rgba(0, 229, 204, 0.1);
|
||
}
|
||
|
||
.option-btn.correct {
|
||
border-color: var(--success-green);
|
||
background: rgba(34, 197, 94, 0.1);
|
||
color: var(--success-green);
|
||
}
|
||
|
||
.option-btn.incorrect {
|
||
border-color: var(--error-red);
|
||
background: rgba(239, 68, 68, 0.1);
|
||
color: var(--error-red);
|
||
}
|
||
|
||
.exercise-feedback {
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-4);
|
||
text-align: center;
|
||
}
|
||
|
||
.feedback-content {
|
||
font-size: var(--text-base);
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.next-exercise-btn {
|
||
background: var(--primary-teal);
|
||
color: white;
|
||
border: none;
|
||
padding: var(--space-3) var(--space-5);
|
||
border-radius: var(--radius-lg);
|
||
font-size: var(--text-base);
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.next-exercise-btn:hover {
|
||
background: #00b8a0;
|
||
}
|
||
|
||
/* 情境進度條 */
|
||
.context-progress-bar {
|
||
margin-top: var(--space-4);
|
||
}
|
||
|
||
.progress-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
.progress-text {
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.progress-percentage {
|
||
font-size: var(--text-sm);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.context-learning-section .progress-bar {
|
||
height: 8px;
|
||
background: var(--bg-primary);
|
||
border-radius: var(--radius-sm);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.context-learning-section .progress-fill {
|
||
height: 100%;
|
||
background: var(--primary-teal);
|
||
transition: width 0.5s ease;
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
|
||
/* 行動版適配 */
|
||
@media (max-width: 1024px) {
|
||
.sidebar {
|
||
transform: translateX(-100%);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.sidebar.open {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
.main-content {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.main-content {
|
||
padding: var(--space-4);
|
||
}
|
||
|
||
.header-section {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.mode-selector {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.vocabulary-card {
|
||
padding: var(--space-4);
|
||
}
|
||
|
||
.vocabulary-word {
|
||
font-size: var(--text-4xl);
|
||
}
|
||
|
||
.vocabulary-controls {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.difficulty-buttons {
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.context-main {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.scene-cards {
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
.scene-card {
|
||
min-width: 80px;
|
||
padding: var(--space-3);
|
||
}
|
||
|
||
.exercise-options {
|
||
gap: var(--space-2);
|
||
}
|
||
}
|
||
|
||
.prototype-note {
|
||
position: fixed;
|
||
top: var(--space-4);
|
||
right: var(--space-4);
|
||
background: var(--success-green);
|
||
color: var(--bg-dark);
|
||
padding: var(--space-2) var(--space-4);
|
||
border-radius: var(--radius-md);
|
||
font-size: var(--text-xs);
|
||
font-weight: 600;
|
||
z-index: 1000;
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.mobile-menu-btn {
|
||
display: none;
|
||
position: fixed;
|
||
top: var(--space-4);
|
||
left: var(--space-4);
|
||
width: 48px;
|
||
height: 48px;
|
||
background: var(--primary-teal);
|
||
border: none;
|
||
border-radius: var(--radius-lg);
|
||
color: white;
|
||
font-size: var(--text-lg);
|
||
z-index: 101;
|
||
cursor: pointer;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.mobile-menu-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="prototype-note">
|
||
📚 HTML 原型 - 詞彙學習
|
||
</div>
|
||
|
||
<button class="mobile-menu-btn" id="mobileMenuBtn">☰</button>
|
||
|
||
<div class="vocabulary-layout">
|
||
<!-- 側邊欄 -->
|
||
<aside class="sidebar" id="sidebar">
|
||
<div class="sidebar-header">
|
||
<a href="dashboard.html" class="logo">
|
||
🎭 Drama Ling
|
||
</a>
|
||
</div>
|
||
|
||
<nav class="sidebar-nav">
|
||
<div class="nav-section">
|
||
<div class="nav-section-title">主要功能</div>
|
||
<a href="dashboard.html" class="nav-item">
|
||
<span class="nav-icon">📊</span>
|
||
學習儀表板
|
||
</a>
|
||
<a href="#" class="nav-item active">
|
||
<span class="nav-icon">📚</span>
|
||
詞彙學習
|
||
</a>
|
||
<a href="dialogue.html" class="nav-item">
|
||
<span class="nav-icon">💬</span>
|
||
對話練習
|
||
</a>
|
||
<a href="roleplay.html" class="nav-item">
|
||
<span class="nav-icon">🎭</span>
|
||
角色扮演
|
||
</a>
|
||
<a href="pronunciation.html" class="nav-item">
|
||
<span class="nav-icon">🎵</span>
|
||
發音練習
|
||
</a>
|
||
</div>
|
||
|
||
<div class="nav-section">
|
||
<div class="nav-section-title">個人管理</div>
|
||
<a href="profile.html" class="nav-item">
|
||
<span class="nav-icon">👤</span>
|
||
個人檔案
|
||
</a>
|
||
<a href="progress.html" class="nav-item">
|
||
<span class="nav-icon">📈</span>
|
||
學習進度
|
||
</a>
|
||
<a href="settings.html" class="nav-item">
|
||
<span class="nav-icon">⚙️</span>
|
||
設定
|
||
</a>
|
||
</div>
|
||
|
||
<div class="nav-section">
|
||
<div class="nav-section-title">訂閱服務</div>
|
||
<a href="subscription.html" class="nav-item">
|
||
<span class="nav-icon">💎</span>
|
||
訂閱管理
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="sidebar-footer">
|
||
<div class="user-profile">
|
||
<div class="user-avatar">張</div>
|
||
<div class="user-info">
|
||
<div class="user-name">張小明</div>
|
||
<div class="user-level">Level 12</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 主內容區 -->
|
||
<main class="main-content">
|
||
<div class="page-header">
|
||
<div class="header-section">
|
||
<div class="header-text">
|
||
<h1>詞彙學習</h1>
|
||
<p>透過間隔重複和情境學習，有效掌握新詞彙</p>
|
||
</div>
|
||
<div class="header-stats">
|
||
<div class="stat-item">
|
||
<span class="stat-value">1,247</span>
|
||
<span class="stat-label">已學詞彙</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-value">23</span>
|
||
<span class="stat-label">今日新增</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-value">85%</span>
|
||
<span class="stat-label">掌握程度</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 學習模式選擇 -->
|
||
<div class="mode-selector">
|
||
<div class="mode-card active" data-mode="flashcard">
|
||
<div class="mode-icon">🃏</div>
|
||
<h3 class="mode-title">記憶卡片</h3>
|
||
<p class="mode-description">透過卡片翻轉快速記憶新詞彙</p>
|
||
<div class="mode-progress">
|
||
<span>待複習: 15</span>
|
||
<span>新詞彙: 8</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mode-card" data-mode="quiz">
|
||
<div class="mode-icon">🎯</div>
|
||
<h3 class="mode-title">詞彙測驗</h3>
|
||
<p class="mode-description">選擇題和填空題測試詞彙掌握</p>
|
||
<div class="mode-progress">
|
||
<span>正確率: 92%</span>
|
||
<span>完成: 45/50</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mode-card" data-mode="context">
|
||
<div class="mode-icon">📖</div>
|
||
<h3 class="mode-title">情境學習</h3>
|
||
<p class="mode-description">在真實情境中學習詞彙運用</p>
|
||
<div class="mode-progress">
|
||
<span>場景: 咖啡廳</span>
|
||
<span>進度: 3/5</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 詞彙卡片學習區 -->
|
||
<div class="vocabulary-section" id="flashcardSection">
|
||
<div class="vocabulary-card">
|
||
<div class="vocabulary-word">confidence</div>
|
||
<div class="vocabulary-phonetic">/ˈkɒnfɪdəns/</div>
|
||
<div class="vocabulary-definition">信心；自信心；把握</div>
|
||
<div class="vocabulary-example">
|
||
"She spoke with great confidence during the presentation."<br>
|
||
她在簡報中表現出很大的自信。
|
||
</div>
|
||
|
||
<div class="vocabulary-controls">
|
||
<button class="control-btn" id="playAudioBtn">
|
||
🔊 發音
|
||
</button>
|
||
<button class="control-btn" id="flipCardBtn">
|
||
🔄 翻轉
|
||
</button>
|
||
<button class="control-btn primary" id="nextCardBtn">
|
||
下一個 →
|
||
</button>
|
||
</div>
|
||
|
||
<div class="difficulty-buttons">
|
||
<button class="difficulty-btn easy">簡單 (3天後)</button>
|
||
<button class="difficulty-btn">普通 (1天後)</button>
|
||
<button class="difficulty-btn hard">困難 (10分鐘後)</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 情境學習區 -->
|
||
<div class="context-learning-section" id="contextSection" style="display: none;">
|
||
<div class="context-header">
|
||
<div class="scene-selector">
|
||
<h3 class="scene-title">選擇學習場景</h3>
|
||
<div class="scene-cards">
|
||
<div class="scene-card active" data-scene="coffee">
|
||
<div class="scene-icon">☕</div>
|
||
<span class="scene-name">咖啡廳</span>
|
||
</div>
|
||
<div class="scene-card" data-scene="office">
|
||
<div class="scene-icon">🏢</div>
|
||
<span class="scene-name">辦公室</span>
|
||
</div>
|
||
<div class="scene-card" data-scene="airport">
|
||
<div class="scene-icon">✈️</div>
|
||
<span class="scene-name">機場</span>
|
||
</div>
|
||
<div class="scene-card" data-scene="restaurant">
|
||
<div class="scene-icon">🍽️</div>
|
||
<span class="scene-name">餐廳</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="context-main">
|
||
<div class="context-story">
|
||
<div class="story-background">
|
||
<div class="scene-illustration">☕🏪</div>
|
||
<div class="scene-description">
|
||
<h4>咖啡廳情境</h4>
|
||
<p>你來到一間溫馨的咖啡店，準備點一杯下午茶。讓我們在這個情境中學習相關的詞彙吧！</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="story-dialogue">
|
||
<div class="dialogue-bubble barista">
|
||
<div class="speaker-info">
|
||
<div class="speaker-avatar">👨🍳</div>
|
||
<span class="speaker-name">咖啡師</span>
|
||
</div>
|
||
<div class="dialogue-content">
|
||
<p>Good afternoon! Welcome to our café. What can I get you today?</p>
|
||
<p class="translation">下午好！歡迎來到我們的咖啡廳。請問您今天想要什麼？</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dialogue-bubble customer">
|
||
<div class="speaker-info">
|
||
<div class="speaker-avatar">👤</div>
|
||
<span class="speaker-name">顧客 (你)</span>
|
||
</div>
|
||
<div class="dialogue-content">
|
||
<p>Hi, I'd like a <span class="target-vocabulary">cappuccino</span>, please.</p>
|
||
<p class="translation">您好，我想要一杯<strong>卡布奇諾</strong>，謝謝。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="context-vocabulary">
|
||
<div class="vocab-spotlight">
|
||
<h4 class="vocab-title">重點詞彙</h4>
|
||
<div class="vocab-card-context">
|
||
<div class="vocab-word-main">cappuccino</div>
|
||
<div class="vocab-pronunciation">/ˌkæpʊˈtʃiːnoʊ/</div>
|
||
<div class="vocab-definition">卡布奇諾咖啡</div>
|
||
<div class="vocab-context-examples">
|
||
<div class="context-example">
|
||
<span class="example-situation">☕ 咖啡廳：</span>
|
||
<span class="example-text">"I'll have a <strong>cappuccino</strong> with extra foam."</span>
|
||
</div>
|
||
<div class="context-example">
|
||
<span class="example-situation">🏠 家中：</span>
|
||
<span class="example-text">"My morning <strong>cappuccino</strong> helps me start the day."</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="context-practice">
|
||
<div class="practice-section">
|
||
<h4 class="practice-title">情境練習</h4>
|
||
<div class="practice-exercise">
|
||
<div class="exercise-question">
|
||
<p>在咖啡廳，你想點一杯拿鐵，你會怎麼說？</p>
|
||
<div class="exercise-options">
|
||
<button class="option-btn" data-correct="false">I want coffee.</button>
|
||
<button class="option-btn" data-correct="true">I'd like a latte, please.</button>
|
||
<button class="option-btn" data-correct="false">Give me drink.</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="exercise-feedback" style="display: none;">
|
||
<div class="feedback-content"></div>
|
||
<button class="next-exercise-btn">下一題</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="context-progress-bar">
|
||
<div class="progress-info">
|
||
<span class="progress-text">咖啡廳場景進度</span>
|
||
<span class="progress-percentage">3/5 完成</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 60%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 詞彙清單 -->
|
||
<div class="vocabulary-list">
|
||
<div class="list-header">
|
||
<h2 class="list-title">我的詞彙庫</h2>
|
||
<div class="filter-tabs">
|
||
<button class="filter-tab active">全部</button>
|
||
<button class="filter-tab">學習中</button>
|
||
<button class="filter-tab">已掌握</button>
|
||
<button class="filter-tab">需複習</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vocabulary-item">
|
||
<div class="word-info">
|
||
<div class="mastery-indicator learned"></div>
|
||
<div class="word-text">
|
||
<span class="word-main">confidence</span>
|
||
<span class="word-definition">信心；自信心</span>
|
||
</div>
|
||
</div>
|
||
<div class="word-status">
|
||
<button class="play-btn">▶</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vocabulary-item">
|
||
<div class="word-info">
|
||
<div class="mastery-indicator learning"></div>
|
||
<div class="word-text">
|
||
<span class="word-main">presentation</span>
|
||
<span class="word-definition">簡報；呈現</span>
|
||
</div>
|
||
</div>
|
||
<div class="word-status">
|
||
<button class="play-btn">▶</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vocabulary-item">
|
||
<div class="word-info">
|
||
<div class="mastery-indicator"></div>
|
||
<div class="word-text">
|
||
<span class="word-main">colleague</span>
|
||
<span class="word-definition">同事；同僚</span>
|
||
</div>
|
||
</div>
|
||
<div class="word-status">
|
||
<button class="play-btn">▶</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vocabulary-item">
|
||
<div class="word-info">
|
||
<div class="mastery-indicator learned"></div>
|
||
<div class="word-text">
|
||
<span class="word-main">opportunity</span>
|
||
<span class="word-definition">機會；時機</span>
|
||
</div>
|
||
</div>
|
||
<div class="word-status">
|
||
<button class="play-btn">▶</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vocabulary-item">
|
||
<div class="word-info">
|
||
<div class="mastery-indicator learning"></div>
|
||
<div class="word-text">
|
||
<span class="word-main">achievement</span>
|
||
<span class="word-definition">成就；成績</span>
|
||
</div>
|
||
</div>
|
||
<div class="word-status">
|
||
<button class="play-btn">▶</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
// 原型互動功能
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 行動版選單切換
|
||
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
|
||
const sidebar = document.getElementById('sidebar');
|
||
|
||
mobileMenuBtn.addEventListener('click', function() {
|
||
sidebar.classList.toggle('open');
|
||
});
|
||
|
||
// 點擊外部關閉側邊欄
|
||
document.addEventListener('click', function(e) {
|
||
if (window.innerWidth <= 1024 &&
|
||
!sidebar.contains(e.target) &&
|
||
!mobileMenuBtn.contains(e.target)) {
|
||
sidebar.classList.remove('open');
|
||
}
|
||
});
|
||
|
||
// 學習模式切換
|
||
document.querySelectorAll('.mode-card').forEach(card => {
|
||
card.addEventListener('click', function() {
|
||
document.querySelectorAll('.mode-card').forEach(c => c.classList.remove('active'));
|
||
this.classList.add('active');
|
||
|
||
const mode = this.dataset.mode;
|
||
|
||
// 隱藏所有學習區域
|
||
document.getElementById('flashcardSection').style.display = 'none';
|
||
document.getElementById('contextSection').style.display = 'none';
|
||
document.getElementById('quizSection') && (document.getElementById('quizSection').style.display = 'none');
|
||
|
||
// 根據選擇的模式顯示對應區域
|
||
switch(mode) {
|
||
case 'flashcard':
|
||
document.getElementById('flashcardSection').style.display = 'block';
|
||
break;
|
||
case 'context':
|
||
document.getElementById('contextSection').style.display = 'block';
|
||
initializeContextLearning();
|
||
break;
|
||
case 'quiz':
|
||
alert('詞彙測驗模式即將推出！');
|
||
break;
|
||
}
|
||
});
|
||
});
|
||
|
||
// 詞彙卡片控制
|
||
const flipCardBtn = document.getElementById('flipCardBtn');
|
||
const nextCardBtn = document.getElementById('nextCardBtn');
|
||
const playAudioBtn = document.getElementById('playAudioBtn');
|
||
|
||
let isFlipped = false;
|
||
|
||
flipCardBtn.addEventListener('click', function() {
|
||
isFlipped = !isFlipped;
|
||
if (isFlipped) {
|
||
alert('🔄 卡片已翻轉 - 顯示中文解釋');
|
||
this.textContent = '🔄 翻回';
|
||
} else {
|
||
alert('🔄 卡片已翻回 - 顯示英文單字');
|
||
this.textContent = '🔄 翻轉';
|
||
}
|
||
});
|
||
|
||
nextCardBtn.addEventListener('click', function() {
|
||
alert('📚 載入下一個詞彙...');
|
||
// 重置翻轉狀態
|
||
isFlipped = false;
|
||
flipCardBtn.textContent = '🔄 翻轉';
|
||
});
|
||
|
||
playAudioBtn.addEventListener('click', function() {
|
||
alert('🔊 播放 "confidence" 的發音');
|
||
});
|
||
|
||
// 難度按鈕
|
||
document.querySelectorAll('.difficulty-btn').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
alert(`選擇難度：${this.textContent}`);
|
||
nextCardBtn.click(); // 自動下一個
|
||
});
|
||
});
|
||
|
||
// 篩選標籤
|
||
document.querySelectorAll('.filter-tab').forEach(tab => {
|
||
tab.addEventListener('click', function() {
|
||
document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
|
||
this.classList.add('active');
|
||
|
||
alert(`篩選：${this.textContent}`);
|
||
});
|
||
});
|
||
|
||
// 詞彙項目點擊
|
||
document.querySelectorAll('.vocabulary-item').forEach(item => {
|
||
item.addEventListener('click', function(e) {
|
||
if (!e.target.classList.contains('play-btn')) {
|
||
const word = this.querySelector('.word-main').textContent;
|
||
alert(`查看詞彙詳情：${word}`);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 播放按鈕
|
||
document.querySelectorAll('.play-btn').forEach(btn => {
|
||
btn.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
const word = this.closest('.vocabulary-item').querySelector('.word-main').textContent;
|
||
alert(`🔊 播放 "${word}" 的發音`);
|
||
});
|
||
});
|
||
|
||
// 導航項目點擊
|
||
document.querySelectorAll('.nav-item').forEach(item => {
|
||
item.addEventListener('click', function(e) {
|
||
if (this.getAttribute('href') === '#') {
|
||
e.preventDefault();
|
||
}
|
||
});
|
||
});
|
||
|
||
console.log('📚 詞彙學習原型已載入完成');
|
||
});
|
||
|
||
// 情境學習場景數據
|
||
const sceneData = {
|
||
coffee: {
|
||
name: '咖啡廳',
|
||
icon: '☕',
|
||
description: '在溫馨的咖啡廳中，練習日常對話和點餐英文',
|
||
illustration: '☕🍰🏪',
|
||
dialogue: [
|
||
{
|
||
speaker: 'barista',
|
||
name: '咖啡師',
|
||
text: 'Good morning! What can I get you today?',
|
||
translation: '早安！今天想要點什麼呢？',
|
||
vocabulary: ['morning', 'get']
|
||
},
|
||
{
|
||
speaker: 'customer',
|
||
name: '顧客',
|
||
text: 'I\'d like a large coffee with confidence, please.',
|
||
translation: '我想要一杯大杯的咖啡，謝謝。',
|
||
vocabulary: ['large', 'confidence']
|
||
}
|
||
],
|
||
vocabulary: [
|
||
{
|
||
word: 'confidence',
|
||
phonetic: '/ˈkɒnfɪdəns/',
|
||
meaning: '信心；自信心；把握',
|
||
example: 'She spoke with great confidence.',
|
||
translation: '她講話很有自信。'
|
||
},
|
||
{
|
||
word: 'morning',
|
||
phonetic: '/ˈmɔːrnɪŋ/',
|
||
meaning: '早晨；上午',
|
||
example: 'Good morning, everyone!',
|
||
translation: '大家早安！'
|
||
}
|
||
]
|
||
},
|
||
office: {
|
||
name: '辦公室',
|
||
icon: '🏢',
|
||
description: '在專業的辦公環境中，學習商務英文和職場溝通',
|
||
illustration: '🏢💼📊',
|
||
dialogue: [
|
||
{
|
||
speaker: 'colleague',
|
||
name: '同事',
|
||
text: 'Could you help me with this project?',
|
||
translation: '你能幫我處理這個項目嗎？',
|
||
vocabulary: ['project', 'help']
|
||
}
|
||
],
|
||
vocabulary: [
|
||
{
|
||
word: 'project',
|
||
phonetic: '/ˈprɒdʒekt/',
|
||
meaning: '項目；計劃',
|
||
example: 'We need to finish this project by Friday.',
|
||
translation: '我們需要在週五前完成這個項目。'
|
||
}
|
||
]
|
||
},
|
||
airport: {
|
||
name: '機場',
|
||
icon: '✈️',
|
||
description: '在繁忙的機場環境中，練習旅行相關的英文對話',
|
||
illustration: '✈️🧳🎫',
|
||
dialogue: [
|
||
{
|
||
speaker: 'staff',
|
||
name: '機場人員',
|
||
text: 'Please show me your passport and ticket.',
|
||
translation: '請出示您的護照和機票。',
|
||
vocabulary: ['passport', 'ticket']
|
||
}
|
||
],
|
||
vocabulary: [
|
||
{
|
||
word: 'passport',
|
||
phonetic: '/ˈpæspɔːrt/',
|
||
meaning: '護照',
|
||
example: 'Don\'t forget to bring your passport.',
|
||
translation: '別忘了帶護照。'
|
||
}
|
||
]
|
||
},
|
||
restaurant: {
|
||
name: '餐廳',
|
||
icon: '🍽️',
|
||
description: '在優雅的餐廳中，學習用餐禮儀和點菜英文',
|
||
illustration: '🍽️🍷👨🍳',
|
||
dialogue: [
|
||
{
|
||
speaker: 'waiter',
|
||
name: '服務員',
|
||
text: 'Are you ready to order?',
|
||
translation: '您準備好點餐了嗎？',
|
||
vocabulary: ['ready', 'order']
|
||
}
|
||
],
|
||
vocabulary: [
|
||
{
|
||
word: 'order',
|
||
phonetic: '/ˈɔːrdər/',
|
||
meaning: '點餐；訂購；命令',
|
||
example: 'I\'d like to order the fish.',
|
||
translation: '我想點魚。'
|
||
}
|
||
]
|
||
}
|
||
};
|
||
|
||
// 情境學習初始化函數
|
||
function initializeContextLearning() {
|
||
// 場景切換功能
|
||
document.querySelectorAll('.scene-card').forEach(card => {
|
||
card.addEventListener('click', function() {
|
||
document.querySelectorAll('.scene-card').forEach(c => c.classList.remove('active'));
|
||
this.classList.add('active');
|
||
|
||
const sceneName = this.dataset.scene;
|
||
loadScene(sceneName);
|
||
});
|
||
});
|
||
|
||
// 詞彙點擊功能
|
||
document.addEventListener('click', function(e) {
|
||
if (e.target.classList.contains('vocab-highlight')) {
|
||
const word = e.target.textContent;
|
||
showVocabularyDetail(word);
|
||
}
|
||
});
|
||
|
||
// 練習選項點擊
|
||
document.querySelectorAll('.exercise-option').forEach(option => {
|
||
option.addEventListener('click', function() {
|
||
const isCorrect = this.dataset.correct === 'true';
|
||
this.classList.add(isCorrect ? 'correct' : 'incorrect');
|
||
|
||
setTimeout(() => {
|
||
if (isCorrect) {
|
||
alert('✅ 答對了！繼續下一題。');
|
||
} else {
|
||
alert('❌ 答錯了，再試試看！');
|
||
}
|
||
this.classList.remove('correct', 'incorrect');
|
||
}, 1500);
|
||
});
|
||
});
|
||
|
||
// 載入預設場景
|
||
loadScene('coffee');
|
||
}
|
||
|
||
// 載入特定場景
|
||
function loadScene(sceneName) {
|
||
const scene = sceneData[sceneName];
|
||
if (!scene) return;
|
||
|
||
// 更新場景描述
|
||
const descriptionElement = document.querySelector('.scene-description p');
|
||
const titleElement = document.querySelector('.scene-description h4');
|
||
const illustrationElement = document.querySelector('.scene-illustration');
|
||
|
||
if (titleElement) titleElement.textContent = scene.name;
|
||
if (descriptionElement) descriptionElement.textContent = scene.description;
|
||
if (illustrationElement) illustrationElement.textContent = scene.illustration;
|
||
|
||
// 更新對話內容
|
||
const dialogueContainer = document.querySelector('.story-dialogue');
|
||
if (dialogueContainer) {
|
||
dialogueContainer.innerHTML = '';
|
||
scene.dialogue.forEach(dialogue => {
|
||
const bubbleDiv = document.createElement('div');
|
||
bubbleDiv.className = `dialogue-bubble ${dialogue.speaker}`;
|
||
|
||
let highlightedText = dialogue.text;
|
||
dialogue.vocabulary.forEach(word => {
|
||
const regex = new RegExp(`\\b${word}\\b`, 'gi');
|
||
highlightedText = highlightedText.replace(regex, `<span class="vocab-highlight">${word}</span>`);
|
||
});
|
||
|
||
bubbleDiv.innerHTML = `
|
||
<div class="speaker-name">${dialogue.name}</div>
|
||
<div class="dialogue-text">${highlightedText}</div>
|
||
<div class="dialogue-translation">${dialogue.translation}</div>
|
||
`;
|
||
|
||
dialogueContainer.appendChild(bubbleDiv);
|
||
});
|
||
}
|
||
|
||
// 更新詞彙聚光燈
|
||
updateVocabularySpotlight(scene.vocabulary);
|
||
}
|
||
|
||
// 更新詞彙聚光燈
|
||
function updateVocabularySpotlight(vocabulary) {
|
||
const spotlightContainer = document.querySelector('.vocabulary-spotlight');
|
||
if (!spotlightContainer) return;
|
||
|
||
const firstVocab = vocabulary[0];
|
||
if (firstVocab) {
|
||
spotlightContainer.querySelector('.spotlight-word').textContent = firstVocab.word;
|
||
spotlightContainer.querySelector('.spotlight-phonetic').textContent = firstVocab.phonetic;
|
||
spotlightContainer.querySelector('.spotlight-meaning').textContent = firstVocab.meaning;
|
||
spotlightContainer.querySelector('.spotlight-example').textContent = firstVocab.example;
|
||
spotlightContainer.querySelector('.spotlight-translation').textContent = firstVocab.translation;
|
||
}
|
||
}
|
||
|
||
// 顯示詞彙詳情
|
||
function showVocabularyDetail(word) {
|
||
// 在所有場景中搜尋該詞彙
|
||
let foundVocab = null;
|
||
for (const sceneName in sceneData) {
|
||
const vocab = sceneData[sceneName].vocabulary.find(v => v.word.toLowerCase() === word.toLowerCase());
|
||
if (vocab) {
|
||
foundVocab = vocab;
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (foundVocab) {
|
||
alert(`📚 詞彙詳情：\n\n${foundVocab.word} ${foundVocab.phonetic}\n\n意思：${foundVocab.meaning}\n\n例句：${foundVocab.example}\n翻譯：${foundVocab.translation}`);
|
||
}
|
||
}
|
||
|
||
// 響應式處理
|
||
window.addEventListener('resize', function() {
|
||
const sidebar = document.getElementById('sidebar');
|
||
if (window.innerWidth > 1024) {
|
||
sidebar.classList.remove('open');
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |