<!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>
