자바스크립트 퀴즈 이펙트 7 OMR(2)

자바스크립트 퀴즈 이펙트 7 OMR(2)

 

오늘은 바로 어제 올렸던

자바스크립트 퀴즈 이펙트의 7번째 OMR유형에 더 추가된 내용을 정리해보겠습니다!

 

 

💜 퀴즈 7번째 OMR

코드 보기 / 완성 화면

 

 

시험 시작 전 창 띄우기

<div class="cbt__start">
    <div class="cbt__modal">
        <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>
        <div>
            <button class="but">시작하기</button>
        </div>
    </div>
</div>

우선 시험 시작 전에 창을 띄워

문제 문항을 선택할 수 있게 만들어주고

 

버튼을 누르면 시험을 시작할 수 있게 만들어줍니다.

 

시작 버튼을 누르면 시험 시작

const cbtBtn = document.querySelector(".but");
const cbtStart = document.querySelector(".cbt__start");

선택자를 만들어주고

cbtBtn.addEventListener("click", () => {
    cbtStart.style.display="none";
});

이벤트 함수를 이용해 클릭했을 때 

시작 버튼이 사라지도록 해줍니다.

 

보기 체크 연동

//보기 체크
const answerSelect2 = (elem) => {
    // alert("클릭")
    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;
    // console.log(answerNum[0]);
    // console.log(answerNum[1]);
    // alert(answer)

    const answerInputs = document.querySelectorAll(".cbt__selects input:checked");
    cbtRest.innerHTML = questionLength - answerInputs.length;

}

//보기 체크2
const answerSelect = (elem) => {
    // alert("클릭2")
    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;
    // alert(answer)

    const answerInputs = document.querySelectorAll(".cbt__selects input:checked");
    cbtRest.innerHTML = questionLength - answerInputs.length;
}

cbtSubmit.addEventListener("click", answerQuiz);
dataQuestion();

cbtSubmit은 시험을 제출하는 버튼입니다.

버튼이 클릭되면 answerQuiz 함수가 실행됩니다.

 

dataQuestion 함수는 시험 문제를 로드하고, 화면에 출력하는 함수입니다.

 

answerSelect 함수와 answerSelect2 함수는 시험의

객관식 문제에서 선택한 답안을 처리하는 함수입니다.

함수 내부에서는 선택한 보기의 value값을 분석해,

정답 체크박스를 선택하고,

답안 제출 버튼을 클릭할 때까지 남은 문제 수를 계산합니다.

 

 

 

문제에 대한 해설

-해설이 있으면 출력

//문제에 대한 해설이 있으면 출력
if(item.hasOwnProperty("question_desc")){
    formattedQuestion.question_desc = item.question_desc;
}

-해설이 없으면 숨기기

// 설명 숨기기
const quizDesc = document.querySelectorAll(".cbt__desc");

if(quizDesc[number].innerText == "undefined"){
    quizDesc[number].classList.add("hide");
} else {
    quizDesc[number].classList.remove("hide");
}

문제에 해설이 없으면 undefined가 떠서

그걸 숨겨주기 위한 코드입니다.