퀴즈이펙트 7번 보충의 보충 설명!

자바스크립트 퀴즈 이펙트(일곱 번째) 만들기_보충의 보충보충

 

이어서 작업해보겠습니다.

스크립트_문제와 이미지 없는 곳 처리

// 문제 설명 없는 곳 제거
document.querySelectorAll(".cbt__question__desc").forEach(desc => {
    if(desc.innerText === "undefined"){
        desc.classList.add("hide");
    }
});

// 이미지 없는 곳 제거
document.querySelectorAll(".cbt__question__img").forEach(img => {
    let src = img.querySelector("img").src;

    if(src.includes("undefined")){
        img.classList.add("hide");
    }
});

먼저, document.querySelectorAll(".cbt__question__desc")은 문서 내에 cbt__question__desc 클래스를 가진 모든 요소를 찾습니다. 이후 forEach()를 이용해 각 요소에 대해 다음 작업을 수행합니다.

 

각 요소의 innerText 값을 검사하여 값이 "undefined"인 경우 classList.add("hide")를 실행하여 해당 요소를 숨깁니다.

 

다음으로, document.querySelectorAll(".cbt__question__img")은 문서 내에 cbt__question__img 클래스를 가진 모든 요소를 찾습니다. 이후 forEach()를 이용해 각 요소에 대해 다음 작업을 수행합니다.

 

각 요소의 하위 요소 중 img 태그의 src 속성 값을 가져옵니다. 이 값이 "undefined"를 포함하고 있는 경우 classList.add("hide")를 실행하여 해당 요소를 숨깁니다.

 

문서 내에서 cbt__question__desc 클래스를 가지고 있으며 innerText 값이 "undefined"인 요소와 cbt__question__img 클래스를 가지고 있으며 하위 img 태그의 src 속성 값이 "undefined"를 포함하는 요소를 찾아서 숨깁니다.

 

스크립트_문제 선택하는 곳

// 문제 선택 (this)
const changeSelect = (e) => {
    let selectValue = e.value;
    let selectText = e.options[e.selectedIndex].text;

    cbtViewSubject.innerText = selectText;
    cbtHeader.innerText = selectText;

    dataQuestion(selectValue);
}

함수 내부에서는 먼저 e.value를 이용해 셀렉트 박스에서 선택된 옵션의 값(value)을 가져와 selectValue 변수에 저장합니다. 이어서 e.options[e.selectedIndex].text를 이용해 선택된 옵션의 텍스트(text)를 가져와 selectText 변수에 저장합니다.

 

이후 cbtViewSubject.innerText와 cbtHeader.innerText를 각각 selectText로 업데이트합니다. 이는 문서 내에 있는 특정 요소들의 내용을 변경하는 것입니다.

 

마지막으로, dataQuestion 함수를 호출합니다. 이 함수는 selectValue 값을 인자로 받아 해당 값에 맞는 데이터를 가져와서 문서 내의 다른 요소들을 업데이트합니다.

스크립트_시간 설정하기

let questionTime = "";              // 시간
let questionTimeRemain = "3600";    // 남은 시간

// 시간 설정
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 second = questionTimeRemain % 60;

        (second< 10)? second="0"+ second : second;

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

먼저 reduceTime 함수는 호출될 때마다 questionTimeRemain 변수의 값을 1씩 감소시킵니다. 이후 questionTimeRemain의 값이 0이 되면 endquiz() 함수를 호출하여 시험을 종료합니다.

 

displayTime 함수는 questionTimeRemain 변수의 값을 기반으로 문자열을 반환합니다. 만약 questionTimeRemain이 0 이하인 경우 "0분 00초"를 반환합니다. 그 외의 경우에는 Math.floor(questionTimeRemain / 60)을 이용해 분 단위를 계산하고, questionTimeRemain % 60을 이용해 초 단위를 계산합니다. 이후, 초의 단위가 한 자리 수일 경우 "0"을 붙여줍니다. 마지막으로 분과 초를 조합하여 문자열로 반환합니다.

스크립트_시작하기

// 시작하기
const startQuiz = () => {

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

    // 이름 입력

    cbtName.innerText = `${inputName.value}`;

    if(inputName == "")return alert("이름 적어주세요.");

    // 선택 안했을 때
    cbtStart.classList.add("hide");
}

그 후, inputName 요소의 값을 cbtName 요소에 넣습니다. 만약 inputName의 값이 빈 문자열인 경우, alert 함수를 호출하여 "이름 적어주세요."라는 경고 메시지를 표시합니다.

 

마지막으로, cbtStart 요소에 hide 클래스를 추가하여 시작 버튼을 숨깁니다.

 

 

코드보기