MediaWiki:Gadget-tikuRenderModule.js

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 (){
        reset(dataLength,"A")
    })
    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=='A'){
            typeAModule(i)
            typeAChoice(jsonData,i)
        }
    }

}
function typeAChoice(json,id){
    var subjectCon = $('#subjectContainer-A').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')
    var char = ['A: ','B: ','C: ','D: ','E: ',]
    var i = 0
    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+'" />'+char[i]+json.choices[key]+'</label>'
            answers.append(label)
        }
        i+=1
    }
}
function typeAModule(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><br><p><b>解析： </b></p>\n' +
        '            <p class="explain"></p></div><hr>').appendTo(main)
    main.appendTo($('#subjectContainer-A'))
    $("#showSingle-"+id).bind("click",function (){
        showAnswer(id,'A')
    })
}
function removeBackground(obj){
    obj.addClass('no-background')
}
function showAnswer(id,type){
    var subjectCon = $('#subjectContainer-'+type).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 reset(length,type){
    for(var id=0;id<length;id++){
        var choice = $('input:radio').attr("checked",false)
        var subjectCon = $('#subjectContainer-'+type).children('#'+id)
        var correctCon = subjectCon.children('.correctContainer')
        var btn = $('#showSingle-'+id).removeClass('noDisplay')
        correctCon.fadeOut(100)
    }
}
setTimeout(function (){
	getdata();
},0);