퀴즈 이펙트_여러문제를 풀 수 있도록 만들어 봅시다!(JSON)_보충02

어제와 비슷하지만 오늘 수정한 부분이 있어서 보충하고자 합니다.

 

점수 나오기(버튼 나오면 점수나오기)

const answerQuiz = () => {
        const cbtHeaderScore = document.querySelector(".time_submit__score span")
        cbtHeaderScore.innerHTML = `총 ${Math.ceil((quizScore / questionLength)*100)}입니다!`;

        cbtScorebox.style.display = "block";
}

함수는 querySelector() 메서드를 사용하여 HTML 요소 중 클래스가 time_submit__score인 요소의 하위 요소인 span 요소를 선택하고, 해당 요소의 innerHTML 속성을 수정하여 퀴즈의 총 점수를 표시합니다. quizScore 변수는 퀴즈에서 맞은 점수를 저장하고, questionLength 변수는 퀴즈의 총 문제 수를 나타냅니다. Math.ceil() 함수는 점수를 가장 가까운 정수로 반올림하는 데 사용됩니다.
cbtScorebox 변수가 참조하는 HTML 요소의 display 속성을 "block"으로 설정하여 점수 표시 박스를 보이게 합니다. 이 요소는 아마 퀴즈가 끝난 후 사용자에게 점수를 보여주는 데 사용됩니다.

 

 

점수 보이기 (html)

<div class="time_submit">
        <div>
            <button class="cbt__submit">제출하기</button>
        </div>
        <div>
            <span class="cbt__time">59분 10초</span>
        </div>
        <div class="time_submit__score">
            <span>??점입니다.</span>
        </div>

</div>

 

 

모달 창에서 이름받아오기

// 시작하기
const quizStart = () => {
    cbtStart.classList.add("hide");
    cbtName.textContent = cbtViewName.value.trim();

    console.log(cbtName);
    // 시간 설정
    questionTime = setInterval(reduceTime,1000)//
}

cbtName 변수가 참조하는 HTML 요소의 textContent 속성을 cbtViewName.value 값으로 설정합니다. 아마 cbtViewName은 사용자가 시험에 참여하는 이름을 입력하는 데 사용되는 입력 필드일 것입니다. trim() 함수는 문자열에서 공백을 제거합니다.
함수는 setInterval() 메서드를 사용하여 reduceTime() 함수를 1초마다 호출하도록 설정합니다. questionTime 변수는 아마 이 타이머에 대한 참조일 것입니다. reduceTime() 함수는 아마 시험 시간을 감소시키는 데 사용될 것입니다.

 

 

시간초 앞에 0붙이기

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

        return `${minutes}분 ${seconds.toString().padStart(2, '0')}초`;
        //초의 단위가 한자리 수가 되면 앞에 0을 붙여주기

    }
}

함수는 if-else 조건문을 사용하여 questionTimeRemain 변수가 0 이하인 경우 "0분 0초"를 반환합니다. 이것은 시험 시간이 끝난 경우에 해당합니다.
그렇지 않으면, 함수는 Math.floor() 함수를 사용하여 questionTimeRemain 변수를 분 단위로 변환하고 minutes 변수에 할당합니다. questionTimeRemain % 60은 questionTimeRemain 변수의 초 단위를 계산합니다. 이 값은 seconds 변수에 할당됩니다.
함수는 문자열 템플릿 리터럴을 사용하여 "분"과 "초"에 해당하는 값을 문자열로 변환하고 반환합니다. seconds.toString().padStart(2, '0')은 초의 단위가 한 자리 수인 경우 "0"을 앞에 추가하여 두 자리 수로 만들어 줍니다. 예를 들어, 9 대신에 09가 반환됩니다.