各国英语口音知识测验 | 无需听力
by RocketGecko40418 lines17.2 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>各国英语口音知识测验 | 无需听力</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(135deg, #f0f4fa 0%, #d9e2ef 100%);
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
padding: 2rem 1rem;
min-height: 100vh;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: white;
border-radius: 2rem;
box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.25);
overflow: hidden;
padding: 1.8rem 2rem 2.5rem;
}
h1 {
font-size: 1.8rem;
background: linear-gradient(120deg, #1e3c72, #2a5298);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
margin-bottom: 0.3rem;
}
.badge {
display: inline-block;
background: #eef2ff;
padding: 0.2rem 0.9rem;
border-radius: 30px;
font-size: 0.8rem;
font-weight: 500;
color: #1e4a76;
margin: 0.5rem 0 1.2rem 0;
}
.intro {
background: #f8fafc;
padding: 1rem 1.4rem;
border-radius: 1.2rem;
margin-bottom: 2rem;
border-left: 6px solid #3b82f6;
color: #2c3e66;
line-height: 1.4;
}
.question {
background: #ffffff;
border-radius: 1.5rem;
margin-bottom: 1.8rem;
padding: 1.3rem 1.5rem 1.6rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 1px solid #e4e9f2;
transition: all 0.2s;
}
.q-header {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.q-num {
background: #1e3a8a;
color: white;
width: 32px;
height: 32px;
border-radius: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1rem;
}
.q-text {
font-size: 1.1rem;
font-weight: 600;
color: #0f2b3d;
line-height: 1.4;
flex: 1;
}
.feature-tag {
background: #f1f5f9;
border-radius: 40px;
padding: 0.2rem 0.8rem;
font-size: 0.7rem;
font-weight: 500;
color: #2563eb;
letter-spacing: 0.3px;
}
.options {
display: flex;
flex-direction: column;
gap: 12px;
margin: 1.2rem 0 1rem 0;
}
.option {
display: flex;
align-items: center;
gap: 14px;
padding: 8px 16px;
background: #fafcff;
border-radius: 60px;
border: 1px solid #e0e7f0;
cursor: pointer;
transition: 0.1s;
}
.option:hover {
background: #eef3ff;
border-color: #bdd3ff;
}
input[type="radio"] {
width: 1.2rem;
height: 1.2rem;
accent-color: #3b82f6;
flex-shrink: 0;
}
label {
font-size: 0.95rem;
font-weight: 500;
color: #1f2e45;
cursor: pointer;
flex: 1;
}
.feedback {
margin-top: 14px;
padding: 10px 16px;
border-radius: 20px;
font-size: 0.85rem;
display: none;
line-height: 1.4;
}
.feedback.correct {
background: #e1f7ed;
color: #0a5b2e;
border-left: 4px solid #2ecc71;
display: block;
}
.feedback.wrong {
background: #ffe9e7;
color: #b91c1c;
border-left: 4px solid #ef4444;
display: block;
}
.btn-submit {
background: #1e3a8a;
color: white;
border: none;
padding: 12px 28px;
font-size: 1rem;
font-weight: 600;
border-radius: 60px;
width: 100%;
cursor: pointer;
transition: 0.2s;
margin: 16px 0 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.btn-submit:hover {
background: #2563eb;
transform: translateY(-2px);
}
.scorecard {
background: #0f172a;
color: white;
text-align: center;
padding: 1rem;
border-radius: 2rem;
margin-top: 1.5rem;
font-weight: bold;
font-size: 1.2rem;
}
hr {
margin: 1.8rem 0 1rem;
border: none;
height: 1px;
background: #e2e8f0;
}
.legend {
font-size: 0.75rem;
color: #4b556b;
text-align: center;
margin-top: 1.2rem;
}
@media (max-width: 700px) {
.container {
padding: 1.2rem;
}
.q-text {
font-size: 1rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1>🗣️ 世界英语口音 · 特征推理测验</h1>
<div class="badge">📖 基于发音规律 · 语法结构 · 地道用语</div>
<div class="intro">
🌟 下方每道题描述一种英语口音的典型特征（语音、语法或词汇），请根据你从视频/学习中掌握的知识，选出最符合的口音国家或地区。<br>
💡 即使没有音频，你也能通过关键线索成为“口音侦探”。
</div>
<form id="quizForm">
<!-- 题1: 印度英语 → 典型词汇 do the needful & 现在进行时表将来 -->
<div class="question" data-qid="1">
<div class="q-header">
<span class="q-num">1</span>
<span class="q-text">说话人常说 “Please do the needful.”，“I am having a car.”，并且习惯把 yes 念成 “yace”，节奏感很强，每个音节时长均匀。这是哪种英语口音？</span>
<span class="feature-tag">词汇 + 节奏</span>
</div>
<div class="options" data-correct="indian">
<div class="option"><input type="radio" name="q1" value="indian"> <label>🇮🇳 印度英语</label></div>
<div class="option"><input type="radio" name="q1" value="singapore"> <label>🇸🇬 新加坡英语</label></div>
<div class="option"><input type="radio" name="q1" value="nigerian"> <label>🇳🇬 尼日利亚英语</label></div>
<div class="option"><input type="radio" name="q1" value="british"> <label>🇬🇧 英国英语</label></div>
</div>
<div class="feedback" id="fb1"></div>
</div>
<!-- 题2: 日本英语 → /l/ & /r/ 混淆，辅音后加元音 -->
<div class="question" data-qid="2">
<div class="q-header">
<span class="q-num">2</span>
<span class="q-text">该口音下，英语单词 “light” 听起来像 “right”，“very” 有时接近 “bery”，并且常会在辅音结尾后添加轻微元音（如 “good” 说成 “goodo”）。这是典型哪个国家的英语发音？</span>
<span class="feature-tag">音系干扰</span>
</div>
<div class="options" data-correct="japan">
<div class="option"><input type="radio" name="q2" value="china"> <label>🇨🇳 中国英语</label></div>
<div class="option"><input type="radio" name="q2" value="korea"> <label>🇰🇷 韩国英语</label></div>
<div class="option"><input type="radio" name="q2" value="japan"> <label>🇯🇵 日本英语</label></div>
<div class="option"><input type="radio" name="q2" value="thai"> <label>🇹🇭 泰国英语</label></div>
</div>
<div class="feedback" id="fb2"></div>
</div>
<!-- 题3: 法国英语 → /θ/→/z/, /ð/→/z/，重音后移 -->
<div class="question" data-qid="3">
<div class="q-header">
<span class="q-num">3</span>
<span class="q-text">“I think this is very interesting” 会被读成 “I zink zis is wery interesting”，并且单词重音常常落在最后一个音节上（如 “teleVIsion”）。这是哪里的英语口音特征？</span>
<span class="feature-tag">辅音替换 + 韵律</span>
</div>
<div class="options" data-correct="french">
<div class="option"><input type="radio" name="q3" value="german"> <label>🇩🇪 德国英语</label></div>
<div class="option"><input type="radio" name="q3" value="spanish"> <label>🇪🇸 西班牙英语</label></div>
<div class="option"><input type="radio" name="q3" value="french"> <label>🇫🇷 法国英语</label></div>
<div class="option"><input type="radio" name="q3" value="italian"> <label>🇮🇹 意大利英语</label></div>
</div>
<div class="feedback" id="fb3"></div>
</div>
<!-- 题4: 澳大利亚英语 → 升调 (uptalk)，元音 shift “day”说“die”，俚语 mate -->
<div class="question" data-qid="4">
<div class="q-header">
<span class="q-num">4</span>
<span class="q-text">句子结尾常用升调（听起来像在提问），把 “today” 发成 “to die”，经常使用 “G’day mate”，并且 “night” 听起来像 “noight”。这是哪个国家的英语？</span>
<span class="feature-tag">语调 + 元音漂移</span>
</div>
<div class="options" data-correct="australian">
<div class="option"><input type="radio" name="q4" value="nz"> <label>🇳🇿 新西兰英语</label></div>
<div class="option"><input type="radio" name="q4" value="australian"> <label>🇦🇺 澳大利亚英语</label></div>
<div class="option"><input type="radio" name="q4" value="southafrican"> <label>🇿🇦 南非英语</label></div>
<div class="option"><input type="radio" name="q4" value="canadian"> <label>🇨🇦 加拿大英语</label></div>
</div>
<div class="feedback" id="fb4"></div>
</div>
<!-- 题5: 德国英语 → /w/ & /v/ 混淆，缺少进行时态，词尾清辅音强化 -->
<div class="question" data-qid="5">
<div class="q-header">
<span class="q-num">5</span>
<span class="q-text">说话人将 “We will visit Vienna” 说成 “Ve vill visit Vienna”，而且很少使用进行时（常说 “I live in Berlin since 2022” 而非 have been living）。这更可能来自哪个国家？</span>
<span class="feature-tag">辅音混淆 + 语法迁移</span>
</div>
<div class="options" data-correct="german">
<div class="option"><input type="radio" name="q5" value="dutch"> <label>🇳🇱 荷兰英语</label></div>
<div class="option"><input type="radio" name="q5" value="german"> <label>🇩🇪 德国英语</label></div>
<div class="option"><input type="radio" name="q5" value="russian"> <label>🇷🇺 俄罗斯英语</label></div>
<div class="option"><input type="radio" name="q5" value="polish"> <label>🇵🇱 波兰英语</label></div>
</div>
<div class="feedback" id="fb5"></div>
</div>
</form>
<button class="btn-submit" id="submitQuiz">✍️ 提交测试 & 查看知识掌握度</button>
<div id="scorePanel" class="scorecard" style="display: none;"></div>
<hr />
<div class="legend">
🧠 教师提示：每道题的解析中都包含了对应的核心特征，建议结合视频内容复习口音辨别要点。
</div>
</div>
<script>
// 获取正确值（从每个question中的.options里获取data-correct）
function getCorrectValue(questionDiv) {
const optionsDiv = questionDiv.querySelector('.options');
return optionsDiv ? optionsDiv.getAttribute('data-correct') : null;
}
// 获取选项显示文本 (用于反馈展示)
function getCountryFromValue(value) {
const map = {
indian: '印度英语', singapore: '新加坡英语', nigerian: '尼日利亚英语', british: '英国英语',
japan: '日本英语', china: '中国英语', korea: '韩国英语', thai: '泰国英语',
french: '法国英语', german: '德国英语', spanish: '西班牙英语', italian: '意大利英语',
australian: '澳大利亚英语', nz: '新西兰英语', southafrican: '南非英语', canadian: '加拿大英语',
dutch: '荷兰英语', russian: '俄罗斯英语', polish: '波兰英语'
};
return map[value] || value;
}
const submitBtn = document.getElementById('submitQuiz');
const scorePanel = document.getElementById('scorePanel');
function evaluateQuiz() {
const questions = document.querySelectorAll('.question');
let totalScore = 0;
const total = questions.length;
questions.forEach((q, idx) => {
const qid = idx + 1;
const correctKey = getCorrectValue(q);
const selectedRadio = q.querySelector('input[type="radio"]:checked');
const feedbackDiv = document.getElementById(`fb${qid}`);
if (!feedbackDiv) return;
// 重置样式
feedbackDiv.classList.remove('correct', 'wrong');
feedbackDiv.style.display = 'none';
if (!selectedRadio) {
feedbackDiv.innerHTML = '⚠️ 未作答，请结合口音特征再选一次。';
feedbackDiv.classList.add('wrong');
feedbackDiv.style.display = 'block';
return;
}
const userValue = selectedRadio.value;
if (userValue === correctKey) {
totalScore++;
// 给正确反馈并附加简短解释
feedbackDiv.innerHTML = `✅ 正确！${getCountryFromValue(correctKey)} 的确具备所述特征。`;
feedbackDiv.classList.add('correct');
feedbackDiv.style.display = 'block';
} else {
let correctCountry = getCountryFromValue(correctKey);
let extraHint = '';
if (correctKey === 'indian') extraHint = '（“do the needful”是印度英语特有，“I am having”动词的进行时用法）';
else if (correctKey === 'japan') extraHint = '（/l/和/r/不分、添加元音是日语母语者的典型迁移）';
else if (correctKey === 'french') extraHint = '（法语没有/θ/音，重音模式也不同）';
else if (correctKey === 'australian') extraHint = '（澳大利亚英语高升调和元音变化最具辨识度）';
else if (correctKey === 'german') extraHint = '（/w/和/v/混淆、缺少进行时是德语影响）';
feedbackDiv.innerHTML = `❌ 错误。正确答案是 ${correctCountry}。 ${extraHint}<br>📖 建议重温视频中关于该口音的关键片段。`;
feedbackDiv.classList.add('wrong');
feedbackDiv.style.display = 'block';
}
});
// 显示总分面板
scorePanel.style.display = 'block';
let perfectMessage = totalScore === total ? ' 🎉 完美！你是口音特征专家！' : ' 📚 复习一下视频里的对比总结，下次更厉害。';
scorePanel.innerHTML = `🏆 得分： ${totalScore} / ${total} ${perfectMessage}`;
scorePanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
submitBtn.addEventListener('click', (e) => {
e.preventDefault();
evaluateQuiz();
});
// 让点击整个option都能选中radio的小优化
document.querySelectorAll('.option').forEach(opt => {
opt.addEventListener('click', (e) => {
const radio = opt.querySelector('input[type="radio"]');
if (radio && !radio.checked && e.target.tagName !== 'INPUT') {
radio.checked = true;
// 触发一个小变化（可选）
radio.dispatchEvent(new Event('change'));
}
});
});
</script>
</body>
</html>Game Source: 各国英语口音知识测验 | 无需听力
Creator: RocketGecko40
Libraries: none
Complexity: complex (418 lines, 17.2 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-rocketgecko40-mqcfu2ps" to link back to the original. Then publish at arcadelab.ai/publish.