基于基于jQuery试卷自动排版系统试卷自动排版系统
需求
根据提供的试卷题目(是一个干净的只有“数据”的HTML网页)生成一份多页的试卷,用户能执行翻页、具有答题时间限制,
展示给用户的试卷中题目需要占用尽量少的空间(比如选择题中把两条较短的选项由两行合并到一行)、同一道题目不要跨页
面显示以方便答题者,管理员能够改变试卷的样式(字体、颜色、行距、页面边距,像字处理软件一样……),题目之间可以
插入一些说明性的文字(比如告知答题者作答的须知等等)。题目提干、选择题的选项、说明文字可以包含多媒体信息(文
字、图片、列表、表格、视频等等……)。选择题选项数目不限、单选多选不限。翻页要有可订制的动画效果
提供的试卷样板类似如下(Input):
代码如下:
<ol id=”olThePaper”>
<div class=”Desc”>选择题:说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明
文字。说明文字。说明文字。说明文字。说明文字。说明文字。</div>
<div class=”Problem” id=”1″>
<li>1.你认为怎样的老师是好老师?</li>
<div class=”Choices”>
<label><input type=”radio” name=”prob1″ value=”A” />和学生平等相处,能全面满足学生各种需要</label>
<label><input type=”radio” name=”prob1″ value=”B” />所在教学班的成绩优于其他平行班</label>
<label><input type=”radio” name=”prob1″ value=”C” />严格管理学生、所带的班级班风良好</label>
<label><input type=”radio” name=”prob1″ value=”D” />父母般地关心学生的生活和情绪状态</label>
</div>
</div>
<div class=”Problem” id=”2″>
<li>2.一位有15年教龄的英语教师,教了多年高三,可谓学校的核心骨干。一次接受邀请到外校介绍教学经验,台下有老师发
表了观点并问到几个英语教法发面的问题,一下子把她给卡住了。这是因为</li>
<div class=”Choices”>
<label><input type=”radio” name=”prob2″ value=”A” />她最近工作太累,注意力不够集中。</label>
<label><input type=”radio” name=”prob2″ value=”B” />提问老师的观点和她的有很大不同。</label>
<label><input type=”radio” name=”prob2″ value=”C” />由于长时间在教学一线拼搏,她对教学理论问题的关注度不高。
</label>
<label><input type=”radio” name=”prob2″ value=”D” />对学科教学的归纳和思考少,一时加工不过来。</label>
</div>
</div>
<div class=”Problem” id=”3″>
<li>3.哪张图片最好看?</li>
<div class=”Choices”>
<label><input type=”radio” name=”prob3″ value=”A” />这一张<img src=”img1.png” height=”300px” width=”400px”
alt=”img1″/>好看。</label>
<label><input type=”radio” name=”prob3″ value=”B” />这一张<img src=”img2.png” height=”300px” width=”400px”
alt=”img2″/>好看。</label>
<label><input type=”radio” name=”prob3″ value=”C” />这一张<img src=”img3.png” height=”300px” width=”400px”
alt=”img3″/>好看。</label>
<label><input type=”radio” name=”prob3″ value=”D” />这一张<img src=”img4.png” height=”300px” width=”400px”
alt=”img4″/>好看。</label>
<label><input type=”radio” name=”prob3″ value=”E” />不知道。</label>
</div>
</div>
<div class=”Desc”>填空题和选择题:一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大
堆的说明文字。</div>
<div class=”Problem” id=”4″>
<li>4.床前明月光,<input type=”text” name=”prob4″ /></li>
</div>
<div class=”Problem” id=”5″>
<li>5.你认为怎样的老师是好老师?</li>
<div class=”Choices”>
<label><input type=”checkbox” name=”prob6″ value=”D” />和</label>
<label><input type=”checkbox” name=”prob6″ value=”A” />所</label>
<label><input type=”checkbox” name=”prob6″ value=”B” />严</label>
<label><input type=”checkbox” name=”prob6″ value=”C” />父</label>
<label><input type=”checkbox” name=”prob6″ value=”E” />和班的成绩班的成绩班的成绩班的成绩班的成绩</label>
<label><input type=”checkbox” name=”prob6″ value=”F” />所班的成绩班的成绩班的成绩</label>
<label><input type=”checkbox” name=”prob6″ value=”G” />严班的班的成绩班的成绩班的成绩班的成绩</label>
<label><input type=”checkbox” name=”prob6″ value=”H” />啊</label>
</div>
</div>
</ol>