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

CBT형식의 시험지 만들기

추가된 HTML

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

추가된 HTML알아보기

• 시험 문제를 다 풀고 제출하기 버튼을 눌렀을 때 사용자의 점수를 나타내줄 div박스를 하나 추가하였습니다.
• 내용추가 1번에서 만들었던 select 박스에 onchange="changeSelet(this)"를 추가하여 select박스의 내용이 변할 때 함수를 추가하였습니다.

추가된 javascript

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("시험이 끝났습니다.")
};

추가된 javascript 알아보기

• 시험의 점수를 측정하기 위한 great를 전역 변수로 하나 만들어 주었습니다.
• startQuiz함수에 시간을 설정하는 questionTime 함수와
• 사용자가 입력하는 이름을 nameInput.value를 통해 Input의 value값을 가져와 수험자명 칸에 넣어주었습니다.
• 정답을 확인하는 answerQuiz함수에 Math.round((great/questionAll.length) * 100)를 통해 받아오는 점수의 값을 변수 score에 저장했습니다.
• 점수가 들어가는 칸의 선택자로 지정한 cbtResult에 score를 출력합니다.
• cbtSubmit(제출하기 버튼)을 보이지 않게하고 result가 나오게 합니다.

 

• changeSelet함수
• selectValue에 e(this)의 value값을 저장합니다.
• selectText에 e의 text(본문)을 저장합니다.
• 처음 모달창과 시험지 헤더부분에 시험 유형(text)을 넣어줍니다.

 

• reduceTime함수
• setInterval함수는 시간의 흐름에 따라 반복적으로 실행하므로 questionTimeRemain(1000)에 - -연산을 넣어줍니다.
• questionTimeRemain(남은 시간)이 0이 되면 endQuiz함수를 실행합니다.
• cbtTime(시간을 적는 칸)에 displayTime함수를 출력합니다.

 

• displayTime함수
• questionTimeRemain의 값이 0보다 작거나 같으면 "0분 00초"의 문자열을 반환합니다.
• 아닐 경우
• minutes 변수에 questionTimeRemain을 60으로 나눈 값을 저장합니다.
• seconds 변수에 questionTimeRemain을 60으로 나눈 나머지 값을 저장합니다.
• seconds의 값이 10보다 작다면 minute + "분" + "0" + seconds + "초"를 반환합니다.
• seconds의 값이 10보다 크다면 minute + "분" + seconds + "초"를 반환합니다

 

• endQuiz함수
• alert 창에 "시험이 끝났습니다." 메시지를 띄웁니다.

 

 

 

 

이상으로 CBT유형의 퀴즈페이지를 만들어보았습니다 !