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)
                    typeA(jsonData,i)
                }else if(jsonData.type=='A3'){
                    typeA3Module(i)
                    typeA3(jsonData,i)
                }else if(jsonData.type=='B'){
                    typeBModule(i)
                    typeB(jsonData,i)
                }else if(jsonData.type=='C'){
                    typeCModule(i)
                    typeC(jsonData,i)
                }else if(jsonData.type=='X'){
                    typeXModule(i)
                    typeX(jsonData,i)
                }
            }

        }
        function removeBackground(obj){
            obj.addClass('no-background')
        }
        function showChoiceAnswer(id,type){
            var subjectCon = $('#'+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)
                }
            }

        }
        //A1型题
        function typeA(json,id,parent='#subjectContainer-A'){
            var subjectCon = $(parent).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,parent='#subjectContainer-A'){
            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-small 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($(parent))
            $("#showSingle-"+id).bind("click",function (){
                showChoiceAnswer(id,'A')
            })
        }
        function typeA2Module(){
            var main = $('<div id="'+id+'" class="typeA2"></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-small 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-A2'))
            $("#showSingle-"+id).bind("click",function (){
                showChoiceAnswer(id,'A')
            })
        }
        function typeA2(){
            var subjectCon = $('#subjectContainer-A2').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 typeA3(json,id){
            var subjectCon = $('#subjectContainer-A3').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 choices = json.choices
            var answer = json.answer
            var end = source *1 + range*1 -1
            var title = json.title
            var correctAns = json.answer
            var exp = ansCon.children('.explain').text(json.explain)
            var info = subject.children('.info').text(json.info)
            var answers = subjectCon.children('.subject').children('.answers')
            var char = ['A','B','C','D','E',]
            var sourceRange = subject.children('.sourceRange').text('第 '+source+' 到 '+end+' 题')
            for(var i=0;i<title.length;i++){
                typeAModule(id+'-'+i,titleCon)
                var data = {
                    "type":"A",
                    "source":source+'-'+(i+1),
                    "title":title[i],
                    "answer":answer[i],
                    "explain":exp[i],
                    "choices":{},
                }
                for(var j=0;j<choices.length;j++){
                    data.choices[char[j]]=choices[i][j]
                }
                console.log(data)
                typeA(data,id+'-'+i,titleCon)
            }
        }
        function typeA3Module(id){
            var main = $('<div id="'+id+'" class="typeA3"></div>')
            var subject = $('<div class="subject">' +
                '<div class="sourceRange"></div>'+
                '<div class="info"></div>'+
                '<div class="titleContainer"></div></div>'
            ).appendTo(main)
            main.appendTo($('#subjectContainer-A3'))
        }
        //B型题
        function typeB(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-small 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-small 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 typeC(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 typeX(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-small 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-X'))
            $("#showSingle-"+id).bind("click",function (){
                showChoiceAnswer(id,'X')
            })
        }
setTimeout(function (){
	getdata();
},0);