자바스크립트 퀴즈 사이트 만들기 OMR 유형 (3)

자바스크립트 퀴즈 사이트 만들기 OMR 유형 (3)

 

OMR유형 

추가된 부분을 정리해보려고 합니다.

 

타이머 넣기(+10초 미만부터 앞에 0 붙여주기)

이름 입력해주면 해당이름 뜨게 하기

점수 결과 표시하기

 

 

 

💜 퀴즈 7번째 OMR

코드 보기 / 완성 화면

 

 

타이머 넣기

let questionTime = "";
let questionTimeRemain = "3600";

-변수 선언

변수들의 초기값세팅

 

const startQuiz = () => {

    //시간 설정
    questionTime = setInterval(reduceTime, 1000);
}

-함수 선언

reduseTime 함수를 1초마다 반복해서 실행하는 

setlnterval() 메서드를 사용해 questionTime 변수에 할당

 

setlnterval() 메서드는 일정한 시간 간격으로 코드를 반복 실행하는 함수

첫번째 매개변수로 실행할 함수를, 두번째 매개변수로 반복 실행할 시간 간격을 받는다.

 

//시간 설정
const reduceTime = () => {
    questionTimeRemain--;

    if(questionTimeRemain == 0) endQuiz();

    cbtTime.innerText = displayTime();
}

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

        return minutes + "분" + seconds + "초";
        //초의 단위가 한자리 수가 되면 앞에 0을 붙여주기
    }
}

-시간 설정, 표시

reduceTime 함수는 questionTimeRemain 변수를 1초마다 감소

변수가 0이 되면 endQuiz 함수를 실행

cbtTime 요소의 내용을 displayTime 함수로부터 받환받은 문자열로 업데이트

 

displayTime함수는 questionTimeRemain 변수에서 분과 초를 추출해

해당 값을 문자열로 반환한 후 반환

9초부터 앞에 0 붙여주기

if(seconds < 10){
    seconds = "0" + seconds;
}

displayTime 함수안에 if문으로 초가 10보다 작을 때 

앞에 "0" +를 해서 09~초가 나오게 해줍니다.

 

시험 끝 알림

//시험이 끝났을 때
const endQuiz = () => {
    alert("시험 끝")
}

시험이 종료되었을때 시험끝이라는 알림창을 띄웁니다.

 

점수보기

<div class="cbt__score">
    <span>전체 문제수 : <em class="cbt__length">60</em>문항</span>
    <span>남은 문제수 : <em class="cbt__rest">60</em>문항</span><br>
    <span>점수 : <em class="cbt__end__score"></em></span>
</div>

-html에 점수가 들어갈 부분을 추가해줍니다.

전체 문제수와 남은 문제수 밑에 추가해줬습니다.

 

const cbtEndScore = document.querySelector(".cbt__end__score");

-선택자 추가

cbtEndScore 변수를 만들어줍니다.

let quizScore = 0;

quizScore의 초기값도 0으로 설정해둡니다.

 

//점수 표시
cbtEndScore.innerHTML = `${Math.ceil((quizScore / questionLength) * 100)}`

-점수표시

맞춘 문제의 점수를 전체 문제수로 나눈 뒤 100을 곱해 반올림한 값을 점수로 나타낸다.

 

Math.ceil 함수를 사용해 반올림

 

HTML요소의 innerHTML 속성에 할당하여 화면에 표시

하면!?

끝!