需求
根据提供的试卷题目（是一个干净的只有“数据”的HTML网页）生成一份多页的试卷，用户能执行翻页、具有答题时间限制，展示给用户的试卷中题目需要占用尽量少的空间（比如选择题中把两条较短的选项由两行合并到一行）、同一道题目不要跨页面显示以方便答题者，管理员能够改变试卷的样式（字体、颜色、行距、页面边距，像字处理软件一样……），题目之间可以插入一些说明性的文字（比如告知答题者作答的须知等等）。题目提干、选择题的选项、说明文字可以包含多媒体信息（文字、图片、列表、表格、视频等等……）。选择题选项数目不限、单选多选不限。翻页要有可订制的动画效果
提供的试卷样板类似如下（Input）：
02 |
<div class="Desc">选择题：说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。</div> |
03 |
<div class="Problem" id="1"> |
04 |
<li>1.你认为怎样的老师是好老师？</li> |
06 |
<label><input type="radio" name="prob1" value="A" />和学生平等相处，能全面满足学生各种需要</label> |
07 |
<label><input type="radio" name="prob1" value="B" />所在教学班的成绩优于其他平行班</label> |
08 |
<label><input type="radio" name="prob1" value="C" />严格管理学生、所带的班级班风良好</label> |
09 |
<label><input type="radio" name="prob1" value="D" />父母般地关心学生的生活和情绪状态</label> |
12 |
<div class="Problem" id="2"> |
13 |
<li>2.一位有15年教龄的英语教师，教了多年高三，可谓学校的核心骨干。一次接受邀请到外校介绍教学经验，台下有老师发表了观点并问到几个英语教法发面的问题，一下子把她给卡住了。这是因为</li> |
15 |
<label><input type="radio" name="prob2" value="A" />她最近工作太累，注意力不够集中。</label> |
16 |
<label><input type="radio" name="prob2" value="B" />提问老师的观点和她的有很大不同。</label> |
17 |
<label><input type="radio" name="prob2" value="C" />由于长时间在教学一线拼搏，她对教学理论问题的关注度不高。</label> |
18 |
<label><input type="radio" name="prob2" value="D" />对学科教学的归纳和思考少，一时加工不过来。</label> |
21 |
<div class="Problem" id="3"> |
24 |
<label><input type="radio" name="prob3" value="A" />这一张<img src="img1.png" height="300px"width="400px" alt="img1"/>好看。</label> |
25 |
<label><input type="radio" name="prob3" value="B" />这一张<img src="img2.png" height="300px"width="400px" alt="img2"/>好看。</label> |
26 |
<label><input type="radio" name="prob3" value="C" />这一张<img src="img3.png" height="300px"width="400px" alt="img3"/>好看。</label> |
27 |
<label><input type="radio" name="prob3" value="D" />这一张<img src="img4.png" height="300px"width="400px" alt="img4"/>好看。</label> |
28 |
<label><input type="radio" name="prob3" value="E" />不知道。</label> |
31 |
<div class="Desc">填空题和选择题：一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。</div> |
32 |
<div class="Problem" id="4"> |
33 |
<li>4.床前明月光，<input type="text" name="prob4" /></li> |
35 |
<div class="Problem" id="5"> |
36 |
<li>5.你认为怎样的老师是好老师？</li> |
38 |
<label><input type="checkbox" name="prob6" value="D" />和</label> |
39 |
<label><input type="checkbox" name="prob6" value="A" />所</label> |
40 |
<label><input type="checkbox" name="prob6" value="B" />严</label> |
41 |
<label><input type="checkbox" name="prob6" value="C" />父</label> |
42 |
<label><input type="checkbox" name="prob6" value="E" />和班的成绩班的成绩班的成绩班的成绩班的成绩</label> |
43 |
<label><input type="checkbox" name="prob6" value="F" />所班的成绩班的成绩班的成绩</label> |
44 |
<label><input type="checkbox" name="prob6" value="G" />严班的班的成绩班的成绩班的成绩班的成绩</label> |
45 |
<label><input type="checkbox" name="prob6" value="H" />啊</label> |
思路
面对这种需求该怎么办呢？使用JavaScript了，看来。后来决定用jQuery，Aptana作IDE（虽然jQuery支持库在Windows上死活装不上去，换了个OS就好了，奇怪），格式么就用CSS了。
具体步骤：
- 导入试卷题目HTML
- 对所有选择题进行排版，把一行划分为四个位置，使选项尽量适应一个位置、两个位置或四个位置（也就是一行四项、一行两项或者一行一项的效果）
- 对所有题目进行分页
思路还是清晰的，但是由于浏览器众多，还是比较麻烦的，并且我是新手，没接触过jQuery之前……
实现
页面文件（和例子不同，但是格式一样的）
004 |
<title>No title...</title> |
005 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
006 |
<script language="JavaScript" src="lib/jquery/jquery-1.4.2.js" type="text/javascript"></script> |
007 |
<script language="JavaScript" src="lib/countdown/jquery.countdown.pack.js" type="text/javascript"></script> |
008 |
<script language="JavaScript" src="TestPaperProcessor.js" type="text/javascript"></script> |
009 |
<link href="style.css" rel="stylesheet" type="text/css" /> |
012 |
<div id="divToolbar"> |
013 |
<div id="divPrev">PrevPage</div> |
014 |
<div id="divNext">NextPage</div> |