퀴즈 문제 만들기03

 

 

퀴즈 주관식(여러문제) 유형

자바스크립트를 이용하여 웹디자인기능사 필기문제를 주관식 유형 퀴즈로 여러개 제작해보기
4개의 주관식 퀴즈를 하드 출력, 반복문과 조건문을 이용한 출력으로 나누어 살펴보자!

---

#1. 선택자 자바스크립트 소스

상수에게 해당명칭(ex: quizType)을 선언해주고 쿼리셀랙터(태그, 아이디, 클래스를 선택할 수 있는 것)로 선택한 요소를 찾아서 넣어보자!

//선택자
const quizType = document.querySelectorAll(".quiz__type"); //퀴즈종류
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"); //강아지

=> 퀴즈 문제 만들기 02번에서는 문제가 하나였기 때문에 querySelector만 사용해주었지만 이번 스크립트는 퀴즈 문제가 여러개이므로 querySelector 뒤에 All을 붙여서 모든 선택자를 불러오도록 한다.

<결과 보기>

---

#2. 문제 정보 자바스크립트 소스

배열 안 객체로 데이터를 저장하여 키와 값으로 여러개의 문제정보(데이터)를 효율적으로 저장시킨다.

//문제정보
const quizInfo = [
    {
        answerType : "웹디자인기능사 2016년01월24일",
        answerNum : "1",
        answerAsk : "한국산업표준(KS)에 따른 색의 3속성은 무엇인가?",
        answerResult : "Hue(색상),Value(명도),Chroma(채도)"
    }, //0(index)
    {
        answerType : "웹디자인기능사 2016년01월24일",
        answerNum : "2",
        answerAsk : "미적 대상을 구상하는 부분과 부분의 사이에 질적으로나 양적으로 모순되는 일 없이 질서가 잡혀 어울리는 것은 무엇인가?",
        answerResult : "조화"
    },//1
    {
        answerType : "웹디자인기능사 2016년01월24일",
        answerNum : "3",
        answerAsk : "같은 크기의 형을 상, 하로 겹칠 때 위쪽의 것이 크게 보이는 착시현상은 무엇인가?",
        answerResult : "상방 거리의 과대착시"
    },//2
    {
        answerType : "웹디자인기능사 2016년01월24일",
        answerNum : "4",
        answerAsk : "색광의 혼합에서 색을 혼합하면 할수록 높아지는 색의 속성은 무엇인가?",
        answerResult : "명도"
    }//3
    //arr은 배열을 출력하지만 현재 배열안 '객체'로 데이터를 저장했기 때문에 객체의 키 값을 구체적으로 선택하여 출력해주어야 한다.
    //주의 : 키를 선택하지 않은 채로 출력하게 되면 무엇을 출력하라는 건지 인식하지 못하여 object로 값이 출력되는 오류가 난다.
]

---

#3. 문제 출력하기 자바스크립트 소스

하드 출력 방법과 for문을 이용한 출력방법, 그리고 forEach문을 사용한 출력 방법을 알아보자.
그리고 실제 웹에서 반복문이 어떻게 활용되고 응용되는지 살펴보자.

// 하드 출력
 quizType[0].textContent = quizInfo[0].answerType;
 quizType[1].textContent = quizInfo[1].answerType;
 quizType[2].textContent = quizInfo[2].answerType;
 quizType[3].textContent = quizInfo[3].answerType;
 // quizType
 quizNumber[0].textContent = quizInfo[0].answerNum + ". ";
 quizNumber[1].textContent = quizInfo[1].answerNum + ". ";
 quizNumber[2].textContent = quizInfo[2].answerNum + ". ";
 quizNumber[3].textContent = quizInfo[3].answerNum + ". ";
 // quizNumber
 quizAsk[0].textContent = quizInfo[0].answerAsk;
 quizAsk[1].textContent = quizInfo[1].answerAsk;
 quizAsk[2].textContent = quizInfo[2].answerAsk;
 quizAsk[3].textContent = quizInfo[3].answerAsk;
 // quizAsk
 quizResult[0].textContent = quizInfo[0].answerResult;
 quizResult[1].textContent = quizInfo[1].answerResult;
 quizResult[2].textContent = quizInfo[2].answerResult;
 quizResult[3].textContent = quizInfo[3].answerResult;
  // quizResult

<for문으로 문제 출력하기>

반복적인 것들은 반복문인 for문을 이용하여 효율적으로 text 삽입이 가능하다.
.length를 사용한 for문 : i가 0일 때 quizInfo 배열의 길이를 반환한다. 컴퓨터는 0부터 시작하기 때문에 현재 배열 길이인 3까지 반환한다.

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

for문 정리
quizType[i].textContent = quizInfo[i].answerType;
quizType 상수에 선언한 태그에 quizInfo 상수의 배열 속 answerType 키와 "웹디자인기능사 2016년01월24일" 값을 대입하여 출력
쉽게 말하면 = 기준 오른쪽을 왼쪽에 대입하는 것.
=> quizInfo[i] 값인 answerType을 quizType[i] 값에 textContent를 이용하여 텍스트를 대입한다.

<forEach문으로 문제 출력하기>

// forEach()로 출력하기  =  arr.forEach(function(){});
// quizInfo가 가지고 있는 데이터를 인덱스로 출력 = quizType의 인덱스에 quizInfo의 인덱스 속 .answerType만 출력
quizInfo.forEach(function(el, 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;
});

// 화살표함수
quizInfo.forEach((el, 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;
});

---

#4. 정답 숨기기 자바스크립트 소스

반복문을 이용하여 총 4가지 문제의 정답을 숨겨보자!

// 정답숨기기
// 일반 출력으로 정답 숨기기
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문으로 정답 숨기기
// forEach는 e > i > a 순서로 식을 읽는다.
// 즉 데이터에서 인덱스를 뽑고 싶다면 e 와 i를 모두 선언해주어야 출력이 가능하다. 만약 i만 선언해도 i를 e로 생각하여 읽는다.
quizInfo.forEach((e, i)=>{
    quizResult[i].style.display = "none";
});

정리
quizResult[i].style.display = "none";
각 인덱스의 Result값에 css스타일 중 display = "none";을 주어서 정답 결과 박스를 보이지 않게 해준다.

---

#5. 정답 확인하기 자바스크립트 소스

forEach문과 addEventListener를 통해 정답을 확인해보자! 그리고 classList를 통해 답에 따른 표정 변화를 선언해보자!

// 정답확인하기
// quizConfirm.addEventListener("click",() => {});
// quizConfirm.addEventListener("click",function(){});
// quizConfirm를 클릭할 시 이벤트가 실행되도록한다.

quizConfirm.forEach((btn, num)=>{
    btn.addEventListener("click", ()=>{
        
        // 사용자 정답
        const userWord = quizInput[num].value; //사용자의 정답을 소문자로 변환시키고 여백을 없애준다.
        
        // 사용자 정답 = 문제 정답
        if(userWord == quizInfo[num].answerResult){ 
            // num = 특별한 기능으로 넣은 것이 아니라 인덱스를 표현하기 위한 명칭으로 이해하면 된다. ( 0번 객체의 퀴즈 1번 객체의 퀴즈 등 )
            // 정답
            quizView[num].classList.add("like");
            quizConfirm[num].style.display = "none";
        } else {
            // 오답
            quizView[num].classList.add("dislike");
            quizConfirm[num].style.display = "none";
            quizResult[num].style.display = "block";
            quizInput[num].style.display = "none"
            // 반복문을 사용할 경우 정답과 오답에 각각 스타일 선언을 따로 해주어야 한다.
        }
    });
});

forEach정리
1. quizConfirm의 수가 1개가 아닌 4개로 복수이기 때문에 forEach를 통해 문제가 총 4개라는 정보를 선언 해주어야 정상으로 이벤트 실행이 가능하다.
2. quizConfirm.addEventListener("click",(btn, num) => {});에서 btn == element / >num == index이며 이름을 붙여준 것 뿐, 특별한 기능이 가미된 것은 아니다.
3. quizConfirm == botten이며 상수에[num]을 붙여 저장한 데이터를 인덱스 별로 불러오게끔 한다.

---

!기억해야 할 문법!

데이터 저장 방법 : 배열 속 객체 타입
각 다른 여러개의 데이터를 저장할 때 효율젹인 방법이다.

const quizInfo = [
    {키1 : 값1},{키2 : 값2},{키3 : 값3},{키4 : 값4}
];
//객체는 항상 키와 값(key-value pair)으로 값을 넣어야 하며 그 값들은 속성(Property)라고 부른다.
//객체 한쌍의 구분은 쉼표(comma)로 해준다.

for문을 통한 출력 방법
출력할 때 주의할 점은 데이터를 불러올 경우 저장 방법이 객체이기 때문에 불러오려는 데이터값의 키를 구체적으로 선언해주어야 한다.
즉 .answerType과 같은 키를 선택하지 않은 채로 출력하게 되면 무엇을 출력하라는 건지 인식하지 못하여 object로 값이 출력되는 오류가 난다.

for(let i=0; i<4; i++ ){
    quizType[i].textContent = quizInfo[i].answerType; 
}

forEach을 통한 출력 방법
객체의 인덱스 별로 들어있는 해당 데이터를 뽑기 위한 것이기 때문에 e와 i를 선언해주어야 하며, 상수에도 똑같이 인덱스를 붙여주어야 오류가 생기지 않는다.

quizInfo.forEach(function(e, i){
    quizType[i].textContent = quizInfo[i].answerType;
});

quizConfirm를 클릭할 시 이벤트가 실행되도록한다.

quizConfirm.addEventListener("click",function(){});

4개의 quizConfirm가 있음을 알려주고 버튼들의 이벤트가 실행될 수 있도록 한다.

quizConfirm.forEach((btn, num)=>{
    btn.addEventListener("click", ()=>{});
});

클래스를 하나 추가시킨다.

.classList.add("클래스명");

---

결과보기

원본 사이트 보기