CBT퀴즈에서 배운것들 활용하기(점수, 시간에 00:00으로 만들기, 이름입력)

최종 완성된 모습

어제 완성된 코드에 3가지를 추가하라는 미션을 받았습니다.

1.문제를 맞추거나 틀렸으면 그것들을 표시해줄 것

2. 시간을 00:00으로 만들어 볼 것

3.input type="text"에 이름을 입력하면 "수험자"에 표시하기

 

1번 문제 : HTML코드+ JAVASCRIPT코드

<div class="cbt__info">
   <div class="cbt__scorebox">
       <em class="cbt__score">맞춘개수 : 0</em>
       <em class="cbt__wrong">틀린개수 : 0</em>
   </div>
</div>

코드설명

1. em태그인 .cbt__score는 문제를 맞추면 갯수를 표시해줄겁니다.

2. em태그인 .cbt__wrong은 문제를 틀렸다면 틀린 갯수를 표시해줄겁니다.

let wrong = 60;
let hap = 0;

if(numberAnswer == question.answer){
    console.log("정답");
    cbtselects[number].parentElement.classList.add("good");
    scoreBOx.innerText = "맞춘개수: " + (++hap);

    console.log("총길이:",hap);
    // 전체 문제수 : 60문항
} 
else {
    console.log("모야");
    cbtselects[number].parentElement.classList.add("bad");
    const label = cbtselects[number].querySelectorAll("label");
    // label[question.answer-1].classList.add("corrent");
    wrongBox.innerText = "틀린개수: " + (questionLength-hap);
}

코드설명

1. 문제를 맞췄으면 let hap의 갯수를 1씩 증가 시킵니다.

2. 문제를 틀렸다면 questionLength(전체 갯수)에서 hap을 뺍니다.

 

2번 문제. HTML코드 + JAVASCRIPT코드

<em class="time2__img"></em><span class="second"></span>분 <span class="minute"></span>초

1.span태그 .second는 "분"을 나타낼겁니다.

2.span태그 .minute은 "초"을 나타낼겁니다.

(???? 분과 초의 영어가 반대로네요.. 어쩐지 하다가 안되서 고생했습니다..????)

 

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

        // console.log(minutes, seconds);
        // 분이 초가 되네?
        Minute.innerText = minutes;
        // 초가 분으로 되네?
        Second.innerText = seconds;

        if(minutes < 10){
            Minute.innerText = "0" + minutes;
        }
        if(seconds < 10){
            Second.innerText = "0" + seconds;
        }



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

코드설명

1.if문을 통해서 minuites이 10이하가 되면 00을 붙입니다.

2.if문을 통해서 seconds가 10이하가 되면 00을 붙입니다.

3번문제. HTML코드 + JAVASCRIPT코드

<div class="cbt__view">
    당신의 이름은 <input type="text" class="name">입니다.<br>
    당신은 <span class="subject">웹디자인 기능사 시험을</span> 선택했습니다.
</div>

1.input태그인 .name인 이제 사용자로부터 입력을 받으면. 

  수험자의 이름에 넣어줄 것입니다.

 startBtn.addEventListener("click",function(){
    // console.log("클릭");

    // const inputName = document.querySelector(".cbt__view .name"); //input type=text
    // const sName = document.querySelector(".s_name"); 

    if(inputName.value.trim() == ""){
        alert("이름을 입력해주세요");
    }
    else{
        document.querySelector(".cbt__start").classList.add("hide");
        sName.innerText = inputName.value.trim();
        startQuiz();
    }
});

코드설명

1. input태그인 text타입에 내용이 입력되면 여백을 제거 후 비교합니다

   아무것도 안적으면 alert("");창을 띄웁니다.

2. else문을 통해 내용이 입력되면 입력받은 값을 수험자의 이름에 넣어줍니다.