퀴즈화면 만들기7 내용추가

CBT형식의 시험지 만들기

추가된 HTML

<div class="cbt__start">
    <div class="cbt__modal1">
        <h2>시험 유형 선택하기</h2>
        <div class="cbt__choice">
            <select class="sel1" 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 class="sel2" 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 data-lit-hue="20" data-lit-count="100" class="lit-container">
            <button class="minimal">시작하기</button>
        </div>
    </div>
</div>

HTML 추가된 내용

• 모달창을 추가하여 여러개의 json파일 중 원하는 회차를 선택할 수 있도록 만들었습니다.

추가된 CSS

.cbt__start {
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100vh;
     z-index: 10000;
     background-color: rgba(255, 255, 255, 0);
     backdrop-filter: blur(10px);
     display: flex;
     align-items: center;
     justify-content: center;
}

.cbt__start > div {
     width: 50%;
     height: 50vh;
     background-color: #fff;
     border: 8px solid #b5b5b5;
     border-radius: 10px;
     position: relative;
     text-align: center;
}

.cbt__modal1 .sel1 {
     position: absolute;
     left: 30%;
     top: 10%;
     text-align: center;
     font-size: 18px;
     width: 270px;
     height: 60px;
     border: 4px solid #a8cbbe;
}

.cbt__modal1 .sel2 {
     position: absolute;
     left: 30%;
     top: 25%;
     text-align: center;
     font-size: 18px;
     width: 270px;
     height: 60px;
     border: 4px solid #a8bfcb;
}

.cbt__modal1 button {
     width: 120px;
     height: 50px;
     position: absolute;
     top: 85%;
     left: 40%;
}

CSS 추가된 내용

• 모달창에 대한 속성과 모달창 안에 있는 select박스, 시작하기 button에 대한 속성을 새로 추가하였습니다.
• 모달창에 backdrop-filter: blur효과를 주어 뒷배경이 흐릿하게 보이도록 설정했습니다.

추가된 Javascript

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");
    // cbt__select에서 체크된 input박스를 선택하는 방법
    cbtRest.innerHTML = questionLength - answerInputs.length;
};

const answerSelect = (elem) => {
    const answer = elem.value;
    const answerNum = answer.split("_");

    const cbt = document.querySelectorAll(".cbt__quiz .cbt");     // 전체 100문제
    const label = cbt[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 추가된 내용

• answerSelect2 함수
• 각각의 input을 눌렀을 때, onclick효과로 주었던 함수에 대한 내용입니다.
• answer변수에 elem(this)의 value값을 저장합니다.
• answerNum변수에 answer의 value값을 "_" 구분자로 split하여 저장합니다.
• select변수에 omr을 선택자로 저장합니다.
• label변수에 answerNum[0] (문제 번호)의 input박스 4개를 저장합니다.
• label의 answerNum[1] (체크된 input번호) -1 (배열의 순서 형식으로 바꾸기) 를 체크합니다.