注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Internet Explorer或Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5
- Opera:按 Ctrl-F5。
function getdata(){
var data = $('.data');
var dataLength = data.length;
var subjectCon = $('.subjectContainer');
console.log(data);
$('<button id="singleChoiceReset">重置答题状态</button>').prependTo(subjectCon)
$('#singleChoiceReset').bind("click",function (){
resetSingleChoice(dataLength)
})
for(var i=0;i<dataLength;i++){
var singleData = $(data[i]).text();
console.log(singleData);
var jsonData = $.parseJSON(singleData);
console.log(jsonData);
if(jsonData.type=='singleChoice'){
singleChoiceModule(i);
singleChoice(jsonData,i);
}
}
}
function singleChoice(json,id){
var subjectCon = $('.subjectContainer').children('#'+id);
var titleCon = subjectCon.children('.subject').children('.titleContainer');
var correctCon = subjectCon.children('.correctContainer');
var source = titleCon.children('.source').text(json.source);
var title = titleCon.children('.title').text(json.title);
var correctAns = correctCon.children('.correctAnswer').text(json.answer);
var exp = correctCon.children('.explain').text(json.explain);
var answers = subjectCon.children('.subject').children('.answers');
for(var key in json.choices){
if(json.choices[key].length>0){
var label = '<label id="'+key+'"><input name="singelChoice-'+id+'" type="radio" value="'+key+'" />'+json.choices[key]+'</label>';
answers.append(label);
}
}
}
function singleChoiceModule(id){
var main = $('<div id="'+id+'"></div>')
var subject = $('<div class="subject">' +
'<div class="titleContainer"><p class="source"></p><p class="title"></p></div>' +
'<div class="answers"></div></div>').appendTo(main)
var showButton = $('<button id="showSingle-'+id+'" class="showSingleBtn">提交</button>').appendTo(main)
var correctCon = $('<div id="correctContainer" class="correctContainer noDisplay">' +
' <p style="display:inline;"><b>正确答案:</b></p>\n' +
' <p class="correctAnswer"></p><p><b>解析: </b></p>\n' +
' <p class="explain"></p></div><hr>').appendTo(main)
main.appendTo($('.subjectContainer'))
$("#showSingle-"+id).bind("click",function (){
showAnswer(id)
})
}
function removeBackground(obj){
obj.addClass('no-background');
}
function showAnswer(id){
var subjectCon = $('.subjectContainer').children('#'+id);
var correctCon = subjectCon.children('.correctContainer');
var answers = subjectCon.children('.subject').children('.answers');
var correctAns= correctCon.children('.correctAnswer').text();
var choice = $('input[name="singelChoice-'+id+'"]:checked').val();
console.log(choice);
var showCorrect = answers.children('#'+correctAns);
var showChoice = answers.children('#'+choice);
var btn = $('#showSingle-'+id).addClass('noDisplay');
correctCon.fadeIn(100);
if(choice==correctAns){
showCorrect.addClass('correct');
}else{
showCorrect.addClass('correct');
showChoice.addClass('wrong');
}
setTimeout(function (){
removeBackground(showChoice);
removeBackground(showCorrect);
}, 4000);
setTimeout(function (){
showCorrect.removeClass('no-background');
showChoice.removeClass('no-background');
showCorrect.removeClass('correct');
showChoice.removeClass('wrong');
}, 5000);
}
function resetSingleChoice(length){
for(var id=0;id<length;id++){
var choice = $('input:radio').attr("checked",false);
var subjectCon = $('.subjectContainer').children('#'+id);
var correctCon = subjectCon.children('.correctContainer');
var btn = $('#showSingle-'+id).removeClass('noDisplay')
correctCon.fadeOut(100);
}
}
setTimeout(function (){
getdata();
},0)