AI生成式探究学习教学辅助设计单-6.3随机提问_第1页
AI生成式探究学习教学辅助设计单-6.3随机提问_第2页
AI生成式探究学习教学辅助设计单-6.3随机提问_第3页
AI生成式探究学习教学辅助设计单-6.3随机提问_第4页
AI生成式探究学习教学辅助设计单-6.3随机提问_第5页
已阅读5页，还剩7页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

AI生成式探究学习教学辅助设计单使用AI名称：DeepSeek班级：学生姓名：子任务名称提示词AI的回应对AI回应的评价我的收获第六模块网站页面交互（JavaScript）6.3学生随机提问程序的制作使用HTML5，CSS3和JavaScript。完成学生随机提问程序的制作，给出案例代码。 以下是一个使用HTML5、CSS3和JavaScript实现的学生随机提问程序案例代码：```html<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>课堂随机提问系统</title><style>body{font-family:'Arial',sans-serif;background:#f0f2f5;display:flex;flex-direction:column;align-items:center;min-height:100vh;margin:0;padding:20px;}.container{background:white;padding:30px;border-radius:15px;box-shadow:04px6pxrgba(0,0,0,0.1);width:90%;max-width:600px;}h1{color:#2c3e50;text-align:center;margin-bottom:30px;}#student-list{width:100%;height:200px;padding:10px;margin-bottom:20px;border:2pxsolid#3498db;border-radius:8px;resize:vertical;}.button-container{text-align:center;margin:20px0;}button{background:#3498db;color:white;border:none;padding:12px30px;border-radius:25px;cursor:pointer;font-size:16px;transition:all0.3sease;box-shadow:02px4pxrgba(0,0,0,0.2);}button:hover{background:#2980b9;transform:translateY(-2px);box-shadow:04px8pxrgba(0,0,0,0.2);}button:disabled{background:#bdc3c7;cursor:not-allowed;}#result{text-align:center;font-size:24px;margin:20px0;min-height:60px;padding:15px;border-radius:8px;background:#ecf0f1;transition:all0.3sease;}#result.highlight{background:#2ecc71;color:white;transform:scale(1.05);}.rolling-animation{animation:roll0.1sinfinite;}@keyframesroll{0%{transform:translateY(0);}50%{transform:translateY(-5px);}100%{transform:translateY(0);}}</style></head><body><divclass="container"><h1>🎓课堂随机提问系统</h1><textareaid="student-list"placeholder="请输入学生姓名，每行一个..."></textarea><divclass="button-container"><buttononclick="startRandomSelection()">开始随机提问</button></div><divid="result">👉准备就绪</div></div><script>letisRolling=false;letcurrentInterval=null;functionstartRandomSelection(){if(isRolling)return;conststudents=document.getElementById('student-list').value.split('\n').map(s=>s.trim()).filter(s=>s!=='');if(students.length===0){alert('请先输入学生名单！');return;}isRolling=true;constresultDiv=document.getElementById('result');resultDiv.classList.add('rolling-animation');letcount=0;currentInterval=setInterval(()=>{//随着时间增加间隔，制造减速效果if(count<15){resultDiv.textContent=students[Math.floor(Math.random()*students.length)];count++;}else{clearInterval(currentInterval);constfinalStudent=students[Math.floor(Math.random()*students.length)];resultDiv.textContent=`🎉选中：${finalStudent}`;resultDiv.classList.remove('rolling-animation');resultDiv.classList.add('highlight');setTimeout(()=>{resultDiv.classList.remove('highlight');isRolling=false;},2000);}},50+count*5);//动态调整间隔时间}</script></body></html>```###主要功能说明：1.**界面设计**：-使用现代扁平化设计风格-响应式布局，适配不同屏幕尺寸-友好的输入提示和状态显示-按钮交互动画效果2.**核心功能**：-支持多行输入学生姓名（每行一个）-自动过滤空行和空白字符-随机选择动画效果（逐渐减速）-选中后高亮显示结果-防止重复点击3.**技术亮点**：-CSS3动画过渡效果-动态间隔时间实现减速动画-输入内容实时过滤处理-友好的交互反馈-响应式布局设计###使用说明：1.在文本框中输入学生姓名（每行一个）2.点击"开始随机提问"按钮3.观察随机选择动画4.最终结果会高亮显示5.可以随时修改名单进行下一次随机选择该程序适用于课堂提问、抽奖活动、随机点名等多种场景，具有较好的用户体验和视觉效果。代码结构清晰，可根据实际需求进一步扩展功能（如添加音效、历史记录等）。DeepSeek非常严谨的使用了提示词当中的web前端技术，完成了案例的制作和代码的输出。将代码

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论