chrome是写js的神器啊
http://blog.sina.com.cn/s/blog_6db312f10101ac8p.html
后面懒得写下去了,东西打包了,
http://download.csdn.net/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方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说)。
其实是判断网页两个节点的部分是否相同
<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(); })