티스토리 뷰

{
      const quizType = document.querySelector(".quiz__type")//문제
        const quizNumber = document.querySelector(".quiz__number") //문제 번호
        const quizAsk = document.querySelector(".quiz__Ask") //문제 질문
        const quizConfirm = document.querySelector(".quiz__confirm") //문제 정답버튼
        const quizResult = document.querySelector(".quiz__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: "javascript",
                answerNum: 1,
                answerAsk: "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?",
                answerChoice : ["javascript", "html", "css", "jquery"],
                answerResult: "1",
                answerEx : "객체 기반의 스크립트 프로그래밍 언어는 자바스크립트입니다."
            }
        ];

            //문제출력
            function updataQuiz() {
                //  문제, 문제번호, 문제질문, 문제 정답을 updataQuiz 함수에 저장해서 출력
                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";
            }
            updataQuiz();

            //정답확인 
            function answerQuiz() {
                //사용자가 클릭한 input --> checked : 사용자가 선택한 정답 == 객체 안에 정답
                for(let i=0; i<quizSelect.length; i++){
                    if(quizSelect[i].checked ==true){
                        if(quizSelect[i].value == quizInfo[0].answerResult){
                            //정답
                            quizView.classList.add("like")         
                            quizConfirm.style.display="none"
                        }else {
                            quizView.classList.add("dislike")
                            quizConfirm.style.display="none"
                            quizResult.style.display="block"

                        }
                    }
                }
            }

            quizConfirm.addEventListener("click", answerQuiz)
        
}
댓글
© 2018 webstoryboy