196 lines
7.7 KiB
HTML
196 lines
7.7 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>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
margin: 40px;
|
|
line-height: 1.6;
|
|
}
|
|
.test-section {
|
|
margin-bottom: 30px;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
margin: 5px;
|
|
background: #00e5cc;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
button:hover {
|
|
background: #00b8a0;
|
|
}
|
|
.status {
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-radius: 5px;
|
|
font-weight: 600;
|
|
}
|
|
.success { background: #d4edda; color: #155724; }
|
|
.error { background: #f8d7da; color: #721c24; }
|
|
.info { background: #cce7ff; color: #004085; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🧪 Drama Ling 功能測試頁面</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>📚 基礎模組測試</h2>
|
|
<button onclick="testModuleImports()">測試模組導入</button>
|
|
<button onclick="testStateManagement()">測試狀態管理</button>
|
|
<div id="moduleTest"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔊 語音播放測試</h2>
|
|
<button onclick="testAudioSupport()">檢查語音支援</button>
|
|
<button onclick="testWordPronunciation()">測試單字發音</button>
|
|
<div id="audioTest"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>💾 資料持久化測試</h2>
|
|
<button onclick="testLocalStorage()">測試本地儲存</button>
|
|
<button onclick="clearStorageData()">清空儲存資料</button>
|
|
<div id="storageTest"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🎯 應用程式載入</h2>
|
|
<button onclick="loadMainApp()">載入主應用</button>
|
|
<div id="appTest"></div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
// Import modules for testing
|
|
import { VocabularyState } from './src/modules/VocabularyState.js';
|
|
import { VocabularyApp } from './src/modules/VocabularyApp.js';
|
|
import { AudioManager } from './src/utils/AudioManager.js';
|
|
|
|
// Make available globally for button clicks
|
|
window.testModules = { VocabularyState, VocabularyApp, AudioManager };
|
|
|
|
// Test functions
|
|
window.testModuleImports = () => {
|
|
const result = document.getElementById('moduleTest');
|
|
try {
|
|
const state = new window.testModules.VocabularyState();
|
|
const app = new window.testModules.VocabularyApp(state);
|
|
const audio = new window.testModules.AudioManager();
|
|
|
|
result.innerHTML = '<div class="status success">✅ 所有模組成功導入</div>';
|
|
console.log('Modules loaded:', { state, app, audio });
|
|
} catch (error) {
|
|
result.innerHTML = `<div class="status error">❌ 模組導入失敗: ${error.message}</div>`;
|
|
console.error('Module import error:', error);
|
|
}
|
|
};
|
|
|
|
window.testStateManagement = () => {
|
|
const result = document.getElementById('moduleTest');
|
|
try {
|
|
const state = new window.testModules.VocabularyState();
|
|
const words = state.getAllWords();
|
|
const progress = state.getProgress();
|
|
|
|
result.innerHTML += `
|
|
<div class="status success">
|
|
✅ 狀態管理正常<br>
|
|
📊 詞彙數量: ${words.length}<br>
|
|
🎯 學習進度: 已學習 ${progress.learned}, 今日新增 ${progress.todayNew}, 掌握率 ${progress.masteryRate}%
|
|
</div>
|
|
`;
|
|
} catch (error) {
|
|
result.innerHTML += `<div class="status error">❌ 狀態管理測試失敗: ${error.message}</div>`;
|
|
}
|
|
};
|
|
|
|
window.testAudioSupport = async () => {
|
|
const result = document.getElementById('audioTest');
|
|
try {
|
|
const audio = new window.testModules.AudioManager();
|
|
const isSupported = audio.isSupported();
|
|
|
|
if (isSupported) {
|
|
await audio.init();
|
|
const voice = audio.getCurrentVoice();
|
|
result.innerHTML = `
|
|
<div class="status success">
|
|
✅ 語音合成支援正常<br>
|
|
🎤 當前語音: ${voice ? voice.name : '預設語音'}<br>
|
|
🌍 語言: ${voice ? voice.lang : '未知'}
|
|
</div>
|
|
`;
|
|
} else {
|
|
result.innerHTML = '<div class="status error">❌ 此瀏覽器不支援語音合成</div>';
|
|
}
|
|
} catch (error) {
|
|
result.innerHTML = `<div class="status error">❌ 語音測試失敗: ${error.message}</div>`;
|
|
}
|
|
};
|
|
|
|
window.testWordPronunciation = async () => {
|
|
const result = document.getElementById('audioTest');
|
|
try {
|
|
const audio = new window.testModules.AudioManager();
|
|
result.innerHTML += '<div class="status info">🔊 播放測試詞彙 "confidence"...</div>';
|
|
|
|
await audio.speakWord('confidence');
|
|
result.innerHTML += '<div class="status success">✅ 語音播放完成</div>';
|
|
} catch (error) {
|
|
result.innerHTML += `<div class="status error">❌ 語音播放失敗: ${error.message}</div>`;
|
|
}
|
|
};
|
|
|
|
window.testLocalStorage = () => {
|
|
const result = document.getElementById('storageTest');
|
|
try {
|
|
const testData = { test: 'drama-ling-test', timestamp: Date.now() };
|
|
localStorage.setItem('test-data', JSON.stringify(testData));
|
|
|
|
const retrieved = JSON.parse(localStorage.getItem('test-data'));
|
|
if (retrieved.test === testData.test) {
|
|
result.innerHTML = '<div class="status success">✅ 本地儲存功能正常</div>';
|
|
localStorage.removeItem('test-data');
|
|
} else {
|
|
throw new Error('資料不匹配');
|
|
}
|
|
} catch (error) {
|
|
result.innerHTML = `<div class="status error">❌ 本地儲存測試失敗: ${error.message}</div>`;
|
|
}
|
|
};
|
|
|
|
window.clearStorageData = () => {
|
|
const result = document.getElementById('storageTest');
|
|
localStorage.removeItem('dramaling-vocabulary');
|
|
result.innerHTML += '<div class="status info">🗑️ 詞彙學習資料已清除</div>';
|
|
};
|
|
|
|
window.loadMainApp = () => {
|
|
const result = document.getElementById('appTest');
|
|
result.innerHTML = '<div class="status info">🚀 正在載入主應用...</div>';
|
|
|
|
// Redirect to main app
|
|
setTimeout(() => {
|
|
window.location.href = '/';
|
|
}, 1000);
|
|
};
|
|
|
|
// Auto-run basic tests on load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
console.log('🧪 Test page loaded, running basic module test...');
|
|
setTimeout(() => {
|
|
window.testModuleImports();
|
|
}, 500);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |