jQuery_jquery 기반 자동 시험지 레이아웃 시스템 구현 코드-JS 튜토리얼-php.cn

/**
*
* @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));

mPage를 반환합니다.
},

/**
*
* @param {Number} 페이지 번호
* @return {jQuery}
*/
_GetPage: function(PageNumber) {
if (PageNumber < 1 || PageNumber > this.FPageCount) {
throw new Error('잘못된 페이지 번호: ' PageNumber '.');
}
return $('#___page_' 페이지 번호);
},

/**
*
*/
_DivideIntoPages: function() {
var mProblems = $('.' this.FProblemClass ', .' this.FDescClass) ;
var mProblemsCount = mProblems.length;
var mCurrPage = this._CreateNewPage();
//var mPageHeight = mCurrPage.attr('offsetHeight'); chrome: 때때로 0. safari: 항상 0, $(window).ready()에 넣은 경우.
var mPageHeight = mCurrPage.outerHeight(true); //위의 코드와 동일합니다. 수정: $(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();
},
/**
* 1부터 시작하여 왼쪽의 현재 페이지를 가져옵니다.
* @return {Number} 현재 페이지입니다.
*/
getCurrPage: function() {
if (this.FPageCount == 0) {
throw new Error('페이지가 없습니다. 아직 생성되지 않았습니다.');
}
return this.FCurrPage;
},
/**
* 왼쪽의 특정 페이지로 이동합니다.
* @param {Number} 값 페이지 번호입니다.
*/
setCurrPage: function(Value) {
if (Value < 1 || Value > this.FPageCount) {
throw new Error('해당 페이지가 없습니다: ' 값 '.');
}
this.FCurrPage =parseInt(Value / 2) * 2 1; // 홀수를 얻으려면.
$('#' 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 {번호}
*/
getPageCount: function() {
return this.FPageCount;
},
/**
*
*/
이전: function() {
this.setCurrPage(this.FCurrPage - 2);
},
/**
*
*/
다음: function() {
this.setCurrPage(this.FCurrPage 2);
}
};

//클라이언트 코드는 여기에 있습니다...
$(window).load(function() {
var obj = new TTestPaperProcessor('olThePaper', 'Problem', 'Desc', '선택', 'divLeft', 'divRight');
$('#divPrev').click(function() {
try {
obj.Prev();
$(' #divPageInfo').text(obj.getCurrPage() ' of ' obj.getPageCount());
}
catch (e) {
alert('해당 페이지가 없습니다!'); }
});
$('#divNext').click(function() {
try {
obj.Next();
$('#divPageInfo').text (obj.getCurrPage() ' of ' obj.getPageCount());
}
catch (e) {
alert('해당 페이지가 없습니다!')
}
}) ;
//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())
});

jQuery_jquery 기반 자동 시험지 레이아웃 시스템 구현 코드

관련 기사