我正在尝试创建一个测验应用程序，应该有5个问题，从问题库中随机选择。但是，应该有三种不同的方式来回答这些问题:
- 至少有一个应该使用单选按钮
- 至少有一个应该使用下拉菜单
- 至少有一个应该使用文本输入
我如何创建这个?我还没有JS文件，我不介意你创建一个JS文件。
@import url(https://fonts.googleapis.com/css?family=Poppins:100,200,300,regular,500,600,700,800,900);
:root {
--background: rgb(29, 26, 26);
--text-color: rgb(255, 255, 255);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--background);
font-family: 'Poppins', sans-serif;
}
.quiz-container {
margin: 30px auto;
width: 70%;
text-align: center;
}
.header h3 {
color: var(--text-color);
font-size: 30px;
}
.question-tog {
display: flex;
justify-content: space-between;
align-items: center;
width: 50%;
margin: 0 auto;
}
button {
padding: 8px 35px;
cursor: pointer;
border-radius: 5px;
font-size: 15px;
display: flex;
align-items: center;
gap: 20px;
}
i {
font-size: 25px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Quiz App</title>
<link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="/quiz/style.css">
</head>
<body>
<div class="quiz-container">
<div class="header"><h3>Interactive Quiz App</h3></div>
<div class="quiz">
</div>
<div class="question-tog">
<button class="prev"> <span>Prev</span> <i class='bx bx-left-arrow-alt'></i></button>
<button class="next"> <span>Next</span> <i class='bx bx-right-arrow-alt'></i></button>
</div>
</div>
</body>
</html>为了创建以下测试，您需要使用js数组。将存储一组随机选择的问题。另一件事是你需要使用js模块跨页面发送数据。这就是你可以做到的。
我宁愿建议你使用php会话，它们更简单，更容易使用。