版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36718690/article/details/77917007
现学现做，做一下记录；采用外部js和css，有弹窗问候，姓名填写，单选，多选计分，报出错题；
js部分：
function greet()
{
var time=new Date().getHours();
if(time<12)
alert("Good morning");
else if(time<18)
alert("Good afternoon");
else
alert("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;
}
else
count+=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";
}
}
}
}
}h3{text-align:center;}
body{
font-family:楷体,sans-serif;
font-weight:bold;
background-image:url("背景图.jpg");
}
#grey{background-color:AliceBlue;}<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>