<!DOCTYPE html>
<html lang="zh-MY">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>马来西亚独立历史练习 (TP1 - TP6)</title>
<style>
:root {
--primary-color: #1e3a8a;
--secondary-color: #2563eb;
--correct-color: #16a34a;
--wrong-color: #dc2626;
--bg-color: #f8fafc;
--card-bg: #ffffff;
--text-color: #1e293b;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
padding: 20px;
margin: 0;
}
.quiz-container {
max-width: 800px;
margin: 0 auto;
}
.header {
text-align: center;
background: var(--primary-color);
color: white;
padding: 20px;
border-radius: 10px;
margin-bottom: 25px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.header h1 {
margin: 0 0 10px 0;
font-size: 1.8rem;
}
.header p {
margin: 0;
font-size: 0.95rem;
opacity: 0.9;
}
.question-card {
background: var(--card-bg);
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
border: 1px solid #e2e8f0;
}
.tp-badge {
display: inline-block;
background: #e0e7ff;
color: var(--primary-color);
font-weight: bold;
padding: 4px 12px;
border-radius: 15px;
font-size: 0.85rem;
margin-bottom: 10px;
}
.question-text {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 15px;
}
.options-list {
list-style: none;
padding: 0;
margin: 0;
}
.option-item {
margin-bottom: 10px;
}
.option-item label {
display: block;
padding: 12px 15px;
background: #f1f5f9;
border: 2px solid #e2e8f0;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.option-item label:hover {
background: #e2e8f0;
}
.option-item input[type="radio"] {
margin-right: 10px;
}
.check-btn, .submit-btn {
background: var(--secondary-color);
color: white;
border: none;
padding: 12px 24px;
font-size: 1rem;
border-radius: 8px;
cursor: pointer;
width: 100%;
font-weight: bold;
transition: background 0.2s;
margin-top: 10px;
}
.check-btn:hover, .submit-btn:hover {
background: var(--primary-color);
}
.explanation {
display: none;
margin-top: 15px;
padding: 12px 15px;
border-radius: 6px;
font-size: 0.95rem;
}
.explanation.correct {
background-color: #dcfce7;
color: var(--correct-color);
border: 1px solid #86efac;
}
.explanation.wrong {
background-color: #fee2e2;
color: var(--wrong-color);
border: 1px solid #fca5a5;
}
.result-box {
display: none;
text-align: center;
background: var(--card-bg);
padding: 25px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
margin-top: 20px;
}
.result-score {
font-size: 2rem;
font-weight: bold;
color: var(--primary-color);
}
</style>
</head>
<body>
<div class="quiz-container">
<div class="header">
<h1>马来西亚独立历史选择题练习</h1>
<p>基于学习标准 7.3.1 至 K7.3.6 (包含 TP1 - TP6 评估级别)</p>
</div>
<form id="quizForm">
<!-- TP 1 -->
<div class="question-card" id="q1-card">
<span class="tp-badge">TP 1: Memerihalkan sejarah kemerdekaan negara 1957</span>
<div class="question-text">1. 以下哪一位人物被誉为马来西亚的“独立之父”（Bapa Kemerdekaan）？</div>
<ul class="options-list">
<li class="option-item"><label><input type="radio" name="q1" value="A"> A. Tun Abdul Razak bin Dato' Hussein</label></li>
<li class="option-item"><label><input type="radio" name="q1" value="B"> B. Tunku Abdul Rahman Putra Al-Haj</label></li>
<li class="option-item"><label><input type="radio" name="q1" value="C"> C. Tun H.S. Lee</label></li>
<li class="option-item"><label><input type="radio" name="q1" value="D"> D. Tun V.T. Sambanthan</label></li>
</ul>
<div class="explanation" id="exp1"></div>
</div>
<!-- TP 2 -->
<div class="question-card" id="q2-card">
<span class="tp-badge">TP 2: Menjelaskan sejarah kemerdekaan negara 1957</span>
<div class="question-text">2. 为什么1955年举行的大选（Pilihan Raya Majlis Perundangan Persekutuan 1955）对争取国家独立非常重要？</div>
<ul class="options-list">
<li class="option-item"><label><input type="radio" name="q2" value="A"> A. 它证明了各族群能够在同一个政党联盟下合作并建立自治政府</label></li>
<li class="option-item"><label><input type="radio" name="q2" value="B"> B. 它是英国人直接指定独立领袖的唯一途径</label></li>
<li class="option-item"><label><input type="radio" name="q2" value="C"> C. 它是为了选出首任马来西亚国家元首而举办的</label></li>
<li class="option-item"><label><input type="radio" name="q2" value="D"> D. 它彻底消除了当时国内所有的马共势力</label></li>
</ul>
<div class="explanation" id="exp2"></div>
</div>
<!-- TP 3 -->
<div class="question-card" id="q3-card">
<span class="tp-badge">TP 3: Membuat urutan sejarah kemerdekaan negara 1957</span>
<div class="question-text">3. 请选出争取国家独立过程中，相关事件发生的正确先后顺序：</div>
<div style="background: #f8fafc; padding: 10px; border-radius: 5px; margin-bottom: 10px; font-size: 0.9rem;">
I. 伦敦独立谈判（Rundingan Kemerdekaan di London）<br>
II. 1957年8月31日在默迪卡体育场宣布独立<br>
III. 1957年8月30日午夜在吉隆坡雪兰莪俱乐部操场降下英国国旗<br>
IV. 1955年联邦立法议会选举
</div>
<ul class="options-list">
<li class="option-item"><label><input type="radio" name="q3" value="A"> A. I → IV → III → II</label></li>
<li class="option-item"><label><input type="radio" name="q3" value="B"> B. IV → I → III → II</label></li>
<li class="option-item"><label><input type="radio" name="q3" value="C"> C. IV → III → I → II</label></li>
<li class="option-item"><label><input type="radio" name="q3" value="D"> D. I → III → IV → II</label></li>
</ul>
<div class="explanation" id="exp3"></div>
</div>
<!-- TP 4 -->
<div class="question-card" id="q4-card">
<span class="tp-badge">TP 4: Menganalisis sejarah kemerdekaan negara 1957</span>
<div class="question-text">4. 各族领袖组建“联盟”（Perikatan）并共同赴伦敦谈判争取独立。这一举措反映了什么重要的成功因素？</div>
<ul class="options-list">
<li class="option-item"><label><input type="radio" name="q4" value="A"> A. 只有依赖外力的协助才能获得独立</label></li>
<li class="option-item"><label><input type="radio" name="q4" value="B"> B. 经济实力是独立谈判中唯一的筹码</label></li>
<li class="option-item"><label><input type="radio" name="q4" value="C"> C. 协商共识与多元族群合作是赢得英国信任并取得独立的决定性因素</label></li>
<li class="option-item"><label><input type="radio" name="q4" value="D"> D. 武力对抗是解决殖民统治最有效的方法</label></li>
</ul>
<div class="explanation" id="exp4"></div>
</div>
<!-- TP 5 -->
<div class="question-card" id="q5-card">
<span class="tp-badge">TP 5: Menilai sejarah kemerdekaan negara 1957 dalam konteks perjuangan tokoh</span>
<div class="question-text">5. Tun H.S. Lee（李孝式）和 Tun V.T. Sambanthan 等领袖积极参与独立谈判与建国工作。他们的无私奉献最值得我们学习的价值观是什么？</div>
<ul class="options-list">
<li class="option-item"><label><input type="radio" name="q5" value="A"> A. 优先争取自身社群的政治和经济利益</label></li>
<li class="option-item"><label><input type="radio" name="q5" value="B"> B. 为了国家和全民的共同未来，愿意妥协并做出自我牺牲</label></li>
<li class="option-item"><label><input type="radio" name="q5" value="C"> C. 盲目顺从执政者的所有指示</label></li>
<li class="option-item"><label><input type="radio" name="q5" value="D"> D. 追求个人的政治声望与地位</label></li>
</ul>
<div class="explanation" id="exp5"></div>
</div>
<!-- TP 6 -->
<div class="question-card" id="q6-card">
<span class="tp-badge">TP 6: Menjana idea untuk mengekalkan kemerdekaan negara kepada generasi muda</span>
<div class="question-text">6. 身为新时代的青年，以下哪项是捍卫国家独立、防止国家受外部势力或内部分裂破坏的最有效创新举措？</div>
<ul class="options-list">
<li class="option-item"><label><input type="radio" name="q6" value="A"> A. 完全拒绝接收任何来自国外的科技与文化资讯</label></li>
<li class="option-item"><label><input type="radio" name="q6" value="B"> B. 仅在每年的独立月挂国旗，平时不关注国家事务</label></li>
<li class="option-item"><label><input type="radio" name="q6" value="C"> C. 积极推动跨族群文化交流，并利用数码媒体传播爱国理念与正确的历史观</label></li>
<li class="option-item"><label><input type="radio" name="q6" value="D"> D. 鼓励青年将注意力仅集中于个人学术表现，不必理会社会和谐</label></li>
</ul>
<div class="explanation" id="exp6"></div>
</div>
<button type="button" class="submit-btn" onclick="checkAnswers()">提交答案</button>
</form>
<div class="result-box" id="resultBox">
<h2>测试结果</h2>
<p class="result-score" id="scoreText">0 / 6</p>
<p id="feedbackText"></p>
</div>
</div>
<script>
const answers = {
q1: { ans: "B", exp: "正确答案：B。东姑阿都拉带领国家走向独立，因此被尊称为“独立之父”。(学习标准 7.3.1)" },
q2: { ans: "A", exp: "正确答案：A。1955年大选的胜利证明了联盟（Perikatan）能够团结各族，向英国人展示了自我治理的能力。(学习标准 7.3.2)" },
q3: { ans: "B", exp: "正确答案：B。正确顺序为：1955年大选(IV) → 赴伦敦谈判(I) → 1957年8月30日夜间降英国旗(III) → 1957年8月31日宣布独立(II)。(学习标准 7.3.3)" },
q4: { ans: "C", exp: "正确答案：C。分析历史可见，协商（Permuafakatan）与跨族群合作是取得英国同意移交政权的关键。(学习标准 K7.3.5 / 7.3.2)" },
q5: { ans: "B", exp: "正确答案：B。各族先贤的牺牲与国家至上的精神是建国的主要基石，值得后人效法。(学习标准 K7.3.4)" },
q6: { ans: "C", exp: "正确答案：C。通过数码媒体促进跨族群理解与爱国意识，是现代青年巩固国家独立与团结的具创新性（Menjana Idea）的做法。(学习标准 K7.3.6)" }
};
function checkAnswers() {
let score = 0;
const total = 6;
for (let i = 1; i <= total; i++) {
const qName = "q" + i;
const selected = document.querySelector(`input[name="${qName}"]:checked`);
const expDiv = document.getElementById(`exp${i}`);
expDiv.style.display = "block";
if (selected) {
if (selected.value === answers[qName].ans) {
score++;
expDiv.className = "explanation correct";
expDiv.innerHTML = "<strong>正确！</strong> " + answers[qName].exp;
} else {
expDiv.className = "explanation wrong";
expDiv.innerHTML = "<strong>错误。</strong> " + answers[qName].exp;
}
} else {
expDiv.className = "explanation wrong";
expDiv.innerHTML = "<strong>未作答。</strong> " + answers[qName].exp;
}
}
const resultBox = document.getElementById("resultBox");
const scoreText = document.getElementById("scoreText");
const feedbackText = document.getElementById("feedbackText");
resultBox.style.display = "block";
scoreText.innerText = `${score} / ${total}`;
if (score === 6) {
feedbackText.innerText = "太棒了！你完美掌握了历史独立课题的所有掌握级别（TP1 - TP6）！";
} else if (score >= 4) {
feedbackText.innerText = "表现良好！你对大多数掌握级别的内容理解得很透彻。";
} else {
feedbackText.innerText = "再接再厉！建议重新复习相关学习标准的内容后再试一次。";
}
// 平滑滚动到结果页面
resultBox.scrollIntoView({ behavior: 'smooth' });
}
</script>
</body>
</html>
