정보처리기능사 문제집 만들기! - omr 형식 보충 2

기능 추가

마무리를 위한 기능 추가 입니다! 수험자 이름 입력과 정답 체크 기능입니다.

코드 분석을 해보겠습니다!

const nameInput = document.querySelector(".cbt__view input");
const cbtResult = document.querySelector(".cbt__result");

let great = 0;

const startQuiz = () => {
    cbtStart.classList.add("hide");

    
    questionTime = setInterval(reduceTime, 1000);

    
    let youName = nameInput.value;

    cbtName.innerHTML = youName;
}

const answerQuiz = () => {
	let score = Math.round((great/questionAll.length) * 100);
    cbtResult.innerHTML = `${score}점 입니다.`
    
    cbtSubmit.classList.add("hide");
    cbtResult.classList.remove("hide");
}

 const changeSelect = (e) => {
    let selectValue = e.value;
    let selectText = e.options[e.selectedIndex].text;

    cbtViewSubject.innerHTML = selectText;
    cbtHeader.innerHTML = selectText;

    dataQuestion(selectValue);
}

const reduceTime = () => {
    questionTimeRemain--;

    if(questionTimeRemain == 0) endQuiz();

    cbtTime.innerHTML = displayTime();
}

const displayTime = () => {
    if(questionTimeRemain <= 0){
        return "0분 00초";
    } else {
        let minutes = Math.floor(questionTimeRemain/60);
        let seconds = questionTimeRemain % 60;

        if(seconds < 10){
            return minutes + "분" + "0"+seconds+ "초"
        } else {
            return minutes + "분" + seconds + "초"
        }
    }
};

const endQuiz = () => {
    alert("시험이 끝났습니다.")
};

▶ const nameInput = document.querySelector(".cbt__view input");

 HTML에서 작성한 코드 중  "cbt__view"인 요소의 자식 요소 중 input(객관식)을  찾아서 nameInput 라는 이름의 상수에 넣어줍니다.

 

▶ const cbtResult = document.querySelector(".cbt__result");

마찬가지로 HTML에서 작성한 코드 중 "cbt__result"인 요소를 찾아서 cbtResult 이름의 상수에 넣어줍니다.

여기서 중요한 것은 현재 cbt__result라고 명명한 것을 HTML에 추가 시켜주어야 합니다.

<div class="cbt__result hide"></div>

 

▶ let great = 0;

변수 great을 선언하고 0으로 초기화합니다.

 

▶ const startQuiz = () => { ... }

startQuiz 함수를 정의합니다. 이 함수는 CBT를 시작할 때 실행됩니다.

cbtStart 클래스를 가진 요소를 숨기고, questionTime 변수에 1초마다 실행될 reduceTime 함수를 할당하며, youName 변수에 사용자의 이름을 할당합니다.

 

cbtStart에  classList에 hide라는 기능을 추가합니다.  그 후 CSS에 hide 기능을 적용해줍니다.

setInterval 함수를 사용하여 reduceTime이라는 함수를 1초마다 실행하도록 합니다. 시간이 경과하는 것을 표현할 수 있습니다.

nameInput이라는 입력 요소의 value 값을 youName 변수에 저장합니다. 사용자가 입력한 이름 즉, 값을 가져오는 과정입니다.

innerHTML로  화면에 사용자의 이름이 표시 해 줍니다.

 

▶ const answerQuiz = () => { ... }

answerQuiz 함수를 정의합니다. 이 함수는 CBT가 종료되면 실행됩니다.

great 변수를 기반으로 사용자의 점수를 계산하고, cbtResult 요소에 점수를 출력합니다.

cbtSubmit 클래스를 가진 요소를 숨기고, cbtResult 클래스를 가진 요소를 보이게 합니다.

 

great는 사용자가 맞춘 문제의 개수를 저장합니다. questionAll.legth는 전체 문제 수를 나타내며 단일 문제 아니라 전체이기 때문에 All을 사용하게 됩니다. (great/questionAll.length) 식은 사용자가 맞춘 문제 수와 전체 문제 수를 나눈 비율을 계산합니다.

Math.round() 함수는 소수점 이하를 반올림하여 정수로 만듭니다. 따라서 score 변수에는 사용자의 점수가 저장됩니다.

cbtResult.innerHTML은 결과 화면에 사용자의 점수를 출력하는 코드입니다. ${score}점 입니다.는 점수를 문자열 형태로 변환한 후, 템플릿 리터럴을 사용하여 출력합니다.

 

Math.round()

Math.round() 함수는 전달된 숫자를 가장 가까운 정수로 반올림합니다. 예를 들어, Math.round(2.5)는 3을 반환하고, Math.round(2.1)은 2를 반환합니다.

 

템플릿 리터럴

템플릿 리터럴은 백틱(backtick) 기호(`)로 감싸서 사용합니다. 템플릿 리터럴은 여러 줄에 걸쳐 문자열을 작성할 수 있으며, 내부에 변수나 표현식을 삽입하여 동적으로 문자열을 생성할 수 있습니다. 변수나 표현식은 ${} 형태로 작성합니다.

const name = "Alice";
const message = `Hello, ${name}!`;

console.log(message); // 출력 결과: "Hello, Alice!"

 

▶ const changeSelect = (e) => { ... }

changeSelect 사용자가 선택한 과목에 따라 퀴즈 데이터를 가져와서 화면에 표시합니다.

 

▶ const reduceTime = () => { ... }

reduceTime CBT 시간이 감소될 때마다 실행됩니다.

 

▶ questionTimeRemain 변수에서 1초를 빼고, 남은 시간을 화면에 출력합니다.

 

▶ const displayTime = () => { ... }

displayTime 는 남은 시간을 "분:초" 형식으로 변환하여 화면에 출력합니다.

먼저 if 문에서는 questionTimeRemain 변수가 0 이하일 경우 "0분 00초" 문자열을 반환하고 종료합니다. 이렇게 함으로써 시험 시간이 끝난 경우에도 정확한 시간을 표시할 수 있습니다.

 

else 블록에서는 Math.floor() 함수를 사용하여 questionTimeRemain 변수를 분 단위와 초 단위로 변환합니다. Math.floor() 함수는 전달된 숫자를 내림하여 정수 부분만 반환합니다.

 

그 다음에는 minutes와 seconds 변수에 분과 초를 저장합니다. 이어서 if 문에서는 seconds 변수가 10 미만인 경우 "0" 문자열을 앞에 붙여서 초를 두 자리로 만들어 줍니다. 마지막으로, return 문에서는 ${}를 사용하여 문자열을 합쳐서 반환합니다. 반환되는 문자열은 "분 초" 형식입니다.

 

▶ const endQuiz = () => { ... }

endQuiz CBT가 종료될 때 실행됩니다.

간단한 알림 메시지를 띄웁니다.

innerHTML 속성은 해당 요소의 내용을 변경하는 데 사용됩니다. 이 코드로  CBT 문제집이 실행되게 됩니다!