examcloud-backend
/
examcloud-core-questions


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389
							<!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">
        * {
            font-family: "宋体";
            font-size: 22px;
            line-height: 1.5;
        }

        .e_description {
            padding: 50px 0;
        }

        .e_description span {
            display: inline-block;
            width: 48%;
            line-height: 40px;
            font-weight: 700;
        }

        .e_description em {
            font-style: normal;
            margin-left: 10px;
            text-align: center;
            text-decoration: underline;
        }

        .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: 400px;
        }

        .e_paper_title h1 {
            font-size: 2.2em;
            font-family: "黑体";
            font-weight: bolder;
            text-align: center;
        }

        .e_paper_title h3 {
            margin-top: -20px;
            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;
        }

        .e_tip {
            margin-top: 10px;
        }

        /* 第一版面 */
        .e_first_page {
            width: 2250px;
            margin-left: 50px;
            position: relative;
        }

        .e_first_part {
            position: absolute;
            width: 1560px;
            height: 120px;
            position: absolute;
            top: 742px;
            left: -715px;
            /* 逆时针旋转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: 15px;
            border-bottom: 0.1em dotted #333;
            height: 20px;
            line-height: 25px;
            text-align: center;
        }

        .e_sidebar_thread span {
            margin: 0 150px;
            background: #FFF;
        }

        #allContent {
            width: 2000px;
            float: left;
            padding-left: 130px;
        }

        #tempContent {
            visibility: hidden;
            width: 990px;
        }

        .e_detail {
            /* nothing */
        }

        .e_question {
            /* nothing */
        }

        .e_option {
            /* nothing */
        }

        .e_item {
            display: inline-block;
            line-height: 20px;
            padding-right: 15px;
            box-sizing: border-box;
            -webkit-box-zizig: border-box;
        }

        .e_w25 {
            width: 25%;
        }

        .e_w50 {
            width: 50%;
        }

        .e_w100 {
            width: 100%;
        }

        .e_num {
            font-style: normal;
            color: red;
        }

        .e_box {
            /*background: #ccc;*/
            float: left;
            width: 100%;
            overflow: hidden;
        }

        .e_box p {
            margin: 0 !important;
        }

        .e_box p.e_option_end {
            margin-bottom: 30px !important;
        }

        .e_content {
            /*background: #efefef;*/
            float: left;
            width: 960px;
            height: 1593px;
            margin: 20px;
            padding-bottom: 30px;

            position: relative;
            border-top: 0px dashed black;
            border-bottom: 0px dashed black;
            box-sizing: border-box;
        }

        @media print {
            .e_content:nth-child(even) {
                page-break-before: always;
            }

            .e_content:first-child {
                page-break-before: auto;
            }

            @page {
                size: A3 landscape;
            }
        }
    </style>
</head>

<body>
<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="e_sidebar_thread">
            <span>密</span>
            <span>封</span>
            <span>线</span>
        </div>
    </div>

    <div id="allContent">
        <div class="e_content">
            <div id="e_box_0" class="e_box">
                <div class="e_paper_title">
                    <h1>山东大学继续（网络）教育</h1>
                    <h3><b><em>2019</em>年<em>06</em>月</b>期末考试</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="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 type="text/javascript">
    var a3Width = 930;
    var a3Height = 1593;
    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 {
                appendBox(div);
            }
        }

        /* 处理最后一题选项 */
        if (tempOptions.length > 0) {
            handleQuestionOption();
        }

        console.log('finished');
    }

    function createElement(val, index) {
        var divElement = document.createElement('div');
        var className = "";
        if (val.indexOf("e_detail") > -1) {
            className = "e_detail";
        }
        if (val.indexOf("e_question") > -1) {
            className = "e_question";
        }
        if (val.indexOf("e_option") > -1) {
            className = "e_item e_option_end";
        }
        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 appendBox(elements) {
        theBox.appendChild(elements);
        var curHeight = theBox.clientHeight;
        if (curHeight > a3Height) {
            theBox.removeChild(elements);
            boxIndex++;

            var allContent = document.getElementById("allContent");
            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 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) {
                className = 'e_w100';
                return className
            }
            if (rate > 0.25) {
                className = 'e_w50';
            }
        }
        return className;
    }

    window.onload = function () {
        /* 后台数据示例 */
        var list = [];

        for (var m = 1; m <= 15; 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++) {
                if (n <= 30) {
                    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 e_option_end">D.' + content + '</p>');
            }
        }

        renderQuestions(list);
    };
</script>
</html>