MediaWiki:Gadget-tikuRenderModule.js

function getdata(){
    var data = $('.data')
    var dataLength = data.length
    var subjectCon = $('.subjectContainer')
    console.log(data)
    $('<button class="button" id="typeAReset">重置答题状态</button>').prependTo($('#subjectContainer-A'))
    $('<button class="button" id="typeBReset">重置答题状态</button>').prependTo($('#subjectContainer-B'))
    $('<button class="button" id="typeCReset">重置答题状态</button>').prependTo($('#subjectContainer-C'))
    $('<button class="button" id="typeXReset">重置答题状态</button>').prependTo($('#subjectContainer-X'))
    $('#typeAReset').bind("click",function (){
        reset(dataLength,"A")
    })
    $('#typeBReset').bind("click",function (){
        reset(dataLength,"B")
    })
    $('#typeCReset').bind("click",function (){
        reset(dataLength,"C")
    })
    $('#typeXReset').bind("click",function (){
        reset(dataLength,"X")
    })
    for(var i=0;i<dataLength;i++){
        var singleData = $(data[i]).text()
        console.log(singleData)
        var jsonData = $.parseJSON(singleData)
        console.log(jsonData)
        console.log(jsonData.type)
        if(jsonData.type=='A'){
            typeAModule(i)
            typeAChoice(jsonData,i)
        }else if(jsonData.type=='B'){
            typeBModule(i)
            typeBChoice(jsonData,i)
        }else if(jsonData.type=='C'){
            typeCModule(i)
            typeCChoice(jsonData,i)
        }else if(jsonData.type=='X'){
            typeXModule(i)
            typeXChoice(jsonData,i)
        }
    }

}
function removeBackground(obj){
    obj.addClass('no-background')
}
function showChoiceAnswer(id,type){
    var subjectCon = $('#subjectContainer-'+type).children('#'+id)
    var titleCon = subjectCon.children('.subject').children('.titleContainer')
    var ansCon = subjectCon.children('.ansContainer')
    var answers = subjectCon.children('.subject').children('.answers')
    var correctAns= ansCon.children('.correctAnswer')
    console.log(id)
    if(type=="A"){
        var correctAnsText = correctAns.text()

        var choice = $('input[name="singelChoice-'+id+'"]:checked').val();
        console.log(choice)
        var showCorrect = answers.children('#'+correctAnsText)
        var showChoice = answers.children('#'+choice)
        var btn = $('#showSingle-'+id).addClass('noDisplay')
        ansCon.fadeIn(100)
        if(choice==correctAnsText){
            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);
    }else if(type=="B"){
        console.log(titleCon)
        titleCon.children('div').each(function (index,i){
            console.log(i)
            var subTitleID = $(i).attr('id')
            var ans = $('#ans-'+subTitleID).text().split('：')[1]
            var choice = $('#'+id+'-'+index).find("option:selected").text();
            console.log(choice)
            if(choice==ans){
                $('#'+id+'-'+index).addClass('correct')
            }else {
                $('#'+id+'-'+index).addClass('wrong')
                $('<p class="answerTip">正确答案：'+ans+'</p>').appendTo($('#'+id+'-'+index))

            }
            setTimeout(function (){
                $('#'+id+'-'+index).removeClass('correct')
                $('#'+id+'-'+index).removeClass('wrong')
            }, 5000);
        })
    } else if(type=="C"){
        console.log(titleCon)
        titleCon.children('div').each(function (index,i){
            console.log(i)
            var subTitleID = $(i).attr('id')
            var ans = $('#ans-'+subTitleID).text().split('：')[1]
            var choice = $('#'+id+'-'+index).find("option:selected").text();
            console.log(choice)
            if(choice==ans){
                $('#'+id+'-'+index).addClass('correct')
            }else {
                $('#'+id+'-'+index).addClass('wrong')
                $('<p class="answerTip">正确答案：'+ans+'</p>').appendTo($('#'+id+'-'+index))

            }
            setTimeout(function (){
                $('#'+id+'-'+index).removeClass('correct')
                $('#'+id+'-'+index).removeClass('wrong')
            }, 5000);
        })
    }else if(type=="X"){
        var correctAnsText = correctAns.text()
        var choice = ""
        $('input[name="singelChoice-'+id+'"]:checked').each(function (){
            choice += $(this).val()
        })
        console.log(choice)
        console.log(correctAnsText)
        var btn = $('#showSingle-'+id).addClass('noDisplay')
        ansCon.fadeIn(100)
        for(var i=0;i<choice.length;i++){
            var showCorrect = answers.children('#'+correctAnsText[i])
            var showChoice = answers.children('#'+choice[i])
            if(correctAnsText.indexOf(choice[i])!=-1){
                showChoice.addClass('correct')
            }else{
                showChoice.addClass('wrong')
            }
        }
        for(var i=0;i<correctAnsText.length;i++){
            var showCorrect = answers.children('#'+correctAnsText[i])
            $('<p class="answerTip">✓</p>').appendTo(showCorrect)
        }
        answers.children('label').each(function (){
            var a = $(this)
            setTimeout(function (){
                removeBackground(a)
            }, 4000);
            setTimeout(function (){
                a.removeClass('no-background')
                a.removeClass('correct')
                a.removeClass('wrong')
            }, 5000);
        })
    }
}
function reset(length,type){
    if(type=="A"){
        for(var id=0;id<length;id++){
            var choice = $('input:radio').removeAttr('checked')
            var subjectCon = $('#subjectContainer-'+type).children('#'+id)
            var ansCon = subjectCon.children('.ansContainer')
            $('#showSingle-'+id).removeClass('noDisplay')
            ansCon.fadeOut(100)
        }
    }else if(type=="B"){
        $('.answerTip').css('display','none')
        var typeBselected=$('#subjectContainer-B').children('.typeB').children('.subject').children('.titleContainer').children('div').children('select')
        typeBselected.each(function () {
            $(this).children("option").eq(0).prop("selected",true)
        })
    }else if(type=="C"){
        $('.answerTip').css('display','none')
        var typeBselected=$('#subjectContainer-C').children('.typeC').children('.subject').children('.titleContainer').children('div').children('select')
        typeBselected.each(function () {
            $(this).children("option").eq(0).prop("selected",true)
        })
    }else if(type=="X") {
        $('.answerTip').css('display', 'none')
        for (var id = 0; id < length; id++) {
            var choice = $('input:checkbox').each(function () {
                $(this).prop('checked', false)
            })
            var subjectCon = $('#subjectContainer-' + type).children('#' + id)
            var ansCon = subjectCon.children('.ansContainer')
            $('#showSingle-' + id).removeClass('noDisplay')
            ansCon.fadeOut(100)
        }
    }

}
//A型题
function typeAChoice(json,id){
    var subjectCon = $('#subjectContainer-A').children('#'+id)
    var titleCon = subjectCon.children('.subject').children('.titleContainer')
    var ansCon = subjectCon.children('.ansContainer')
    var source = titleCon.children('.source').text(json.source)
    var title = titleCon.children('.title').text(json.title)
    var correctAns = ansCon.children('.correctAnswer').text(json.answer)
    var exp = ansCon.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+'" class="typeA"></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 class="button" id="showSingle-'+id+'" class="showSingleBtn">提交</button>').appendTo(main)
    var ansCon = $('<div id="ansContainer" class="ansContainer 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 (){
        showChoiceAnswer(id,'A')
    })
}
//B型题
function typeBChoice(json,id){
    var subjectCon = $('#subjectContainer-B').children('#'+id)
    var subject = subjectCon.children('.subject')
    var titleCon = subjectCon.children('.subject').children('.titleContainer')
    var ansCon = subjectCon.children('.ansContainer')
    var source = json.source
    var range = json.sourceRange
    var end = source *1 + range*1 -1
    var title = json.title
    var correctAns = json.answer
    var exp = ansCon.children('.explain').text(json.explain)
    var answers = subjectCon.children('.subject').children('.answers')
    var char = ['A: ','B: ','C: ','D: ','E: ',]
    var sourceRange = subject.children('.sourceRange').text('第 '+source+' 到 '+end+' 题')
    for(var n=0;n<title.length;n++){
        var text = title[n].replace("()",function(a){
            return "(<select class=\"button-small button-rounded button\"> " +
                "<option value ='A'>A</option>" +
                "<option value ='B'>B</option>" +
                "<option value ='C'>C</option>" +
                "<option value ='D'>D</option>" +
                "<option value ='E'>E</option>" +
                "</select>)"
        })
        var div = '<div id="'+id+'-'+n+'"><p class="source">'+'T'+(source*1+n)+'</p>'+text+'</div>'
        titleCon.append(div)
    }
    var i = 0
    for(var key in json.choices){
        if(json.choices[key].length>0){
            var label = '<li id="'+key+'">'+char[i]+json.choices[key]+'</li>'
            answers.append(label)
            console.log(label)
        }
        i+=1
    }
    text = ''
    for(var n=0;n<correctAns.length;n++){
        text += '<p id="ans-'+id +'-'+n+'">'+(id*1+n)+'：'+correctAns[n]+'</p>'
        ansCon.children('.correctAnswer').html(text)
    }
}
function typeBModule(id){
    var main = $('<div id="'+id+'" class="typeB"></div>')
    var subject = $('<div class="subject">' +
        '<div class="sourceRange"></div>'+
        '<div class="answers"></div>'+
        '<div class="titleContainer"></div></div>'
        ).appendTo(main)
    var showButton = $('<button class="button-tiny button-pill button button-caution" id="showSingle-'+id+'" class="showSingleBtn">提交</button>').appendTo(main)
    var ansCon = $('<div id="ansContainer" class="ansContainer 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-B'))
    $("#showSingle-"+id).bind("click",function (){
        showChoiceAnswer(id,'B')
    })
}
//C型题
function typeCModule(id){
    var main = $('<div id="'+id+'" class="typeC"></div>')
    var subject = $('<div class="subject">' +
        '<div class="sourceRange"></div>'+
        '<div class="titleContainer"></div>'+
        '<div class="answers"></div></div>'
    ).appendTo(main)
    var showButton = $('<button class="button-tiny button-pill button button-caution" id="showSingle-'+id+'" class="showSingleBtn">提交</button>').appendTo(main)
    var ansCon = $('<div id="ansContainer" class="ansContainer 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-C'))
    $("#showSingle-"+id).bind("click",function (){
        showChoiceAnswer(id,'C')
    })
}
function typeCChoice(json,id){
    var subjectCon = $('#subjectContainer-C').children('#'+id)
    var subject = subjectCon.children('.subject')
    var titleCon = subjectCon.children('.subject').children('.titleContainer')
    var ansCon = subjectCon.children('.ansContainer')
    var source = json.source
    var range = json.sourceRange
    var end = source *1 + range*1 -1
    var title = json.title
    var correctAns = json.answer
    var exp = ansCon.children('.explain').text(json.explain)
    var answers = subjectCon.children('.subject').children('.answers')
    var char = ['A: ','B: ','C: ','D: ','E: ',]
    var sourceRange = subject.children('.sourceRange').text('第 '+source+' 到 '+end+' 题')
    for(var n=0;n<title.length;n++){
        var text = title[n].replace("()",function(a){
            return "(<select class=\"button-small button-rounded button\"> " +
                "<option value ='A'>A</option>" +
                "<option value ='B'>B</option>" +
                "<option value ='C'>C</option>" +
                "<option value ='D'>D</option>" +
                "<option value ='E'>E</option>" +
                "</select>)"
        })
        var div = '<div id="'+id+'-'+n+'"><p class="source">'+'T'+(source*1+n)+'</p>'+text+'</div>'
        titleCon.append(div)
    }
    var i = 0
    for(var key in json.choices){
        if(json.choices[key].length>0){
            var label = '<li id="'+key+'">'+char[i]+json.choices[key]+'</li>'

            answers.append(label)
            console.log(label)
        }
        i+=1
    }
    text = ''
    for(var n=0;n<correctAns.length;n++){
        text += '<p id="ans-'+id +'-'+n+'">'+(id*1+n)+'：'+correctAns[n]+'</p>'
        ansCon.children('.correctAnswer').html(text)
    }
}
//X型题
function typeXChoice(json,id){
    var subjectCon = $('#subjectContainer-X').children('#'+id)
    var titleCon = subjectCon.children('.subject').children('.titleContainer')
    var ansCon = subjectCon.children('.ansContainer')
    var source = titleCon.children('.source').text(json.source)
    var title = titleCon.children('.title').text(json.title)
    var correctAns = ansCon.children('.correctAnswer').text(json.answer)
    var exp = ansCon.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="checkbox" value="'+key+'" />'+char[i]+json.choices[key]+'</label>'
            answers.append(label)
        }
        i+=1
    }
}
function typeXModule(id){
    var main = $('<div id="'+id+'" class="typeX"></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 class="button" id="showSingle-'+id+'" class="showSingleBtn">提交</button>').appendTo(main)
    var ansCon = $('<div id="ansContainer" class="ansContainer 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-X'))
    $("#showSingle-"+id).bind("click",function (){
        showChoiceAnswer(id,'X')
    })
}

setTimeout(function (){
	getdata();
},0);