到了期末，学校公布了毛概选择判断题库，但是刷题系统炸了。这系统一炸，小编看着有答案的pdf，实在是背不下这800多道题啊，但是迟迟没有收到系统维护的消息。作为计算机专业的学生，我们能受这个气吗？
这绝对不可以！！
于是乎，我就顶着期末考的压力自学了前端，浅浅做了个简单的刷题系统。简陋是简陋了点，但还是勉强能用用的。
效果展示
马赛克没办法，C站说这个违规（毛概都违规啊？？？？）咱就凑活着看个效果
目录
因为时间真的不够，我们就没怎么整理文件：
choose.json和TF.json为选择判断题库，在下面的链接中给出。
jquery.js为开源的 jquery 代码，网上一抓一大把就不放了。
style.css为布局文件，毛概题库的布局信息都在这里。
get_Q.js为动态网页生成代码。
TF.js里面包括判断单选是否正确的代码。
数据处理
题目是学校本年的毛概题库拷贝下来的，用了点正则表达式处理成了现在的数据，具体的操作这边就不做了，直接放结果到链接里。
用python将期末考题处理成比较适合前端的 json 格式的过程略，结果链接 提取码：jhnb
前端代码
index.html：平平无奇标准html框架写法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="jquery.js" type="text/javascript"></script>
<script src="get_Q.js" type="text/javascript"></script>
<script src="TF.js" type="text/javascript"></script>
<title>铖铖的公主nb</title>
</head>
<body>
<button class = "button button1" onclick="notice1();">顺序选择</button>
<button class = "button button1" onclick="notice2();">顺序判断</button>
<div id="Select">
</div>
<button class = "button button1" onclick="window.open('../index.html')">提交</button>
</body>
</html>
style.css：布局文件，包括按钮的样式和动画、选项状态等等
.button {
color: white;
padding: 5px 50px;
position: relative;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: "miaowu";
margin-left: 10%;
margin-top: 20px;
border-radius: 5px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button1{
background-color: #383838;
}
.button1:hover {
background-color: #fdcdac;
color: white;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.button1:active {
background-color: #f1e2cc;
box-shadow: 0 5px #666;
transform: translateY(1px);
color: #383838;
}
#Select{
margin-top: 20px;
margin-left: 2%;
margin-right: 2%;
}
#Select .question{
border: 1px solid #383838;
}
#Select .wen{
font-size: 20px;
padding: 2%;
margin: 0;
}
#Select .A,
#Select .B,
#Select .C,
#Select .D{
font-size: 18px;
text-decoration: none;
color: black;
width: 100%;
text-align: center;
}
.true1{
background-color: aquamarine;
}
.false1{
background-color: red;
}
#done{
left: 0;
position: fixed;
bottom: 0;
width: 100%;
z-index: 100;
}
get_Q.js用于动态生成网页，靠一个循环遍历所有题目并放入结果。
function notice1(){
$.ajax("choose.json",{
data:{},
dataType:'json',
type:'get',
async:'false',
success:function(data){
if(data.length>0){ //项目列表
var listInfo="";
$.each(data,function(){
listInfo+=
'<div class="question" id="s'+this.no+'">'+
'<p class="wen">'+
this.number+' '+this.question+
'</p>'+
'<div class="answer">'+
'<button type="button" id="'+'c0k'+this.answer+'s'+this.no+ '"class="A">' + this.A + '</button>' +
'<button type="button" id="'+'c1k'+this.answer+'s'+this.no+ '"class="B">' + this.B + '</button>' +
'<button type="button" id="'+'c2k'+this.answer+'s'+this.no+ '"class="C">' + this.C + '</button>' +
'<button type="button" id="'+'c3k'+this.answer+'s'+this.no+ '"class="D">' + this.D + '</button>' +
'</div>'+
'</div>';
});
$("#Select")[0].innerHTML=listInfo;
}
}
// error:function(xhr,type,errorThrown){
// alert("系统繁忙，请联系管理员");
// }
})
}
function notice2(){
$.ajax("TF.json",{
data:{},
dataType:'json',
type:'get',
async:'false',
success:function(data){
if(data.length>0){ //项目列表
var listInfo="";
$.each(data,function(){
listInfo+=
'<div class="question" id="s'+this.no+'">'+
'<p class="wen">'+
this.number+' '+this.question+
'</p>'+
'<div class="answer">'+
'<button type="button" id="'+'c0k'+this.answer+'s'+this.no+ '"class="A">' + this.T + '</button>' +
'<button type="button" id="'+'c1k'+this.answer+'s'+this.no+ '"class="B">' + this.F + '</button>' +
'</div>'+
'</div>';
});
$("#Select")[0].innerHTML=listInfo;
}
}
})
}
TF.js用于判断选项是否正确，写的比较糙，直接暴力判断了。
$(document).on("click",".A",function(){ //通过document绑定对应的事件
id = $(this).attr('id')
no = id.substr(5);
key = id.substr(3,1);
c = id.substr(1,1);
for (i = 0; i < 4; i++) {
$('#c'+i+'k'+key+'s'+no).removeClass('true1');
$('#c'+i+'k'+key+'s'+no).removeClass('false1');
}
if(key==c)
$("#"+id).addClass('true1');
else{
$("#"+id).addClass('false1');
$('#c'+key+'k'+key+'s'+no).addClass('true1');
}
$("#s"+no).addClass('done');
});
$(document).on("click",".B",function(){ //通过document绑定对应的事件
id = $(this).attr('id')
no = id.substr(5);
key = id.substr(3,1);
c = id.substr(1,1);
for (i = 0; i < 4; i++) {
$('#c'+i+'k'+key+'s'+no).removeClass('true1');
$('#c'+i+'k'+key+'s'+no).removeClass('false1');
}
if(key==c)
$("#"+id).addClass('true1');
else{
$("#"+id).addClass('false1');
$('#c'+key+'k'+key+'s'+no).addClass('true1');
console.log('#c'+c+'k'+key+'s'+no)
}
$("#s"+no).addClass('done');
});
$(document).on("click",".C",function(){ //通过document绑定对应的事件
id = $(this).attr('id')
no = id.substr(5);
key = id.substr(3,1);
c = id.substr(1,1);
for (i = 0; i < 4; i++) {
$('#c'+i+'k'+key+'s'+no).removeClass('true1');
$('#c'+i+'k'+key+'s'+no).removeClass('false1');
}
if(key==c)
$("#"+id).addClass('true1');
else{
$("#"+id).addClass('false1');
$('#c'+key+'k'+key+'s'+no).addClass('true1');
}
$("#s"+no).addClass('done');
});
$(document).on("click",".D",function(){ //通过document绑定对应的事件
id = $(this).attr('id')
no = id.substr(5);
key = id.substr(3,1);
c = id.substr(1,1);
for (i = 0; i < 4; i++) {
$('#c'+i+'k'+key+'s'+no).removeClass('true1');
$('#c'+i+'k'+key+'s'+no).removeClass('false1');
}
if(key==c)
$("#"+id).addClass('true1');
else{
$("#"+id).addClass('false1');
$('#c'+key+'k'+key+'s'+no).addClass('true1');
}
$("#s"+no).addClass('done');
});
小结
有一说一这个还是蛮有意思的，运用所学解决实际问题，突然就 get 到了平时学那些知识的意义所在~
很多朋友说这个网页还有点缺陷，希望加一点其他功能，这几天在赶，尽快更新……
后期也做出了其他版本的网页（传送门1中加入了顺序乱序功能，并且完成了结果统计，可随时查看自己的做题进度）（传送门2中优化了判断题做题顺序，并且加入了模考模式）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
