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

제 공 된 시험지 문제(깨끗 한'데이터'만 있 는 HTML 페이지)에 따라 여러 페이지 의 시험지 가 생 성 됩 니 다.사용 자 는 페이지 를 넘 길 수 있 고 문제 풀이 시간 제한 이 있 습 니 다.사용자 에 게 보 여 주 는 시험지 의 문 제 는 가능 한 한 적은 공간 을 차지 해 야 합 니 다(예 를 들 어 선택 문제 에서 두 개의 짧 은 옵션 을 두 줄 에서 한 줄 로 합 치 는 것).같은 문 제 는 문 제 를 푸 는 사람 을 편리 하 게 하기 위해 페이지 를 넘 지 마 십시오.관리 자 는 시험지 의 스타일(글꼴,색상,행거,페이지 여백,글자 처리 소프트웨어 처럼...)을 바 꿀 수 있 습 니 다.문제 사이 에 설명 적 인 문 자 를 삽입 할 수 있 습 니 다(예 를 들 어 문 제 를 푸 는 사람 에 게 답 을 알려 주 는 주의사항 등).제목 요약,선택 문제 의 옵션,설명 문 자 는 멀티미디어 정보(문자,이미지,목록,표,동 영상 등...)를 포함 할 수 있 습 니 다.선택 문제 의 옵션 수 는 제한 이 없고,단일 선택 은 제한 이 없다.페이지 를 넘 기 려 면 주문 가능 한 애니메이션 효과 가 제공 하 는 시험지 모델 이 다음 과 같 아야 합 니 다(Input)

 
<ol id="olThePaper"> 
<div class="Desc">   ：    。    。    。    。    。    。    。    。    。    。    。    。    。    。</div> 
<div class="Problem" id="1"> 
<li>1.            ？</li> 
<div class="Choices"> 
<label><input type="radio" name="prob1" value="A" />       ，           </label> 
<label><input type="radio" name="prob1" value="B" />               </label> 
<label><input type="radio" name="prob1" value="C" />      、         </label> 
<label><input type="radio" name="prob1" value="D" />                </label> 
</div> 
</div> 
<div class="Problem" id="2"> 
<li>2.   15        ，      ，         。               ，                        ，         。    </li> 
<div class="Choices"> 
<label><input type="radio" name="prob2" value="A" />       ，       。</label> 
<label><input type="radio" name="prob2" value="B" />               。</label> 
<label><input type="radio" name="prob2" value="C" />            ，              。</label> 
<label><input type="radio" name="prob2" value="D" />            ，       。</label> 
</div> 
</div> 
<div class="Problem" id="3"> 
<li>3.       ？</li> 
<div class="Choices"> 
<label><input type="radio" name="prob3" value="A" />   <img src="img1.png" height="300px" width="400px" alt="img1"/>  。</label> 
<label><input type="radio" name="prob3" value="B" />   <img src="img2.png" height="300px" width="400px" alt="img2"/>  。</label> 
<label><input type="radio" name="prob3" value="C" />   <img src="img3.png" height="300px" width="400px" alt="img3"/>  。</label> 
<label><input type="radio" name="prob3" value="D" />   <img src="img4.png" height="300px" width="400px" alt="img4"/>  。</label> 
<label><input type="radio" name="prob3" value="E" />   。</label> 
</div> 
</div> 
<div class="Desc">       ：        。        。        。        。        。</div> 
<div class="Problem" id="4"> 
<li>4.     ，<input type="text" name="prob4" /></li> 
</div> 
<div class="Problem" id="5"> 
<li>5.            ？</li> 
<div class="Choices"> 
<label><input type="checkbox" name="prob6" value="D" /> </label> 
<label><input type="checkbox" name="prob6" value="A" /> </label> 
<label><input type="checkbox" name="prob6" value="B" /> </label> 
<label><input type="checkbox" name="prob6" value="C" /> </label> 
<label><input type="checkbox" name="prob6" value="E" />                     </label> 
<label><input type="checkbox" name="prob6" value="F" />             </label> 
<label><input type="checkbox" name="prob6" value="G" />                   </label> 
<label><input type="checkbox" name="prob6" value="H" /> </label> 
</div> 
</div> 
</ol> 

이런 수요 에 직면 하면 어떻게 해 야 합 니까?자 바스 크 립 트 를 사 용 했 군요.보아하니.나중에 jQuery,Aptana 를 IDE 로 사용 하기 로 결 정 했 습 니 다.구체 적 인 절차:시험지 제목 HTML 을 가 져 와 모든 선택 문 제 를 조판 하고 한 줄 을 네 개의 위치 로 나 누 어 옵션 이 한 위치,두 위치 또는 네 개의 위치(즉 한 줄 네 항목,한 줄 두 항목 또는 한 줄 한 항목 의 효과)에 적응 하도록 한다.모든 문제 에 대해 페이지 를 나 누 는 사고 가 뚜렷 하지만 브 라 우 저가 많 기 때문에 비교적 번거롭다.그리고 저 는 초보 입 니 다.jQuery 를 접 해 본 적 이 없습니다........................................................................테스트 코드 패키지