<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Practise.aspx.cs" Inherits="RM.Web.Training.Exam.Practise" %>

<%@ Register Src="~/UserControl/LoadButton.ascx" TagName="LoadButton" TagPrefix="uc2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title><%=RM.Common.DotNetConfig.LanguageHelper.GetKey("Practise_Title")%></title>
    <link href="/Themes/Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Themes/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../Themes/Scripts/artDialog/artDialog.js" type="text/javascript"></script>
    <script src="/Themes/Scripts/FunctionJS.js" type="text/javascript"></script>
    <link href="Themes/Css/ExamGlobal.css" rel="stylesheet" type="text/css" />
    <link href="Themes/Css/ExaminationCss.css" rel="stylesheet" type="text/css" />    
    <script type="text/javascript" src="/Training/Learn/m/ckplayer/ckplayer.js" charset="utf-8"></script>
    <script src="/Live/swfobject.js" type="text/javascript"></script>
    <script src="/Themes/Scripts/jQuery.path2html.js" type="text/javascript"></script>
    <style type="text/css">
        .seeResult { text-align: right; }
        .linkShowSpan { border: 1px solid #767676; border-bottom: none; color: #42cddd; padding: 0 5px; /*position: relative; top: 6px;*/ font-size: 11pt; }
        .resultAndDis { border: 1px solid #767676; border-bottom: none; background-color: White; padding: 5px; display: none; }
        .op_Discription fieldset, .op_Result { border: none; }
        .exam_result { border-bottom: 1px solid #767676; }
        #examItem { float: none; clear: both; }
        .examContext { padding: 20px 0; }
        .ques_Context { display: block; }
    </style>
    <script type="text/javascript">
        $(function () {            
            var $pageBody = $("body"); //body对象
            var $examItem = $("#examItem"); //左侧题目对象

            //————————自适应宽高
            //每次题目改变根据题目的高度自适应高度
            function changePageHeight() {
                if ($examItem.height() > $pageBody.height()) {
                    $examItem.css("overflow", "scroll");
                } else {
                    $examItem.css("overflow", "auto");
                }
                $examItem.height($pageBody.height());
            }
            changePageHeight();
            $(window).resize(changePageHeight); //绑定系统宽高改变事件
            //————————答案显示与隐藏
            $(".linkShowSpan").click(function () {
                showResult($(this), parseInt($(this).attr("state")));
            });
            //该函数传入"展开答案"的链接对象，和操作状态（1:收起答案 2:展开答案）
            function showResult($currObj, state) {
                switch (state) {
                    case 1: //收起
                        $currObj.parent().next().stop().slideUp(200, function () {
                            $currObj.css("background-color", "transparent").text("<%=RM.Common.DotNetConfig.LanguageHelper.GetKey("Practise_zkda")%>");
                            $currObj.attr("state", 0);
                        });
                        break;
                    default: //展开
                        $currObj.parent().next().stop().slideDown(200, function () {
                            $currObj.css("background-color", "White").text("<%=RM.Common.DotNetConfig.LanguageHelper.GetKey("Practise_sqda")%>");
                            $currObj.attr("state", 1);
                        });
                        break;
                }
            };
            //——————————选项效果
            //阻止事件冒泡的通用函数  
            function stopBubble(e) {
                // 如果传入了事件对象，那么就是非ie浏览器  
                if (e && e.stopPropagation) {
                    //因此它支持W3C的stopPropagation()方法  
                    e.stopPropagation();
                } else {
                    //否则我们使用ie的方法来取消事件冒泡  
                    window.event.cancelBubble = true;
                }
            }
            $(".exam_result>li:not(.seeResult,.resultAndDis)").hover(function () {//选项的悬浮
                var item = $(this);
                if (item.has("textarea").length > 0) return;
                item.addClass("hoverLi");
            }, function () {
                var item = $(this);
                if (item.has("textarea").length > 0) return;
                item.removeClass("hoverLi");
            });
            $(".exam_result>li>input:radio,.exam_result>li>input:checkbox").change(function () {//radio选项的选中样式改变
                var item = $(this);
                item.parent().parent().children("li").removeClass("checkedInput");
                item.parent().addClass("checkedInput");
                showResult(item.closest('.exam_result').find('.linkShowSpan'), 0);
            });
            $("label").click(function (e) {//阻止事件冒泡，如果不阻止则单击li触发label的click()，然后label又触发li的click，冒泡无限循环了
                stopBubble(e);
            });
            $(".exam_result>li").click(function (e) {//li单击事件
                $(this).children("label").click();
            });
        });
    </script>
</head>
<body style="background-color: #f4f4f4;">
    <form id="form1" runat="server">
    <div class="Interacts" id="Interacts">
        <div class="btnbartitle">
            <div>
                <%=RM.Common.DotNetConfig.LanguageHelper.GetKey("Practise_Title")%>
            </div>
        </div>
        <div class="interMain" id="interMain">
            <div id="examItem">
                <div id="ei_Container">
                    <div class="examContext">
                        <%= examHtml.ToString() %>
                    </div>
                </div>
                <div class="promptContext">
                </div>
            </div>
        </div>
    </div>
    </form>
    
        <script type="text/javascript">
            var i = 0;
            $("annex").each(function () {
                $(this).attr("id", "aa" + i);
                var fileUrl = $(this).text();
                window.path2html("aa" + i, fileUrl);
                i++;
            });   
    </script>
</body>
</html>
