|
|
@@ -0,0 +1,260 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <title>template</title>
|
|
|
+ <style>
|
|
|
+ .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 {
|
|
|
+ /*设置高度和宽度*/
|
|
|
+ width: 1630px;
|
|
|
+ height: 120px;
|
|
|
+ /*绝对定位到中间*/
|
|
|
+ overflow: auto;
|
|
|
+ margin: auto;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ /* 逆时针旋转90度 */
|
|
|
+ transform: rotateZ(270deg);
|
|
|
+ /*往左平移*/
|
|
|
+ margin-right: 60.5%;
|
|
|
+ margin-top: 34%;
|
|
|
+ }
|
|
|
+ #allContent {
|
|
|
+ width: 2000px;
|
|
|
+ float: left;
|
|
|
+ margin-left: 145px;
|
|
|
+ }
|
|
|
+ .content-page {
|
|
|
+ overflow: hidden;
|
|
|
+ height: 1660px;
|
|
|
+ float: left;
|
|
|
+ width: 990px;
|
|
|
+ position: relative;
|
|
|
+ border-bottom: 1px dashed black;
|
|
|
+ }
|
|
|
+ .secondColumn {
|
|
|
+ float: left;
|
|
|
+ width: 990px;
|
|
|
+ padding-top: 10px;
|
|
|
+ margin-top: 5px;
|
|
|
+ margin-left: 6px;
|
|
|
+ margin-right: 50px;
|
|
|
+ }
|
|
|
+ /* 侧边栏 */
|
|
|
+ .sidebar-font {
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-left: 70px;
|
|
|
+ }
|
|
|
+ /* 密封线*/
|
|
|
+ .sidebar-thread {
|
|
|
+ margin-top: 10px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ </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
|
|
|
+ >
|
|
|
+ </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>
|
|
|
+ <h1>
|
|
|
+ <span style="margin-left:20%;">天津大学网络教育学院111</span>
|
|
|
+ </h1>
|
|
|
+ <h3><span style="margin-left:35%;">考试试卷</span></h3>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>课程名称：</span
|
|
|
+ ><span style="color: #FF0000" id="courseName"></span>
|
|
|
+ <span style="margin-left: 20px;">课程代码：</span
|
|
|
+ ><span style="color: #FF0000" id="courseNo"></span><br />
|
|
|
+ </div>
|
|
|
+ <div class="top_small">
|
|
|
+ <span
|
|
|
+ >注意事项：必须按试题顺序在“答题卡”上按要求填涂、作答，答在试卷上的答案无效。</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top_small"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </body>
|
|
|
+ <script>
|
|
|
+
|
|
|
+ var a3width = 990; //a3宽
|
|
|
+ var a3height = 1660; //a3高
|
|
|
+
|
|
|
+ var secondColumnIndex = 0;
|
|
|
+ var pageSize = 1;
|
|
|
+ var optionArray = [];
|
|
|
+ var secondColumn = document.getElementById(
|
|
|
+ "secondColumn" + secondColumnIndex
|
|
|
+ );
|
|
|
+ var optionContent = document.getElementById("optionContent");
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ function initialize(dataList,courseName,courseNo) {
|
|
|
+ document.getElementById("courseName").innerHTML = courseName;
|
|
|
+ document.getElementById("courseNo").innerHTML = courseNo;
|
|
|
+ typesetting(dataList);
|
|
|
+ }
|
|
|
+
|
|
|
+ function typesetting(dataList) {
|
|
|
+ for (var i = 0; i < dataList.length; i++) {
|
|
|
+ var div = createDivDom(dataList[i], i);
|
|
|
+ if (div.className.indexOf("item-option") > -1) {
|
|
|
+ optionArray.push(div);
|
|
|
+ optionContent.appendChild(div);
|
|
|
+ } else if (
|
|
|
+ (div.className.indexOf("item-quesBody") > -1 ||
|
|
|
+ div.className.indexOf("item-paperDetail") > -1) &&
|
|
|
+ optionArray.length > 0
|
|
|
+ ) {
|
|
|
+ handleQuesOption();
|
|
|
+ appendPageBox(div);
|
|
|
+ } else {
|
|
|
+ appendPageBox(div);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //如果最后一次是选择题
|
|
|
+ if (optionArray.length > 0) {
|
|
|
+ handleQuesOption();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //处理选项
|
|
|
+ function handleQuesOption() {
|
|
|
+ var cls = getLineType(optionArray);
|
|
|
+ optionContent.innerHTML = "";
|
|
|
+ optionArray.forEach(function(item) {
|
|
|
+ item.setAttribute("class", "item-option " + cls);
|
|
|
+ appendPageBox(item);
|
|
|
+ });
|
|
|
+ optionArray = [];
|
|
|
+ }
|
|
|
+
|
|
|
+ function createDivDom(data, index) {
|
|
|
+ var divlog = document.createElement("div");
|
|
|
+ var spanlog = document.createElement("span");
|
|
|
+ var cls = "";
|
|
|
+ if (data.indexOf("paperDetailTitle") > -1) {
|
|
|
+ cls = "item-paperDetail";
|
|
|
+ }
|
|
|
+ if (data.indexOf("questionAnswer") > -1) {
|
|
|
+ cls = "item-quesBody";
|
|
|
+ }
|
|
|
+ divlog.setAttribute("class", cls);
|
|
|
+ divlog.setAttribute("data-index", index);
|
|
|
+ spanlog.innerHTML = data;
|
|
|
+ divlog.appendChild(spanlog);
|
|
|
+ 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 dateList = eval(${htmlList!});
|
|
|
+
|
|
|
+ initialize(dateList,"${courseName!}","${courseNo!}");
|
|
|
+ };
|
|
|
+
|
|
|
+ </script>
|
|
|
+</html>
|
weiwenhai