89 lines
3.9 KiB
JavaScript
89 lines
3.9 KiB
JavaScript
|
/**
|
||
|
|
* /sQuiz/sQuiz_module_markOnMap.js
|
||
|
|
* @version 1.2
|
||
|
|
* @desc sQuiz class for markOnMaps
|
||
|
|
* @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_markOnMap=function(parent, quiz){
|
||
|
|
this.parent=parent;
|
||
|
|
this.quiz=quiz;
|
||
|
|
this.container=parent.element.children("#sqTestArea");
|
||
|
|
this.qidMap={};
|
||
|
|
};
|
||
|
|
|
||
|
|
$.sQuiz_module_markOnMap.prototype={
|
||
|
|
submit: function(){
|
||
|
|
var self=this;
|
||
|
|
this.parent.stopTimer();
|
||
|
|
var sub={};
|
||
|
|
|
||
|
|
//unbind handlers
|
||
|
|
this.container.children("div[data-qid=mapArea]").children("div[data-qid=markers]").children("i[data-qid=marker]").off();
|
||
|
|
|
||
|
|
sub.answers=[];
|
||
|
|
sub.correct=true;
|
||
|
|
this.container.children("div[data-qid=mapArea]").children("div[data-qid=markers]").children("i[data-qid=marker]").each(function(){
|
||
|
|
for(var i=0; i<self.quiz.markers.length; i++){
|
||
|
|
if(self.quiz.markers[i].posx==$(this).data("posx") && self.quiz.markers[i].posy==$(this).data("posy")){
|
||
|
|
var selected=$(this).data("selected");
|
||
|
|
if(self.quiz.markers[i].correct==selected){
|
||
|
|
$(this).addClass("sq-green");
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
$(this).addClass("sq-red");
|
||
|
|
sub.correct=false;
|
||
|
|
}
|
||
|
|
sub.answers.push({posx: $(this).data("posx"), posy: $(this).data("posy"), selected: selected});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
sub.elapsed=this.parent.elapsedPerTest;
|
||
|
|
this.parent.answers.push(sub);
|
||
|
|
},
|
||
|
|
|
||
|
|
load: function(){
|
||
|
|
var map="<img src=\""+this.quiz.map+"\" alt=\"map to fill\">";
|
||
|
|
|
||
|
|
var markers="";
|
||
|
|
$.each(this.quiz.markers, function(key, val){
|
||
|
|
markers+="<i class=\"fa fa-circle\" style=\"position: absolute; top: "+val.posy.toString()+"px; left: "+val.posx.toString()+"px\" data-posx=\""+val.posx.toString()+"\" data-posy=\""+val.posy.toString()+"\" data-qid=\"marker\" data-selected=\"false\"></i>";
|
||
|
|
});
|
||
|
|
|
||
|
|
this.container.html("<h2>"+this.quiz.question+"</h2><br><div class=\"sq sq-center sq-mapArea\" data-qid=\"mapArea\">"+map+"<div data-qid=\"markers\">"+markers+"</div></div>");
|
||
|
|
|
||
|
|
this.container.children("div[data-qid=mapArea]").children("div[data-qid=markers]").children("i[data-qid=marker]").on("click", function(){
|
||
|
|
if($(this).data("selected")==false){
|
||
|
|
$(this).removeClass("fa-circle");
|
||
|
|
$(this).addClass("fa-check-circle");
|
||
|
|
$(this).data("selected", true);
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
$(this).removeClass("fa-check-circle");
|
||
|
|
$(this).addClass("fa-circle");
|
||
|
|
$(this).data("selected", false);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}(jQuery));
|