MediaWiki:Gadget-tikuRenderModule.js

setTimeout(function (){
	getdata();
},0);
function tikuConfig(){
    return {isDev:false}
}
function getdata(){
    var data = $('.data')
    var dataLength = data.length
    var errs = {}
    for(var i=0;i<dataLength;i++){
        var singleData = $(data[i]).html()
        console.log(singleData)
        if($(data[i]).children().length>0){
            $(data[i]).children().each(
                function (i,v) {
                    console.log(v)
                    var innerHTML = entityToString(v)
                    console.log(innerHTML)
                    var escape  = ''
                    escape = innerHTML.replace(/"/g,'\\"')
                    console.log(escape)
                    singleData = singleData.replace(innerHTML,escape)
                }
            )
        }
        if(tikuConfig().isDev){
            var jsonData = $.parseJSON(singleData)
            console.log(jsonData)
            setTimeout(function(jsonData,i,dataLength){
                var o = eval('newTimu('+i+','+JSON.stringify(jsonData)+').'+jsonData.type+'()')
                render(i,jsonData.type,o)
                console.log('加载题目：'+(i+1)+'/'+dataLength)
            },0,jsonData,i,dataLength)
        }else {
            try{
                var jsonData = $.parseJSON(singleData)
                setTimeout(function(jsonData,i,dataLength){
                    var o = eval('newTimu('+i+','+JSON.stringify(jsonData)+').'+jsonData.type+'()')
                    render(i,jsonData.type,o)
                    console.log('加载题目：'+(i+1)+'/'+dataLength)
                },0,jsonData,i,dataLength)
            }catch (e) {
                render(i,'A',$('<div id="'+i+'"><p style="color: red">第'+(i+1)+'题加载错误，错误类型：'+e.name+'</p></div>'))
                errs[i] = e
            }
        }
    }
    var errText = $('<div style="width:100%;border:solid 3px red;padding-left:15px"><p><b style="color:red">本页存在题目加载错误</b></p></div>')
    var isNoErr = true
    for (var n in errs){
        errText.append('<p><b style="color:red;margin-left:8px">--->ID:'+n+'|可能对应题号:'+(n*1+1)+'</b> '+errs[n]+'</p>')
        isNoErr = false
    }
    if(!isNoErr){
    	$('.mw-parser-output').prepend(errText)
    }
}
function entityToString(entity){
    var div=$('<div></div>');
    div.html(entity)
    var res=div.html();
    console.log(entity,'->',res);
    return res;
}
function addAfter(id,content) {
    var data = $('.data')
    content.insertAfter(data[id])
}
function isObjExist(t){
	var l = $(t).length
    if(l>0){
    	return true
    }else {
    	return false
    }
}
function render(id,type,obj,parent){
    parent =parent !==undefined ?parent : '#subjectContainer-'+type
    if(typeof(parent)!=='object'){
        parent = $(parent)
    }
    if(isObjExist(parent)){obj.appendTo(parent)}else {addAfter(id,obj)}
}
function dicLen(dic){
    var count=0;
    for(var key in dic){
        console.log(key+'='+dic[key]);
        count++;
    }
    return count
}
function newTimu(id,json,hideButton,addHr,parent){
    parent = parent !== undefined ? parent : ''
    if(addHr===undefined){addHr=true}
    if(hideButton===undefined){hideButton=false}
    var type = json.type
    var o = new Object()
    o.temp = {
        main:$('<div id="'+id+'" class="type'+type+'"></div>'),
        subject:$('<div class="subject"></div>'),
        range:$('<div class="sourceRange"></div>'),
        info:$('<div class="info"></div>'),
        titleCon:$('<div class="titleContainer"></div>'),
        source:$('<p class="source"></p>'),
        title:$('<p class="title"></p>'),
        options:$('<div class="options"></div>'),
        btn:$('<button class="button-small button-pill button button-caution" id="showSingle-' + id + '" class="showSingleBtn">提交</button>'),
        ansCon:$('<div id="ansContainer" class="ansContainer noDisplay"></div>'),
        correct:$('<p style="display:inline;"><b>正确答案：</b></p><p class="correctAnswer"></p><br>'),
        explain:$('<p style="display:inline;"><b>解析： </b></p><p class="explain"></p><br>'),
        select:$('<select class="button-small button-rounded button"></select>'),
        subTitle:$('<div id=""></div>')
    }
    o.hideButton = hideButton
    o.parent = parent
    if(type!=='A3'&&type!=='PD'){
        o.temp.btn.bind("click",function (){
            showChoiceAnswer(id,type,json.answer)
        })
    }

    o.A = function () {
        this.temp.source.text(json.source)
        this.temp.title.html(json.title)
        this.temp.correct.nextAll('.correctAnswer').html(json.answer)
        this.temp.explain.nextAll('.explain').html(json.explain)
        var options = formatAnsDic(json.choices)
        for(var k in options) {
            var label = '<label id="' + k + '"><input name="singelChoice-' + id + '" type="radio" value="' + k + '" />' + k + '：' + options[k] + '</label>'
            this.temp.options.append(label)
        }
        this.temp.titleCon.append(this.temp.source,this.temp.title)
        this.temp.ansCon.append(this.temp.correct,this.temp.explain)
        this.temp.subject.append(this.temp.titleCon,this.temp.options)
        if(!hideButton){this.temp.subject.append(this.temp.btn)}
        this.temp.main.append(this.temp.subject,this.temp.ansCon)

        if(addHr){this.temp.main.append('<hr>')}
        return this.temp.main
    }
    o.A3 = function () {
        var subIDs = []
        var s = json.source*1;var e = json.source*1+json.sourceRange*1 -1
        this.temp.range.text('第 '+s+' 到 '+e+' 题')
        for(var i=0;i<json.title.length;i++){
            subIDs.push(id+'-'+i)
            if(json.explain[i]==undefined){
                json.explain[i] = '暂无解析'
            }
            var data = {
                "type":"A",
                "source":json.source+'-'+(i+1),
                "title":json.title[i],
                "answer":json.answer[i],
                "explain":json.explain[i],
                "choices":json.choices[i],
            }
            var newA = newTimu(id+'-'+i,data,true,false).A()
            render(id+'-'+i,'A',newA,this.temp.titleCon)
        }
        o.temp.btn.bind("click",function (){
            showChoiceAnswer(subIDs,type,json.answer)
        })
        this.temp.info.text(json.info)
        this.temp.subject.append(this.temp.range,this.temp.info,this.temp.titleCon)
        if(!hideButton){this.temp.subject.append(this.temp.btn)}
        this.temp.main.append(this.temp.subject)

        if(addHr){this.temp.main.append('<hr>')}
        return this.temp.main
    }
    o.B = function () {
        var s = json.source*1;var e = json.source*1+json.sourceRange*1 -1
        this.temp.range.text('第 '+s+' 到 '+e+' 题')

        var options = formatAnsDic(json.choices)
        for(var k in options){
            var label = '<li id="'+k+'">'+k+'：'+options[k]+'</li>'
            this.temp.options.append(label)
            this.temp.select.append('<option value="'+k+'">'+k+'</option>')
        }
        for(var i=0;i<json.title.length;i++){
            var reg1 = /\(\)/g
            var text = json.title[i]
            if(reg1.test(text)){
                text = text.replace("()",this.temp.select.prop("outerHTML"))
            }else{
                text += this.temp.select.prop("outerHTML")
            }
            this.temp.subTitle.attr('id',id+'-'+i)
            this.temp.source.text(s+i)
            this.temp.subTitle.html(this.temp.source.prop("outerHTML")+text)
            this.temp.titleCon.append(this.temp.subTitle.prop("outerHTML"))
        }
        for(var i=0;i<json.answer.length;i++){
            this.temp.correct.nextAll('.correctAnswer').append('<p id="ans-'+id +'-'+i+'">'+(s+i)+'：'+json.answer[i]+'</p>')
            this.temp.correct.nextAll('p').each(function () {
                $(this).css('display','none')
            })
        }
        for(var i=0;i<json.explain.length;i++){
            this.temp.explain.nextAll('.explain').append('<p id="exp-'+id +'-'+i+'">'+(s+i)+'：'+json.explain[i]+'</p>')
        }

        this.temp.subject.append(this.temp.range,this.temp.options,this.temp.titleCon)
        if(!hideButton){this.temp.subject.append(this.temp.btn)}
        this.temp.ansCon.append(this.temp.correct,this.temp.explain)
        this.temp.main.append(this.temp.subject,this.temp.ansCon)

        if(addHr){this.temp.main.append('<hr>')}
        return this.temp.main
    }
    o.C = function () {
        var s = json.source*1;var e = json.source*1+json.sourceRange*1 -1
        this.temp.range.text('第 '+s+' 到 '+e+' 题')

        var options = formatAnsDic(json.choices)
        for(var k in options){
            var label = '<li id="'+k+'">'+k+'：'+options[k]+'</li>'
            this.temp.options.append(label)
            this.temp.select.append('<option value="'+k+'">'+k+'</option>')
        }
        for(var i=0;i<json.title.length;i++){
            var reg1 = /\(\)/g
            var text = json.title[i]
            if(reg1.test(text)){
                text = text.replace("()",this.temp.select.prop("outerHTML"))
            }else{
                text += this.temp.select.prop("outerHTML")
            }
            this.temp.subTitle.attr('id',id+'-'+i)
            this.temp.source.text(s+i)
            this.temp.subTitle.html(this.temp.source.prop("outerHTML")+text)
            this.temp.titleCon.append(this.temp.subTitle.prop("outerHTML"))
        }
        for(var i=0;i<json.answer.length;i++){
            this.temp.correct.nextAll('.correctAnswer').append('<p id="ans-'+id +'-'+i+'">'+(s+i)+'：'+json.answer[i]+'</p>')
            this.temp.correct.nextAll('p').each(function () {
                $(this).css('display','none')
            })
        }
        for(var i=0;i<json.explain.length;i++){
            this.temp.explain.nextAll('.explain').append('<p id="exp-'+id +'-'+i+'">'+(s+i)+'：'+json.explain[i]+'</p>')
        }

        this.temp.subject.append(this.temp.range,this.temp.titleCon,this.temp.options)
        if(!hideButton){this.temp.subject.append(this.temp.btn)}
        this.temp.ansCon.append(this.temp.correct,this.temp.explain)
        this.temp.main.append(this.temp.subject,this.temp.ansCon)

        if(addHr){this.temp.main.append('<hr>')}
        return this.temp.main
    }
    o.X = function () {
        this.temp.source.text(json.source)
        this.temp.title.html(json.title)
        this.temp.correct.nextAll('.correctAnswer').html(json.answer)
        this.temp.explain.nextAll('.explain').html(json.explain)
        var options = formatAnsDic(json.choices)
        for(var k in options){
            var label = '<label id="'+k+'"><input name="singelChoice-'+id+'" type="checkbox" value="'+k+'" />'+k+'：'+options[k]+'</label>'
            this.temp.options.append(label)
        }

        this.temp.titleCon.append(this.temp.source,this.temp.title)
        this.temp.ansCon.append(this.temp.correct,this.temp.explain)
        this.temp.subject.append(this.temp.titleCon,this.temp.options)
        if(!hideButton){this.temp.subject.append(this.temp.btn)}
        this.temp.main.append(this.temp.subject,this.temp.ansCon)

        if(addHr){this.temp.main.append('<hr>')}
        return this.temp.main
    }
    o.PD = function () {
        this.temp.source.text(json.source)
        this.temp.title.html(json.title)
        this.temp.explain.nextAll('.explain').html(json.explain)
        var ans = ''
        if(json.answer=='T' || json.answer=='正确' || json.answer=='1' || json.answer=='√'){
            ans = '正确'
        }else if(json.answer=='F' || json.answer=='错误' || json.answer=='0' || json.answer=='×'){
            ans = '错误'
        }
        this.temp.correct.nextAll('.correctAnswer').html(ans)
        o.temp.btn.bind("click",function (){
            showChoiceAnswer(id,'A',ans)
        })
        this.temp.options.append('<label id="正确" style="display: inline;"><input name="singelChoice-'+id+'" type="radio" value="正确" />正确</label>' +
            '<label id="错误" style="display: inline;"><input name="singelChoice-'+id+'" type="radio" value="错误" />错误</label>')
        this.temp.titleCon.append(this.temp.source,this.temp.title)
        this.temp.ansCon.append(this.temp.correct,this.temp.explain)
        this.temp.subject.append(this.temp.titleCon,this.temp.options)
        if(!hideButton){this.temp.subject.append(this.temp.btn)}
        this.temp.main.append(this.temp.subject,this.temp.ansCon)

        if(addHr){this.temp.main.append('<hr>')}
        return this.temp.main
    }
    o.TK = function () {
        this.temp.source.text(json.source)
        var form = $('<form id="form-'+id+'" class="title"></form>')
        var pos = json.pos
        var posReg = new RegExp(pos,'g')
        var posCount = json.title.match(posReg).length
        for(var i=0;i<posCount;i++){
            json.title = json.title.replace(pos,'<input name="'+id+'-'+i+'" id="'+id+'-'+i+'" type="text" form="form-'+id+'"/>')
        }
        form.html(json.title)
        this.temp.title.html(json.title)
        this.temp.correct.nextAll('.correctAnswer').html(json.answer)
        this.temp.explain.nextAll('.explain').html(json.explain)

        this.temp.titleCon.append(this.temp.source,form)
        this.temp.ansCon.append(this.temp.correct,this.temp.explain)
        this.temp.subject.append(this.temp.titleCon,this.temp.options)
        if(!hideButton){this.temp.subject.append(this.temp.btn)}
        this.temp.main.append(this.temp.subject,this.temp.ansCon)

        if(addHr){this.temp.main.append('<hr>')}
        return this.temp.main
    }
    o.MJ = function () {
        this.temp.source.text(json.source)
        this.temp.title.html(json.title + '：<span class="blur" tabindex="0" style="display:inline;outline=0;" onclick="">' + json.answer +'</span>')
        this.temp.titleCon.append(this.temp.source,this.temp.title)
        this.temp.subject.append(this.temp.titleCon,this.temp.options)
        this.temp.main.append(this.temp.subject)

        if(addHr){this.temp.main.append('<hr>')}
        return this.temp.main
    }
    return o
}
function formatAnsDic(d) {
    var c = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
    var dic = {}
    for(var i=0;i<c.length;i++){
    	if(d[c[i]]===undefined){d[c[i]]=''}
        if(d[c[i]].length>0){
            dic[c[i]] = d[c[i]]
        }
    }
    return dic
}

function showChoiceAnswer(id,type,correctAnswer){
    var subjectCon = $('#'+id)
    var titleCon = subjectCon.children('.subject').children('.titleContainer')
    var ansCon = subjectCon.children('.ansContainer')
    var answers = subjectCon.children('.subject').children('.options')
    console.log(correctAnswer)
    if(type==="A"){
        var correctAnsText = correctAnswer
        var choice = $('input[name="singelChoice-'+id+'"]:checked').val();
        console.log(choice)
        var showCorrect = answers.children('#'+correctAnsText)
        var showChoice = answers.children('#'+choice)
        console.log('#showSingle-'+id)
        $('#showSingle-'+id).fadeOut(1)
        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==='A3'){
        $('#showSingle-'+id).fadeOut(1)
        for(var i=0;i<id.length;i++){
            var subID = id[i]
            var mainID = subID.split('-')[0]
            console.log(subID)
            console.log(mainID)
            subjectCon = $('#'+ id[i])
            titleCon = subjectCon.children('.subject').children('.titleContainer')
            ansCon = subjectCon.children('.ansContainer')
            answers = subjectCon.children('.subject').children('.options')
            $('#showSingle-'+id).fadeOut(1)
            var correctAns= correctAnswer[i]
            //以下与A型题时一样的代码，知识用subID替换ID变量
            showChoiceAnswer(subID,'A',correctAns)
        }

    } else if(type==='B'){
        console.log(titleCon)
        titleCon.children('div').each(function (index,i){
            console.log(i)
            var subTitleID = $(i).attr('id')
            var ans = correctAnswer[index]
            var choice = $('#'+id+'-'+index).find("option:selected").text();
            $('#showSingle-'+id).fadeOut(1)
            ansCon.fadeIn(100)
            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)
        $('#showSingle-'+id).fadeOut(1)
        ansCon.fadeIn(100)
        titleCon.children('div').each(function (index,i){
            console.log(i)
            var subTitleID = $(i).attr('id')
            var ans = correctAnswer[index]
            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 = correctAnswer
        var choice = ""
        $('input[name="singelChoice-'+id+'"]:checked').each(function (){
            choice += $(this).val()
        })
        console.log(choice)
        console.log(correctAnsText)
        $('#showSingle-'+id).fadeOut(1)
        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++){
            console.log(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);
        })
    }else if(type=="TK"){
        $('#showSingle-'+id).fadeOut(1)
        ansCon.fadeIn(100)
        var answers = correctAnswer
        console.log(answers[0])
        var form =$('#form-'+id).serializeArray()
        var myAns = []
        console.log(form[0]['value'])
        for(var i=0;i<form.length;i++){
            var input = $('#form-'+id).children('#'+id+'-'+i)
            if(answers[i] != form[i]['value']){
                $('<p class="wrong TKcheck">'+answers[i]+'</p>').insertAfter(input)
            }else{
                $('<p class="correct TKcheck">'+answers[i]+'</p>').insertAfter(input)
            }
        }
    }
}
function removeBackground(obj){
    obj.addClass('no-background')
}