初学前端三件套总想用学的东西做点什么，这不老师发来期末的题库，要不用最近学的一些基础东西搞一个网页版的刷题软件，说干就干（文末有食用方法）。
用html，css写背景，越写越感觉自己写的太丑了，直接去找插件，省去好多事，但主要别人写的好看，推荐几个JQ插件的网址 jQuery插件库-收集最全最新最好的jQuery插件 ()
jQuery之家-自由分享jQuery、html5、css3的插件库 ()
超好用，主要大多免费。
修修改改大体背景就这样了。
开始今天的核心内容：怎么把老师的1000多到题弄到HTML并且判断正确和错误。当然用js了
整体思路应该是点击选项然后和答案匹配，用for循环进行匹配发现选项和答案顺序不匹配，but弄了几次都不行，只能换方法了。
先在这推荐一个好用的替换方法：ctrl+h可以用来替换文本选定内容。
继续：为什么我不去搞每个题有四个答案这样就可以解决选项和答案的编号可以一一对应通过点击事件然后对应判断答案的正确与否(用前面的替换方法替换）
代码实现
for (var i = 0; i < buts.length; i++) {var a=buts[i];var b=das[i];a.index =i;a.onclick=function(){b=das[this.index];if(b.innerHTML==this.innerHTML){this.style.background='green';obj.src = "img/right.png";var lili = obj.cloneNode(false);b.parentNode.appendChild(lili);this.disabled=true; }else{this.style.background='red'; obj.src = "img/wrong.png";var lili = obj.cloneNode(false);b.parentNode.appendChild(lili);} }a.onmouseout=function(){ this.style.background='rgb(151, 151, 163)'; }}
在判断条件里我又插入选错和选对而变得样式，鼠标离开事件，这里注意要用到cloneNode，否则插入图片只会出现一次。
最终效果如下
本以为搞定了，没想到才开始，我突然发现还有多选题 ........
一一匹配的梦破了，我开始想到的就是：得到四个选项然后遍历对应选项的答案
然后就是各种bug，最后请教宿舍大佬帮忙改进来一下，完美实现单选和多选共存
for (var i = 0; i < buts.length; i++) {a=buts[i]; a.index =i+1;a.onclick=function(){var j,z;if(this.index%4==0){j=this.index-3;z=this.index;} else {j=this.index-this.index%4+1;z=this.index-this.index%4+4;}var qq;for(;j<=z;j++){qq=0;b=das[j-1];if(b.innerHTML==this.innerHTML){this.style.background='green';obj.src = "img/right.png";var lili = obj.cloneNode(false);b.parentNode.appendChild(lili);this.disabled=true; qq=1;break;}}if(qq==0){this.style.background='red'; obj.src = "img/wrong.png";var lili = obj.cloneNode(false);b.parentNode.appendChild(lili);} }a.onmouseout=function(){ this.style.background='rgb(151, 151, 163)'; }}
效果如下
整体差不多了，想到自己写作业的时候爱听歌，就插了一个音乐盒子的插件
效果如下
有个小bug这个音乐盒子不能自动播放，如果有会解决的大佬一定要告诉我哦。
食用方法：
要有这样样式的文本
然后把你的题全部复制粘贴像这样
然后ctrl+h进行替换（替换A,B,C,D为<button>A、</button>，<button>B、</button>.....一共四次替换)
不要替换错了哦
以此方法在次替换（答案 ：A 替换
<div class="der">
<div class="da">A、</div>
<div class="da">A、</div>
<div class="da">A、</div>
<div class="da">A、</div>
</div> 依次把B,C,D替换就全部ok了
替换的注意事项：如果有多选题请先替换四个选项的答案然后替换三个选项答案
自行添加自己喜欢的音乐，完整代码里有备注。
源码分享/s/1hrIuWVoFUURSoIyUSoYH8Q提取码:fjc1
