퀴즈 이펙트 02

1. 인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?
2. 웹 페이지 제작에 따른 외부 스타일시트 확장자는?
3. E-mail 송신 시에 사용되는 프로토콜은?
소스보기
Javascript
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizDate = quizWrap.querySelectorAll(".quiz__date");
const quizType = quizWrap.querySelectorAll(".quiz__type");
const quizNum = quizWrap.querySelectorAll(".quiz__question em");
const quizQuestion = quizWrap.querySelectorAll(".quiz__question span");
const quizAnswer = quizWrap.querySelectorAll(".quiz__answer");
const quizDesc = quizWrap.querySelectorAll(".quiz__desc");
const quizConfirm = quizWrap.querySelectorAll(".quiz__confirm");
const quizInput = quizWrap.querySelectorAll(".quiz__input input");
const quizAnimation = quizWrap.querySelectorAll(".quiz__animation");

// 문제 정보
const quizInfo = [
    {
        infoDate : "2016년 07월",
        infoType : "웹디자인기능사",
        infoNum : "1",
        infoQuestion : "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?",
        infoAnswer : "연변대비",
        infoDesc : "다른말로 경계대비라고도 불린다. 두 색의 그 경계에서 일어나는 대비현상이다."
    }, 
    {
        infoDate : "2016년 07월",
        infoType : "웹디자인기능사",
        infoNum : "2",
        infoQuestion : "웹 페이지 제작에 따른 외부 스타일시트 확장자는?",
        infoAnswer : "CSS",
        infoDesc : "외부 스타일 시트를 이용하는 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줍니다."
    }, 
    {
        infoDate : "2016년 07월",
        infoType : "웹디자인기능사",
        infoNum : "3",
        infoQuestion : "E-mail 송신 시에 사용되는 프로토콜은?",
        infoAnswer : "SMTP",
        infoDesc : "SMTP는 간이 전자 우편 전송 프로토콜(Simple Mail Transfer Protocol, SMTP)의 약자로 인터넷에서 이메일을 전송하는데 사용되는 표준 프로토콜입니다."
    }
];

// 문제 출력
for(let i=0; i<quizInfo.length; i++){
    quizDate[i].textContent = quizInfo[i].infoDate;
    quizType[i].textContent = quizInfo[i].infoType;
    quizNum[i].textContent = quizInfo[i].infoNum;
    quizQuestion[i].textContent = quizInfo[i].infoQuestion;
    quizAnswer[i].textContent = quizInfo[i].infoAnswer;
    quizDesc[i].textContent = quizInfo[i].infoDesc;
}

// 정답 해설 숨기기
for(let i=0; i<quizInfo.length; i++){
    quizAnswer[i].style.display = "none";
    quizDesc[i].style.display = "none";
}

// 정답 확인
quizConfirm.forEach(function(btn, num){
    btn.addEventListener("click", function(){
        const userAnswer = quizInput[num].value;

        if(userAnswer == quizInfo[num].infoAnswer){
            quizAnimation[num].classList.add("like");
        } else {
            quizAnimation[num].classList.add("dislike");
        }
        quizAnswer[num].style.display = "block";
        quizDesc[num].style.display = "block";
        quizConfirm[num].style.display = "none";
        quizInput[num].style.display = "none";
    });
});
yunyoungsik91@gmail.com