|
|
@@ -0,0 +1,317 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-cn">
|
|
|
+<head>
|
|
|
+ <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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left_small {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left_sm {
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top_small {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .firstPage {
|
|
|
+ /*设置高度和宽度*/
|
|
|
+ margin-left: 50px;
|
|
|
+ width: 2250px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .firstColumn {
|
|
|
+ position: absolute;
|
|
|
+ width: 1450px;
|
|
|
+ height: 120px;
|
|
|
+ position: absolute;
|
|
|
+ top: 760px;
|
|
|
+ left: -640px;
|
|
|
+ /* 逆时针旋转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 {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 密封线*/
|
|
|
+ .sidebar-thread {
|
|
|
+ margin-top: 10px;
|
|
|
+ border-bottom: 1px dashed #333;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sidebar-thread span {
|
|
|
+ margin: 0 150px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .paper_title {
|
|
|
+ height: 184px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #optionContent {
|
|
|
+ visibility: hidden;
|
|
|
+ width: 990px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-option-4 {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-option-2 {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-option-1 {
|
|
|
+ width: 25%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-option {
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 20px;
|
|
|
+ padding-right: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ -webkit-box-zizig: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pOpt {
|
|
|
+ margin: 5px auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media print {
|
|
|
+ .content-page:nth-child(even) {
|
|
|
+ page-break-before: always;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-page:first-child {
|
|
|
+ page-break-before: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ @page {
|
|
|
+ size: A3 landscape;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </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>
|
|
|
+ <div class="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>
|
|
|
+ <div class="top_small">
|
|
|
+ <span><b>注意事项：必须按试题顺序在“答题卡”上按要求填涂、作答，答在试卷上的答案无效。</b></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top_small">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</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);
|
|
|
+ } else {
|
|
|
+ appendPageBox(div);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /* 如果最后一次是选择题 */
|
|
|
+ if (optionArray.length > 0) {
|
|
|
+ handleQuesOption();
|
|
|
+ }
|
|
|
+ console.log('finished');
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleQuesOption() {
|
|
|
+ var cls = getLineType(optionArray);
|
|
|
+ optionContent.innerHTML = '';
|
|
|
+ optionArray.forEach(function (item) {
|
|
|
+ item.setAttribute('class', 'item-option ' + cls);
|
|
|
+ appendPageBox(item);
|
|
|
+ });
|
|
|
+ optionArray = [];
|
|
|
+ }
|
|
|
+
|
|
|
+ function createDom(data, index) {
|
|
|
+ var divLog = document.createElement('div');
|
|
|
+ var cls = "";
|
|
|
+ if (data.indexOf("pQues") > -1) {
|
|
|
+ cls = "item-pQues";
|
|
|
+ }
|
|
|
+ if (data.indexOf("pDetail") > -1) {
|
|
|
+ cls = "item-pDetail";
|
|
|
+ }
|
|
|
+ if (data.indexOf("pOpt") > -1) {
|
|
|
+ cls = "item-option";
|
|
|
+ }
|
|
|
+ divLog.setAttribute('class', cls);
|
|
|
+ divLog.setAttribute('data-index', index);
|
|
|
+ divLog.innerHTML = data;
|
|
|
+ return divLog;
|
|
|
+ }
|
|
|
+
|
|
|
+ function appendPageBox(dom) {
|
|
|
+ secondColumn.appendChild(dom);
|
|
|
+ var pch = secondColumn.clientHeight;
|
|
|
+ if (pch > a3height) {
|
|
|
+ secondColumn.removeChild(dom);
|
|
|
+ secondColumnIndex++;
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function getLineType(optionWs) {
|
|
|
+ var type = 'item-option-1';
|
|
|
+ for (var i = 0; i < optionWs.length; i++) {
|
|
|
+ var rate = optionWs[i].clientWidth / a3width;
|
|
|
+ if (rate > 0.5) {
|
|
|
+ type = 'item-option-4';
|
|
|
+ return type
|
|
|
+ }
|
|
|
+ if (rate > 0.25) type = 'item-option-2'
|
|
|
+ }
|
|
|
+ return type
|
|
|
+ }
|
|
|
+
|
|
|
+ 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>");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ typesetting(dataList);
|
|
|
+ };
|
|
|
+</script>
|
|
|
+</html>
|
deason