制作页面(html)选择题

最新推荐文章于 2022-05-27 10:31:19 发布

jjruanlili

最新推荐文章于 2022-05-27 10:31:19 发布

阅读量1.3w

点赞数 17

分类专栏： html 文章标签： html5 css

本文链接：https://blog.csdn.net/jjruanlili/article/details/112272747

版权

HTML CSS JavaScript 选择题交互设计

关键词由CSDN通过智能技术生成

html 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

第一版

题目和选项

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>选择题choice question</title>
<style>
.divCss{
	margin-bottom: 10px;
}
.olCss{
	padding-left: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
}
</style>
</head>
<body>
<!-- 
type默认为数字,其他类型有英文字母A/a,罗马字母I/i,
start可以设置起始标记 下标从1开始 
-->
<div class="divCss">
1.你现在处于什么地方?()
	<ol type="A" start="" class="olCss" >
		<li class="liRight">银河系</li>
		<li class="liRight">太阳系</li>
		<li class="liRight">地球</li>
	</ol>
</div>
<div class="divCss">
2.你现在处于什么地方?()
	<ol type="A" start="" class="olCss" >
		<li class="liRight">银河系</li>
		<li class="liRight">太阳系</li>
		<li class="liRight">地球</li>
	</ol>
</div>
</body>
</html>

效果图如下：

小插曲：之前一直把题目内容放<ol>标签内，怎么都调不成对齐，最后妥协了放外面。

第二版

选项前加单选框、多选框

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>选择题choice question</title>
<style>
.divCss{
	margin-bottom: 10px;
}
.olCss{
	padding-left: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
	margin-left: 40px;
}
.inputClass {
	float:left;
	margin-left: -50px;
}
.liRight {
	
}
</style>
</head>
<body>
<!-- 
type默认为数字,其他类型有英文字母A/a,罗马字母I/i,
start可以设置起始标记 下标从1开始 
-->
<div class="divCss">
1.你现在处于什么地方?()
	<ol type="A" start="" class="olCss" >
		<input class="inputClass" type="radio" name="place" value="A" checked="checked" /><li class="liRight">银河系</li>
		<input class="inputClass" type="radio" name="place" value="B" /><li class="liRight">太阳系</li>
		<input class="inputClass" type="radio" name="place" value="C" /><li class="liRight">地球</li>
	</ol>
</div>
<div class="divCss">
2.你现在处于什么地方?()
	<ol type="A" start="" class="olCss" >
		<input class="inputClass" type="checkbox" name="place" value="A" checked="checked" /><li class="liRight">银河系</li>
		<input class="inputClass" type="checkbox" name="place" value="B" checked="checked" /><li class="liRight">太阳系</li>
		<input class="inputClass" type="checkbox" name="place" value="C" /><li class="liRight">地球</li>
	</ol>
</div>
</body>
</html>

效果图：

第三版

提交答案

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>选择题choice question</title>
<style>
.divCss{
	margin-bottom: 10px;
}
.olCss{
	padding-left: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
	margin-left: 40px;
}
.inputClass {
	float:left;
	margin-left: -50px;
}
.liRight {
	
}
</style>
</head>
<body>
<!-- 
type默认为数字,其他类型有英文字母A/a,罗马字母I/i,
start可以设置起始标记 下标从1开始 
-->
<form>
	<div class="divCss">
	1.你现在处于什么地方?()
		<ol type="A" start="" class="olCss" name="single" >
			<input class="inputClass" type="radio" name="place1" value="A" checked="checked" /><li class="liRight">银河系</li>
			<input class="inputClass" type="radio" name="place1" value="B" /><li class="liRight">太阳系</li>
			<input class="inputClass" type="radio" name="place1" value="C" /><li class="liRight">地球</li>
		</ol>
	</div>
	<div class="divCss">
	2.你现在处于什么地方?()
		<ol type="A" start="" class="olCss" name="single" >
			<input class="inputClass" type="radio" name="place2" value="A"  /><li class="liRight">银河系</li>
			<input class="inputClass" type="radio" name="place2" value="B" checked="checked" /><li class="liRight">太阳系</li>
			<input class="inputClass" type="radio" name="place2" value="C" /><li class="liRight">地球</li>
		</ol>
	</div>
	<div class="divCss">
	3.你现在处于什么地方?()
		<ol type="A" start="" class="olCss" name="multi" >
			<input class="inputClass" type="checkbox" name="place3" value="A" checked="checked" /><li class="liRight">银河系</li>
			<input class="inputClass" type="checkbox" name="place3" value="B" checked="checked" /><li class="liRight">太阳系</li>
			<input class="inputClass" type="checkbox" name="place3" value="C" /><li class="liRight">地球</li>
		</ol>
	</div>
	<div class="divCss">
	4.你现在处于什么地方?()
		<ol type="A" start="" class="olCss" name="multi" >
			<input class="inputClass" type="checkbox" name="place4" value="A" /><li class="liRight">银河系</li>
			<input class="inputClass" type="checkbox" name="place4" value="B" checked="checked" /><li class="liRight">太阳系</li>
			<input class="inputClass" type="checkbox" name="place4" value="C" checked="checked" /><li class="liRight">地球</li>
		</ol>
	</div>
	<input type="button" value="提交答案" onclick="sendMsg()" />
</form>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
function sendMsg(){
	//题目数
	var singleSize = $("[name='single']").length;
	var multiSize = $("[name='multi']").length;
	//答案数组
	var answerArr = new Array(singleSize+multiSize);
	//单选答案
	$("[name='single']").each(function(index){
		//放入答案
		var answer = $("input[name='place"+(index+1)+"']:checked").val();
		answerArr[index] = answer;
	})
	//多选答案
	$("[name='multi']").each(function(index){
		//拼接多选答案
		var multiAnswer = "";
		$("input[name='place"+(index+singleSize+1)+"']:checked").each(function(){
			if ("checked" == $(this).attr("checked")) {
				//拼接答案
				multiAnswer = multiAnswer+$(this).attr('value');
			}
		})
		//放入答案
		answerArr[index+singleSize] = multiAnswer;
	})
	//在调试模式下的console中查看输出
	console.log(answerArr);
	//发送答案到服务器
}
</script>
</body>
</html>

效果图：