jQuery test paper_jquery 기반 자동 조판 시스템-JS 튜토리얼-php.cn

요구사항
제공된 시험지 질문("데이터"만 포함된 깨끗한 HTML 웹페이지)을 기반으로 여러 페이지로 구성된 시험지를 생성합니다. 사용자는 페이지를 넘길 수 있으며 질문에 답하는 데 시간 제한이 있습니다. 사용자에게 표시되는 시험지는 공간을 최대한 적게 사용해야 합니다(예: 객관식 문제에서는 두 줄의 짧은 옵션 두 개를 한 줄로 병합). 페이지 전체에 동일한 질문을 표시하지 마십시오. 관리자는 시험지의 스타일(글꼴, 색상, 줄 간격, 페이지 여백, 워드 프로세싱 소프트웨어 등)을 변경할 수 있으며, 질문 사이에 일부 설명 텍스트를 삽입할 수 있습니다(예: 응답자에게 답변 지침 등). 질문 제목, 객관식 질문 옵션 및 설명 텍스트에는 멀티미디어 정보(텍스트, 그림, 목록, 표, 비디오 등)가 포함될 수 있습니다. 객관식 옵션의 수에는 제한이 없으며 단일 선택 또는 객관식 질문에도 제한이 없습니다. 페이지 넘김에는 사용자 정의 가능한 애니메이션 효과가 있어야 합니다

제공된 시험지 샘플은 다음과 유사합니다(입력):

코드 복사 코드는 다음과 같습니다.

생각
이러한 요구에 맞서 우리는 무엇을 해야 할까요? JavaScript도 사용하는 것 같습니다. 나중에는 jQuery와 Aptana를 IDE로 사용하기로 결정했고(Windows에서는 jQuery 지원 라이브러리를 설치할 수 없지만 OS를 바꾸면 괜찮을 텐데 이상하네요) 서식 지정에는 CSS를 사용하기로 했습니다.

구체적인 단계:

시험지 문제 HTML 가져오기
모든 객관식 문제 형식을 지정하고 행을 네 위치로 나누고 옵션을 한 위치, 두 위치에 맞추도록 노력합니다. , 또는 4개 위치(즉, 연속 4개 항목, 연속 2개 항목 또는 연속 1개 항목의 효과)
모든 질문 페이징
아이디어는 여전히 명확하지만 크기가 커서 브라우저가 많아서 아직은 꽤 귀찮고, jQuery를 접하기 전...

구현
페이지 파일(예제와 다르지만 형식은 동일)

코드 복사 코드는 다음과 같습니다.

No title...

Loading the test...

left

right

form>

스타일 파일(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; } 
테이블 { 테두리 접기: 접기; 테두리 간격: 0; } 
fieldset,img { 테두리: 0; } 
address,caption,cite,code,dfn,em,strong,th,var { 글꼴 무게: 일반; 글꼴 스타일: 일반; } 
ol,ul { 목록 스타일: 없음; } 
caption,th { 텍스트 정렬: 왼쪽; } 
h1,h2,h3,h4,h5,h6 { 글꼴 두께: 보통; 글꼴 크기: 100%; } 
q:이전,q:이후 { 내용:''; } 
abbr,acronym { 테두리: 0;} 

레이블 { 패딩: 0; 여백: 0; } 

/* 내 CSS */ 
.Choices { line-height: 150%; 여백: 5px 0; } 
.페이지 { 높이: 500px; 테두리: 단색 1px 회색; } 
#olThePaper, .Display { 패딩: 0; 너비: 500px; } 
/* 주의사항: .Display 및 #olThePaper의 너비는 동일해야 합니다. */ 
.Display { float: 왼쪽; } 

#divToolbar { 높이: 35px; } 
#divPrev, #divNext { float: 왼쪽; 너비: 100px; 높이: 30px; 테두리: 단색 1px 녹색; 배경색: #999999; } 
#divPageInfo { 부동: 왼쪽; 너비: 100px; 높이: 30px; } 
#divTimer { 부동 소수점: 왼쪽; 너비: 500px; 높이: 30px; } 


/*디버깅용... IE 이외의 경우에만 해당*/ 
/**label {개요: 점선 1px 빨간색; 배경색: 회색; }**/ 
/**div {개요: 점선 1px 파란색;}**/ 
 

下side是重点，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)); 

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