"퀴즈이펙트" Quiz 04 : 객관식(한문제) 유형

Quiz 04.

자바스크립트를 활용하여 웹디자인기능사 필기 2013년도 5회차 문제를 통해 객관식 문제를 만들어봅시다!

원본 소스보기

자바스크립트 활용

※ 객관식 문제 ※
-주관식이 아니므로 input X => quizInput없어도 됨!
-문제를 출력할 때 실행문의 집합이 함수이므로 데이터가 많아질 때를 고려하여 자바스크립트에서 함수를 블록화 해주는 것이 편리한데 이 때 function updateQuiz(){}를 이용-> !!!함수를 이용했다면 반드시 마지막 }; 에 함수실행 써주어야함updateQuiz();!!!
-정답 확인 시에도 함수를 실행해주는데 이 때 과정을 주의해야 한다.
1. for문을 통해 객관식 보기 수에 따라 몇 번 if문을 반복할지 정해줘야 함
2. for문 안에 if문을 쓸 때 무작정 체크된 번호 == 문제번호를 쓰면 안되고 보기에 일단 체크가 된 상태라면...이라는 가정이 필요함
→ if (quizSelect[i].checked == true){} 3. 정답 클릭도 반드시 넣어주어야 함수가 실행됨!

---

1. 선택자를 지정해준 후 문제 정보를 적어줍니다.
2. 그 후 문제 출력을 위해 선택자와 문제 정보를 연결해줍니다. 이 때 textContent를 사용해 줍니다.
→ 여러 데이터를 저장하기 위해서는 for문이나 forEach문을 활용해줄 수 있지만 객관식과 같은 문제는 보기의 갯수가 많으므로 함수로 집합을 만들어 준 후 함수문 안에 for문을 이용하여 보기 또한 출력해주는 것이 용이합니다.
3. 해설을 숨겨놓기 위해서 정답(quizResult)를 quizResult.style.diplay = "none"으로 숨겨줍니다.
4. 정답 확인을 위해 함수를 실행시켜 안에 for문을 이용하여 객관식 갯수에 맞게 실행시키고 그 안에 if문을 통해 보기에 체크가 된 상태인가와 그 안에 체크한 것이 정답일 때와 아닐 때를 또 if문으로 만들어 주어야 합니다.
오답일 시, 해설이 나오도록 quizResult.style.display = "block";을 추가해주어햐 하고 정답확인하기는 없어지도록 quizConfirm.style.display = "none";을 추가해주어야합니다.
5. 정답이라면 강아지가 웃는 효과를, 오답이라면 강아지가 우는 효과를 quizView.classList.add("")을 통해 "like", "dislike"로 표현해주어야 합니다.
6. 마지막으로 정답 클릭시 이 모든 것이 작동될 수 있도록 quizConfirm.addEventListener("click", answerQuiz);을 추가해주어야 합니다.

//선택자
const quizType = document.querySelector(".quiz_type");                   //퀴즈 종류 //다중 선택을 하려면 반드시 querySelectorAll로 해주어야함 
const quizNumber =  document.querySelector(".quiz_question .number");   //퀴즈 번호
const quizAsk = document.querySelector(".quiz_question .ask");          //퀴즈 질문
const quizConfirm = document.querySelector(".quiz_answer .confirm");    //정답 확인 버튼
const quizResult = document.querySelector(".quiz_answer .result");      //정답 결과
const quizView = document.querySelector(".quiz_view");                  //강아지
const quizSelects = document.querySelector(".quiz_selects");            //객관식보기
const quizChoice = quizSelects.querySelectorAll(".choice");             //객관식 보기
const quizSelect= quizSelects.querySelectorAll(".select");              //객관식 보기
//데이터가 더 많아질 때

//문제정보
const quizInfo = [
    {
        answerType : "웹디자인 기능사 2013년 05회",
        answerNum : "1",
        answerAsk : "일반적으로 도구 개념으로 물건을 창조하는 디자인 분야는?",
        answerChoice : ["시각디자인", "제품디자인", "환경디자인", "공예디자인"],
        answerResult : "2",
        answerEx : "도구 개념으로 물건을 창조하는 디자인은 제품디자인에 속합니다."
    }
];

//문제 출력->실행문의 집합이 함수이므로 데이터가 많아질 시 자바스크립트에서는 함수로 블록화해주는게 편함!
function updateQuiz(){
    
    quizType.textContent = quizInfo[0].answerType;
    quizNumber.textContent = quizInfo[0].answerNum + ". ";
    quizAsk.textContent = quizInfo[0].answerAsk;
    quizResult.textContent = quizInfo[0].answerEx;
    
    //보기 출력
    for( let i = 0; i < 4; i++ ){
        quizChoice[i].textContent = quizInfo[0].answerChoice[i];
    }
    
    //해설 숨기기
    quizResult.style.display = "none";
}
updateQuiz();

//정답 확인
function answerQuiz(){
    //사용자 선택한 정답 == 문제 정답
    //사용자가 클릭한 input --> checked(.css)
    for( let i=0; i<quizSelect.length; i++){
        if (quizSelect[i].checked == true){ //보기에 체크가 된 상태 //어디에 체크를 했는지 확인 후 정답 비교
            //체크된 번호 == 문제 번호
            if (quizSelect[i].value == quizInfo[0].answerResult){
                //alert("정답")
                quizView.classList.add("like")
            } else {
                //alert("오답")
                quizView.classList.add("dislike");
                quizResult.style.display = "block";
                quizConfirm.style.display = "none";
            }
        } else {
            // alert("정답을 체크하지 않았습니다.")
        }
    }
}

//정답 클릭
quizConfirm.addEventListener("click", answerQuiz);