EDU/Website/NEducation/Content/assets/js/voca/testing.js

$(document).ready(function () {

    window.history.forward();
    //exit
    $('.button-exit').click(function () {

        var msg = $('#back-link').attr('msg');
        var link = $('#back-link').val();
        if (confirm(msg)) {
            window.location.href = link;
        }
    });
    $('.btn-ready').click(function () {
        runCountdown();
        $('.testing-rule').fadeOut(function () {
            updateProcess();
        });
    });
});
var parent = $('#hidden-parent').val();
var parentSlug = $('#hidden-parent-name').val();
var topicSlug = $('#hidden-topic-name').val();
var dataAnswer = {};
dataAnswer.topicId = $('#hidden-topicid').val();
dataAnswer.total = parseInt($('.testing-body-cover').attr('total'));
dataAnswer.answerGuess = [];
dataAnswer.answerWrite = [];

var rightAnswers;
var listAnswers = [];
var listElement = [];

// CHECK ANSWER GUESSING
$(document).on('click', '.testing-exercise-answer .answer-guessing', function () {
    // stop all 
    var divParent = $(this).parents('.testing-exercise');
    var correctAnswer = $(divParent).attr('correctAnswer');
    var questionId = $(divParent).attr('questionId');
    // Get element
    var eleAnswer = $(this);
    var answer = $(eleAnswer).attr('val');
    // Add class show answer
    $(eleAnswer).addClass('choose-answer');


    // check number of answer right
    console.log("correctAnswer " + correctAnswer);

    rightAnswers = correctAnswer.split(",");

    var next = false;
    if (listAnswers.indexOf($(eleAnswer).attr('val')) === -1) {
        listAnswers.push($(eleAnswer).attr('val'));
        listElement.push(eleAnswer);
    }
    if (rightAnswers.length == 1) { next = true }
    else if (listAnswers.length < rightAnswers.length) {
        next = false;
    } else {
        next = true;
    }
    console.log("listAnswers " + listAnswers);
    console.log("rightAnswers " + rightAnswers);


    if (next == true) {
        //$('.iframe-testing-video').pause();
        //this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
        console.log("stop video")

        //var frame = document.getElementById("iframe-testing-video");
        //frame.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
        //var iframe = document.getElementsByTagName("iframe-testing-video")[0].contentWindow;
        //iframe.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');

        //var reSrc = $('.iframe-testing-video').attr("src");
        //console.log("reSrc ", reSrc);
        //$('.iframe-testing-video').attr("src", reSrc)

        //$('.iframe-testing-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
        const iframes = document.querySelectorAll('.iframe-testing-video');
        Array.from(iframes).forEach((iframe) => {
            iframe.src = iframe.getAttribute('src')
        });
        //document.getElementsByClassName('iframe-testing-video').pause();
        //document.getElementsByClassName('iframe-testing-video').currentTime = 0;
        //$(".iframe-testing-video")[0].pause();
        //$("#iframe-testing-video").css('display', 'none');
        //$("#iframe-testing-video").css('display', 'block');

        stopCountdown();

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

            // Get value for ajax
            var token = $(divParent).attr('token');

            // Get answer true
            //checkTestingAnswer(listAnswers, rightAnswers, function (result) {
            checkTestingAnswer(listAnswers, function (result) {
                console.log(result);
                var check = 0;

                if (result.correct == 1) {
                    check = 1;
                }

                // Check answer
                var k;
                if (check == 1) {
                    for (k = 0; k < listElement.length; k++) {
                        listElement[k].addClass('choose-right');
                    }
                    soundAnswerRight();

                } else {
                    for (k = 0; k < listElement.length; k++) {
                        listElement[k].addClass('choose-wrong');
                    }
                    //$(eleAnswer).addClass('choose-wrong');
                    for (k = 0; k < result.result.length; k++) {
                        $(divParent).find('.testing-exercise-answer .answer-guessing[val="' + result.result[k] + '"]').addClass('choose-right');
                    }
                    soundAnswerWrong();
                }

                if ($(divParent).find('.testing-exercise-answer .answer-guessing.choose-right[hideAnswer] .guessing-text').length > 0) {
                    $(divParent).find('.testing-exercise-answer .answer-guessing.choose-right[hideAnswer] .guessing-text').text($(divParent).find('.testing-exercise-answer .answer-guessing.choose-right[hideAnswer]').attr('hideAnswer'));
                }
                dataAnswer.answerGuess.push({
                    pos: answer,
                    questionId: $('.exercise-current').attr('questionId'),
                    card: $('.exercise-current').attr('index'),
                    word: $('.exercise-current .testing-exercise-result').attr('word'),
                    synset: $('.exercise-current .testing-exercise-result').attr('synset'),
                    answerA: $('.exercise-current').find('.answer-guessing[val="1"] .guessing-text').text().trim(),
                    answerB: $('.exercise-current').find('.answer-guessing[val="2"] .guessing-text').text().trim(),
                    answerC: $('.exercise-current').find('.answer-guessing[val="3"] .guessing-text').text().trim(),
                    answerD: $('.exercise-current').find('.answer-guessing[val="4"]').attr('hideanswer').trim(),
                    time: Math.max(totalTime - second + 1, 1),
                    right: result[1],
                    isRight: check
                });
                console.log(dataAnswer);
                // Show answer
                console.log("Class: " + $(eleAnswer).attr('class'));
                let typeCourse = $(".testing-exercise-answer").attr("typeCourse");
                console.log("att: " + typeCourse);
                if (!$(eleAnswer).hasClass('no-answer')) {
                    console.log("Not has no answer");
                    if (typeCourse == "LISTEN") {
                        showAnswerWithoutFlash(divParent);
                    } else
                        showAnswer(divParent);
                } else {
                    console.log("Goto next");
                    gotoNext(divParent);
                }
            });
        }
        listAnswers = [];

    }
});


// CHECK ANSWER WRITING
$(document).on('click', '.testing-exercise-answer .answer-check.check-active', function () {

    var divParent = $(this).parents(".testing-exercise");
    var correctAnswer = $(divParent).attr('correctAnswer');
    var button = $(this);
    stopCountdown();

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

        $(divParent).addClass('show-answer');

        $(button).removeClass('check-active');

        var inputAnswer = $(divParent).find('.testing-exercise-answer .answer-writing');
        var userAnswer = $(inputAnswer).val().trim().toLowerCase();
        var token = $(divParent).attr('token');
        $(inputAnswer).trigger('blur');

        // Get answer true
        checkTestingAnswer(userAnswer, function (result) {
            trueAnswer = String(result).trim().toLowerCase();
            var check = 0;
            // RIGHT
            if (result.correct == 1) {
                check = 1;
                soundAnswerRight();
                $(inputAnswer).addClass('answer-right');

                // WRONG
            } else {
                soundAnswerWrong();
                $(inputAnswer).addClass('answer-wrong');
                $(inputAnswer).val(result.result);

            }
            dataAnswer.answerWrite.push({ answer: userAnswer, card: $('.exercise-current').attr('index'), word: $('.exercise-current .testing-exercise-result').attr('word'), synset: $('.exercise-current .testing-exercise-result').attr('synset'), time: Math.max(totalTime - second + 1, 1), right: result[1], isRight: check });

            // Show answer
            showAnswer(divParent);

        });
    }


});
$(document).on('keyup', '.testing-exercise-answer .answer-writing', function (e) {
    if (e.keyCode == 13) {
        $(this).next(".answer-check").trigger('click');
    } else {
        if ($(this).val().length > 0) {
            $(this).next(".answer-check").addClass('check-active');
        } else {
            $(this).next(".answer-check").removeClass('check-active');
        }
    }
});
$(document).on('keydown', '.testing-exercise-answer .answer-writing', function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});

function endTime() {

    readyRunCountdown = 1;
    var divParent = $(".testing-exercise.exercise-current");
    var correctAnswer = $(divParent).attr('correctAnswer');
    var typeQuestion = $(divParent).attr('typeQuestion');

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

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

        $(divParent).addClass('show-answer');

        // GUESSING
        if (typeQuestion == "guessing") {

            checkTestingAnswer(0, function (result) {

                $(divParent).find('.testing-exercise-answer .answer-guessing[val="' + result.result + '"]').addClass('choose-right');
                soundAnswerWrong();

                if ($(divParent).find('.testing-exercise-answer .answer-guessing.choose-right[hideAnswer] .guessing-text').length > 0) {
                    $(divParent).find('.testing-exercise-answer .answer-guessing.choose-right[hideAnswer] .guessing-text').text($(divParent).find('.testing-exercise-answer .answer-guessing.choose-right[hideAnswer]').attr('hideAnswer'));
                }
                //console.log("END TIME " + $('.exercise-current').attr('questionId'))
                dataAnswer.answerGuess.push({
                    pos: 0,
                    questionId: $('.exercise-current').attr('questionId'),
                    card: $('.exercise-current').attr('index'),
                    word: $('.exercise-current .testing-exercise-result').attr('word'),
                    synset: $('.exercise-current .testing-exercise-result').attr('synset'),
                    answerA: $('.exercise-current').find('.answer-guessing[val="1"] .guessing-text').text().trim(),
                    answerB: $('.exercise-current').find('.answer-guessing[val="2"] .guessing-text').text().trim(),
                    answerC: $('.exercise-current').find('.answer-guessing[val="3"] .guessing-text').text().trim(),
                    answerD: $('.exercise-current').find('.answer-guessing[val="4"]').attr('hideanswer').trim(),
                    time: totalTime,
                    right: result[1],
                    isRight: 0
                });

                // Show answer
                showAnswer(divParent);

            });

            // WRITING
        } else {
            var inputAnswer = $(divParent).find('.testing-exercise-answer .answer-writing');
            $(inputAnswer).trigger('blur');

            // Get answer true
            checkTestingAnswer("no answer", function (result) {

                soundAnswerWrong();
                $(inputAnswer).addClass('answer-wrong');
                $(inputAnswer).val(result.result);


                dataAnswer.answerWrite.push({ answer: "no answer", card: $('.exercise-current').attr('index'), word: $('.exercise-current .testing-exercise-result').attr('word'), synset: $('.exercise-current .testing-exercise-result').attr('synset'), time: totalTime, right: result[1], isRight: 0 });
                // Show answer
                showAnswer(divParent);

            });

        }

    }
}

function showAnswer(divParent) {

    setTimeout(function () {

        $(divParent).find('.flash-card-box').boxSlider('showSlide', 1);

        $('.flash-card-box').boxSlider('option', 'onafter', function ($previousSlide, $currentSlide, currIndex, nextIndex) {
            if (nextIndex == 1) {

                if ($(divParent).find('.testing-exercise-result .result-content-sound').length > 0) {
                    playSound($(divParent).find('.testing-exercise-result .result-content-sound'), function () {
                        //nextQuestion();
                    });
                    setTimeout(function () {
                        nextQuestion();
                    }, 2000);
                } else {
                    nextQuestion();
                }
            }
        });
    }, 1000);

    setTimeout(function () {
        // $("#testing-countdown").fadeOut(400);
    }, 500);
}

function showAnswerWithoutFlash(divParent) {
    //setTimeout(function () {

    //    $(divParent).find('.flash-card-box').boxSlider('showSlide', 1);

    //    $('.flash-card-box').boxSlider('option', 'onafter', function ($previousSlide, $currentSlide, currIndex, nextIndex) {
    //        if (nextIndex == 1) {
    //            if ($(divParent).find('.testing-exercise-result .result-content-sound').length > 0) {
    //                playSound($(divParent).find('.testing-exercise-result .result-content-sound'), function () {
    //                });
    //                setTimeout(function () {
    //                    nextQuestion();
    //                }, 2000);
    //            } else {
    //                nextQuestion();
    //            }
    //        }
    //    });
    //}, 1000);

    setTimeout(function () {
        nextQuestion();
    }, 1000);

}

function gotoNext(divParent) {
    setTimeout(function () {

        if ($(divParent).find('.testing-exercise-result .result-content-sound').length > 0) {
            playSound($(divParent).find('.testing-exercise-result .result-content-sound'), function () {
                //nextQuestion();
            });
            setTimeout(function () {
                nextQuestion();
            }, 1000);
        } else {
            nextQuestion();
        }

    }, 2000);

    setTimeout(function () {
        // $("#testing-countdown").fadeOut(400);
    }, 500);
}


function nextQuestion() {
    console.log("Next question");
    setTimeout(function () {

        var divCurrent = $(".testing-exercise.exercise-current");
        var indexCur = parseInt($(divCurrent).attr('index'));
        var divNext = $(".testing-exercise[index='" + (indexCur + 1) + "']");

        if (divNext.length > 0) {
            $(".testing-exercise.exercise-current").removeClass('exercise-current');
            $(divNext).addClass('exercise-current');

            $(divCurrent).addClass('learning-hide-item');
            $(divNext).addClass('learning-show-item');

            setTimeout(function () {
                $(divCurrent).css('display', 'none');
            }, 500);

            updateProcess();
        } else {

            $.blockUI(
                {
                    message: "Please wait...",
                    css: {
                        border: 'none',
                        padding: '15px',
                        backgroundColor: '#000',
                        '-webkit-border-radius': '2px',
                        '-moz-border-radius': '2px',
                        opacity: .5,
                        color: '#fff'
                    }
                }
            );

            document.cookie = 'userActive=; expires=Thu, 01-Jan-70 00:00:01 GMT;';
            dataAnswer = JSON.stringify(dataAnswer);
            console.log(dataAnswer);
            $.ajax({
                url: urlConfig('/Common/EditTestResult'),
                data: {
                    dataAnswer: dataAnswer
                },
                dataType: 'text',
                type: "POST",
                //async: false
            }).success(function (result) {
                console.log("result: " + result);
                if (result != "1" && result != 1) {
                    console.log("reload");
                    location.reload();
                } else {
                    console.log("urlConfig");
                    console.log(urlConfig(parentSlug + '/' + topicSlug));
                    //alert(1);
                    window.location.href = urlConfig(parentSlug + '/' + topicSlug);
                    window.onbeforeunload = null;
                }
            }).error(function (jqXHR, textStatus, errorThrown) {

            });

            // setTimeout(function() {
            //     //show charts for test
            //     window.location.href = urlConfig(parentSlug + '/' + topicSlug);
            //     window.onbeforeunload = null;
            // }, 3000);

        }
    }, 0);

}

function updateProcess() {
    console.log("update process");
    $('.testing-answer-group').fadeOut();
    var total = parseInt($(".testing-body-cover").attr('total'));
    var indexCur = parseInt($(".testing-exercise.exercise-current").attr('index'));
    if (total > 0) {
        $(".testing-process-bar").width((indexCur + 1) * 100 / total + '%');
    }
    totalTime = parseInt($('.exercise-current').attr('time'));
    $(".testing-countdown svg circle.circle").css('stroke-dashoffset', '0px');
    $(".testing-countdown-number").text(totalTime);
    $(".testing-exercise.exercise-current").css('display', 'block');;

    readyAnswer = 1;
    if ($(".testing-exercise.exercise-current .testing-exercise-answer .answer-writing").length > 0) {
        $(".testing-exercise.exercise-current .testing-exercise-answer .answer-writing").focus();
    }
    setTimeout(function () {
        // $("#testing-countdown").fadeIn(400);
        if ($(".testing-exercise.exercise-current .testing-exercise-quesiton .question-sound.main-sound-play-auto").length > 0) {
            playSound($('.testing-exercise.exercise-current .testing-exercise-quesiton .question-sound'), function () {

                runCountdown();
            });
        } else {

            runCountdown();
        }

    }, 500);
    updateImage(indexCur);
}


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

var readyRunCountdown = 1;
var readyAnswer = 1;

function runCountdown() {

    console.log("update process " + readyRunCountdown);
    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-countdown svg circle.circle").animate({
                        "stroke-dashoffset": "-101px",
                    }, (second) * 1000, "linear", function () {

                    });
                }

                $(".testing-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-countdown svg circle.circle").stop(true);
    window.clearInterval(t);
    readyRunCountdown = 1;
    readyAnswer = 0;
}

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

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 checkTestingAnswer(answer, getAnswer) {
    //console.log("Check answer: " + answer + ", questionId: " + questionId);

    $.ajax({
        //url: urlConfig('check-answer'),
        url: '/Common/CheckAnswer',
        data: {
            'questionId': $('.exercise-current').attr('questionId'),
            'customerAnswer': answer.toString(),
            //'correctAnswer': correctAnswer.toString()
        },
        type: "POST"
    }).success(function (result) {
        getAnswer(result);
    });

}




function updateImage(indexCurrent) {
    var next_1 = $(".testing-exercise[index='" + indexCurrent + "']");
    var next_2 = $(".testing-exercise[index='" + (indexCurrent + 1) + "']");

    if (next_1.length > 0) {
        if ($(next_1).find('.testing-exercise-result .result-img img').attr('src') == '' || $(next_1).find('.testing-exercise-result .result-img img').attr('src') == undefined) {
            $(next_1).find('.testing-exercise-result .result-img img').attr('src', $(next_1).find(".testing-exercise-result").attr('img_url'));
        }
    }

    if (next_2.length > 0) {
        if ($(next_2).find('.testing-exercise-result .result-img img').attr('src') == '' || $(next_2).find('.testing-exercise-result .result-img img').attr('src') == undefined) {
            $(next_2).find('.testing-exercise-result .result-img img').attr('src', $(next_2).find(".testing-exercise-result").attr('img_url'));
        }
    }


}

$(document).ready(function () {
    $(".testing-exercise-flashcard .flash-card-box").each(function () {
        var index = $(this).attr('index');
        var defaultOptions = {
            speed: 600
            , timeout: 300
            , next: '#next'
            , prev: '#prev'
            , pause: '#pause'
        };
        $("#learning-theory-box-" + (index)).boxSlider(defaultOptions);
    });
});