Quiz 객관식 확인하기 : 60문제 + 점수 확인

//문제정보
const quizInfo = [
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "1",
            answerAsk : "웹 디자인에 대한 설명으로 거리가 먼 것은?",
            answerChoice : {
                1: "웹 페이지를 디자인하고 제작하는 것을 의미한다.",
                2: "웹 디자인은 개인용 홈페이지 이외에 기업용 등 다양하다.",
                3: "웹 디자인은 Web과 Design이라는 두 가지 개념이 결합된 것이다.",
                4: "기업, 단체, 행사의 특징과 성격에 맞는 시각적 상징물을 말한다.",
            },
            answerResult : "4",
            answerEx : "기업을 상징하는 것은 CI이다.",
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "2",
            answerAsk : "디자인의 심미성에 대한 설명으로 맞는 것은?",
            answerChoice : {
                1: "아름다움을 느끼는 미적 의식이며 주관적일 수 있다.",
                2: "감성적인 부분으로 모든 사람에게 동일하게 나타난다.",
                3: "합리적이며 객관적인 미적 활동이다.",
                4: "국가, 민족, 관습, 시대와 관계없이 동일하게 나타난다.",
            },
            answerResult : "1",
            answerEx : "심미성 : 형태와 색채조화를 이루어 '아름다움'의성징을 만들어내는 것 대중형의 조형성이라고도 말하며, 시대적인 미의 기준, 사회적인 개성에 따라 변화된다.",
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "3",
            answerAsk : "동시 대비에 해당하지 않는 것은?",
            answerChoice : {
                1: "색상 대비",
                2: "명도 대비",
                3: "보색 대비",
                4: "한난 대비",
            },
            answerResult : "4",
            answerEx : "서로 가까이 놓여진 두개 이상의 색을 동시에 볼 때 일어나는 색채대비를 말한다. 동시대비는 색채의 3속성들의 차이에 따른 지각변화에 따라서 명도대비, 색상대비, 채도대비, 보색대비로 구분된다. 심리에 관한 색용어. 서로 반대되거나 대단히 틀리는 감각, 감정 등이 동시에 비교하면, 그 한쪽 또는 양쪽의 특성이 한층 명백해 지는 일. 예를들면, 똑같은 회색의 원(圓)을 흰종이와 검은 종이 위에 놓고 볼 때 검은종이 위에서는 희게 보이고, 흰종이 위에서는 검게 보이는 것 등이 동시적 대비이다.",
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "4",
            answerAsk : "계통 생명이라고도 하며 색상, 명도, 채도를 표시하는 색명은?",
            answerChoice : {
                1: "특정색명",
                2: "관용색명",
                3: "일반색명",
                4: "근대색명",
            },
            answerResult : "3",
            answerEx : "일반색명- 감성적으로 느껴진 느낌을 수식어로 덧붙여 사용 ex)빨강 Red, 'R'처럼 표색계를 이용하여 기호나 이름으로 표현 '어두운 파랑','연보라'명도, 채도에 대한 수식어로 표현 / 관용색명 - 관습적이거나 연상적인 느낌으로 이름을 붙이는 방법 ex)'귤색', '밤색', '무지개색','코발트 블루'와 같이 고유한 이름을 이용하여 표현",
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "5",
            answerAsk : "색채조화의 공통원리에 대한 설명으로 틀린 것은?",
            answerChoice : {
                1: "질서의 원리는 효과적인 반응을 일으키는 질서 있는 계획에 따라 선택된 색채들에서 생긴다.",
                2: "비모호성의 원리는 두 색 이상의 배색에 있어서 모호함이 없는 명료한 배색에서만 얻어진다.",
                3: "동류의 원리는 가장 가까운 색채끼리의 배색은 보는 사람에게 친근감을 주며 조화를 느끼게 한다.",
                4: "유사의 원리는 색의 3속성의 차이가 큰 색상의 배색이 더욱 조화롭게 나타난다.",
            },
            answerResult : "4",
            answerEx : "유사조화: 두 가지 이상의 색이 서로 속성이 같거나 비슷하여 잘 어울리는 것을 말한다.",
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "6",
            answerAsk : "자극이 생긴 후 이제까지 보고 있던 상을 계속해서 볼 수 있는 현상은?",
            answerChoice : {
                1: "조화",
                2: "연상",
                3: "명시성",
                4: "잔상",
            },
            answerResult : "4",
            answerEx : "잔상은 외부 자극이 사라진 뒤에도 감각 경험이 지속되어 나타나는 상을 말한다. 예를들어 촛불을 한참 바라본 뒤에 눈을 감아도 그 촛불의 상이 나타나는 현상 등이다.",
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "7",
            answerAsk : "다음 내용이 설명하는 것은? <br> 프랑스어로 Frotter에서 유래된 용어이다. <br>  나뭇잎이나 헝겊 등의 위에 종이를 대고 연필이나 크레용 등으로 문질러 나타내는 방법이다. <br>  막스 에른스트(Max Ernst) 같은 초현실주의 화가들이 자주 사용하였다.",
            answerChoice : {
                1: "포토몽타주",
                2: "뜨롬쁘 레이유",
                3: "프로타주",
                4: "콜라주",
            },
            answerResult : "3",
            answerEx : "록볼록한 물체 위에 종이를 대고 연필이나 크레용으로 문질러 나타내는 기법은 프로타주이다.",
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "8",
            answerAsk : "어두운 곳에 들어갔을 때 물체의 상이 흐리게 나타나는 현상과 가장 관계가 깊은 것은?",
            answerChoice : {
                1: "색순응",
                2: "푸르킨예 현상",
                3: "박명시",
                4: "조건등색",
            },
            answerResult : "3",
            answerEx : "색순응 : 오래 바라본 색에 눈이 순응(적응)되어, 색에 대한 지각(인식, 깨닫다.)이 약해지는 것 <br /> 푸르킨예 현상 : 어두워질 때 파장이 짦은 보라색계열이 먼저 보이고, 밝아질 때 청자색이 먼저 보이는 현상 (예시 : 낮에는 빨간색의 물체가 밤에는 검게 보이고, 낮에는 파랑색이던 물체가 밤에는 회색으로 보임.) <br /> 박명시 : 명소시(밝은 곳)에서 암소시(어두운 곳)로 이동할 때 박명시(어두운 곳에 들어갔을 때 무렟의 상이 흐리게 나타나는 현상)이 발생. <br />조건등색 : 다른 두 가지 색이 조명이나 빛 아래에서 통일한 색으로 보여지는 현상",
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "9",
            answerAsk : "유사, 대비, 균일, 강약 등의 디자인 요소가 포함되어 있는 디자인 원리는?",
            answerChoice : {
                1: "균형",
                2: "리듬",
                3: "조화",
                4: "통일",
            },
            answerResult : "3",
            answerEx : "조화는 균형,대비,통일,유사,균일,강약,변화등이 포함되어 있습니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "10",
            answerAsk : "디자인 형태의 분류 중 이념적 형태에 속하는 것은?",
            answerChoice : {
                1: "인위 형태",
                2: "추상 형태",
                3: "자연 형태",
                4: "실제 형태",
            },
            answerResult : "2",
            answerEx : "인식하는 방법에 의한 분류 <br />이념적 형태 - 추상적 형태 (점, 선, 면, 입체 등 - 실제적 감각으로 지각할 수는 없지만 느껴지는 형태) <br> 현실적 형태 - 자연적 형태 (유기적인 형태 - 자연의 법칙에 의해 생성된 것) <br> 인위적 형태 (기능적인 형태 - 인간의 필요에 의해 만들어진것)"
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "11",
            answerAsk : "데 스틸(De Stijl)에 관한 설명으로 틀린 것은?",
            answerChoice : {
                1: "네덜란드를 중심으로 한 신조형 운동으로 요소주의라고도 불리운다.",
                2: "도스부르크, 몬드리안, 리트벨트 등이 주요인물이다.",
                3: "아르누보의 조형사상에 큰 영향을 주었다.",
                4: "현대의 조형 활동은 인공세계를 상징하고 표현하는데 중점을 두어야 한다고 생각하였다.",
            },
            answerResult : "3",
            answerEx : "데 스틸(신조형주의) <br> -일체화 ,기하하적 형태<br>-삼원색과 흑,백,회색만을 사용<br>-추상예술 그룹이며, 신조형주의 운동<br>-기하학적이며 단순화된 평면구성<br>-피에트 몬드리안"
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "12",
            answerAsk : "연속적인 패턴에서 볼 수 있는 디자인 원리는?",
            answerChoice : {
                1: "동세",
                2: "균형",
                3: "반복",
                4: "변화",
            },
            answerResult : "3",
            answerEx : "연속적인 패턴이므로 반복이 정답입니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "13",
            answerAsk : "POP(Point of Purchase) 광고의 특징으로 바르지 않는 것은?",
            answerChoice : {
                1: "충동구매를 유도한다.",
                2: "상품이 있는 장소에서 설득력이 없다.",
                3: "소매점의 장식 효과를 찾는다.",
                4: "구매를 촉진, 결단하게 하는 설득력을 갖는다.",
            },
            answerResult : "2",
            answerEx : "POP광고는 '구매시점광고'라고 불리며 상점에 직접 설치하는 광고문입니다. 특징은 구매심리를 자극하여 충동구매로 이어질 수 있게 유도합니다. 상황에 따라서 판매원의 설명보다 더 효과적일 수 있습니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "14",
            answerAsk : "다음 중 수평선에 대한 설명으로 맞는 것은?",
            answerChoice : {
                1: "평화와 정지를 나타내고 안정감을 준다.",
                2: "동적이고 불안정한 느낌을 준다.",
                3: "이지적 상징을 준다.",
                4: "고결, 희망을 나타내고 상승감, 긴장감을 준다.",
            },
            answerResult : "1",
            answerEx : "수평선 : 평화, 정지, 안정, 편암함 <br> 수직선 : 상승, 엄숙, 긴장감 <br> 곡선 : 부드러운, 우아함, 무질서 <br> 사선 : 역동적, 속도감, 불안함"
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "15",
            answerAsk : "다음 중 4차원 디자인이 아닌 것은?",
            answerChoice : {
                1: "TV광고(CF)디자인",
                2: "POP Art",
                3: "애니메이션",
                4: "무대 디자인",
            },
            answerResult : "2",
            answerEx : "POP Art는 3차원(입체)디자인입니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "16",
            answerAsk : "다음 중 기계적 질감에 해당하지 않는 것은?",
            answerChoice : {
                1: "사진의 망점",
                2: "인쇄상의 스크린 톤",
                3: "텔레비전 주사선",
                4: "나뭇결 무늬",
            },
            answerResult : "4",
            answerEx : "나뭇결 무늬는 기계적 질감이 아닌 자연적 질감에 속합니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "17",
            answerAsk : "제과점 홈페이지를 제작할 대 식욕을 돋게 하는 색채로 가장 거리가 먼 것은?",
            answerChoice : {
                1: "녹색",
                2: "주황",
                3: "노랑",
                4: "빨강",
            },
            answerResult : "1",
            answerEx : "식욕을 돋우게 하는 색은 난색이 적합합니다. 녹색이나 파란색 계통의 색은 식욕을 저하시키는 색을 말하므로 제과점이나 음식점과 같은 색상은 어울리지 않습니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "18",
            answerAsk : "그림과 같이 도형의 한쪽이 튀어나와 보여서 입체로 지각되는 착시 현상은? <img src='quiz01.jpg'>",
            answerChoice : {
                1: "방향의 착시",
                2: "착시의 분할",
                3: "대비의 착시",
                4: "반전 실체의 착시",
            },
            answerResult : "4",
            answerEx : "방향의 착시 : 선의 방향이 달라지면 인접한 다른 선의 각도와 방향이 달라 보임. <br> 착시의 분할 : 동일한 크기의 선이나 면의 경우, 분할된 부분이 분할 되지 않은 부분보다 더 크거나 길어 보임. <br> 대비의 착시 : 같은 면적이라고 하더라도 주변의 도형에 영향을 받아 두면적이 다르게 보임. <br> 반전 실체의 착시 : 도형의 한쪽이 튀어나와 보여서 입체로 지각되는 착시 현상."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "19",
            answerAsk : "색광에서 Red, Blue가 혼합될 때 그 결과 색은?",
            answerChoice : {
                1: "Cyan",
                2: "Yellow",
                3: "Magenta",
                4: "White",
            },
            answerResult : "3",
            answerEx : "색광혼합은 가산혼합으로 빛의 삼원색인 RGB(빨강, 초록, 파랑)의 혼합을 말한다.<br>가산혼합은 혼합할수록 명도와 채도가 높아진다.<br>R+G=노랑<br>R+B=자홍색(=마젠타)<br>G+B=청자색(=시안)<br>R+G+B=하얀색"
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "20",
            answerAsk : "다양한 구성 요소끼리 하나의 규칙으로 단일화시키는 원리는?",
            answerChoice : {
                1: "주조",
                2: "연속",
                3: "통일",
                4: "반복",
            },
            answerResult : "3",
            answerEx : "다양한 구성 요소끼리 하나의 규칙으로 단일화 시키를 원리를 통일과 변화라고 한다.<br>통일 -하나의 규칙으로 단일화 시키는 것, 디자인의 질서가 느껴짐 지나치면 지루해짐<br>변화 -통일의 일부에 변화를 주는 것 지루해질 수 있는 통일성에 자극을 주며 흥미를 부부여, 변화가 지나치면 무질서 해짐."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "21",
            answerAsk : "다음은 어떤 검색엔진의 사용에 대한 설명인가? <br> 특정한 분야 별로 어떤 정보들이 존재하는지 알고 싶을 때 유용하며, 찾고자 하는 것에 대하여 특정한 주제어, 키워드, 등을 알기 힘들어도 대분류를 통해 점차 범위를 좁혀가면서 정보를 찾을 수 있다. 하지만 원하는 정보를 얻기까지 대분류 > 중분류 > 소분류와 같이 여러 단계를 거쳐야 하고 길을 잘못 들면 시간만 낭비할 수 있다.",
            answerChoice : {
                1: "키워드 검색엔진",
                2: "주제별 검색엔진",
                3: "혼합 검색엔진",
                4: "메타 검색엔진",
            },
            answerResult : "2",
            answerEx : "특정한 분야 별로 어떤 정보들이 존재하는지 알고 싶을 때 유용하며, 찾고자 하는 것에 대하여 특정한 주제어, 키워드, 등을 알기 힘들어도 대분류를 통해 점차 범위를 좁혀가면서 정보를 찾을 수 있는 검색엔진을 주제별 검색엔진이라 칭한다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "22",
            answerAsk : "하이퍼텍스트에서 사용되는 <A>태그에서 A가 지칭하는 용어는?",
            answerChoice : {
                1: "앤드(And)",
                2: "오토(Auto)",
                3: "앵커(Anchor)",
                4: "어너니머스(Anonymous)",
            },
            answerResult : "3",
            answerEx : "A태그에서 A는 앵커(Anchor)를 말합니다.",
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "23",
            answerAsk : "HTML 문서의 시작과 끝을 표시하기 위해 사용되는 태그로 옳은 것은?",
            answerChoice : {
                1: "<T></T>",
                2: "<body></body>",
                3: "<html></html>",
                4: "<link></link>",
            },
            answerResult : "3",
            answerEx : "HTML 문서의 시작과 끝을 표시하기 위해 사용되는 태그는 <html></html>입니다. "
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "24",
            answerAsk : "상호작용을 지원하는 웹페이지 제작을 위한 CGI의 설명으로 틀린 것은?",
            answerChoice : {
                1: "웹브라우저와 웹 서버, 응용 프로그램 간의 일종의 인터페이스이다.",
                2: "방명록이나 카운터, 게시판 등에 사용된다.",
                3: "웹 서버 프로그램은 CGI 기능을 사용할 수 없다.",
                4: "HTML의 <FORM> 태그를 이용하여 CGI 프로그램으로 데이터를 전달한다.",
            },
            answerResult : "3",
            answerEx : "CGI는 사용자의 응답에 반응하여 홈페이지를 동적으로 보여주는 기법으로, 웹 서버가 사용자로부터 데이터를 입력받고 이에 따른 응답을 제공합니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "25",
            answerAsk : "웹브라우저(Web Browser)가 아닌 것은?",
            answerChoice : {
                1: "아파치",
                2: "크롬",
                3: "파이어폭스",
                4: "오페라",
            },
            answerResult : "1",
            answerEx : "아파치는 Apache HTTP Server(HTTPD)라고 불리며, 오픈소스 소프트웨어 그룹인 아파치 소프트웨어 재단에서 만드는 웹서버 프로그램입니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "26",
            answerAsk : "다음이 설명하고 있는 통신 프로토콜은? <br> 컴퓨터 시스템의 직렬포트를 이용한 인터넷에 연결된 호스트를 통해 컴퓨터에 접속하는 프로토콜",
            answerChoice : {
                1: "TCP/IP",
                2: "SLIP/PPP",
                3: "ARP/UDP",
                4: "POP/SMTP",
            },
            answerResult : "2",
            answerEx : "TCP/IP : 메세지를 송신, 수신하는 사용자의 정보와 주소를 묶어서 패킷단위로 나눠주며 연결지향형 프로토콜<br>SLIP/PPP : 컴퓨터 시스템의 직렬포트를 이용한 인터넷에 연결된 호스트를 통해 컴퓨터를 접속하는 프로토콜<br>ARP/UDP : 무연결전송 프로토콜로 에러가 있어도 확인할 수 없어 데이터의 신뢰성이 낮다.<br>POP/SMTP : 메일을 송수신을 위해 사용되는 프로토콜"
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "27",
            answerAsk : "인터넷을 이용하여 한 컴퓨터에서 다른 컴퓨터로 파일 전송을 하는 프로토콜은?",
            answerChoice : {
                1: "FTP",
                2: "Usenet",
                3: "Telnet",
                4: "ICMP",
            },
            answerResult : "1",
            answerEx : "정답은 FTP로 File Transfer Protocol의 약자이며 컴퓨터들이 파일을 교환하기 위한 통신 규약이다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "28",
            answerAsk : "HTML 문서에 삽입되는 자바 프로그램으로 대화형 페이지를 만드는데 효과적으로 사용될 수 있는 것은?",
            answerChoice : {
                1: "컨트롤",
                2: "컴포넌트",
                3: "클래스",
                4: "애플릿",
            },
            answerResult : "4",
            answerEx : "애플릿은 별도의 웹 브라우저를 통해 홈페이지에서만 실행이 가능한 프로그램으로, 작은 의미의 자바 응용프로그램이다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "29",
            answerAsk : "HTML 문서의 작성자, 날짜, 주요 단어 등 웹브라우저의 내용에는 나타나지 않는 웹 문서의 일반 정보를 나타낼 때 사용하는 태그는?",
            answerChoice : {
                1: "<title>",
                2: "<meta>",
                3: "<head>",
                4: "<body>",
            },
            answerResult : "2",
            answerEx : "<head> - <meta> : 문서의 작성자, 날짜, 주요 단어등 웹브라우저의 내용에는 나타나지 않는 웹 문서의 일반 정보를 나타낼 때 사용 (예시 : <meta charset='UTF-8'> 등..)"
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "30",
            answerAsk : "일반적인 웹브라우저(Web Browser)의 기능이 아닌 것은?",
            answerChoice : {
                1: "인터넷을 편리하게 사용할 수 있다.",
                2: "원하는 웹사이트에 쉽게 접속할 수 있다.",
                3: "컴퓨터 바이러스를 치료해 준다.",
                4: "자주 이용하는 웹사이트의 목록을 관리할 수 있다.",
            },
            answerResult : "3",
            answerEx : "3은 백신프로그램에 대한 설명입니다. (백신프로그램 종류 = V3, 알약 등등..)"
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "31",
            answerAsk : "HTML의 테이블과 관련이 없는 태그는?",
            answerChoice : {
                1: "<tr>",
                2: "<th>",
                3: "<dt>",
                4: "<caption>",
            },
            answerResult : "3",
            answerEx : "<DT> : 목록 생성에 관련된 태그로 순서가 없는 목록의 제목태그"
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "32",
            answerAsk : "네트워크 구조 중 링(Ring)형의 특징에 대한 설명으로 틀린 것은?",
            answerChoice : {
                1: "노드의 변경 및 추가가 쉽다.",
                2: "2개 이상은 각 노드들이 고리 형태로 연결되어 있다.",
                3: "전송중인 데이터는 목적 컴퓨터에 도달할 때까지 링을 통해 전달된다.",
                4: "잡음(noise)에 강하다",
            },
            answerResult : "1",
            answerEx : "링(Ring)형은 네트워크를 구성하는 노드들이 하나의 링을 형성하는 것으로, 노드 단말기를 추가, 제거하는 동안 데이터 전송에 문제가 발생하는 어려움이 있다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "33",
            answerAsk : "구글(Google) 검색엔진에 대한 설명으로 틀린 것은?",
            answerChoice : {
                1: "로봇(Robot) 프로그램을 이용하는 단어별 다국어 검색 엔진이다.",
                2: "검색 결과와 유사한 문서들을 [비슷한 페이지] 링크로 보여준다.",
                3: "PDF 형태의 정보 검색이 가능하다.",
                4: "모든 검색어에 대해 기본 값으로 OR 연산을 실행한다.",
            },
            answerResult : "4",
            answerEx : "4번은 자동 AND 검색에 관한 내용이다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "34",
            answerAsk : "다음이 설명하고 있는 것은? <br>  기존 HTML의 단점을 개선하여 동적인 웹페이지를 만들 수 있도록 하기 위한 기술 <br> - 문서의 각 요소를 하나의 객체로서 위치와 스타일을지정할 수 있고, 또한 사용자와의 상호작용을 첨가하거나 움직임이 가능함 <br> - 자바스크립트를 기반으로 함",
            answerChoice : {
                1: "Shell",
                2: "Ruby",
                3: "DHTML",
                4: "XML",
            },
            answerResult : "3",
            answerEx : "shell : 유닉스 운영 체제와 인터페이스를 위한 명령어. <br> Ruby : 일본인 프로그래머 마츠모토 유키히로라는 사람이 개발한 객체 지향 프로그래밍 언어 <br> XML : HTML을 개선한 자세대 인터넷 언어, 새롭게 태그를 정의할 수 있다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "35",
            answerAsk : "HTML(Hyper Text Markup Language)의 특징으로 거리가 먼 것은?",
            answerChoice : {
                1: "HTML은 Markup 언어이다.",
                2: "HTML 문서는 ASCII 코드로 구성된 일반적인 텍스트 파일이다.",
                3: "HTML 문서에는 동영상을 재생할 수 없다.",
                4: "HTML은 컴퓨터 시스템이나 운영체제에 독립적이다.",
            },
            answerResult : "3",
            answerEx : "HTML문서에는 동영상 재생 기능도 지원합니다. (멀티미디어 기능을 지원하는 것을 말합니다.)"
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "36",
            answerAsk : "자바스크립트에서 사용되는 연산자가 아닌 것은?",
            answerChoice : {
                1: "|, ||",
                2: "&, &&",
                3: ">>, >>>",
                4: "<<, <<<",
            },
            answerResult : "4",
            answerEx : "4번은 시프트연산자에 관한 내용으로 시프트 연산자는 <<, >>, >>> 만이 존재한다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "37",
            answerAsk : "미국의 대학과 연구기관, 일부 민간회사의 컴퓨터 센터를 연결하는 광역 학술 연구망은?",
            answerChoice : {
                1: "NSFNET",
                2: "ARPANET",
                3: "BITNET",
                4: "CSNET",
            },
            answerResult : "4",
            answerEx : "NSFNET : 전 미국의 교육 연구 분야를 포함한 미국 과학 재단 산하 네트워크로 슈퍼컴퓨터 사이트를 연결하기 위해 구축한 광역의 고속 네트워크.<br>ARPANET : 군사목적으로 개발된 인터넷의 시초인 네트워크<br>BITNET : 전 세계의 대학이나 연구 기관 등의 컴퓨터 센터를 연결하는 광역 학술 정보망"
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "38",
            answerAsk : "두 개의 컴퓨터 사이에 정보교환을 위해 사용되는 규칙을 의미하는 것은?",
            answerChoice : {
                1: "스트림",
                2: "패킷",
                3: "프로토콜",
                4: "인터페이스",
            },
            answerResult : "3",
            answerEx : "프로토콜은 컴퓨터 네트워크를 통하여 데이터 전송을 오류없이 효율적으로 구현하기 위해 지켜야 하는 통신의 약속과 규범입니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "39",
            answerAsk : "인터넷상의 서버에 자신의 계정이 있어 서버 접속을 위해 사용자명과 패스워드를 입력하는 행위를 지칭하는 용어는?",
            answerChoice : {
                1: "로그아웃(logout)",
                2: "로그인(login)",
                3: "링크(Link)",
                4: "서핑(surfing)",
            },
            answerResult : "2",
            answerEx : "로그아웃 : 접속을 끊음<br>링크 : 정보의 연결<br>서핑 : 인터넷에서 정보검색하고 이용하는 것",
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "40",
            answerAsk : "자바스크립트에서 일정 시간마다 지정된 처리를 반복 호출하는 함수는?",
            answerChoice : {
                1: "escape( )",
                2: "clearTimeout( )",
                3: "setInterval( )",
                4: "setTimeout( )",
            },
            answerResult : "3",
            answerEx : "window.setinterval() 메소드는 일정한 간격을 두고 지정된 명령을 주기적으로 실행시킵니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "41",
            answerAsk : "다음 웹디자인 프로세스를 순서대로 바르게 나열한 것은? <br> (가) 콘텐츠 준비 (나) 주제설정 (다) 레이아웃 설계 (라) 페이지 제작 (마) 서버에 업로드 (바) 유지보수 (사) 테스트 및 수정",
            answerChoice : {
                1: "(가>나>다>라>마>바>사)",
                2: "(나>가>다>라>사>마>바)",
                3: "(가>다>바>사>나>라>마)",
                4: "(나>가>다>라>마>사>바)",
            },
            answerResult : "2",
            answerEx : "웹 디자인 프로세스 과정 <br> 1. 주제 설정 <br>2. 콘텐츠 준비<br>3. 레이아웃 설계<br>4. 페이지 제작<br>5. 테스트 및 수정<br>6. 서버에 업로드<br>7. 유지 및 보수"
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "42",
            answerAsk : "웹사이트 구축 시 고려사항으로 가장 거리가 먼 것은?",
            answerChoice : {
                1: "명확하고 일관된 내비게이션을 유지한다.",
                2: "가급적이면 플러그인이 필요 없는 페이지를 만든다.",
                3: "메뉴별로 사용한 모든 이미지는 유지보수를 위해 같은 폴더에 관리한다.",
                4: "안정된 기술을 사용한다.",
            },
            answerResult : "3",
            answerEx : "이미지는 메뉴와 자료의 구조에 따라 폴더별로 관리할 수 있습니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "43",
            answerAsk : "웹 문서에 텍스트나 이미지 또는 멀티미디어 요소를 클릭하면 외부의 텍스트나 이미지, 기타 다른 멀티미디어 요소로 변경되는 것은?",
            answerChoice : {
                1: "테이블",
                2: "하이퍼링크",
                3: "프레임",
                4: "태그",
            },
            answerResult : "2",
            answerEx : "웹 문서에 텍스트나 이미지 또는 멀티미디어 요소를 클릭하면 외부의 텍스트나 이미지, 기타 다른 멀티미디어 요소로 변경되는 것을 하이퍼링크라 합니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "44",
            answerAsk : "컴퓨터 그래픽의 이미지 표현 방식 중 벡터에 대한 설명으로 거리가 먼 것은?",
            answerChoice : {
                1: "이미지가 복잡하지 않은 글자나 로고, 캐릭터 등에 적합하다.",
                2: "이미지를 축소, 확대하여도 이미지 질에 손상이 없다.",
                3: "도형으로 이루어져서 선과 면이 뭉개지지 않아 깔끔하게 표현된다.",
                4: "픽셀이 모여서 점과 점 사이를 연결하여 이미지가 구성되는 방식이다.",
            },
            answerResult : "4",
            answerEx : "픽셀이 모여서 점과 점사이를 연결하여 이미지가 구성되는 방식은 비트맵 방식입니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "45",
            answerAsk : "웹상에 사용되는 파일 포맷 중 GIF와 JPG의 장점을 합친 형태로 GIF와는 달리 투명도 자체를 조절할 수 있는 특징을 가진 것은?",
            answerChoice : {
                1: "AI",
                2: "PDF",
                3: "PNG",
                4: "PSD",
            },
            answerResult : "3",
            answerEx : "AI : 일러스트의 일반적인 파일 포맷 <br>PDF :어도비사가 만든 국제 표준 페이지 기술 언어인 포스트스크립트를 기반으로 개발한 소용량의 전자 문서 파일<br>PSD : 포토샵 자체의 저장 방식으로 채널, 레이어, 패스 등이 모두 저장됨"
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "46",
            answerAsk : "동적인 타이포그래피를 나타내는 것으로 틀린 것은?",
            answerChoice : {
                1: "키네틱 타이포그래피",
                2: "스테이틱 타이포그래피",
                3: "무빙 타이포그래피",
                4: "모션 타이포그래피",
            },
            answerResult : "2",
            answerEx : "스테이틱 타이포그래피는 정적 타이포그래피에 속하며 2차원 평면에 인쇄하거나, 화면에 출력하는 기능을 말합니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "47",
            answerAsk : "2D 애니메이션의 종류가 아닌 것은?",
            answerChoice : {
                1: "셀 애니메이션",
                2: "모래 애니메이션",
                3: "페이퍼 애니메이션",
                4: "클레이 애니메이션",
            },
            answerResult : "4",
            answerEx : "클레이 애니메이션은 3d와 같이 입체적으로 표현하기 때문에 2d라고 보기 어렵다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "48",
            answerAsk : "3차원 그래픽스에서 렌더링 과정과 거리가 먼 것은?",
            answerChoice : {
                1: "은면 제거",
                2: "그림자 표현",
                3: "원근 투명",
                4: "텍스쳐 매핑",
            },
            answerResult : "3",
            answerEx : "렌더링 과정: 투영->클리핑->은면 처리->쉐이딩(그림자)->매핑"
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "49",
            answerAsk : "자바스크립트에 사용되는 연산자의 설명으로 틀린 것은?",
            answerChoice : {
                1: "'서로 같지 않다'의 관계연산자는 '!='이다.",
                2: "'서로 같다'의 관계연산자는 '='이다.",
                3: "'++'는 증가 연산자이다.",
                4: "'^'는 논리 연산자이다.",
            },
            answerResult : "2",
            answerEx : "서로 같다는 == 입니다"
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "50",
            answerAsk : "동영상 파일 포맷으로 틀린 것은?",
            answerChoice : {
                1: "*.mp3",
                2: "*.asf",
                3: "*.avi",
                4: "*.rm",
            },
            answerResult : "1",
            answerEx : "mp3는 오디오 파일 포맷입니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "51",
            answerAsk : "안티앨리어싱(Anti-aliasing)에 대한 설명으로 맞는 것은?",
            answerChoice : {
                1: "외곽선의 계단현상을 선명하게 한다.",
                2: "외곽선의 계단현상을 부드럽게 한다.",
                3: "외곽선의 계단현상을 만든다.",
                4: "외곽선의 계단현상을 사각 형태로 만든다.",
            },
            answerResult : "2",
            answerEx : "안티앨리어싱은 비트맵 이미지의 곡선이나 사선 같은 외곽선을 부드럽게 만드는 것을 말합니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "52",
            answerAsk : "인터넷에서 사용 가능한 사운드 파일 포맷이 아닌 것은?",
            answerChoice : {
                1: "pdf",
                2: "aiff",
                3: "wav",
                4: "au",
            },
            answerResult : "1",
            answerEx : "PDF는 디지털 출판을 목적으로 만든 어도비 아크로뱃 파일 포맷입니다. 전자책과 CD출판에 사용 되며, 용량이 작고 컴퓨터 기종에 관계없이 문서가 호환됩니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "53",
            answerAsk : "애니메이션 제작과정 중 최초 단계로 중요 장면들을 열거해 놓은 그림을 무엇이라 하는가?",
            answerChoice : {
                1: "Recoding",
                2: "Planning",
                3: "Story Board",
                4: "Effect Sound",
            },
            answerResult : "3",
            answerEx : "최초의 단계로 중요 장면들을 열거해 놓은 그림을 스토리보드라고 합니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "54",
            answerAsk : "캠코더에서 얻은 동영상클립을 편집하여 결과물을 얻기에 적합한 소프트웨어가 아닌 것은?",
            answerChoice : {
                1: "Premiere",
                2: "Movie Maker",
                3: "Vegas",
                4: "Media Player",
            },
            answerResult : "4",
            answerEx : "Media Player는 음성/영상 재생 프로그램입니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "55",
            answerAsk : "사용할 수 있는 색상의 수가 제한될 경우에 주로 활용하며, 적은 수의 색상으로 눈의 착시현상을 이용하여 여러 색을 사용한 것처럼 효과를 얻을 수 있는 방법은?",
            answerChoice : {
                1: "Modeling",
                2: "Rotating",
                3: "Dithering",
                4: "Resolution",
            },
            answerResult : "3",
            answerEx : "디더링(Dithering)은 제한된 색을 이용하여 음영이나 색을 나타내는 것이며, 여러 컬러의 색을 최대한 맞추는 과정이다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "56",
            answerAsk : "컴퓨터 그래픽스(Computer Graphics)에 대한 정의로 틀린 것은?",
            answerChoice : {
                1: "컴퓨터의 하드웨어와 소프트웨어를 이용하여 도형, 그림, 사진 이미지 등의 시각적 이미지를 만들어 내고 디지털화(Digitalize) 시키는 것이다.",
                2: "컴퓨터 그래픽스는 크게 2D 그래픽스와 3D 그래픽스로 나눌 수 있다.",
                3: "활용 범위가 매우 넓으며, 특히 영화나 영상물 등 의 멀티미디어 분야에서 가장 효과적으로 활용되고 있다.",
                4: "전통적인 회화 방식을 응용하여 결과물을 디지털화 시킨 것은 제외한다.",
            },
            answerResult : "4",
            answerEx : "전통적 회화 방식을 사용하여 결과물을 디지털화시킨 것도 컴퓨터 그래픽스에 포함됩니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "57",
            answerAsk : "다음이 설명하고 있는 웹 그래픽 제작 소프트웨어의 기능으로 옳은 것은? <br> 여러 층으로 나누어진 이미지를 겹쳐 새로운 이미지를 만드는 방법이며 단계별로 별도의 작업이 가능해지므로 효율적인 작업수행을 할 수 있다.",
            answerChoice : {
                1: "레이어",
                2: "레벨",
                3: "오브젝트",
                4: "심볼",
            },
            answerResult : "1",
            answerEx : "레이어는 서로 겹겹이 쌓인 투명한 시트와 비슷하며 레이어가 있기 때문에 합성 편집이 더 용이하다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "58",
            answerAsk : "컴퓨터 그래픽스 활용 분야로 가장 거리가 먼 것은?",
            answerChoice : {
                1: "VR(Virtual Reality)",
                2: "Animation",
                3: "CAM",
                4: "Simulation",
            },
            answerResult : "3",
            answerEx : "CAM(Computer Aided Manufacture)은 컴퓨터를 이용한 제조과정의 지원을 의미하는 것으로 제조 공정에 컴퓨터를 활용함으로써 생산성을 향상하는 것 입니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "59",
            answerAsk : "1946년 미국의 “에커드”와 “모클리”에 의해 개발된 세계 최초의 컴퓨터는?",
            answerChoice : {
                1: "애플",
                2: "맥킨토시",
                3: "에니악",
                4: "IBM",
            },
            answerResult : "3",
            answerEx : "최초의 전자식 컴퓨터로 진공관을 사용한 것은 에니악(ENIAC)입니다."
        },
        {
            answerType : "웹디자인기능사 2015년 01회",
            answerNum : "60",
            answerAsk : "웹 사이트 기획 시 좋은 정보구조 설계를 위해 고려해야할 사항으로 틀린 것은?",
            answerChoice : {
                1: "정보의 양",
                2: "정보의 상하관계",
                3: "정보의 일관성",
                4: "정보의 모호성",
            },
            answerResult : "4",
            answerEx : "좋은 정보구조를 설계하기 위해서는 비모호성(모호하지 않은=명확하고 간결한) 정보가 필요합니다."
        }
    ];

const quizWrap = document.querySelector(".quiz__wrap");
let quizScore = ""; //변수로 만들어서 데이터 값이 조건문에 따라 변하게 끔 하기.

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>
        `);

        console.log(exam);
    });

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

    quizWrap.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];  //문제 번호  : number(index)가 0일 땐 첫 번째 문제, 1이면 두 번째 문제라는 것을 quizSelectsWrap으로 설정한 것 입니다.
        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");
            const divBox2 = document.createElement("div");
            quizSelectsWrap.appendChild(divBox).innerHTML = `<p class="result">${question.answerEx}</p>`
            quizSelectsWrap.appendChild(divBox2).innerHTML = `<p class="result">정답은 ${question.answerResult} 입니다.</p>`
        }
    });

    //전체 문제수와 사용자가 맞힌 갯수 확인하기
    let scoreSet = Math.floor(quizScore / quizInfo.length * 100); //Math.floor : 소숫점을 없애준다. || 맞힌 개수 나누기 퀴즈 총 갯수 x 100

    if(quizScore >= 60){
        document.querySelector(".quiz__confirm .ex").innerHTML = `당신은 ${quizInfo.length} 문제 중 ${quizScore}을 맞추셨습니다. ! 합격 !`
    } else {
        document.querySelector(".quiz__confirm .ex").innerHTML = `당신은 ${quizInfo.length} 문제 중 ${quizScore}을 맞추셨습니다. ! 불합격 !`
    }
}
//정답클릭
document.querySelector(".quiz__confirm .check").addEventListener("click", answerQuiz); //정답을 클릭했을 때 앤써 퀴즈를 실행시켜라.