查看“MediaWiki:Gadget-tikuRenderModule.js”的源代码

$(window).load(function(){
    getdata()
})
function getdata(){
    var data = $('.data')
    var dataLength = data.length
    var subjectCon = $('.subjectContainer')
    console.log(data)
    $('<button id="singleChoiceReset" onclick="resetSingleChoice('+dataLength+')">重置答题状态</button>').prependTo(subjectCon)
    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+'" onclick="showAnswer('+id+')">提交</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>').appendTo(main)
    main.appendTo($('.subjectContainer'))
}
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)
    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')
        correctCon.fadeOut(100)
    }
}