MediaWiki:Gadget-tikuRenderModule.js

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);
    }
}
getdata();