torierettsegifelkeszito/include/sQuiz/sQuiz_module_connectGraph.js

156 lines
7.2 KiB
JavaScript
Raw Normal View History

2019-08-08 13:56:20 +00:00
/**
* /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));