EDU/Website/NEducation/Content/assets/js/voca/learning-flashcard.js

$(function () {
    var topicId = $('#hidden-topicid').val();
    var parentTopic = $('#hidden-parent').val();

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

    $('.flash-card-box').boxSlider('option', 'onafter', function ($previousSlide, $currentSlide, currIndex, nextIndex) {
        if (nextIndex == 1) {
            //playSound($($currentSlide).find('.card-content-type .card-content-sound'), function () {
                //playSound($($currentSlide).find('.card-content-example .card-content-sound'));
            //});

        }
    });

    $('.flash-card-box').boxSlider('option', 'onbefore', function ($currentSlide, $nextSlide, currIndex, nextIndex) {
        if ($($nextSlide).find('.card-img img').attr('src') == '' || $($nextSlide).find('.card-img img').attr('src') == undefined) {
            $($nextSlide).find('.card-img img').attr('src', $(this).attr('img_url'));
        }
    });

    // Create a new instance of kontext
    var k = kontext(document.querySelector('#learning-theory-kontext'));

    $(".learning-main-process-value").width((k.getIndex() + 1) * 100 / k.getTotal() + '%');

    // API METHODS:

    // k.prev(); // Show prev layer
    // k.next(); // Show next layer
    // k.show( 3 ); // Show specific layer
    // k.getIndex(); // Index of current layer
    // k.getTotal(); // Total number of layers
    var clickNext = 1;
    var face = 0;
    $(document).on("click", ".learning-theory-button.button-next", function () {
        if (k.getIndex() < k.getTotal() - 1 && clickNext == 1) {
            $('.exercise-current').removeClass('show-answer-right');
            $('.exercise-current').removeClass('show-answer-wrong');
            $('.learning-fill-word').val('');
            clickNext = 0;
            setTimeout(function () {
                clickNext = 1;
            }, 1000);

            var indexCurrent = parseInt($(".kontext .layer.show .flash-card-box").attr('index'));

            var next_1 = $("#learning-theory-box-" + (indexCurrent + 1));
            var next_2 = $("#learning-theory-box-" + (indexCurrent + 2));

            if (next_1.length > 0) {
                if ($(next_1).find('.slide:first-child .card-img img').attr('src') == '' || $(next_1).find('.slide:first-child .card-img img').attr('src') == undefined) {
                    $(next_1).find('.slide:first-child .card-img img').attr('src', $(next_1).attr('img_url'));
                }

                //playSound($("#learning-theory-box-" + indexCurrent).find('.card-content-type .card-content-sound'));
            }

            if (next_2.length > 0) {
                if ($(next_2).find('.slide:first-child .card-img img').attr('src') == '' || $(next_2).find('.slide:first-child .card-img img').attr('src') == undefined) {
                    $(next_2).find('.slide:first-child .card-img img').attr('src', $(next_2).attr('img_url'));
                }
            }

            k.next();
            face = 0;
            $(".learning-main-process-value").width((k.getIndex() + 1) * 100 / k.getTotal() + '%');
            $('.layer').removeClass('exercise-current');
            $('.layer.show').addClass('exercise-current');
            setTimeout(function () {
                $(".exercise-current .learning-fill-word").focus();

            }, 500);
        } else {
            if (clickNext == 1) {
                var link = $('#complete-link').val();
                window.location.href = link;
            }

        }
    });

    $(document).on("click", ".learning-theory-button.button-back", function () {
        if (k.getIndex() > 0 && clickNext == 1) {
            $('.exercise-current').removeClass('show-answer-right');
            $('.exercise-current').removeClass('show-answer-wrong');
            $('.learning-fill-word').val('');
            clickNext = 0;
            setTimeout(function () {
                clickNext = 1;
            }, 1000);

            var indexCurrent = parseInt($(".kontext .layer.show .flash-card-box").attr('index'));
            playSound($("#learning-theory-box-" + indexCurrent).find('.card-content-type .card-content-sound'));

            k.prev();
            face = 0;
            $(".learning-main-process-value").width((k.getIndex() + 1) * 100 / k.getTotal() + '%');
            $('.layer').removeClass('exercise-current');
            $('.layer.show').addClass('exercise-current');
            setTimeout(function () {
                $(".exercise-current .learning-fill-word").focus();

            }, 500);
        }
    });
    document.addEventListener('keyup', function (event) {

        if (event.keyCode === 37) {
            $('.learning-theory-button.button-back').trigger('click');
        } else if (event.keyCode === 39) {
            $('.learning-theory-button.button-next').trigger('click');
        } else if (event.keyCode === 40) {
            if (face == 1) {
                face = 0;
            } else {
                face++;
            }
            $('.layer.show').find('.flash-card-box').boxSlider('showSlide', face);
        } else if (event.keyCode === 38) {
            if (face == 0) {
                face = 1;
            } else {
                face--;
            }
            $('.layer.show').find('.flash-card-box').boxSlider('showSlide', face);
        } else if (event.keyCode === 13) {
            if (!$('.exercise-current').find('.learning-fill-word').is(':focus')) {
                $(".learning-theory-button.button-next").trigger('click');
            }
        }
        event.preventDefault();
    }, false);

    $(".learning-theory-flashcard .card-content-example .example-button").click(function (event) {
        event.stopPropagation();
        if ($(this).hasClass('example-show')) {
            $(this).removeClass('example-show');

            $(this).parents('.card-content').find('.card-content-example-translate').slideUp(400);
        } else {
            $(this).addClass('example-show');
            $(this).parents('.card-content').find('.card-content-example-translate').slideDown(400);
        }
    });

    $(".card-content-collocations").click(function (event) {
        event.stopPropagation();
        $('#modal-collocations').modal();
    });


    $(".main-sound-play").click(function (event) {
        event.stopPropagation();
        playSound(this);
    });


});

$(document).ready(function () {
    $('.card-content-collocations').click(function () {
        var content = $(this).attr('content');
        $('#modal-collocations .collocations-content').html(content);
        $('#modal-collocations').modal();
    });


    //check write word by enter key
    $('.learning-fill-word').keyup(function (e) {
        $('.exercise-current').removeClass('show-answer-right');
        $('.exercise-current').removeClass('show-answer-wrong');
        if (e.keyCode == 13) {
            $('.exercise-current').find('.btn-learning-check').trigger('click');
        }
    });
    $('.btn-learning-check').click(function () {
        var answer = $('.exercise-current').find('.learning-fill-word').val();

        if (answer.trim() != "" && !$('.exercise-current').hasClass('show-answer-right') && !$('.exercise-current').hasClass('show-answer-right')) {
            var right = $('.exercise-current').attr('words');

            if (answer.toLowerCase().trim() == right.toLowerCase().trim()) {
                $('.exercise-current').addClass('show-answer-right');
                setTimeout(function () {
                    $('.exercise-current').find('.learning-fill-word').blur();
                }, 1000);

                soundAnswerRight();
                $('.layer.show').find('.flash-card-box').boxSlider('showSlide', 1);
            } else {
                $('.exercise-current').addClass('show-answer-wrong');
                soundAnswerWrong();
            }
        }
    });
});