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

news2024/9/23 7:30:23

         

目录

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.coloradmin.cn/o/1228775.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

迪克森电荷泵

迪克森电荷泵

迪克森电荷泵&#xff08;Dickson Charge Pump&#xff09;是一种电压倍增器电路&#xff0c;可以将低电压升高到较高电压&#xff0c;相对于其他电压升压电路&#xff0c;迪克森电荷泵具有较高的效率和较简单的电路结构。该电路的基本原理是通过电容和开关来实现电荷的积累和转…
阅读更多...
上海亚商投顾：三大指数小幅上涨 HBM概念股全天强势

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

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 三大指数早盘窄幅震荡&#xff0c;午后集体拉升翻红&#xff0c;黄白二线走势分化&#xff0c;题材热点快速轮…
阅读更多...
计算两个向量的叉积numpy.cross()

计算两个向量的叉积numpy.cross()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 计算两个向量的叉积 numpy.cross() [太阳]选择题 请问代码中最后输出正确的是&#xff1f; import numpy as np a np.array([1, 2, 3]) b np.array([4, 5, 6]) c np.cross(a, b) pri…
阅读更多...
C#，数值计算——插值和外推，Laplace_interp的计算方法与源程序

C#，数值计算——插值和外推，Laplace_interp的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// Object for interpolating missing data in a matrix by solving Laplaces /// equation.Call constructor once, then solve one or more times /// </summary> …
阅读更多...
初刷leetcode题目(3)——数据结构与算法

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

&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️Take your time ! &#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️…
阅读更多...
Go语言常用命令详解(二)

Go语言常用命令详解(二)

文章目录 前言常用命令go bug示例参数说明 go doc示例参数说明 go env示例 go fix示例 go fmt示例 go generate示例 总结写在最后 前言 接着上一篇继续介绍Go语言的常用命令 常用命令 以下是一些常用的Go命令&#xff0c;这些命令可以帮助您在Go开发中进行编译、测试、运行和…
阅读更多...
《数字图像处理-OpenCV/Python》连载（44）图像的投影变换

《数字图像处理-OpenCV/Python》连载（44）图像的投影变换

《数字图像处理-OpenCV/Python》连载&#xff08;44&#xff09;图像的投影变换 本书京东优惠购书链接&#xff1a;https://item.jd.com/14098452.html 本书CSDN独家连载专栏&#xff1a;https://blog.csdn.net/youcans/category_12418787.html 第 6 章 图像的几何变换 几何变…
阅读更多...
应用开发平台集成表单设计器系列之3——整体集成思路及表单设计器功能深度了解

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

背景 平台需要实现自定义表单功能&#xff0c;作为低代码开发的一部分&#xff0c;通过技术预研和技术选型&#xff0c;选择form-create和form-create-designer这两个组件进行集成作为实现方案。通过深入了解和技术验证&#xff0c;确认了组件的功能能满足需求&#xff0c;具备…
阅读更多...
移动机器人路径规划（二）--- 图搜索基础，Dijkstra，A*，JPS

移动机器人路径规划（二）--- 图搜索基础，Dijkstra，A*，JPS

目录 1 图搜索基础 1.1 机器人规划的配置空间 Configuration Space 1.2 图搜索算法的基本概念 1.3 启发式的搜索算法 Heuristic search 2 A* Dijkstra算法 2.1 Dijkstra算法 2.2 A*&&Weighted A*算法 2.3 A* 算法的工程实践中的应用 3 JPS 1 图搜索基础 1.1…
阅读更多...
V100 GPU服务器安装GPU驱动教程

V100 GPU服务器安装GPU驱动教程

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…
阅读更多...
计算机网络——物理层-信道的极限容量（奈奎斯特公式、香农公式）

计算机网络——物理层-信道的极限容量（奈奎斯特公式、香农公式）

目录 介绍 奈氏准则 香农公式 介绍 信号在传输过程中&#xff0c;会受到各种因素的影响。 如图所示&#xff0c;这是一个数字信号。 当它通过实际的信道后&#xff0c;波形会产生失真&#xff1b;当失真不严重时&#xff0c;在输出端还可根据已失真的波形还原出发送的码元…
阅读更多...
JVM垃圾回收相关概念

JVM垃圾回收相关概念

目录 一、System.gc()的理解 二、内存溢出与内存泄露 &#xff08;一&#xff09;OOM &#xff08;二&#xff09;内存泄露 三、StopTheWorld 四、垃圾回收的并行与并发 五、安全点与安全区域 &#xff08;一&#xff09;安全点 &#xff08;二&#xff09;安全区域 …
阅读更多...
数据结构【DS】树与二叉树的应用

数据结构【DS】树与二叉树的应用

哈夫曼树 树的带权路径长度最小的二叉树WPL 路径长度【边数】 * 结点权值n个叶结点的哈夫曼树共有 2n-1 个结点 哈夫曼树的任意非叶结点的左右子树交换后仍是哈夫曼树对同一组权值&#xff0c;可能存在不同构的多棵哈夫曼树&#xff0c;但树的带权路径长度最小且唯一哈夫曼树…
阅读更多...
C/C++高精度

C/C++高精度

个人主页&#xff1a;仍有未知等待探索_C语言疑难,数据结构,小项目-CSDN博客 专题分栏&#xff1a;算法_仍有未知等待探索的博客-CSDN博客 为什么需要高精度算法&#xff1f; 由于c不能进行位数过高的数据运算&#xff0c;所以要通过模拟数组来进行运算&#xff0c;首先是加法。…
阅读更多...
基于类电磁机制算法优化概率神经网络PNN的分类预测 - 附代码

基于类电磁机制算法优化概率神经网络PNN的分类预测 - 附代码

基于类电磁机制算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于类电磁机制算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于类电磁机制优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针…
阅读更多...
使用ChatGPT进行数据分析案例——贷款数据分析

使用ChatGPT进行数据分析案例——贷款数据分析

目录 数据数据 每一行是一个记录，代表着一笔贷款，每一列是一个特征，一共1万多条数据，最后一列非常重要save_loans是否成功收回
阅读更多...
SpringBean的配置详解 --中

SpringBean的配置详解 --中

目录 Bean的初始化和销毁方法配置 Bean的初始化和销毁方法配置 扩展 Bean的实例化 Bean的初始化和销毁方法配置 当lazy-init设置为true时为延迟加载&#xff0c;也就是当Spring容器加载的时候&#xff0c;不会立即创建Bean实例&#xff0c;等待用到时再创建Bean实例并存储到单…
阅读更多...
[AutoSar]CP autosar 面试题

[AutoSar]CP autosar 面试题

目录 关键词前言面试官提问答案 关键词 嵌入式、C语言、autosar、面试题 前言 以前面试中的一些常提到的问题&#xff0c;在这里整理一下&#xff0c;希望对要去面试的道友有所帮助。 其中问题的答案后续有时间会再更新整理。 面试官提问 1.Autosar 概述&#xff1a; 解释 …
阅读更多...
传输层协议-TCP协议

传输层协议-TCP协议

目录 TCP协议格式理解可靠性序号与确认序号16位窗口大小六个标志位连接管理机制三次握手四次挥手 确认应答机制&#xff08;ACK&#xff09;超时空重传机制流量控制滑动窗口拥塞控制延迟应答捎带应答面向字节流粘包问题TCP异常情况TCP小结基于TCP应用层协议TCP/UDP对比用UDP实现…
阅读更多...
AD教程 （十九）PCB板框的评估和层叠设置

AD教程 （十九）PCB板框的评估和层叠设置

AD教程 &#xff08;十九&#xff09;PCB板框的评估和层叠设置 板子越小&#xff0c;层数越少&#xff0c;成本越低 PCB板框评估 器件摆放 CtrlA 选中全部器件点击工具&#xff0c;选择器件摆放&#xff0c;选择在矩形区域排列 框定矩形区域&#xff0c;器件就会摆放在框定的矩…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023