需求
根据提供的试卷题目（是一个干净的只有“数据”的html网页）生成一份多页的试卷，用户能执行翻页、具有答题时间限制，展示给用户的试卷中题目需要占用尽量少的空间（比如选择题中把两条较短的选项由两行合并到一行）、同一道题目不要跨页面显示以方便答题者，管理员能够改变试卷的样式（字体、颜色、行距、页面边距，像字处理软件一样……），题目之间可以插入一些说明性的文字（比如告知答题者作答的须知等等）。题目提干、选择题的选项、说明文字可以包含多媒体信息（文字、图片、列表、表格、视频等等……）。选择题选项数目不限、单选多选不限。翻页要有可订制的动画效果
提供的试卷样板类似如下（input）：
复制代码 代码如下:
选择题：说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。
1.你认为怎样的老师是好老师？
和学生平等相处，能全面满足学生各种需要
所在教学班的成绩优于其他平行班
严格管理学生、所带的班级班风良好
父母般地关心学生的生活和情绪状态
2.一位有15年教龄的英语教师，教了多年高三，可谓学校的核心骨干。一次接受邀请到外校介绍教学经验，台下有老师发表了观点并问到几个英语教法发面的问题，一下子把她给卡住了。这是因为
她最近工作太累，注意力不够集中。
提问老师的观点和她的有很大不同。
由于长时间在教学一线拼搏，她对教学理论问题的关注度不高。
对学科教学的归纳和思考少，一时加工不过来。
3.哪张图片最好看？
这一张好看。
这一张好看。
这一张好看。
这一张好看。
不知道。
填空题和选择题：一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。
4.床前明月光，
5.你认为怎样的老师是好老师？
和
所
严
父
和班的成绩班的成绩班的成绩班的成绩班的成绩
所班的成绩班的成绩班的成绩
严班的班的成绩班的成绩班的成绩班的成绩
啊
思路
面对这种需求该怎么办呢？使用javascript了，看来。后来决定用jquery，aptana作ide（虽然jquery支持库在windows上死活装不上去，换了个os就好了，奇怪），格式么就用css了。
具体步骤：
导入试卷题目html
对所有选择题进行排版，把一行划分为四个位置，使选项尽量适应一个位置、两个位置或四个位置（也就是一行四项、一行两项或者一行一项的效果）
对所有题目进行分页
思路还是清晰的，但是由于浏览器众多，还是比较麻烦的，并且我是新手，没接触过jquery之前……
实现
页面文件（和例子不同，但是格式一样的）
复制代码 代码如下:
no title...
prevpage
nextpage
loading the test...
left
right
选择题：说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。
1你认为怎样的老师是好老师？
和学生平等相处，能全面满足学生各种需要
所在教学班的成绩优于其他平行班
严格管理学生/所带的班级班风良好
父母般地关心学生的生活和情绪状态
2你认为怎样的老师是好老师？
和学生平jlsdjklsdf生各种需要
所
严格好
父母关心学生的生活和情绪状态
3你认为怎样的老师是好老师？
和学生平等相处，能全面满足学生各种需要
所在教学班的成绩优于其他平行班
严格管理学生/所带的班级班风良好
父母般地关心学生的生活和情绪状态
4你认为怎样的老师是好老师？
和学生平等相处，能全面满足学和学生平等相处，能全面满足学和学生平等相处，能全面满足学和学生平等相处，能全面满足学和学生平等相处，能全面满足学和学生平等相处，能全面满足学和学生平等相处，能全面满足学和学生平等相处，能全面满足学和学生平等相处，能全面满足学生各种需要
所在教学班的成绩优于其他平行班
严格管理学生/所带的班级班风良好
父母般地关心学生的生活和情绪状态
还是选择题：一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。
5你认为怎样的老师是好老师？
和10学生平等相处，能全面满足学生各种需要
所10在教学班的成绩优于其他平行班
严10jhjhjhjhkljlkjjkljjkjjkllkjlkjljkjljlkj格管文字
父10母般地关心学生的生活和情绪状态
5你认为怎样的老师是好老师？
和学生平等相处，能全面满足学生各种需要
所在教学班的成绩优于其他平行班
严jhjhjhjhkljlkjjkljjkjjkllkjlkjljkjljlkj格管文字
父母般地关心学生的生活和情绪状态
6你认为怎样的老师是好老师？
和
所
严
父
和班的成绩班的成绩班的成绩班的成绩班的成绩
所班的成绩班的成绩班的成绩
严班的班的成绩班的成绩班的成绩班的成绩
父
样式文件（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：
复制代码 代码如下:
/**
*
* @param {string} paperolid the id value of the ol tags indicating pages.
* @param {string} problemclass the css class name for problem area.
* @param {string} descclass the css class name for description area.
* @param {string} choicesclass the css class name for choices area.
* @param {string} leftpageid the id of the left page.
* @param {string} rightpageid the id of the right page.
* @author exsystem
*/
function ttestpaperprocessor(paperolid, problemclass, descclass, choicesclass, leftpageid, rightpageid) {
this.fpaperolid = paperolid;
this.fproblemclass = problemclass;
this.fdescclass = descclass;
this.fchoicesclass = choicesclass;
this.fleftpageid = leftpageid;
this.frightpageid =rightpageid;
$('#' + this.fleftpageid).html('');
$('#' + this.frightpageid).html('');
this._formatproblemoptions();
this._divideintopages();
this.setcurrpage(1);
}
ttestpaperprocessor.prototype = {
fpaperolid: '', //the id property of the ol tag contains the whole test paper.
fproblemclass: '', //the css class name for problem area.
fdescclass: '', //the css class name for description area.
fchoicesclass: '', //the css class name for choices area.
fleftpageid: '', //the left page.
frightpageid: '', //the right page.
cpageclass: 'page',
fisdisplaytablesupported: null, //whether the browser is the evil m$ie6,7 that does not support display: table(-cell).
fcurrpage: 0, //start from 1, 0 for no page has been displayed yet.
fpagecount: 0, //page count.
// /**
// * get external css stylesheet info.
// * @param {string} selector the selector in the css style sheet.
// * @param {string} property the property name.
// * @return {string} the value of the property, or null for undefined property.
// */
// _getcssinfo: function(selector, property) {
// var mcss = document.stylesheets[0].cssrules || document.stylesheets[0].rules;
// for (var mindex = 0; mindex // if (mcss[mindex].selectortext.tolowercase() == selector) {
// return mcss[mindex].style[property];
// }
// }
// return null;
// },
/**
* @return {boolean}
*/
_isdisplaytablesupported: function() {
if (this.fisdisplaytablesupported != null) {
return this.fisdisplaytablesupported;
}
this.fisdisplaytablesupported = !(jquery.browser.msie && jquery.browser.version return this.fisdisplaytablesupported;
},
/**
* formats radios and checkboxes for the choices quiz.
*/
_formatproblemoptions: function() {
var mthis = this;
var mselector = '.' + this.fproblemclass + ' .' + this.fchoicesclass;
$(mselector).each(function() {
//rearrange the options for each problem ordered by offsetwidth of the label tag.
var mlabels = new array();
mlabels = jquery.makearray($('label', this));
mlabels.sort(function(first, second) {
return $(second).outerwidth(true) > $(first).outerwidth(true);
});
$(mlabels).appendto(this);
//layout the options into the appropreate form.
var mslots = -1; //force to create a new row, inside the while() loop.
var mslotwidth = $(mselector).width() / 4.0;
var mcellsize = 0;
if (mthis._isdisplaytablesupported()) {
while (mlabels.length > 0) {
//alert($(mlabels[0]).outerwidth(true) + '::' + $(mlabels[0]).outerheight(true) + '::' + $(mlabels[0]).html());
if (mslots mcurrrow = $('
');
mcurrrow.appendto(this);
mslots = 4;
mcellsize = 0;
var mrealcellwidth = $(mlabels[0]).outerwidth(true);
if (mrealcellwidth mcellsize = 1;
}
if (mrealcellwidth >= mslotwidth && mrealcellwidth mcellsize = 2;
}
if (mrealcellwidth >= mslotwidth * 2) {
mcellsize = 4;
}
}
mslots -= mcellsize;
if (mslots >= 0) { //if empty slots exists, put the cell into the row.
mlabel = mlabels.shift();
$(mlabel).addclass('___cell');
$(mlabel).css('display', 'table-cell');
$(mlabel).appendto(mcurrrow);
}
}
$('.___table').each(function() { //align all the tables and cells.
$(this).css('width', '100%');
var mcellwidth = 100 / $('.___cell', this).length;
$('.___cell', this).css('width', mcellwidth + '%');
});
}
else { // for the evil m$ie6, use table, tr, td tags.
while (mlabels.length > 0) {
if (mslots mcurrrow = $('
');
mrow = $('
');
mrow.appendto(mcurrrow);
mcurrrow.appendto(this);
mslots = 4;
mcellsize = 0;
var mrealcellwidth = $(mlabels[0]).attr('offsetwidth');
//the evil ie only:
//be sure to use this css reset: table { border-collapse: collapse; border-spacing: 0; }
//otherwise, 2 lines will be occupied by some long problem options instead of 1.
//or use this code instead: var mrealcellwidth = $(mlabels[0]).attr('offsetwidth') * 1.3;
if (mrealcellwidth mcellsize = 1;
}
if (mrealcellwidth > mslotwidth && mrealcellwidth mcellsize = 2;
}
if (mrealcellwidth > mslotwidth * 2) {
mcellsize = 4;
}
}
mslots -= mcellsize;
if (mslots >= 0) { //if empty slots exists, put the cell into the row.
mlabel = mlabels.shift();
mcell = $(' ');
$(mlabel).appendto(mcell);
mcell.appendto($('tr', mcurrrow)[0]);
}
}
$('.___table').each(function() { //align all the tables and cells.
$(this).css('width', '100%');
var mcellwidth = 100 / $('tbody tr .___cell', this).length;
$('tbody tr .___cell', this).css('width', mcellwidth + '%');
});
}
});
},
/**
* create a new page, and add it to the paper.
* @return {jquery} the new page.
*/
_createnewpage: function() {
++this.fpagecount;
mpage = $('
');
mpage.appendto($('#' + this.fpaperolid));
return mpage;
},
/**
*
* @param {number} pagenumber
* @return {jquery}
*/
_getpage: function(pagenumber) {
if (pagenumber this.fpagecount) {
throw new error('invalid page number: ' + pagenumber + '.');
}
return $('#___page_' + pagenumber);
},
/**
*
*/
_divideintopages: function() {
var mproblems = $('.' + this.fproblemclass + ', .' + this.fdescclass);
var mproblemscount = mproblems.length;
var mcurrpage = this._createnewpage();
//var mpageheight = mcurrpage.attr('offsetheight'); chrome: sometimes 0. safari: always 0, if putted in $(window).ready().
var mpageheight = mcurrpage.outerheight(true); //the same as the code above. fix: put it into $(window).load().
var musedpageheight = 0;
for (var mcurrproblem = 0; mcurrproblem if (musedpageheight + $(mproblems[mcurrproblem]).outerheight(true) > mpageheight) {
mcurrpage.hide();
mcurrpage = this._createnewpage();
mpageheight = mcurrpage.outerheight(true);
musedpageheight = 0;
}
$(mproblems[mcurrproblem]).appendto(mcurrpage);
musedpageheight += $(mproblems[mcurrproblem]).outerheight(true);
}
mcurrpage.hide();
},
/**
* get the current page of the left side, started from 1.
* @return {number} the current page.
*/
getcurrpage: function() {
if (this.fpagecount == 0) {
throw new error('no page has been created yet.');
}
return this.fcurrpage;
},
/**
* trun to a specific page in the left side.
* @param {number} value the page number.
*/
setcurrpage: function(value) {
if (value this.fpagecount) {
throw new error('no such page: ' + value + '.');
}
this.fcurrpage = parseint(value / 2) * 2 + 1; // to get an odd number.
$('#' + this.fleftpageid + ' .' + this.cpageclass).hide();
$('#' + this.frightpageid + ' .' + this.cpageclass).hide();
if (this.fcurrpage >= 0) {
$('#___page_' + this.fcurrpage).appendto($('#' + this.fleftpageid));
$('#___page_' + this.fcurrpage).show('fast');
if (this.fcurrpage ++this.fcurrpage;
$('#___page_' + this.fcurrpage).appendto($('#' + this.frightpageid));
$('#___page_' + this.fcurrpage).show('fast');
--this.fcurrpage;
}
}
},
/**
* @retrun {number}
*/
getpagecount: function() {
return this.fpagecount;
},
/**
*
*/
prev: function() {
this.setcurrpage(this.fcurrpage - 2);
},
/**
*
*/
next: function() {
this.setcurrpage(this.fcurrpage + 2);
}
};
//client code goes here...
$(window).load(function() {
var obj = new ttestpaperprocessor('olthepaper', 'problem', 'desc', 'choices', 'divleft', 'divright');
$('#divprev').click(function() {
try {
obj.prev();
$('#divpageinfo').text(obj.getcurrpage() + ' of ' + obj.getpagecount());
}
catch (e) {
alert('no such page!');
}
});
$('#divnext').click(function() {
try {
obj.next();
$('#divpageinfo').text(obj.getcurrpage() + ' of ' + obj.getpagecount());
}
catch (e) {
alert('no such page!');
}
});
//usage: http://keith-wood.name/countdown.html
function timeup() {
$('#formpaper').submit();
}
$('#divtimer').countdown({
until: '+90m',
compact: true,
format: 'hms',
description: '',
onexpiry: timeup
});
$('#divpageinfo').text(obj.getcurrpage() + ' of ' + obj.getpagecount());
});
嘿嘿，其实这是一个俺们学校一位博导老师的项目的一部分～～托给我做了。马上要出门了，回来放源文件下载，就可以看到效果了～～昨天回来太晚了，现在放出源代码文件下载：点击此处
/201007/yuanma/testpaperprocessor.rar