정답에 따라 표정이 변하는 강아지 퀴즈 만들기! - 3

강아지 이펙트 파헤치기

오늘은 강아지 이펙트의 자바스크립트 부분과 약간의 애니메이션 부분을 알아보려고 합니다.

 

먼저, 준비 해야할 것은 퀴즈 안에 들어가야할 정보들이 필요합니다.

어떤 종목인지, 언제 출제되었던 문제인지, 문제와 답 등을 먼저 정리해보도록 하겠습니다.

이 이펙트를 만들어 내기 위해 필요한 정보들은 아래와 같습니다. 

• 시험종목 : 정보처리 기능사
• 시험시간 : 2011년 4회
• 문제번호 : 1
• 문제질문  : 주파수분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 ...
• 문제정답 : 가드밴드(Guard band)
• 문제설명 : 가드밴드(Guard Band)는 주파수분할 다중화 방식에서 ...

이 필요한 정보들을 이펙트 효과로 불러오기 위해서는 정보들을 데이터로 변환시켜주는 작업과 선택자인 querySelector를 사용하는 작업이 필요합니다. 

querySelector : 선택자를 사용하여 문서에서 첫 번째로 일치하는 요소를 선택하는 메소드

---

1. queryselector를 사용하여 각 요소를 선택하여 각 변수에 저장시켜줍니다.

const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelectorAll(".quiz__title");                        //시험 종목, 시간
const quizQusetionNumber = quizWrap.querySelectorAll(".quiz__question span");       //문제 번호 
const quizQusetion = quizWrap.querySelectorAll(".quiz__question em");               // 문제 질문
const quizAnswerResult = quizWrap.querySelectorAll(".quiz__answer .result");        // 문제 정답
const quizDesc = quizWrap.querySelectorAll(".quiz__desc");                          // 문제 설명
const quizAnswerquizconfirm = quizWrap.querySelectorAll(".quiz__answer .confirm");  //정답버튼
const quizAnswerInput = quizWrap.querySelectorAll(".quiz__answer");
const dogWrap = quizWrap.querySelectorAll(".dog__wrap");

이 작업의 의미는 아래와 같습니다.

 

const quizTitle = quizWrap.querySelectorAll(".quiz__title");      

변수 quizTitle을 선언하고,  quizWrap이라는 장소에서 ".quiz__title"라는 것을 찾아 변수 quizTitle에 저장하겠다.

 

이 작업이 완료 되면 각 정보를 변수 quizInfo로 선언하고 배열로 나열해 주는 작업을 진행합니다.

const quizInfo = [
    {
        infoType: "정보처리 기능사",
        infoTime: "2011년 4회",
        infoNumber: "1",
        infoQuestion: "주파수분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 일종의 완충지역 역할을 하는 것을 무엇이라고 하는가?",
        infoAnswer: "가드밴드 (guard band)",
        infoDesc: "가드밴드(Guard Band)는 주파수분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 일종의 완충지역 역할을 한다."
    },{
        infoType: "정보처리 기능사",
        infoTime: "2011년 4회",
        infoNumber: "2",
        infoQuestion: "사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내 주는 대화식 운영체제는 무엇인가?",
        infoAnswer: "UNIX",
        infoDesc: "UNIX는 사용자의 명령으로 시스템이 수행되고 그에 따른 겨로가를 나타내주는 대화식 운영체제이다."
    },{
        infoType: "정보처리 기능사",
        infoTime: "2011년 4회",
        infoNumber: "3",
        infoQuestion: "프로세스들이 서로 다른 프로세스가 차지하고 있는 자원을 무한정 기다려 시스템이 멈춘 것처럼 보이는 상태를 무엇이라고 하는가?",
        infoAnswer: "교착상태",
        infoDesc: "교착상대(deadlock)는 2개 이상의 프로세스들이 서로 다른 프로세스가 차지하고 있는 자원을 무한정기다려 시스템이 멈춘 것처럼 보이는 상태이다."
    }
]

이제 자바스크립트와 함수를 이용하여 출력하는 법이 남았습니다!

 

함수를 사용하지 않고 일일히 출력을 하게 된다면 아래와 같은 일이 발생합니다.

문제 출력
quizTitle[0].textContent = quizInfo[0].infoType;
quizTitle[1].textContent = quizInfo[1].infoType;
quizTitle[2].textContent = quizInfo[2].infoType;

문제 시간
quizTime[0].textContent = quizInfo[0].infoTime;
quizTime[1].textContent = quizInfo[1].infoTime;
quizTime[2].textContent = quizInfo[2].infoTime;

...

자바스크립트 내에서 반복적인 작업은 비효율적이기 때문에 for문을 사용하여 바꾸어줍니다.

for(let i=0; i<quizInfo.length; i++){
    quizTitle[i].innerHTML = quizInfo[i].infoType+"  " + quizInfo[i].infoTime;
    quizQusetionNumber[i].textContent = quizInfo[i].infoNumber;
    quizQusetion[i].textContent = quizInfo[i].infoQuestion;
    quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
    quizDesc[i].textContent = quizInfo[i].infoDesc;
}

이를 forEach로 변경해주면 아래와 같습니다.

 quizInfo.forEach(function(e, i){
    quizTitle[i].innerHTML = quizInfo[i].infoType+"  " + quizInfo[i].infoTime;
    quizQusetionNumber[i].textContent = quizInfo[i].infoNumber;
    quizQusetion[i].textContent = quizInfo[i].infoQuestion;
    quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
    quizDesc[i].textContent = quizInfo[i].infoDesc;
});