EDU/Website/NEducation/Views/Voca/Learning.cshtml


@{
    ViewBag.Title = "Learning";
    Layout = "~/Views/Shared/_LayoutLearning.cshtml";

}

@using NEducation.NEduService;
@using NEducation.Content.Texts;
@model NEducation.Models.VocabularyModel

<link href="~/Content/assets/css/animate.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/css/kontext.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/css/learning-flashcard.css" rel="stylesheet" type="text/css" />

<input type='hidden' id='hidden-topicid' value='96' />
<input type='hidden' id='hidden-parent' value='95' />
<input type='hidden' id='complete-link' value='/Voca/LearningFinish?lessonId=@Model.lessonId' />

<!-- Process -->
<div class="learning-main-process">
    <div class="learning-main-process-value"></div>
</div>

<div class="learning-theory-body">
    <!-- Flashcard -->
    <div class="learning-theory-flashcard">
        <div id="learning-theory-kontext" class="kontext">
            @for (int i = 0; i < Model.vocabularies.Count; i++)
            {
                NEducation.Code.Vocabulary voca = Model.vocabularies[i];

                <div class="layer @(@i == 0 ? " show exercise-current" : "")" words="@voca.nameGlobal" word="@voca.id" definition="" style="display: none; margin-top: 50px;">
                    <div class="flash-card-viewport">
                        <div class="flash-card-box" id="learning-theory-box-@(i + 1)" index="@(i + 1)" img_url="@voca.picture">
                            <figure class="slide jbs-current">
                                <div class="learning-theory-flash-card-content">
                                    <div class="card-img">
                                        @*<img src="@voca.picture" alt="@voca.nameGlobal" />*@
                                        <img src="@voca.picture" alt="@voca.nameGlobal" />

                                    </div>
                                    <div class="card-content">
                                        <p class="card-content-text-large">
                                            @voca.nameGlobal
                                            @if (voca.contentType == NEducation.Controllers.UtilsController.GetContentType.AUDIO_FILE)
                                            {
                                                <a class="card-content-sound main-sound-play" href="javascript:void(0)"
                                                   sound_url="@(voca.content)"></a>
                                            }
                                        </p>
                                        <p class="card-content-line">@voca.descriptionGlobal</p>
                                        <p class="card-content-phonetic">
                                            @*@if (voca.contentType == NEducation.Controllers.UtilsController.GetContentType.AUDIO_FILE)
                                                {
                                                    <a class="card-content-sound main-sound-play" href="javascript:void(0)"
                                                       sound_url="@(voca.content)"></a>
                                                }*@
                                            @*@voca.spell*@
                                        </p>
                                        @if (voca.example != null && voca.example != "")
                                        {
                                            @*<p class="card-content-line">
                                                </p>*@
                                            <p class="card-content-example">
                                                @*<a class="card-content-sound main-sound-play" href="javascript:void(0)"
                                                    sound_url="~/Content/assets/sounds/samples/0jloj1uugdnp5dvcpoxiw9503kucjx65m3prpee.mp3"></a>*@
                                                <span>@Lang.Example:</span><br />
                                                @Html.Raw(@voca.example.Replace(voca.nameGlobal.ToLower(), "<span class='text-blue'>" + voca.nameGlobal.ToLower() + "</span>"))
                                                @*<a href="javascript:void(0)" class="example-button"><i class="fa fa-angle-down" aria-hidden="true"></i></a>*@
                                            </p>
                                        }
                                    </div>
                                    <span class="card-number">1</span>
                                    <span class="card-turn">
                                        <span class="turn-icon"></span>
                                    </span>
                                </div>
                            </figure>
                            <figure class="slide jbs-current" style="display:none;">
                                <div class="learning-theory-flash-card-content">
                                    <div class="card-img">
                                        <img alt="img" />
                                    </div>
                                    <div class="card-content">
                                        <p class="card-content-text-main">
                                            @voca.nameLocal
                                        </p>
                                        @*<p class="card-content-line">
                                                <span class="card-content-type">
                                                    @if (voca.contentType == NEducation.Controllers.UtilsController.GetContentType.AUDIO_FILE)
                                                    {
                                                        <a class="card-content-sound main-sound-play" href="javascript:void(0)"
                                                           sound_url="@(voca.content)"></a>
                                                    }
                                                    @voca.spell
                                                </span>
                                            </p>*@
                                        <p class="card-content-line"> </p>
                                        <p class="card-content-example"> </p>
                                        <p class="card-content-phonetic">
                                            @if (voca.contentType == NEducation.Controllers.UtilsController.GetContentType.AUDIO_FILE)
                                            {
                                                <a class="card-content-sound main-sound-play" href="javascript:void(0)"
                                                   sound_url="@(voca.content)"></a>
                                            }
                                            @voca.spell
                                        </p>
                                        @*<p class="card-content-example">
                                                @voca.nameLocal
                                            </p>*@

                                        @*<p class="card-content-example-translate">@voca.example_mean</p>*@
                                        @*<p class="card-content-line"></p>*@
                                        @*<a href="javascript:void(0)" class="context"><span></span>Context</a>*@
                                    </div>
                                    <span class="card-number">2</span>
                                    <span class="card-turn">
                                        <span class="turn-icon"></span>
                                        @*<span class="turn-text">Xoay<br />flashcards</span>*@
                                    </span>
                                </div>
                            </figure>
                        </div>
                    </div>
                    <!--Begin fill answer-->
                    <div class="learning-fill">
                        <div class="row">
                            <div class="col-md-12">
                                <input type="text" class="form-control learning-fill-word" placeholder="@Lang.EnterYourAnswer" />
                                <button class="learning-btn-fill-word btn-learning-check">@Lang.Check@*Kiểm tra*@@*Vérifier*@</button>
                            </div>
                            <div class="col-md-7 col-md-offset-5 hidden-xs hidden-sm warning-test-group" style="margin-top: -50px;">
                                <div class="learning-right-group animated bounceIn">
                                    <p class="learning-fill-msg">
                                        <img src="~/Content/assets/imgs/learning-right.png" /><span>
                                            @*You are correct!*@
                                            @Lang.RightAnswer
                                        </span>
                                    </p>
                                    <p class="learning-view-msg  hidden-sm">
                                        @*Nhấn vào nút xoay để xem các mặt Flashcard bạn nhé! ^^*@
                                        @*Cliquez sur le bouton de rotation pour afficher vos visages Flashcard! ^^*@
                                    </p>
                                </div>
                                <div class="learning-wrong-group animated bounceIn">
                                    <p class="learning-fill-msg">
                                        <img src="~/Content/assets/imgs/learning-wrong.png" /><span>
                                            @*Vous avez tort!*@
                                            @Lang.WrongAnswer
                                        </span>
                                    </p>
                                    <p class="learning-view-msg  hidden-sm">
                                        @*Nhấn vào nút xoay để xem gợi ý bạn nhé! ^^*@
                                        @*Cliquez sur le bouton de rotation pour voir votre suggestion! ^^*@
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End fill answer-->
                </div>
            }
        </div>
    </div>
</div>

<!-- Bottom -->
<div class="learning-theory-bottom">
    <div class="learning-theory-bottom-cover">
        <a class="learning-theory-button button-back" href="javascript:void(0)">
            @Lang.Back
            @*Quay lại*@
            @*Reviens*@
        </a>
        <div class="learning-theory-list-button">
            @*<a href="javascript:void(0)" data-toggle="modal" data-target="#feedback-fault" class="button-item item-1"><span class="item-icon"></span>Báo lỗi</a>
                <a href="javascript:void(0)" class="button-item item-2 btn-learning-pin-word"><span class="item-icon"></span>Ghim từ</a>
                <a href="#" data-toggle="modal" data-target="#modal-setup" class="button-item item-3"><span class="item-icon"></span>Cài đặt</a>*@
            @*<a href="javascript:void(0)" topic="96" is_unknow="1" is_finish="0" parent="95" class="button-item item-4 button-learning-continue" text="Học từ vựng">
                    <span class="item-icon"></span>Chuyển bước
                </a>*@
        </div>
        <a class="learning-theory-button button-next" href="javascript:void(0)">
            @Lang.Next
            @*Tiếp theo*@
            @*Suivant*@
        </a>
    </div>
</div>
<div id="modal-collocations" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <a class="modal-button-close" href="javascript:void(0)" data-dismiss="modal"></a>

            <p class="collocations-title">Collocations</p>
            <div class="collocations-content"></div>
        </div>
    </div>
</div>

<!--begin feedback-->
<div id="feedback-fault" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog fault-dialog">
        <div class="modal-content">

            <div class="modal-content-feedback">
                <a class="modal-button-close" href="javascript:void(0)" data-dismiss="modal"></a>
                <p class="fault-title text-center"><span>BÁO LỖI</span> </p>
                <div class="modal-body">
                    <!--begin feedback content-->
                    <div class="row">
                        <div class="col-xs-12">
                            <p class="fault-subtitle">Vui lòng chọn lỗi cần thông báo</p>
                        </div>
                        <div class="col-xs-12">
                            <div class="slt-fault">
                                <p><span class="slt-fault-value" value="1">Lỗi hình ảnh</span><i class="fa fa-chevron-down"></i></p>
                            </div>
                            <div class="slt-fault-option">
                                <p>
                                    <span class="slt-item" value="1">Lỗi hình ảnh</span>


                                    <span class="slt-item" value="3">Định nghĩa tiếng Anh</span>
                                </p>

                                <p>
                                    <span class="slt-item" value="4">Nghĩa tiếng Việt</span>


                                    <span class="slt-item" value="8">Loại từ</span>
                                </p>

                                <p>
                                    <span class="slt-item" value="6">Phiên  âm Anh</span>


                                    <span class="slt-item" value="10">Phiên âm Mỹ</span>
                                </p>

                                <p>
                                    <span class="slt-item" value="2">Âm thanh Anh của từ</span>


                                    <span class="slt-item" value="11">Âm thanh Anh của ví dụ</span>
                                </p>

                                <p>
                                    <span class="slt-item" value="12">Âm thanh Mỹ của từ</span>


                                    <span class="slt-item" value="13">Âm thanh Mỹ của ví dụ</span>
                                </p>

                                <p>
                                    <span class="slt-item" value="5">Từ đồng nghĩa</span>


                                    <span class="slt-item" value="7">Dịch ví dụ</span>
                                </p>

                                <p>
                                    <span class="slt-item" value="14">Ví dụ tiếng Anh</span>


                                    <span class="slt-item" value="9">Lỗi khác</span>
                                </p>


                            </div>
                        </div>
                        <div class="col-xs-12">
                            <textarea class="form-control txt-fault" rows="7" placeholder="Vui lòng nhập nội dung lỗi vào đây"></textarea>
                            <p class="msg-feedback"></p>
                        </div>
                        <div class="col-xs-12 text-center">

                            <a href="javascript:void(0)" topic="96" class="send-fault">GỬI</a>
                        </div>
                    </div>
                    <!--end feedback content-->
                </div>


            </div>
            <div class="modal-content-thanks">
                <div class="row">
                    <div class="col-xs-12">
                        <p class="text-center"><img class="feedback-sent-img animated bounceIn" src="~/Content/assets/imgs/feedback-vocabulary-sent.png" /></p>
                        <p class="feedback-has-sent text-center">ĐÃ GỬI</p>
                        <p class="feedback-thanks text-center">Cảm ơn bạn rất nhiều về sự đóng góp.<br /> Chúc bạn học tốt!</p>
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--end feedback-->

<style>
    @@media (max-width: 768px) {
        .flash-card-viewport {
            height: 350px;
        }

        #learning-theory-kontext .flash-card-box .slide {
            height: 350px;
        }
    }
</style>

<script type="text/javascript">

    var checkOption = 1;
    $('.slt-fault').click(function (e) {

        checkOption = 0;
        $('.slt-fault-option').slideToggle();
        setTimeout(function () {
            checkOption = 1;
        }, 500);
    });
    $('#feedback-fault .modal-body').click(function () {
        if (checkOption == 1) {
            $('.slt-fault-option').slideUp();
        }

    });
    $('.slt-item').click(function () {
        var val = $(this).attr('value');
        $('.slt-fault span').attr('value', val);
        $('.slt-fault span').text($(this).text());
    });
    $('.txt-fault').keyup(function () {
        if ($(this).val() != "") {
            $('.send-fault').addClass('send-fault-active');
        } else {
            $('.send-fault').removeClass('send-fault-active');
        }
    });
    //feedback fault
    $('.send-fault').click(function () {
        var contentFault = $('.txt-fault').val();
        var fault = $('.slt-fault span').attr('value');
        var topic = $(this).attr('topic');
        var word = $('.exercise-current').attr('word');
        var definition = $('.exercise-current').attr('definition');

        if (contentFault.trim() == "") {
            return;
        }
        $.ajax({
            url: urlConfig("report-fault"),
            data: {
                topic: topic,
                fault: fault,
                synset: definition,
                word: word,
                faultContent: contentFault
            },
            type: "POST"
        }).success(function (data) {
            if (data[0] != 0) {

                $('.modal-content-feedback').css('display', 'none');
                $('.modal-content-thanks').css('display', 'block');
                $('.txt-fault').val('');
                setTimeout(function () {
                    $('#feedback-fault').modal('hide')

                    $('.modal-content-thanks').css('display', 'none');
                    $('.modal-content-feedback').css('display', 'block');
                }, 3000);
            }
        });
    });
</script>
<style>
</style>

<div id="modal-setup" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <a class="modal-button-close" href="javascript:void(0)" data-dismiss="modal"></a>

            <p class="setup-title">Cài đặt</p>
            <p class="setup-line"></p>
            <form action="https://www.voca.vn/set-learning-type" method="post">
                <div class="setup-content">
                    <p class="setup-label">Chọn âm thanh</p>
                    <div class="setup-radio">
                        <label class="setup-check">
                            <input class="setup-sound-check-input" checked="checked" type="radio" value="1" name="sound_type">
                            <span class="setup-sound-check"><span class="icon"></span></span>
                            Anh - Mỹ
                        </label>
                        <label class="setup-check">
                            <input class="setup-sound-check-input" type="radio" value="2" name="sound_type">
                            <span class="setup-sound-check"><span class="icon"></span></span>
                            Anh - Anh
                        </label>
                    </div>

                </div>
                <div class="setup-content hidden">
                    <p class="setup-label">Chọn giao diện</p>
                    <div class="setup-radio setup-lang">
                        <label class="setup-check">
                            <input class="setup-sound-check-input" checked="checked" type="radio" value="1" name="interface_type">
                            <span class="setup-sound-check"><span class="icon"></span></span>
                            Ngang
                        </label>
                        <label class="setup-check">
                            <input class="setup-sound-check-input" type="radio" value="2" name="interface_type">
                            <span class="setup-sound-check"><span class="icon"></span></span>
                            Dọc
                        </label>

                    </div>

                </div>

                <button type="submit" class="setup-submit">Lưu</button>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).on('change', '#modal-setup input[type="radio"]', function () {
        $("#modal-setup .setup-submit").addClass('setup-active');
    });
</script>

<div class="modal fade" id="modal-sample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <a href="javascript:void(0)" class="modal-button-close" data-dismiss="modal"></a>
            <div class="sample-title">
                <p>Từ "<span></span>" trong ngữ cảnh</p>
            </div>

            <div class="sample-tab">
                <a href="javascript:void(0)" class="tab-text sample-tab-active">Từ trong câu</a>
                <a href="javascript:void(0)" class="tab-video">Từ trong video</a>
            </div>
            <div class="sample-content"></div>


            <div class="video-content">
                <div class="video-item-content">
                    <div class="modal-video-cover">
                        <div id="video-player"></div>

                    </div>

                    <div class="song-video-bg"></div>

                    <div class="song-video-lyric">
                        <div class="playbuton">
                            <span></span>
                        </div>
                        <p class="lyric-en"></p>
                        <p class="lyric-vi"></p>
                        <a href="javascript:void(0)" class="song-prev"></a>
                        <a href="javascript:void(0)" class="song-next"></a>
                    </div>
                </div>
                <p class="video-msg">Hiện VOCA chưa cập nhật các VIDEO cho từ vựng này. Nhưng sẽ sớm thôi, bạn hãy chờ nhé!^^</p>
            </div>


        </div>
    </div>
</div>


<script type="text/javascript">
    var list = [];
    var videoId;
    var start = 0;
    var end = 0;
    var isSeeked = false;
    var listPos = 0;
    $(document).ready(function () {
        $(".context").click(function (event) {
            event.stopPropagation();
            listPos = 0;
            videoId = '';
            isSeeked = false;
            $('.video-content').fadeOut();
            $('.sample-content').fadeIn();
            $('#modal-sample .sample-tab a').removeClass('sample-tab-active');
            $('#modal-sample .sample-tab a').eq(0).addClass('sample-tab-active');
            var word = $('.exercise-current').attr('words');
            if (word == undefined) {
                word = $('.exercise-current').attr('answer');
            }
            $('.sample-title p span').text(word);
            var sample = $('.exercise-current').find('.card-content-example').html();
            $.ajax({
                url: 'https://www.voca.vn/sample-by-word' + '/' + word,
                data: {
                    'sample': sample
                },
                headers: {
                    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
                },
                type: 'POST'
            }).success(function (result) {
                $('.sample-content').html(result[1]);


                list = result[0];
                if (list.length > 0) {
                    $('.video-item-content').fadeIn();
                    $('.video-msg').fadeOut();
                    var sp = "";
                    for (var i = 0; i < list.length; i++) {
                        sp += "<span></span>";
                    }
                    $('.playbuton').html(sp);


                    start = list[listPos]['start'];
                    end = list[listPos]['end'];
                    videoId = list[listPos]['video_id'];
                    $('.lyric-en').html(list[listPos]['content']);
                    $('.lyric-vi').html(list[listPos]['content_vi']);
                    $('.playbuton span').removeClass('sp-active');
                    $('.playbuton span').eq(listPos).addClass('sp-active');
                } else {
                    $('.video-item-content').fadeOut();
                    $('.video-msg').fadeIn();
                }

                $('#modal-sample').modal();
            });


            return false;
        });

        $('.tab-video').click(function () {
            if (!$(this).hasClass('sample-tab-active')) {
                player.playVideo();
                $('#modal-sample .sample-tab a').removeClass('sample-tab-active');
                $(this).addClass('sample-tab-active');
                $('.sample-content').fadeOut();
                $('.video-content').fadeIn();
            }

        });

        $('.tab-text').click(function () {
            if (!$(this).hasClass('sample-tab-active')) {
                player.pauseVideo();
                clearInterval(intervalVideo);
                clearInterval(timeVideo);
                $('#modal-sample .sample-tab a').removeClass('sample-tab-active');
                $(this).addClass('sample-tab-active');
                $('.video-content').fadeOut();
                $('.sample-content').fadeIn();
            }

        });
    });
</script>


<script type="text/javascript">
    $(document).on('click', '.playbuton span', function (e) {
        player.pauseVideo();
        listPos = $(this).index();
        isSeeked = false
        start = list[listPos]['start'];
        end = list[listPos]['end'];
        $('.lyric-en').html(list[listPos]['content']);
        $('.lyric-vi').html(list[listPos]['content_vi']);
        $('.playbuton span').removeClass('sp-active');
        $(this).addClass('sp-active');
        player.cueVideoById({ videoId: list[listPos]['video_id'] });
        setTimeout(function () {
            player.playVideo();
        }, 500);
    });

    $(document).on('click', '.song-next', function (e) {

        listPos = parseInt(listPos) + 1;
        if (list[listPos] != undefined) {
            player.pauseVideo();
            isSeeked = false
            start = list[listPos]['start'];
            end = list[listPos]['end'];
            $('.lyric-en').html(list[listPos]['content']);
            $('.lyric-vi').html(list[listPos]['content_vi']);
            $('.playbuton span').removeClass('sp-active');
            $('.playbuton span').eq(listPos).addClass('sp-active');
            player.cueVideoById({ videoId: list[listPos]['video_id'] });
            setTimeout(function () {
                player.playVideo();
            }, 500);
        }

    });

    $(document).on('click', '.song-prev', function (e) {

        listPos = parseInt(listPos) - 1;
        if (list[listPos] != undefined) {
            player.pauseVideo();
            isSeeked = false
            start = list[listPos]['start'];
            end = list[listPos]['end'];
            $('.lyric-en').html(list[listPos]['content']);
            $('.lyric-vi').html(list[listPos]['content_vi']);
            $('.playbuton span').removeClass('sp-active');
            $('.playbuton span').eq(listPos).addClass('sp-active');
            player.cueVideoById({ videoId: list[listPos]['video_id'] });
            setTimeout(function () {
                player.playVideo();
            }, 500);
        }

    });

    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;

    function onYouTubeIframeAPIReady() {

        player = new YT.Player('video-player', {
            height: '100%',
            width: '100%',
            playerVars: {
                autoplay: 0,
                controls: 0,
                showinfo: 0,
                playsinline: 1,
                rel: 0
            },
            events: {
                'onStateChange': onPlayerStateChange,
                'onError': onPlayerError
            }
        });




        function isFunction(functionToCheck) {
            return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
        }

        $('#modal-sample').on('show.bs.modal', function (event) {

            if (event.relatedTarget != undefined) {
                videoId = $(event.relatedTarget).data('video');
            }

            player.cueVideoById({ videoId: videoId });
            player.pauseVideo();
        });

        $('#modal-sample').on('hide.bs.modal', function (event) {

            player.pauseVideo();
            clearInterval(intervalVideo);
            clearInterval(timeVideo);
        });

    }


    var intervalVideo, timeVideo;
    function onPlayerStateChange(event) {


        if (event.data == YT.PlayerState.PLAYING) {
            // Set setInterval
            intervalVideo = setInterval(function () {
                var currentTime = player.getCurrentTime();

                if (!isNaN(start) && !isNaN(end)) {
                    isSeeked = true;
                    if (currentTime < start || currentTime > end) {
                        player.seekTo(start);
                    }
                }
                if (currentTime >= end || isNaN(end)) {
                    player.pauseVideo();
                    setTimeout(function () {
                        playNextVideo();
                    }, 2000);


                }
            }, 100);
        } else {
            clearInterval(intervalVideo);
        }
    }
    function onPlayerError(event) {
        playNextVideo();

    }

    function playNextVideo() {
        listPos++;
        if (list[listPos] != undefined) {
            timeVideo = setTimeout(function () {
                $('.playbuton span').removeClass('sp-active');
                $('.playbuton span').eq(listPos).addClass('sp-active');
                isSeeked = false
                start = list[listPos]['start'];
                end = list[listPos]['end'];
                $('.lyric-en').html(list[listPos]['content']);
                $('.lyric-vi').html(list[listPos]['content_vi']);
                player.cueVideoById({ videoId: list[listPos]['video_id'] });

                setTimeout(function () {
                    player.playVideo();
                }, 500);
            }, 1000);

        }
    }
</script>

<!--******** AUDIO MAIN ******** -->
<audio id="learning-main-audio">
    <source class="src" src="" type="audio/mpeg">
</audio>
<audio id="audio-answer-right">
    <source class="src" src="~/Content/assets/sounds/learning_right.mp3" type="audio/mpeg">
</audio>
<audio id="audio-answer-wrong">
    <source class="src" src="~/Content/assets/sounds/learning_wrong.mp3" type="audio/mpeg">
</audio>


<input type="hidden" name="" id="learning-modal-info" is_unknow="0" is_finish="1" is_review="0" topic="0" parent="0" />

<div class="modal fade" id="learning-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <span class="modal-button-close" data-dismiss="modal"></span>

            <div class="learning-modal-content">
                <p class="learning-modal-title">
                    @Lang.ContinueWithYourChoose
                    @*Veuillez continuer avec l'option suivante*@
                </p>
                <div class="learning-modal-btn">
                    <a class="learning-modal-btn-learning" href="/Voca/Learning?lessonId=@ViewBag.lessonId">@Lang.Relearn</a>
                    <a class="learning-modal-btn-testing" link="" href="/Voca/Testing?lessonId=@ViewBag.lessonId">@Lang.Retest</a>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
    $(document).ready(function () {
        $('#learning-question-modal a').click(function () {
            var link = $(this).attr('link');
            var topic = $('#learning-modal-info').attr('topic');
            var parent = $('#learning-modal-info').attr('parent');
            var url = link + '/' + topic + '-' + parent;
            $('#learning-modal-form').attr('action', url);
            $('.learning-modal-btn-unknow').attr('href', (url + '-unknow'));
            $('.learning-modal-btn-all').attr('href', url);
        });
    });

</script>


@*<div class="modal fade" id="learning-question-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <span class="modal-button-close" data-dismiss="modal"></span>

                <div class="learning-question-modal-content">
                    <p class="learning-question-modal-title">Bạn hãy chọn một hình thức học</p>
                    <div class="learning-question-modal-btn">
                        <a class="learning-modal-btn-flashcard" data-toggle="modal" data-target="#learning-type-modal" data-dismiss="modal" href="javascript:void()" link="https://www.voca.vn/learning-flashcard">Flashcard 2 mặt</a>
                        <a class="learning-modal-btn-flashcard-dark" data-toggle="modal" data-target="#learning-type-modal" data-dismiss="modal" href="javascript:void()" link="https://www.voca.vn/learning">Flashcard 3 mặt</a>
                        <a class="learning-modal-btn-writing" data-toggle="modal" data-target="#learning-type-modal" data-dismiss="modal" href="javascript:void()" link="https://www.voca.vn/learning-writing">Gõ từ</a>
                        <a class="learning-modal-btn-pronounciation" data-toggle="modal" data-target="#learning-type-modal" data-dismiss="modal" href="javascript:void()" link="https://www.voca.vn/learning-speaking">Phát âm</a>
                    </div>
                </div>
            </div>
        </div>
    </div>*@
<!--<a class="learning-modal-btn-sentence" data-toggle="modal" data-target="#learning-type-modal"  data-dismiss="modal" href="javascript:void()" link="https://www.voca.vn/learning-context">Ngữ cảnh</a>-->

<script type="text/javascript">
    $(document).ready(function () {
        $('.learning-modal-btn-choosing').click(function () {
            var topic = $('#learning-modal-info').attr('topic');
            var parent = $('#learning-modal-info').attr('parent');
            $.ajax({
                url: urlConfig("choose-learn-words"),
                data: {
                    topic: topic,
                    parent: parent
                },
                type: "POST"
            }).success(function (data) {
                if (data[0] != 0) {

                    $('#modal-choose-word .choose-word-content-cover').html(data);
                    $('#modal-choose-word').modal();
                }
            });
        });
    });
</script>
<input type="hidden" id="learning-modal-btn-unknow-content" unknow="Học từ chưa biết" unfinish="Học từ chưa thuộc" name="">
<div class="modal fade" id="learning-type-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <span class="modal-button-close" data-dismiss="modal"></span>

            <div class="learning-type-modal-content">
                <p class="learning-type-modal-title">Bạn hãy chọn một hình thức học</p>
                <div class="learning-type-modal-btn">
                    <a class="learning-modal-btn-choosing" href="javascript:void(0)">Chọn từ muốn học</a>
                    <a class="learning-modal-btn-unknow" href="">Học từ chưa thuộc</a>
                    <a class="learning-modal-btn-all" href="">Học tất cả</a>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<script type="text/javascript">
    $(document).on('click', '.choose-word-title .choose-all .choose-word-check', function () {
        if ($(this).hasClass('word-checked')) {
            $(this).removeClass('word-checked');
            $('.choose-word-content .word-item .item-check input[type="checkbox"]').prop('checked', false);
        } else {
            $(this).addClass('word-checked');
            $('.choose-word-content .word-item .item-check input[type="checkbox"]').prop('checked', true);
        }

        $('.choose-word-content .word-item .item-check input[type="checkbox"]').trigger('change');
    });

    $(document).on('change', '.choose-word-content .word-item .item-check input[type="checkbox"]', function () {

        var total = $(".choose-word-content .word-item .item-check input[type='checkbox']").length;
        var totalCheck = $(".choose-word-content .word-item .item-check input[type='checkbox']:checked").length;

        if (total == totalCheck) {
            $(".choose-word-title .choose-all .choose-word-check").addClass('word-checked');
        } else {
            $(".choose-word-title .choose-all .choose-word-check").removeClass('word-checked');
        }
        $(".choose-word-title .number").text(totalCheck < 10 ? '0' + totalCheck : totalCheck);


    });

</script>
<!-- MODAL -->
<div id="modal-choose-word" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <a class="modal-button-close" href="javascript:void(0)" data-dismiss="modal"></a>

            <form id="learning-modal-form" action="" method="post">
                <p class="choose-word-title">Chọn từ muốn học<span class="number">00</span><span class="choose-all">Chọn tất cả <span class="choose-word-check"><span class="icon-all"></span></span></span></p>

                <div class="choose-word-content">
                    <div class="choose-word-content-cover"></div>
                </div>
                <button type="submit" class="choose-word-button">Bắt đầu học</button>
            </form>
        </div>
    </div>
</div>


<!--******** AUDIO MAIN ******** -->
<audio id="learning-main-audio">
    <source class="src" src="" type="audio/mpeg">
</audio>

<script type="text/javascript" src="~/Content/assets/js/voca/learning-main.js"></script>
<script type="text/javascript" src="~/Content/assets/js/voca/box-slider.jquery.js"></script>
<script type="text/javascript" src="~/Content/assets/js/voca/box-slider-fx-scroll-3d.js"></script>
<script type="text/javascript" src="~/Content/assets/js/voca/kontext.js"></script>
<script type="text/javascript" src="~/Content/assets/js/voca/learning-flashcard.js"></script>



<!--END CONTENT-->