基于jQuery的试卷自动排版系统实现代码_jquery_脚本之家

依照提供的卷子题面生成生龙活虎份多页的卷子,客户能施行翻页、具备答题时限,显示给顾客的试卷中难点必要占用尽量少的空间(举个例子采取题中把两条不够长的选项由两行统风华正茂到生机勃勃行)、同后生可畏道标题不要跨页面展现以福利答题者,管理员可以转移试卷的体制(字体、颜色、行距、页面边距,像字管理软件同样……),标题之间能够插入一些表达性的文字。题目提干、选用题的选项、表明文字能够满含多媒体音信。采用题选项数据不限、单选多选不限。翻页要有可订制的动漫片效果
提供的卷子样本相似如下: 复制代码
代码如下:

  1. 1.你以为怎样的教育工小编是好老师?
  2. 2.一人有15年教龄的英语老师,教了连年高三,可谓学园的为主基本。三次接纳诚邀到外校介绍传授经历,台下有教授发布了观念并问到多少个丹麦语教法发面包车型地铁标题,一下子把他给卡住了。那是因为
  3. 3.哪张图纸最难堪?
  4. 4.床前光明的月光,
  5. 5.你感觉哪些的中校是好团长?

思路
面前蒙受这种供给该怎么做呢?使用JavaScript了,看来。后来调整用jQuery,Aptana作IDE(固然jQuery帮衬库在Windows上死活装不上来,换了个OS就好了,奇异),格式么就用CSS了。
具体步骤: 导入试卷标题HTML
对具备采用题实行排版,把大器晚成行划分为多少个义务,使采纳尽量适应一个职位、三个职位或四个地点(也正是单排四项、生机勃勃行两项要么大器晚成行意气风发项的法力)
对持相当实行分页
思路还是清楚的,不过由于浏览器众多,照旧相比较艰辛的,而且作者是新手,没接触过jQuery早前……
达成 页面文件 复制代码 代码如下:

基于jQuery的试卷自动排版系统实现代码_jquery_脚本之家。No title…

PrevPage

NextPage

Loading the test…

体制文件 复制代码 代码如下: /* 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. *www.js8331.com, @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; }
    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.
    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 { // var mCss =
    document.styleSheets[0].cssRules || document.styleSheets[0].rules;
    // for (var mIndex = 0; mIndex < mCss.length; ++mIndex) { // if
    (mCss[mIndex].selectorText.toLowerCase { // 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; $.each { //Rearrange the options for each problem
    ordered by offsetWidth of the label tag. var mLabels = new Array();
    mLabels = jQuery.makeArray; mLabels.sort(function { return
    $.outerWidth.outerWidth.appendTo; //Layout the options into the
    appropreate form. var mSlots = -1; //Force to create a new row, inside
    the while() loop. var mSlotWidth = $ / 4.0; var mCellSize = 0; if
    (mThis._IsDisplayTableSupported { while { //alert.outerWidth + ‘::’ +
    $.outerHeight + ‘::’ + $; if { //If no empty slot, create a new row.
    mCurrRow = $(‘

‘); mCurrRow.appendTo; mSlots = 4; mCellSize = 0; var mRealCellWidth =
$.outerWidth; if (mRealCellWidth < mSlotWidth) { mCellSize = 1; } if
(mRealCellWidth >= mSlotWidth && mRealCellWidth < mSlotWidth * 2)
{ mCellSize = 2; } if (mRealCellWidth >= mSlotWidth * 2) { mCellSize
= 4; } } mSlots -= mCellSize; if { //If empty slots exists, put the cell
into the row. mLabel = mLabels.shift.addClass.css(‘display’,
‘table-cell’); $.appendTo; } } $.each { //Align all the tables and
cells. $.css; var mCellWidth = 100 / $.length; $.css(‘width’, mCellWidth

  • ‘%’); }); } else { // for the evil M$IE6, use table, tr, td tags.
    while { if { //If no empty slot, create a new row. mCurrRow = $(‘

‘); mRow = $; mRow.appendTo; mCurrRow.appendTo; mSlots = 4; mCellSize =
0; var mRealCellWidth = $.attr; //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 = $.attr *
1.3; if (mRealCellWidth <= mSlotWidth) { mCellSize = 1; } if
(mRealCellWidth > mSlotWidth && mRealCellWidth <= mSlotWidth * 2)
{ mCellSize = 2; } if (mRealCellWidth > mSlotWidth * 2) { mCellSize
= 4; } } mSlots -= mCellSize; if { //If empty slots exists, put the cell
into the row. mLabel = mLabels.shift(); mCell = $; $.appendTo;
mCell.appendTo; } } $.each { //Align all the tables and cells. $.css;
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 { 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; chrome:
sometimes 0. safari: always 0, IF PUTTED IN $. var mPageHeight =
mCurrPage.outerHeight; //the same as the code above. FIX: PUT IT INTO $.
var mUsedPageHeight = 0; for (var mCurrProblem = 0; mCurrProblem <
mProblemsCount; ++mCurrProblem) { if (mUsedPageHeight +
$(mProblems[mCurrProblem]).outerHeight { mCurrPage.hide(); mCurrPage =
this._CreateNewPage(); mPageHeight = mCurrPage.outerHeight;
mUsedPageHeight = 0; } $(mProblems[mCurrProblem]).appendTo;
mUsedPageHeight += $(mProblems[mCurrProblem]).outerHeight; }
mCurrPage.hide(); }, /** * Get the current page of the left side,
started from 1. * @return {Number} The current page. */ getCurrPage:
function() { if { 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 { if (Value < 1 || Value > this.FPageCount) { throw new
Error(‘No such page: ‘ + Value + ‘.’); } this.FCurrPage = parseInt * 2

  • 1; // to get an odd number. $(‘#’ + this.FLeftPageId + ‘ .’ +
    this.CPageClass).hide(); $(‘#’ + this.FRightPageId + ‘ .’ +
    this.CPageClass).hide(); if { $(‘#___page_’ +
    this.FCurrPage).appendTo($(‘#’ + this.FLeftPageId)); $(‘#___page_’
  • this.FCurrPage).show; if (this.FCurrPage < this.FPageCount) {
    ++this.FCurrPage; $(‘#___page_’ + this.FCurrPage).appendTo($(‘#’ +
    this.FRightPageId)); $(‘#___page_’ + this.FCurrPage).show;
    –this.FCurrPage; } } }, /** * @retrun {Number} */ getPageCount:
    function() { return this.FPageCount; }, /** * */ Prev: function() {
    this.setCurrPage; }, /** * */ Next: function() { this.setCurrPage; }
    }; //client code goes here… $.load { var obj = new
    TTestPaperProcessor(‘olThePaper’, ‘Problem’, ‘Desc’, ‘Choices’,
    ‘divLeft’, ‘divRight’); $.click { try { obj.Prev.text + ‘ of ‘ +
    obj.getPageCount { alert; } }); $.click { try { obj.Next.text + ‘ of ‘ +
    obj.getPageCount { alert; } }); //USAGE:
    function TimeUp.submit.countdown({
    until: ‘+90m’, compact: true, format: ‘HMS’, description: ”, onExpiry:
    TimeUp }卡塔尔国; $.text + ‘ of ‘ + obj.getPageCount;
    嘿嘿,其实那是多少个大家学园一位博士生导师老师的花色的大器晚成局地~~托给本身做了。
    测验代码打包

发表评论

电子邮件地址不会被公开。 必填项已用*标注