정보처리기능사 문제집 만들기! - omr 형식 보충

퀴즈만들기 0mr형식 체크 부분 연동하기

오늘은 지난 포스팅을 보충 하는 글을 써보도록 하겠습니다.

먼저 추가된 HTML입니다. 

<select name="cbtTime" id="cbtTime">
    <option value="gineungsaJC2005_02">정보처리기능사 2005년 2회</option>
    <option value="gineungsaJC2005_05">정보처리기능사 2005년 4회</option>
    <option value="gineungsaJC2005_05">정보처리기능사 2005년 5회</option>
    <option value="gineungsaJC2006_01">정보처리기능사 2006년 1회</option>
    <option value="gineungsaJC2006_03">정보처리기능사 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="gineungsaWD2015_02">웹디자인기능사 2010년 1회</option>
    <option value="gineungsaWD2015_02">웹디자인기능사 2010년 2회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2010년 4회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2010년 5회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2011년 1회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2011년 2회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2011년 4회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2011년 5회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2012년 2회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2012년 4회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2012년 5회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2013년 2회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2013년 4회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2013년 5회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2014년 1회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2014년 4회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2014년 5회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2015년 1회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2015년 3회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2015년 4회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2015년 5회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2016년 1회</option>
    <option value="gineungsaWD2015_04">웹디자인기능사 2016년 4회</option>
</select>
</div>

<div data-lit-hue="20" data-lit-count="100" class="lit-container">
    <button class="minimal">Start!</button>
  </div>

json 파일과 모달창 추가

여러개의 json 파일을 불러 올 수 있도록 작성해주었고 모달창을 추가했습니다.

CSS 부분 역시 추가해 주었고, 버튼에는 이펙트 효과를 주기 위해 버블 이펙트를 적용했습니다.

// 보기 체크
const answerSelect2 = (elem) => {
    const answer = elem.value;
    const answerNum = answer.split("_");

    const select = document.querySelectorAll(".cbt__omr .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
const answerSelect = (elem) => {
    const answer = elem.value;
    const answerNum = answer.split("_");

    const select = document.querySelectorAll(".cbt__quiz .cbt");        //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;
}

Javascript 추가부분

보기 (객관식 문제)체크 연동을 위한 부분입니다.

보기 체크 1번의 경우 해당 답안을 선택한 것으로 처리하고, 남은 문항 수를 계산하여 화면에 표시하는 역할을 합니다.

 

Const answerSelect = (elem) => 함수는 elem이라는 매개변수를 받아오고 수험자가 선택한 객관식(라디오 버튼)을 의미합니다.

 

elem.value를 통해  수험자가 선택한 답안의 값을 가져와 answer라는 변수에 할당해줍니다.

 

answerNum의 변수는 answer값에서 _ 언더스코어를 기준으로 문자열을 나누어 생성됩니다. answerNu[0]은 문항 번호를 answernum[1]은 선택한 답안의 보기 번호를 나타내게 됩니다. 

 

const select = document.querySelectorAll(".cbt__quiz .cbt"); 코드는 CBT 퀴즈에서 문항을 나타내는 것을 선택하게 됩니다! 

"cbt__quiz"와 "cbt”이며 전체 문항 수를 의미하게 됩니다.

 

label[answerNum[1]-1].checked = true; 코드는 선택한 보기(answerNum[1] 값에 해당하는 input 엘리먼트)를 선택한 것으로 처리합니다. 이때 -1을 하는 이유는 answerNum 배열의 인덱스가 0부터 시작하기 때문입니다.

 

그리고 이전에 계산된 questionLength 값에서 현재 선택된 답안 수를 빼서 남은 문항 수를 계산합니다. 이 값은 cbtRest라는 변수에 할당되고, 이 값은 화면에 표시됩니다.