据他们说提供的试卷题目生成风流倜傥份多页的卷子,客商能进行翻页、具有答题时限,呈现给客商的试卷中难点须求占用尽量少的长空(比如选取题中把两条很短的选项由两行统大器晚成到意气风发行卡塔 尔(英语:State of Qatar)、同豆蔻梢头道题目不要跨页面展现以方便答题者,助理馆员能够转移试卷的体制(字体、颜色、行距、页面边距,像字管理软件相仿……卡塔 尔(阿拉伯语:قطر‎,题目之间能够插入一些表达性的文字。题目提拔干部、接收题的选项、表达文字能够包涵多媒体音讯。选拔题选项数据不限、单选多选不限。翻页要有可订制的卡通片效果
提供的试卷样本相仿如下: 复制代码
代码如下:

  1. 1.您以为啥的教师是好元帅?
  2. 2.一人有15年教龄的立陶宛(Lithuania卡塔尔国语老师,教了连年高三,可谓学园的中坚基本。三回选用约请到外校介绍教学经验,台下有先生公布了见识并问到多少个俄语教法发面的标题,一下子把他给卡住了。那是因为
  3. 3.哪张图片最难堪?
  4. 4.床前光明的月光,
  5. 5.你感到哪些的教员是好先生?

思路
面临这种须求该如何做呢?使用JavaScript了,看来。后来调整用jQuery,Aptana作IDE(即使jQuery帮助库在Windows上死活装不上来,换了个OS就好了,奇怪卡塔尔,格式么就用CSS了。
具体步骤: 导入试卷标题HTML
对具备选择题举行制版,把蓬蓬勃勃行划分为三个地点,使接受尽量适应三个岗位、五个岗位或三个岗位(约等于单排四项、朝气蓬勃行两项大概生龙活虎行生机勃勃项的职能)对持有标题实行分页
思路照旧清楚的,不过出于浏览器众多,依旧比较麻烦的,而且本身是新手,没接触过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. * @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; // }, /**home88一必发,
    * @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 提姆eUp.submit.countdown({
    until: ‘+90m’, compact: true, format: ‘HMS’, description: ”, onExpiry:
    TimeUp }); $.text + ‘ of ‘ + obj.getPageCount;
    嘿嘿,其实那是三个我们学园一个人博士生导师老师的品类的一片段~~托给作者做了。
    测验代码打包

相关文章