|
|
@@ -1,130 +1,211 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-cn">
|
|
|
<head>
|
|
|
- <title>试卷</title>
|
|
|
+ <title>试卷答案</title>
|
|
|
<meta charset="UTF-8"/>
|
|
|
<meta name="renderer" content="webkit"/>
|
|
|
<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;
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ /* 宋体 */
|
|
|
+ font-family: "SimSun";
|
|
|
+ /* 微软雅黑 */
|
|
|
+ /*font-family: "Microsoft YaHei";*/
|
|
|
+ font-size: 22px;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .e_description {
|
|
|
+ padding: 60px 0;
|
|
|
}
|
|
|
|
|
|
- .left_small {
|
|
|
+ .e_description span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 48%;
|
|
|
+ line-height: 60px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ .e_description em {
|
|
|
+ font-style: normal;
|
|
|
margin-left: 10px;
|
|
|
+ text-align: center;
|
|
|
+ text-decoration: underline;
|
|
|
}
|
|
|
|
|
|
- .left_sm {
|
|
|
- margin-left: 30px;
|
|
|
+ .e_page_no {
|
|
|
+ z-index: 1;
|
|
|
+ display: block;
|
|
|
+ width: 50px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: right;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .e_paper_title {
|
|
|
+ height: 480px;
|
|
|
}
|
|
|
|
|
|
- .top_small {
|
|
|
+ .e_paper_title h1 {
|
|
|
+ font-size: 2.2em;
|
|
|
+ font-family: "黑体";
|
|
|
+ font-weight: bolder;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .e_paper_title h3 {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 30px;
|
|
|
+ font-family: "黑体";
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .e_paper_title h3 b, .e_paper_title h3 em {
|
|
|
+ font-style: normal;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+
|
|
|
+ .e_paper_title h3 em {
|
|
|
+ font-family: "Times New Roman", Times, serif;
|
|
|
+ font-weight: bolder;
|
|
|
+ }
|
|
|
+
|
|
|
+ .e_tip {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
|
|
|
- .firstPage {
|
|
|
- /*设置高度和宽度*/
|
|
|
- margin-left: 50px;
|
|
|
- width: 2250px;
|
|
|
+ /* 第一版面 */
|
|
|
+ .e_first_page {
|
|
|
+ width: 2300px;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
- .firstColumn {
|
|
|
+ .e_first_part {
|
|
|
position: absolute;
|
|
|
- width: 1450px;
|
|
|
- height: 120px;
|
|
|
+ width: 1407px;
|
|
|
+ height: 80px;
|
|
|
position: absolute;
|
|
|
- top: 760px;
|
|
|
- left: -640px;
|
|
|
+ top: 773px;
|
|
|
+ left: -625px;
|
|
|
/* 逆时针旋转90度 */
|
|
|
transform: rotateZ(270deg);
|
|
|
+ /* 往左平移 */
|
|
|
-webkit-transform: rotateZ(270deg);
|
|
|
- /*往左平移*/
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 侧边栏 */
|
|
|
+ .e_sidebar_font {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .e_sidebar_font span {
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 密封线 */
|
|
|
+ .e_sidebar_thread {
|
|
|
+ margin-top: 30px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
#allContent {
|
|
|
- width: 2000px;
|
|
|
float: left;
|
|
|
- margin-left: 130px;
|
|
|
+ width: 2170px;
|
|
|
+ padding: 0 65px;
|
|
|
}
|
|
|
|
|
|
- .content-page {
|
|
|
- overflow: hidden;
|
|
|
- height: 1560px;
|
|
|
- float: left;
|
|
|
- margin: 22px 15px;
|
|
|
+ #tempContent {
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
|
|
|
- width: 960px;
|
|
|
- position: relative;
|
|
|
- border-top: 0px dashed black;
|
|
|
- border-bottom: 0px dashed black;
|
|
|
- box-sizing: border-box;
|
|
|
+ .e_detail {
|
|
|
+ /* nothing */
|
|
|
}
|
|
|
|
|
|
- .secondColumn {
|
|
|
- float: left;
|
|
|
- width: 100%;
|
|
|
- padding-top: 10px;
|
|
|
+ .e_question {
|
|
|
+ /* nothing */
|
|
|
}
|
|
|
|
|
|
- /* 侧边栏 */
|
|
|
- .sidebar-font {
|
|
|
- text-align: center;
|
|
|
+ .e_option {
|
|
|
+ /* nothing */
|
|
|
}
|
|
|
|
|
|
- /* 密封线*/
|
|
|
- .sidebar-thread {
|
|
|
- margin-top: 10px;
|
|
|
- border-bottom: 1px dashed #333;
|
|
|
- height: 20px;
|
|
|
- line-height: 25px;
|
|
|
- text-align: center;
|
|
|
+ .e_item {
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 20px;
|
|
|
+ padding-right: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ -webkit-box-zizig: border-box;
|
|
|
+ word-break: break-all;
|
|
|
}
|
|
|
|
|
|
- .sidebar-thread span {
|
|
|
- margin: 0 150px;
|
|
|
+ .e_w25 {
|
|
|
+ width: 25%;
|
|
|
}
|
|
|
|
|
|
- .paper_title {
|
|
|
- height: 184px;
|
|
|
+ .e_w50 {
|
|
|
+ width: 50%;
|
|
|
}
|
|
|
|
|
|
- #optionContent {
|
|
|
- visibility: hidden;
|
|
|
- width: 990px;
|
|
|
+ .e_w100 {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .e_num {
|
|
|
+ font-style: normal;
|
|
|
+ color: red;
|
|
|
}
|
|
|
|
|
|
- .item-option-4 {
|
|
|
+ .e_box {
|
|
|
+ float: left;
|
|
|
width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
- .item-option-2 {
|
|
|
- width: 50%;
|
|
|
+ .e_box p {
|
|
|
+ margin: 0 !important;
|
|
|
}
|
|
|
|
|
|
- .item-option-1 {
|
|
|
- width: 25%;
|
|
|
+ .e_box p.e_option_end {
|
|
|
+ margin-bottom: 30px !important;
|
|
|
}
|
|
|
|
|
|
- .item-option {
|
|
|
- display: inline-block;
|
|
|
- line-height: 20px;
|
|
|
- padding-right: 15px;
|
|
|
+ .e_content {
|
|
|
+ /*background: #efefef;*/
|
|
|
+ float: left;
|
|
|
+ width: 985px;
|
|
|
+ height: 1407px;
|
|
|
+ margin: 110px 50px;
|
|
|
+ padding-bottom: 40px;
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+ border-top: 0px dashed black;
|
|
|
+ border-bottom: 0px dashed black;
|
|
|
box-sizing: border-box;
|
|
|
- -webkit-box-zizig: border-box;
|
|
|
}
|
|
|
|
|
|
- .pOpt {
|
|
|
- margin: 5px auto;
|
|
|
+ .e_content:nth-child(1) {
|
|
|
+ width: 915px;
|
|
|
+ margin-left: 120px;
|
|
|
}
|
|
|
|
|
|
@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,156 +215,161 @@
|
|
|
}
|
|
|
</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 style="margin-left: 0">学习中心_______________________</span>
|
|
|
+ <span>姓名_______________________</span>
|
|
|
+ <span>学校_______________________</span>
|
|
|
+ <span>专业名称_______________________</span>
|
|
|
</div>
|
|
|
- <div class="sidebar-thread">
|
|
|
- <span>密</span>
|
|
|
- <span>封</span>
|
|
|
- <span>线</span>
|
|
|
+ <div class="e_sidebar_thread">
|
|
|
+ <i style="font-style: normal;font-size: 20px">..............................</i> 密
|
|
|
+ <i style="font-style: normal;font-size: 20px">..............................</i> 封
|
|
|
+ <i style="font-style: normal;font-size: 20px">..............................</i> 线
|
|
|
+ <i style="font-style: normal;font-size: 20px">..............................</i>
|
|
|
</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">${courseName!}</span>
|
|
|
-
|
|
|
- <span style="margin-left: 10px;">课程代码：</span>
|
|
|
- <span style="color: #FF0000">${courseNo!}</span>
|
|
|
-
|
|
|
- <span style="margin-left: 10px;">考试时间：</span>
|
|
|
- <span style="color: #FF0000">90分钟</span>
|
|
|
-
|
|
|
- <span style="margin-left: 10px;">课程层次：</span>
|
|
|
- <span style="color: #FF0000">${courseLevel!}</span>
|
|
|
- </b>
|
|
|
- </div>
|
|
|
- <div class="top_small">
|
|
|
- <span><b>注意事项：必须按试题顺序在“答题卡”上按要求填涂、作答，答在试卷上的答案无效。</b></span>
|
|
|
+ <div class="e_content">
|
|
|
+ <div id="e_box_0" class="e_box">
|
|
|
+ <div class="e_paper_title">
|
|
|
+ <h1>山东大学继续（网络）教育</h1>
|
|
|
+ <h3><b><em>2019年06月</em></b>期末考试</h3>
|
|
|
+ <div class="e_description">
|
|
|
+ <span>课程名称：<em style="color: #FF0000">${courseName!}</em></span>
|
|
|
+ <span>课程代码：<em style="color: #FF0000">${courseNo!}</em></span>
|
|
|
+ <span>考试时间：<em>90分钟</em></span>
|
|
|
+ <span>课程层次：<em style="color: #FF0000">${courseLevel!}</em></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 = 985;
|
|
|
+ var a3Height = 1407;
|
|
|
+ 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 = createElement(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 createElement(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 e_option_end";
|
|
|
}
|
|
|
- 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 createPager(pageNo) {
|
|
|
+ var span = document.createElement('span');
|
|
|
+ span.setAttribute("class", "e_page_no");
|
|
|
+ span.innerText = '-' + pageNo + '-';
|
|
|
+ return span;
|
|
|
}
|
|
|
|
|
|
- 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');
|
|
|
+
|
|
|
+ if (boxIndex % 2 == 0) {
|
|
|
+ var curPager = createPager((boxIndex / 2) + 1);
|
|
|
+ curContent.appendChild(curPager);
|
|
|
+ }
|
|
|
+
|
|
|
+ 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 paperDetails = eval(${htmlList!});
|
|
|
+ var list = eval(${htmlList!});
|
|
|
|
|
|
- typesetting(paperDetails);
|
|
|
+ renderQuestions(list);
|
|
|
};
|
|
|
</script>
|
|
|
</html>
|
deason