第五篇 《随机点名答题系统》——抽点答题详解（类抽奖系统、在线答题系统、线上答题系统、在线点名系统、线上点名系统、在线考试系统、线上考试系统）

         

目录

1.功能需求 

2.界面设计 

3.流程设计

4.关键代码

        随机点名答题系统（类抽奖系统、在线答题系统、线上答题系统、在线点名系统、线上点名系统、在线考试系统、线上考试系统），是基于php（8.2.11），JavaScrip，MySQL开发的轻量化点名答题系统，分为数据管理和前端两部分。主要解决了随机抽点人员和随机抽点题目结合的业务需求，有很强的实用意义。

1.功能需求 

        需求点—— 

1.先进行人员抽取，再进行题目抽取；

2.同一人员可以回答多个题目（抽取一次人员，可抽取多次题目）；

3.显示题目答案后，题目从题目数据池中移除，人员从人员数据池中移除。

2.界面设计 

左侧菜单栏

抽取结果
抽取题目
显示答案

3.流程设计

        抽点答题包括抽取人员、抽取题目、显示答案3个模块。基本流程是：在程序初始化基础上，点击【开始抽取人员】，人员信息在屏幕上进行滚动，点击【停止抽取人员】人员信息停止滚动，显示抽取的人员姓名和单位信息；点击【抽取题目】程序会在后台随机抽取一道题目显示在屏幕上，点击【显示答案】会显示所抽取题目的答案。

        在完成基本流程过程中，可反复对人员和题目进行抽取，每答完一道题目人员信息和题目信息就会从数据池里移除，全部人员或者题目被移除后可重新进行程序初始化继续进行抽点答题操作。

4.关键代码

    var timer_cqry;var data_cqry;var data_cqry2;var data_cqtm;var data_cqtm2;var drawFlag = true;var tmFlag = false;var isCqRy;var isCqTm;var data_ry;var data_tm;function dataInit(){data_cqry = [];data_cqtm =[];drawFlag = true;tmFlag = false;data_ry=[];data_tm=[];isCqRy="";isCqTm="";clearInterval(timer_cqry);$("#ks").off("click");$("#tz").off("click");$("#tm").off("click");$("#xsda").off("click");}function initEvent(){$("#ks").on("click",function (){$("#main_php").html( cjcxTips('请先进行程序初始化'));});$("#tz").on("click",function (){$("#main_php").html( cjcxTips('请先进行程序初始化'));});$("#tm").on("click",function (){$("#main_php").html( cjcxTips('请先进行程序初始化'));});$("#xsda").on("click",function (){$("#main_php").html( cjcxTips('请先进行程序初始化'));});}$(document).ready(function (){initEvent();//初始化菜单$(document).on("click","#cshcx",function (){dataInit();$("#main_php").html( cjcxTips('抽点答题程序正在初始化，请耐心等待'));$.ajax({method: "post",url:"cjcx.php",data:{},success:function (res){res = JSON.parse(res);if(res["flag"]=="success_init") {setTimeout(function () {$("#main_php").html( cjcxTips('程序初始化完毕，请进行【抽点答题】'));}, 0);data_ry = res["renyuan"];//人员数据池data_tm = res["timu"];//题目数据池//初始化完毕后，为开始、停止、显示答案按钮绑定事件$("#ks").on("click",function (){startDraw();});$("#tz").on("click",function (){stopDraw();});$("#tm").on("click",function (){tmDraw();});$("#xsda").on("click",function (){displayDa();});}if (res["flag"] == "err_null"){$("#main_php").html( cjcxTips(res["data"]));}if (res["flag"] == "err_null_all"){$("#main_php").html( cjcxTips(res["data"]));}}});//php_reload("cjcx.php","#main_php",{});});});function cjcxTips(data){$html = '<div class="lucky-draw-view" id="tips">' +'<div class="lucky-draw-content lucky-draw-start">' +'<div class="lucky-draw-users lucky-draw-users-start">' +'<div class="lucky-draw-user">' +'<h1 style="color: #ffffff;align-content: center;justify-content: center;text-align: center">'+data+'</h1>  </div> </div></div> </div>';return $html;}//开始抽取人员function startDraw(){var randomInt;var data_one;let newSet = new Set(data_ry);if (isCqRy != ""){newSet.delete(isCqRy);}data_ry = Array.from(newSet);if (data_ry != ""){if (drawFlag){timer_cqry = setInterval(function (){randomInt = Math.floor(Math.random() * data_ry.length);data_one = JSON.parse(data_ry[randomInt]);$("#main_php").html( cjcxTips('<span class="tipry" >'+data_one["xm"]+'</br>'+data_one["dw"]+'</span>') );data_cqry = data_one;data_cqry2 = data_ry[randomInt];},10);drawFlag = false;}}else {$("#main_php").html( cjcxTips("所有人员抽取完毕,请重新初始化程序") );isCqRy = "";data_cqry = [];}}//停止抽取人员function stopDraw(){clearInterval(timer_cqry);if (!drawFlag && data_cqry != ""){$("#main_php").html( cjcxTips('<span class="tipry" >'+data_cqry["xm"]+'</br>'+data_cqry["dw"]+'</span>') );drawFlag = true;}else {$("#main_php").html( cjcxTips("请先开始抽取人员") );}}//抽取题目function tmDraw(){var randomInt;let newSet = new Set(data_tm);if (isCqTm != ""){newSet.delete(isCqTm);}data_tm = Array.from(newSet);clearInterval(timer_cqry);if(data_tm != ""){if (data_cqry != "" && drawFlag){randomInt = Math.floor(Math.random() * data_tm.length);tmdata = JSON.parse(data_tm[randomInt]);$html = '<div style="height: 100%;width:100%;position: absolute ;background: rgba(34, 170,238, 0.5);;box-shadow: 0px 0px 12px rgba(0,255,255,0.75);border: 1px solid rgba(127,255,255,0.75);">' +'<div  style="position: absolute ;top:0%; margin-:  0 1.5% ;font-size: 2vmax;font-weight: 1000;color: #00ffb7"><span style="color: #ffffff">【' +data_cqry["xm"]+'】</span>要回答的题目是：</div>' +'<div style="top:8%;height: 40%;width:97%;position: absolute ;margin:  0 1.5%  ; border: 2px solid rgba(127,255,255,0.9);box-shadow: 0px 0px 12px rgba(0,255,255,0.8);">' +'<textarea disabled id="tm"  style="font-family: Arial, sans-serif;color: #ffffff;line-height: 1.5;width: 98%;height: 87% ;resize:none;margin:1%;border-style:none;font-size: 1.5vmax;font-weight: 800;overflow-y: auto;" >' +tmdata["tg"]+'</textarea>' +'</div>' +'<div style="top:49%;position: absolute ;margin:  0 1.5%  ;font-size: 2vmax;font-weight: 1000;color: #00ffb7">该题目的正确答案是：</div>' +'<div style="top:58%;height: 40%;width:97%;position: absolute ; margin:  0 1.5% 1.5% 1.5% ;border: 2px solid rgba(127,255,255,0.9);box-shadow: 0px 0px 12px rgba(0,255,255,0.8);">' +'<textarea disabled id="tmda" style="font-family: Arial, sans-serif;color: #ffffff;line-height: 1.5;width: 98%;height: 92% ;resize:none;margin:1%;border-style:none;font-size: 2vmax;font-weight: 800;overflow-y: auto;" >' +'</textarea>' +'</div>' +'</div>'$("#main_php").html($html);data_cqtm = tmdata;data_cqtm2 = data_tm[randomInt];}else {$("#main_php").html( cjcxTips("请先抽取人员") );drawFlag = true;data_cqry = [];data_cqry2 = "";}}else {$("#main_php").html( cjcxTips("所有题目抽取完毕,请重新初始化程序") );isCqTm = "";}}//显示答案function displayDa(){clearInterval(timer_cqry);if (data_cqtm != "" && drawFlag){$("#tmda").val(data_cqtm["da"]);isCqRy = data_cqry2;isCqTm = data_cqtm2;}else {$("#main_php").html( cjcxTips("请先抽取题目") );drawFlag = true;data_cqry = [];data_cqry2 = "";}}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/196282.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

上海亚商投顾：三大指数小幅上涨 HBM概念股全天强势

上海亚商投顾：三大指数小幅上涨 HBM概念股全天强势

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 三大指数早盘窄幅震荡&#xff0c;午后集体拉升翻红&#xff0c;黄白二线走势分化&#xff0c;题材热点快速轮…
阅读更多...
【洛谷算法题】P5713-洛谷团队系统【入门2分支结构】

【洛谷算法题】P5713-洛谷团队系统【入门2分支结构】

&#x1f468;‍&#x1f4bb;博客主页&#xff1a;花无缺 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 花无缺 原创 收录于专栏 【洛谷算法题】 文章目录 【洛谷算法题】P5713-洛谷团队系统【入门2分支结构】&#x1f30f;题目描述&#x1f30f;输入格…
阅读更多...
Ubuntu20.04 安装微信 【wine方式安装】推荐

Ubuntu20.04 安装微信 【wine方式安装】推荐

安装步骤： 第一步：安装 WineHQ 安装包 先安装wine，根据官网指导安装即可。下载 - WineHQ Wikihttps://wiki.winehq.org/Download_zhcn 如果您之前安装过来自其他仓库的 Wine 安装包，请在尝试安装 WineHQ 安装包之前删除它及依赖它的所有安装包（如：wine-mono、wine-gec…
阅读更多...
应用开发平台集成表单设计器系列之3——整体集成思路及表单设计器功能深度了解

应用开发平台集成表单设计器系列之3——整体集成思路及表单设计器功能深度了解

背景 平台需要实现自定义表单功能&#xff0c;作为低代码开发的一部分&#xff0c;通过技术预研和技术选型&#xff0c;选择form-create和form-create-designer这两个组件进行集成作为实现方案。通过深入了解和技术验证&#xff0c;确认了组件的功能能满足需求&#xff0c;具备…
阅读更多...
Linux性能分析——TOP命令详解

Linux性能分析——TOP命令详解

我的圈子&#xff1a; 高级工程师聚集地 我是董哥&#xff0c;高级嵌入式软件开发工程师&#xff0c;从事嵌入式Linux驱动开发和系统开发&#xff0c;曾就职于世界500强公司&#xff01; 创作理念&#xff1a;专注分享高质量嵌入式文章&#xff0c;让大家读有所得&#xff01; …
阅读更多...
初刷leetcode题目(3)——数据结构与算法

初刷leetcode题目(3)——数据结构与算法

&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️Take your time ! &#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️…
阅读更多...
JVM垃圾回收相关概念

JVM垃圾回收相关概念

目录 一、System.gc()的理解 二、内存溢出与内存泄露 &#xff08;一&#xff09;OOM &#xff08;二&#xff09;内存泄露 三、StopTheWorld 四、垃圾回收的并行与并发 五、安全点与安全区域 &#xff08;一&#xff09;安全点 &#xff08;二&#xff09;安全区域 …
阅读更多...
迪克森电荷泵

迪克森电荷泵

迪克森电荷泵&#xff08;Dickson Charge Pump&#xff09;是一种电压倍增器电路&#xff0c;可以将低电压升高到较高电压&#xff0c;相对于其他电压升压电路&#xff0c;迪克森电荷泵具有较高的效率和较简单的电路结构。该电路的基本原理是通过电容和开关来实现电荷的积累和转…
阅读更多...
Open AI开发者大会：AI“科技春晚”

Open AI开发者大会：AI“科技春晚”

ChatGPT的亮相即将满一年之时&#xff0c;OpenAI举行了自己的首次开发者大会。OpenAI首席执行官Sam Altman宣布推出最新的大模型GPT-4 Turbo。正如“Turbo”一词的中文含义“涡轮增压器”一样&#xff0c;本次发布会上&#xff0c;OpenAI的这款最新大模型在长文本、知识库、多模…
阅读更多...
「Tech初见」对epoll的理解

「Tech初见」对epoll的理解

一、Motivation 通常&#xff0c;操作系统会为每个进程划分一个时间片的&#xff0c;在这个时间片内进程可以合法占有 cpu 进行一些计算任务。并当时间片结束后自动退回至就绪状态待命&#xff0c;等待下一次的调度 但是&#xff0c;有一种情况会使进程提前&#xff08;时间片…
阅读更多...
数据结构 堆

数据结构 堆

手写堆&#xff0c;而非stl中的堆 如何手写一个堆&#xff1f; //将数组建成堆 <O(n) for (int i n / 2;i;i--) //从n/2开始down down(i); 从n/2元素开始down&#xff0c;最下面一层元素的个数是n/2&#xff0c;其余上面的元素的个数是n/2&#xff0c;从最下面一层到最高层…
阅读更多...
【开源】基于Vue和SpringBoot的教学过程管理系统

【开源】基于Vue和SpringBoot的教学过程管理系统

项目编号&#xff1a; S 054 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S054&#xff0c;文末获取源码。} 项目编号&#xff1a;S054&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 教师端2.2 学生端2.3 微信小程序端2…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023