update example.html

examcloud-core-questions-starter/src/main/resources/templates/example.html

@@ -7,30 +7,66 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
     <style type="text/css">
-        .center {
-            text-align: center;
+        * {
+            font-family: "宋体";
+            font-size: 22px;
+        }
+
+        .e_description {
+            padding: 50px 0;
+        }
+
+        .e_description span {
+            display: inline-block;
+            width: 48%;
+            line-height: 40px;
+            font-weight: 700;
         }
 
-        .left_small {
+        .e_description em {
+            font-style: normal;
             margin-left: 10px;
+            text-align: center;
+            text-decoration: underline;
+        }
+
+        .e_page_no {
+            position: absolute;
+            right: 30px;
+            bottom: 0;
+            font-weight: 700;
+            color: #666;
+        }
+
+        .e_paper_title {
+            /* height: 184px; */
+            height: 380px;
         }
 
-        .left_sm {
-            margin-left: 30px;
+        .e_paper_title h1 {
+            font-size: 2.1em;
+            font-family: "黑体";
+            text-align: center;
+        }
+
+        .e_paper_title h3 {
+            font-size: 28px;
+            font-family: "黑体";
+            text-align: center;
         }
 
-        .top_small {
+        .e_tip {
             margin-top: 10px;
         }
 
-        .firstPage {
-            /*设置高度和宽度*/
-            margin-left: 50px;
+        /* 第一版面 */
+        .e_first_page {
             width: 2250px;
+            margin-left: 50px;
             position: relative;
         }
 
-        .firstColumn {
+        .e_first_part {
             position: absolute;
             width: 1450px;
             height: 120px;
@@ -40,74 +76,52 @@
             /* 逆时针旋转90度 */
             transform: rotateZ(270deg);
             -webkit-transform: rotateZ(270deg);
-            /*往左平移*/
-        }
-
-        #allContent {
-            width: 2000px;
-            float: left;
-            margin-left: 130px;
-        }
-
-        .content-page {
-            overflow: hidden;
-            height: 1560px;
-            float: left;
-            margin: 22px 15px;
-
-            width: 960px;
-            position: relative;
-            border-top: 0px dashed black;
-            border-bottom: 0px dashed black;
-            box-sizing: border-box;
-        }
-
-        .secondColumn {
-            float: left;
-            width: 100%;
-            padding-top: 10px;
+            /* 往左平移 */
         }
 
         /* 侧边栏 */
-        .sidebar-font {
+        .e_sidebar_font {
             text-align: center;
         }
 
-        /* 密封线*/
-        .sidebar-thread {
+        /* 密封线 */
+        .e_sidebar_thread {
             margin-top: 10px;
-            border-bottom: 1px dashed #333;
+            border-bottom: 1px dotted #333;
             height: 20px;
             line-height: 25px;
             text-align: center;
         }
 
-        .sidebar-thread span {
+        .e_sidebar_thread span {
             margin: 0 150px;
+            background: #FFF;
         }
 
-        .paper_title {
-            height: 184px;
+        #allContent {
+            width: 2000px;
+            float: left;
+            margin-left: 130px;
         }
 
-        #optionContent {
+        #tempContent {
             visibility: hidden;
             width: 990px;
         }
 
-        .item-option-4 {
-            width: 100%;
+        .e_detail {
+            /* nothing */
         }
 
-        .item-option-2 {
-            width: 50%;
+        .e_question {
+            /* nothing */
         }
 
-        .item-option-1 {
-            width: 25%;
+        .e_option {
+            margin: 5px auto;
         }
 
-        .item-option {
+        .e_item {
             display: inline-block;
             line-height: 20px;
             padding-right: 15px;
@@ -115,16 +129,48 @@
             -webkit-box-zizig: border-box;
         }
 
-        .pOpt {
-            margin: 5px auto;
+        .e_w25 {
+            width: 25%;
+        }
+
+        .e_w50 {
+            width: 50%;
+        }
+
+        .e_w100 {
+            width: 100%;
+        }
+
+        .e_num {
+            font-style: normal;
+            color: red;
+        }
+
+        .e_box {
+            float: left;
+            width: 100%;
+            padding-top: 10px;
+        }
+
+        .e_content {
+            width: 960px;
+            height: 1560px;
+            float: left;
+            margin: 22px 15px;
+            padding: 0 15px;
+            overflow: hidden;
+            position: relative;
+            border-top: 0px dashed black;
+            border-bottom: 0px dashed black;
+            box-sizing: border-box;
         }
 
         @media print {
-            .content-page:nth-child(even) {
+            .e_content:nth-child(even) {
                 page-break-before: always;
             }
 
-            .content-page:first-child {
+            .e_content:first-child {
                 page-break-before: auto;
             }
 
@@ -134,184 +180,165 @@
         }
     </style>
 </head>
+
 <body>
-<div class="firstPage" id="firstPage">
-    <!-- 密封线 -->
-    <div class="firstColumn">
-        <div class="sidebar-font">
-            <span>姓名___________________________</span>
-            <span>学号___________________________</span>
-            <span>专业___________________________</span>
-            <span>学习中心___________________________</span>
-            <span>考试名称___________________________</span>
+<div class="e_first_page">
+    <div class="e_first_part">
+        <div class="e_sidebar_font">
+            <span>学习中心______________________</span>
+            <span>姓名______________________</span>
+            <span>学校______________________</span>
+            <span>专业名称______________________</span>
         </div>
-        <div class="sidebar-thread">
+        <div class="e_sidebar_thread">
             <span>密</span>
             <span>封</span>
             <span>线</span>
         </div>
     </div>
 
-    <!--选项临时存放点-->
-    <div id="optionContent"></div>
     <div id="allContent">
-        <div class="content-page" id="content-page">
-            <div class="secondColumn" id="secondColumn0">
-                <div class="paper_title">
-                    <div style="text-align: center">
-                        <h1><span style="margin-right:20%;">山东大学继续（网络）教育</span></h1>
-                        <h3><span style="margin-right:20%;">2018年12月期末考试</span></h3>
-                    </div>
-                    <div>
-                        <b>
-                            <span>课程名称：</span>
-                            <span style="color: #FF0000">高等数学</span>
-
-                            <span style="margin-left: 10px;">课程代码：</span>
-                            <span style="color: #FF0000">FY0001</span>
-
-                            <span style="margin-left: 10px;">考试时间：</span>
-                            <span style="color: #FF0000">90分钟</span>
-
-                            <span style="margin-left: 10px;">课程层次：</span>
-                            <span style="color: #FF0000">专升本</span>
-                        </b>
+        <div class="e_content">
+            <div id="e_box_0" class="e_box">
+                <div class="e_paper_title">
+                    <h1>山东大学继续（网络）教育</h1>
+                    <h3>2019年06月期末考试</h3>
+                    <div class="e_description">
+                        <span>课程名称：<em style="color: #FF0000">模拟电路基础</em></span>
+                        <span>课程代码：<em style="color: #FF0000">100920921</em></span>
+                        <span>考试时间：<em>90分钟</em></span>
+                        <span>课程层次：<em style="color: #FF0000">高起专</em></span>
                     </div>
-                    <div class="top_small">
-                        <span><b>注意事项：必须按试题顺序在“答题卡”上按要求填涂、作答，答在试卷上的答案无效。</b></span>
-                    </div>
-                </div>
-                <div class="top_small">
+                    <div class="e_tip"><span><b>注意事项：必须按试题顺序在“答题卡”上按要求填涂、作答，答在试卷上的答案无效。</b></span></div>
                 </div>
             </div>
+
+            <span class="e_page_no">-1-</span>
         </div>
     </div>
 </div>
+
+<!-- 临时内容DIV -->
+<div id="tempContent"></div>
 </body>
-<script>
-    /* A3宽 */
-    var a3width = 990 - 60;
-    /* A3高 */
-    var a3height = 1560;
-    var secondColumnIndex = 0;
-    var optionArray = [];
-    var secondColumn = document.getElementById("secondColumn0");
-    var optionContent = document.getElementById("optionContent");
-
-    function typesetting(dataList) {
-        /* 遍历数据 */
-        for (var i = 0; i < dataList.length; i++) {
-            var div = createDom(dataList[i], i);
-            if (div.className.indexOf("item-option") > -1) {
-                optionArray.push(div);
-                optionContent.appendChild(div);
-            } else if ((div.className.indexOf("item-pDetail") > -1 || div.className.indexOf("item-pQues") > -1)
-                && optionArray.length > 0) {
-                handleQuesOption();
-                appendPageBox(div);
+<script type="text/javascript">
+    var a3Width = 930;
+    var a3Height = 1560;
+    var tempContent = document.getElementById("tempContent");
+    var tempOptions = [];
+    var theBox = document.getElementById("e_box_0");
+    var boxIndex = 0;
+
+    function renderQuestions(list) {
+        for (var i = 0; i < list.length; i++) {
+            var div = createDom(list[i], i);
+            if (div.className.indexOf("e_item") > -1) {
+                /* 选项 */
+                tempOptions.push(div);
+                tempContent.appendChild(div);
+            } else if ((div.className.indexOf("e_detail") > -1 || div.className.indexOf("e_question") > -1) && tempOptions.length > 0) {
+                /* 大题或小题 */
+                handleQuestionOption();
+                appendBox(div);
             } else {
-                appendPageBox(div);
+                appendBox(div);
             }
         }
-        /* 如果最后一次是选择题 */
-        if (optionArray.length > 0) {
-            handleQuesOption();
+
+        /* 处理最后一题选项 */
+        if (tempOptions.length > 0) {
+            handleQuestionOption();
         }
-        console.log('finished');
-    }
 
-    function handleQuesOption() {
-        var cls = getLineType(optionArray);
-        optionContent.innerHTML = '';
-        optionArray.forEach(function (item) {
-            item.setAttribute('class', 'item-option ' + cls);
-            appendPageBox(item);
-        });
-        optionArray = [];
+        console.log('finished');
     }
 
-    function createDom(data, index) {
-        var divLog = document.createElement('div');
-        var cls = "";
-        if (data.indexOf("pQues") > -1) {
-            cls = "item-pQues";
+    function createDom(val, index) {
+        var divElement = document.createElement('div');
+        var className = "";
+        if (val.indexOf("e_detail") > -1) {
+            className = "e_detail";
         }
-        if (data.indexOf("pDetail") > -1) {
-            cls = "item-pDetail";
+        if (val.indexOf("e_question") > -1) {
+            className = "e_question";
         }
-        if (data.indexOf("pOpt") > -1) {
-            cls = "item-option";
+        if (val.indexOf("e_option") > -1) {
+            className = "e_item";
         }
-        divLog.setAttribute('class', cls);
-        divLog.setAttribute('data-index', index);
-        divLog.innerHTML = data;
-        return divLog;
+        divElement.setAttribute('class', className);
+        divElement.setAttribute('e_index', index);
+        divElement.innerHTML = val;
+        return divElement;
     }
 
-    function appendPageBox(dom) {
-        secondColumn.appendChild(dom);
-        var pch = secondColumn.clientHeight;
-        if (pch > a3height) {
-            secondColumn.removeChild(dom);
-            secondColumnIndex++;
+    function appendBox(elements) {
+        theBox.appendChild(elements);
+        var curHeight = theBox.clientHeight;
+        if (curHeight > a3Height) {
+            theBox.removeChild(elements);
+            boxIndex++;
+
             var allContent = document.getElementById("allContent");
-            var contentPageDom = document.createElement('div');
-            contentPageDom.setAttribute('class', 'content-page');
-            var pageBoxDom = document.createElement('div');
-            pageBoxDom.setAttribute('class', 'secondColumn');
-            pageBoxDom.id = "secondColumn" + (secondColumnIndex);
-            pageBoxDom.appendChild(dom);
-            contentPageDom.appendChild(pageBoxDom);
-            allContent.appendChild(contentPageDom);
-            secondColumn = document.getElementById("secondColumn" + secondColumnIndex);
+            var curContent = document.createElement('div');
+            curContent.setAttribute('class', 'e_content');
+
+            var curBox = document.createElement('div');
+            var curBoxIndex = "e_box_" + boxIndex;
+            curBox.id = curBoxIndex;
+            curBox.setAttribute('class', 'e_box');
+            curBox.appendChild(elements);
+
+            curContent.appendChild(curBox);
+            allContent.appendChild(curContent);
+            theBox = document.getElementById(curBoxIndex);
         }
     }
 
-    function getLineType(optionWs) {
-        var type = 'item-option-1';
-        for (var i = 0; i < optionWs.length; i++) {
-            var rate = optionWs[i].clientWidth / a3width;
+    function handleQuestionOption() {
+        var className = calculateLine(tempOptions);
+        tempContent.innerHTML = '';
+        tempOptions.forEach(function (item) {
+            item.setAttribute('class', 'e_item ' + className);
+            appendBox(item);
+        });
+        tempOptions = [];
+    }
+
+    function calculateLine(options) {
+        var className = 'e_w25';
+        for (var i = 0; i < options.length; i++) {
+            var rate = options[i].clientWidth / a3Width;
             if (rate > 0.5) {
-                type = 'item-option-4';
-                return type
+                className = 'e_w100';
+                return className
+            }
+            if (rate > 0.25) {
+                className = 'e_w50';
             }
-            if (rate > 0.25) type = 'item-option-2'
         }
-        return type
+        return className;
     }
 
     window.onload = function () {
         /* 后台数据示例 */
-        var dataList = [
-            "<p class='pDetail'><b>一、单选题（本大题共10小题，共20分）</b></p>",
-            "<p><b>在每小题列出的备选项中只有一个符合题目要求的，请将其选出并将“答题卡”的相应代码涂黑，错涂、多涂或未涂均无分。</b></p>",
-            "<p class='pQues'>1.题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干？(2分)</p>",
-            "<p class='pOpt'>A.地球</p>",
-            "<p class='pOpt'>B.火星</p>",
-            "<p class='pOpt'>C.水星</p>",
-            "<p class='pOpt'>D.木星</p>",
-            "<p class='pOpt'>E.金星</p>",
-            "<p class='pQues'>2.题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干？(2分)</p>",
-            "<p class='pOpt'>A.地球地球地球地球地球地球</p>",
-            "<p class='pOpt'>B.火星火星火星火星火星火星</p>",
-            "<p class='pOpt'>C.水星水星水星水星水星水星</p>",
-            "<p class='pOpt'>D.木星木星木星木星木星木星</p>"
-        ];
-        for (var m = 0; m < 2; m++) {
-            dataList.push("<p class='pDetail'><b>二、单选题（本大题共10小题，共20分）</b></p>");
-            dataList.push("<p><b>在每小题列出的备选项中只有一个符合题目要求的，请将其选出并将“答题卡”的相应代码涂黑，错涂、多涂或未涂均无分。</b></p>");
-            var content = "";
-            for (var n = 1; n <= 30; n++) {
-                content += "测试" + n;
-                dataList.push("<p class='pQues'>1.题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干？(2分)</p>");
-                dataList.push("<p class='pOpt'>A.测试</p>");
-                dataList.push("<p class='pOpt'>B.测试测试</p>");
-                dataList.push("<p class='pOpt'>C.测试测试测试</p>");
-                dataList.push("<p class='pOpt'>D." + content + "</p>");
+        var list = [];
+
+        for (var m = 1; m <= 1; m++) {
+            list.push('<p class="e_detail"><b>一、单选题（本大题共<i class="e_num">50</i>小题，共<i class="e_num">100</i>分）</b></p>');
+            list.push('<p><b>在每小题列出的备选项中只有一个符合题目要求的，请将其选出并将“答题卡”的相应代码涂黑，错涂、多涂或未涂均无分。</b></p>');
+
+            var content = '';
+            for (var n = 1; n <= 50; n++) {
+                content += '选项';
+                list.push('<p class="e_question">' + n + '、题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干题干？(2分)</p>');
+                list.push('<p class="e_option">A.选项</p>');
+                list.push('<p class="e_option">B.选项选项</p>');
+                list.push('<p class="e_option">C.选项选项选项</p>');
+                list.push('<p class="e_option">D.' + content + '</p>');
             }
         }
 
-        typesetting(dataList);
+        renderQuestions(list);
     };
 </script>
 </html>