Quiz 객관식(한문제) 유형

//문제 정보
const quizInfo = [
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "1",
        answerAsk: "디자인의 합목적성에 대한 설명으로 옳은 것은?",
        answerChoice: {
            1: "정해진 바탕으로 최상의 디자인을 창출하는 것을 말한다.",
            2: "디자인을 할 때 목적에 맞는 수단을 사용하였는지를 말한다.",
            3: "보다 실용적이고 심미적으로 개선, 발전시키는 것을 말한다.",
            4: "개성적인 미의식을 창출해내는 것을 말한다."
        },
        answerResult: "2",
        answerEx: "디자인을 할 때 목적에 맞는 수단을 사용하였는지를 말한다.",
    },

    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "2",
        answerAsk: "식욕을 자극하는 색상으로 옳은 것은?",
        answerChoice: {
            1: "빨강",
            2: "청록",
            3: "보라",
            4: "검정"
        },
        answerResult: "1",
        answerEx: "붉은색계열은 식욕을 자극하는 색입니다.",
    },

    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "3",
        answerAsk: "동시대비에 해당하지 않는 것은?",
        answerChoice: {
            1: "명도대비",
            2: "색상대비",
            3: "보색대비",
            4: "유사대비"
        },
        answerResult: "4",
        answerEx: "동시대비 : 2가지 이상의 색을 동시에 볼때 일어나는 대비현상 / 색상대비, 명도대비, 채도대비, 보색대비가 있음.",
    },

    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "4",
        answerAsk: "다음 중 색의 3속성이 아닌 것은",
        answerChoice: {
            1: "색상",
            2: "명도",
            3: "채도",
            4: "대비"
        },
        answerResult: "4",
        answerEx: "색의 3속성 : 색을 구별하는 데 필요한 색상(H), 명도(V), 채도(C)를 색의 3요소 또는 색의 3속성이라고 합니다. / 색상 :유채색을 분류할 때 각 색에 붙인 명칭 또는 기호를 그 색의 색상이라고 함. / 명도 : 물체의 밝고 어두운 정도를 말함. 검은색 0, 하얀색 10으로 하고 그 중간 11단계의 회색 단계를 그레이스케일이라 하며 명도의 기준척도호 사용 함. / 채도 : 색의 순도, 색의 선명하고 탁한 정도를 말함. 색의 포화도 , 선명도라고도 함.",
    },

    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "5",
        answerAsk: "다음 중 주위색의 영향으로 오히려 인접색에 가깝게 느껴지는 현상을 의미하는 것은?",
        answerChoice: {
            1: "동화 현상",
            2: "명시현상",
            3: "색의 수축성",
            4: "중량현상"
        },
        answerResult: "1",
        answerEx: "동화현상은 동류의 원리로 가장 가까운 색채끼리의 배색은 친근감과 조화를 느끼게 합니다.",
    },

    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "6",
        answerAsk: "유채색의 기본 색명은 먼셀 10색상에 따라 10개의 색명으로 정의하였다. 다음 중 색명과 기호의 연결이 다른 것은?",
        answerChoice: {
            1: "주황 - YR",
            2: "청록 - BG",
            3: "남색 - BR",
            4: "초록 - G"
        },
        answerResult: "3",
        answerEx: "먼셀의 10색상 = 기본색상 + 중간색상 / 빨강(R), 주황(YR), 노랑(Y), 연두(GY), 초록(G), 청록(BG), 파랑(B), 남색(PB), 보라(P), 자주(RP)",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "7",
        answerAsk: "디자인 원리 중 율동의 요소와 거리가 먼 것은?",
        answerChoice: {
            1: "대칭",
            2: "점증",
            3: "반복",
            4: "변칙"
        },
        answerResult: "1",
        answerEx: "율동은 리듬을 표현하는 것입니다. 반복되는 악센트, 순환하는 강약, 시각적 자극과 자극 간의 간격이라고 할 수 있습니다. 반복, 점증, 변칙이 대표적이며 대칭은 균형과 관련이 있습니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "8",
        answerAsk: "색광혼합의 결과가 잘못된 것은?",
        answerChoice: {
            1: "Red + Green = Yellow",
            2: "Green + Blue = Cyan",
            3: "Red + Green + blue = Black",
            4: "Red + Blue = Magenta"
        },
        answerResult: "3",
        answerEx: "Red + Green + blue =  WHITE",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "9",
        answerAsk: "통일성을 주는 방법과 거리가 먼 것은?",
        answerChoice: {
            1: "각 요소들을 근접시킨다.",
            2: "각 요소들을 반복시킨다.",
            3: "각 요소들을 연속시킨다.",
            4: "각 요소들을 분리시킨다."
        },
        answerResult: "4",
        answerEx: "통일성을 주는 방법에는 각 요소들마다 근접, 반복, 연속 등이 있습니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "10",
        answerAsk: "다음이 설명하고 있는 표색계는? - 헤링의 4원색설을 기본으로 한다./색상 분할을 원주의 4등분이 서로 보색이 되도록 하였다/8가지 기본색을 다시 각각 3색상으로 나누어 24색상환으로 완성하였다.",
        answerChoice: {
            1: "CIE 표색계",
            2: "NCS 표색계",
            3: "오스트발트 표색계",
            4: "DIN 표색계"
        },
        answerResult: "3",
        answerEx: "오스트발트는 헤링의 4원색설, 즉 노란색과 남색,빨간색과 청록색인 서로 다른 보색을 의도적으로 연결하여 배치하고 그 사이에 주황색과 파란색,보라색과 연두색을 배치하여 8가지의 기본색을 정립하였고 또 이 8색상을 다시 3색상으로 나누어 24색상이 되도록 하였다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "11",
        answerAsk: "먼셀표색계에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "색상은 H(hue)라고 한다.",
            2: "명도는 V(value)라고 한다.",
            3: "채도는 C(chroma)라고 한다.",
            4: "표기는 HVC로 한다."
        },
        answerResult: "4",
        answerEx: "표기는 HV/C로 합니다",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "12",
        answerAsk: "태양광선이 투사되는 위치에 프리즘을 놓아 굴절된 광선을 스크린에 투사하여 나타난 여러 가지 색의 띠를 무엇이라 하는가?",
        answerChoice: {
            1: "전자파",
            2: "감마선",
            3: "스펙트럼",
            4: "자외선"
        },
        answerResult: "3",
        answerEx: "전자파 : 전기 및 자기의 흐름에서 발생하는 일종의 전자기 에너지 / 감마선 : 방사성 물질에서 방출되는 방사선 / 자외선 : 태양광의 스펙트럼을 사진으로 찍었을 때, 가시광선의 단파장보다 바깥쪽에 나타나는 눈에 보이지 않는 빛.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "13",
        answerAsk: "미술 공예 운동의 창시자는?",
        answerChoice: {
            1: "윌리엄 모리스",
            2: "헨리 포드",
            3: "반 데 벨데",
            4: "무테지우스"
        },
        answerResult: "1",
        answerEx: "윌리엄 모리스 : 수공업중심으로 근대 미술 공예 운동의 창시자 / 헤르만 무테지우스 : 기계중심으로 독일공작연맹(DWB)의 창시자",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "14",
        answerAsk: "색채조화의 공통원리에 관한 설명을 틀린 것은?",
        answerChoice: {
            1: "질서의 원리 - 색채의 조화는 의식할 수 있으며 효과적인 반응을 일으키는 질서 있는 계획에 따라 선택된 색채들에서 생긴다.",
            2: "비모호성의 원리 - 색채조화는 두 색 이상의 배색에 있어서 모호함이 없는 명료한 배색에서만 얻어진다.",
            3: "동류의 원리 - 가장 가까운 색채끼리의 배색은 보는 사람에게 친근감을 주며 조화를 느끼게 한다.",
            4: "대비의 원리 - 배색된 색채들이 서로 공통되는 상태와 속성을 가질 때 그 색채는 조화된다."
        },
        answerResult: "4",
        answerEx: "공통서의 원리 - 배색된 색채들이 서로 공통되는 상태와 속성을 가질 때 그 색채군은 조화된다는 원리. / 참고로 저드의 조화론에는 질서의 원리, 친근성의 원리, 공통성의 원리, 명백성(비모호성)의 원리가 있습니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "15",
        answerAsk: "형과 형태에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "형은 단순히 우리 눈에 비쳐지는 모양이다.",
            2: "형태는 일정한 크기, 색채, 질감을 가진 모양이다.",
            3: "형은 현실적인 형과 이념적 형이 있다.",
            4: "형은 3차원적인 표현이고, 형태는 2차원적인 표현이다."
        },
        answerResult: "4",
        answerEx: "형은 2차원적 표현이고, 형태는 3차원적인 표현입니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "16",
        answerAsk: "디자인의 원리 중 비례에 대한 설명이 잘못된 것은?",
        answerChoice: {
            1: "균형의 가장 정형적인 구성 형식이다.",
            2: "부분과 부분, 부분과 전체에 균형이 잡혀있음을 말한다.",
            3: "조형을 구성하는 모든 단위의 크기를 결정한다.",
            4: "객관적 질서와 과학적 근거를 명확하게 드러내는 구성 형식이다."
        },
        answerResult: "1",
        answerEx: "비례 : 부분과 부분 또는 부분과 전체의 수량적 관계를 말함. 가장 친근하고 구체적인 구성형식이며, 보는 사람의 감정에 직접적으로 호소하는 힘을 가지고 있을 뿐만 아니라 객관적 질서와 과학적 근거를 명확하게 드러내는 구성형식임. / 비례의 종류 : 황금비, 황금비직사각형, 루트 직사각형, 정수비, 수열비 등이 있으며, 우리나라의 전통비례로는 금강 비례가 있음.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "17",
        answerAsk: "균형을 잡기 위한 디자인 기본요소가 아닌 것은",
        answerChoice: {
            1: "명암",
            2: "반복",
            3: "크기",
            4: "질감"
        },
        answerResult: "2",
        answerEx: "반복 : 동일한 요소나 대상이 일정한 간격을 두고 되풀이되는 것. 대상의 의미나 내용을 강조하는 수단으로 쓰여짐.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "18",
        answerAsk: "다음 중 주목성에 대한 설명으로 잘못된 것은?",
        answerChoice: {
            1: "명시성이 높은 색은 어느 정도 주목성이 높다.",
            2: "따뜻한 난색은 차가운 한색보다 주목성이 높다.",
            3: "초록색이 빨강보다 주목성이 더 높다.",
            4: "목성은 색의 3속성과 관계가 있다."
        },
        answerResult: "3",
        answerEx: "주목성이란 시선유도를 잘하는 성질을 의미하는 용어로 빨강이 초록색보다 주목성이 더 높다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "19",
        answerAsk: "다음 중 프로덕트 디자인 분야가 아닌 것은?",
        answerChoice: {
            1: "영상 디자인",
            2: "완구 디자인",
            3: "가전 디자인",
            4: "주방용품 디자인"
        },
        answerResult: "1",
        answerEx: "영상디자인은 시각디자인 4차원 영역에 해당함. 프로덕트(PRODUCT) 디자인은 제품 디자인으로 완구 디자인,가전 디자인,주방용품 디자인이 제품디자인에 해당합니다. 제품디자인은 그외 2차원(벽지디자인, 인테리어 패브릭 디자인)과 3차원(패션 디자인, 가구 디자인, 액세서리 디자인)이 있습니다..",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "20",
        answerAsk: "정보 검색 연산자의 설명으로 옳은 것은?",
        answerChoice: {
            1: "OR : 연산자 좌우 검색어 중 하나라도 들어 있는 자료를 찾는다.",
            2: "구절검색 : 연산자 앞 쪽의 검색어는 포함하고, 뒤 쪽 검색어는 포함하지 않은 자료를 찾는다.",
            3: "AND : 두 개 이상의 단어가 순서대로 연속해서 나오는 것을 찾는다.",
            4: "NOT : 연산자 좌우의 검색어를 모두 만족시키는 자료를 찾는다."
        },
        answerResult: "1",
        answerEx: "구절검색 : 2개이상의 단어를 큰따옴표로 묶어 한단어로 검색 / AND : 연산자 좌우의 검색어를 모두 만족시키는 자료 / 인접연산자 : 두 개 이상의 단어가 순서대로 연속해서 나오는 것을 찾는다",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "21",
        answerAsk: "인터넷 익스플로러 6.0의 [인터넷 옵션]에서 설정할 수 없는 것은?",
        answerChoice: {
            1: "보안",
            2: "열어본 페이지 목록지우기.",
            3: "언어 및 글꼴 선택",
            4: "페이지 설정"
        },
        answerResult: "4",
        answerEx: "페이지 설정은 [파일]메뉴에 있습니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "22",
        answerAsk: "자바스크립트에서 일정한 시간마다 브라우저 상태를 파악하거나 동작을 수행하는데 사용되는 함수는?",
        answerChoice: {
            1: "window.setInterval()",
            2: "window.setTimer()",
            3: "window.timer()",
            4: "window.setTime()"
        },
        answerResult: "1",
        answerEx: "window.setInterval() : 일정한 시간마다 반복되는 함수 / window.setTimer() : 특정 시간마다 이벤트를 발생해야 할때 사용하는 함수",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "23",
        answerAsk: "자바스크립트 브라우저 내장 객체가 아닌 것은?",
        answerChoice: {
            1: "Location 객체",
            2: "Image 객체",
            3: "History 객체",
            4: "Vision 객체"
        },
        answerResult: "4",
        answerEx: "Vision 객체는 자바스크립트 브라우저 내장 객체가 아닙니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "24",
        answerAsk: "<BODY> 태그에서 사용할 수 있는 속성과 그 의미의 연결이 올바르지 않은 것은?",
        answerChoice: {
            1: "BGCOLOR - 배경색을 지정한다.",
            2: "BG - 배경으로 사용될 이미지 파일을 지정한다.",
            3: "TEXT - 일반 글자색을 지정한다.",
            4: "LINK - 링크로 설정한 글자색을 지정한다."
        },
        answerResult: "2",
        answerEx: "배경이미지 삽입하는 태그는 BACKGROUND='이미지파일경로및 이름'",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "25",
        answerAsk: "웹브라우저의 종류가 아닌 것은?",
        answerChoice: {
            1: "Mosaic",
            2: "Opera",
            3: "Leno",
            4: "Internet Explorer"
        },
        answerResult: "3",
        answerEx: "텍스트 기반의 브라우저 : 링스, 아라크네, 삼바 / 그래픽 기반의 브라우저 : Mosaic(모자이크:최조의 그래픽 브라우저), 네스케이프, 핫자바, 오페라, 인터넷 익스플로러등이 있음",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "26",
        answerAsk: "다음이 설명하고 있는 것은? - 인터넷상에 일정 용량의 저장 공간을 제공하여 플로피디스켓과 같은 다른 보조기억장치 없이 인터넷이 연결된 곳이면 어느 곳에서나 파일을 다운로드 및 업로드를 할 수 있는 인터넷 하드디스크 서비스",
        answerChoice: {
            1: "웹 하드",
            2: "슈퍼디스크",
            3: "USB 메모리",
            4: "ZIP 드라이브"
        },
        answerResult: "1",
        answerEx: "웹하드 : 인터넷상에 일정 용량의 저장공간으로 파일을 업로드 다운로드 할 수 있는 기능",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "27",
        answerAsk: "네트워크에 연결된 시스템의 논리주소를 물리주소로 변환 시켜 주는 프로토콜은?",
        answerChoice: {
            1: "TCP",
            2: "IP",
            3: "FTP",
            4: "ARP"
        },
        answerResult: "4",
        answerEx: "ARP : 주소결정 프로토콜 (논리주소=ip주소, 물리주소=MAC주소, 랜카드에 부여된 주소)",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "28",
        answerAsk: "자바스크립트의 변수에 대한 설명으로 옳지 않은 것은?",
        answerChoice: {
            1: "변수를 선언하지 않고 사용하는 경우에는 전역변수가 된다.",
            2: "지역변수는 반드시 함수 내에서만 선언 되어야 한다.",
            3: "지역변수 선언은 Dim 키워드를 사용하여 선언 한다.",
            4: "지역변수는 선언된 중괄호{ } 안에서만 사용할 수 있다."
        },
        answerResult: "3",
        answerEx: "Dim은 비주얼 베이직에서 변수 선언시 사용하는 예약어 / 변수 선언은 var 키워드로 선언합니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "29",
        answerAsk: "IPv4 주소에서 각 클래스별 첫 8bit의 값이 옳은 것은?",
        answerChoice: {
            1: "A: 0000 0000~0111 1110 B: 1000 0001~1011 1111",
            2: "A: 0000 0000~0111 1111 B: 1000 0000~1011 1111",
            3: "A: 0000 0001~0111 1110 B: 1000 0000~1011 1111",
            4: "A: 0000 0001~0111 1111 B: 1000 0001~1011 1111"
        },
        answerResult: "3",
        answerEx: "A클래스는 첫번째 숫자가 127보다 작다. / B클래스는 첫번째 숫자가 128에서 191 까지이다. / C클래스는 첫번째 숫자가 192에서 223 까지이다. / D클래스는 첫번째 숫자가 224에서 255 까지이다. / 클래스 구분하는 방법은 첫번째 숫자가 어디에 해당하느냐에 따라 구분합니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "30",
        answerAsk: "별도의 계정 없이도 누구나 접근하여 파일 전송을 지원 받을 수 있는 인터넷 서비스는?",
        answerChoice: {
            1: "Anonymous FTP",
            2: "GOPHER",
            3: "ARCHIE",
            4: "WHOIS"
        },
        answerResult: "1",
        answerEx: "Anonymous FTP : 익명의 FTP입니다. / GOPHER: 메뉴를 이용한 정보검색 / ARCHIE: FTP서버에서 파일 검색 / WHOIS: 사용자 정보조회",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "31",
        answerAsk: "인터넷 방화벽에 대한 설명으로 올바른 것은?",
        answerChoice: {
            1: "컴퓨터 프로그램에 잠입하여 컴퓨터로 하여금 본래 목적 이외의 처리를 하도록 하는 프로그램이다.",
            2: "접근을 허가받지 않은 정보 시스템에 불법 침투하거나 허가되지 않은 권한을 불법으로 갖는 경우를 말한다.",
            3: "사용자에게 모든 소프트웨어를 합법적으로 사용할 수 있는 권한을 부여하는 것을 말한다.",
            4: "내부 네트워크에 대한 접근을 제어하고, 집중화된 보안성을 향상시킬 수 있다."
        },
        answerResult: "4",
        answerEx: "방화벽은 외부로부터의 불법적인 침입을 차단하기 위해서 설치하는 것입니다. 그러다 보니 내부에서 발생되는 해킹에 대해서는 좀 허술하죠.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "32",
        answerAsk: "다음 URL에 대한 설명으로 틀린 것은? -http//woori.webdesign.co.kr",
        answerChoice: {
            1: "woori - 컴퓨터 이름",
            2: "webdesign - 회사명",
            3: "co - 포트",
            4: "kr - 국가명"
        },
        answerResult: "3",
        answerEx: "URL의 구성 프로토콜://컴퓨터이름.컴퓨터를보유하고 있는 기관의 이름.기관의 종류.국가 로 되어있습니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "33",
        answerAsk: "다음 중 검색 엔진의 형태가 아닌 것은?",
        answerChoice: {
            1: "메타 검색엔진",
            2: "토탈 검색엔진",
            3: "디렉터리형 검색엔진",
            4: "로봇 에이전트형 검색엔진"
        },
        answerResult: "2",
        answerEx: "검색엔진은 크게 주제별, 단어별, 메타검색, 자연어 검색 등으로 구분되어 집니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "34",
        answerAsk: "전자우편에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "컴퓨터 통신망을 통하여 다른 사람에게 서신을 교환하는 것을 의미한다.",
            2: "컴퓨터 작성된 서신은 매우 빠르게 여러 사람에게 동시에 전송할 수 있다.",
            3: "작성된 서신과 함께 각종 디지털 정보를 함께 보낼 수 있다.",
            4: "메일을 보낼 때 사용하는 일반적인 프로토콜은 FTP이고, 받을 때 사용되는 프로토콜은 POP1을 가장 많이 사용 한다."
        },
        answerResult: "4",
        answerEx: "전자우편의 프로토콜은 4개가 있습니다. / SMTP : 메일 송신용프로토콜 / POP  : 메일 수신프로토콜로 POP3을 많이 이용합니다. / IMAP : 메일 수신프로토콜이지만 제목만 수신하는 프로토콜이구요 / MIME : 멀티미디어 데이터 전송할 때 사용하는 프로토콜입니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "35",
        answerAsk: "다음 중 HTML 태그에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "<HTML> : 도움말의 시작",
            2: "<TITLE> : 문서의 제목 시작",
            3: "<BODY> : 문서의 본문 시작",
            4: "<HEAD> : 머리말 시작"
        },
        answerResult: "1",
        answerEx: "<HTML>은 태그언어의 시작",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "36",
        answerAsk: "통신망의 종류와 그에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "LAN - 근거리 통신망",
            2: "WAN - 거대 도시지역의 통신망",
            3: "VAN - 부가가치 통신망",
            4: "ISDN - 종합 정보 통신망"
        },
        answerResult: "2",
        answerEx: "WAN은 광대역통신망으로 국가와 국가, 대륙과 대륙간의 통신망을 의미 합니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "37",
        answerAsk: "도메인 네임으로 사용할 수 없는 것은?",
        answerChoice: {
            1: "saving4u-.com",
            2: "1588-6624.co.kr",
            3: "flower-order.org",
            4: "6288delivery.net"
        },
        answerResult: "1",
        answerEx: "하이픈(-)이 중간에 포함할 수 는 있지만 'saving4u-.com' 처럼 하이픈(-)으로 끝날 수는 없음",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "38",
        answerAsk: "웹 페이지 제작에 관한 설명으로 옳지 않은 것은?",
        answerChoice: {
            1: "텍스트를 읽을 때 그래픽이 방해되지 않아야 한다.",
            2: "웹 페이지에서 가장 중요한 것은 코딩이다.",
            3: "한 페이지에 너무 많은 것을 보여주기 위한 욕심은 버려야 한다.",
            4: "웹디자인의 일관성을 유지해야 한다."
        },
        answerResult: "2",
        answerEx: "코딩이란 HTML 태그 등을 작성하는것으로 중요한 요소이기는 하나 가장 중요한 요소는 아닌듯합니다. 웹페이지 제작에 있어 가독성, 일관된 디자인(일광성), 기능성, 로딩속도 등을 가장 중요시 합니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "39",
        answerAsk: "HTML 태그 중에서 단락 구분을 정의하는 태그는?",
        answerChoice: {
            1: "<LINK>",
            2: "<P>",
            3: "<HR>",
            4: "<FONT>"
        },
        answerResult: "2",
        answerEx: "<P> : 단락(문단) 구분 / <HR> : 수평선 삽입 / <FONT> : 글꼴, 글자크기, 글자 크기 등을 표시",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "40",
        answerAsk: "TIFF, PDF, GIF 및 포스트스크립트 언어 파일 포맷에서 지원하는 무손실 압축 알고리즘은?",
        answerChoice: {
            1: "LZW(Lempel-Ziv-Welch)",
            2: "RLE(Run Length Encoding)",
            3: "FRM(Filmstrip)",
            4: "JPEG(Joint Photographic Experts Group)"
        },
        answerResult: "1",
        answerEx: "TIFF, PDF, GIF 및 포스트스크립트 언어 파일 포맷에서 지원하는 무손실 압축 알고리즘은 LZW입니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "41",
        answerAsk: "수학적 연산에 의해 그래픽 데이터를 표현하는 방식은?",
        answerChoice: {
            1: "벡터 방식",
            2: "비트맵 방식",
            3: "래스터 방식",
            4: "포스트스크립트"
        },
        answerResult: "1",
        answerEx: "비트맵, 픽셀, 래스터, 포스트스크립트 = 모두 다 같은 내용의 말들이죠. 관련 프로그램은 포토샵",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "42",
        answerAsk: "다음 설명과 같은 모델링 기법은? - 단순한 모양에서 점차적으로 복잡한 형상을 구축해 나가는 기법/구름이나 바다 물결, 소용돌이, 담배연기, 산, 강 등을 표현하는 기법",
        answerChoice: {
            1: "프랙탈(Fractal)",
            2: "파티컬(Particle)",
            3: "파라메트릭(Parametric)",
            4: "와이어 프레임(Wire Frame)"
        },
        answerResult: "1",
        answerEx: "파티컬 모델링 : 작은 입자를 표현할때 주로 사용하는 기법(예:먼지, 수증기..) / 와이퍼프레임 모델링 : 선만으로 표현하는 기법",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "43",
        answerAsk: "웹용 이미지로 주로 사용되는 파일포맷은?",
        answerChoice: {
            1: "GIF, JPG",
            2: "PNG, PDF",
            3: "DXF, AI",
            4: "TIFF, EPS"
        },
        answerResult: "1",
        answerEx: "웹에서 주로 쓰는 이미지는 GIF, JPG, BMP, PNG 등이 있습니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "44",
        answerAsk: "화면 해상도에 대한 설명으로 적절한 것은?",
        answerChoice: {
            1: "픽셀의 수를 의미한다.",
            2: "화면해상도는 모니터 화면의 크기에 의해 결정된다.",
            3: "화면해상도가 높을수록 적은 양의 메모리가 필요하다.",
            4: "화면해상도가 낮으면 똑같은 이미지라도 작게 보인다."
        },
        answerResult: "1",
        answerEx: "해상도란 선명도를 의미하며, 픽셀로 구성이 됩니다. 픽셀의 수가 많을 수록 더 선명하겠죠.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "45",
        answerAsk: "플래시에서 맨 앞과 맨 끝 키 프레임에만 변화를 주면 중간 과정을 만들어 주는 것을 무엇이라고 하는가?",
        answerChoice: {
            1: "프레임",
            2: "트위닝",
            3: "어니언스킨",
            4: "플레이헤드"
        },
        answerResult: "2",
        answerEx: "문제와 같은 애니메이션 기법을 보간법 즉, 트위닝이라고 합니다",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "46",
        answerAsk: "컴퓨터 그래픽스의 발달과정 중 세대별 발전단계가 바르게 연결된 것은?",
        answerChoice: {
            1: "제 1세대 - 진공관, 리플레시형 CRT",
            2: "제 2세대 - 집적회로, 벡터 스캔 CRT",
            3: "제 3세대 - 고밀도 집적회로, XY 플로터",
            4: "제 4세대 - 고밀도 집적회로, 래스터 스캔 CRT"
        },
        answerResult: "4",
        answerEx: " 제 1세대 - 진공관, 프리터 XY플로터 / 제 2세대 - 트랜지스터, 리플레시형 CRT / 제 3세대 - IC(집적회로), 벡터 스캔형 CRT / 제 4세대 - 고밀도 집적회로, 래스터 스캔 CRT / 제 5세대 - 바이오 소자와 SVLSI, 멀티미디어, 인터넷, 인공지능 GUI ",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "47",
        answerAsk: "애플사에서 개발한 미디어 재생기로 동영상 파일을 지원 하는 것은?",
        answerChoice: {
            1: "Windows Media Player",
            2: "Real Player",
            3: "Shock Wave",
            4: "Quick Time Player"
        },
        answerResult: "4",
        answerEx: "Windows Media Player : AVI / Real Player : RM, RA / Shock Wave : SWF / Quick Time Player : MOV (애플사에서 개발)",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "48",
        answerAsk: "웹 디자인 프로세스 도입의 장점이 아닌 것은?",
        answerChoice: {
            1: "인력분배를 효율적으로 해준다",
            2: "피드백 및 실행착오를 최소화한다",
            3: "각 팀 간의 의사소통을 원활히 해준다",
            4: "전체 디자인 기간이 길어진다"
        },
        answerResult: "4",
        answerEx: "프로세스 도입을 하게 되면 인력분배를 효율적으로, 피드백 및 실행착오를 최소화 할 수 있으며, 각 파트별 의사소통을 원활하게, 전체 디자인 기간을 단축할 수 있습니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "49",
        answerAsk: "다음 웹 디자인 프로세스를 순서대로 바르게 나열한 것은? ①주제 설정 ②콘텐츠 준비 ③레이아웃 설계 ④페이지 제작 ⑤테스트 및 수정 ⑥서버에 업로드 ⑦유지보수",
        answerChoice: {
            1: "①②③④⑤⑥⑦",
            2: "①②⑤⑥③④⑦",
            3: "①②⑥⑦③④⑤",
            4: "①③④②⑤⑥⑦"
        },
        answerResult: "1",
        answerEx: "웹 디자인 프로세스를 순서대로 나열하면 : 1. 주제 설정 2. 콘텐츠 준비 3. 레이아웃 설계 4. 페이지 제작 5. 테스트 및 수정 6. 서버에 업로드 7. 유지보수 및 관리 이런 순서입니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "50",
        answerAsk: "그래픽 편집 프로그램에 대한 설명으로 옳지 않은 것은?",
        answerChoice: {
            1: "컴퓨터상에 그림이나 문자, 도형 등을 편집할 수 있는 프로그램이다.",
            2: "도안, 작업, 페인팅, 리터칭을 가하여 합성을 하는 프로그램이 해당된다.",
            3: "대표적인 프로그램으로는 포토샵, 페인터, 일러스트레이터, 코렐드로우가 있다.",
            4: "건축, 인테리어의 3D 이미지와 방송용 영상만을 제작하는 프로그램이다."
        },
        answerResult: "4",
        answerEx: "보기 참고",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "51",
        answerAsk: "다음이 설명하고 있는 애니메이션의 종류는? - 특정한 형태를 그린 종이를 잘라낸 후, 각 종이들을 화면에 붙이거나 떼면서 원하는 이미지를 만들고, 그것들을 연결해서 움직임을 만들어 낸다.",
        answerChoice: {
            1: "컷 아웃 애니메이션",
            2: "스톱모션 애니메이션",
            3: "투광 애니메이션",
            4: "고우모션 애니메이션"
        },
        answerResult: "1",
        answerEx: "스톱모션 애니메이션 : 물체를 한두 프레임씩 노출시켜 촬영하는 영화 촬영 과정. 물체를 1인치씩 옮기고 다시 촬영하는 과정을 반복함으로써, 물체가 살아 움직이는 효과를 낸다. / 고우모션 애니메이션 : 애니메이션 촬영 시 정지 화면을 촬영하는 동안 카메라와 피사체가 동시에 움직이게 하는 기법. 프레임 촬영에 피사체와 카메라가 움직임으로써 극영화와 같은 연속 동작을 구사할 수 있는 특수 촬영술이다",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "52",
        answerAsk: "다음이 설명하고 있는 것은? - 점묘법과 같이 제한된 수의 색상들을 사용하여 다양한 색상을 시각적으로 섞어서 만드는 것이다. 예를 들어 노란색과 빨간색을 섞어서 기술적으로 잘 배치하면 주황색을 만들 수 있다.",
        answerChoice: {
            1: "해상도",
            2: "픽셀",
            3: "패턴",
            4: "디더링"
        },
        answerResult: "4",
        answerEx: "해상도 :화면의 선명도 / 픽셀 : 화면을 구성하는 가장 작은 단위 / 패턴 : 일정한 모양으로 채우기 위한 것. / 디더링 : 제한된 색상으로 다양한 색상을 만들어 내는 것",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "53",
        answerAsk: "CMYK 모드로 저장된 JPEG 파일을 인터넷 익스플로러 6.0으로 실행하였을 때 나타나는 결과로 옳은 것은?",
        answerChoice: {
            1: "이미지의 명도가 낮게 나타난다.",
            2: "색상이 반대색으로 나타난다.",
            3: "원래 크기보다 크게 보인다.",
            4: "이미지를 표시하지 못한다."
        },
        answerResult: "4",
        answerEx: "CMYK는 인쇄용 RGB가 인터넷,웹용이다. 그래서 이미지표시가 안되나보다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "54",
        answerAsk: "스코어, 캐스트, 페인트, 링고로 구성되어 있는 애니메이션 저작도구는?",
        answerChoice: {
            1: "Premiere",
            2: "Paint shop",
            3: "Director",
            4: "3D Studio MAX"
        },
        answerResult: "3",
        answerEx: "에니메이션 저작 도구는 오소웨어, 툴북, 디렉터(Director)가 있음",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "55",
        answerAsk: "자바스크립트의 변수명에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "변수의 첫 글자는 반드시 영문자나 밑줄로 시작해야 한다.",
            2: "대소문자를 구분한다.",
            3: "특수문자를 변수명에 사용할 수 없다.",
            4: "예약어는 변수명으로 사용할 수 있다."
        },
        answerResult: "4",
        answerEx: "예약어는 미리 점유하고 있는 명령이기 때문에 변수명에 사용할 수 없습니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "56",
        answerAsk: "다음과 같은 특징을 가지고 있는 그래픽 툴은? - 벡터 방식으로 정확한 도형을 제작한다. 그래프나 문자 등의 드로잉 작업, 심벌, 마크 디자인 등의 작업에 사용된다. 벡터방식이기 때문에 확대, 변형해도 이미지의 손상이 없다.",
        answerChoice: {
            1: "Paint shop",
            2: "Illustrator",
            3: "CAM",
            4: "Maya"
        },
        answerResult: "2",
        answerEx: "벡터방식의 드로잉 프로그램은 코렐드로우, Illustrator 가 있습니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "57",
        answerAsk: "웹 그래픽 제작에서 백그라운드 이미지 삽입에 관한 설명으로 가장 적합하지 않은 것은?",
        answerChoice: {
            1: "줄무늬를 배경이미지로 제작",
            2: "도형을 이용한 패턴 제작",
            3: "부드러운 그라데이션 제작",
            4: "동영상을 배경 이미지로 제작"
        },
        answerResult: "4",
        answerEx: "백그라운드 이미지는 면으로 표현되는 것을 삽입할 수 있습니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "58",
        answerAsk: "다음이 설명하고 있는 컴퓨터그래픽스시스템 입력 장치는? - 입력 원본의 아날로그 데이터는 좌표를 판독하여, 컴퓨터에 디지털 형식으로 설계도면이나 도형을 입력하는데 사용되는 입력 장치이다. X, Y위치를 입력할 수 있다.",
        answerChoice: {
            1: "디지타이저",
            2: "마우스",
            3: "키보드",
            4: "조이스틱"
        },
        answerResult: "1",
        answerEx: "좌표를 이용하여 자료를 입력하는 장치는 XY플로터가 있습니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "59",
        answerAsk: "컴퓨터 그래픽의 장점이라고 볼 수 없는 것은?",
        answerChoice: {
            1: "화면과 출력물에 동일한 컬러를 항상 얻을 수 있다.",
            2: "아주 미세한 부분까지 표현이 가능하다.",
            3: "작업 데이터의 이동 및 보관이 간편하다.",
            4: "색상, 재질의 수정이 자유로워 비용이 절감된다."
        },
        answerResult: "1",
        answerEx: "화면에서는 RGB 로 색을 표현하며, 출력물에는 CMYK 로 색을 표현한답니다.",
    },
    {
        answerType: "웹디자인기능사 2011년 04회",
        answerNum: "60",
        answerAsk: "캠코더 등으로 얻은 동영상클립을 편집하여 결과물을 얻기에 적합한 소프트웨어가 아닌 것은?",
        answerChoice: {
            1: "Premiere",
            2: "Movie Marker",
            3: "Vegas",
            4: "Media Player"
        },
        answerResult: "4",
        answerEx: "미디어플레이어는 오디오 재생 프로그램을 말합니다.",
    },






];

//

const quizWrap = document.querySelector(".quiz__wrap");
const quizScore = 0;
const quizConfirm = document.querySelector(".quiz__confirm .check")


//문제 출력
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>
    `)
    quizWrap.innerHTML = exam.join('');
}

updateQuiz();

//정답 확인
const answerQuiz = () => {
    const quizSelects = document.querySelectorAll(".quiz__selects");    //객관식 보기
    const quizConfirm = document.querySelector(".quiz__confirm .check");


    //사용자가 체크한 보기 == 문제 정답
    quizInfo.forEach((question, number) => {
        const userSelector = `input[name=select${number}]:checked`;     //사용자가 체크한 보기
        const quizSelectsWrap = quizSelects[number];
        const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value;

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

        }

    });

    document.querySelector(".quiz__confirm .check").innerHTML = `${quizScore < 36 ? quizInfo.length + "/" + quizScore + " 불합격입니다. 더 공부하세요!" : quizInfo.lenght + "/" + quizScore + "축하합니다 합격입니다!"}`;

    // //점수와 합불합
    // document.querySelector("quiz__confirm.ex").innerHTML = `${quizScore < 36 ? quizInfo.length + "/" + quizScore +" 불합격입니다. 더 공부하세요!" : quizInfo.lenght + "/" + quizScore + "축하합니다 합격입니다!"}`;
    // quizConfirm.textContent = `총 ${quizInfo.length} 문제 중에 ${quizScore} 문제를 맞추었습니다.`

    //전체 문제 수
    console.log(quizInfo.length);

    //내가 맞힌 수
    console.log(quizScore.length);
}

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