Quiz 객관식(여러문제) 유형

//문제 정보
const quizInfo = [
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "1",
        answerAsk: "통일성을 주는 방법과 거리가 먼 것은?",
        answerChoice: {
            1: "각 요소들을 근접시킨다.",
            2: "각 요소들을 반복시킨다.",
            3: "각 요소들을 연속시킨다.",
            4: "각 요소들을 분리시킨다."
        },
        answerResult: "4",
        answerEx: "통일감을 갖기 위해서는 각 요소들이 근접, 반복, 연속되어야하므로 답은 4번입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "2",
        answerAsk: "디자인의 원리 중 율동(Rhythm)의 요소와 거리가 먼 것은?",
        answerChoice: {
            1: "대칭",
            2: "점증",
            3: "반복",
            4: "변칙"
        },
        answerResult: "1",
        answerEx: "율동에는 반복, 교차, 방사, 점이(점증)=그라데이션 등이 있으므로 답은 1번입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "3",
        answerAsk: "일반적인 디자인의 조건을 나열한 것으로 옳은 것은?",
        answerChoice: {
            1: "합목적성, 유행성, 질서성, 독창성",
            2: "합목적성, 심미성, 독창성, 경제성",
            3: "합목적성, 심미성, 경제성, 국제성",
            4: "합목적성, 창조성, 심미성, 질서성"
        },
        answerResult: "2",
        answerEx: "디자인의 조건 : 합목적성, 심미성, 독창성, 경제성 이므로 답은 2번입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "4",
        answerAsk: "색의 활용 효과에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "밝은 바탕에 어두운 색 글자보다 어두운 바탕에 밝은 색글자가 더 굻고 커보인다.",
            2: "같은 크기의 검정색 상자와 흰 상자를 비교하면 흰색 상자가 더 가볍게 느껴 진다.",
            3: "천장을 더높게 보이게 하려면 벽면과 동일계열의 고명도 색을 천장에 칠한다.",
            4: "상의를 하의보다 더 어두운 색으로 하면 키가 더 커 보인다."
        },
        answerResult: "4",
        answerEx: "상의를 하의보다 더 어두운 색으로 하면 키가 더 커 보일수없습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "5",
        answerAsk: "바우하우스의 설립자이며, 근대 건축과 디자인 운동의 대표적 지도자는?",
        answerChoice: {
            1: "모리스(MORRIS, WILLIAM)",
            2: "그로피우스(GROPLUS, WALTER)",
            3: "로위(ROWEY, RAYMOND)",
            4: "팹스너(PRVSNER, NIKOLAUS)"
        },
        answerResult: "2",
        answerEx: "바우하우스의 설립자이며, 근대 건축과 디자인 운동의 대표적 지도자는 그로피우스 입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "6",
        answerAsk: "어떤 착시 현상을 나타낸 것인가?<br><-----><br>>-----<",
        answerChoice: {
            1: "거리의 착시",
            2: "방향의 착시",
            3: "길이의 착시",
            4: "대비의 착시"
        },
        answerResult: "3",
        answerEx: "선의 길이가 같은데 달라보이므로 길이의 착시입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "7",
        answerAsk: "디자인 기본 요소 중 균형을 잡기 위한 요소가 아닌 것은?",
        answerChoice: {
            1: "명암",
            2: "반복",
            3: "크기",
            4: "질감"
        },
        answerResult: "2",
        answerEx: "반복은 율동의 한 요소이다.율동은 반복과 교차, 점이(점증), 방사, 변칙 특징이 있다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "8",
        answerAsk: "업의 새로운 이념 구축에 필요한 이미지와 커뮤니케이션 시스템을 의도적, 계획적으로 만들어내는 기업이미지통합 전략은?",
        answerChoice: {
            1: "CIP",
            2: "POP",
            3: "ADIMA",
            4: "IOS"
        },
        answerResult: "1",
        answerEx: "기업 이미지 통합은 흔히 CI(Corporate Identity의 약어)라고 언급된다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "9",
        answerAsk: "색의 주목성에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "색의 진출, 후퇴, 팽창, 수축과 관련된 현상으로 사람들의 시선을 끄는 힘을 말한다.",
            2: "거리의 표지판 도로 구획선, 심벌마크 등 짧은 시간에 눈에 띄어야 하는 경우에 사용된다.",
            3: "명시도가 높으면 상대적으로 주목성이 낮다.",
            4: "명도, 채도가 높은 색이 주목성이 높다."
        },
        answerResult: "3",
        answerEx: "명시도가 높을수록 주목성이 높아집니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "10",
        answerAsk: "체계적인 국가 정책을 기반으로 공학적이며, 기능적인 디자인이 특징인 국가는?",
        answerChoice: {
            1: "중국",
            2: "프랑스",
            3: "스칸디나비아",
            4: "독일"
        },
        answerResult: "4",
        answerEx: "체계적인 국가 정책을 기반으로 공학적이며, 기능적인 디자인이 특징인 국가는 독일입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "11",
        answerAsk: "주위색의 영향으로 인접색에 가깝게 느껴지는 경우는?",
        answerChoice: {
            1: "등색 잔상",
            2: "색의 명시도",
            3: "연변 대비",
            4: "동화현상"
        },
        answerResult: "4",
        answerEx: "주위색의 영향으로 인접색에 가깝게 느껴지는 경우는 동화현상입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "12",
        answerAsk: "눈의 망막부위의 같은 곳에 동시적 또는 계속적으로 두 종류 이상의 색 자극이 주어져 특정한 색체감각을 일으키는 것은?",
        answerChoice: {
            1: "감법혼합",
            2: "가법혼합",
            3: "보색혼합",
            4: "중간혼합"
        },
        answerResult: "2",
        answerEx: "눈의 망막부위의 같은 곳에 동시적 또는 계속적으로 두 종류 이상의 색 자극이 주어져 특정한 색체감각을 일으키는 것은 가법혼합입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "13",
        answerAsk: "디자인(Design)의 의미를 설명한 것으로 틀린 것은?",
        answerChoice: {
            1: "디자인이란 프랑스어의 '데셍'에서 유래되었다.",
            2: "도안, 밑그림, 그림, 소묘, 계획, 설계, 목적이란 의미를 기술하고 있다.",
            3: "디자인은 De(이탈)와 Sign(형상)의 합성어로 기존 것을 파괴하고 새로운 재화를 창출한다는 의미가 포함된다.",
            4: "디자인은 기존의 것을 유지하며 실용적 가치보다는 예술적 가치의 기준을 말한다."
        },
        answerResult: "4",
        answerEx: "기존의 것을 유지시키는 부분이 틀렸습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "14",
        answerAsk: "다음 중 나머지 세 가지와 성격이 다른 디자인 분야는?",
        answerChoice: {
            1: "인테리어 디자인",
            2: "광고 디자인",
            3: "편집 디자인",
            4: "시각 디자인"
        },
        answerResult: "1",
        answerEx: "광고 디자인, 편집 디자인은 시각디자인에 속함.인테리어 디자인은 공업디자인에 속함."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "15",
        answerAsk: "( )안에 공통으로 들어갈 디자인 요소는?<br>-기하학에서는 무수히 많은 ( )들의 집합을 선이라고 정의 한다.<br>- 상징적인 면에 있어서 ( )은/는 모든 조형예술의 최초의 요소로 규정지을 수 있다. ",
        answerChoice: {
            1: "점",
            2: "빛",
            3: "면",
            4: "입체"
        },
        answerResult: "1",
        answerEx: "점이 모여서 선이됩니다. 선이 모여서 면이되고 면이 모여서 입체가 됩니다. 빛은 엄청빠릅니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "16",
        answerAsk: "색광 혼합에 관한 설명으로 옳은 것은?",
        answerChoice: {
            1: "적(Red), 녹(Green), 청(Blue)이 원색이다.",
            2: "색료를 혼합할수록 명도와 채도가 낮아진다",
            3: "자주(Magenta), 노랑(Yellow), 청록(Cyan), 검정(Black)이 기본색이다.",
            4: "여러 가지 빛을 혼합하면 혼합 이전의 상태보다 색의 명도가 내려가 어두워진다."
        },
        answerResult: "1",
        answerEx: "색광혼합은 가산혼합이라 부르며 Red, Green, Blue가 원색입니다. (모두 합치면 White) 혼합할수록 명도가 높아집니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "17",
        answerAsk: "배색의 조건 설명으로 틀린 것은?",
        answerChoice: {
            1: "사물의 용도나 기능에 부합되는 배색을 해야 한다.",
            2: "색이 주는 심리적 효과를 고려해야 한다.",
            3: "인간적인 요인으로 계획자의 개인적 특성에 맞추어 배색한다.",
            4: "환경적 요인은 충분히 고려하여 배색한다."
        },
        answerResult: "3",
        answerEx: "배색의 조건은, 사용자의 특성에 맞추어 배색하는 것이 좋습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "18",
        answerAsk: "시각적 균형과 가장 거리가 먼 것은?",
        answerChoice: {
            1: "명암에 의한 균형",
            2: "경험에 의한 균형",
            3: "질감에 의한 균형",
            4: "위치에 의한 균형"
        },
        answerResult: "2",
        answerEx: "경험에 의한 균형은 시각적 균형과 맞지 않습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "19",
        answerAsk: "디자인 형태의 개념에서 조화(Harmony)를 이루는 법칙과 거리가 먼 것은?",
        answerChoice: {
            1: "균형",
            2: "대비",
            3: "통일",
            4: "색상"
        },
        answerResult: "4",
        answerEx: "자인의 원리 - 균형, 비례, 율동, 동세, 통일, 변화, 강조, 대비, 조화"
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "20",
        answerAsk: "다음 중 관용색명에 해당하는 것은?",
        answerChoice: {
            1: "보라색(Purple)",
            2: "빨강색(Red)",
            3: "녹색(Green)",
            4: "개나리색(Chrome Yellow)"
        },
        answerResult: "4",
        answerEx: "관용색명이란 일상생활에서 쉽게 접할수 있는 관용적인 호칭방법으로 표현한 색이름을 말한다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "21",
        answerAsk: "웹 브라우저에 해당하지 않는 것은?",
        answerChoice: {
            1: "인터넷 익스플로러",
            2: "네스케이프",
            3: "구글",
            4: "링스"
        },
        answerResult: "3",
        answerEx: "구글은 회사 이름이며 구글에서 개발한 웹 브라우저는 크롬입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "22",
        answerAsk: "SMTP,FTP,Telnet,HTTP와 관련 있는 TCP/IP 프로토콜 계층으로 옳은 것은?",
        answerChoice: {
            1: "물리 계층",
            2: "네트워크 계층",
            3: "전송 계층",
            4: "응용 계층"
        },
        answerResult: "4",
        answerEx: "응용계층: 네트워크 관련 응용프로그램 수행(ex.HTTP,SMTP,FTP,TELNET 등)"
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "23",
        answerAsk: "웹 페이지를 만들기 위해 사용되는 프로그램 중 클라이언트측에서 수행되는 것은?",
        answerChoice: {
            1: "ASP",
            2: "CGI",
            3: "VB Script",
            4: "PHP"
        },
        answerResult: "3",
        answerEx: "웹 페이지를 만들기 위해 사용되는 프로그램 중 클라이언트측에서 수행되는 것은 VB Script입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "24",
        answerAsk: "Http://alpha.hrdkorea.or.kr에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "Kr은 대한민국을 나타낸다.",
            2: "alpha는 호스트 이름이다.",
            3: "or는 정부기관을 나타낸다.",
            4: "http는 전송 프로토콜이다."
        },
        answerResult: "3",
        answerEx: "or: 비영리기관입니다"
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "25",
        answerAsk: "웹 문서 작성을 위한 국제 표준 언어가 아닌 것은?",
        answerChoice: {
            1: "HTML",
            2: "UML",
            3: "XHTML",
            4: "XML"
        },
        answerResult: "2",
        answerEx: "현재 표준화된 방법으로 문서를 작성하고, 이를 송⋅수신할 수 있는 전산언어는 HTML, SGML, XML, XBRL이 있습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "26",
        answerAsk: "인터넷(Internet) 광고의 특징이 아닌 것은?",
        answerChoice: {
            1: "광고에 대한 효과를 실시간으로 확인 가능하다.",
            2: "초기 광고제작 단가가 타 매체에 비해 저렴하다.",
            3: "디지털 매체이므로 광고 내용의 수정은 쉽지 않다.",
            4: "기존 매체에 비해 더욱 명확한 타겟(Target) 마케팅이 이루어진다."
        },
        answerResult: "3",
        answerEx: "인터넷 광고는 디지털 매체이므로 광고의 내용 수정이 쉽습니다"
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "27",
        answerAsk: "HTML 문서에 대한 정보를 제공하는 자바스크립트의 객체는?",
        answerChoice: {
            1: "window",
            2: "location",
            3: "history",
            4: "document"
        },
        answerResult: "4",
        answerEx: "HTML 문서에 대한 정보를 제공하는 자바스크립트의 객체는 document 입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "28",
        answerAsk: "최초의 GUI 환경의   웹 브라우저는?",
        answerChoice: {
            1: "익스플로러",
            2: "네스케이프",
            3: "모자이크",
            4: "랜드스케이프"
        },
        answerResult: "3",
        answerEx: "최초의 GUI 환경의 웹 브라우저는 모자이크 입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "29",
        answerAsk: "다음 중 세계 인터넷 역사에 가장 나중에 이루어진 것은?",
        answerChoice: {
            1: "ARPANet 출현",
            2: "Usenet 시작",
            3: "FTP 표준안",
            4: "TCP/IP 도입"
        },
        answerResult: "4",
        answerEx: "ARPANET- 1969년, USENET - 1979년, FTP - 1972 년, TCP/IP - 1982년."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "30",
        answerAsk: "HTML에 대한 설명으로 옳지 않은 것은?",
        answerChoice: {
            1: "HTML은 링크나 앵커 등 하이퍼텍스트의 개념을 태그로 명확히 정의한 언어이다.",
            2: "HTML은 디렉터무비, 플래시무비, MIDI 사운드를 삽입 하는 태그를 갖고 있다.",
            3: "HTML은 DTD(Dcoument Type Definition) 기능을 이용하여 새로운 태그를 정의하여 사용할 수 있다.",
            4: "HTML은 문서 내에 직접 기술하여 프로그래밍 할 수 있는 JavaScript를 지원한다."
        },
        answerResult: "3",
        answerEx: "HTML은 새로운 태그를 정의할 수 없습니다. 새로운 태그 정의는 XML에서 가능 합니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "31",
        answerAsk: "이더넷(Ethernet)에 대한 설명으로 옳은 것은?",
        answerChoice: {
            1: "스타형 통신망으로 가장 널리 사용되는 근거리 통신망 방식이다.",
            2: "CSMA/CD 버스 통신망으로 가장 널리 사용되는 근거리 통신망 방식이다.",
            3: "CDMA 통신망으로 가장 널리 사용되는 근거리 통신망 방식이다.",
            4: "PTP 버스 통신망으로 가장 널리 사용되는 근거리 통신망 방식이다."
        },
        answerResult: "2",
        answerEx: "이더넷은 CSMA/CD 기술을 사용한다.이 기술은 이더넷에 연결된 여러 컴퓨터들이 하나의 전송 매체를 공유할 수 있도록 한다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "32",
        answerAsk: "여러 개의 검색 엔진에서 정보를 찾은 다음, 중복으로 검색된 정보는 하나로 통일하고 자체 순위 결정 방식에 의해 가장 관련성이 높은 순으로 출력해 주는 것은?",
        answerChoice: {
            1: "주제별 검색 엔진",
            2: "키워드 검색 엔진",
            3: "메타 검색 엔진",
            4: "자연어 검색 엔진"
        },
        answerResult: "3",
        answerEx: "정보는 하나로 통일하고 자체 순위 결정 방식에 의해 가장 관련성이 높은 순으로 출력해 주는 것은 메타 검색 엔진입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "33",
        answerAsk: "자바 스크립트에서 현재 활성화된 창을 닫는 명령어가 아닌 것은?",
        answerChoice: {
            1: "self.close()",
            2: "this.close()",
            3: "windows.close()",
            4: "screen.close()"
        },
        answerResult: "4",
        answerEx: "screen.close()는 자바 스크립트에서 현재 활성화된 창을 닫는 명령어가 아닙니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "34",
        answerAsk: "카테고리에 의한 체계적인 링크정보를 제공하며, 최종적인 정보 검색을 위해서는 대분류에서 시작하여 중분류, 소분류등의 중간 과정을 방문해야 하는 검색 엔진은?",
        answerChoice: {
            1: "메타 검색 엔진",
            2: "로봇에이전트형 검색 엔진",
            3: "디렉터리형 검색 엔진",
            4: "단어별 검색 엔진"
        },
        answerResult: "3",
        answerEx: "대분류, 중분류 , 소분류 는 주제별 검색 엔진"
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "35",
        answerAsk: "스타일시트에 대한 설명으로 옳지 않은 것은?",
        answerChoice: {
            1: "하나의 문서만 수정해도 한꺼번에 여러 페이지의 외형과 형식을 수정할 수 있다.",
            2: "스타일시트에서 글꼴, 색상, 크기, 정렬 방식 등을 미리 지정하여 필요한 곳에 적용할 수 있다.",
            3: "같은 스타일시트를 사용하는 문서에는 문서들의 일관성을 쉽게 유지할 수 있다.",
            4: "웹 페이지의 레이아웃 편집을 강화하여 브라우저나 플랫폼의 종류에 많은 제한이 따른다."
        },
        answerResult: "4",
        answerEx: "스타일시트는 브라우저나 플랫폼 종류에 제한을 받지 않습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "36",
        answerAsk: "국내 검색 엔진(Search Engine) 아닌 것은?",
        answerChoice: {
            1: "엠파스",
            2: "네이버",
            3: "다음",
            4: "야후"
        },
        answerResult: "4",
        answerEx: "야후는 해외 검색엔진입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "37",
        answerAsk: "전자메일서비스에 연관된 프로토콜(Protocol)이 아닌 것은?",
        answerChoice: {
            1: "IMAP",
            2: "NNTP",
            3: "POP",
            4: "SMTP"
        },
        answerResult: "2",
        answerEx: "NNTP는 뉴스 그룹 프로토콜입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "38",
        answerAsk: "자바 스크립트(Java Script)에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "자바 스크립트란 HTML에 삽입되어 HTML을 확장하는 기능을 가지고 있어 HTML을 강력하고 편리하게 디자인 할 수 있다.",
            2: "자바 스크립트는 객체 지향 언어로 객체(class)를 생성 하고 상속하는 기능을 한다.",
            3: "자바 스크립트는 서버가 아닌 클라이언트에서 인터프리터 된다.",
            4: "자바 스크립트는 컴퓨터 기종에 관계없이 사용할 수 있어 플랫폼에 독립적이라고 한다."
        },
        answerResult: "2",
        answerEx: "자바 스크립트는 객체 지향 언어로 객체(class)를 생성 하고 상속하는 기능을 한다는 말은 틀린말입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "39",
        answerAsk: "웹 페이지 레이아웃을 구성하기 위해 사용되는 방법에 대한 설명으로 가장 거리가 먼 것은?",
        answerChoice: {
            1: "테이블을 이용하면 텍스트와 이미지 또는 멀티미디어 자료를 결합할 수 있는 복잡한 레이아웃을 만들 수 있다.",
            2: "프레임을 이용하면 브라우저 내에서 각 프레임이 독립적으로 움직일 수 있다.",
            3: "스타일시트는 레이아웃을 만들어내는 탁월한 방법으로 콘텐츠와 레이아웃을 분리하는 기능을 제공한다.",
            4: "이미지 한 장을 이용한 레이아웃은 자유롭고 다양한 효과를 줄 수 있고 내용 변경도 쉽게 할 수 있다."
        },
        answerResult: "4",
        answerEx: "이미지 한 장을 이용한 레이아웃은 자유롭고 다양한 효과를 줄 수 있고 내용 변경도 쉽게 할 수 없습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "40",
        answerAsk: "인터넷에서 사용하는 기본적인 통신 프로토콜은?",
        answerChoice: {
            1: "IPv6",
            2: "NetBEUI",
            3: "TCP/IP",
            4: "IPX/SPX"
        },
        answerResult: "3",
        answerEx: "인터넷에서 사용하는 기본적인 통신 프로토콜은 TCP/IP입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "41",
        answerAsk: "수학적 연산에 의해 그래픽 데이터를 표현하는 방식은?",
        answerChoice: {
            1: "백터 방식",
            2: "비트맵 방식",
            3: "래스터 방식",
            4: "포스트스크랩"
        },
        answerResult: "1",
        answerEx: "수학적 연산에 의해 그래픽 데이터를 표현하는 방식은 백터 방식입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "42",
        answerAsk: "무손실 데이터 압축 기법에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "복원한 데이터가 압축전의 데이터와 일치한다.",
            2: "압축 기법은 허프만 코드화가 있다.",
            3: "대체로 동영상, 이미지, 음향 등과 같은 연속매체에 많이 사용된다.",
            4: "정확성이 많이 요구되는 문서, 정보, 소프트웨어의 실행파일, 의학용, 과학용으로 많이 사용된다."
        },
        answerResult: "3",
        answerEx: "무손실 데이터 압축 기법에 동영상, 이미지, 음향 등과 같은 연속매체에 많이 사용되지 않습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "43",
        answerAsk: "컴퓨터 그래픽스 시스템의 입력 장치로 옳지 않은 것은?",
        answerChoice: {
            1: "빔 프로덕션",
            2: "키보드",
            3: "마우스",
            4: "스캐너"
        },
        answerResult: "1",
        answerEx: "빔 프로덕션은 컴퓨터 그래픽스 시스템의 입력 장치로 옳지 않습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "44",
        answerAsk: "GIF 파일 포맷에 대한 설명으로 옳지 않은 것은?",
        answerChoice: {
            1: "24비트의 1600만여 가지의 색을 표현할 수 있다.",
            2: "온라인상에서 빠른 이미지의 전송을 목적으로 개발되었다.",
            3: "JPEG 파일에 비해 압축률이 떨어진다.",
            4: "GIF는 'Graphics Interchange Format'의 약자 이다."
        },
        answerResult: "1",
        answerEx: "GIF는 8비트의 256컬러만을 사용합니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "45",
        answerAsk: "캠코더에서 얻은 동영상 클립을 편집하여 결과물을 얻기에 적합한 소프트웨어가 아닌 것은?",
        answerChoice: {
            1: "Premiere",
            2: "Movie Maker",
            3: "Vagas",
            4: "Media Player"
        },
        answerResult: "4",
        answerEx: "Media Player는 오디오 및 동영상 재생기이며 동영상 편집기가 아닙니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "46",
        answerAsk: "현실이나 상상 속에서 제안되거나 계획된 일련의 사건들의 개략적인 줄거리를 말하며, 스토리보드를 작성하는데 토대가 되는 것은?",
        answerChoice: {
            1: "시나리오",
            2: "플로우차트",
            3: "가상현실",
            4: "레이아웃 설정"
        },
        answerResult: "1",
        answerEx: "개략적인 줄거리를 말하며, 스토리보드를 작성하는데 토대가 되는 것은 시나리오 입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "47",
        answerAsk: "웹 디자인 과정에서 아이디어 발상과 밀접한 관계가 있는 용어는?",
        answerChoice: {
            1: "BRAIN STORMING",
            2: "STORY BOARD",
            3: "SITE MAP",
            4: "HTML"
        },
        answerResult: "1",
        answerEx: "웹 디자인 과정에서 아이디어 발상과 밀접한 관계가 있는 용어는 BRAIN STORMING 입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "48",
        answerAsk: "컴퓨터 그래픽스가 활용되고 있는 분야로 거리가 가장 먼 것은?",
        answerChoice: {
            1: "컴퓨터 게임",
            2: "CD 타이틀 디자인",
            3: "공예 디자인",
            4: "미디어 아트"
        },
        answerResult: "3",
        answerEx: "공예 디자인은 컴퓨터 그래픽스가 활용되는 분야랑 거리가 멉니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "49",
        answerAsk: "화면 해상도(Resolution)에 대한 설명으로 적절한 것은?",
        answerChoice: {
            1: "픽셀(Pixel)의 수를 의미한다.",
            2: "화면 해상도는 모니터 화면의 크기에 의해 결정된다.",
            3: "화면 해상도가 높을수록 적은 양의 메모리가 필요하다.",
            4: "화면 해상도가 낮으면 똑같은 이미지라도 작게 보인다."
        },
        answerResult: "1",
        answerEx: "화면 해상도는 픽셀의 수 입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "50",
        answerAsk: "웹 페이지를 제작할 때 사용되는 웹 에디터로 옳은 것은?",
        answerChoice: {
            1: "일러스트레이터",
            2: "페인터",
            3: "코렐드로우",
            4: "드림위버"
        },
        answerResult: "4",
        answerEx: "웹 페이지 제작 웹에디터 종류에는 : Dreamweaver, Namo Web Editor, Front Page 등등.. 있습니다"
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "51",
        answerAsk: "애플사에서 개발한 미디어 재생기로 동영상 파일을 지원하는 것은?",
        answerChoice: {
            1: "Windows Media Player",
            2: "Real Player",
            3: "Shock Wave",
            4: "Quick Time"
        },
        answerResult: "4",
        answerEx: "애플사에서 개발한 미디어 재생기는 Quick Time 입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "52",
        answerAsk: "일반적으로 마우스의 이벤트에 반응하는 플래시 무비를 만들기 위해 등록하게 되는 심벌로 가장 적절한 것은?",
        answerChoice: {
            1: "그래픽 심벌",
            2: "버튼 심벌",
            3: "사운드 심벌",
            4: "무비 클립 심벌"
        },
        answerResult: "2",
        answerEx: "마우스의 이벤트에 반응하는 플래시 무비를 만들기 위해 등록하게 되는 심벌은 버튼 심벌 입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "53",
        answerAsk: "웹(Web) 상에서 애니메이션 사용을 저해하는 요소가 아닌 것은?",
        answerChoice: {
            1: "데이터 스트리밍",
            2: "대역폭의 한계",
            3: "브라우저가 지원하지 못하는 낮은 사양의 컴퓨터",
            4: "인터넷의 비동기성"
        },
        answerResult: "1",
        answerEx: "스트리밍의 가능으로 별도의 플러그인 설치없이 웹상에서 애니메이션을 재생할수 있습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "54",
        answerAsk: "저해상도 비트맵 이미지에서 곡선이나 사선 드로잉 결과는 계단 모양이나 지그재그 모양을 나타낸다. 이와 같은 계단 현상을 부드럽게 처리하기 위해 사용되는 방식은?",
        answerChoice: {
            1: "레이트레이싱(Ray Tracing)",
            2: "레이캐스팅(Ray Casting)",
            3: "앨리어스(Alias)",
            4: "안티앨리어스(Anti-Alias)"
        },
        answerResult: "4",
        answerEx: "계단 현상을 부드럽게 처리하기 위해 사용되는 방식은 안티앨리어스 입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "55",
        answerAsk: "웹 애니메이션의 시각적인 깜빡임(Flicker) 현상을 줄이기 위한 방법으로 옳은 것은?",
        answerChoice: {
            1: "모니터의 크기를 최대한 큰 것을 사용한다.",
            2: "초당 프레임 수를 최대한 높여서 제작한다.",
            3: "인접한 계통색을 사용하여 제작한다.",
            4: "고해상도의 원본 이미지를 사용한다."
        },
        answerResult: "2",
        answerEx: "초당 프레임 수를 최대한 높여서 제작하면 깜빡임 현상을 줄일 수 있습니다.."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "56",
        answerAsk: "웹 디자인에서 사용자 인터페이스를 설정할 때 고려해야 할 사항으로 옳지 않은 것은?",
        answerChoice: {
            1: "최단 시간에 사이트를 방문한 목적을 이해할 수 있도록 한다.",
            2: "웹 페이지에서 다른 곳으로 이동할 수 있는 링크를 한곳으로만 지정한다.",
            3: "화면을 스크롤 했을 때 링크 버튼이 보이지 않는 일이 없도록 한다.",
            4: "누가 보더라도 쉽게 사용법을 알 수 있도록 사용자 편의성을 제공한다."
        },
        answerResult: "2",
        answerEx: "사용자가 원하는 페이지로 이동할 수 있도록 링크를 지정하는 것이 바람직합니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "57",
        answerAsk: "컴퓨터 그래픽스의 역사 중 트랜지스터 시대(1960년대)에 대한 설명으로 옳은 것은?",
        answerChoice: {
            1: "컴퓨터 그래픽스 발전의 기초를 마련한 시기로 3D 분야에서는 은선 제거 기법에서 발전을 시작하여 면의 음역을 표현할 수 있는 쉐이딩 기법이 등장하였다.",
            2: "빌 게이츠와 폴 알렌은 함께 마이크로소프트사를 설립하였다.",
            3: "컴퓨터 대형화 추세와 더불어 개인용 컴퓨터에서는 주기억장치로 고밀도 직접회로를 사용하여 본격적인 사무자동화 시대를 맞이하였다.",
            4: "컴퓨터 그래픽스 영상의 발전으로 조지 루카스는 그의 영화 Star Wars(스타워즈)에서 처음으로 90초에 해당하는 부분을 컴퓨터 그래픽스를 이용하여 영상 효과를 창출하였다."
        },
        answerResult: "1",
        answerEx: "트랜지스터 시대에 은선 제거 기법에서 발전을 시작하여 면의 음역을 표현할 수 있는 쉐이딩 기법이 등장하였습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "58",
        answerAsk: "타이포그래피의 구성 요소에 해당하지 않는 것은?",
        answerChoice: {
            1: "Serif",
            2: "Line-spacing",
            3: "Letter-spacing",
            4: "Texturing"
        },
        answerResult: "4",
        answerEx: "Texturingd은 질감입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "59",
        answerAsk: "웹 그래픽 디자인 제작 기법에서 이미지를 표현하는 단계를 순서적으로 옳게 나열한 것은?",
        answerChoice: {
            1: "이미지 구성 단계 → 도구 선택 단계 → 색상 선택 단계 → 이미지 표현 단계",
            2: "이미지 구성 단계 → 이미지 표현 단계 → 색상 선택 단계 → 도구 선택 단계",
            3: "이미지 구성 단계 → 이미지 표현 단계 → 도구 선택 단계 → 색상 선택 단계",
            4: "이미지 구성 단계 → 색상 선택 단계 → 이미지 표현 단계 → 도구 선택 단계"
        },
        answerResult: "1",
        answerEx: "이미지 구성 - 도구 선택 - 색상 선택 - 이미지 표현 순서대로입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "60",
        answerAsk: "움직임이 없는 무생물적인 존재를 여러번에 걸쳐 변형을 시키고 이를 연속 촬영 또는 기타 영상적 기법을 이용하여 마치 움직이는 것처럼 눈의 착각을 일으키도록 하는 기술은?",
        answerChoice: {
            1: "랜더링",
            2: "모델링",
            3: "크로마키",
            4: "애니메이션"
        },
        answerResult: "4",
        answerEx: "연속 촬영 또는 기타 영상적 기법을 이용하여 마치 움직이는 것처럼 눈의 착각을 일으키도록 하는 기술은 애니메이션 입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "7",
        answerAsk: "디자인 기본 요소 중 균형을 잡기 위한 요소가 아닌 것은?",
        answerChoice: {
            1: "명암",
            2: "반복",
            3: "크기",
            4: "질감"
        },
        answerResult: "2",
        answerEx: "반복은 율동의 한 요소이다.율동은 반복과 교차, 점이(점증), 방사, 변칙 특징이 있다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "11",
        answerAsk: "주위색의 영향으로 인접색에 가깝게 느껴지는 경우는?",
        answerChoice: {
            1: "등색 잔상",
            2: "색의 명시도",
            3: "연변 대비",
            4: "동화현상"
        },
        answerResult: "4",
        answerEx: "주위색의 영향으로 인접색에 가깝게 느껴지는 경우는 동화현상입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "13",
        answerAsk: "디자인(Design)의 의미를 설명한 것으로 틀린 것은?",
        answerChoice: {
            1: "디자인이란 프랑스어의 '데셍'에서 유래되었다.",
            2: "도안, 밑그림, 그림, 소묘, 계획, 설계, 목적이란 의미를 기술하고 있다.",
            3: "디자인은 De(이탈)와 Sign(형상)의 합성어로 기존 것을 파괴하고 새로운 재화를 창출한다는 의미가 포함된다.",
            4: "디자인은 기존의 것을 유지하며 실용적 가치보다는 예술적 가치의 기준을 말한다."
        },
        answerResult: "4",
        answerEx: "기존의 것을 유지시키는 부분이 틀렸습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "18",
        answerAsk: "시각적 균형과 가장 거리가 먼 것은?",
        answerChoice: {
            1: "명암에 의한 균형",
            2: "경험에 의한 균형",
            3: "질감에 의한 균형",
            4: "위치에 의한 균형"
        },
        answerResult: "2",
        answerEx: "경험에 의한 균형은 시각적 균형과 맞지 않습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "20",
        answerAsk: "다음 중 관용색명에 해당하는 것은?",
        answerChoice: {
            1: "보라색(Purple)",
            2: "빨강색(Red)",
            3: "녹색(Green)",
            4: "개나리색(Chrome Yellow)"
        },
        answerResult: "4",
        answerEx: "관용색명이란 일상생활에서 쉽게 접할수 있는 관용적인 호칭방법으로 표현한 색이름을 말한다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "23",
        answerAsk: "웹 페이지를 만들기 위해 사용되는 프로그램 중 클라이언트측에서 수행되는 것은?",
        answerChoice: {
            1: "ASP",
            2: "CGI",
            3: "VB Script",
            4: "PHP"
        },
        answerResult: "3",
        answerEx: "웹 페이지를 만들기 위해 사용되는 프로그램 중 클라이언트측에서 수행되는 것은 VB Script입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "24",
        answerAsk: "Http://alpha.hrdkorea.or.kr에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "Kr은 대한민국을 나타낸다.",
            2: "alpha는 호스트 이름이다.",
            3: "or는 정부기관을 나타낸다.",
            4: "http는 전송 프로토콜이다."
        },
        answerResult: "3",
        answerEx: "or: 비영리기관입니다"
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "30",
        answerAsk: "HTML에 대한 설명으로 옳지 않은 것은?",
        answerChoice: {
            1: "HTML은 링크나 앵커 등 하이퍼텍스트의 개념을 태그로 명확히 정의한 언어이다.",
            2: "HTML은 디렉터무비, 플래시무비, MIDI 사운드를 삽입 하는 태그를 갖고 있다.",
            3: "HTML은 DTD(Dcoument Type Definition) 기능을 이용하여 새로운 태그를 정의하여 사용할 수 있다.",
            4: "HTML은 문서 내에 직접 기술하여 프로그래밍 할 수 있는 JavaScript를 지원한다."
        },
        answerResult: "3",
        answerEx: "HTML은 새로운 태그를 정의할 수 없습니다. 새로운 태그 정의는 XML에서 가능 합니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "36",
        answerAsk: "국내 검색 엔진(Search Engine) 아닌 것은?",
        answerChoice: {
            1: "엠파스",
            2: "네이버",
            3: "다음",
            4: "야후"
        },
        answerResult: "4",
        answerEx: "야후는 해외 검색엔진입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "37",
        answerAsk: "전자메일서비스에 연관된 프로토콜(Protocol)이 아닌 것은?",
        answerChoice: {
            1: "IMAP",
            2: "NNTP",
            3: "POP",
            4: "SMTP"
        },
        answerResult: "2",
        answerEx: "NNTP는 뉴스 그룹 프로토콜입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "42",
        answerAsk: "무손실 데이터 압축 기법에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "복원한 데이터가 압축전의 데이터와 일치한다.",
            2: "압축 기법은 허프만 코드화가 있다.",
            3: "대체로 동영상, 이미지, 음향 등과 같은 연속매체에 많이 사용된다.",
            4: "정확성이 많이 요구되는 문서, 정보, 소프트웨어의 실행파일, 의학용, 과학용으로 많이 사용된다."
        },
        answerResult: "3",
        answerEx: "무손실 데이터 압축 기법에 동영상, 이미지, 음향 등과 같은 연속매체에 많이 사용되지 않습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "43",
        answerAsk: "컴퓨터 그래픽스 시스템의 입력 장치로 옳지 않은 것은?",
        answerChoice: {
            1: "빔 프로덕션",
            2: "키보드",
            3: "마우스",
            4: "스캐너"
        },
        answerResult: "1",
        answerEx: "빔 프로덕션은 컴퓨터 그래픽스 시스템의 입력 장치로 옳지 않습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "44",
        answerAsk: "GIF 파일 포맷에 대한 설명으로 옳지 않은 것은?",
        answerChoice: {
            1: "24비트의 1600만여 가지의 색을 표현할 수 있다.",
            2: "온라인상에서 빠른 이미지의 전송을 목적으로 개발되었다.",
            3: "JPEG 파일에 비해 압축률이 떨어진다.",
            4: "GIF는 'Graphics Interchange Format'의 약자 이다."
        },
        answerResult: "1",
        answerEx: "GIF는 8비트의 256컬러만을 사용합니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "45",
        answerAsk: "캠코더에서 얻은 동영상 클립을 편집하여 결과물을 얻기에 적합한 소프트웨어가 아닌 것은?",
        answerChoice: {
            1: "Premiere",
            2: "Movie Maker",
            3: "Vagas",
            4: "Media Player"
        },
        answerResult: "4",
        answerEx: "Media Player는 오디오 및 동영상 재생기이며 동영상 편집기가 아닙니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "47",
        answerAsk: "웹 디자인 과정에서 아이디어 발상과 밀접한 관계가 있는 용어는?",
        answerChoice: {
            1: "BRAIN STORMING",
            2: "STORY BOARD",
            3: "SITE MAP",
            4: "HTML"
        },
        answerResult: "1",
        answerEx: "웹 디자인 과정에서 아이디어 발상과 밀접한 관계가 있는 용어는 BRAIN STORMING 입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "53",
        answerAsk: "웹(Web) 상에서 애니메이션 사용을 저해하는 요소가 아닌 것은?",
        answerChoice: {
            1: "데이터 스트리밍",
            2: "대역폭의 한계",
            3: "브라우저가 지원하지 못하는 낮은 사양의 컴퓨터",
            4: "인터넷의 비동기성"
        },
        answerResult: "1",
        answerEx: "스트리밍의 가능으로 별도의 플러그인 설치없이 웹상에서 애니메이션을 재생할수 있습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "57",
        answerAsk: "컴퓨터 그래픽스의 역사 중 트랜지스터 시대(1960년대)에 대한 설명으로 옳은 것은?",
        answerChoice: {
            1: "컴퓨터 그래픽스 발전의 기초를 마련한 시기로 3D 분야에서는 은선 제거 기법에서 발전을 시작하여 면의 음역을 표현할 수 있는 쉐이딩 기법이 등장하였다.",
            2: "빌 게이츠와 폴 알렌은 함께 마이크로소프트사를 설립하였다.",
            3: "컴퓨터 대형화 추세와 더불어 개인용 컴퓨터에서는 주기억장치로 고밀도 직접회로를 사용하여 본격적인 사무자동화 시대를 맞이하였다.",
            4: "컴퓨터 그래픽스 영상의 발전으로 조지 루카스는 그의 영화 Star Wars(스타워즈)에서 처음으로 90초에 해당하는 부분을 컴퓨터 그래픽스를 이용하여 영상 효과를 창출하였다."
        },
        answerResult: "1",
        answerEx: "트랜지스터 시대에 은선 제거 기법에서 발전을 시작하여 면의 음역을 표현할 수 있는 쉐이딩 기법이 등장하였습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "58",
        answerAsk: "타이포그래피의 구성 요소에 해당하지 않는 것은?",
        answerChoice: {
            1: "Serif",
            2: "Line-spacing",
            3: "Letter-spacing",
            4: "Texturing"
        },
        answerResult: "4",
        answerEx: "Texturingd은 질감입니다."
    }

]

const quiz__wrap = document.querySelector(".quiz__wrap");
let quizScore = 0;

const updateQuiz = () => {
    const exam = [];

    quizInfo.forEach((question, number) => {
        exam.push(`
            <div class="quiz">
                <span class="quiz__type">${question.answerType}</span>
                <h2 class="quiz__question">
                    <span class="number">${question.answerNum + ". "}</span>
                    <div class="ask">${question.answerAsk}</div>
                </h2>
                <div class="quiz__view">
                    <div class="true">정답입니다!</div>
                    <div class="false">틀렸습니다!</div>
                    <div class="dog">
                        <div class="head">
                            <div class="ears"></div>
                            <div class="face"></div>
                            <div class="eyes">
                                <div class="teardrop"></div>
                            </div>
                            <div class="nose"></div>
                            <div class="mouth">
                                <div class="tongue"></div>
                            </div>
                            <div class="chin"></div>
                        </div>
                        <div class="body">
                            <div class="tail"></div>
                            <div class="legs"></div>
                        </div>
                    </div>
                </div>
                <div class="quiz__answer">
                    <div class="quiz__selects">
                        <label for="select1${number}">
                            <input type="radio" id="select1${number}" class="select" name="select${number}" value="1">
                            <span class="choice">${question.answerChoice[1]}</span>
                        </label>
                        <label for="select2${number}">
                            <input type="radio" id="select2${number}" class="select" name="select${number}" value="2">
                            <span class="choice">${question.answerChoice[2]}</span>
                        </label>
                        <label for="select3${number}">
                            <input type="radio" id="select3${number}" class="select" name="select${number}" value="3">
                            <span class="choice">${question.answerChoice[3]}</span>
                        </label>
                        <label for="select4${number}">
                            <input type="radio" id="select4${number}" class="select" name="select${number}" value="4">
                            <span class="choice">${question.answerChoice[4]}</span>
                        </label>
                    </div>
                </div>
            </div>`
        );

        

    })

    exam.push(`
            <div class= "quiz__confirm">
                <button class="check">정답 확인하기</button>
                <div class="ex"></div>
            </div>
        `)
    quiz__wrap.innerHTML = exam.join('');
}
updateQuiz();

//정답 확인
const answerQuiz = () => {
    const quizSelects = document.querySelectorAll(".quiz__selects");      //객관식 보기
    
    //사용자가 체크한 보기 == 문제 정답
    quizInfo.forEach((question, number) => {
        const userSelector = `input[name=select${number}]:checked`;      //사용자가 체크한 것
        const quizSelectsWrap = quizSelects[number];
        const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value;     //정답 체크 안했을때도 있으니 or을 이용해서 빈 공백도 추가한다. 
        const quizView = document.querySelectorAll(".quiz__view");

        if(userAnswer == question.answerResult){
            console.log("정답")
            quizView[number].classList.add("like");
            quizScore++;

        } else {
            console.log("오답")
            quizView[number].classList.add("dislike");
            const divBox = document.createElement("div");
            quizSelectsWrap.appendChild(divBox).innerHTML = `<p class="result">${question.answerEx}</p>`
        }
        
    });
    // 전체 문제수
    console.log(quizInfo.length) 
    // 내가 맞힌 수
    console.log(quizScore)


    document.querySelector(".quiz__confirm .ex").innerHTML = `${quizScore< 40 ? quizInfo.length + "/" + quizScore + "탈락" : quizInfo.length + "/" + quizScore + "합격"}`;

}

//정답 클릭
document.querySelector(".quiz__confirm .check").addEventListener("click", answerQuiz);