用HTML，js实现单选题，多选题，计分，报题功能
2024-05-03 05:06:49
现学现做，做一下记录；采用外部js和css，有弹窗问候，姓名填写，单选，多选计分，报出错题；
js部分：
function greet()
{var time=new Date().getHours();if(time<12)alert("Good morning");else if(time<18)alert("Good afternoon");elsealert("Good night");
}function thanks()
{alert("Thanks for your attention.");
}function changeColor(obj)
{obj.style.background="powderblue";
}function coreCount()
{var cores=0;var qestions=document.getElementsByClassName("question")for(var i=0;i<qestions.length;i++){var count=0;var flag=1;var answer=document.getElementsByName("answer"+(i+1));for(var j=0;j<answer.length;j++){if(answer[j].checked){if(answer[j].value*1<0){flag=0;break;}elsecount+=answer[j].value*1;}}if(flag==1)cores+=count;} alert("Your score is "+cores);
}function showWhichWrong()
{var qestions=document.getElementsByClassName("question")for(var i=0;i<qestions.length;i++){var answer=document.getElementsByName("answer"+(i+1));for(var j=0;j<answer.length;j++){if(answer[j].checked){if(answer[j].value*1<=0){x=document.getElementById(i+1);x.style.color="red";}}}}for(var i=0;i<qestions.length;i++){var answer=document.getElementsByName("answer"+(i+1));for(var j=0;j<answer.length;j++){if(!answer[j].checked){if(answer[j].value*1>0){answer[j].style.backgroundColor="red";}}}}
}css部分
h3{text-align:center;}
body{font-family:楷体,sans-serif;font-weight:bold;background-image:url("背景图.jpg");}
#grey{background-color:AliceBlue;}HTML部分
<html><head>
<link rel="stylesheet" type="text/css" href="Exercise2.css" >
<script src="Exercise2.js"></script>
</head><body onload="greet()" ><!-- A introduction of the quiz.-->
<div>
<h3>Chinese ancient poetry</h3>
<p>It's a very easy quiz about ancient poetry.</p>
</div><!-- Collect user information-->
<div>
<form>
<fieldset id="grey">
<legend>Please enter your name and select your sex.</legend>
Your name:<br/>
<input type="text" name="Your name" onfocus="changeColor(this)"><br/>
male
<input type="radio" checked="checked" name="sex",value="male"/>
female
<input type="radio" name="sex",value="male"/><br/>
</filedset>
</form>
</div><!-- the quiz.-->
<form action="",method="post">
<fieldset>
<legend>Chinese ancient poetry quiz</legend><!--part1-->
<fieldset>
<h3>Single choice（6分/题）</h3>
<div id="grey">
<fieldset class ="question">
<p id="1">Qeustion 1: “长风破浪会有时, 直挂云帆济沧海。” 出自下列哪一首诗？</p>
<label><input type="radio" name="answer1" value="6"/>《行路难》</label>
<br />
<label ><input type="radio" name="answer1" value="0"/>《蜀道难》</label>
<br/>
<label ><input type="radio" name="answer1" value="0"/>《长恨歌》</label>
</fieldset><fieldset class ="question">
<p id="2">Qeustion 2: “蓦然回首，那人却在，灯火阑珊处。”出自哪一位诗人？</p>
<label><input type="radio" name="answer2" value="0" />北宋 辛弃疾</label>
<br />
<label id="2"><input type="radio" name="answer2" value="6" />南宋 辛弃疾<label>
<br/>
<label><input type="radio" name="answer2" value="0"/>南宋 李清照</label>
</fieldset><fieldset class ="question">
<p id="3">Qeustion 3:《蜀道难》中“一夫当关,万夫莫开”的关指什么关？ </p>
<label id="3"><input type="radio" name="answer3" value="6" />剑门关</label>
<br />
<label><input type="radio" name="answer3" value="0"/>山海关</label>
<br/>
<label><input type="radio" name="answer3" value="0"/>嘉峪关</label>
</fieldset><fieldset class ="question">
<p id="4">Qeustion 4:“东风不与周郎便，铜雀春深锁二乔”的诗人是谁？是谁要锁二乔 </p>
<label id="4"><input type="radio" name="answer4" value="6"/>杜牧 曹操</label>
<br />
<label><input type="radio" name="answer4" value="0"/>杜甫 曹丕</label>
<br/>
<label><input type="radio" name="answer4" value="0"/>王维 曹操</label>
</fieldset><fieldset class ="question">
<p id="5">Qeustion 5: “诗中有画，画中有诗”是谁赞扬谁的？</p>
<label><input type="radio" name="answer5" value="0"/>范仲淹 王维</label>
<br />
<label><input type="radio" name="answer5" value="0"/>王维 苏轼</label>
<br/>
<label id="5"><input type="radio" name="answer5" value="6"/>苏轼 王维</label>
</fieldset><fieldset class ="question">
<p id="6">Qeustion 6: 《岳阳楼记》中岳阳楼在什么湖附近？</p>
<label><input type="radio" name="answer6" value="0"/>鄱阳湖</label>
<br />
<label id="6"><input type="radio" name="answer6" value="6"/>洞庭湖</label>
<br/>
<label><input type="radio" name="answer6" value="0"/>太湖</label>
</fieldset><fieldset class ="question">
<p id="7">Qeustion 7: 李清照号什么？</p>
<label><input type="radio" name="answer7" value="0" />青莲居士</label>
<br />
<label id="7"><input type="radio" name="answer7" value="6"/>易安居士</label>
<br/>
<label><input type="radio" name="answer7" value="0"/>香山居士</label>
</fieldset><fieldset class ="question">
<p id="8">Qeustion 8:《世说新语》中谢太傅的侄女，侄子分别是怎么咏雪的？他们属于哪一个朝代？ </p>
<label><input type="radio" name="answer8" value="0"/>撒盐空中差可拟 未若柳絮因风起 西晋</label>
<br />
<label id="8"><input type="radio" name="answer8" value="6"/>未若柳絮因风起 撒盐空中差可拟 东晋</label>
<br/>
<label><input type="radio" name="answer8" value="0"/>未若柳絮因风起 撒盐空中差可拟 宋</label>
</fieldset><fieldset class ="question">
<p id="9">Qeustion 9:夸父出自 </p>
<label id="9"><input type="radio" name="answer9" value="6"/>《山海经》</label>
<br />
<label><input type="radio" name="answer9" value="0"/>《搜神记》</label>
<br/>
<label><input type="radio" name="answer9" value="0"/>《封神演义》</label>
</fieldset>
</div>
</fieldset><fieldset>
<h3>Multipe choice（10，11题每题15分，12题16分。 错选不得分）</h3 >
<div id="grey">
<fieldset class ="question">
<p id="10">Qeustion 10: 关于《琵琶行》描述正确的有</p>
<input type="checkbox" name="answer10" value="5"/><span id="10">作者杜甫</span>
<br />
<input type="checkbox" name="answer10" value="5"/><span id="10">有名句千呼万唤始出来，犹抱琵琶半遮面”</span>
<br/>
<input type="checkbox" name="answer10" value="5"/><span id="10">作者左迁</span>
<br/>
<input type="checkbox" name="answer10" value="-1"/><span>作者杜牧</span>
</fieldset>
<fieldset class ="question">
<p id="11">Qeustion 11: 关于李白正确的描述</p>
<input type="checkbox" name="answer11" value="7"/><span id="11">被誉为“诗仙”</span>
<br />
<input type="checkbox" name="answer11" value="8"/><span id="11">著有《蜀道难》</span>
<br/>
<input type="checkbox" name="answer11" value="-1"/><span >号易安居士”</span>
<br/>
<input type="checkbox" name="answer11" value="-1"/><span >婉约派诗人</span>
</fieldset>
<fieldset class ="question">
<p id="12">Qeustion 12: 关于苏小妹正确的有</p>
<input type="checkbox" name="answer12" value="-1"/><span >确有其人</span>
<br />
<input type="checkbox" name="answer12" value="6"/><span id="12">传说人物</span>
<br/>
<input type="checkbox" name="answer12" value="4"/><span id="12">精于诗词</span>
<br />
<input type="checkbox" name="answer12" value="6"/><span id="12">传说才女</span>
</fieldset>
</div>
</fieldset>
<button type="button" onclick="coreCount()" >Cores</button>
<button type="button" onclick="showWhichWrong()" >correction</button>
</fieldset></form></body"></html>2020/11/18说明：
关于按钮不生效，是直接复制网页中代码导致出错（具体原因不知道），用复制代码vs code到
可以看到第一个和三个按钮是不工作的，我手打的第二个和第四个是工作的。
测试结果如下，分数alert成功弹出：
用HTML，js实现单选题，多选题，计分，报题功能相关推荐
- vue+element 实现试卷答题功能，单选题 ,多选题，判断题，简答题（2.0版本，2021.3.25更新）
vue+element 实现 试卷答题功能,单选题 ,多选题,判断题,简答题(2.0版本,2021.3.25更新) 文章目录 vue+element 实现 试卷答题功能,单选题 ,多选题,判断题,简答 ...
- js运算符单竖杠“|”的用法和作用及js数据处理
js运算符单竖杠"|"的作用 很多朋友都对双竖杠"||",了如指掌,因为这个经常用到.但是大家知道单竖杠吗?今天有个网友QQ问我,我的 javascript实用 ...
- 项目开发中常用JS表单取值方法
项目开发中常用JS表单取值方法 一.常用表单基本取值方法(form1为表单名称,TextBox1为控件ID,以文本框为例,html控件与web服务器控件是一样的) 1.form1.Te ...
- anjular.js表单验证实例
应用声明,控制器 <form action="" method="post" id="myForm" name="logFo ...
- js表单提交,面向对象
一.js表单验证之后再提交 1.普通按钮onclick函数调用表单的submit()函数 <input type=button name="submit1" value=&q ...
- 毕业设计计算机选题意义怎么写,毕业设计(论文)选题 毕业论文选题研究意义怎么写...
[论文写作必看]100篇优秀的毕业设计(论文)选题经验总结,让您的学术论文[便捷完稿]!强力解决您的毕业论文选题研究意义怎么写的写作难题! 1.选题原则 (1) 在充分注意满足教学要求和对学生技能训练 ...
- 通用的JS表单验证插件代码
一个通用的JS表单验证插件代码.使用方法:第一步:需设定表单项数据类型,第二步:实例表单验证,验证错误提示说明(程序有自带相关错误提示,可自定义每项验证错误提示时文本,只需添加msg). [task] ...
- JS表单验证(HTML+CSS+JS)小实例【详细教程】
前言 大家好,分享一个HTML+CSS+JS表单校验,包括页面的简单布局,样式渲染,还有基础的JS校验方法.希望大家喜欢!哈哈 一.效果图 二.介绍 图标库使用Element-UI <!-- 引 ...
- js的单双引号嵌套问题
js的单双引号嵌套问题 js中单引号和双引号可以相互嵌套,但要遵循一定的规则: 单引号内只能嵌套双引号.双引号内只能嵌套单引号 如果想在双引号内再嵌套双引号,里面的双引号需要进行转义,如:\" ...
最新文章
- python网上课程-python完整课程
- hadoop jar包_Hadoop学习之路(5)Mapreduce程序完成wordcount
- Jquery 小技巧
- 准备离职,工作的一些细节记录
- HDU4268 2012ACM长春赛区网络赛 Alice and Bob
- sqlplus连mysql库_sqlplus连接数据库
- 如何恢复误删的注册表
- 单号自动识别查询 支持一键复制导出
- 使用cookie模拟登陆豆瓣影评
- Qzone 超级补丁热修复方案原理
- 将自家的位置标注到地图上(51ditu.com)
- centos-基本命令
- 尚硅谷-宋红康-MySQL高级性能篇
- Java小程序，编写一个迷你DVD租借系统（控制台输出）
- 中国电子驻车制动器（EPB）行业研究与投资预测报告（2022版）
- 滴水逆向三期实践10：动态链接库
- 如何分析上市公司利润表？
- J2ME实现手机振动器
- 福利！再也不用熬夜通宵制作word简历了！5套简历送给需要的你
- 读书笔记！《万历十五年》思维导图分享