FillBlanks::createAnswersForm()

Complexity

Conditions	11
Paths	54

Size

Total Lines	386
Code Lines	70

Duplication

Lines	0
Ratio	0 %

Importance

Changes

0

<?php
    public function createAnswersForm($form)
    {
        $defaults = [];
        $defaults['answer'] = get_lang("<table cellspacing=\"0\" cellpadding=\"10\" border=\"1\" width=\"720\" style=\"\" height:=\"\">    <tbody>        <tr>            <td colspan=\"2\">            <h3>Example fill the form activity : calculate the Body Mass Index</h3>            </td>        </tr>        <tr>            <td style=\"text-align: right;\"><strong>Age</strong></td>            <td width=\"75%\" style=\"\">[25] years old</td>        </tr>        <tr>            <td style=\"text-align: right;\"><strong>Sex</strong></td>            <td style=\"\" text-align:=\"\">[M] (M or F)</td>        </tr>        <tr>            <td style=\"text-align: right;\"><strong>Weight</strong></td>            <td style=\"\" text-align:=\"\">95 Kg</td>        </tr>        <tr>            <td style=\"vertical-align: top; text-align: right;\"><strong>Height</strong></td>            <td style=\"vertical-align: top;\">1.81 m</td>        </tr>        <tr>            <td style=\"vertical-align: top; text-align: right;\"><strong>Body Mass Index</strong></td>            <td style=\"vertical-align: top;\">[29] BMI =Weight/Size<sup>2</sup> (Cf.<a href=\"http://en.wikipedia.org/wiki/Body_mass_index\" onclick=\"window.open(this.href,'','resizable=yes,location=yes,menubar=no,scrollbars=yes,status=yes,toolbar=no,fullscreen=no,dependent=no,width=800,height=600,left=40,top=40,status'); return false\"> Wikipedia article</a>)</td>        </tr>    </tbody></table>");
        $defaults['select_separator'] = 0;
        $blankSeparatorNumber = 0;
        if (!empty($this->id)) {
            $objectAnswer = new Answer($this->id);
            $answer = $objectAnswer->selectAnswer(1);
            $listAnswersInfo = self::getAnswerInfo($answer);
            $defaults['multiple_answer'] = 0;
            if ($listAnswersInfo['switchable']) {
                $defaults['multiple_answer'] = 1;
            }
            // Take the complete string except after the last '::'
            $defaults['answer'] = $listAnswersInfo['text'];
            $defaults['select_separator'] = $listAnswersInfo['blank_separator_number'];
            $blankSeparatorNumber = $listAnswersInfo['blank_separator_number'];
        }

        $blankSeparatorStart = self::getStartSeparator($blankSeparatorNumber);
        $blankSeparatorEnd = self::getEndSeparator($blankSeparatorNumber);
        $setWeightAndSize = '';
        if (isset($listAnswersInfo) && count($listAnswersInfo['weighting']) > 0) {
            foreach ($listAnswersInfo['weighting'] as $i => $weighting) {
                $setWeightAndSize .= 'document.getElementById("weighting['.$i.']").value = "'.$weighting.'";';
            }
            foreach ($listAnswersInfo['input_size'] as $i => $sizeOfInput) {
                $setWeightAndSize .= 'document.getElementById("sizeofinput['.$i.']").value = "'.$sizeOfInput.'";';
                $setWeightAndSize .= 'document.getElementById("samplesize['.$i.']").style.width = "'.$sizeOfInput.'px";';
            }
        }

        $questionTypes = [FILL_IN_BLANKS => 'fillblanks', FILL_IN_BLANKS_COMBINATION => 'fillblanks_combination'];
        echo '<script>
            var questionType = "'.$questionTypes[$this->type].'";
            var firstTime = true;
            var originalOrder = new Array();
            var blankSeparatorStart = "'.$blankSeparatorStart.'";
            var blankSeparatorEnd = "'.$blankSeparatorEnd.'";
            var blankSeparatorStartRegexp = getBlankSeparatorRegexp(blankSeparatorStart);
            var blankSeparatorEndRegexp = getBlankSeparatorRegexp(blankSeparatorEnd);
            var blanksRegexp = "/"+blankSeparatorStartRegexp+"[^"+blankSeparatorStartRegexp+"]*"+blankSeparatorEndRegexp+"/g";

            function attachEventsToEditor() {
                var editor = tinymce.get("answer");
                if (editor) {
                    console.log("Editor found, attaching events.");

                    editor.on("keyup", function() {
                        updateBlanks();
                    });

                    editor.on("SetContent", function() {
                        updateBlanks();
                    });

                    editor.on("ExecCommand", function() {
                        updateBlanks();
                    });

                    editor.on("Paste", function() {
                        updateBlanks();
                    });
                } else {
                    console.log("Editor not yet available, retrying...");
                    setTimeout(attachEventsToEditor, 100); // Retry after 100 ms
                }
            }

            document.addEventListener("DOMContentLoaded", function() {
                attachEventsToEditor();
            });

            function updateBlanks()
            {
                var answer;
                if (firstTime) {
                    var field = document.getElementById("answer");
                    answer = field.value;
                } else {
                    answer = tinymce.get("answer").getContent();
                }

                // disable the save button, if not blanks have been created
                $("button").attr("disabled", "disabled");
                $("#defineoneblank").show();

                var blanks = answer.match(eval(blanksRegexp));
                var fields = "<div class=\"form-group \">";
                fields += "<label class=\"col-sm-2 control-label\"></label>";
                fields += "<div class=\"col-sm-8\">";
                fields += "<table class=\"data_table\">";
                fields += "<tr><th style=\"width:220px\">'.get_lang('Word to find').'</th>";
                if (questionType == "fillblanks") {
                    fields += "<th style=\"width:50px\">'.get_lang('Score').'</th>";
                }
                fields += "<th>'.get_lang('Input size of box to fill').'</th></tr>";

                if (blanks != null) {
                    for (var i=0; i < blanks.length; i++) {
                        // remove forbidden characters that causes bugs
                        blanks[i] = removeForbiddenChars(blanks[i]);
                        // trim blanks between brackets
                        blanks[i] = trimBlanksBetweenSeparator(blanks[i], blankSeparatorStart, blankSeparatorEnd);

                        // if the word is empty []
                        if (blanks[i] == blankSeparatorStartRegexp+blankSeparatorEndRegexp) {
                            break;
                        }

                        // get input size
                        var inputSize = 100;
                        var textValue = blanks[i].substr(1, blanks[i].length - 2);
                        var btoaValue = textValue.hashCode();

                        if (firstTime == false) {
                            var element = document.getElementById("samplesize["+i+"]");
                            if (element) {
                                inputSize = document.getElementById("sizeofinput["+i+"]").value;
                            }
                        }

                        if (document.getElementById("weighting["+i+"]")) {
                            var value = document.getElementById("weighting["+i+"]").value;
                        } else {
                            var value = "1";
                        }
                        var blanksWithColor = trimBlanksBetweenSeparator(blanks[i], blankSeparatorStart, blankSeparatorEnd, 1);

                        fields += "<tr>";
                        fields += "<td>"+blanksWithColor+"</td>";
                        if (questionType == "fillblanks") {
                            fields += "<td><input class=\"form-control\" style=\"width:60px\" value=\""+value+"\" type=\"text\" id=\"weighting["+i+"]\" name=\"weighting["+i+"]\" /></td>";
                        } else {
                          fields += "<input value=\"0\" type=\"hidden\" id=\"weighting["+i+"]\" name=\"weighting["+i+"]\" />";
                        }

                        fields += "<td>";
                        fields += "<input class=\"btn btn--plain\" type=\"button\" value=\"-\" onclick=\"changeInputSize(-1, "+i+")\">&nbsp;";
                        fields += "<input class=\"btn btn--plain\" type=\"button\" value=\"+\" onclick=\"changeInputSize(1, "+i+")\">&nbsp;";
                        fields += "&nbsp;&nbsp;<input class=\"sample\" id=\"samplesize["+i+"]\" data-btoa=\""+btoaValue+"\"   type=\"text\" value=\""+textValue+"\" style=\"width:"+inputSize+"px\" disabled=disabled />";
                        fields += "<input id=\"sizeofinput["+i+"]\" type=\"hidden\" value=\""+inputSize+"\" name=\"sizeofinput["+i+"]\"  />";
                        fields += "</td>";
                        fields += "</tr>";

                        // enable the save button
                        $("button").removeAttr("disabled");
                        $("#defineoneblank").hide();
                    }
                }

                document.getElementById("blanks_weighting").innerHTML = fields + "</table></div></div>";

                $(originalOrder).each(function(i, data) {
                     if (firstTime == false) {
                        value = data.value;
                        var d = $("input.sample[data-btoa=\'"+value+"\']");
                        var id = d.attr("id");
                        if (id) {
                            var sizeInputId = id.replace("samplesize", "sizeofinput");
                            var sizeInputId = sizeInputId.replace("[", "\\\[");
                            var sizeInputId = sizeInputId.replace("]", "\\\]");
                            $("#"+sizeInputId).val(data.width);
                            d.outerWidth(data.width+"px");
                        }
                    }
                });

                updateOrder(blanks);

                if (firstTime) {
                    firstTime = false;
                    '.$setWeightAndSize.'
                }
            }

            window.onload = updateBlanks;
            String.prototype.hashCode = function() {
                var hash = 0, i, chr, len;
                if (this.length === 0) return hash;
                for (i = 0, len = this.length; i < len; i++) {
                    chr   = this.charCodeAt(i);
                    hash  = ((hash << 5) - hash) + chr;
                    hash |= 0; // Convert to 32bit integer
                }
                return hash;
            };

            function updateOrder(blanks)
            {
                originalOrder = new Array();
                 if (blanks != null) {
                    for (var i=0; i < blanks.length; i++) {
                        // remove forbidden characters that causes bugs
                        blanks[i] = removeForbiddenChars(blanks[i]);
                        // trim blanks between brackets
                        blanks[i] = trimBlanksBetweenSeparator(blanks[i], blankSeparatorStart, blankSeparatorEnd);

                        // if the word is empty []
                        if (blanks[i] == blankSeparatorStartRegexp+blankSeparatorEndRegexp) {
                            break;
                        }
                        var textValue = blanks[i].substr(1, blanks[i].length - 2);
                        var btoaValue = textValue.hashCode();

                        if (firstTime == false) {
                            var element = document.getElementById("samplesize["+i+"]");
                            if (element) {
                                inputSize = document.getElementById("sizeofinput["+i+"]").value;
                                originalOrder.push({ "width" : inputSize, "value": btoaValue });
                            }
                        }
                    }
                }
            }

            function changeInputSize(coef, inIdNum)
            {
                var sampleSizeSelector = "#samplesize\\\[" + inIdNum + "\\\]";
                var sizeOfInputSelector = "#sizeofinput\\\[" + inIdNum + "\\\]";

                var currentWidth = $(sampleSizeSelector).outerWidth();

                if (currentWidth === undefined) {
                    return;
                }

                var newWidth = currentWidth + coef * 20;
                newWidth = Math.max(20, newWidth);
                newWidth = Math.min(newWidth, 600);

                $(sampleSizeSelector).outerWidth(newWidth);
                $(sizeOfInputSelector).attr("value", newWidth);

                var answer;
                if (firstTime) {
                    var field = document.getElementById("answer");
                    answer = field.value;
                } else {
                    answer = tinymce.get("answer").getContent();
                }
                var blanks = answer.match(eval(blanksRegexp));

                updateOrder(blanks);
            }

            function removeForbiddenChars(inTxt)
            {
                outTxt = inTxt;
                outTxt = outTxt.replace(/&quot;/g, ""); // remove the   char
                outTxt = outTxt.replace(/\x22/g, ""); // remove the   char
                outTxt = outTxt.replace(/"/g, ""); // remove the   char
                outTxt = outTxt.replace(/\\\\/g, ""); // remove the \ char
                outTxt = outTxt.replace(/&nbsp;/g, " ");
                outTxt = outTxt.replace(/^ +/, "");
                outTxt = outTxt.replace(/ +$/, "");

                return outTxt;
            }

            function changeBlankSeparator()
            {
                var definedSeparator = $("[name=select_separator] option:selected").text();
                $("[name=select_separator] option").each(function (index, value) {
                    $("#defineoneblank").html($("#defineoneblank").html().replace($(value).html(), definedSeparator))
                });
                var separatorNumber = $("#select_separator").val();
                var tabSeparator = getSeparatorFromNumber(separatorNumber);
                blankSeparatorStart = tabSeparator[0];
                blankSeparatorEnd = tabSeparator[1];
                blankSeparatorStartRegexp = getBlankSeparatorRegexp(blankSeparatorStart);
                blankSeparatorEndRegexp = getBlankSeparatorRegexp(blankSeparatorEnd);
                blanksRegexp = "/"+blankSeparatorStartRegexp+"[^"+blankSeparatorStartRegexp+"]*"+blankSeparatorEndRegexp+"/g";
                updateBlanks();
            }

            // this function is the same than the PHP one
            // if modify it modify the php one escapeForRegexp
            function getBlankSeparatorRegexp(inTxt)
            {
                var tabSpecialChar = new Array(".", "+", "*", "?", "[", "^", "]", "$", "(", ")",
                    "{", "}", "=", "!", "<", ">", "|", ":", "-", ")");
                for (var i=0; i < tabSpecialChar.length; i++) {
                    if (inTxt == tabSpecialChar[i]) {
                        return "\\\"+inTxt;
                    }
                }
                return inTxt;
            }

            // this function is the same than the PHP one
            // if modify it modify the php one getAllowedSeparator
            function getSeparatorFromNumber(number)
            {
                var separator = new Array();
                separator[0] = new Array("[", "]");
                separator[1] = new Array("{", "}");
                separator[2] = new Array("(", ")");
                separator[3] = new Array("*", "*");
                separator[4] = new Array("#", "#");
                separator[5] = new Array("%", "%");
                separator[6] = new Array("$", "$");
                return separator[number];
            }

            function trimBlanksBetweenSeparator(inTxt, inSeparatorStart, inSeparatorEnd, addColor)
            {
                var result = inTxt
                result = result.replace(inSeparatorStart, "");
                result = result.replace(inSeparatorEnd, "");
                result = result.trim();

                if (addColor == 1) {
                    var resultParts = result.split("|");
                    var partsToString = "";
                    resultParts.forEach(function(item, index) {
                        if (index == 0) {
                            item = "<b><font style=\"color:green\"> " + item +"</font></b>";
                        }
                        if (index < resultParts.length - 1) {
                            item  = item + " | ";
                        }
                        partsToString += item;
                    });
                    result = partsToString;
                }

                return inSeparatorStart+result+inSeparatorEnd;
            }

        </script>';

        // answer
        $form->addLabel(
            null,
            get_lang('Please type your text below').', '.
            get_lang('and').' '.
            get_lang('use square brackets [...] to define one or more blanks')
        );
        $form->addHtmlEditor(
            'answer',
            Display::return_icon('fill_field.png'),
            true,
            false,
            ['ToolbarSet' => 'TestQuestionDescription'],
            ['id' => 'answer'],
        );
        $form->addRule('answer', get_lang('Please type the text'), 'required');

        //added multiple answers
        $form->addCheckBox('multiple_answer', '', get_lang('Allow answers order switches'));
        $form->addSelect(
            'select_separator',
            get_lang('Select a blanks marker'),
            self::getAllowedSeparatorForSelect(),
            [
                'id' => 'select_separator',
                'style' => 'width:150px',
                'class' => 'form-control',
                'onchange' => 'changeBlankSeparator()',
            ]
        );
        $form->addLabel(
            null,
            '<input type="button" onclick="updateBlanks()" value="'.get_lang('Refresh terms').'" class="btn btn--plain" />'
        );

        $form->addHtml('<div id="blanks_weighting"></div>');

        global $text;
        // setting the save button here and not in the question class.php
        $form->addHtml('<div id="defineoneblank" style="color:#D04A66; margin-left:160px">'.get_lang('DefineBlanks').'</div>');
        if (FILL_IN_BLANKS_COMBINATION === $this->type) {
            $form->addText('questionWeighting', get_lang('Score'), true, ['value' => 10]);
            if (!empty($this->iid)) {
                $defaults['questionWeighting'] = $this->weighting;
            }
        }
        $form->addButtonSave($text, 'submitQuestion');

        if (!empty($this->id)) {
            $form->setDefaults($defaults);
        } else {
            if (1 == $this->isContent) {
                $form->setDefaults($defaults);
            }