jQueryをベースにした自動組版システム test Paper

要件
提供されたテスト用紙の質問に基づいて複数ページのテスト用紙を生成します (これは、「データ」のみを含むクリーンな HTML Web ページです)。ユーザーはページをめくることができ、質問に答えるには制限時間があります。ユーザーに表示されるテスト用紙は、占有するスペースをできるだけ少なくする必要があります (たとえば、多肢選択問題では、2 行の 2 つの短い選択肢を 1 行に結合します)。テストを容易にするために、ページ全体に同じ質問を表示しないでください。解答者と管理者は試験用紙のスタイル (フォント、色、行間、ページの余白、ワープロソフトのように...) を変更でき、質問の間に説明テキストを挿入できます (解答者に次のことを知らせるなど)。回答方法など）。質問のタイトル、多肢選択式の質問オプション、および説明テキストには、マルチメディア情報 (テキスト、画像、リスト、表、ビデオなど) を含めることができます。多肢選択式の選択肢の数に制限はなく、単一選択式または多肢選択式の質問にも制限はありません。ページめくりにはカスタマイズ可能なアニメーション効果が必要です

提供されるテスト用紙のサンプルは次のようなものです (入力):

コードをコピーコードは次のとおりです:

思考
この要求に直面して私たちは何をすべきでしょうか？ JavaScriptも使用しているようです。その後、IDEとしてjQueryとAptanaを使用し（WindowsではjQueryサポートライブラリがインストールできないが、OSを変えれば大丈夫になるのが不思議）、整形にはCSSを使用することにした。

具体的な手順:

テスト用紙の質問 HTML をインポートします。
すべての多肢選択問題をフォーマットし、行を 4 つの位置に分割し、選択肢を 1 つの位置または 2 つの位置に収まるようにします。、または 4 つのポジション (つまり、連続する 4 つのアイテム、連続する 2 つのアイテム、または連続する 1 つのアイテムの効果)
すべての質問をページングする
アイデアはまだ明確ですが、大規模なためjQuery に触れる前は...

実装
ページファイル (例とは異なりますが、同じ形式です)

コードをコピーコードは次のとおりです:

No title...

Loading the test...

left

right

6どんな先生が良い先生だと思いますか？

すべて
>
ヤン

input type="radio" name="prob6" value="C" />parent

そしてクラスの結果クラスの結果クラスの結果

クラスの結果

strict クラスの結果クラスの結果

parent

フォーム>

スタイルファイル(CSS)

コードをコピー🎜>

コードは次のとおりです:

 
/* YahooUI CSS リセット */ 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset, input,textarea,p,blockquote,th,td {パディング: 0;マージン: 0; } 
table { border-collapse: 折りたたむ;境界線の間隔: 0; } 
フィールドセット,img { ボーダー: 0; } 
address,caption,cite,code,dfn,em,strong,th,var { font-weight:normal;フォントスタイル: 通常; } 
ol,ul {リストスタイル: なし; } 
caption,th { text-align: left; } 
h1,h2,h3,h4,h5,h6 { font-weight:normal;フォントサイズ: 100%; } 
q:前、q:後 {コンテンツ:''; } 
略語、頭字語 { border: 0;} 

label { パディング: 0;マージン: 0; } 

/* 私の CSS */ 
.Choices { line-height: 150%;マージン: 5px 0; } 
.Page { 高さ: 500px;境界線: 実線の 1px グレー。 } 
#olThePaper, .Display { パディング: 0;幅: 500ピクセル; } 
/* 注意: .Display と #olThePaper の幅は同じである必要があります。 */ 
.Display { float: left; } 

#divToolbar { 高さ: 35px; } 
#divPrev、#divNext { float: left;幅: 100ピクセル;高さ: 30ピクセル;境界線: 1 ピクセルの緑色の実線。背景色: #999999; } 
#divPageInfo { float: left;幅: 100ピクセル;高さ: 30ピクセル; } 
#divTimer { float: left;幅: 500ピクセル;高さ: 30ピクセル; } 


/*デバッグ用...おそらく非 IE のみ*/ 
/**label { アウトライン: 点線の 1px 赤;背景色: グレー; }**/ 
/**div {アウトライン: 1 ピクセルの青の破線;}**/ 
 

下が注目です，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()); 
}); 