创建一个选择题页面涉及到HTML、CSS和JavaScript的结合使用，下面是一个简单的示例，展示如何制作一个包含单选按钮的选择题页面。
1、创建HTML结构：
我们需要创建一个HTML页面，用于展示问题和选项，以下是一个简单的HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择题页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="question-container">
<h2>问题 1: 以下哪个是HTML的父元素语言？</h2>
<form id="quizForm">
<input type="radio" name="question1" value="a"> A. HTML
<input type="radio" name="question1" value="b"> B. CSS
<input type="radio" name="question1" value="c"> C. JavaScript
<input type="radio" name="question1" value="d"> D. PHP
</form>
</div>
<button onclick="submitAnswer()">提交答案</button>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
2、添加CSS样式：
为了使页面看起来更美观，我们可以添加一些CSS样式，创建一个名为styles.css的文件，并添加以下样式：
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
padding: 20px;
}
.question-container {
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 10px;
}
input[type="radio"] {
margin-right: 10px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
3、使用JavaScript处理答案：
我们需要使用JavaScript来处理用户的输入，并显示结果，创建一个名为script.js的文件，并添加以下代码：
function submitAnswer() {
var form = document.getElementById('quizForm');
var radios = form.getElementsByName('question1');
var correctAnswer = 'a'; // 正确答案
var userAnswer = '';
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
userAnswer = radios[i].value;
break;
}
}
if (userAnswer === correctAnswer) {
document.getElementById('result').innerHTML = '恭喜你，回答正确！';
} else {
document.getElementById('result').innerHTML = '很遗憾，回答错误，正确答案是 A. HTML';
}
}
这个简单的选择题页面包含了一个问题、四个单选按钮和一个提交按钮，用户选择一个答案后，点击提交按钮，JavaScript会检查答案是否正确，并在页面上显示结果，你可以根据需要添加更多的问题和选项。