本关任务:创建一组单选框,name属性值为question。 要求:对每一个选项使用<p>标签进行换行。 注:这里及后面遇到的文本都是中文符号,比如:,是中文符号的:。
时间: 2024-10-02 11:00:35 浏览: 33
要在HTML中创建一组单选框,每个单选按钮都有"name"属性值为"question",并且选项之间用 `<p>` 标签进行换行,可以按照以下结构编写:
```html
<form>
<label for="question1">
<input type="radio" id="question1" name="question" value="选项1">
<p>选项1</p>
</label><br>
<label for="question2">
<input type="radio" id="question2" name="question" value="选项2">
<p>选项2</p>
</label><br>
<!-- 添加更多的单选框,替换 "选项X" 和对应的值 -->
<label for="questionX">
<input type="radio" id="questionX" name="question" value="选项X">
<p>选项X</p>
</label><br>
</form>
```
在这个例子中,`for` 属性用于关联 `<label>` 标签和其对应的 `input` 单选框,这样用户点击标签也可以选择相应的选项。每一对单选框都需要有自己的 `id` 和 `value`,并且它们都共享相同的 `name`。
相关问题
创建一组单选框,name属性值为question。 要求:对每一个选项使用<p>标签进行换行
可以使用以下代码创建这样的单选框:
```html
<form>
<input type="radio" name="question" value="option1"><p>选项1</p>
<input type="radio" name="question" value="option2"><p>选项2</p>
<input type="radio" name="question" value="option3"><p>选项3</p>
<input type="radio" name="question" value="option4"><p>选项4</p>
</form>
```
这样的代码会创建一个包含四个单选框的表单,每个选项都在一个 `<p>` 标签中,使得每个选项都在新的一行上显示。所有单选框的 `name` 属性都设置为 `"question"`,这样它们就可以被视为同一组选项。
建立三个页面,第一个页面有一个用户名输入框和一个课程选择框,然后有一个提交按钮,通过提交后可以把输入内容传递到第二个页面中去; 第二个页面分析第一个页面传过来的课程参数,使用jquery的ajax方法读取不同的txt文件,把文件中的试题读取出来,使用createElement建立表单标签、 控件,设置其属性值和样式,能够把用户的输入信息和选择题的答案传递到第三个页面中; 第三个页面对第二个页面传过来的参数进行分析,与正确的答案进行比较,单选题正确一道给2分,多选题正确一道给5分,最后显示总分和用户得了多少分。并展示做错的题目与正确答案。
好的,这是一个比较完整的项目,需要用到前端的 HTML、CSS、JavaScript,还要用到后端的 PHP 等技术,需要分步骤来完成。
## 第一步:建立第一个页面
首先,在一个新建的 HTML 文件中,建立第一个页面的 HTML 结构:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择课程和输入用户名</title>
</head>
<body>
<form id="form1">
<label for="username">请输入用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="course">请选择课程:</label>
<select id="course" name="course">
<option value="course1">课程1</option>
<option value="course2">课程2</option>
<option value="course3">课程3</option>
</select><br><br>
<input type="button" value="提交" id="submit">
</form>
</body>
</html>
```
这里使用了表单元素,有一个输入框和一个下拉框,还有一个提交按钮。需要注意的是,提交按钮的类型是 `button`,而不是 `submit`,这是因为我们要使用 AJAX 提交表单,需要自己写 JavaScript 代码来处理。
## 第二步:编写 JavaScript 代码
在 HTML 文件的 `<head>` 标签中添加如下代码:
```html
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
// 点击提交按钮时触发
$("#submit").click(function() {
var username = $("#username").val();
var course = $("#course").val();
// 使用 AJAX 提交表单数据
$.ajax({
type: "POST",
url: "page2.php",
data: {
username: username,
course: course
},
success: function(msg) {
// 跳转到第二个页面
window.location.href = "page2.php";
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest.status);
console.log(XMLHttpRequest.readyState);
console.log(textStatus);
}
});
});
});
</script>
```
这里使用了 jQuery 库来处理 DOM 和 AJAX 操作。当用户点击提交按钮时,会获取用户名和课程的值,然后使用 AJAX 提交到第二个页面 `page2.php`,并在成功的回调函数中跳转到该页面。
## 第三步:建立第二个页面
在同一目录下新建一个 `page2.php` 文件,用于处理第二个页面的逻辑。
首先,根据第一个页面提交过来的课程参数,读取对应的试题文件。假设我们有三个课程,对应的试题文件分别为 `course1.txt`、`course2.txt` 和 `course3.txt`。
```php
<?php
$course = $_POST['course'];
$file = fopen($course . '.txt', 'r');
$questions = array();
while (!feof($file)) {
$line = fgets($file);
$question = explode(',', $line);
$questions[] = $question;
}
fclose($file);
?>
```
这里使用了 PHP 的文件读写函数 `fopen` 和 `fgets`,将试题文件中的每一行读取出来,再使用 `explode` 函数将题目和选项分割开来,存储到一个数组中。
接下来,根据读取到的试题动态生成 HTML 表单元素。这里只演示单选题的代码,多选题类似,可以自行实现。
```php
<?php foreach ($questions as $index => $question): ?>
<p><?php echo $index + 1 . '.' . $question[0]; ?></p>
<ol>
<?php for ($i = 1; $i <= 4; $i++): ?>
<li>
<input type="radio" name="answer<?php echo $index; ?>" value="<?php echo $i; ?>">
<?php echo $question[$i]; ?>
</li>
<?php endfor; ?>
</ol>
<?php endforeach; ?>
```
这里使用了 PHP 的 `foreach` 循环和 `for` 循环,动态生成了题目和选项。需要注意的是,每个选项的 `name` 属性都不同,以便后面 JavaScript 代码处理用户的选择。
最后,在页面底部添加一个提交按钮,用于提交答案和跳转到第三个页面。
```html
<input type="button" value="提交" id="submit">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
// 点击提交按钮时触发
$("#submit").click(function() {
var username = "<?php echo $_POST['username']; ?>";
var course = "<?php echo $_POST['course']; ?>";
var answers = [];
// 获取用户答案
<?php foreach ($questions as $index => $question): ?>
var answer<?php echo $index; ?> = $('input[name="answer<?php echo $index; ?>"]:checked').val();
answers.push(answer<?php echo $index; ?>);
<?php endforeach; ?>
// 使用 AJAX 提交表单数据
$.ajax({
type: "POST",
url: "page3.php",
data: {
username: username,
course: course,
answers: answers
},
success: function(msg) {
// 跳转到第三个页面
window.location.href = "page3.php";
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest.status);
console.log(XMLHttpRequest.readyState);
console.log(textStatus);
}
});
});
});
</script>
```
这里使用了第一个页面提交过来的用户名和课程参数,以及用户的答案,使用 AJAX 提交到第三个页面,并在成功的回调函数中跳转到该页面。
## 第四步:建立第三个页面
在同一目录下新建一个 `page3.php` 文件,用于处理第三个页面的逻辑。
首先,根据第二个页面提交过来的答案,与正确答案进行比较,计算用户得分。
```php
<?php
$course = $_POST['course'];
$file = fopen($course . '.txt', 'r');
$answers = array();
while (!feof($file)) {
$line = fgets($file);
$answer = explode(',', $line);
$answers[] = $answer[5];
}
fclose($file);
$score = 0;
$wrong_questions = array();
foreach ($_POST['answers'] as $index => $answer) {
if ($answer == $answers[$index]) {
if ($answer <= 4) {
$score += 2; // 单选题得 2 分
} else {
$score += 5; // 多选题得 5 分
}
} else {
$wrong_questions[] = $index + 1;
}
}
?>
```
这里使用了 PHP 的数组和循环,将正确答案存储到一个数组中,然后遍历用户的答案,与正确答案进行比较,计算用户得分,同时记录做错的题目。
接下来,根据用户的得分和做错的题目,动态生成 HTML 内容,并展示给用户。
```php
<p>你的得分是:<?php echo $score; ?></p>
<?php if (!empty($wrong_questions)): ?>
<p>你做错了以下题目:</p>
<ul>
<?php foreach ($wrong_questions as $index): ?>
<li><?php echo $index; ?></li>
<?php endforeach; ?>
</ul>
<?php else: ?>
<p>你没有做错任何题目!</p>
<?php endif; ?>
```
这里使用了 PHP 的条件语句和循环,根据用户的得分和做错的题目,动态生成了 HTML 内容。
## 总结
这是一个比较完整的项目,需要用到前端的 HTML、CSS、JavaScript,还要用到后端的 PHP 等技术。通过这个项目,我们可以学习到如何使用 AJAX 提交表单数据,并且动态生成 HTML 内容。同时,也可以学习到如何使用 PHP 处理表单数据,进行文件读写操作,以及数组、循环等基本语法。
阅读全文