简单毛概刷题网页制作 2.0（拖欠近一年版）

已于 2023-05-05 23:44:10 修改
阅读量1.6k 收藏 1
点赞数 1
分类专栏： # 网页制作 前端 文章标签： javascript jquery 前端
于 2023-05-01 10:29:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hjh1906008151/article/details/130454341
版权

原因是大概一年之前学校的毛概期末刷题网站突然崩了，但是一直没有修复。当时眼看着复习时间逐渐被压缩，自己啥也做不了，遂自学前端完成毛概刷题网页一枚。

最早的毛概刷题网站仅仅是 1.0 版本（传送门），功能非常不齐全，只有最基本的选择判断题顺序做题的功能，自己用着也不是很爽。

当时就做出来了后来的 2.0，3.0 版本，包含其他功能，当时说是要更新的。

但是

期末嘛

忙嘛

忘记发了

看到有读者在文末评论才反应过来，忘记更新了，现在补上

文章目录

效果图

话不多说效果图奉上~

功能主要有：

顺序、乱序选择判断

在这里插入图片描述
根据用户需求，我将毛概题库分为了选择和判断两部分，分别记忆。

在刷题的时候，我发现自己会有意无意地记住题目的顺序，从而推断出答案——这并不意味着我掌握了知识。因此，我想到乱序刷题。

测试结果显示

当然，除了乱序刷题，统计也非常重要。参考其他网页的设计，我在底部加入了统计面板，当鼠标悬浮至该位置时，面板出现并显示已完成题目数和有效准确率。

在这里插入图片描述

代码

目录

命名方式奇奇怪怪，不是啥好习惯~

在这里插入图片描述

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+=
            '<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;	
    }
}

function get_TF(data, luan){	
    if(luan){
        data = shuffle(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;
    }
}

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='<p>完成：'+document.getElementsByClassName('done').length+'/'+document.getElementsByClassName('question').length+'&emsp;&emsp;&emsp;&emsp;'+'正确：'+(document.getElementsByClassName('done').length-document.getElementsByClassName('false1').length)+'/'+document.getElementsByClassName('done').length+'</p>'	
});
$(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='<p>完成：'+document.getElementsByClassName('done').length+'/'+document.getElementsByClassName('question').length+'&emsp;&emsp;&emsp;&emsp;'+'正确：'+(document.getElementsByClassName('done').length-document.getElementsByClassName('false1').length)+'/'+document.getElementsByClassName('done').length+'</p>'	
});
$(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='<p>完成：'+document.getElementsByClassName('done').length+'/'+document.getElementsByClassName('question').length+'&emsp;&emsp;&emsp;&emsp;'+'正确：'+(document.getElementsByClassName('done').length-document.getElementsByClassName('false1').length)+'/'+document.getElementsByClassName('done').length+'</p>'	
});
$(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='<p>完成：'+document.getElementsByClassName('done').length+'/'+document.getElementsByClassName('question').length+'&emsp;&emsp;&emsp;&emsp;'+'正确：'+(document.getElementsByClassName('done').length-document.getElementsByClassName('false1').length)+'/'+document.getElementsByClassName('done').length+'</p>'	
});

铖铖的公主.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%;">
        <!-- <p style="font-size:100px;text-align:auto;">aaa</p> -->
    </div>
    <!-- <button class = "button button1" οnclick="window.open('../index.html')">提交</button> -->

</body>
</html>

project文件分享（可直接食用）

记得一键三连噢~~

后期也做出了其他版本的网页（传送门）

铖铖的花嫁
关注
专栏目录
轻松答题：用Python编写网页自动答题脚本助你高分通过
python56123的博客
11-21 1261
from selenium import webdriver —> 自动测试模块 pip install selenium==3.141.0 谷歌驱动下载地址: https://googlechromelabs.github.io/chrome-for-testing/#stable。“”“通过元素定位: 获取答案 / 进行答题操作”“”selenium -> 驱动 -> 浏览器。获取选项 -> 答案的内容和选择的进行对比。Python 3.10 解释器。
【项目】寒假项目总结—刷题网站初步的搭建
小宝的博客
02-22 6425
希望未来的你能感谢现在努力的你！
初学一个月html，css，js，JQ制作的网页刷题
m0_64120895的博客
10-28 1084
初学一个月html，css，js，JQ制作的网页刷题
python制作题库网站_制作一个在线测试的题库网站需要掌握哪些知识？
weixin_39525617的博客
12-10 703
使用快考题在线考试系统的过程中，考生有多种选择，比如快考题网页版就是一种参加考试的渠道。和其他渠道相比，使用快考题网页版参加考试有什么优势呢？快考题的操作方法：1、用户注册快考题，输入账号登录后，点击创建考试，进入到考试编辑的页面，进入“创建考试”页面，开始创建考试，添加考试名称，设置考试分类，选择考试模式，以及考试时长、答题时间。2、点击“下一步”进行添加试题，进入“添加试题”页面，选择组卷模式...
JavaScript刷题网站后端，拥有简单用户系统，可自己建立试卷，录入题库
08-03
JavaScript刷题网站后端，拥有简单用户系统，可自己建立试卷，录入题库
2020版网页制作合同.pdf
12-27
2020版网页制作合同涉及到的主要知识点包括： 1. **合同目的**：合同的目的是明确双方通过合同的执行所期望得到的结果，即乙方为甲方提供网页制作服务。 2. **服务内容**： - **域名注册**：乙方为甲方申请并管理...
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
09-19
### Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例 #### 一、Logistic回归模型概述 Logistic回归是一种广泛应用于分类问题的统计方法，尤其是在二分类问题中表现出色。它通过使用Sigmoid函数将...
拖欠款纠纷起诉状范本专业版.doc
10-08
本文档是关于拖欠款纠纷起诉状的专业版范本，用于指导如何在遭遇债务人未按时履行还款义务时，通过法律途径解决经济纠纷。起诉状是民事诉讼的第一步，它清晰阐述了原告的诉求和事实依据。 起诉状的核心部分包括以下...
拖欠工程款律师函模板标准版.pdf
12-17
拖欠工程款律师函模板标准版.pdf
【合同大全】拖欠工资解除劳动合同协议范本【合同大全】整理版.doc
09-30
《拖欠工资解除劳动合同协议范本》是劳动者与用人单位在面临工资拖欠问题时，为了解除劳动合同关系而制定的一种法律文件。这份文档详细规定了双方在解除劳动合同时的权利和义务，确保了劳动者的合法权益得到保障。 ...
【毕业设计之python系列】基于Django的在线题库的设计与实现
m0_56073435的博客
06-20 1878
随着互联网和信息技术的迅速发展，教育领域也在不断地进行着数字化转型。在线学习平台、学科竞赛等各种教育形式层出不穷。其中，线上题库已经成为了学生们备战考试的重要工具。因此，开发一款基于Django框架的在线题库系统，可以有效地帮助学生提高自己的学习效率，同时也能够方便教师进行教学管理。在传统的教育模式中，学生需要通过大量的纸质试卷进行练习，这不仅耗费时间，还造成了大量的资源浪费。而在线题库则能够将试卷和答案都保存在服务器上，学生可以随时随地通过网络访问获取。
用html制作答题器
xiao_qian111的博客
04-18 1109
快来用这个考考你的朋友吧！
方包web在线刷题系统（一款无数据库的刷题应用）
优派编程
11-03 720
点击上方蓝字"优派编程"选择“加为星标”，第一时间关注原创干货方包刷题web网站的项目搭建与使用教程--------------方包刷题web项目，技术：python的flask作为后端，...
简单毛概刷题网页制作
如果没有躺赢的命，那就站起来奔跑，你的努力一定会对得起这一路的颠沛流离。
06-12 2066
  到了期末，学校公布了毛概选择判断题库，但是刷题系统炸了。这系统一炸，小编看着有答案的pdf，实在是背不下这800多道题啊，但是迟迟没有收到系统维护的消息。作为计算机专业的学生，我们能受这个气吗？   这绝对不可以！！   于是乎，我就顶着期末考的压力自学了前端，浅浅做了个简单的刷题系统。简陋是简陋了点，但还是勉强能用用的。  因为时间真的不够，我们就没怎么整理文件：   choose.json和TF.json为选择判断题库，在下面的链接中给出。  我们先用python将期末考题处理成比较适合前端的js
入门系列-记录几个可以刷题的网站
qq_38213675的博客
02-20 3277
1、 LintCode LintCode网站是国内较大的在线编程&测评网站。网站提供各大IT公司的算法面试题类型，行分门别类，由简单到中等，再到难，支持多种基本语言（C++，Java，python）便于不同水平的程序员进行刷题练习。对于不同编程能力水平、不同职位需求的人来说是很有用的刷题网站。https://www.lintcode.com 2、 PAT PAT程序设计类实验辅助教学平台...
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1128
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
JavaScript 生成二维码
最新发布
qq_30049249的博客
11-02 121
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
基于vue框架的的汇生活家居商城的设计与实现bdjlq（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
10-29 1367
项目功能：商品分类,商品信息,用户。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 680
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
项目工程款拖欠情况分析Excel模板
资源摘要信息:"Excel模板拨款拖欠的项目工程款调查汇总表.zip" 该文件是一个压缩包，包含一个名为“拨款拖欠的项目工程款调查汇总表.xls”的Excel工作表文件。这份工作表文件主要是用于统计和分析项目工程款的拨款...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

铖铖的花嫁

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值