JS实现答题上一题下一题

以下是实现效果图

JS块代码

 var TRUE_COUNT = 0//正确的题数var count = 10;//当前所在题数var thisURL = document.URL;var getval = thisURL.split('?')[1];var titleType = getval.split("=")[1];//获取题目typevar class_radio = "selection";//选择按钮var urlPath = url() + "findProblemBank.do?type=" + titleType;var urlPath1 = url() + "checkAnswer.do" ;
var showProblem = function(urlPath, urlPath1, titleType) {$.ajax({type : "POST",url : urlPath,contentType : "application/x-www-form-urlencoded; charset=utf-8",success : function(data) {var str = '{"ProblemBank":' + data + "}"result = eval("(" + str + ")")var impl = new judge({el : '.textButton',data : result,render : function(index, data,answer) {//如果完成答题后返回查询答案if(index>1){$.ajax({type : "POST",url : urlPath1,data:{answer:JSON.stringify(answer)},dataType:'json',contentType : "application/x-www-form-urlencoded; charset=utf-8",success : function (data) {}});}if("1"==data.ProblemBank[index].answerType){document.getElementById("typeof").innerHTML ="(单选题)"}else if("2"==data.ProblemBank[index].answerType){document.getElementById("typeof").innerHTML ="(多选题)"}document.getElementById("type").innerHTML = index+1+"/10"var class_radio = document.getElementsByClassName("selection");document.getElementById("title").innerHTML = data.ProblemBank[index].problemTitle;class_radio[0].nextElementSibling.innerHTML = data.ProblemBank[index].a;class_radio[1].nextElementSibling.innerHTML = data.ProblemBank[index].b;class_radio[2].nextElementSibling.innerHTML = data.ProblemBank[index].c;class_radio[3].nextElementSibling.innerHTML = data.ProblemBank[index].d;for(var i = 0; i < class_radio.length ; i++){class_radio[i].checked = false;} },checked : function() {var answerStr = "";var class_radio = document.getElementsByClassName("selection");// var jsonLength = result.ProblemBank.length//json数组的长度for (var i = 0; i < class_radio.length; i++) {var a = ["A", "B", "C", "D"];if (class_radio[i].checked) {answerStr += a[i];} }return answerStr;}});},error : function() {alert("服务器开小差啦!");}});
}
//判断上一题，下一题
var judge = function(obj) {this.data = obj.data;var index = '';var node = '';var answer = [];var _this = this;function bindOnclick(node, func, render, checked) {node.onclick = function() {var option = checked();answer[index] = option;func();render(index, _this.data,answer);};}function initNode(el) {node = document.querySelectorAll(el);}function init() {console.log(answer);index = 0;initNode(obj.el);bindOnclick(node[0], function(){index--},obj.render, obj.checked);bindOnclick(node[1], function(){index++},obj.render, obj.checked);obj.render(index, _this.data);}this.getAnswers = function() {return this.answer;};init();
}

HTML主要代码

 <scan id="typeof"></scan><scan id="id" ></scan><br /><scan id="title"></scan><br /><input class="selection "  type = "checkbox" id = "A" name="selection"  /><label for="A"><scan id="A"></scan></label><br/><input class="selection" type = "checkbox" id = "B" name="selection" /><label for="B"><scan id="B"></scan></label><br/><input class="selection" type = "checkbox" id = "C" name="selection" /><label for="C"><scan id="C"></scan></label><br/><input class="selection" type = "checkbox" id = "D" name="selection" /><label for="D"><scan id="D"></scan></label><br/></div><div id="select" name="choose"><div style="float:left" class="btnr ub ub-ac bc-text-head ub-pc bc-btn uc-a1 textButton"   id="forward"  >上一题</div><div style="float:right" class="btnr ub ub-ac bc-text-head ub-pc bc-btn uc-a1 textButton"   id="next" >下一题</div></div>

JS实现答题上一题下一题相关推荐

js、jq实现答题上一题下一题
一.以下是效果图说明:第一题只有一个"下一题"按钮,中间题目有两个按钮"上一题""下一题",最后一题按钮改为"提交": ...
怎么用vue2实现上一题下一题的答题功能
可以使用Vue2中提供的v-if,v-for和v-show指令来实现上一题下一题的答题功能.首先,可以使用v-for指令来遍历所有的题目,然后使用v-if和v-show指令来控制显示哪一题.最后,可以 ...
vue实现调查问卷一页一题，上一题下一题形式
使用了vant组件的radio 单选框官网https://youzan.github.io/vant/#/zh-CN/radio 效果图效果图做出来的效果图就是上面那样一页一题附上代码: & ...
vue 简单实现上一题下一题问答效果
1.先来看下效果(左上展示题目数量以及当前题序号,当第一题时只有下一题按钮,未回答问题时无法点击下一题,且回答结果展示错误或正确的颜色) 2.接下来我们来看下html是怎么写的吧 <! ...
vue实现答题考试功能(上一题下一题)
1,后端返回数据 questionList: [{id: "1",name: "one",question: "问题1111111?",an ...
JS-实现上一题下一题切换功能
业务背景:某个数据列表需要对其中的每行数据进行详细信息修改配置.为了提升用户体验,需要在用户触发单条任务记录详细配置界面之后添加进入上一题和下一题的操作. 实现构思:有两种办法:第一种简单点的话就是不 ...
js实现图片上一张下一张点击
1.实现效果 2.实现原理根据数组的长度和一个div的宽度,计算出父元素的长度. document.getElementById("goods_bx").style.width= ...
天空卫士监控行为显示叉_提示信息判断题，请判断对错！　　快捷键设置　　元贝驾考暂停上一题下一题...
1 驾驶机动车遇到这种信号灯亮时,如果已越过停止线,可以继续通行.查看本题分析 2 行驶在高速公路上遇大雾视线受阻时,应当立即紧急制动停车.查看本题分析 3 机动车仪表板上(如图所示)亮表示发动机可能 ...
php 答题一页一题,微信小程序答题，怎么设计页面渲染，答完一题，跳到下一题...
想要的效果 1.第一页只显示第一道题的内容,如图红框 2.答题后,点击下一题,内容显示第二道题的内容代码 answer.wxml 全民答题总共1/10题 {{index+1}}: {{item.t ...

JS实现答题上一题下一题

以下是实现效果图

JS块代码

HTML主要代码

JS实现答题上一题下一题相关推荐

最新文章

热门文章