数学题在线解答,百度拍题在线使用

2020-10-13 阅读 许俊语整理

内容简介:搜题库在线有时我们需要在网页上添加一个在线测试功能,比如在线调查、在线测试各种知识等应用程序,这需要很多前后台的技巧。今天,我将共享一个基于jQuery HTML的前端应百度答题...

有时在网页中要加入一个在线测试功能,例如在线调查,在线测试各类知识等应用,这类应用需要用到很多前后端技能。

今天我给大家分享一个基于jQuery的前端应用测试答题功能。

HTML首先载入jquery库文件和quiz.js以及所需的CSS样式文件styles.css。

复制代码代码如下:然后在需要放置测试题的位置加入div#quiz-container。

复制代码代码如下:jQuery首先,我们定义题目和答案选项,question是题目,answers是答案选项,correctAnswer是正确答案。

可以看出定义的init是一个json数据格式。

复制代码代码如下:varinit={'questions':[{'question':'jQuery是什么?','answers':['JavaScript库','CSS库','PHP框架','以上都不是'],'correctAnswer':1},{'question':'找出不同类的一项?','answers':['写字台','沙发','电视','桌布'],'correctAnswer':3},{'question':'国土面积最大的国家是:','answers':['美国','中国','俄罗斯','加拿大'],'correctAnswer':3},{'question':'月亮距离地球多远?','answers':['18万公里','38万公里','100万公里','180万公里'],'correctAnswer':2}]};接下来,我们直接调用quiz.js提供的插件方法,然后打开页面是不是可以看到已经在页面上生成了一个在线测试项目。

复制代码代码如下:$(function(){$('#quiz-container').jquizzy({questions:init.questions});});那么,要修改定制测试题样式布局,可以到quiz.js和styles.css两文件中做适当修改。

疑问到这里,细心的朋友就会发现,问题来了:1、直接将题目的正确答案标记在js代码中,是不是不安全?正规的测试项目答案是不是应该在后台判断,以免有人查看源代码直接获取正确答案。

2、如何与后台交互?比如测试答题前先验证身份,答题完后将结果发送给后台。

我想说的是,这是一个前端代码演示项目,真正的应用答案是不会出现在前端代码中的;quiz.js其实已经有与后台ajax交互的接口,我们会在后面的文章中做详细介绍

作者给您推荐的内容
  1. 很多淘宝卖家可能不清楚优惠劵设置是在哪里操作,我就为大家介绍一下具体的操作流程。01、首先,进入淘宝卖家中心后台,在“我订购的应用”中找到“营销中心”,点开“店铺营销工具”。(...

  2. ddr3和ddr4玩游戏区别大吗内存模块DDR4和DDR3内存差异1:处理器haswell-e体系结构说明每次升级内存时必须支持处理器。haswell-e平台的内存设计为ivb-e/snb-eddr3有必要升级ddr4平台么...

  3. 支付宝的功能越来越强大了,现在支付宝可以查看学籍,你知道怎么操作吗?01、首先,在手机主页面找到并打开支付宝app,如图所示02、然后,在【首页】找到并选择【校园生活】,如图所示03、...

  4. win7旗舰版升级win10今天,小版Windows 7为您带来了Win7 Rainforest Tree Win 7旗舰版的32位安装教程,2016,稳定/安全/快速,良好的兼容性,以及win7旗舰版激活...

  5. 如果内存条接触不良内存模块接触不良,会导致计算机无法正常使用。内存模块因灰尘,或内存模块金手指氧化,可导致接触不良。计算机启动时无法检测内存。启动时黑屏、底盘喇叭长鸣报警、...

  6. 小米云服务是小米手机的一个大特色,我们可以通过云服务随时上传自己的应用数据,避免误删,来看看怎么打开小米云呢?01、小米云服务虽然是小米相关的一个概念,但是它并没有在“我的小米...

  7. 电脑怎么重装系统win7当时,只要有人在网上说电脑公司版系统不好,小版就得对敌作战!现在人们长大了,觉得自己应该为社会做出贡献。所以今天,我要win7电脑重装系统...

  8. 漂流瓶收不到回复怎么办?下面就这个话题跟大家一起来说一下01、首先我想说的是,目前玩漂流瓶的人很少了,捡的人少了,自然就回复的少了。所以这是没有办法的事情02、另外你的漂流瓶肯...

  9. 会声会影怎么做动态字幕字幕分为静态字幕和动态字幕,其中动态字幕,如出现在影片最后一卷的演员名单,属于滚动字幕,而其他字幕效果,如逐渐放大或跳动。今天,让我们学习如...

  10. MAC系统如何自动排列文件图标?MAC电脑下新文件夹的默认排列模式是“无”,因此大量的文件拖放会导致文件夹看起来凌乱不堪,处女座无法直接查看。这里有一个小编辑器教你如何通过点击来排...