<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>探寻数据的起源</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Microsoft YaHei', sans-serif;
}
body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
padding: 30px 0;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
border-radius: 10px;
margin-bottom: 30px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.intro {
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto 20px;
}
.timeline {
position: relative;
margin: 40px 0;
padding-left: 50px;
}
.timeline::before {
content: '';
position: absolute;
left: 20px;
top: 0;
height: 100%;
width: 4px;
background: #2575fc;
}
.timeline-item {
position: relative;
margin-bottom: 40px;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
display: flex;
align-items: flex-start;
}
.timeline-item::before {
content: '';
position: absolute;
left: -40px;
top: 20px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #6a11cb;
border: 4px solid #2575fc;
}
.timeline-image {
width: 150px;
height: 120px;
margin-right: 20px;
border-radius: 8px;
object-fit: cover;
background-color: #f0f4ff;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #6a11cb;
}
.timeline-content {
flex: 1;
}
.timeline-date {
font-weight: bold;
color: #6a11cb;
margin-bottom: 10px;
}
.timeline-content h3 {
margin-bottom: 10px;
color: #2575fc;
}
.quiz-container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin-top: 40px;
}
.quiz-title {
text-align: center;
margin-bottom: 20px;
color: #6a11cb;
}
.question {
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.question-text {
font-weight: bold;
margin-bottom: 10px;
}
.options label {
display: block;
padding: 10px;
margin-bottom: 8px;
background: #f0f4ff;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
.options label:hover {
background: #e0e8ff;
}
.options input[type="radio"] {
margin-right: 10px;
}
.feedback {
margin-top: 10px;
padding: 10px;
border-radius: 5px;
display: none;
}
.correct {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.incorrect {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.submit-btn {
display: block;
width: 200px;
margin: 30px auto 0;
padding: 12px;
background: #6a11cb;
color: white;
border: none;
border-radius: 5px;
font-size: 1.1rem;
cursor: pointer;
transition: background 0.3s;
}
.submit-btn:hover {
background: #2575fc;
}
.result {
text-align: center;
margin-top: 20px;
font-weight: bold;
font-size: 1.2rem;
display: none;
}
@media (max-width: 768px) {
.timeline {
padding-left: 30px;
}
.timeline::before {
left: 10px;
}
.timeline-item::before {
left: -25px;
}
.timeline-item {
flex-direction: column;
}
.timeline-image {
width: 100%;
height: 150px;
margin-right: 0;
margin-bottom: 15px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>探寻数据的起源</h1>
<p class="intro">探索人类如何从远古时代开始记录和保存信息，了解数据记录方式的发展历程</p>
</header>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-image">
📜
</div>
<div class="timeline-content">
<div class="timeline-date">远古时期（11万年前）</div>
<h3>刻痕记事</h3>
<p>早期人类使用尖锐工具在骨头、木头或石头上刻下记号来计数或记事。</p>
<p>在河南省"许昌人"遗址出土的骨片上，发现了7条平行刻划直线，距今约11万年，这是早期人类记录信息的方式。</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-image">
🪢
</div>
<div class="timeline-content">
<div class="timeline-date">上古时期</div>
<h3>结绳记事</h3>
<p>人们使用绳子打结的方法来记录数据和信息，不同颜色、大小和位置的绳结代表不同含义。</p>
<p>中国古代文献记载："上古结绳而治，后世圣人易之以书契。"</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-image">
🖋️
</div>
<div class="timeline-content">
<div class="timeline-date">约5000年前</div>
<h3>文字的出现</h3>
<p>随着生产力发展，人们需要记录的信息越来越多，逐渐产生了原始文字。</p>
<p>文字的出现使信息记录更加精确和详细，如成都出土的《天回医简》由900多支医简组成。</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-image">
📄
</div>
<div class="timeline-content">
<div class="timeline-date">东汉时期</div>
<h3>造纸术改进</h极>
<p>蔡伦改进了造纸术，使记录载体比竹简更轻便，更利于知识的传播和保存。</p>
<p>纸张的出现大大降低了信息记录的成本，促进了文明的发展。</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-image">
💻
</div>
<div class="timeline-content">
<div class极="timeline-date">现代</div>
<h3>计算机与数字存储</h3>
<p>人们发明了计算机，它具有海量数据发现、存储和加工能力，成为主流的数据存储载体。</p>
<p>现代数据形式多样，包括文字、数字、图片、声音、视频等，数据量呈指数级增长。</p>
</div>
</div>
</div>
<div class="quiz-container">
<h2 class="quiz-title">数据起源知识检测</h2>
<form id="quiz-form">
<div class="question" id="q1">
<p class="question-text">1. 在河南"许昌人"遗址出土的骨片上发现了多少条刻划直线？</p>
<div class="options">
<label><input type="radio" name="q1" value="a" onchange="checkAnswer('q1', 'a')"> A. 5条</label>
<label><input type="radio" name="q1" value="b" onchange="checkAnswer('q1', 'b')"> B. 7条</label>
<label><input type="radio" name="q1极" value="c" onchange="checkAnswer('q1', 'c')"> C. 9条</label>
<label><input type="radio" name="q1" value="d" onchange="checkAnswer('q1', 'd')"> D. 11条</label>
</div>
<div class="feedback" id="feedback-q1"></div>
</div>
<div class="question" id="q2">
<p class="question-text">2. "许昌人"遗址骨片刻痕大约距今多少年？</p>
<div class="options">
<label><input type="radio" name="q2" value="a" onchange="checkAnswer('q2', 'a')"> A. 约1万年</label>
<label><input type="radio" name="q2" value="b" onchange="checkAnswer('q2', 'b')"> B. 约5万年</label>
<label><input type="radio" name="q2" value="c" onchange="checkAnswer('q2', 'c')"> C. 约11万年</label>
<label><input type="radio" name="q2" value="d" onchange="checkAnswer('q2', 'd')"> D. 约20万年</label>
</div>
<div class="feedback" id="feedback-q2"></div>
</div>
<div class="question" id="q3">
<p class="question-text">3. 下列哪项是中国古代文献中关于结绳记事的记载？</p>
<div class="options">
<label><input type="radio" name="q3" value="a" onchange="checkAnswer('q3', 'a')"> A. "上古结绳而治，后世圣人易之以书契"</label>
<label><input type="radio" name="q3" value="b" onchange="checkAnswer('q3', 'b')"> B. "绳锯木断，水滴石穿"</label>
<label><input type="radio" name="q3" value="c" onchange="checkAnswer('q3', 'c')"> C. "千里之行，始于足下"</label>
<label><input type="radio" name="q3" value="d" onchange="checkAnswer('q3', 'd')"> D. "知己知彼，百战不殆"</label>
</div>
<div class="feedback" id="feedback-q3"></div>
</div>
<div class="question" id="q4">
<p class="question-text">4. 结绳记事中，不同颜色的绳子通常表示：</p>
<div class="options">
<label><input type="radio" name="q极4" value="a" onchange="checkAnswer('q4', 'a')"> A. 不同的事件或事物</label>
<label><input type="radio" name="q4" value="b" onchange="极checkAnswer('q4', 'b')"> B. 不同的天气状况</label>
<label><input type="radio" name="q4" value="c" onchange="checkAnswer('q4', 'c')"> C. 不同的部落首领</label>
<label><input type="radio" name="q4" value="d" onchange="checkAnswer('q4', 'd')"> D. 不同的神灵</label>
</div>
<div class="feedback" id="feedback-q4"></div>
</div>
<div class="question" id="q5">
<p class="question-text">5. 成都出土的《天回医简》大约由多少支医简组成？</p>
<div class="options">
<label><input type="radio" name="q5" value="a" onchange="checkAnswer('q5', 'a')"> A. 300多支</label>
<label><input type="radio" name="q5" value="b" onchange="checkAnswer('q5', 'b')"> B. 600多支</label>
<label><input type="radio" name="q5" value="c" onchange="checkAnswer('q5', 'c')"> C. 900多支</label>
<label><input type="radio" name="q5" value="d极" onchange="checkAnswer('q5', 'd')"> D. 1200多支</label>
</div>
<div class="feedback" id="feedback-q5"></div>
</div>
<div class="question" id="q6">
<p class="question-text">6. 改进造纸术，使记录载体更加轻便的发明家是：</p>
<div class="options">
<label><input type="radio" name="q6" value="a" onchange="checkAnswer('q6', 'a')"> A. 蔡伦</label>
<label><input type="radio" name="q6" value="b" onchange="checkAnswer('q6', 'b')"> B. 张衡</label>
<label><input type="radio" name="q6" value="c" onchange="checkAnswer('q6', 'c')"> C. 毕昇</label>
<label><input type="radio" name="q6" value="d" onchange="checkAnswer('q6', 'd')"> D. 诸葛亮</label>
</div>
<div class="feedback" id="feedback-q6"></div>
</div>
<div class="question" id="q7">
<p class="question-text">7. 现代主流的数据存储载体是：</p>
<div class="options">
<label><input type="radio" name="q7" value="a" onchange="checkAnswer('q7', 'a')"> A. 竹简</label>
<label><input type="radio" name="q7" value="b" onchange="checkAnswer('q7', 'b')"> B. 纸张</label>
<label><input type="radio" name="q7" value="c" onchange="checkAnswer('q7', 'c')"> C. 计算机</极label>
<label><input type="radio" name="q7" value="d" onchange="checkAnswer('q7', 'd')"> D. 绳结</label>
</div>
<div class="feedback" id="feedback-q7"></div>
</div>
<div class="question" id="q8">
<p class="question-text">8. 刻痕记事通常使用什么工具？</p>
<div class="options">
<label><input type="radio" name="q8" value="a" onchange="checkAnswer('q8', 'a')"> A. 尖锐的石器或骨器</label>
<label><input type="radio" name="q8" value="b" onchange="checkAnswer('q8', 'b')"> B. 毛笔</label>
<label><input type="radio" name="q8" value="c" onchange="checkAnswer('q8', 'c')"> C. 钢笔</label>
<label><input type="radio" name="q8" value="d" onchange="checkAnswer('q8', 'd')"> D. 键盘</label>
</极div>
<div class="feedback" id="feedback-q8"></div>
</div>
<div class="question" id="q9">
<p class="question-text">9. 下列哪项不是古代数据记录的方式？</p>
<div class="options">
<label><input type="radio" name="q9" value="a" onchange="checkAnswer('q9', 'a')"> A. 结绳记事</label>
<label><input type="radio" name="q9" value="b" onchange="checkAnswer('q9', 'b')"> B. 刻痕记事</label>
<label><input type="radio" name="q9" value="c" onchange="checkAnswer('q9', 'c')"> C. 电子邮件</label>
<label><input type="radio" name="q9" value="d" onchange="checkAnswer('q9', 'd')"> D. 竹简记录</label>
</div>
<div class="feedback" id="feedback-q9"></div>
</div>
<div class="question" id="q10">
<p class="question-text">10. 数据记录的发展历程总体趋势是：</p>
<div class="options">
<label><input type="radio" name="q10" value="a" onchange="checkAnswer('q10', 'a')"> A. 从简单到复杂，从具体到抽象</label>
<label><input type="radio" name="q10" value="b" onchange="checkAnswer('q10', 'b')"> B. 从复杂到简单，从抽象到具体</label>
<label><input type="radio" name="q10" value="c" onchange="checkAnswer('q10', 'c')"> C. 一直保持不变</label>
<label><input type="radio" name="q10" value="d" onchange="checkAnswer('q10', 'd')"> D. 越来越依赖记忆</label>
</div>
<div class="feedback" id="feedback-q10"></div>
</div>
<button type="button" class="submit-btn" onclick="showFinalScore()">查看最终得分</button>
</form>
<div class="result" id="quiz-result"></div>
</div>
</div>
<script>
// 正确答案
const correctAnswers = {
q1: 'b',
q2: 'c',
q3: 'a',
q4: 'a',
q5: 'c',
q6: 'a',
q7: 'c',
q8: 'a',
q9: 'c',
q10: 'a'
};
// 答案解析
const answerExplanations = {
q1: {
correct: 'b',
explanation: '正确答案是B. 7条。在河南"许昌人"遗址出土的骨片上发现了7条平行刻划直线，这是早期人类记录信息的重要证据。'
},
q2: {
correct: 'c',
explanation: '正确答案是C. 约11万年。"许昌人"遗址骨片刻痕距今约11万年，比此前在南非发现的最早的现代人画作早了约4万年。'
},
q3: {
correct: 'a',
explanation: '正确答案是A. "上古结绳而治，后世圣人易之以书契"。这句话出自《周易·系辞下》，是中国古代关于结绳记事的重要记载。'
},
q4: {
correct: 'a',
explanation: '正确答案是A. 不同的事件或事物。在结绳记事中，不同颜色的绳子通常代表不同的事件或事物，这是古代人类记录复杂信息的方式。'
},
q5: {
correct: 'c',
explanation: '正确答案是C. 900多支。成都出土的《天回医简》由900多支医简组成，是研究古代医学的重要文献资料。'
},
q6: {
correct: 'a',
explanation: '正确答案是A. 蔡伦。东汉时期的蔡伦改进了造纸术，使纸张成为更加轻便的记录载体，促进了知识的传播。'
},
q7: {
correct: 'c',
explanation: '正确答案是C. 计算机。现代主流的数据存储载体是计算机，它具有海量数据存储和处理能力，支持多种数据形式。'
},
q8: {
correct: 'a',
explanation: '正确答案是A. 尖锐的石器或骨器。刻痕记事通常使用尖锐的石器或骨器在硬质材料上刻划记号来记录信息。'
},
q9: {
correct: 'c',
explanation: '正确答案是C. 电子邮件。电子邮件是现代电子通信方式，不属于古代数据记录的方式。古代记录方式包括结绳记事、刻痕记事和竹简记录等。'
},
q10: {
correct: 'a',
explanation: '正确答案是A. 从简单到复杂，从具体到抽象。数据记录的发展历程总体趋势是从简单到复杂，从具体到抽象，体现了人类文明的进步。'
}
};
// 检查答案
function checkAnswer(questionId, selectedAnswer) {
const feedbackElement = document.getElementById(`feedback-${questionId}`);
const correctAnswer = correctAnswers[questionId];
if (selectedAnswer === correctAnswer) {
feedbackElement.className = 'feedback correct';
feedbackElement.innerHTML = '✓ 回答正确！';
} else {
feedbackElement.className = 'feedback incorrect';
feedbackElement.innerHTML = `✗ 回答错误！${answerExplanations[questionId].explanation}`;
}
feedbackElement.style.display = 'block';
}
// 显示最终得分
function showFinalScore() {
let score = 0;
const totalQuestions = Object.keys(correctAnswers).length;
for (let i = 1; i <= totalQuestions; i++) {
const selected = document.querySelector(`input[name="q${i}"]:checked`);
if (selected && selected.value === correctAnswers[`q${i}`]) {
score++;
}
}
const resultElement = document.getElementById('quiz-result');
resultElement.style.display = 'block';
resultElement.innerHTML = `您的最终得分：${score}/${totalQuestions}<br>`;
if (score === totalQuestions) {
resultElement.innerHTML += '太棒了！您已经完全掌握了数据起源的知识！';
resultElement.style.color = '#2ecc71';
} else if (score >= totalQuestions * 0.7) {
resultElement.innerHTML += '很好！您对数据起源有较好的理解！';
resultElement.style.color = '#3498db';
} else {
resultElement.innerHTML += '需要继续努力，请再复习一下数据起源的内容。';
resultElement.style.color = '#e74c3c';
}
}
</script>
</body>
</html>
index.html
index.html