简单的答题网页

chrome是写js的神器啊

http://blog.sina.com.cn/s/blog_6db312f10101ac8p.html 

后面懒得写下去了，东西打包了，

http://download.youkuaiyun.com/detail/artemisrj/8280401

其中填空题其实内容不应该用div包着的，不然又浮动。

因为某个原因写个小脚本，， 设定是学生可以选择自己的答案，选完了答案可以看结果，题目是固定的，答案也是固定了，其实就是静态网页。所以先上html版本的

<form>
			<div class="question">
			<label class="quiz-content">
				题目1
			</label>
			<div class="answers">
				<input type="radio" value="1" name="bb" > 选项1
				<input type="radio" value="2" name="bb" > 选项2
				<input type="radio" value="3" name="bb" > 选项2
				<input type="radio" value="4" name="bb" > 选项2
			</div>
			<div class="explain">
			这里是要隐藏的答案
			</div>
			</div><!-- 这是一道题的结尾 -->
			
			
			<div class="submit">
				<input type="button" value="提交" onclick="return valid();">
			</div>
		</form>

相应的javascript

<script type="text/javascript">
   function valid(){
	 var str=document.getElementsByTagName("div");
	 //alert(str.length);
	 for(var i=0;i<str.length;i++){
		if(str[i].className=="explain"){
			str[i].style.display="block";
		}
	 }
     return true;
   }
</script>

相应的css

.explain{
display:none;
}

这才发现没有根据class名字遍历的，只能根据getElementsByTagName 或者是Id来遍历DOM的节点，这个略坑啊。发现是自己的误会。 getElementsByClassName也行，

这里实现了按提交就能显示相应的答案的功能。

——————————————

下一步，我们想要能够显示答案的对错 

var dot=document.createElement("div");
dot.innerText="你的答案是正确的";
answerDot.appendChild(dot);
//其中，answerDot是要加DOM的父节点

添加子节点有两种方式，appendChild方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点 来说）。
　　　　 insertBefore 方法 是在已有的节点前添加新的节点（相对于子节点来说的）。 

判断单选正确与否

其实是判断网页两个节点的部分是否相同 

<label class="quiz-content">
	题目1,这道题选A，
</label>
<div class="answers">
	<input class="radio" type="radio" value="A" name="q1" > 选项1
	<input class="radio" type="radio" value="B" name="q1" > 选项2
	<input class="radio" type="radio" value="C" name="q1" > 选项2
	<input class="radio" type="radio" value="D" name="q1" > 选项2
</div>
<div class="explain">
	<div class="option">A</div>
	这里是要隐藏的答案		
</div>

var dot=document.createElement("div");
option=ex[i].getElementsByClassName("option");
//alert(option[0].innerText);//获得正确选项

var cc=an[i].getElementsByClassName("radio");
var readerChoice;
for(var j=0;j<cc.length;j++){
	if(cc[j].checked){
		readerChoice=cc[j].value;
		//alert(readerChoice);
	}
}
//获得读者选的答案

if(readerChoice==option[0].innerText){
	dot.innerText="你的答案是"+readerChoice+",正确的";
}else{
	dot.innerText="你的答案是"+readerChoice+",错误的";
}

<pre name="code" class="javascript">var ex=document.getElementsByClassName("explain");
var an=document.getElementsByClassName("answers");

,,,突然发现需求有分各种题型，然后就用fieldset把题目们分开,关键内容写在legend标签后面就行了

<fieldset>
<legend >
选择题
</legend>
</fieldset>

效果如下 

为了能够让结果出现红色的叉和绿色的勾，我们设置节点的属性，

theJudge.setAttribute("class","true");

theJudge是一个节点，这句可以设置属性。

关于下拉框的代码

<select id="gridType"> 
<option value="all">Both</option>
<option value="positive">Positive</option>
<option value="negative">Negative</option>
</select>

$("#gridType").change(function(){
		var type=$(this).children('option:selected').val();
		
		
	})