php自动生成试卷,基于jQuery的试卷自动排版系统实现代码
根据提供的试卷题目(是一个干净的只有“数据”的HTML网页)生成一份多页的试卷,用户能执行翻页、具有答题时间限制,展示给用户的试卷中题目需要占用尽量少的空间(比如选择题中把两条较短的选项由两行合并到一行)、同一道题目不要跨页面显示以方便答题者,管理员能够改变试卷的样式(字体、颜色、行距、页面边距,像字处理软件一样……),题目之间可以插入一些说明性的文字(比如告知答题者作答的须知等等)。题目提干、选择题的选项、说明文字可以包含多媒体信息(文字、图片、列表、表格、视频等等……)。选择题选项数目不限、单选多选不限。翻页要有可订制的动画效果
提供的试卷样板类似如下(Input):
和学生平等相处,能全面满足学生各种需要
所在教学班的成绩优于其他平行班
严格管理学生、所带的班级班风良好
父母般地关心学生的生活和情绪状态
她最近工作太累,注意力不够集中。
提问老师的观点和她的有很大不同。
由于长时间在教学一线拼搏,她对教学理论问题的关注度不高。
对学科教学的归纳和思考少,一时加工不过来。
这一张好看。
这一张好看。
这一张好看。
这一张好看。
不知道。
和
所
严
父
和班的成绩班的成绩班的成绩班的成绩班的成绩
所班的成绩班的成绩班的成绩
严班的班的成绩班的成绩班的成绩班的成绩
啊
思路
面对这种需求该怎么办呢?使用JavaScript了,看来。后来决定用jQuery,Aptana作IDE(虽然jQuery支持库在Windows上死活装不上去,换了个OS就好了,奇怪),格式么就用CSS了。
具体步骤:
导入试卷题目HTML
对所有选择题进行排版,把一行划分为四个位置,使选项尽量适应一个位置、两个位置或四个位置(也就是一行四项、一行两项或者一行一项的效果)
对所有题目进行分页
思路还是清晰的,但是由于浏览器众多,还是比较麻烦的,并且我是新手,没接触过jQuery之前……
实现
页面文件(和例子不同,但是格式一样的)
No title...
left
right
和学生平等相处,能全面满足学生各种需要
所在教学班的成绩优于其他平行班
严格管理学生/所带的班级班风良好
父母般地关心学生的生活和情绪状态
和学生平jlsdjklsdf生各种需要
所
严格好
父母关心学生的生活和情绪状态
和学生平等相处,能全面满足学生各种需要
所在教学班的成绩优于其他平行班
严格管理学生/所带的班级班风良好
父母般地关心学生的生活和情绪状态
和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学生各种需要
所在教学班的成绩优于其他平行班
严格管理学生/所带的班级班风良好
父母般地关心学生的生活和情绪状态
和10学生平等相处,能全面满足学生各种需要
所10在教学班的成绩优于其他平行班
严10jhjhjhjhkljlkjjkljjkjjkllkjlkjljkjljlkj格管文字
父10母般地关心学生的生活和情绪状态
和学生平等相处,能全面满足学生各种需要
所在教学班的成绩优于其他平行班
严jhjhjhjhkljlkjjkljjkjjkllkjlkjljkjljlkj格管文字
父母般地关心学生的生活和情绪状态
和
所
严
父
和班的成绩班的成绩班的成绩班的成绩班的成绩
所班的成绩班的成绩班的成绩
严班的班的成绩班的成绩班的成绩班的成绩
父
样式文件(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 < mCss.length; ++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 < 8.0);
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 <= 0) { //If no empty slot, create a new row.
mCurrRow = $('
mCurrRow.appendTo(this);
mSlots = 4;
mCellSize = 0;
var mRealCellWidth = $(mLabels[0]).outerWidth(true);
if (mRealCellWidth < mSlotWidth) {
mCellSize = 1;
}
if (mRealCellWidth >= mSlotWidth && mRealCellWidth < mSlotWidth * 2) {
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 <= 0) { //If no empty slot, create a new row.
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 <= mSlotWidth) {
mCellSize = 1;
}
if (mRealCellWidth > mSlotWidth && mRealCellWidth <= mSlotWidth * 2) {
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 < 1 || 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 < mProblemsCount; ++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 < 1 || 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.FPageCount) {
++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());
});
嘿嘿,其实这是一个俺们学校一位博导老师的项目的一部分~~托给我做了。
测试代码打包http://xiazai.jb51.net/201101/yuanma/TestPaperProcessor.rar
php自动生成试卷,基于jQuery的试卷自动排版系统实现代码相关推荐
- java 试卷自动生成_基于JAVA的试题自动生成系统 - WEB源码|JSP源码/Java|源代码 - 源码中国...
压缩包 : 试卷自动生成系统.rar 列表 试卷自动生成系统/.classpath 试卷自动生成系统/.project 试卷自动生成系统/bin/Db/Sql.class 试卷自动生成系统/bin/f ...
- 基于Jquery的图片自动分组且自适应页面的缩略图展示特效
今天分享的是一款基于Jquery的图片自动分组且自适应页面的缩略图展示特效,通俗一点说就是JS相册,不过是用JQuery做的,相当不错! This experimental jQuery plugin ...
- 基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览 源码下载 实现的代码: <!-- 轮播广告 --><div id= ...
- 基于jQuery会员中心安全修改表单代码
基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览 源码下载 实现的代码. html代码 ...
- 基于jQuery商城网站全屏图片切换代码
基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="sli ...
- 基于jquery仿360网站图片选项卡切换代码
今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
- python 文案自动生成_Python应用 | 利用COM技术自动生成IBM i2舞弊关系分析图表
点蓝字关注 ↑↑↑ 数据化审计:问题导向.应用至上.解决痛点 内容摘要 什么是COM技术 IBM I2 Analyst's Notebook软件介绍 如何使用Python调用I2的COM接口,批量自 ...
- 软件测试自动生成测试数据,软件测试中测试数据的自动生成方法浅析
一.引言 软件质量是制约计算机应用领域进一步发展的关键要素之一,保证软件质量.提高软件可靠性的重要手段是软件测试.软件测试中最关键的问题是测试数据的设计,它主要涉及两个方面,一是测试 数据生成,是测试 ...
- 自动生成python接口文档_Django自动生成Swagger接口文档
Django自动生成Swagger接口文档 1. 前言 当接口开发完成,紧接着需要编写接口文档.传统的接口文档通常都是使用Word或者一些接口文档管理平台进行编写,但此类接口文档维护更新比较麻烦,每次 ...
- python 自动抢红包_基于Airtest实现python自动抢红包
一.Airtest的介绍 1)Airtest的简介 Airtest是网易出品的一款基于图像识别和poco控件识别的一款UI自动化测试工具. Airtest的框架是网易团队自己开发的一个图像识别框架,这 ...
最新文章
- 以太坊C++客户端Aleth源码分析,转账交易和智能合约的入口代码
- 【FPGA实现GA】基于FPGA的GA优化算法的设计与实现
- Android Studio快捷键快速入门
- 【javascript】不刷新页面,实时显示当前时间
- php protobuf 二进制,PHP环境中使用ProtoBuf数据格式
- Windows下基于Anaconda的Tensorflow环境配置
- java selector wakeup_Selector
- 在 Mac上接收、暂停或停止接收通知操作方法
- List集合去重的常见及常用的四种方式
- ABAP中如何建数据库视图和维护视图
- asp.net配置web.config发电子邮件详解
- 抽象工厂模式在spring源码中的应用
- 我的世界服务器银行系统,我的世界多功能银行系统制作教程
- 简单几步教你如何看k线图图解
- 南昌大学计算机考研学硕,南昌大学电子信息工程专硕考研心得
- RabbitMq安装(Erlang前置安装)
- 如何往云服务器上装虚拟机,如何在虚拟机安装linux
- 【代码复现】知识表示学习MHGRN预处理操作(二)
- 设计师必须知道的 5个设计灵感网站
- springmvc 跨域访问