JS实现答题上一题下一题

大家好，欢迎来到IT知识分享网。

以下是实现效果图

JS块代码

 var TRUE_COUNT = 0//正确的题数 var count = 10; //当前所在题数 var thisURL = document.URL; var getval = thisURL.split('?')[1]; var titleType = getval.split("=")[1]; //获取题目type var 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>