Quiz

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
lee.jiyoung492@gmail.com
소스 보기
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: "20년 4회",
        infoType: "정보처리 기능사",
        infoNum: "01.",
        infoQuestion: "반가산기(Half-Adder)의 논리 회로도에서 자리올림이 발생하는 회로는?",
        infoAnswer: "AND",
        infoDesc: "반가산기는 2진수 1자리(1bit)의 a와 b를 더한 합과 자리올림수를 얻는 회로입니다."
    }, 
    {
        infoDate: "21년 2회",
        infoType: "정보처리 기능사",
        infoNum: "02.",
        infoQuestion: "SQL의 SELECT문에서 특정열의  값을 기준으로 정렬할 때 사용하는 절은?",
        infoAnswer: "ORDER BY 절",
        infoDesc: "ORDER BY는 검색 결과에 대한 정렬을 수행합니다."
    }, 
    {
        infoDate: "20년 4회",
        infoType: "정보처리 기능사",
        infoNum: "03.",
        infoQuestion: "주소 지정 방식 중 기억 장치에 접근할 피연산자가 없는 것으로 산술에 필요한 명령어는 스택 구조 형태에서 처리하도록 하는 것은?",
        infoAnswer: "0-주소 형식",
        infoDesc: "0-주소 형식(=스택 구조)은 명령어에 오퍼랜드부가 없이 데이터가 명령어 자체에 있는 방식입니다. 컴퓨어에서 사용하며 연산 속도가 가장 빠릅니다."
    }
];

// 문제 출력(innterText = textContent 같은 기능)
// quizDate[0].textContent = quizInfo[0].infoDate;
// quizDate[1].textContent = quizInfo[1].infoDate;
// quizDate[2].textContent = quizInfo[2].infoDate;

// quizType[0].textContent = quizInfo[0].infoType;
// quizType[1].textContent = quizInfo[1].infoType;
// quizType[2].textContent = quizInfo[2].infoType;

// quizNum[0].textContent = quizInfo[0].infoNum;
// quizNum[1].textContent = quizInfo[1].infoNum;
// quizNum[2].textContent = quizInfo[2].infoNum;

// quizQuestion[0].textContent = quizInfo[0].infoQuestion;
// quizQuestion[1].textContent = quizInfo[1].infoQuestion;
// quizQuestion[2].textContent = quizInfo[2].infoQuestion;

// quizAnswer[0].textContent = quizInfo[0].infoAnswer;
// quizAnswer[1].textContent = quizInfo[1].infoAnswer;
// quizAnswer[2].textContent = quizInfo[2].infoAnswer;

// quizDesc[0].textContent = quizInfo[0].infoDesc;
// quizDesc[1].textContent = quizInfo[1].infoDesc;
// quizDesc[2].textContent = quizInfo[2].infoDesc;

// for()
// 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;
// };

// forEach
quizInfo.forEach((el, 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;
});

// 정답 해설 숨기기
// quizAnswer[0].style.display = "none";
// quizAnswer[1].style.display = "none";
// quizAnswer[2].style.display = "none";

// quizDesc[0].style.display = "none";
// quizDesc[1].style.display = "none";
// quizDesc[2].style.display = "none";

// for()문
// for(let i=0; i<quizInfo.length; i++){
//     quizAnswer[i].style.display = "none";
//     quizDesc[i].style.display = "none";
// };

// forEach()문
quizInfo.forEach((el, 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.trim().toLowerCase();
        const correctAnswer = quizInfo[num].infoAnswer.trim().toLocaleLowerCase();
        
        if(userAnswer == correctAnswer){
            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";
    });
});