퀴즈 만들기 - 주관식(여러문제) 유형

퀴즈 효과

주관식(여러문제) 유형

---

결과

원본 사이트 보기

---

JavaScript

문제 출력, 정답 숨기기, 정답 확인쪽 스크립트는 문제가 2개이상 복수형태이므로 직접 텍스트를 치거나, for문을 이용하거나 forEach문을 이용해서 출력하였습니다. 자세한 설명은 주석표시로 확인하겠습니다.

//선택자
//선택자
const quizType = document.querySelectorAll(".quiz__type");                //퀴즈 종류, 다중선택을위해 querySelector에 All을 붙힌다.
const quizNumber = document.querySelectorAll(".quiz__question .number");  //퀴즈 번호
const quizAsk = document.querySelectorAll(".quiz__question .ask");        //퀴즈 질문
const quizConfirm = document.querySelectorAll(".quiz__answer .confirm");  //정답 확인 버튼
const quizResult = document.querySelectorAll(".quiz__answer .result");    //정답 결과
const quizInput = document.querySelectorAll(".quiz__answer .input");        //사용자 정답
const quizView = document.querySelectorAll(".quiz__view");            //강아지

//문제정보
const quizInfo = [
    {
        answerType: "웹디자인기능사 2015년 1회",
        answerNum: "1",
        answerAsk: "색광에서 Red, Green, Blue가 혼합될 때 그 결과 색은 무엇인가요?",
        answerResult: "White"
    },
    {
        answerType: "웹디자인기능사 2015년 1회",
        answerNum: "2",
        answerAsk: "다양한 구성 요소끼리 하나의 규칙으로 단일화시키는 원리는 무엇인가요?",
        answerResult: "통일"
    },
    {
        answerType: "웹디자인기능사 2015년 1회",
        answerNum: "3",
        answerAsk: "계통 생명이라고도 하며 색상, 명도, 채도를 표시하는 색명은 무엇인가요?",
        answerResult: "일반색명"
    },
    {
        answerType: "웹디자인기능사 2015년 1회",
        answerNum: "4",
        answerAsk: "유사, 대비, 균일, 강약 등의 디자인 요소가 포함되어 있는 디자인 원리는 무엇인가요?",
        answerResult: "조화"
    },
]

//문제 출력

//for문 이용해서 출력
// for(i = 0; i<quizInfo.length; i++){
//     quizType[i].textContent = quizInfo[i].answerType;
//     quizNumber[i].textContent = quizInfo[i].answerNum + ". ";
//     quizAsk[i].textContent = quizInfo[i].answerAsk;
//     quizResult[i].textContent = quizInfo[i].answerResult;
// }

//직접 텍스트 치는 방법
// quizType[0].textContent = quizInfo[0].answerType;   /*quizType의 첫번째에 퀴즈인포 첫번째 answerType을 넣는다*/
// quizType[1].textContent = quizInfo[1].answerType;   /*quizType의 두번째에 퀴즈인포 두번째 answerType을 넣는다*/
// quizType[2].textContent = quizInfo[2].answerType;   /*quizType의 세번째에 퀴즈인포 세번째 answerType을 넣는다*/
// quizType[3].textContent = quizInfo[3].answerType;   /*quizType의 네번째에 퀴즈인포 네번째 answerType을 넣는다*/

// quizNumber[0].textContent = quizInfo[0].answerNum + ". ";   /*quizNumber의 첫번째에 퀴즈인포 첫번째 answerNum를 넣는다*/
// quizNumber[1].textContent = quizInfo[1].answerNum + ". ";
// quizNumber[2].textContent = quizInfo[2].answerNum + ". ";
// quizNumber[3].textContent = quizInfo[3].answerNum + ". ";

// quizAsk[0].textContent = quizInfo[0].answerAsk;   /*quizAsk의 첫번째에 퀴즈인포 첫번째 answerAsk를 넣는다*/
// quizAsk[1].textContent = quizInfo[1].answerAsk;
// quizAsk[2].textContent = quizInfo[2].answerAsk;
// quizAsk[3].textContent = quizInfo[3].answerAsk;

// quizResult[0].textContent = quizInfo[0].answerResult;    /*quizResult의 첫번째에 퀴즈인포 첫번째 answerResul를 넣는다*/
// quizResult[1].textContent = quizInfo[1].answerResult;
// quizResult[2].textContent = quizInfo[2].answerResult;
// quizResult[3].textContent = quizInfo[3].answerResult;

//forEach문 이용해서 출력
quizInfo.forEach((e,i) => {
    quizType[i].textContent = quizInfo[i].answerType;
    quizNumber[i].textContent = quizInfo[i].answerNum + ". ";
    quizAsk[i].textContent = quizInfo[i].answerAsk;
    quizResult[i].textContent = quizInfo[i].answerResult;
});

//정답 숨기기 직접 텍스트 치기
// quizResult[0].style.display = "none";
// quizResult[1].style.display = "none";
// quizResult[2].style.display = "none";
// quizResult[3].style.display = "none";

//for문 이용해서 정답 숨기기
// for(let i = 0; i<quizInfo.length; i++){
//     quizResult[i].style.display = "none";
// }

//forEach문 이용해서 정답 숨기기
quizInfo.forEach((e, i) => {
    quizResult[i].style.display = "none";
});

//정답 확인
// quizConfirm.addEventListener("click", () => {   /*정답이 4개인거를 인식시켜줘야하기때문에 forEach문 사용*/
//     alert("ddd");
// });

quizConfirm.forEach((btn, num) => {
    btn.addEventListener("click", () => {
        
        // 사용자 정답
        const userWord = quizInput[num].value.toLowerCase().trim();              //소문자로 치환  , 여백 없앰


        //사용자 정답 == 문제 정답
        if(userWord == quizInfo[num].answerResult){
            //정답인경우
            // alert("정답")
            quizView[num].classList.add("like");
            quizConfirm[num].style.display = "none";
        } else {
            //오답인경우
            // alert("오답")
            quizView[num].classList.add("dislike");       /*quizView(강아지)에 dislike 추가*/
            quizConfirm[num].style.display = "none";      /*quizConfirm(정답 확인 버튼)을 안보이게 설정*/
            quizResult[num].style.display = "block";      /*quizResult(정답 결과)을 안보이게 설정*/
            quizInput[num].style.display = "none";        /*quizConfirm(정답 확인 버튼)을 안보이게 설정*/ 
        }   
    })
});