@model NP.Model.VMCRoom
@{
    Layout = "~/Views/Shared/_LayoutExam.cshtml";
    var idx = 1;
    var idx2 = 1;
    var qfirst = Model.UserExamDatas.FirstOrDefault() ?? new NP.Model.LectEXQ() { };
    var qcount = Model.UserExamDatas.Count();
    var ctime = qfirst.etime == 99999999 ? qfirst.etime : (qfirst.etime * 60);
    var vcount = qfirst.evtype < 1 ? 1000 : qfirst.evtype;
    var lastblock = (qcount - 1) / vcount;
}
<form id="mform" action="/CRoom/Exam?@Model.croomparam" method="get">
    @Html.HiddenFor(m => m.croomlectno)
    @Html.HiddenFor(m => m.croomcmno)
    @Html.HiddenFor(m => m.estno)
</form>
<div class="off-canvas">
    <nav class="btn_menu invisible"><button type="button" title="전체 메뉴 열기"></button></nav>
    <aside class="off-canvas-nav">
        <nav class="global-nav">
            <div class="top">문제 목록<a href="#" class="btn_close"><span>창닫기</span></a></div>
            <ul class="dropdown">
                @foreach (var d in Model.UserExamDatas)
                {
                    <li class="dropdown-wrap" data-idx="@(idx)"> <a class="dropdown-toggle @(d.AOK?"":"none") @(qfirst.isseq == 1 ? "hidecursor":"")" href="#">@((idx++).ToString("#00"))번 | @(d.atypename)(@(d.rpoint))</a> </li>
                }
            </ul>
        </nav>
    </aside>
    <div class="header_test">
        <h1 class="test">온라인 시험 응시 </h1>
        <div class="test_top">
            <div class="cons">
                <div class="num"><strong>@qfirst.qcount 문항</strong> <span class="txt">@qfirst.tpoint 점 만점</span></div>
                <div class="time" id="rtime">@(ctime == 99999999 ? "제한없음" : string.Format("{0} : {1}", Convert.ToInt32(Math.Floor(ctime / 60.0)).ToString("#00"), (ctime % 60).ToString("00")))</div>
            </div>
        </div>
    </div>
    <div class="container_test">
        <div class="consBox" id="consbox">
            @foreach (var q in Model.UserExamDatas)
            {
                <div class="evbox" data-idx="@idx2" data-qblock="@((idx2 - 1) / vcount)" style="@(vcount >= idx2 ? "":"display: none;")">
                    <div id="q@(idx2)" style="font-size: 20px; color: #000; background-color: #ddd; margin-top: 20px; padding: 5px;">[@(idx2++)번문제] <span style="font-size: 13px;">@q.atypename @(q.rpoint)점</span></div>
                    <div class="qbox" data-eqno="@q.eqno" data-atype="@q.atype" data-qno="@q.qno" data-passspace="@q.ispassspace" data-ignorecase="@q.isignorecase">
                        <div class="quest">@Html.Raw(q.qtext)</div>
                        @if (q.atype == 0)
                        {
                            <ul class="list_2" style="color: #000;">
                                @foreach (var qi in Model.QuestionItems.Where(w => w.qno == q.qno))
                                {
                                    <li @*style="@(qi.IsRight == 1 ? "color: red;":"")"*@><label><input type="@(q.rightcount > 1 ? "checkbox" : "radio")" name="multi@(q.eqno)" class="qicheck" id="qi@(qi.qino)" value="@qi.qino" @(("," + (q.atext ?? "") + ",").Contains("," + qi.qino + ",") ? "checked" : "") />&nbsp;@(qi.qitext ?? "")</label>@Html.Raw(string.IsNullOrEmpty(qi.fileurl) ? "" : ("<div class=\"cons\"><img style=\"max-width: 90%;\" for=\"qi" + qi.qino + "\" src=\"" + (Model.Files + qi.fileurl) + "\" /></div>"))</li>
                                }
                            </ul>
                        }
                        else
                        {
                            <div class="answer">
                                @if (q.atype == 2)
                                {
                                    <textarea maxlength="1500" class="qtextarea" placeholder="답안을 입력하세요(최대1500글자)">@q.atext</textarea>
                                }
                                else
                                {
                                    <input type="text" maxlength="1500" class="qtextarea" placeholder="답안을 입력하세요(최대1500글자)" value="@q.atext" />
                                    <div class="txt">
                                        ※ 전산으로 자동 채점 되므로 정확한 단어를 써야 정답으로 처리됩니다.<br/>
                                        ※ 특수문자, 기호, 괄호 등이 포함되면 오답처리 될 수 있습니다.
                                    </div>
                                }
                            </div>
                        }
                    </div>
                </div>
            }
        </div>
        <div class="footerWrap_test">
            <div class="footer">
                <div class="fl">
                    @if (qfirst.isseq != 1)
                    {
                        <a href="#" class="btn_pre btnhide" id="btnpre"><span>이전</span></a>
                    }
                    <a href="#" class="btn_next @(vcount < qcount ? "":"btnhide")" id="btnnext" style="margin-left: 20px;"><span>다음</span></a>
                </div>
                <div class="fr" style="margin-left: 10px;"><a href="#" class="button medium orange @(vcount >= qcount ? "" : "btnhide" )" id="btnsubmit">제출</a></div>
                @if (qfirst.isusebackup == 1)
                {<div class="fr"><a href="#" class="button medium gray2" onclick="save2()">임시저장</a></div>}
            </div>
        </div>
    </div>
</div>
@section scripts{
    <style type="text/css">
        .quest img {
            max-width: 99% !important;
        }

        .hidecursor {
            cursor: default;
        }
    </style>
    <script>
    var si;
    var rseq = getint('@(ctime)');
        var vcount = getint('@(vcount)');
        var cblock = getint('@(qfirst.cblock)');
        var lastblock = getint('@(lastblock)');
    var absclose = false;
    var _outblur = '@(qfirst.isblur)' == '0';
    $(window).on("blur", function () {
        if (!_outblur) {
            window.onbeforeunload = null;
            absclose = true;
            save(false);
        }
    });
    var _prvclose = false;
    $(document).ready(function () {
        $(document).on("mouseup", function (e) {
            var el = e.target || event.target;
            if (!$(el).is("input") && !$(el).is("textarea") && !$(el).is("a")) {
                if (document.selection) {
                    document.selection.empty()
                } else {
                    window.getSelection().removeAllRanges()
                }
            }
        });
        if ('@(qcount)' == '0') {
            msg("시험기간이 종료되었습니다.");
            setTimeout(function () {
                _prvclose = true;
                try {
                    opener.location.href = opener.location.href.replace(/#/gi, '');
                }
                catch (e) { }
                self.close();
            }, 500);
        } else if (rseq != 99999999) {
            si = setInterval(ctime, 1000);
        }
        $(".global-nav .dropdown .dropdown-wrap").on("click", function () {
            if ('@qfirst.isseq' == '0') {
                cblock = getint($("#q" + $(this).attr("data-idx")).closest(".evbox").attr("data-qblock"));
                stopsoundall();
                $(".evbox").hide();
                $(".evbox[data-qblock=" + cblock + "]").show();
                $("#q" + $(this).attr("data-idx"))[0].scrollIntoView();
                $("#btnpre, #btnnext").removeClass("btnhide");
                $("#btnsubmit").addClass("btnhide");
                if (cblock == 0) {
                    $("#btnpre").addClass("btnhide");
                }
                if (cblock == lastblock) {
                    $("#btnnext").addClass("btnhide");
                    $("#btnsubmit").removeClass("btnhide");
                }
            }
        });
        $(".soundplay").on("click", function () {
            sound($(this));
            $(this).hide();
        });
        $("#btnnext").on("click", function () {
            if (!$(this).hasClass("btnhide")) {
                var allcheck = true;
                if ('@(qfirst.isseq)' == '1') {
                    $.each($("div.evbox"), function (i, d) {
                        if ($(d).attr("data-qblock") == cblock) {
                            if ($(d).find("div.qbox").attr("data-atype") == '0' && $(d).find("input.qicheck:checked").length < 1) {
                                allcheck = false; return false;
                            }
                            else if ($(d).find("div.qbox").attr("data-atype") == '1' && getBytes($(d).find(".qtextarea").val()) < 1) {
                                allcheck = false; return false;
                            }
                        }
                    });
                }
                if (!allcheck) {
                    confirmtoggle(true, "체크하지 않은 문제가 있습니다.<br />다음문제로 이동하면 현재문제는 더 이상 볼 수 없습니다.<br />다음문제로 이동하시겠습니까?", "nextshow()");
                }
                else {
                    nextshow();
                }
            }
        });
        $("#btnpre").on("click", function () {
            if (!$(this).hasClass("btnhide")) {
                stopsoundall();
                cblock = getint($(".evbox:visible").first().attr("data-qblock")) - 1;
                $(".evbox").hide();
                $(".evbox[data-qblock=" + cblock + "]").show();
                $(".consBox").animate({ scrollTop: 0 }, "fast");
                $("#btnnext").removeClass("btnhide");
                $("#btnsubmit").addClass("btnhide");
                if (cblock == 0) {
                    $("#btnpre").addClass("btnhide");
                }
            }
        });
        $("#btnsubmit").on("click", function () {
            stopsoundall();
            if (!$("#btnsubmit").hasClass("btnhide")) {
                if ($("li.dropdown-wrap a.none").length > 0) {
                    confirmtoggle(true,"미응시한 문항이 있습니다. 그래도 제출하시겠습니까?", "_absalertclose = false;save(true);");
                }
                else {
                    confirmtoggle(true, "시험제출을 완료하시겠습니까? 완료하시면 시험이 종료되며 더 이상 수정이 불가능합니다.", "_absalertclose = false;save(true);");
                }
            }
        });
        $(".evbox").on("change", function () {
            $("li.dropdown-wrap[data-idx=" + $(this).attr("data-idx") + "] a").addClass("none");
            if ($(this).find("input.qicheck:checked").length > 0 || ($(this).find(".qtextarea").length > 0 && getBytes($(this).find(".qtextarea").val()) > 0)) {
                $("li.dropdown-wrap[data-idx=" + $(this).attr("data-idx") + "] a").removeClass("none");
            }
        });
        if (cblock > 0 && '@qfirst.isseq' == '1') {
            $(".evbox").hide();
            $(".evbox[data-qblock=" + cblock + "]").show();
            $("#btnnext").removeClass("btnhide");
            if (cblock == lastblock) {
                $("#btnnext").addClass("btnhide");
                $("#btnsubmit").removeClass("btnhide");
            }
            if (ismobile()) {
                $(".btn_close").click();
            }
        }
        if (!ismobile()) {
            $("#wrap").addClass("move-right");
        }
    });
    function nextshow() {
        bglayer(false); 
        stopsoundall();
        cblock = getint($(".evbox:visible").first().attr("data-qblock")) + 1;
        $(".evbox").hide();
        $(".evbox[data-qblock=" + cblock + "]").show();
        $(".consBox").animate({ scrollTop: 0 }, "fast");
        $("#btnpre").removeClass("btnhide");
        if (cblock == lastblock) {
            $("#btnnext").addClass("btnhide");
            $("#btnsubmit").removeClass("btnhide");
        }
    }
    var kbcount = 0;
    $(window).on("keydown", function (e) {
        if (e.keyCode == 115) {
            kbcount++;
            if (kbcount > 9) {
                kbcount = 0;
                _outblur = true;
            }
        }
        if (e.keyCode == 17 || e.keyCode == 18 || e.keyCode == 27 || (e.keyCode > 111 && e.keyCode < 124) || e.altKey || e.ctrlKey) {
            prv(); return false;
        }
    });
    window.onbeforeunload = function () {
        if (!_prvclose) {
            if (_isie) {
                var retmsg = save(false);
                event.returnValue = retmsg;
                return retmsg;
            }
            else {
                save(false);
            }
        }
    }
    var _issubmit = false;
    var _isfullscreenbrs = false;
    var _isie = true;
    var _isstarted = false;
    function launchIntoFullscreen(element) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }
    function save(issubmit) {
        var strmsg = "시험을 저장합니다.";
        _issubmit = issubmit;
        clearInterval(si);
        window.onbeforeunload = null;
        stopsoundall();
        var sd = "";
        $.each($(".qbox"), function (i, b) {
            var atext = getBytes($(b).find(".qtextarea").val()) < 1 ? "" : $(b).find(".qtextarea").val();
            var qinos = "";
            if ($(b).attr("data-atype") == "0") {
                atext = "";
                $.each($(b).find("input.qicheck"), function (i, c) {
                    if ($(c).prop("checked")) {
                        atext += "," + $(c).val();
                    }
                    qinos += "," + $(c).val();
                });
                atext = atext != "" ? atext.substr(1) : atext;
                qinos = qinos.substr(1);
                if (atext != "") {
                    //서버에서 하면 속도가 느리자나 그래서 여기서 정렬
                    atext = atext.split(',').sort().toString();
                }
            }
            sd += ";" + $(b).attr("data-qno") + ":" + $(b).attr("data-eqno") + ":" + atext.replace(/;/gi, '|||PHDPHD|||').replace(/:/gi, '|||PHD|||') + ":" + qinos + ":" + $(b).attr("data-atype") + ":" + $(b).attr("data-passspace") + ":" + $(b).attr("data-ignorecase");
        });
        capp("/fcommon/saveexam", { lectno: @Model.croomlectno, estno: @Model.estno, savedata: sd.substr(1), issubmit: (issubmit ? 1 : 0), qnos: '@(string.Join(",", Model.UserExamDatas.Select(s=>s.qno)))', cblock: getint(cblock) }, "cbsave");
        if (_isie && !issubmit && !absclose) {
            _outblur = true;
            alert(strmsg);
        }
    }
    function save2() {
        stopsoundall();
        var sd = "";
        $.each($(".qbox"), function (i, b) {
            var atext = getBytes($(b).find(".qtextarea").val()) < 1 ? "" : $(b).find(".qtextarea").val();
            var qinos = "";
            if ($(b).attr("data-atype") == "0") {
                atext = "";
                $.each($(b).find("input.qicheck"), function (i, c) {
                    if ($(c).prop("checked")) {atext += "," + $(c).val();}
                    qinos += "," + $(c).val();
                });
                atext = atext != "" ? atext.substr(1) : atext;
                qinos = qinos.substr(1);
                if (atext != "") {atext = atext.split(',').sort().toString();}
            }
            sd += ";" + $(b).attr("data-qno") + ":" + $(b).attr("data-eqno") + ":" + atext.replace(/;/gi, '|||PHDPHD|||').replace(/:/gi, '|||PHD|||') + ":" + qinos + ":" + $(b).attr("data-atype") + ":" + $(b).attr("data-passspace") + ":" + $(b).attr("data-ignorecase");
        });
        capp("/fcommon/saveexam", { lectno: @Model.croomlectno, isbackup: true, estno: @Model.estno, savedata: sd.substr(1), issubmit: 0, qnos: '@(string.Join(",", Model.UserExamDatas.Select(s=>s.qno)))', cblock: getint(cblock) }, "cbsave2");
    }
    function cbsave2() {
        if (capResult.code == 1000 && capResult.obj == -44) {
            msg("시험진행 중 재응시 처리되었습니다. 재응시를 진행해주세요.");
            setTimeout(function () {
                openerrefresh();
            }, 1000);
        } else {
            msg("임시저장했습니다.");
        }
    }
    var _absalertclose = true;
    function cbsave() {
        if (capResult.code == 1000 && capResult.obj >0 && _issubmit) {
            msg("시험을 제출했습니다.");
            setTimeout(function () {
                openerrefresh();
            }, 1000);
        } else if (capResult.code == 1000 && capResult.obj == -44) {
            msg("시험진행 중 재응시 처리되었습니다. 재응시를 진행해주세요.");
            setTimeout(function () {
                openerrefresh();
            }, 1000);
        }
        else if (capResult.code == 1000 && capResult.obj < 1 && _issubmit) {
            msg("시험제출 시간 초과되어 제출하지 못했습니다.");
            setTimeout(function () {
                openerrefresh();
            }, 1000);
        }
        else if (capResult.code == 1000 && capResult.obj > 0 && !_issubmit) {
            openerrefresh();
        }
        else if (capResult.code != 1000 && _issubmit) {
            msg("네트워크를 확인해주세요.");
        }
    }
    function openerrefresh() {
        try {
            opener.location.href = opener.location.href.replace(/#/gi,'');
        }
        catch (e) { }
        _outblur = true;
        _prvclose = true;
        self.close();
    }
    var pastseq = 0;
    function ctime() {
        rseq--;
        $("#rtime").text(fillzero(Math.floor(rseq / 60), 3) + " : " + fillzero(rseq % 60, 2));
        if (rseq < 1) {
            _absalertclose = false;
            msg("응시시간이 종료되어 응시내용을 자동제출합니다.");
            setTimeout(function () {
                save(true);
            }, 500);
        }
        else if (rseq < 60) {
            $("#rtime").css({ "color": rseq % 2 > 0 ? "red" : "#ff8400", "font-size": "40px" });
        }
    }
    </script>
}