<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字媒体作品知识点互动学习</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f3f4f6;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 1rem;
}
.container {
background-color: #fff;
padding: 2.5rem;
border-radius: 1.5rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
max-width: 800px;
width: 100%;
}
.question-card, .knowledge-card {
background-color: #f9fafb;
padding: 2rem;
border-radius: 1rem;
border: 1px solid #e5e7eb;
margin-top: 2rem;
}
.option-button {
border: 1px solid #d1d5db;
transition: all 0.2s;
}
.option-button:hover:not([disabled]) {
background-color: #e5e7eb;
}
.correct-answer {
background-color: #d1fae5;
border-color: #34d399;
}
.wrong-answer {
background-color: #fee2e2;
border-color: #f87171;
}
.selected-option {
background-color: #e0f2fe;
border-color: #60a5fa;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-3xl font-bold text-center text-gray-800 mb-6">数字媒体作品知识点互动学习</h1>
<!-- 问题展示区 -->
<div id="quiz-container" class="relative">
<p id="question-text" class="text-xl text-gray-900 mb-6 font-semibold"></p>
<div id="options-container" class="grid grid-cols-1 md:grid-cols-2 gap-4"></div>
</div>
<!-- 反馈和下一题按钮 -->
<div id="feedback-message" class="mt-4 text-center text-lg font-bold"></div>
<button id="next-button" class="hidden mt-6 w-full py-3 px-6 bg-blue-600 text-white font-semibold rounded-full shadow-lg hover:bg-blue-700 transition-colors">下一题</button>
<!-- 知识卡片与实例 -->
<div id="knowledge-card" class="knowledge-card hidden">
<h3 class="text-xl font-bold text-gray-800 mb-2">知识卡片：<span id="knowledge-title"></span></h3>
<p id="knowledge-content" class="text-gray-600 mb-4"></p>
<div id="example-card" class="bg-blue-50 border-l-4 border-blue-500 text-blue-800 p-4 rounded-lg">
<h4 class="font-bold mb-2">实例：</h4>
<p id="example-content"></p>
</div>
</div>
</div>
<script>
// 定义所有问题、知识卡片和实例
const questions = [
{
question: "在数字媒体作品的设计基础中，平面构成、色彩构成和立体构成三部分统称为？",
type: "single",
options: ["形式美法则", "三大构成设计体系", "视觉语言", "设计原则"],
answer: [1],
knowledgeCard: {
title: "三大构成设计体系",
content: "三大构成是现代设计教育的基石，是所有设计门类的入门基础。平面构成研究二维平面，色彩构成研究色彩搭配，立体构成研究三维空间形态。"
},
example: "就像盖房子前要先学基础建筑学一样，学习平面构成、色彩构成和立体构成，是所有设计师进入数字媒体世界的必经之路。"
},
{
question: "在平面构成中，通过大小、疏密、虚实对比来突出重点，常用于标题的设计，这体现的设计原则是？",
type: "single",
options: ["重复与节奏", "对比与平衡", "留白与呼吸感", "统一与变化"],
answer: [1],
knowledgeCard: {
title: "对比与平衡",
content: "通过元素在大小、疏密、虚实等方面的差异来制造视觉焦点，同时又要注意画面的整体稳定感，这正是“对比与平衡”原则的运用。"
},
example: "新闻网站的头条标题通常比正文大好几倍，且字体加粗，旁边配以大图，这就是利用大小和虚实对比来吸引用户眼球，同时整个版面仍然保持视觉上的稳定。"
},
{
question: "色彩构成中，通常红色代表激情、蓝色代表信任、绿色代表自然，这主要体现了色彩构成的？",
type: "single",
options: ["色调", "明度", "纯度", "情感表达"],
answer: [3],
knowledgeCard: {
title: "情感表达",
content: "不同的色彩会引发人们不同的心理联想和情绪反应，这是色彩在“情感表达”层面的作用，是色彩构成中重要的研究内容。"
},
example: "在电影海报中，使用大量红色调和火焰元素来表现动作片的紧张和热血；而使用蓝色和白色调则可以营造出科幻电影的冷静和未来感。"
},
{
question: "数字媒体作品开发时，应遵循的技术原则有？",
type: "multiple",
options: ["兼容性原则", "性能优化原则", "可扩展性原则", "安全性原则"],
answer: [0, 1, 2, 3],
knowledgeCard: {
title: "技术与合规原则",
content: "这些原则是保障作品质量、安全和合法性的基本准则。它们确保作品能稳定、高效、安全地运行，并易于维护和升级。"
},
example: "一个手机App需要保证在不同品牌、不同系统版本（兼容性）的手机上都能流畅运行（性能优化），未来可以轻松增加新功能（可扩展性），并且不会泄露用户的隐私信息（安全性）。"
},
{
question: "下列软件中,属于图形图像创作工具的有？",
type: "multiple",
options: ["Adobe Photoshop", "CorelDRAW", "Adobe Illustrator", "Adobe Audition"],
answer: [0, 1, 2],
knowledgeCard: {
title: "图形图像创作工具",
content: "主要用于处理静态的图像。位图软件如Photoshop用于像素级处理；矢量软件如Illustrator和CorelDRAW用于绘制可无限放大的图形。"
},
example: "设计师使用Photoshop来精修一张照片，例如去掉瑕疵或调整光线；而当他要设计一个公司Logo时，则会使用Illustrator，因为矢量图可以保证在名片、广告牌等不同尺寸下都清晰不变形。"
}
];
let currentQuestionIndex = 0;
let selectedOptions = new Set();
let isAnswerChecked = false;
const questionText = document.getElementById('question-text');
const optionsContainer = document.getElementById('options-container');
const nextButton = document.getElementById('next-button');
const feedbackMessage = document.getElementById('feedback-message');
const knowledgeCard = document.getElementById('knowledge-card');
const knowledgeTitle = document.getElementById('knowledge-title');
const knowledgeContent = document.getElementById('knowledge-content');
const exampleContent = document.getElementById('example-content');
// 加载当前问题
function loadQuestion() {
if (currentQuestionIndex >= questions.length) {
showQuizEnd();
return;
}
const currentQuestion = questions[currentQuestionIndex];
// 重置状态
optionsContainer.innerHTML = '';
selectedOptions.clear();
isAnswerChecked = false;
feedbackMessage.textContent = '';
nextButton.classList.add('hidden');
knowledgeCard.classList.add('hidden');
// 显示问题
questionText.textContent = `第 ${currentQuestionIndex + 1} 题: ${currentQuestion.question}`;
// 生成选项
currentQuestion.options.forEach((option, index) => {
const button = document.createElement('button');
button.textContent = option;
button.dataset.index = index;
button.className = 'option-button p-4 text-left rounded-lg shadow-sm font-medium';
button.addEventListener('click', () => handleOptionClick(index));
optionsContainer.appendChild(button);
});
}
// 处理选项点击事件
function handleOptionClick(index) {
if (isAnswerChecked) return;
const currentQuestion = questions[currentQuestionIndex];
const button = optionsContainer.children[index];
if (currentQuestion.type === 'single') {
selectedOptions.clear();
selectedOptions.add(index);
optionsContainer.querySelectorAll('.option-button').forEach(btn => btn.classList.remove('selected-option'));
button.classList.add('selected-option');
checkAnswer();
} else if (currentQuestion.type === 'multiple') {
if (selectedOptions.has(index)) {
selectedOptions.delete(index);
button.classList.remove('selected-option');
} else {
selectedOptions.add(index);
button.classList.add('selected-option');
}
// 在多选题中，用户选择后可以立即检查，也可以添加一个“提交”按钮
// 为了简化，这里直接在每次点击后检查
// checkAnswer();
}
}
// 检查答案
function checkAnswer() {
isAnswerChecked = true;
const currentQuestion = questions[currentQuestionIndex];
const correctAnswers = new Set(currentQuestion.answer);
let isCorrect = true;
if (selectedOptions.size !== correctAnswers.size) {
isCorrect = false;
} else {
for (let index of selectedOptions) {
if (!correctAnswers.has(index)) {
isCorrect = false;
break;
}
}
}
// 禁用所有选项
optionsContainer.querySelectorAll('.option-button').forEach(btn => btn.disabled = true);
// 标记正确和错误选项
optionsContainer.querySelectorAll('.option-button').forEach(btn => {
const index = parseInt(btn.dataset.index);
if (correctAnswers.has(index)) {
btn.classList.add('correct-answer');
}
if (selectedOptions.has(index) && !correctAnswers.has(index)) {
btn.classList.add('wrong-answer');
}
});
// 显示反馈信息
if (isCorrect) {
feedbackMessage.textContent = '✅ 回答正确！';
feedbackMessage.className = 'mt-4 text-center text-green-600 font-bold';
} else {
feedbackMessage.textContent = '❌ 回答错误。';
feedbackMessage.className = 'mt-4 text-center text-red-600 font-bold';
}
// 显示知识卡片
showKnowledgeAndExample(currentQuestion);
// 显示下一题按钮
nextButton.classList.remove('hidden');
}
// 显示知识卡片和实例
function showKnowledgeAndExample(question) {
knowledgeTitle.textContent = question.knowledgeCard.title;
knowledgeContent.textContent = question.knowledgeCard.content;
exampleContent.textContent = question.example;
knowledgeCard.classList.remove('hidden');
}
// 切换到下一题
nextButton.addEventListener('click', () => {
currentQuestionIndex++;
loadQuestion();
});
// 多选题添加提交按钮
document.addEventListener('DOMContentLoaded', () => {
const quizContainer = document.getElementById('quiz-container');
const submitButton = document.createElement('button');
submitButton.textContent = '提交答案';
submitButton.className = 'hidden mt-6 w-full py-3 px-6 bg-green-600 text-white font-semibold rounded-full shadow-lg hover:bg-green-700 transition-colors';
submitButton.id = 'submit-button';
submitButton.addEventListener('click', checkAnswer);
quizContainer.appendChild(submitButton);
optionsContainer.addEventListener('click', () => {
const currentQuestion = questions[currentQuestionIndex];
if (currentQuestion.type === 'multiple' && selectedOptions.size > 0 && !isAnswerChecked) {
submitButton.classList.remove('hidden');
} else if (currentQuestion.type === 'multiple') {
submitButton.classList.add('hidden');
}
});
});
// 显示测验结束
function showQuizEnd() {
questionText.textContent = '恭喜你！你已完成所有题目。';
optionsContainer.innerHTML = '';
feedbackMessage.textContent = '';
nextButton.classList.add('hidden');
knowledgeCard.classList.add('hidden');
}
// 初始化加载
loadQuestion();
</script>
</body>
</html>
浙公网安备 33010602011771号