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;
mar