AI生成式探究学习教学辅助设计单-6.3随机提问.docx

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