CBT 보충 설명!

7번째 유형 보충설명

 

저번시간과 더불어 부족했던 부분들을 보충해서 퀴즈유형을 만들어 보았습니다.

 

 

HTML

<div class="cbt__aside">
                <div class="cbt__info">
                    <div>
                        <button class="cbt__submit">제출하기</button>
                        <span class="cbt__time">59분 10초</span>
                    </div>
                    <div>
                        <div class="cbt__title">수험자 : <em>ooo</em></div>
                        <div class="cbt__score">
                            <span>전체 문제수 : <em class="cbt__length">23</em>문항</span>
                            <span>남은 문제수 : <em class="cbt__rest">59</em>문항</span>
                    </div>

<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_04">정보처리기능사 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_04">웹디자인기능사 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_04">웹디자인기능사 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 data-lit-hue='180' data-lit-count='100' class='lit-container'>
                            <button class='minimal'>시작하기</button>
                        </div>

aside와 modal 1 에 필요한 항목들을 만들어 줍니다.

 

 

JAVASCRIT

 const cbtSubmit = document.querySelector(".cbt__submit");
        const cbtLength = document.querySelector(".cbt__length");
        const cbtRest = document.querySelector(".cbt__rest");

선택자에 실행시키고 싶은 부분을 선택자로 표시해 줍니다.

 

//보기 체크
        const answerSelect2 = (el) => {
            const answer = el.value; //value="${number}_1"
            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 = (el) => {
            const answer = el.value; //value="${number}_1"
            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;
        }
        cbtSubmit.addEventListener("click", answerQuiz);
        dataQuestion();
        //버블 버튼
        const bubbleBtn = () => {
            const clip = (v, min, max = Infinity) => {
                if (v < min) return min;
                else if (v > max) return max;
                else return v;
            };
            // generated random value from given range
            const randRange = (min, max) => Math.random() * max + min;
            // create bubble on x and y position inside target with given hue theme
            function bubble(x, y, rect, hue, target) {
                // 변수 설정하기
                const size = randRange(20, rect.width / 5);
                const circleHue = hue + randRange(-20, 20);
                const animDuration = randRange(clip(size ** 2/1000, 1), 6)
                const zIndex = Math.random() < 0.1 ? 2 : -1;
                // 원 만들기
                const circle = document.createElement("span");
                circle.className = "lit";
                circle.style.left = x + "px";
                circle.style.top = y + "px";
                circle.style.width = size + "px";
                circle.style.height = size + "px";
                circle.style.background = `hsl(${circleHue}deg, 100%, 60%)`;
                circle.style.zIndex = zIndex
                circle.style.animationDuration = animDuration + "s";
                target.appendChild(circle);
            }
            document.querySelectorAll("[data-lit-hue]").forEach((target) => {
                const rect = target.getBoundingClientRect();
                const hue = Number(target.getAttribute("data-lit-hue"));
                const count = Number(target.getAttribute("data-lit-count") || 50);
                for (let i = 0; i < count; i++) {
                    const x = randRange(0, rect.width);
                    const y = randRange(0, rect.height);
                    bubble(x, y, rect, hue, target);
                }
            });
        }
        bubbleBtn();

보기 체크 

 

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

 

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

 

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

 

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

 

보기체크 2

 

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