jQuery_jqueryをベースとした試験用紙自動配置システムの実装コード

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

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

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

选择题：说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。




1.你认为怎样的老师是好老师？



和学生平等相处，能全面满足学生各种需要
所在教学班的成绩优于其他平行班
严格管理学生、所带的班级班风良好
父母般地关心学生的生活和情绪状态







2.一位有15年教龄的英语教师，教了多年高三，可谓学校的核心骨干。一次接受邀请到外校介绍教学经验，台下有老师发表了观点并问到几个英语教法发面的问题，一下子把她给卡住了。这是因为



她最近工作太累，注意力不够集中。
提问老师的观点和她的有很大不同。
由于长时间在教学一线拼搏，她对教学理论问题的关注度不高。
对学科教学的归纳和思考少，一时加工不过来。







3.哪张图片最好看？



这一张好看。
这一张好看。
这一张好看。
这一张好看。
不知道。





填空题和选择题：一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。




4.床前明月光，






5. 良い先​​生はどんな先生だと思いますか？



label>
So
ヤン
parent ;
クラスのグレード
クラスの成績クラスの成績
strict クラスの結果 クラスの結果
ああ




ol>

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

具体的な手順:

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


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

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

PrevPage

NextPage

Loading the test...

left




right

选择题：说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。




1你认为怎样的老师是好老师？




和学生平等相处，能全面满足学生各种需要


所在教学班的成绩优于其他平行班


严格管理学生/所带的班级班风良好


父母般地关心学生的生活和情绪状态








2你认为怎样的老师是好老师？




和学生平jlsdjklsdf生各种需要


所


严格好


父母关心学生的生活和情绪状态








3你认为怎样的老师是好老师？




和学生平等相处，能全面满足学生各种需要


所在教学班的成绩优于其他平行班


严格管理学生/所带的班级班风良好


父母般地关心学生的生活和情绪状态








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


生徒同士が平等に仲良くなれる 生徒同士も十分に満足できるし、生徒同士も平等に仲良くなれる。 生徒同士も十分に満足できる。学生と学生が対等に仲良くやっていくというニーズを十分に満たすことができます。
;
指導クラスの結果は他の並行クラスよりも優れています

生徒を厳格に管理し、適切な授業スタイルで授業を指導します
;label>
親のように生徒の生活と精神状態を気遣う
;/div>



これも多肢選択式の質問であり、説明文が多く含まれています。字幕多め。字幕多め。字幕多め。字幕多め。




5 良い先生はどんな先生だと思いますか?


10 学生は平等に仲良くなり、さまざまなニーズに十分に対応できます

; 10 の指導クラスすべての結果は、他の並行クラスの結果よりも優れています

Yan 10jhjhjhjhkljlkjjkljjkjjkllkjlkjljkjljlkj グリッド テキスト


parent 10生徒の生活と感情状態に細心の注意を払う


;

1. 5 良い先生はどんな先生だと思いますか?


学生は平等に仲良くなり、さまざまなニーズに十分に対応できます

指導クラスの結果は他の並行クラスよりも優れています

ヤン jhjhjhjhkljlkjjkljjkjjkllkjlkjljkjljlkjlattice tubetext

🎜> 親のように生徒の生活や精神状態に配慮します

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 // 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());
});

嘿嘿，其实这是一个俺们学校一位博导老师的项目的一部分～～托给我做了。
测试代码打包http://xiazai.jb51.net/201101/yuanma/TestPaperProcessor.rar