|
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lua课程第一节 - 课后答题</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-color: #000000; --secondary-color: #FFD700; --accent-color: #C5A572; --text-color: #FFFFFF; --card-bg: #1A1A1A; --border-color: #333; --correct-color: #2E7D32; --wrong-color: #C62828; } body { font-family: 'Microsoft YaHei', Arial, sans-serif; background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); color: var(--text-color); min-height: 100vh; line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } header { text-align: center; padding: 40px 0; background: linear-gradient(90deg, #000 0%, #333 100%); border-bottom: 3px solid var(--secondary-color); border-radius: 10px; margin-bottom: 40px; position: relative; overflow: hidden; } header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--secondary-color), var(--accent-color), var(--secondary-color)); } h1 { color: var(--secondary-color); font-size: 2.8rem; text-shadow: 0 0 10px rgba(255, 215, 0, 0.3); margin-bottom: 10px; } .subtitle { color: var(--accent-color); font-size: 1.2rem; opacity: 0.9; } .course-info { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 25px; margin-bottom: 30px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } .course-info h2 { color: var(--secondary-color); margin-bottom: 15px; font-size: 1.8rem; } .course-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-bottom: 40px; } .card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 25px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); } .card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(255, 215, 0, 0.1); border-color: var(--secondary-color); } .card h3 { color: var(--secondary-color); margin-bottom: 15px; font-size: 1.4rem; display: flex; align-items: center; gap: 10px; } .card h3 i { color: var(--accent-color); } .question-section { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 30px; margin-bottom: 40px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } .question { margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); } .question:last-child { border-bottom: none; } .question-title { color: var(--text-color); font-size: 1.2rem; margin-bottom: 20px; line-height: 1.5; } .options { display: flex; flex-direction: column; gap: 12px; } .option { display: flex; align-items: center; padding: 15px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; transition: all 0.2s ease; } .option:hover { background: rgba(255, 215, 0, 0.1); border-color: var(--accent-color); } .option.selected { background: rgba(255, 215, 0, 0.15); border-color: var(--secondary-color); } .option.correct { background: rgba(46, 125, 50, 0.2); border-color: var(--correct-color); } .option.wrong { background: rgba(198, 40, 40, 0.2); border-color: var(--wrong-color); } .option input { margin-right: 12px; transform: scale(1.2); } .results { text-align: center; padding: 30px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; margin-top: 30px; } .score { font-size: 3rem; color: var(--secondary-color); font-weight: bold; margin: 20px 0; text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); } .action-buttons { display: flex; gap: 20px; justify-content: center; margin-top: 30px; } button { padding: 14px 32px; background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%); color: var(--primary-color); border: none; border-radius: 6px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; } button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 215, 0, 0.3); } button:active { transform: translateY(0); } button.secondary { background: transparent; border: 2px solid var(--secondary-color); color: var(--secondary-color); } button.secondary:hover { background: rgba(255, 215, 0, 0.1); } .hidden { display: none; } .highlight { color: var(--secondary-color); font-weight: bold; } .answer-feedback { margin-top: 10px; padding: 10px; border-radius: 6px; font-size: 0.95rem; } .answer-feedback.correct { background: rgba(46, 125, 50, 0.1); border-left: 4px solid var(--correct-color); color: #A5D6A7; } .answer-feedback.wrong { background: rgba(198, 40, 40, 0.1); border-left: 4px solid var(--wrong-color); color: #EF9A9A; } .decoration { position: fixed; pointer-events: none; z-index: -1; } .decoration-1 { top: 10%; right: 10%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%); } .decoration-2 { bottom: 10%; left: 10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(197, 165, 114, 0.05) 0%, transparent 70%); } @media (max-width: 768px) { .container { padding: 15px; } h1 { font-size: 2rem; } .action-buttons { flex-direction: column; } button { width: 100%; } } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> </head> <body> <!-- 装饰元素 --> <div class="decoration decoration-1"></div> <div class="decoration decoration-2"></div> <div class="container"> <header> <h1><i class="fas fa-code"></i> Lua编程第一课 - 课后测试</h1> <p class="subtitle">检验你对数据类型、变量、函数等基础知识的掌握程度</p> </header> <section class="course-info"> <h2><i class="fas fa-book-open"></i> 本节课核心知识点</h2> <p>本节课主要讲解了Lua编程语言的基础知识，包括：Lua与TXT的区别、VSCode开发环境配置、数据类型、变量声明、函数基础、参数传递、注释方法等核心概念。</p> </section> <section class="course-content"> <div class="card"> <h3><i class="fas fa-laptop-code"></i> 开发环境</h3> <p>必须使用VSCode编辑器，安装Lua插件和Lua Debug插件，使用UTF-8编码避免乱码问题。</p> </div> <div class="card"> <h3><i class="fas fa-cogs"></i> 数据类型</h3> <p>Lua有8种数据类型：nil、boolean、number、string、function、table、userdata、thread。</p> </div> <div class="card"> <h3><i class="fas fa-project-diagram"></i> Lua vs TXT</h3> <p>Lua是编译执行，性能是TXT的50倍以上，支持面向对象，有自动垃圾回收机制，可扩展性更强。</p> </div> </section> <section class="question-section"> <h2><i class="fas fa-question-circle"></i> 选择题 (每题10分，共100分)</h2> <div class="question" data-correct="B"> <div class="question-title">1. 关于Lua与TXT的主要区别，以下哪项描述是正确的？</div> <div class="options"> <label class="option"> <input type="radio" name="q1" value="A"> <span>A. Lua是纯文本逐行解释执行，TXT是编译执行</span> </label> <label class="option"> <input type="radio" name="q1" value="B"> <span>B. Lua是编译执行，性能是TXT的50倍以上，支持面向对象编程</span> </label> <label class="option"> <input type="radio" name="q1" value="C"> <span>C. TXT有自动垃圾回收机制，Lua没有内存管理</span> </label> <label class="option"> <input type="radio" name="q1" value="D"> <span>D. Lua只能用于游戏开发，TXT可用于各种应用场景</span> </label> </div> <div class="answer-feedback"></div> </div> <div class="question" data-correct="C"> <div class="question-title">2. Lua中print函数在游戏开发中无法直接看到输出，应该使用什么函数？</div> <div class="options"> <label class="option"> <input type="radio" name="q2" value="A"> <span>A. echo()</span> </label> <label class="option"> <input type="radio" name="q2" value="B"> <span>B. output()</span> </label> <label class="option"> <input type="radio" name="q2" value="C"> <span>C. RELEASE_print()</span> </label> <label class="option"> <input type="radio" name="q2" value="D"> <span>D. debug()</span> </label> </div> <div class="answer-feedback"></div> </div> <div class="question" data-correct="D"> <div class="question-title">3. 在VSCode中编写Lua代码，推荐安装的插件不包括以下哪个？</div> <div class="options"> <label class="option"> <input type="radio" name="q3" value="A"> <span>A. Lua (由sumneko开发)</span> </label> <label class="option"> <input type="radio" name="q3" value="B"> <span>B. Lua Debug</span> </label> <label class="option"> <input type="radio" name="q3" value="C"> <span>C. 中英文转换插件</span> </label> <label class="option"> <input type="radio" name="q3" value="D"> <span>D. Python插件</span> </label> </div> <div class="answer-feedback"></div> </div> <div class="question" data-correct="C"> <div class="question-title">4. Lua中注释一行代码的正确方式是？</div> <div class="options"> <label class="option"> <input type="radio" name="q4" value="A"> <span>A. // 这是一行注释</span> </label> <label class="option"> <input type="radio" name="q4" value="B"> <span>B. /* 这是一行注释 */</span> </label> <label class="option"> <input type="radio" name="q4" value="C"> <span>C. -- 这是一行注释</span> </label> <label class="option"> <input type="radio" name="q4" value="D"> <span>D. # 这是一行注释</span> </label> </div> <div class="answer-feedback"></div> </div> <div class="question" data-correct="B"> <div class="question-title">5. Lua中多行注释的正确语法是？</div> <div class="options"> <label class="option"> <input type="radio" name="q5" value="A"> <span>A. /* 注释内容 */</span> </label> <label class="option"> <input type="radio" name="q5" value="B"> <span>B. --[[ 注释内容 ]]</span> </label> <label class="option"> <input type="radio" name="q5" value="C"> <span>C. <!-- 注释内容 --></span> </label> <label class="option"> <input type="radio" name="q5" value="D"> <span>D. ''' 注释内容 '''</span> </label> </div> <div class="answer-feedback"></div> </div> <div class="question" data-correct="C"> <div class="question-title">6. 在Lua中，以下哪个不是基本数据类型？</div> <div class="options"> <label class="option"> <input type="radio" name="q6" value="A"> <span>A. nil（空类型）</span> </label> <label class="option"> <input type="radio" name="q6" value="B"> <span>B. table（表类型）</span> </label> <label class="option"> <input type="radio" name="q6" value="C"> <span>C. array（数组类型）</span> </label> <label class="option"> <input type="radio" name="q6" value="D"> <span>D. function（函数类型）</span> </label> </div> <div class="answer-feedback"></div> </div> <div class="question" data-correct="A"> <div class="question-title">7. 在游戏开发中，玩家奔跑时触发的事件处理流程，正确的顺序是？</div> <div class="options"> <label class="option"> <input type="radio" name="q7" value="A"> <span>A. 客户端接收 → 服务端验证 → 更新状态 → 触发脚本</span> </label> <label class="option"> <input type="radio" name="q7" value="B"> <span>B. 服务端验证 → 客户端接收 → 触发脚本 → 更新状态</span> </label> <label class="option"> <input type="radio" name="q7" value="C"> <span>C. 触发脚本 → 客户端接收 → 服务端验证 → 更新状态</span> </label> <label class="option"> <input type="radio" name="q7" value="D"> <span>D. 客户端接收 → 触发脚本 → 服务端验证 → 更新状态</span> </label> </div> <div class="answer-feedback"></div> </div> <div class="question" data-correct="B"> <div class="question-title">8. 在Lua中，function关键字的作用是？</div> <div class="options"> <label class="option"> <input type="radio" name="q8" value="A"> <span>A. 定义变量</span> </label> <label class="option"> <input type="radio" name="q8" value="B"> <span>B. 定义函数或代码块</span> </label> <label class="option"> <input type="radio" name="q8" value="C"> <span>C. 定义条件判断</span> </label> <label class="option"> <input type="radio" name="q8" value="D"> <span>D. 定义循环结构</span> </label> </div> <div class="answer-feedback"></div> </div> <div class="question" data-correct="A"> <div class="question-title">9. 在Lua中，局部变量声明的关键字是？</div> <div class="options"> <label class="option"> <input type="radio" name="q9" value="A"> <span>A. local</span> </label> <label class="option"> <input type="radio" name="q9" value="B"> <span>B. var</span> </label> <label class="option"> <input type="radio" name="q9" value="C"> <span>C. let</span> </label> <label class="option"> <input type="radio" name="q9" value="D"> <span>D. const</span> </label> </div> <div class="answer-feedback"></div> </div> <div class="question" data-correct="D"> <div class="question-title">10. 关于Lua函数传参，以下描述正确的是？</div> <div class="options"> <label class="option"> <input type="radio" name="q10" value="A"> <span>A. Lua函数最多只能传递3个参数</span> </label> <label class="option"> <input type="radio" name="q10" value="B"> <span>B. 函数参数必须指定类型</span> </label> <label class="option"> <input type="radio" name="q10" value="C"> <span>C. 参数传递只能通过值传递，不能通过引用传递</span> </label> <label class="option"> <input type="radio" name="q10" value="D"> <span>D. 函数调用时传递的参数与函数定义时的参数按顺序一一对应</span> </label> </div> <div class="answer-feedback"></div> </div> </section> <div class="action-buttons"> <button id="submitBtn"><i class="fas fa-paper-plane"></i> 提交答案</button> <button id="resetBtn" class="secondary"><i class="fas fa-redo"></i> 重新答题</button> </div> <div id="results" class="results hidden"> <h2><i class="fas fa-trophy"></i> 测试结果</h2> <div class="score" id="score">0分</div> <p id="resultText">您答对了 <span class="highlight">0</span> 道题，共10道题</p> <p id="feedback" style="margin-top: 20px;"></p> <button id="retryBtn" class="secondary" style="margin-top: 20px;"><i class="fas fa-sync-alt"></i> 重新测试</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const questions = document.querySelectorAll('.question'); const submitBtn = document.getElementById('submitBtn'); const resetBtn = document.getElementById('resetBtn'); const retryBtn = document.getElementById('retryBtn'); const results = document.getElementById('results'); const scoreEl = document.getElementById('score'); const resultText = document.getElementById('resultText'); const feedbackEl = document.getElementById('feedback'); // 存储正确答案和反馈 const correctAnswers = { q1: { answer: "B", feedback: "正确！Lua是编译执行的脚本语言，性能远超TXT，支持面向对象编程，有自动垃圾回收机制。" }, q2: { answer: "C", feedback: "正确！在游戏开发中需要使用RELEASE_print()函数才能在控制台看到输出，print函数在游戏环境下无法直接显示。" }, q3: { answer: "D", feedback: "正确！Python插件不是Lua开发必需的，必需的是Lua插件、Lua Debug插件和中英文转换插件。" }, q4: { answer: "C", feedback: "正确！Lua使用双横线(--)进行单行注释，这是Lua语言的规范语法。" }, q5: { answer: "B", feedback: "正确！Lua的多行注释使用--[[ 注释内容 ]]语法，这是Lua特有的注释方式。" }, q6: { answer: "C", feedback: "正确！Lua中没有单独的array类型，数组是通过table类型实现的。" }, q7: { answer: "A", feedback: "正确！游戏事件处理的正确流程是：客户端接收用户操作 → 服务端验证 → 更新游戏状态 → 触发相应脚本。" }, q8: { answer: "B", feedback: "正确！function关键字用于定义函数或代码块，是Lua中非常重要的关键字。" }, q9: { answer: "A", feedback: "正确！Lua中使用local关键字声明局部变量，这是Lua变量作用域的基础。" }, q10: { answer: "D", feedback: "正确！Lua函数参数按顺序一一对应传递，不限制参数数量，不需要指定类型，支持多种传递方式。" } }; // 选项点击事件 questions.forEach(question => { const options = question.querySelectorAll('.option'); options.forEach(option => { const radio = option.querySelector('input[type="radio"]'); option.addEventListener('click', () => { // 清除同组的选中状态 options.forEach(opt => opt.classList.remove('selected')); // 设置当前选项为选中 option.classList.add('selected'); radio.checked = true; }); }); }); // 提交答案 submitBtn.addEventListener('click', function() { let score = 0; let correctCount = 0; let answeredAll = true; questions.forEach(question => { const questionId = question.getAttribute('data-correct'); const selectedOption = question.querySelector('input[type="radio"]:checked'); const feedbackEl = question.querySelector('.answer-feedback'); if (!selectedOption) { answeredAll = false; feedbackEl.innerHTML = '<span style="color: #FFD700;">请先选择答案！</span>'; feedbackEl.className = 'answer-feedback'; return; } const selectedValue = selectedOption.value; const correctValue = questionId; const options = question.querySelectorAll('.option'); // 清除所有样式 options.forEach(opt => { opt.classList.remove('correct', 'wrong'); }); if (selectedValue === correctValue) { // 回答正确 score += 10; correctCount++; selectedOption.parentElement.classList.add('correct'); feedbackEl.textContent = correctAnswers['q' + Array.from(questions).indexOf(question) + 1].feedback; feedbackEl.className = 'answer-feedback correct'; } else { // 回答错误 selectedOption.parentElement.classList.add('wrong'); // 显示正确答案 options.forEach(opt => { if (opt.querySelector('input').value === correctValue) { opt.classList.add('correct'); } }); feedbackEl.textContent = '正确答案是: ' + correctValue + ' - ' + correctAnswers['q' + Array.from(questions).indexOf(question) + 1].feedback; feedbackEl.className = 'answer-feedback wrong'; } }); if (!answeredAll) { alert('请完成所有题目后再提交！'); return; } // 显示结果 scoreEl.textContent = score + '分'; resultText.innerHTML = `您答对了 <span class="highlight">${correctCount}</span> 道题，共10道题`; // 根据分数给出评价 let feedback = ''; if (score === 100) { feedback = '🎉 太棒了！满分！您已经完全掌握了本节课的知识点！'; } else if (score >= 80) { feedback = '👍 优秀！您对Lua基础掌握得很好，只有少量知识点需要巩固。'; } else if (score >= 60) { feedback = '👌 不错！您已掌握大部分基础知识，建议复习错题部分。'; } else { feedback = '📚 需要继续努力！建议重新学习本节课内容，特别是错题涉及的知识点。'; } feedbackEl.textContent = feedback; results.classList.remove('hidden'); window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); }); // 重置答案 resetBtn.addEventListener('click', function() { questions.forEach(question => { const options = question.querySelectorAll('.option'); const feedbackEl = question.querySelector('.answer-feedback'); options.forEach(option => { option.classList.remove('selected', 'correct', 'wrong'); const radio = option.querySelector('input[type="radio"]'); radio.checked = false; }); feedbackEl.textContent = ''; feedbackEl.className = 'answer-feedback'; }); results.classList.add('hidden'); }); // 重新测试 retryBtn.addEventListener('click', function() { resetBtn.click(); window.scrollTo({ top: 0, behavior: 'smooth' }); }); // 添加键盘快捷键支持 document.addEventListener('keydown', function(e) { if (e.key === 'Enter' && e.ctrlKey) { submitBtn.click(); } else if (e.key === 'r' && e.ctrlKey) { resetBtn.click(); } }); // 显示键盘快捷键提示 console.log('提示：可以使用 Ctrl+Enter 提交答案，Ctrl+R 重置答案'); }); </script> </body> </html> |
