EDU/Website/NEducation/Content/assets/js/learning-theory-test.js

$(document).ready(function () {
    window.history.forward();
    updateProcess();
});

function effectAnswerRight() {
    //Play sound right
    $("#audio-testing-answer-right")[0].load();
    $("#audio-testing-answer-right")[0].onloadeddata = function () {
        $("#audio-testing-answer-right")[0].play();
    };
}

function effectAnswerWrong() {
    //Play sound wrong
    $("#audio-testing-answer-wrong")[0].load();
    $("#audio-testing-answer-wrong")[0].onloadeddata = function () {
        $("#audio-testing-answer-wrong")[0].play();
    };
}

function playNormalTimeSound() {
    if ($("#normal-time-sound").length > 0) {
        $("#normal-time-sound")[0].load();
        $("#normal-time-sound")[0].onloadeddata = function () {
            $("#normal-time-sound")[0].play();
        };
    }
}

function playWarningTimeSound() {
    if ($("#warning-time-sound").length > 0) {
        $("#warning-time-sound")[0].load();
        $("#warning-time-sound")[0].onloadeddata = function () {
            $("#warning-time-sound")[0].play();
        };
    }
}

function updateProcess() {
    var total = parseInt($(".testing-theory-content").attr('total'));
    var indexCur = parseInt($(".testing-theory-content .testing-theory-item.item-current").attr('index'));

    $(".testing-theory-content .testing-theory-item.item-current").show();


    if (total > 0) {
        $(".testing-theory-process .testing-theory-process-bar").width((indexCur + 1) * 100 / total + '%');
    }

    $(".testing-theory-countdown svg circle.circle").css('stroke-dashoffset', '0px');
    $(".testing-theory-countdown-number").text(totalTime);

    var typeQuestionShow = $(".testing-theory-content .testing-theory-item.item-current").attr('typeQuestion');

    if (typeQuestionShow == 3) {
        if (!$('.testing-theory-content .testing-theory-item.item-current .testing-theory-pos-end').hasClass('ui-droppable')) {
            setDragAndDrop($(".testing-theory-content .testing-theory-item.item-current"));
        }
    }

    readyAnswer = 1;
    setTimeout(function () {

        runCountdown();

    }, 500);
}

var testData = new Array();
var answerText = "";
var answerTextTrue = "";
var userAnswer = "";
function nextQuestion(resultData, timeNext = 2000) {


    var answerTrue = $(".learning-theory-test-true").val();
    var qid = $(".learning-theory-test-true").attr('qid');
    var qtype = $(".learning-theory-test-true").attr('qtype');
    var ttype = $(".learning-theory-test-true").attr('ttype');


    testData.push({
        qid: qid,
        qtype: qtype,
        ttype: ttype,
        answerTrue: answerTrue,
        answer: userAnswer,
        answerText: answerText,
        answerTextTrue: answerTextTrue,
        time: Math.max(totalTime - second + 1, 1)
    });

    setTimeout(function () {

        questionNew = resultData['nextQuestion'];

        if (questionNew == "") {


            if (testData.length > 0) {
                /*$.blockUI(
                    { 
                        message:'Vui lòng chờ trong giây lát',
                        css: { 
                        border: 'none', 
                        padding: '15px', 
                        backgroundColor: '#000', 
                        '-webkit-border-radius': '2px', 
                        '-moz-border-radius': '2px', 
                        opacity: .5, 
                        color: '#fff'
                    }}
                );*/

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: $("#result-link").val(),
                    type: "POST",
                    data: {
                        testData: testData
                    },
                    success: function (result) {
                        console.log('link ' + $("#result-link").val());
                        console.log('result ' + result);
                        checkTest = 1;
                        //if (result != 0) {
                        //    window.location.href = result;
                        //} else {
                        //    window.location.href = location.protocol + "//" + location.host + '/';
                        //}
                    }
                });
            }
        }


        var divParent = $(".testing-theory-content");

        var divCurrent = $(".testing-theory-item.item-current");

        var divNext = $(divCurrent).next('.testing-theory-item');

        if (divNext.length == 0) {

            $(divParent).append(questionNew);

            divNext = $(divCurrent).next('.testing-theory-item');

        }

        if (divNext.length > 0) {

            $(divNext).addClass('item-current');
            $(divCurrent).removeClass('item-current');

            $(divCurrent).addClass('testing-theory-hide-question');

            $(divNext).addClass('testing-theory-show-question');

            updateProcess();

            setTimeout(function () {

                $(divCurrent).remove();
            }, 500);

        }


    }, timeNext);

}

// Time
var t;
var totalTime = 15;
var second = totalTime;

var readyRunCountdown = 1;
var readyAnswer = 1;

function runCountdown() {

    if (readyRunCountdown == 1 && readyAnswer == 1) {
        readyRunCountdown = 0;
        second = totalTime;

        var runCircle = 0;

        t = window.setInterval(function () {
            if (window.blurred) {

            } else {

                second = --second <= 0 ? 0 : second;

                if (runCircle == 0) {
                    runCircle = 1;
                    $(".testing-theory-countdown svg circle.circle").animate({
                        "stroke-dashoffset": "-101px",
                    }, (second) * 1000, "linear", function () {

                    });
                }

                $(".testing-theory-countdown-number").text(second);
                if (second == 0) {
                    window.clearInterval(t);
                    endTime();
                    return false;
                }

                if (second <= 5) {
                    // $(".testing-theory-time-countdown").addClass("end-time");
                    playWarningTimeSound();
                } else {
                    playNormalTimeSound();
                }
            }

        }, 1000);
    }
}

function stopCountdown() {
    $(".testing-theory-countdown svg circle.circle").stop(true);
    window.clearInterval(t);
    readyRunCountdown = 1;
    readyAnswer = 0;
}

window.onblur = function () {
    window.blurred = true;
    $(".testing-theory-countdown svg circle.circle").stop(true);
};
window.onfocus = function () {
    window.blurred = false;
    if (readyRunCountdown == 0) {
        $(".testing-theory-countdown svg circle.circle").animate({ "stroke-dashoffset": "-101px" }, (second) * 1000, "linear");
    }
};
// END time

function endTime() {

    // Get element
    //readyRunCountdown = 1;
    //var divParent = $('.testing-theory-content .testing-theory-item.item-current');

    // Check Show answer
    //if( !$(divParent).hasClass('show-answer') ){
    // Add class show answer
    //$(divParent).addClass('show-answer');
    // Get value for ajax
    //var token = $(divParent).attr('qToken');
    //var answer = '';

    //var typeQuestion = $(divParent).attr('typeQuestion');

    // Get answer true
    /*checkTestingAnswer(token, answer, function(answerTrue){

        

        effectAnswerWrong();

        // GUESSING
        if(typeQuestion == 2){
            
            // Effect answer
            $(divParent).find('.guessing-choice-item[val='+ answerTrue['answerTrue'] +']').addClass('choice-true');
            $(divParent).find(".guessing-choice-item.choice-true[hideAnswer] .guessing-text").text($(divParent).find(".guessing-choice-item.choice-true[hideAnswer]").attr('hideAnswer'));

        }


        nextQuestion(answerTrue);

        
    });*/


    //}
}
var answer = "";
// CHECK ANSWER GUESSING
$(document).on('click', '.testing-theory-item .guessing-choice-item', function () {
    // Get element
    var eleAnswer = $(this);
    var divParent = $(this).parents('.testing-theory-item');

    // Check Show answer
    if (!$(divParent).hasClass('show-answer')) {

        // Add class show answer
        $(divParent).addClass('show-answer');
        stopCountdown();

        // Get value for ajax
        var token = $(divParent).attr('qToken');
        userAnswer = $(eleAnswer).attr('val');
        answerText = $(eleAnswer).find('.guessing-text').text().trim();




        // Get answer true
        checkTestingAnswer(token, userAnswer, function (resultData) {


            divNextQuestion = resultData['nextQuestion'];

            //Check answer
            var checkAnswer = 0;
            if (userAnswer == resultData['answerTrue']) {
                checkAnswer = 1;
            }
            if (checkAnswer == 1) {
                effectAnswerRight();
                $(eleAnswer).addClass('choice-true');
                answerTextTrue = $(eleAnswer).find('.guessing-text').text().trim();
                if ($(eleAnswer).find(".guessing-choice-item").attr('mutilAnswer') != undefined) {
                    answerText = $(eleAnswer).find(".guessing-choice-item").attr('mutilAnswer');
                    answerTextTrue = $(eleAnswer).find(".guessing-choice-item").attr('mutilAnswer');
                }
            } else {
                effectAnswerWrong();
                $(eleAnswer).addClass('choice-false');
                $(divParent).find('.guessing-choice-item[val=' + resultData['answerTrue'] + ']').addClass('choice-true');
                var tEle = $(divParent).find('.guessing-choice-item[val=' + resultData['answerTrue'] + ']');
                answerTextTrue = $(tEle).find('.guessing-text').text().trim();
                if ($(tEle).find(".guessing-choice-item").attr('mutilAnswer') != undefined) {
                    answerText = $(tEle).find(".guessing-choice-item").attr('mutilAnswer');
                    answerTextTrue = $(tEle).find(".guessing-choice-item").attr('mutilAnswer');
                }
            }

            $(divParent).find(".guessing-choice-item.choice-true[hideAnswer] .guessing-text").text($(divParent).find(".guessing-choice-item.choice-true[hideAnswer]").attr('hideAnswer'));


            nextQuestion(resultData);

        });


    }
});


$(document).on('click', '.guessing-multi-choice-item', function () {
    $(this).toggleClass('choice-item-choose');
    var exeQuestion = $(this).parent('.guessing-exe-question');
    var check = 0;
    $(exeQuestion).children('.guessing-multi-choice-item').each(function () {

        if ($(this).hasClass('choice-item-choose')) {
            check = 1;

        }

    });
    if (check == 1) {
        $(exeQuestion).next('.exe-user-answer').find('.button-multi-check').addClass('button-active');
    } else {
        $(exeQuestion).next('.exe-user-answer').find('.button-multi-check').removeClass('button-active');
    }
});


// CHECH ANSWER ARRANGE
$(document).on('click', '.testing-theory-item .exe-question-button-check.button-active, .button-multi-check.button-active', function () {

    $(this).removeClass('button-active');
    var button = $(this);

    var divParent = $('.testing-theory-item.item-current');

    var typeQuestion = $(divParent).attr('typeQuestion');

    if (!$(divParent).hasClass('show-answer')) {

        // Add class show answer
        $(divParent).addClass('show-answer');
        stopCountdown();

        var token = $(divParent).attr('qToken');

        if (typeQuestion == 3) {
            var answer = Array();
            answerTextTrue = '';
            $(divParent).find(".testing-theory-pos-end .pos-end-item").each(function (index, el) {
                answer.push($(divParent).find(".testing-theory-pos-begin .word-item.word-item-moved[pos='" + index + "']").text().toLowerCase().trim());
            });
            userAnswer = answer;
            // Get answer true
            checkTestingAnswer(token, answer, function (resultData) {

                var listGoal = $(divParent).find(".testing-theory-pos-end .pos-end-item");

                var listTrue = resultData['answerTrue'];

                if (listGoal.length == listTrue.length) {

                    var checkAnswer = 1;
                    answerText = "";
                    listGoal.each(function (index, el) {
                        if (index == 0) {
                            answerText += $(divParent).find(".testing-theory-pos-begin .word-item.word-item-moved[pos='" + index + "']").text().toLowerCase().trim();
                        } else {
                            answerText += " + " + $(divParent).find(".testing-theory-pos-begin .word-item.word-item-moved[pos='" + index + "']").text().toLowerCase().trim();
                        }

                        if ($(divParent).find(".testing-theory-pos-begin .word-item.word-item-moved[pos='" + index + "']").text().toLowerCase().trim() != listTrue[index].toLowerCase().trim()) {
                            $(divParent).find(".testing-theory-pos-begin .word-item.word-item-moved[pos='" + index + "']").addClass('sort-wrong');
                            checkAnswer = 0;
                        } else {
                            $(divParent).find(".testing-theory-pos-begin .word-item.word-item-moved[pos='" + index + "']").addClass('sort-right');
                        }
                    });

                    // Effect
                    if (checkAnswer == 1) {
                        effectAnswerRight();
                    } else {
                        effectAnswerWrong();
                    }

                }


                nextQuestion(resultData);


            });
        } else if (typeQuestion == 4) {
            var exeQuestion = $(this).closest('.exe-user-answer').prev('.guessing-exe-question');
            var answer = "";
            $(exeQuestion).children('.guessing-multi-choice-item').each(function (index) {

                if ($(exeQuestion).children('.guessing-multi-choice-item[val="' + index + '"]').hasClass('choice-item-choose')) {
                    answer += "1_";

                } else {
                    answer += "0_";
                }

            });
            answer = answer.slice(0, -1);
            userAnswer = answer;

            // Get answer true
            checkTestingAnswer(token, answer, function (resultData) {


                //Check answer
                var checkAnswer = 0;
                if (userAnswer == resultData['answerTrue']) {
                    checkAnswer = 1;
                }
                if (checkAnswer == 1) {
                    effectAnswerRight();
                } else {
                    effectAnswerWrong();
                }


                // Get answer
                var answerTrue = resultData['answerTrue'].split("_");
                var uAnswer = answer.split("_");
                for (var i = 0; i < answerTrue.length; i++) {
                    if (parseInt(uAnswer[i]) === parseInt(answerTrue[i])) {
                        if (parseInt(answerTrue[i]) == 1) {
                            $(exeQuestion).children('.guessing-multi-choice-item[val="' + i + '"]').addClass('choice-answer-true');
                        }
                    } else {
                        checkAnswer = 0;
                        if (parseInt(answerTrue[i]) == 1) {
                            $(exeQuestion).children('.guessing-multi-choice-item[val="' + i + '"]').addClass('item-answer-true');
                        } else {
                            $(exeQuestion).children('.guessing-multi-choice-item[val="' + i + '"]').addClass('choice-answer-false');
                        }
                    }
                }



                nextQuestion(resultData);


            });
        }




    }

});

// **********************************************
//Sort word
function setDragAndDrop(div) {

    var posCurrentTop = 0;
    var posCurrentLeft = 0;
    var checkClickItem = 0;
    //Check click and drag
    $(div).find(".testing-theory-pos-begin .word-item").draggable({
        start: function (event, ui) {
            $(this).css({ "transition": "none", "z-index": "2" });
            posCurrentTop = $(this).offset().top;
            posCurrentLeft = $(this).offset().left;
            checkClickItem = 1;
            setTimeout(function () {
                checkClickItem = 0;
            }, 200);
        },
        stop: function (event, ui) {
            $(this).css({ "transition": "all 0.5s ease", "z-index": "unset" });
            if ($(this).attr('pos') == undefined) {
                $(this).css({ "top": "0px", "left": "0px" });
            }

            if (Math.pow($(this).offset().left - posCurrentLeft, 2) + Math.pow($(this).offset().top - posCurrentTop, 2) < 400) { //if move < 20px
                if (checkClickItem == 1) {
                    clickWord($(this));
                }
            }
        }
    });

    var checkDrop = 0;
    $(div).find(".testing-theory-pos-end .pos-end-item").droppable({
        drop: function (event, ui) {
            if ($(this).parents(".testing-theory-item").hasClass("item-current")) {
                checkDrop = 1;
                var element = ui.draggable;
                var divParent = $(element).parents(".testing-theory-item");
                var listgoal = divParent.find(".testing-theory-pos-end .pos-end-item");
                var listChildMoved = divParent.find(".testing-theory-pos-begin .word-item.word-item-moved");

                var pos = $(this).index();
                var box = listgoal[pos];

                var elementCurrent = divParent.find(".testing-theory-pos-begin .word-item.word-item-moved[pos='" + pos + "']");
                if (elementCurrent.length > 0 && !element.is(elementCurrent)) {

                    var length = $(element).offset().left + $(element).width() / 2 - $(box).offset().left - $(box).width() / 2;
                    if (length > 0) {
                        pos++;
                        box = listgoal[pos];
                    }

                    //check element next
                    for (var i = listgoal.length - 1; i >= pos; i--) {
                        if (listgoal[i + 1] != undefined && $(listgoal[i]).hasClass('word-div-haschild')) {
                            var elCu = divParent.find(".testing-theory-pos-begin .word-item.word-item-moved[pos='" + i + "']");
                            if (!$(listgoal[i + 1]).hasClass('word-div-haschild')) {
                                $(listgoal[i + 1]).addClass('word-div-haschild');
                            }
                            $(listgoal[i]).removeClass('word-div-haschild');

                            elCu.attr('pos', i + 1);
                            $(listgoal[i + 1]).find(".word-div").width(elCu.width());

                        }
                    };


                }

                //add element to new box
                element.css("transition", "all 0.5s ease");
                if (!$(box).hasClass('word-div-haschild')) {
                    $(box).addClass('word-div-haschild');
                }
                if (!element.hasClass('word-item-moved')) {
                    element.addClass('word-item-moved');
                }

                element.attr("pos", pos);

                //edit position element
                adjustPositionWord(divParent);


            }
        },

        out: function (event, ui) {

            var element = ui.draggable;
            var pos = element.attr('pos');
            if (pos != undefined) {
                element.removeAttr("pos");
                element.removeClass('word-item-moved');

                var divParent = $(element).parents(".testing-theory-item");
                adjustPositionWord(divParent);

            }

        }

    });

    $(div).find(".testing-theory-pos-end").droppable({
        drop: function (event, ui) {
            if ($(this).parents(".testing-theory-item").hasClass("item-current")) {
                setTimeout(function () {
                    if (checkDrop == 1) {
                        checkDrop = 0;
                    } else {
                        var element = ui.draggable;
                        var divParent = $(element).parents(".testing-theory-item");
                        var listgoal = divParent.find(".testing-theory-pos-end .pos-end-item");

                        listgoal.each(function (index) {

                            if (!$(this).hasClass('word-div-haschild')) {
                                element.addClass('word-item-moved');
                                element.attr("pos", index);
                                return false;
                            }
                        });


                        //edit position element
                        adjustPositionWord(divParent);
                    }
                }, 50);

            }
        }
    });
}

$(document).on('click', '.testing-theory-pos-begin .pos-begin-item .word-item', function () {
    var element = $(this);
    clickWord(element);
});

function clickWord(element) {
    var divParent = $(element).parents(".testing-theory-item");
    var listgoal = divParent.find(".testing-theory-pos-end .pos-end-item");
    //Back
    if (element.hasClass("word-item-moved")) {
        element.removeAttr("pos");
        element.removeClass('word-item-moved');
        $(element).css({ "top": "0px", "left": "0px" });

        var divParent = $(element).parents(".testing-theory-item");

        adjustPositionWord(divParent);

        // Go
    } else {
        listgoal.each(function (index) {

            if (!$(this).hasClass('word-div-haschild')) {
                element.addClass('word-item-moved');
                element.attr("pos", index);
                return false;
            }
        });

        //edit position element
        adjustPositionWord(divParent);

    }
}

function adjustPositionWord(divParent) {
    var listChildMoved = $(divParent).find(".testing-theory-pos-begin .word-item.word-item-moved");
    $(divParent).find(".testing-theory-pos-begin .pos-begin-item .word-item.sort-wrong").removeClass("sort-wrong");
    if (listChildMoved.length > 0) {

        //edit position of element moved

        var listgoal = $(divParent).find(".testing-theory-pos-end .pos-end-item");
        $(listgoal).removeClass('word-div-haschild');

        for (var i = 0; i < listgoal.length; i++) {
            if ($(divParent).find(".testing-theory-pos-begin .word-item.word-item-moved[pos='" + i + "']").length > 0) {
                for (var j = 0; j < i; j++) {

                    if ($(divParent).find(".testing-theory-pos-begin .word-item.word-item-moved[pos='" + j + "']").length <= 0) {
                        $(divParent).find(".testing-theory-pos-begin .word-item.word-item-moved[pos='" + i + "']").attr('pos', j);
                        break;
                    }

                }
            }

        }

        // Set width before set top, left
        listgoal.each(function (index, el) {
            var destination = $(el).find(".word-div");
            var current = divParent.find(".testing-theory-pos-begin .word-item.word-item-moved[pos='" + index + "']");
            if (current.length > 0) {
                $(destination).parent().addClass('word-div-haschild');
                $(destination).width($(current).width());
            } else {
                $(destination).width(0);
            }

        });

        listChildMoved.each(function (index, el) {
            var destination = divParent.find(".testing-theory-pos-end .pos-end-item:nth-of-type(" + (parseInt($(el).attr('pos')) + 1) + ") .word-div");
            var current = $(el).parent();
            var h = destination.offset().top - current.offset().top;
            var w = destination.offset().left - current.offset().left;
            $(el).css({ "top": h, "left": w });
        });

        //active button
        var button = $(divParent).find(".exe-question-button-check");
        if (listgoal.length == listChildMoved.length) {
            button.addClass("button-active");
        } else {
            button.removeClass("button-active");
        }



        // $(divParent).find(".testing-theory-question .button-reset").addClass('button-active');
    } else {
        // $(divParent).find(".testing-theory-question .button-reset").removeClass('button-active');
    }
}


function checkTestingAnswer(token, answer, getData) {


    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    var link = $('#answer-link').val();
    $.ajax({
        url: link,
        type: "POST",
        data: {
            'token': token,
            'user_answer': answer,
            'time': Math.max(totalTime - second + 1, 1)
        },

        success: function (data) {

            if (data.length == 2) {
                if (data[0] == 'true') {
                    getData(data[1]);
                } else if (data[0] == 'false') {

                    window.location.href = data[1];
                }
            }

        },
        error: function (result) {


        }
    });
}