简单毛概刷题网页制作 2.0（拖欠近一年版）
原因是大概一年之前学校的毛概期末刷题网站突然崩了，但是一直没有修复。当时眼看着复习时间逐渐被压缩，自己啥也做不了，遂自学前端完成毛概刷题网页一枚。
最早的毛概刷题网站仅仅是 1.0 版本（传送门），功能非常不齐全，只有最基本的选择判断题顺序做题的功能，自己用着也不是很爽。
当时就做出来了后来的 2.0，3.0 版本，包含其他功能，当时说是要更新的。
但是
期末嘛
忙嘛
忘记发了
看到有读者在文末评论才反应过来，忘记更新了，现在补上
文章目录
- 效果图
- 代码
-
- 目录
- get_Q_2.0.js
- jquery.js
- Q_data.js
- style.css
- TF_data.js
- TF.js
- 铖铖的公主.html
- project文件分享（可直接食用）
效果图
话不多说效果图奉上~
功能主要有：
顺序、乱序选择判断
根据用户需求，我将毛概题库分为了选择和判断两部分，分别记忆。
在刷题的时候，我发现自己会有意无意地记住题目的顺序，从而推断出答案——这并不意味着我掌握了知识。因此，我想到乱序刷题。
测试结果显示
当然，除了乱序刷题，统计也非常重要。参考其他网页的设计，我在底部加入了统计面板，当鼠标悬浮至该位置时，面板出现并显示已完成题目数和有效准确率。
代码
目录
命名方式奇奇怪怪，不是啥好习惯~
get_Q_2.0.js遍历数据集生成题目。
get_TF_2.0.js判断ABCD是不是选对了，没什么用，能实现的功能都被TF.js平替了。
jquery.js为开源的 jquery 代码，网上一抓一大把就不放了。
Q_data.js为选择题数据，json格式。=>直接写死成这样，就不用 Ajax 了，直接点开 html 文件就能看。
style.css为布局文件，毛概题库的布局信息都在这里。
TF_data.js为判断题数据，json格式。=>直接写死成这样，就不用 Ajax 了，直接点开 html 文件就能看。
TF.js里面包括判断单选是否正确的代码。
铖铖的公主.html唯一的 html 文件，有点像C里面的 main 函数
get_Q_2.0.js
主要是几个可能会用到的函数
- get_Q：生成选择题问题
- get_TF：生成判断题问题
- shuffle：是否打乱了输出
function get_Q(data, luan){
if(luan){
data = shuffle(data);
}
if(data.length>0){ //项目列表
var listInfo="";
$.each(data,function(){
listInfo+=
'+this.no+'">'+
''
+
this.number+' '+this.question+
''+
''+
''c0k'+this.answer+'s'+this.no+ '"class="A">' + this.A + '' +
''c1k'+this.answer+'s'+this.no+ '"class="B">' + this.B + '' +
''c2k'+this.answer+'s'+this.no+ '"class="C">' + this.C + '' +
''c3k'+this.answer+'s'+this.no+ '"class="D">' + this.D + '' +
''+
'';
});
$("#Select")[0].innerHTML=listInfo;
}
}
function get_TF(data, luan){
if(luan){
data = shuffle(data);
}
if(data.length>0){ //项目列表
var listInfo="";
$.each(data,function(){
listInfo+=
'+this.no+'">'+
''
+
this.number+' '+this.question+
''+
''+
''c0k'+this.answer+'s'+this.no+ '"class="A">' + this.T + '' +
''c1k'+this.answer+'s'+this.no+ '"class="B">' + this.F + '' +
''+
'';
});
$("#Select")[0].innerHTML=listInfo;
}
}
function shuffle(arr) {
var len = arr.length;
for (var i = 0; i < len - 1; i++) {
var index = parseInt(Math.random() * (len - i));
var temp = arr[index];
arr[index] = arr[len - i - 1];
arr[len - i - 1] = temp;
}
return arr;
}
jquery.js
开源的，网上一抓一大把，不放正文占篇幅了，可以去文末的网盘文件里拿。
Q_data.js
这个是数据集，也不放正文占篇幅了，可以去文末的网盘文件里拿。
style.css
布局文件，包括按钮的样式和动画、选项状态、悬浮状态栏等等
.button {
color: white;
padding: 5px 50px;
position: relative;
column-count: 4;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: "miaowu";
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{
margin-left:20%;
}
.button2{
margin-right:20%;
} */
.button{
background-color: #383838;
}
.button: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);
}
.button: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: #db9187;
}
#done{
left: 0;
position: fixed;
bottom: 0;
width: 100%;
z-index: 100;
}
#TorF{
padding: 0;
margin: 0;
text-align: center;
background-color: pink;
width: 98%;
height: 10%;
position: fixed;
left: 1%;
bottom: 0;
opacity: 0;
transition: all 1s;
}
#TorF:hover{
opacity: 1;
transition: all 1s;
}
TF_data.js
这个是数据集，也不放正文占篇幅了，可以去文末的网盘文件里拿。
TF.js
用于判断选项是否正确，写的比较糙，直接暴力判断了。
很low的一种写法，用来判断ABCD是不是被click了，并且判断是不是正确答案。
判断之后修改准确率面板。
$(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');
$("#TorF")[0].innerHTML='完成：'
+document.getElementsByClassName('done').length+'/'+document.getElementsByClassName('question').length+' '+'正确：'+(document.getElementsByClassName('done').length-document.getElementsByClassName('false1').length)+'/'+document.getElementsByClassName('done').length+''
});
$(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');
$("#TorF")[0].innerHTML='完成：'
+document.getElementsByClassName('done').length+'/'+document.getElementsByClassName('question').length+' '+'正确：'+(document.getElementsByClassName('done').length-document.getElementsByClassName('false1').length)+'/'+document.getElementsByClassName('done').length+''
});
$(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');
$("#TorF")[0].innerHTML='完成：'
+document.getElementsByClassName('done').length+'/'+document.getElementsByClassName('question').length+' '+'正确：'+(document.getElementsByClassName('done').length-document.getElementsByClassName('false1').length)+'/'+document.getElementsByClassName('done').length+''
});
$(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');
$("#TorF")[0].innerHTML='完成：'
+document.getElementsByClassName('done').length+'/'+document.getElementsByClassName('question').length+' '+'正确：'+(document.getElementsByClassName('done').length-document.getElementsByClassName('false1').length)+'/'+document.getElementsByClassName('done').length+''
});
铖铖的公主.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="Q_data.js">script>
<script src="TF_data.js">script>
<script src="get_Q_2.0.js" type="text/javascript">script>
<script src="TF.js" type="text/javascript">script>
<title>铖铖的公主title>
head>
<body>
<div style="width:100%">
<button class = "button button1" onclick="get_Q(Q_data,0);">顺序选择button>
<button class = "button button2" onclick="get_TF(TF_data,0);">顺序判断button>
<button class = "button button1" onclick="get_Q(Q_data,1);">乱序选择button>
<button class = "button button2" onclick="get_TF(TF_data,1);">乱序判断button>
div>
<div id="Select">
div>
<div id="TorF">
div>
<div style="height: 100px;width: 100%;">
div>
body>
html>
project文件分享（可直接食用）
记得一键三连噢~~
后期也做出了其他版本的网页（传送门）