torierettsegifelkeszito/include/sQuiz/sQuiz_module_connectGraph.js

/**
 * /sQuiz/sQuiz_module_connectGraph.js
 * @version 1.3
 * @desc sQuiz class for connectGraphs
 * @author Fándly Gergő Zoltán (gergo@systemtest.tk, systemtest.tk)
 * @copy 2017 Fándly Gergő Zoltán
 * License:
    sQuiz for creating small jQuery based quizs in an implementable way
    Copyright (C) 2017  Fándly Gergő Zoltán

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
 **/
 
(function($){
    $.sQuiz_module_connectGraph=function(parent, quiz){
        this.parent=parent;
        this.quiz=quiz;
        this.container=parent.element.children("#sqTestArea");
        this.qidMap={};
        this.currentlyClicked=null;
    };
    
    $.sQuiz_module_connectGraph.prototype={
        submit: function(){
            var self=this;
            this.parent.stopTimer();
            var sub={};
            
            sub.answered=[];
            sub.correct=true;
            jsPlumb.reset();
            $(this.container).children("div[data-qid=pair1]").children("i").each(function(){
                if($(this).data("connectedTo")==undefined || $(this).data("connectedTo")=="--NULL--"){
                    sub.answered.push({pair1: $(this).data("value"), pair2: "null"});
                    $(this).addClass("sq-red");
                    sub.correct=false;
                }
                else{
                    for(var i=0; i<self.quiz.answers.length; i++){
                        if(self.quiz.answers[i].pair1==$(this).data("value")){
                            if(self.quiz.answers[i].pair2==$(this).data("connectedTo")){
                                $(this).addClass("sq-green");
                                self.container.children("div[data-qid=pair2]").children("i[data-value='"+$(this).data("connectedTo")+"']").addClass("sq-green");
                                jsPlumb.connect({
                                    source: $(this),
                                    target: self.container.children("div[data-qid=pair2]").children("i[data-value='"+$(this).data("connectedTo")+"']"),
                                    anchor: "Center",
                                    paintStyle: {
                                        stroke: "rgba(74,230,74,0.9)",
                                        strokeWidth: 10
                                    },
                                    endpoint: "Dot",
                                    endpointStyle: {
                                        fill: "rgba(74,230,74,0.9)",
                                        radius: 12
                                    },
                                    detachable: false
                                });
                            }
                            else{
                                $(this).addClass("sq-red");
                                self.container.children("div[data-qid=pair2]").children("i[data-value='"+$(this).data("connectedTo")+"']").addClass("sq-red");
                                jsPlumb.connect({
                                    source: $(this),
                                    target: self.container.children("div[data-qid=pair2]").children("i[data-value='"+$(this).data("connectedTo")+"']"),
                                    anchor: "Center",
                                    paintStyle: {
                                        stroke: "rgba(230,74,74,0.9)",
                                        strokeWidth: 10
                                    },
                                    endpoint: "Dot",
                                    endpointStyle: {
                                        fill: "rgba(230,74,74,0.9)",
                                        radius: 12
                                    },
                                    detachable: false
                                });
                                sub.correct=false;
                            }
                            
                            sub.answered.push({pair: $(this).data("value"), pair2: $(this).data("connectedTo")});
                            break;
                        }
                    }
                }
            });
            
            sub.elapsed=this.parent.elapsedPerTest;
            this.parent.answers.push(sub);
        },
        
        load: function(){
            var self=this;
            jsPlumb.reset();
            jsPlumb.setContainer(this.container);
            
            var qid=0;
            var pair1="";
            var pair2="";
            $.each(this.quiz.answers, function(key, val){
                pair1+="<span style=\"font-size: 2em\">"+val.pair1+"</span> <i class=\"fa fa-circle fa-2x\" id=\"sqPoint"+qid.toString()+"\" data-qid=\""+qid.toString()+"\" data-value=\""+val.pair1+"\" data-connectedTo=\"--NULL--\"></i><br><br>";
                qid++;
            });
            var qidp1=qid;
            var p2=this.quiz.answers.slice();
            while(p2.length>0){
                var index=Math.floor(Math.random()*p2.length);
                pair2+="<i class=\"fa fa-circle fa-2x\" id=\"sqPoint"+qid.toString()+"\" data-qid=\""+qid.toString()+"\" data-value=\""+p2[index].pair2+"\"></i> <span style=\"font-size: 2em\">"+p2[index].pair2+"</span><br><br>";
                qid++;
                p2.splice(index, 1);
            }
            
            this.container.html("<h2>"+this.quiz.question+"</h2><br><div data-qid=\"pair1\" style=\"float: left; text-align: right\">"+pair1+"</div><div data-qid=\"pair2\" style=\"float: right; text-align: left\">"+pair2+"</div>");
            
            this.parent.element.slideDown(function(){
                var typic={
                    anchor: "Center",
                    connectorStyle: {
                        stroke: "rgb(0,0,0)",
                        strokeWidth: 10
                    },
                    endpoint: "Dot",
                    endpointStyle: {
                        fill: "rgb(0,0,0)",
                        radius: 12
                    }
                };
                for(var i=0; i<qidp1; i++){
                    jsPlumb.addEndpoint("sqPoint"+i.toString(), {isSource: true, isTarget: false}, typic);
                }
                for(var i=qidp1; i<qid; i++){
                    jsPlumb.addEndpoint("sqPoint"+i.toString(), {isSource: false, isTarget: true}, typic);
                }
                
                jsPlumb.bind("connection", function(info){
                    $(info.source).data("connectedTo", $(info.target).data("value"));
                });
                jsPlumb.bind("connectionDetached", function(info){
                    $(info.source).data("connectedTo", "--NULL--");
                });
            });
        }
    };
}(jQuery));