torierettsegifelkeszito/include/sQuiz/sQuiz_module_fillIn.js

/**
 * /sQuiz/sQuiz_module_fillIn.js
 * @version 1.0
 * @desc sQuiz class for fillIns
 * @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_fillIn=function(parent, quiz){
        this.parent=parent;
        this.quiz=quiz;
        this.container=parent.element.children("#sqTestArea");
        this.qidMap={};
        this.answers=[];
    };
    
    $.sQuiz_module_fillIn.prototype={
        submit: function(){
            var self=this;
            this.parent.stopTimer();
            var sub={};
            
            this.container.children("div[data-qid=fillers]").children("span[data-qid=filler]").draggable("disable");
            
            sub.answered=[];
            sub.correct=true;
            var i=0;
            this.container.children("p[data-qid=text]").children("span[data-qid=fillable]").each(function(){
                if($(this).data("filledWith")==undefined || $(this).data("filledWith")=="--NULL--"){
                    sub.answered.push("null");
                    sub.correct=false;
                    self.container.children("div[data-qid=fillers]").children("span[data-qid=filler][data-attached=false]").addClass("red");
                }
                else{
                    if($(this).data("filledWith")==self.answers[i]){
                        $(this).data("attached").addClass("green");
                    }
                    else{
                        $(this).data("attached").addClass("red");
                        sub.correct=false;
                    }
                    sub.answered.push($(this).data("filledWith"));
                }
                i++;
            });
            sub.elapsed=this.parent.elapsedPerTest;
            this.parent.answers.push(sub);
        },
        
        load: function(){
            var qid=0;
            
            var replacer="<span data-qid=\"fillable\" class=\"sq sq-droppable\" data-filledWith=\"--NULL--\"></span>"
            var fillable=this.quiz.text;
            fillable=fillable.replace(new RegExp(/[\n]/g), "<br>");
            fillable=fillable.replace(new RegExp(/\[\][^\[\]]+\[\/\]/g), replacer);
            
            var fillers=[];
            var res;
            var reg=new RegExp(/\[\]([^\[\]]+)\[\/\]/g);
            while((res=reg.exec(this.quiz.text))!==null){
                fillers.push("<span data-qid=\"filler\" data-value=\""+res[1]+"\" data-attached=\"false\" class=\"sq sq-draggable\">"+res[1]+"</span>");
                this.answers.push(res[1]);
            }
            var fillerstr="";
            while(fillers.length>0){
                var index=Math.floor(Math.random()*fillers.length);
                fillerstr+=fillers[index];
                fillers.splice(index, 1);
            }
            
            this.container.html("<h2>"+this.quiz.question+"</h2><br><p data-qid=\"text\" style=\"font-size: 1.3em\">"+fillable+"</p><hr class=\"sq sq-placeholder\"><div data-qid=\"fillers\">"+fillerstr+"</div>");
            
            //init drag 'n' drop
            this.container.children("p[data-qid=text]").children("span[data-qid=fillable]").droppable({
                tolerance: "pointer",
                drop: function(event, ui){
                    ui.draggable.position({
                        of: $(this),
                        my: "left top",
                        at: "left top"
                    });
                    $(this).data("filledWith", ui.draggable.data("value"));
                    $(this).data("attached", ui.draggable);
                    ui.draggable.data("attached", "true");
                },
                out: function(event, ui){
                    $(this).data("filledWith", "--NULL--");
                    ui.draggable.data("attached", "false");
                }
            });
            
            this.container.children("div[data-qid=fillers]").children("span[data-qid=filler]").draggable({
                cursor: "move"
            });
        }
    };
}(jQuery));