根据提供的试卷题目(是一个干净的只有“数据”的HTML网页)生成一份多页的试卷,用户能执行翻页、具有答题时间限制,展示给用户的试卷中题目需要占用尽量少的空间(比如选择题中把两条较短的选项由两行合并到一行)、同一道题目不要跨页面显示以方便答题者,管理员能够改变试卷的样式(字体、颜色、行距、页面边距,像字处理软件一样……),题目之间可以插入一些说明性的文字(比如告知答题者作答的须知等等)。题目提干、选择题的选项、说明文字可以包含多媒体信息(文字、图片、列表、表格、视频等等……)。选择题选项数目不限、单选多选不限。翻页要有可订制的动画效果
提供的试卷样板类似如下(Input):
[url=style.css]</head>
<body>
<div id="divToolbar">
<div id="divPrev">PrevPage</div>
<div id="divNext">NextPage</div>
<div id="divPageInfo">Loading the test...</div>
<div id="divTimer"></div>
</div>
<form id="formPaper" action="demo.html" method="post" accept-charset="utf-8">
<ul>
<div class="Display" id="divLeft">
left<!--the left page-->
</div>
<div class="Display" id="divRight">
right<!--the right page-->
</div>
</ul>
<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="D" />和学生平等相处,能全面满足学生各种需要
</label>
<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>
</div>
</div>
<div class="Problem" id="2">
<li>2你认为怎样的老师是好老师?</li>
<div class="Choices">
<label>
<input type="radio" name="prob2" value="D" />和学生平jlsdjklsdf生各种需要
</label>
<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>
</div>
</div>
<div class="Problem" id="3">
<li>3你认为怎样的老师是好老师?</li>
<div class="Choices">
<label>
<input type="radio" name="prob3" value="D" />和学生平等相处,能全面满足学生各种需要
</label>
<label>
<input type="radio" name="prob3" value="A" />所在教学班的成绩优于其他平行班
</label>
<label>
<input type="radio" name="prob3" value="B" />严格管理学生/所带的班级班风良好
</label>
<label>
<input type="radio" name="prob3" value="C" />父母般地关心学生的生活和情绪状态
</label>
</div>
</div>
<div class="Problem" id="4">
<li>4你认为怎样的老师是好老师?</li>
<div class="Choices">
<label>
<input type="radio" name="prob4" value="D" />和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学生各种需要
</label>
<label>
<input type="radio" name="prob4" value="A" />所在教学班的成绩优于其他平行班
</label>
<label>
<input type="radio" name="prob4" value="B" />严格管理学生/所带的班级班风良好
</label>
<label>
<input type="radio" name="prob4" value="C" />父母般地关心学生的生活和情绪状态
</label>
</div>
</div>
<div class="Desc">还是选择题:一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。</div>
<div class="Problem" id="10">
<li>5你认为怎样的老师是好老师?</li>
<div class="Choices">
<label>
<input type="radio" name="prob5" value="D" />和10学生平等相处,能全面满足学生各种需要
</label>
<label>
<input type="radio" name="prob5" value="A" />所10在教学班的成绩优于其他平行班
</label>
<label>
<input type="radio" name="prob5" value="B" />严10jhjhjhjhkljlkjjkljjkjjkllkjlkjljkjljlkj格管文字
</label>
<label>
<input type="radio" name="prob5" value="C" />父10母般地关心学生的生活和情绪状态
</label>
</div>
</div>
<div class="Problem" id="5">
<li>5你认为怎样的老师是好老师?</li>
<div class="Choices">
<label>
<input type="radio" name="prob5" value="D" />和学生平等相处,能全面满足学生各种需要
</label>
<label>
<input type="radio" name="prob5" value="A" />所在教学班的成绩优于其他平行班
</label>
<label>
<input type="radio" name="prob5" value="B" />严jhjhjhjhkljlkjjkljjkjjkllkjlkjljkjljlkj格管<img src="aaaa9.jpg" height="300px" width="400px" alt="pic"/>文字
</label>
<label>
<input type="radio" name="prob5" value="C" />父母般地关心学生的生活和情绪状态
</label>
</div>
</div>
<div class="Problem" id="6">
<li>6你认为怎样的老师是好老师?</li>
<div class="Choices">
<label>
<input type="radio" name="prob6" value="D" />和
</label>
<label>
<input type="radio" name="prob6" value="A" />所
</label>
<label>
<input type="radio" name="prob6" value="B" />严
</label>
<label>
<input type="radio" name="prob6" value="C" />父
</label>
<label>
<input type="radio" name="prob6" value="E" />和班的成绩班的成绩班的成绩班的成绩班的成绩
</label>
<label>
<input type="radio" name="prob6" value="F" />所班的成绩班的成绩班的成绩
</label>
<label>
<input type="radio" name="prob6" value="G" />严班的班的成绩班的成绩班的成绩班的成绩
</label>
<label>
<input type="radio" name="prob6" value="H" />父
</label>
</div>
</div>
</ol>
</form>
</body>
</html>
样式文件(CSS)
/* YahooUI CSS Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img { border: 0; }
address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal; }
ol,ul { list-style: none; }
caption,th { text-align: left; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; }
q:before,q:after { content:''; }
abbr,acronym { border: 0;}
label { padding: 0; margin: 0; }
/* My css */
.Choices { line-height: 150%; margin: 5px 0; }
.Page { height: 500px; border: solid 1px gray; }
#olThePaper, .Display { padding: 0; width: 500px; }
/* NOTICE: the width of .Display and #olThePaper should be the SAME. */
.Display { float: left; }
#divToolbar { height: 35px; }
#divPrev, #divNext { float: left; width: 100px; height: 30px; border: solid 1px green; background-color: #999999; }
#divPageInfo { float: left; width: 100px; height: 30px; }
#divTimer { float: left; width: 500px; height: 30px; }
/*for debugging... perhaps for non-IE only*/
/**label { outline: dotted 1px red; background-color: gray; }**/
/**div {outline: dashed 1px blue;}**/
下面是重点,TTestPaperProcessor.js:
[url=http://xiazai.jb51.net/201101/yuanma/TestPaperProcessor.rar]http://xiazai.jb51.net/201101/yuanma/TestPaperProcessor.rar[/url]