到了期末，学校公布了毛概选择判断题库，但是刷题系统炸了。这系统一炸，小编看着有答案的pdf，实在是背不下这800多道题啊，但是迟迟没有收到系统维护的消息。作为计算机专业的学生，我们能受这个气吗？

这绝对不可以！！

于是乎，我就顶着期末考的压力自学了前端，浅浅做了个简单的刷题系统。简陋是简陋了点，但还是勉强能用用的。

文章目录

效果展示
- 目录
- 数据处理
前端代码
小结

效果展示

马赛克没办法，C站说这个违规（毛概都违规啊？？？？）咱就凑活着看个效果

数据处理

题目是学校本年的毛概题库拷贝下来的，用了点正则表达式处理成了现在的数据，具体的操作这边就不做了，直接放结果到链接里。

用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+'&emsp;'+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+'&emsp;'+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中优化了判断题做题顺序，并且加入了模考模式）

简单毛概刷题网页制作相关推荐

简单毛概刷题网页制作 2.0（拖欠近一年版）
原因是大概一年之前学校的毛概期末刷题网站突然崩了,但是一直没有修复.当时眼看着复习时间逐渐被压缩,自己啥也做不了,遂自学前端完成毛概刷题网页一枚. 最早的毛概刷题网站仅仅是 1.0 版本(传送门),功 ...
简单毛概刷题网页制作 3.0（拖欠近一年版）
原因是大概一年之前学校的毛概期末刷题网站突然崩了,但是一直没有修复.当时眼看着复习时间逐渐被压缩,自己啥也做不了,遂自学前端完成毛概刷题网页一枚. 最早的毛概刷题网站仅仅是 1.0 版本(传送门),功 ...
一个简单的个人介绍html网页制作
目录实验说明网页制作实验说明 1.环境:本实验用的windows 环境:ubantu 下载安装nginx参考:https://blog.csdn.net/qq_23832313/article/ ...
学生HTML动漫主题(人物)作业作品下载个人人物博客网页设计制作大学生个人网站作业模板简单个人动漫主题网页制作
文章目录网页作品介绍效果演示代码演示源码获取网页作品介绍本HTML静态网页作品采用DW制作,主题为华为热门产品,共10个页面,首页1页,二级图文页面1页,二级产品1页,三级产品详情6页, ...
web网页设计与开发：基于HTML+CSS+JavaScript简单的个人博客网页制作期末作业
web网页设计与开发：简单的学生网页作业源码基于html css javascript简单的个人博客网页制作期末作业
【DW网页设计制作】超简单的动漫主题网页制作教程——HTML+CSS海贼王作品展示网页
1024，给大家谈谈如何搞透刷题玩转力扣！
前言大家好,我是bigsai,好久不见!今天1024,祝大家程序员节快乐,写代码永没bug!今天就给各位小伙伴分享我自己刷题力扣的一些小方法,不一定很有用但是可以参考,祝你更高效的变强! 最近在一些 ...
【2023.5.3~2023.5.9】CTF刷题记录
目录日期:2023.5.3 题目:[GWCTF 2019]pyre 日期:2023.5.4 题目:[ACTF新生赛2020]easyre 题目:DASCTF Apr.2023 X SU战队2023开 ...

简单毛概刷题网页制作

文章目录

效果展示

目录

数据处理

前端代码

小结

简单毛概刷题网页制作相关推荐

最新文章

热门文章