자바스크립트 퀴즈 사이트 만들기 7-2

안녕하세요 ヾ(≧▽≦*)o 오늘은 자바스크립트 마우스 이펙트 일곱 번째 보충 설명을 총정리를 해보도록 하겠습니다.

이번에도 일곱번 째와 같이 정보처리기능사 60문제를 주제로 퀴즈 이펙트를 만들어 보도록 하겠습니다.

아직 완벽하게 완성하진 않았지만 열심히 한 걸 토대로 블로그를 작성해 보도록 하겠습니다 ~! ( •̀ ω •́ )✧

https://xoouxa58.tistory.com/61  : 저번 유형 바로가기

 

💛이번에 만든 유형은 반응형 , CBT 유형으로 OMR카드를 함께 만들어 주었습니다.

 

💛 What i made  

 

 

이번엔 모달창 버튼 누르면 닫히게 하는 기능, 각 문제에 대한 설명과 이미지 첨부가 필요 없을 때 안 보이게 처리해주기, 스크립트 보기와 omr을 동시에 체크해주기, 문제 미리보기를 방지하기 위해 블러처리 해주기, 문제 시작 버튼을 꾸며주기 기능을 추가해 작업해 주었습니다 😚

 

스크립트 보기와 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;  //하나씩 밀리기 때문에 -1을 해줘야 싱크가 맞음
            
            const anwserInputs = document.querySelectorAll(".cbt__selects input:checked");
            cbtRest.innerHTML = questionLength -  anwserInputs.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;  //하나씩 밀리기 때문에 -1을 해줘야 싱크가 맞음

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

🐣 answerSelect2

첫 번째 함수인 answerSelect2 함수는 CBT 시험에서 학생이 보기를 선택했을 때 그 보기가 활성화 되도록

만들어주는 함수입니다.

먼저 elem 매개변수로 전달 된 값에서 answer 변수를 선언해 선택한 보기의 값을 가져옵니다.

그 뒤 answerNum 변수를 선언해 보기 번호를 분리해 줍니다.

이때 answer.split("_")을 사용해 보기 번호를 얻고 배열 형태로 저장합니다.

다음으로 select 변수를 사용해 문제를 전체적으로 감싸는 .cbt__omr .omr 클래스를 선택하고 label 변수를 사용해 선택한 문제의 보기를

선택합니다.이 곳엔 60개의 문항수가 들어있습니다.

다음은  querySelectorAll 메서드를 사용해 해당 요소들을 모두 선택합니다. 이곳엔 문제의 보기 4개가 들어 있습니다.

그리고 label[answerNum[1]-1].checked = true; 를 사용해 선택한 보기를 체크합니다.

-1을 해주는 이유는 정답을 체크할 때 하나씩 밀리는 버그 현상을 고치기 위함입니다.

-1을 해줘야 싱크가 맞게 됩니다.

마지막으로, answerInputs 변수를 사용해 모든 문제에서 선택한 보기를 가져옵니다.

그리고 cbtRest 변수를 사용해 남은 문제 수를 계산해 출력합니다.

🐣 answerSelect

두 번째 함수은 answerSelect 함수는 CBT 시험에서 학생이 omr에 정답을 체크했을 때 실행되는 함수입니다.

이 함수는 answerSelect2 함수와 비슷한 방식으로 작동합니다. 단 .cbt__omr .omr 클래스 대신 .cbt__quiz .cbt

클래스를 사용해 문제를 선택하고 보기를 선택합니다. 그리고 answerInputs 변수를 사용해 모든 문제에서 선택한 보기를 가져옵니다.

그리고 cbtRest 변수를 사용해 남은 문제 수를 계산해 출력해줍니다.

answerSelect2와 같이 싱크를 맞춰주기 위해 -1작업을 꼭 해줘야 합니다.

 

문제 넣어주기

<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_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_04">웹디자인기능사 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_04">웹디자인기능사 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='60' data-lit-count='100' class='lit-container'>
                        <div class='minimal'>Start ! 🎉 </div>
                    </div>
                </div>

시작했을 때 년도별로 시험을 고를 수 있게 년도별로 json파일을 이용해 기능사 시험을 만들어 내가 선택한 날짜를 시험볼 수 있게 작업해 주고, 시작버튼을 누르면 시험이 시작되도록 작업해 주었습니다.

 

스크립트 문제와 해설 안 보이게 하기

const quizDesc = document.querySelectorAll(."cbt__question__desc");

            quozDesc.forEach(el => {
                if(el.innerHTML == "undifiended"){
                    el.style.display = "none";
                }
            })
        }

.cbt__desc에 대한 선택자를 만들어 줍니다.

이 때 설명은 어느 문제에나 들어가 있기 때문에 All 을 사용해 다중이라는 것을 표현해 줍니다.

 

아직 잘 모르는 속성

속성	설명
toString()	문자열을 반환합니다.
padStart()	현재 문자열의 시작을 다른 문자열로 채워 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작인 좌측부터 적용됩니다.
clearInterval	호출로 이전에 설정된 시간 제한 반복 작업을 취소합니다.
setInterval	호출 사이에 고정 된 시간이 지연되면 이를 반복적으로 호출을 실행합니다.
split()	문자열 객체를 지정한 구분자를 이용해 여러 개의 문자열로 나눕니다.

 

코드보기

https://github.com/leeyouna21/web2023/blob/master/javascript/quiz/quizEffect07.html

GitHub - leeyouna21/web2023: 수업시간에 배운 사이트입니다.

 

이번에 만드는 건 오타가 하나라도 있으면 페이지가 나오지 않기 때문에 오타에 특히 더더더더

신경을 써주셔야 합니다 !!

😍 오늘도 감사합니다.