QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
자바스크립트 퀴즈(Quiz) 사이트 만들기
이번에 만들어 본 퀴즈 사이트는 CBT 유형입니다.
전에 올린 퀴즈 사이트(7)에서 조금 보충한 내용들을 정리해보겠습니다.
시작하기 버튼을 눌러보세요!
퀴즈 사이트 추가 코드
<div class="cbt__start">
<div class="cbt__modal1">
<h2>💛기능사 시험 화이팅💛</h2>
<div class="cbt__choice">
<select name="cbtTime" id="cbtTime">
<option value="gineungsaJC2005_02">정보처리기능사 2005년 2회</option>
<option value="gineungsaJC2005_04">정보처리기능사 2005년 4회</option>
<option value="gineungsaJC2005_05">정보처리기능사 2005년 5회</option>
<option value="gineungsaJC2006_01">정보처리기능사 2006년 1회</option>
<option value="gineungsaJC2006_02">정보처리기능사 2006년 2회</option>
<option value="gineungsaJC2006_03">정보처리기능사 2006년 3회</option>
<option value="gineungsaJC2006_05">정보처리기능사 2006년 5회</option>
<option value="gineungsaJC2007_01">정보처리기능사 2007년 1회</option>
<option value="gineungsaJC2007_02">정보처리기능사 2007년 2회</option>
<option value="gineungsaJC2007_05">정보처리기능사 2007년 5회</option>
<option value="gineungsaJC2008_01">정보처리기능사 2008년 1회</option>
<option value="gineungsaJC2008_02">정보처리기능사 2008년 2회</option>
<option value="gineungsaJC2008_04">정보처리기능사 2008년 4회</option>
<option value="gineungsaJC2008_05">정보처리기능사 2008년 5회</option>
<option value="gineungsaJC2009_01">정보처리기능사 2009년 1회</option>
<option value="gineungsaJC2009_05">정보처리기능사 2009년 5회</option>
<option value="gineungsaJC2010_02">정보처리기능사 2010년 2회</option>
<option value="gineungsaJC2010_05">정보처리기능사 2010년 5회</option>
<option value="gineungsaJC2011_01">정보처리기능사 2011년 1회</option>
<option value="gineungsaJC2011_02">정보처리기능사 2011년 2회</option>
<option value="gineungsaJC2011_04">정보처리기능사 2011년 4회</option>
<option value="gineungsaJC2011_05">정보처리기능사 2011년 5회</option>
</select>
<select name="cbtTime" id="cbtTime">
<option value="gineungsaWD2009_05">웹디자인기능사 2009년 5회</option>
<option value="gineungsaWD2010_01">웹디자인기능사 2010년 1회</option>
<option value="gineungsaWD2010_02">웹디자인기능사 2010년 2회</option>
<option value="gineungsaWD2010_04">웹디자인기능사 2010년 4회</option>
<option value="gineungsaWD2010_05">웹디자인기능사 2010년 5회</option>
<option value="gineungsaWD2011_01">웹디자인기능사 2011년 1회</option>
<option value="gineungsaWD2011_02">웹디자인기능사 2011년 2회</option>
<option value="gineungsaWD2011_04">웹디자인기능사 2011년 4회</option>
<option value="gineungsaWD2011_05">웹디자인기능사 2011년 5회</option>
<option value="gineungsaWD2012_02">웹디자인기능사 2012년 2회</option>
<option value="gineungsaWD2012_04">웹디자인기능사 2012년 4회</option>
<option value="gineungsaWD2012_05">웹디자인기능사 2012년 5회</option>
<option value="gineungsaWD2013_02">웹디자인기능사 2013년 2회</option>
<option value="gineungsaWD2013_04">웹디자인기능사 2013년 4회</option>
<option value="gineungsaWD2013_05">웹디자인기능사 2013년 5회</option>
<option value="gineungsaWD2014_01">웹디자인기능사 2014년 1회</option>
<option value="gineungsaWD2014_04">웹디자인기능사 2014년 4회</option>
<option value="gineungsaWD2014_05">웹디자인기능사 2014년 5회</option>
<option value="gineungsaWD2015_01">웹디자인기능사 2015년 1회</option>
<option value="gineungsaWD2015_03">웹디자인기능사 2015년 3회</option>
<option value="gineungsaWD2015_04">웹디자인기능사 2015년 4회</option>
<option value="gineungsaWD2015_05">웹디자인기능사 2015년 5회</option>
<option value="gineungsaWD2016_01">웹디자인기능사 2016년 1회</option>
<option value="gineungsaWD2016_04">웹디자인기능사 2016년 4회</option>
</select>
</div>
<button class="minimal">시작하기</button>
</div>
</div>
문제를 풀기 전에 모달창을 만들어 문제 유형과 회차를 선택할 수 있게 만들었습니다.
시작 버튼을 눌러야 시험을 풀 수 있습니다.
script 추가 코드
//선택자
const cbtRest = document.querySelector(".cbt__rest");
const cbtLength = document.querySelector(".cbt__length");
const cbtStart = document.querySelector(".cbt__start");
const cbtMinimal = document.querySelector(".minimal");
새로 만들어준 선택자 입니다.
//시작 버튼 누르면 모달 창 사라짐
cbtMinimal.addEventListener("click", () => {
cbtStart.style.display = "none";
});
cbtStart" 요소의 "display" 스타일 속성을 "none"으로 설정하여 화면에서 해당 요소를 숨기는 역할을 합니다.
즉, "cbtMinimal" 요소를 클릭하면 "cbtStart" 요소가 사라지는 모달 창이 닫히는 효과를 주는 코드입니다.
//undefined로 나오는 해설 숨기기
const quizDesc = document.querySelectorAll(".cbt__question__desc");
quizDesc.forEach(el => {
if(el.innerHTML == "undefined"){
el.style.display = "none";
}
});
만약 해당 요소의 내용이 "undefined"라면, 해당 요소의 스타일(display)을 "none"으로 설정합니다.
cbt__question__desc 클래스를 가진 요소 중에서 내용이 "undefined"인 요소들을 모두 숨기는 역할을 합니다. 이것은 화면에 보이지 않는 이상한 텍스트가 표시되는 것을 방지하기 위한 것입니다.
//보기 체크1 (보기 체크했을 때 omr 체크)
const answerSelect2 = (elem) => {
const answer = elem.value;
const answerNum = answer.split("_");
const select = document.querySelectorAll(".cbt__omr .omr"); //전체 문항 수 100개
const label = select[answerNum[0]].querySelectorAll("input"); //보기 4개
label[answerNum[1]-1].checked = true;
const answerInputs = document.querySelectorAll(".cbt__selects input:checked");
cbtRest.innerHTML = questionLength - answerInputs.length;
}
//보기 체크2 (omr 체크했을 때 보기 체크)
const answerSelect = (elem) => {
const answer = elem.value;
const answerNum = answer.split("_");
const select = document.querySelectorAll(".cbt__quiz .cbt"); //전체 문항 수 100개
const label = select[answerNum[0]].querySelectorAll("input"); //보기 4개
label[answerNum[1]-1].checked = true;
const answerInputs = document.querySelectorAll(".cbt__selects input:checked");
cbtRest.innerHTML = questionLength - answerInputs.length;
}
answerSelect2 함수는 보기를 선택하면 해당 보기와 대응되는 OMR 칸에 체크를 해줍니다.
또한, 선택한 보기 수를 계산하여 남은 문항 수를 표시합니다.
answerSelect 함수는 OMR 칸을 선택하면 해당 OMR 칸과 대응되는 보기에 체크를 해줍니다. 또한, 선택한 보기 수를 계산하여 남은 문항 수를 표시합니다.
보기와 OMR 칸을 연동하여 응시자가 보기나 OMR 칸을 선택하면 자동으로 다른 쪽도 선택되도록 하는 기능을 구현하고 있습니다. 이를 통해 응시자가 보기와 OMR 칸을 일일이 확인하며 선택하는 시간과 노력을 줄일 수 있습니다.
반응형
