퀴즈이펙트 7번 보충 설명!

자바스크립트 퀴즈 이펙트(일곱 번째) 만들기_보충

저번에 이어서 스크립트를 마저 진행해보겠습니다.

 

스크립트_보기 체크, 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
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 

첫 번째 함수인 answerSelect2 함수는 CBT(Computer-Based Testing) 시험에서 학생이 보기를 선택했을 때 실행되는 함수입니다.

 

먼저 elem 매개변수로 전달된 값에서 answer 변수를 선언하여 선택한 보기 값을 가져옵니다. 그리고 answerNum 변수를 선언하여 보기 번호를 분리합니다. 이 때 answer.split("_")를 사용하여 보기 번호를 얻고, 배열 형태로 저장합니다.

 

다음으로, select 변수를 사용하여 문제를 전체적으로 감싸는 .cbt__omr .omr 클래스를 선택하고, label 변수를 사용하여 선택한 문제의 보기를 선택합니다. 이때 querySelectorAll 메서드를 사용하여 해당 요소들을 모두 선택합니다. 그리고 label[answerNum[1]-1].checked = true;를 사용하여 선택한 보기를 체크합니다.

 

마지막으로, answerInputs 변수를 사용하여 모든 문제에서 선택한 보기를 가져옵니다. 그리고 cbtRest 변수를 사용하여 남은 문제 수를 계산하여 출력합니다.

 

answerSelect 

두 번째 함수인 answerSelect 함수는 CBT 시험에서 학생이 문제를 선택했을 때 실행되는 함수입니다. 이 함수는 answerSelect2 함수와 비슷한 방식으로 작동합니다. 다만, .cbt__omr .omr 클래스 대신 .cbt__quiz .cbt 클래스를 사용하여 문제를 선택하고 보기를 선택합니다. 그리고 answerInputs 변수를 사용하여 모든 문제에서 선택한 보기를 가져옵니다. 그리고 cbtRest 변수를 사용하여 남은 문제 수를 계산하여 출력합니다.

 

그리고 문제 시작화면에 모달창을 띄워주기 위해 HTML 구조를 손봐줄게용 ㅎㅎ

<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_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="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>

시작했을 때 년도별로 시험을 고르고, 시작버튼을 누르면 시험을 풀 수 있게 스크립트를 짜주겠습니다.

 

스크립트_모달창

const cbtStart = document.querySelector(".cbt__start");
const cbtMinimal = document.querySelector(".minimal");

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

cbtStart라는 변수와, cbtMinimal이라는 변수를 만들어주겠습니다. 그리고 cbtMinimal을 클릭했을 때 함수를 실행시켜주기 위해 addEventListener메서드를 활용해주었습니다. 그래서 클릭했을 때 cbtStart를 숨겨줄 거기 때문에 style.display = "none"; 처리를 해줍니다.

 

스크립트_문제 해설 없애기

const quizDesc = document.querySelectorAll(".cbt__question__desc");
            
quizDesc.forEach(el => {
    if(el.innerHTML == "undefined"){
        el.style.display = "none";
    }
});

.cbt__question__desc에 대한 선택자를 만들어줍니다. 이때, desc는 여러 개이기 때문에 All을 써줍니다.

 

그리고 forEach()를 사용해 el.innerHTML = "undefined"일 때, el을 숨겨줍니다.

 

 

코드보기