CSS+jQuery完成的线上解题作用

日期:2021-03-05 类型:科技新闻 

关键词:商城网站建设,微商好助手,微商引流,电商网站模板,微信商家小程序

有时在网页页面中要添加1个线上检测作用,比如线上调研,线上检测各类专业知识等运用,这类运用必须用到许多前后左右端专业技能。今日我给大伙儿共享1个根据jQuery的前端开发运用——检测解题作用。

源代码免费下载:点此免费下载

HTML

最先加载jquery库文档和quiz.js和所需的CSS款式文档styles.css。

拷贝编码
编码以下:

<script src="jquery.js"></script>
<script src="quiz.js"></script>
<link rel="stylesheet" href="styles.css" />

随后在必须置放检测题的部位添加div#quiz-container。

拷贝编码
编码以下:

<div id="quiz-container"></div>

jQuery

最先,大家界定题型和回答选项,question是题型,answers是回答选项,correctAnswer是正确回答。能够看出界定的init是1个json数据信息文件格式。

拷贝编码
编码以下:

var init={'questions':[{'question':'jQuery是甚么?','answers':['JavaScript库','CSS库','PHP架构','以上都并不是'],'correctAnswer':1},{'question':'找出不一样类的1项?','answers':['写字台','沙发','电视机','桌布'],'correctAnswer':3},{'question':'土地面积最大的我国是:','answers':['美国','我国','俄罗斯','加拿大'],'correctAnswer':3},{'question':'月儿间距地球多远?','answers':['18万千米','38万千米','100万千米','180万千米'],'correctAnswer':2}]};

接下来,大家立即启用quiz.js出示的软件方式,随后开启网页页面是否能够看到早已在网页页面上转化成了1个线上检测新项目。

拷贝编码
编码以下:

$(function(){
$('#quiz-container').jquizzy({
questions: init.questions
});
});

那末,要改动订制检测题款式合理布局,能够到quiz.js和styles.css两文档中做适度改动。

疑惑

到这里,仔细的盆友就会发现,难题来了:

1、立即将题型的正确回答标识在js编码中,是否躁动不安全?正规的检测新项目回答是否应当在后台管理分辨,以防有人查询源码立即获得正确回答。

2、怎样与后台管理互动?例如检测解题前先认证身份,解题完后将結果推送给后台管理。
我想说的是,这是1个前端开发编码演试新项目,真实的运用回答是不容易出現在前端开发编码中的;quiz.js实际上早已有与后台管理ajax互动的插口,大家会在后边的文章内容中做详尽详细介绍,文章内容题目我早已想好了:怎样应用jQuery+PHP+MySQL来完成1个线上检测新项目,敬请关心。

上一篇:泗阳建立网站商谈信息内容 返回下一篇:没有了