<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单词连线练习</title>
<style>
/* 移动端适配的基础样式 */
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
.container {
display: flex;
justify-content: space-around;
margin: 20px;
flex-direction: row;
gap: 10px;
padding: 0 10px;
}
/* 移动端适配 */
@media screen and (max-width: 768px) {
.container {
flex-direction: row;
margin: 10px;
padding: 0 5px;
}
.column {
width: 33% !important;
}
.word-item {
padding: 8px 5px;
margin: 5px 2px;
font-size: 12px;
min-height: 36px;
}
.speaker-icon {
padding: 8px;
margin-left: 4px;
font-size: 14px;
min-width: 30px;
min-height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
}
.column {
width: 30%;
}
.word-item {
margin: 10px 0;
padding: 10px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
text-align: center;
position: relative;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
min-height: 44px;
}
.word-item:hover {
background-color: #f0f0f0;
}
.word-item.selected {
background-color: #e3f2fd;
border-color: #2196F3;
}
.word-item.matched {
background-color: #e8f5e9 !important;
border-color: #81c784 !important;
cursor: not-allowed !important;
opacity: 1 !important;
color: #2e7d32 !important;
pointer-events: none !important;
box-shadow: none !important;
}
#resetBtn {
display: block;
margin: 10px auto;
padding: 10px 20px;
background-color: #f44336;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#resetBtn:hover {
background-color: #d32f2f;
}
.speaker-icon {
display: inline-block;
margin-left: 8px;
cursor: pointer;
color: #2196F3;
font-size: 16px;
padding: 8px;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
}
.speaker-icon:hover {
color: #1976D2;
}
</style>
</head>
<body>
<audio id="tts-audio"></audio>
<div class="container">
<div class="column" id="englishColumn">
<div class="word-item" data-word="divine">divine</div>
<div class="word-item" data-word="the god of the Divine Farmer">the god of the "Divine Farmer"</div>
<div class="word-item" data-word="farm">farm (v.)</div>
<div class="word-item" data-word="because of">because of</div>
<div class="word-item" data-word="survive">survive</div>
<div class="word-item" data-word="starvation">starvation</div>
<div class="word-item" data-word="gradually">gradually</div>
<div class="word-item" data-word="develop">develop</div>
<div class="word-item" data-word="agriculture">agriculture</div>
<div class="word-item" data-word="even though">even though</div>
<div class="word-item" data-word="no longer">no longer</div>
<div class="word-item" data-word="in short supply">in short supply</div>
<div class="word-item" data-word="receive">receive</div>
<div class="word-item" data-word="medical">medical</div>
<div class="word-item" data-word="treatment">treatment</div>
<div class="word-item" data-word="medication">medication</div>
<div class="word-item" data-word="scarce">scarce</div>
<div class="word-item" data-word="Be worried about">Be worried about</div>
<div class="word-item" data-word="believe">believe</div>
<div class="word-item" data-word="He didn't believe in">He didn't believe in</div>
</div>
<div class="column" id="phoneticColumn">
<div class="word-item" data-word="[dɪˈvaɪn]">/dɪˈvaɪn/</div>
<div class="word-item" data-word="[ðə ɡɒd ɒv ðə dɪˈvaɪn ˈfɑːmə]">/ðə ɡɒd ɒv ðə dɪˈvaɪn ˈfɑːmə/</div>
<div class="word-item" data-word="[fɑːm]">/fɑːm/</div>
<div class="word-item" data-word="[bɪˈkɒz ɒv]">/bɪˈkɒz ɒv/</div>
<div class="word-item" data-word="[səˈvaɪv]">/səˈvaɪv/</div>
<div class="word-item" data-word="[stɑːˈveɪʃn]">/stɑːˈveɪʃn/</div>
<div class="word-item" data-word="[ˈɡrædʒuəli]">/ˈɡrædʒuəli/</div>
<div class="word-item" data-word="[dɪˈveləp]">/dɪˈveləp/</div>
<div class="word-item" data-word="[ˈæɡrɪkʌltʃə]">/ˈæɡrɪkʌltʃə/</div>
<div class="word-item" data-word="[ˈiːvn ðəʊ]">/ˈiːvn ðəʊ/</div>
<div class="word-item" data-word="[nəʊ ˈlɒŋɡə]">/nəʊ ˈlɒŋɡə/</div>
<div class="word-item" data-word="[ɪn ʃɔːt səˈplaɪ]">/ɪn ʃɔːt səˈplaɪ/</div>
<div class="word-item" data-word="[rɪˈsiːv]">/rɪˈsiːv/</div>
<div class="word-item" data-word="[ˈmedɪkl]">/ˈmedɪkl/</div>
<div class="word-item" data-word="[ˈtriːtmənt]">/ˈtriːtmənt/</div>
<div class="word-item" data-word="[ˌmedɪˈkeɪʃn]">/ˌmedɪˈkeɪʃn/</div>
<div class="word-item" data-word="[skeə]">/skeə/</div>
<div class="word-item" data-word="[bi ˈwʌrid əˈbaʊt]">/bi ˈwʌrid əˈbaʊt/</div>
<div class="word-item" data-word="[bɪˈliːv]">/bɪˈliːv/</div>
<div class="word-item" data-word="[hi dɪdnt bɪˈliːv ɪn]">/hi dɪdnt bɪˈliːv ɪn/</div>
</div>
<div class="column" id="chineseColumn">
<div class="word-item" data-word="神的">神的</div>
<div class="word-item" data-word="神农帝">神农帝</div>
<div class="word-item" data-word="种田">种田</div>
<div class="word-item" data-word="由于">由于</div>
<div class="word-item" data-word="生存">生存</div>
<div class="word-item" data-word="饥饿">饥饿</div>
<div class="word-item" data-word="逐渐地">逐渐地</div>
<div class="word-item" data-word="发展">发展</div>
<div class="word-item" data-word="农业">农业</div>
<div class="word-item" data-word="即使">即使</div>
<div class="word-item" data-word="不再">不再</div>
<div class="word-item" data-word="供应不足">供应不足</div>
<div class="word-item" data-word="收到">收到</div>
<div class="word-item" data-word="医学的">医学的</div>
<div class="word-item" data-word="治疗">治疗</div>
<div class="word-item" data-word="药物">药</div>
<div class="word-item" data-word="缺乏的">缺乏的</div>
<div class="word-item" data-word="担心">担心</div>
<div class="word-item" data-word="相信">相信</div>
<div class="word-item" data-word="他不相信">他不相信</div>
</div>
</div>
<button id="resetBtn">重置</button>
<script>
const answers = {
'divine': ['/dɪˈvaɪn/', '神的'],
'the god of the Divine Farmer': ['/ðə ɡɒd ɒv ðə dɪˈvaɪn ˈfɑːmə/', '神农帝'],
'farm': ['/fɑːm/', '种田'],
'because of': ['/bɪˈkɒz ɒv/', '由于'],
'survive': ['/səˈvaɪv/', '生存'],
'starvation': ['/stɑːˈveɪʃn/', '饥饿'],
'gradually': ['/ˈɡrædʒuəli/', '逐渐地'],
'develop': ['/dɪˈveləp/', '发展'],
'agriculture': ['/ˈæɡrɪkʌltʃə/', '农业'],
'even though': ['/ˈiːvn ðəʊ/', '即使'],
'no longer': ['/nəʊ ˈlɒŋɡə/', '不再'],
'in short supply': ['/ɪn ʃɔːt səˈplaɪ/', '供应不足'],
'receive': ['/rɪˈsiːv/', '收到'],
'medical': ['/ˈmedɪkl/', '医学的'],
'treatment': ['/ˈtriːtmənt/', '治疗'],
'medication': ['/ˌmedɪˈkeɪʃn/', '药物'],
'scarce': ['/skeə/', '缺乏的'],
'Be worried about': ['/bi ˈwʌrid əˈbaʊt/', '担心'],
'believe': ['/bɪˈliːv/', '相信'],
'He didn\'t believe in': ['/hi dɪdnt bɪˈliːv ɪn/', '他不相信']
};
let selectedItems = {
english: null,
phonetic: null,
chinese: null
};
document.querySelectorAll('.word-item').forEach(item => {
if (!item.classList.contains('matched')) {
item.addEventListener('click', handleItemClick);
}
});
function handleItemClick(e) {
const item = e.target;
if (item.classList.contains('matched')) {
return;
}
const column = item.parentElement.id;
const columnType = column.replace('Column', '');
// 如果是音标列，自动发音
if (columnType === 'phonetic') {
const phoneticWord = item.dataset.word.replace('[', '/').replace(']', '/');
for (const [key, value] of Object.entries(answers)) {
if (value[0] === phoneticWord) {
speak(key.replace(/["']/g, ''));
break;
}
}
}
// 取消同列其他选中项
document.querySelectorAll(`#${column} .word-item`).forEach(el => {
if (el !== item) {
el.classList.remove('selected');
}
});
// 切换项的选中状态
item.classList.toggle('selected');
selectedItems[columnType] = item.classList.contains('selected') ? item : null;
// 检查是否匹配
checkMatch();
}
function checkMatch() {
if (selectedItems.english && selectedItems.phonetic && selectedItems.chinese) {
const englishWord = selectedItems.english.dataset.word;
const phoneticWord = selectedItems.phonetic.dataset.word.replace('[', '/').replace(']', '/');
const chineseWord = selectedItems.chinese.dataset.word;
// 检查是否为正确的匹配组合
if (answers[englishWord] &&
answers[englishWord][0] === phoneticWord &&
answers[englishWord][1] === chineseWord) {
// ���配成功，先移除选中状态
[selectedItems.english, selectedItems.phonetic, selectedItems.chinese].forEach(item => {
item.classList.remove('selected');
item.classList.add('matched');
});
// 移除事件监听器
selectedItems.english.removeEventListener('click', handleItemClick);
selectedItems.phonetic.removeEventListener('click', handleItemClick);
selectedItems.chinese.removeEventListener('click', handleItemClick);
// 检查是否所有单词都匹配成功
const unmatchedItems = document.querySelectorAll('.word-item:not(.matched)');
if (unmatchedItems.length === 0) {
// 创建庆祝提示
const celebration = document.createElement('div');
celebration.textContent = '🎉 恭喜！你已完所有单词的匹配！';
celebration.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(76, 175, 80, 0.9);
color: white;
padding: 20px 40px;
border-radius: 8px;
font-size: 18px;
z-index: 1000;
text-align: center;
`;
document.body.appendChild(celebration);
setTimeout(() => celebration.remove(), 3000);
}
} else {
// ��示匹配失败提示
const tip = document.createElement('div');
tip.textContent = '匹配不正确，请重试';
tip.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(244, 67, 54, 0.9);
color: white;
padding: 10px 20px;
border-radius: 4px;
z-index: 1000;
`;
document.body.appendChild(tip);
setTimeout(() => tip.remove(), 1500);
// 只需要移除选中状态，不添加错误样式
selectedItems.english.classList.remove('selected');
selectedItems.phonetic.classList.remove('selected');
selectedItems.chinese.classList.remove('selected');
}
// 重置选中状态
selectedItems = {
english: null,
phonetic: null,
chinese: null
};
}
}
// 添加随机排序函数
function shuffleChildren(parent) {
const children = Array.from(parent.children);
for (let i = children.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
parent.appendChild(children[j]);
}
}
// 页面加载时随机排序
window.addEventListener('load', () => {
const columns = document.querySelectorAll('.column');
columns.forEach(column => shuffleChildren(column));
});
// 重置按钮也要随机排序
document.getElementById('resetBtn').addEventListener('click', () => {
document.querySelectorAll('.word-item').forEach(item => {
item.classList.remove('matched', 'selected');
item.addEventListener('click', handleItemClick);
});
selectedItems = {
english: null,
phonetic: null,
chinese: null
};
// 重新随机排序
const columns = document.querySelectorAll('.column');
columns.forEach(column => shuffleChildren(column));
});
// 创建发音函数
function speak(text) {
try {
// 确保语音合成已初始化
if (!window.speechSynthesis) {
console.error('Speech synthesis not supported');
return;
}
// 移除音标中的方括号和其他特殊字符
const cleanText = text.replace(/[\[\]]/g, '').replace(/ˈ|ˌ/g, '');
// 取消所有正在进行的发音
window.speechSynthesis.cancel();
// 创建新的发音请求
const utterance = new SpeechSynthesisUtterance(cleanText);
utterance.lang = 'en-US';
utterance.rate = 0.8;
utterance.volume = 1;
// 添加错误处理
utterance.onerror = (event) => {
console.error('Speech synthesis error:', event);
};
// 尝试播放
window.speechSynthesis.speak(utterance);
} catch (error) {
console.error('Speech synthesis error:', error);
}
}
// 在页面加载时初始化语音合成
window.addEventListener('load', () => {
// 触发一个静音的语音合成来初始化系统
const silence = new SpeechSynthesisUtterance('');
silence.volume = 0;
window.speechSynthesis.speak(silence);
});
// 为所有音标添加喇叭图标和发音功能
document.querySelectorAll('#phoneticColumn .word-item').forEach(item => {
// 根据音标找到对应英语单词
const phoneticWord = item.dataset.word.replace('[', '/').replace(']', '/');
let englishWord = '';
for (const [key, value] of Object.entries(answers)) {
if (value[0] === phoneticWord) {
englishWord = key.replace(/["']/g, '');
break;
}
}
const phoneticText = item.textContent;
item.innerHTML = `
${phoneticText}
<span class="speaker-icon" data-speak="${englishWord}">
🔊
</span>
`;
});
// 为喇叭图标添加点击事件监听器
document.addEventListener('click', function(e) {
if (e.target.closest('.speaker-icon')) {
e.stopPropagation();
const speakText = e.target.closest('.speaker-icon').dataset.speak;
speak(speakText);
}
});
</script>
</body>
</html>
翻译-对对碰
最新推荐文章于 2025-08-24 17:40:52 发布
扫一扫
194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
