반응형
퀴즈 사이트 만들기
객관식 문제들을 많이 풀 수 있도록 만들어 보겠습니다.
[ 문제가 좀 많개 ]
https://ehcjswo.github.io/web2023/javascript/quiz/quizEffect05.html
링크를 눌러 큰 화면으로 편하게 보실 수 있습니다!
VSCode
<body>
<header id="header">
<h1><a href="../javascript14.html">Quiz <em>객관식 확인하기 (여러문제) 유형</em></a></h1>
<ul>
<li><a href="quizEffect01.html">1</a></li>
<li><a href="quizEffect02.html">2</a></li>
<li><a href="quizEffect03.html">3</a></li>
<li><a href="quizEffect04.html">4</a></li>
<li class="active"><a href="quizEffect05.html">5</a></li>
</ul>
</header>
<!--//header-->
<main id="main">
<div class="quiz__wrap">
<!-- <div class="quiz">
<div class="quiz__header">
<h2 class="quiz__title"></h2>
</div>
<div class="quiz__main">
<div class="quiz__question">
</div>
<div class="quiz__view">
<div class="dog__wrap">
<div class="true">정답입니다!</div>
<div class="false">틀렸습니다..</div>
<div class="card-container">
<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>
</div>
<div class="quiz__choice">
<label for="choice1">
<input type="radio" id="choice1" name="choice" value="1">
<span></span>
</label>
<label for="choice2">
<input type="radio" id="choice2" name="choice" value="2">
<span></span>
</label>
<label for="choice3">
<input type="radio" id="choice3" name="choice" value="3">
<span></span>
</label>
<label for="choice4">
<input type="radio" id="choice4" name="choice" value="4">
<span></span>
</label>
</div>
<div class="quiz__answer">
<button class="confirm">정답 확인하기</button>
</div>
<div class="quiz__desc"></div>
</div>
</div> -->
</div>
</main>
<!--//main-->html 부분 입니다.
페이지는 header와 main 요소로 구성됩니다. header 요소에는 페이지 제목과 각 퀴즈에 대한 링크가 포함된 메뉴가 있습니다.
main 요소에는 quiz__wrap 클래스가 있는 div 요소가 있으며, 여러 퀴즈의 정보가 이 div 요소 안에 동적으로 로딩됩니다.
주석 처리된 코드를 제거하면, 퀴즈 질문과 선택지, 그리고 정답 확인 버튼과 함께 애니메이션 효과가 있는 개 이미지가 표시됩니다.
하지만 문제가 많기 때문에 문제 정보들을 배열안에 넣어 사용할 겁니다.
quiz 클래스를 html에서 사용하기엔 수많은 코드를 반복해야 하기 때문에 스크립트에 넣어 반복문을 이용하여 코드를 줄여줄 수 있습니다.
script
<script>
//선택자
const quizWrap = document.querySelector(".quiz__wrap");
// const quizQuestion = quizWrap.querySelectorAll(".quiz__question");
let quizScore = 0;
// 문제 정보
const quizInfo = [
{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100501",
infoQuestion: "다음이 설명하고 있는 데이터 입출력 방식은?<br>- 데이터의 입출력 전송이 CPU를 통하지 않고, 입출력 장치와 기억 장치 간에 직접 데이터를 주고받는다.<br>- CPU와 주변 장치간의 속도차를 줄일 수 있다." ,
infoChoice: {
1: "DCA",
2: "DMA",
3: "Multiplexer",
4: "Channel",
},
infoAnswer: "2",
infoDesc: "DMA(Direct Memory Access) : CPU 관여 없이 주기억장치와 보조기억장치(주변장치) 사이에 데이터를 전송하는 방식"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100502",
infoQuestion: "컴퓨터 시스템의 중앙처리장치를 구성하는 하나의 회로로써 산술 및 논리 연산을 수행하는 장치는?",
infoChoice: {
1: "Arithmetic Logic Uni",
2: "Memory Unit",
3: "I/O Unit",
4: "Associative Memory Unit",
},
infoAnswer: "1",
infoDesc: "ALU(Arithmetic Logic Unit) : 산술 논리 연산 장치<br>Memory Unit : 기억 장치<br>I/O Unit : 입출력 장치<br>Associative Memory Unit : 연관메모리(주소가 아닌 내용에 <br>의한 참조를 할수 있으며 캐시 메모리로 주로 사용됨)"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100503",
infoQuestion: "제어논리장치(CLU)와 산술논리연산 장치(ALU)의 실행순서를 제어하기 위해 사용되는 레지스터는?",
infoChoice: {
1: "누산기(accumulator)",
2: "프로그램 상태 워드(program Status World)",
3: "명령 레지스터(instruction register)",
4: "플래그 레지스터(flag register)",
},
infoAnswer: "4",
infoDesc: "플래그 레지스터는 플래그 비트에 0 또는 1을 기록하여 각종 상태가 ON, OFF 인지 구별할수 있게 해줍니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100504",
infoQuestion: "번지(address)로 지정된 저장위치(storage location)의 내용이 실제 번지가 되는 주소지정번지는?",
infoChoice: {
1: "간접지정 방식",
2: "완전지정방식",
3: "절대지정방식",
4: "상대지정방식",
},
infoAnswer: "1",
infoDesc: "번지의 번지가 실제 주소가 된다고 하니 2번 참조되는 것을 <br>의미 합니다. 즉시주소 지정방식 - 메모리 참조횟수 0<br>직접주소 지정방식 - 메모리 참조횟수 1<br>간접주소 지정방식 - 메모리 참조횟수 2<br>그러므로 간접주소 지정방식."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100505",
infoQuestion: "JK플립플롭(flip flop)에서 보수가 출력되기 위한 J, K의 입력상태는??",
infoChoice: {
1: "J=1, K=0",
2: "J=0, K=1",
3: "J=1, K=1",
4: "J=0, K=0",
},
infoAnswer: "3",
infoDesc: "J K<br>0 0 - 기존값유지<br>0 1 - 0<br>1 0 - 1<br>1 1 - 반전(=보수)"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100506",
infoQuestion: "2진수 (10001010)를 2의 보수로 옳게 표현한 것은?",
infoChoice: {
1: "01110101",
2: "01110110",
3: "10001011",
4: "10000110",
},
infoAnswer: "2",
infoDesc: "10001010 을 1의 보수로 바꿉니다 : 0은 1로, 1은 0으로 변경하면됩니다. 01110101 로 바꿔 1보수에 +1을 해주면 2의 보수가 됩니다. 01110110 이 답입니다. 간단하게 바꾸는 방법은 문제의 2진수에서 오른쪽에서 부터 처음 1이 나올때까지는 그대로 적고 나머지는 반대로 바꾸면 됩니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100507",
infoQuestion: "하나의 명령어를 중앙 처리 장치에서 처리하는데 포함된 일련의 동작들을 총칭하여 명령어 주기(Instruction Cycle)라 하는데 명령어 주기에 속하지 않는 것은?",
infoChoice: {
1: "01110101",
2: "01110110",
3: "10001011",
4: "10000110",
},
infoAnswer: "1",
infoDesc: "인출사이클(Fetch Cycle) : 주기억 장치로부터 CPU로 명령어를 가져오는 사이클(=Load)간접사이클(Indirect Cycle) : 유효번지를 읽기 위해 기억장치를 한번 더 접근하는 사이클실행사이클(Execute Cycle) : 인출된 명령어를 이용하여 직접 명령을 실행하는 사이클인터럽트사이클(Interrupt Cycle) :인터럽트가 발생했을 때 처리하는 사이클"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100508",
infoQuestion: "주기억장치, 제어장치, 연산장치 사이에서 정보가 이동 되는 경로이다. 빈 부분에 알맞은 장치는?<br><img style='width:400px' src='../assets/imgs/information 01.jpg'>",
infoChoice: {
1: "① 제어장치 ②주기억장치 ③연산장치",
2: "① 주기억장치 ②연산장치 ③제어장치",
3: "① 주기억장치 ②제어장치 ③연산장치",
4: "① 제어장치 ②연산장치 ③주기억장치",
},
infoAnswer: "2",
infoDesc: "중앙처리장치의 기능은 연산과 제어이며 간혹 주기억이 들어 가기도 합니다. 이 문제에서는 중앙처리장치의 기능을 두개라 생각하고 2번, 3번 그림을 그려 놓은것입니다. 이때 중요한것은 3번에서 2번으로 제어 신호가 전송된다는 겁니다. 즉 3번이 제어장치가 되어야지만 제어신호를 2번으로 보낼수 있겠죠?"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100509",
infoQuestion: "연산을 자료의 성격에 따라 나눌 때, 논리적 연산에 해당하지 않는 것은?",
infoChoice: {
1: "ROTATE",
2: "AND",
3: "MULTIPLY",
4: "COMPLEMENT",
},
infoAnswer: "3",
infoDesc: "MULTIPLY는 곱셈을 뜻하며 이는 산술연산(사칙연산)입니다. 나머지는 논리 연산입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100510",
infoQuestion: "진리표가 다음 표와 같이 되는 논리 회로는?<br><img style='width:400px' src='../assets/imgs/information 02.jpg'>",
infoChoice: {
1: "AND 게이트",
2: "OR 게이트",
3: "NOR 게이트",
4: "NAND 게이트",
},
infoAnswer: "4",
infoDesc: "출력결과가 1,1,1,0 이 나왔습니다. 척보고 맞추기 어려우시면 반대로 생각해 봅니다. 0,0,0,1 이라는 결과가 나오므로 이는 당연히 AND 입니다. 결론적으로 그 반대값이 나왔으므로 Not AND인 NAND 입니다"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100511",
infoQuestion: "A·(A·B+C)를 간략화 하면?",
infoChoice: {
1: "A",
2: "B",
3: "C",
4: "A·(B+C)",
},
infoAnswer: "4",
infoDesc: "A·(A·B+C)식에서 A를 넘겨서 풀면<br>A·A·B + A·C 입니다..A·A = A 이므로<br>A·B + A·C 입니다. 여기서 A·을 묶어 내면<br>A·(B+C) 입니다"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100512",
infoQuestion: "채널은 어떤 장치에서 명령을 받는가?",
infoChoice: {
1: "기억장치",
2: "출력장치",
3: "입력장치",
4: "제어장치",
},
infoAnswer: "4",
infoDesc: "채널은 제어 장치의 명령을 받습니다..채널은 주로 입출력 장치의 데이터 통로로 사용이 됩니다"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100513",
infoQuestion: "여러 개의 입력정보 (2n)중에서 하나를 선택하여 한 곳으로 출력시키는 조합 논리 회로는?",
infoChoice: {
1: "반가산기",
2: "멀티플렉서",
3: "디멀티플렉서",
4: "인코더",
},
infoAnswer: "2",
infoDesc: "2^n개의 입력 오직 하나의 출력은 멀티플렉서의 특징이며반대로 오직 1개의 입력과 2^n 개의 출력을 가진다면 디멀티플렉서 입니다. 참고로 멀티플렉서, 디멀티플렉서는 N 개의 셀렉트 라인을 가집니다. "
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100514",
infoQuestion: "연산자의 기능과 거리가 먼 것은?",
infoChoice: {
1: "주소 지정 기능",
2: "제어기능",
3: "함수연산 기능",
4: "입출력 기능",
},
infoAnswer: "1",
infoDesc: "소 지정 기능은 주소부(Operand)에서 담당 합니다. 명령어의 구성명령어 코드부[연산자] + 주소부 (한글)OP-code + Oprand (영문)"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100515",
infoQuestion: "다음과 같은 논리회로에서 A=1, B=1, C=0 일 때, X로 출력되는 값은?<br><img style='width:400px' src='../assets/imgs/information 03.jpg'>",
infoChoice: {
1: "0",
2: "1",
3: "10",
4: "11",
},
infoAnswer: "2",
infoDesc: "(A AND B) OR C = (AB)+C<br>값을 대입하면<br>(1 AND 1) OR 0 = (1·1)+0 = 1+0 = 1"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100516",
infoQuestion: "프로그램들이 기억장치 내의 임의의 장소에 적재될 수 있도록 조정하는 작업을 재배치(relocation)라 하는데 이 기능을 수행하는 재배치 로더(loader)의 역할이 아닌 것은?",
infoChoice: {
1: "기억장소 할당",
2: "목적 프로그램의 기호적 호출 연결",
3: "원시 프로그램을 읽어서 명령어를 해석",
4: "기계어 명령들을 기억 장치에 적재",
},
infoAnswer: "3",
infoDesc: "원시 프로그램을 읽어서 명령어를 해석하는 것은 컴파일러에서 담당합니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100517",
infoQuestion: "연산장치에서 연산결과에 대한 부호를 저장하는 것은?",
infoChoice: {
1: "가산기",
2: "기억 레지스터",
3: "상태 레지스터",
4: "보수기",
},
infoAnswer: "3",
infoDesc: "연산결과는 누산기에 저장되는 것이 맞지만 여기서는 연산 결과의 부호 즉 연산결과의 부호'상태'를 어디 저장하느냐라고 물었습니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100518",
infoQuestion: "EBCDIC코드의 존(Zone) 코드는 몇 비트로 구성되어 있는가?",
infoChoice: {
1: "3",
2: "4",
3: "5",
4: "6",
},
infoAnswer: "2",
infoDesc: "BCD 코드(6)<br>ASCII 코드(7)<br>EBCDIC 코드(8)<br>위와 같이 총 코드 비트를 가집니다. 모든 코드의 디지트 비트는 4이므로<br>존 비트 구하는 공식은<br>존 비트 = 총 코드비트 - 4(디지트비트)입니다. 8-4=4 입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100519",
infoQuestion: "입력장치로만 나열된 것은?",
infoChoice: {
1: "키보드, OCR, OMR, 라인프린터",
2: "키보드, OCR, OMR, 플로터",
3: "키보드, 라인프린터, OMR, 플로터",
4: "키보드, OCR, OMR, MICR",
},
infoAnswer: "4",
infoDesc: "라인프린터 : 줄단위 출력장치<br>플로터 : 설계 도면등의 대형 출력에 사용<br>즉, 라인프린터와 플로터는 출력장치 입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100520",
infoQuestion: "8비트 컴퓨터에서 10진수 -13을 부호화 절대치 방식으로 표현한 것은?",
infoChoice: {
1: "10001101",
2: "10001110",
3: "11111110",
4: "01111101",
},
infoAnswer: "1",
infoDesc: "부호화 절대치는 맨 왼쪽 앞자리를 부호라 보고 0이면 양수 <br>1이면 음수 입니다. 즉 -13은 음수 이므로 앞자리는 1이 됩니다. 그뒤 13을 8421 코드 방식으로 표현해주면 13은<br>8421<br>1101 이므로<br>8자리로 만들면 1000 1101 이렇게 만들어 집니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100521",
infoQuestion: "스프레드시트 작업에서 반복되거나 복잡한 단계를 수행하는 작업을 일괄적으로 자동화시켜 처리하는 방법에 해당하는 것은?",
infoChoice: {
1:"매크로",
2:"정렬",
3:"검색",
4:"필터",
},
infoAnswer: "1",
infoDesc: "정렬 : 자료를 크기순으로 오름차순 또는 내림차순으로 정리하는것<br>검색 : 내가 원하는 특정한 글자나 자료를 찾는것<br>필터 : 조건에 맞는 데이터만 추출(뽑아내기) 하는것"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100522",
infoQuestion: "스프레드시트의 입력된 자료에서 사용자가 원하는 레코드만을 선택하여 표시하는 기능은?",
infoChoice: {
1:"필터",
2:"슬라이드",
3:"셀",
4:"개요",
},
infoAnswer: "1",
infoDesc: "슬라이드 : 프리젠테이션(파워포인트)의 한 화면 단위<br>셀 : 스프레드시트(엑셀)의 데이터 최소 단위(1칸)"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100523",
infoQuestion: "도메인에 대한 설명으로 가장 적합한 것은?",
infoChoice: {
1: "릴레이션을 표현하는 기본 단위",
2: "튜플들의 관계를 표현하는 범위",
3: "튜플들의 구분할 수 있는 범위",
4: "표현되는 속성 값의 범위",
},
infoAnswer: "4",
infoDesc: "도메인(Domain) : 하나의 속성이 취할수 있는 속성 값들의 집합"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100524",
infoQuestion: "SQL에서 테이블의 price을 기준으로 오름차순 정렬하고자 할 경우 사용되는 명령은?",
infoChoice: {
1: "SORT BY price ASC",
2: "SORT BY price DESCM",
3: "ORDER BY price ASC",
4: "ORDER BY price DESC",
},
infoAnswer: "3",
infoDesc: "정렬은 오토바이(오도바이)를 타고 하므로ORDER BY 명령어를 사용하며오름차순은 ASC, 내림차순은 DESC 입니다. SORT는 정렬을 뜻하는 영어 단어지만 데이터베이스에서 SORT라는 명령어는 없습니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100525",
infoQuestion: "SQL에서 테이블 구조를 정의, 변경, 제거하는 명령을 순서대로 옳게 나열한 것은?",
infoChoice: {
1: "CREATE, MODIFY, DELETE",
2: "MAKE, MODIFY, DELETE",
3: "MAKE, ALTER, DROP",
4: "CREATE, ALTER, DROP",
},
infoAnswer: "4",
infoDesc: "DDL(데이터 베이스 정의 언어)<br>CREATE : DB 테이블, 뷰 생성<br>ALTER : 테이블 변경<br>DROP : 데이터베이스, 테이블, 제거"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100526",
infoQuestion: "프리젠테이션에서 사용하는 하나의 화면은?",
infoChoice: {
1: "슬라이드",
2: "매크로",
3: "개체",
4: "셀",
},
infoAnswer: "1",
infoDesc: "프리젠테이션 기본단위 : 슬라이더(슬라이더 개개의 구성요소 : 개체)<br>스프레드시트 기본단위 : 셀"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100527",
infoQuestion: "데이터베이스관리시스템(DBMS: Databases Management System)의 주요 기능에 속하지 않는 것은?",
infoChoice: {
1: "관리 기능",
2: "정의 기능",
3: "조작 기능",
4: "제어 기능",
},
infoAnswer: "1",
infoDesc: "데이터 베이스 언어<br>DDL : 데이터 베이스 정의어<br>DML : 데이터 베이스 조작어<br>DCL : 데이터 베이스 제어어위와같이 데이터베이스 언어는 정의, 조작, 제어 언어가 있으므로 기능도 3가지라고 보시면 됩니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100528",
infoQuestion: "관계데이터베이스에서 속성(Attribute)의 수를 의미하는 것은?",
infoChoice: {
1: "카디널리티(Cardinality)",
2: "도메인(Domain)",
3: "차수(Degree)",
4: "릴레이션(Relation)",
},
infoAnswer: "3",
infoDesc: "레코드 = 행 = 튜플(Tuple)<br>필드 = 열 = 속성(Attribute)<br>도메인(Domain): 하나의 속성이 취할수 있는 속성 값들의 <br>집합<br>차수(Degree) : 속성의 갯수<br>기수(Cardinality) : 튜플의 갯수"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100529",
infoQuestion: "SQL 명령어 중 데이터 정의문(DDL)에 해당 하는 것은?",
infoChoice: {
1: "UPDATE",
2: "CREATE",
3: "SELECT",
4: "DELETE",
},
infoAnswer: "2",
infoDesc: "DDL(데이터 베이스 정의 언어)<br>CREATE : DB 테이블, 뷰 생성<br>ALTER : 테이블 변경<br>DROP : 데이터베이스, 테이블, 제거<br>DML(데이터 조작 언어)<br>SELECT - FROM - WHERE : 검색<br>INSERT - INTO - VALUES : 삽입<br>UPDATE - SET WHERE : 갱신(업데이트)<br>DELETE - FROM - WHERE(삭제)<br>(테이블내의 레코드 조작 언어)"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100530",
infoQuestion: "DBMS에 대한 설명으로 틀린 것은?",
infoChoice: {
1: "데이터 보안성 보장",
2: "데이터 공유",
3: "데이터 중복성 최대화",
4: "데이터 무결성 유지",
},
infoAnswer: "3",
infoDesc: "DBMS의 기능은 데이터 중복의 '최소화' 입니다. 보기에서 반대로 적혀 있습니다..그래서 틀렸습니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100531",
infoQuestion: "스풀링과 버퍼링에 대한 설명으로 틀린 것은?",
infoChoice: {
1: "스풀링은 저속의 입출력장치와 고속의 CPU간의 속도 차이를 해소하기 위한 방법이다.",
2: "버퍼링은 송신자와 수신자의 속도 차이를 해결하기 위하여 사용한다.",
3: "버퍼링은 수신자와 송신자의 속도 차이를 해결하기 위하여 사용한다.",
4: "버퍼링은 서로 다른 여러 작업에 대한 입출력과 계산을 동시에 수행한다.",
},
infoAnswer: "4",
infoDesc: "스풀링 : 병행처리 (두가지 일을 동시에 작업) - 인쇄를 하면서, 음악을 들을수 있고, 인쇄를 하면서, 인터 넷을 할수 있고... <br>- 병행처리를 하면, 속도는 느려지고, 효율성은 높아진다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100532",
infoQuestion: "도스(MS-DOS)에서 “config.sys” 파일과 'autoexec.bat'파일의 수행을 사용자가 선택하여 실행하려고 하는 경우 사용하는 기능키(Function key)는?",
infoChoice: {
1: "F4",
2: "F5",
3: "F7",
4: "F8",
},
infoAnswer: "4",
infoDesc: "부팅시 선택적인 부팅을 하기위한 단축키는 F8키를 누르면 됩니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100533",
infoQuestion: "다음 UNIX 명령어에 대한 기능으로 옳은 것은?<br>[ vi, ed, emacs ]",
infoChoice: {
1: "컴파일",
2: "로더",
3: "통신 지원",
4: "문서 편집",
},
infoAnswer: "4",
infoDesc: "VI는 대표적인 유닉스 에디터(편집기) 입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100534",
infoQuestion: "CPU 스케줄링 방법 중 우선순위에 의한 방법의 단점은 무한정지(indefinite blocking)와 기아(starvation)현상이다. 이 단점을 해결하는 방안으로 가장 적합한 것은?",
infoChoice: {
1: "순환할당",
2: "다단계 큐 방식",
3: "에이징(aging) 방식",
4: "최소작업 우선",
},
infoAnswer: "3",
infoDesc: "우선순위 방식에서 새로 들어온 작업이 기존 작업보다 우선순위가 높을경우 앞서 들어온 작업이 우선순위가 낮다는 이유로 계속적으로 지연 되면서 무한히 지연되는 결과를 초래 하게 됩니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100535",
infoQuestion: "다음 문장의( )에 알맞은 용어는?<br>[ A(n) ( ) is a situation where a group of processes are permanently blocked as a result of each process having acquired a subset of the resources needed for its completion and waiting for release of the remaining resources held by others in the same group-thus making it impossible for any of the processes to proceed. ]",
infoChoice: {
1: "processing",
2: "deadlock",
3: "operating system",
4: "system call",
},
infoAnswer: "2",
infoDesc: "Waiting(기다리다) 라는 단어을 통하여 교착상태임을 알수 있습니다"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100536",
infoQuestion: "비선점(Non-preemptive) 프로세스 스케줄링 방식에 해당 하는 것은?",
infoChoice: {
1: "SJF, SRT",
2: "SJF, FIFO",
3: "Round-Robin, SRT",
4: "Round-Robin, SJF",
},
infoAnswer: "2",
infoDesc: "선점형 스케쥴링 기법<br>Round Robin(RR)<br>SRT(Shortest Remaining Time)<br>MFQ(다단계 피드백 큐)<br>비선점형 스케쥴링 기법<br>FIFO(First In First Out)<br>Priority(우선순위)<br>SJF(Shortest Job First)<br>HRN"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100537",
infoQuestion: "'윈도98'에서 보조프로그램의 구성에 해당 되는 것은?",
infoChoice: {
1: "녹음기",
2: "계산기",
3: "매체 재생기",
4: "CD 재생기",
},
infoAnswer: "2",
infoDesc: "XP에서도 보조 프로그램에 계산기가 있습니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100538",
infoQuestion: "다중 프로그래밍 환경에서 CPU가 주기억장치 내부 프로그램을 실행하는데 걸리는 시간보다 페이지 부재에 따른 페이지 대체에 많은 시간을 보내게 됨으로써 전체 컴퓨터 시스템의 성능이 급격히 저하되는 현상은?",
infoChoice: {
1: "Workload ",
2: "Locality",
3: "Thrashing ",
4: "Collision",
},
infoAnswer: "3",
infoDesc: "Locality : 쉽게 말하면 집약성입니다..나중에 가면 약한 집약성과 강한 집약성으로 나뉩니다. Colision : LAN에서 둘 이상의 워크스테이션이 같은 시간에 같은 네트워크 케이블로 전송할 때 생기는 왜곡된 전송입니다. <br>Workload : 작업량을 말하는거죠Locality : 쉽게 말하면 집약성입니다..나중에 가면 약한 집약성과 강한 집약성으로 나뉩니다.Colision : LAN에서 둘 이상의 워크스테이션이 같은 시간에 같은 네트워크 케이블로 전송할 때 생기는 왜곡된 전송입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100539",
infoQuestion: "도스(MS-DOS)의 시스템 파일 중 감춤(Hidden) 속성의 파일로만 짝지어진 것은?",
infoChoice: {
1: "COMMAND.COM, IO.SYS",
2: "COMMAND.COM, MSDOS.SYS",
3: "MSDOS.SYS, IO.SYS, COMMAND.COM",
4: "MSDOS.SYS, IO.SYS",
},
infoAnswer: "4",
infoDesc: "MSDOS.SYS, IO.SYS는 운영체제의 핵심 파일로 유닉스의 커널에 해당되는 중요한 파일입니다..사용자가 실수로 삭제하는것을 방지 하기 위하여 숨김 속성을 부여하여 파일을 숨겨 둡니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100540",
infoQuestion: "'윈도98'에서 “바로가기 아이콘”에 대한 설명으로 틀린것은?",
infoChoice: {
1: "바로가기 아이콘을 삭제하면 원본 파일도 삭제된다.",
2: "원본 파일과 연결되어 있는 LNK 확장자를 가진다.",
3: "실행 파일뿐만 아니라 문서파일에 대한 바로가기 아이콘을 만들 수 있습니다.",
4: "바로가기 아이콘은 원본 파일의 위치를 기억하고 있다.",
},
infoAnswer: "1",
infoDesc: "바로가기 아이콘은 원본(실행) 파일의 경로만 저장하므로 파일을 삭제하여도 원본 파일은 그대로 있습니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100541",
infoQuestion: "'윈도98'에서 도스창을 열어 작업한 후, 다시 윈도로 복귀하고자 할 때 도스창을 종료하는 방법은?",
infoChoice: {
1: "'ESC'를 누른다.",
2: "'ALT' + 'F4'를 누른다.",
3: "'CTRL' + 'ENTER'를 누른다.",
4: "'EXIT' 명령어를 입력하고 'ENTER'를 누른다.",
},
infoAnswer: "4",
infoDesc: "EXIT는 비상구 등에 많이 적혀 있죠?탈출, 빠져나가다 라는 뜻입니다..그냥 외우시면 됩니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100542",
infoQuestion: "페이지 대체 알고리즘에서 계수기를 두어 가장 오랫동안 참조되지 않은 페이지를 교체할 페이지로 선택하는 것은?",
infoChoice: {
1: "FIFO",
2: "LRU",
3: "LFU",
4: "OPT",
},
infoAnswer: "2",
infoDesc: "FIFO(First In First Out)<br>주기억장치 내에 가장 먼저 들어온, 가장 오래된 페이지를 교체할 페이지로 선택하는 기법<br>LRU(least Recently Used)<br>가장 오랫동안 사용되지 않은 페이지를 교체할 페이지로 선택하는 기법<br>LFU(Least Frequently Used)<br>사용된 횟수가 가장 적은 페이지를 교체할 페이지로 선택하는 기법<br>NUR(Not used Recently)<br>최근에 사용되지 않은 페이지를 교체할 페이지로 선택하는 기법"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100543",
infoQuestion: "'윈도98'의 작업 표시줄에 관한 내용으로 옳은 것은?",
infoChoice: {
1: "작업표시줄에는 시작단추, 빠른 실행 도구모음, 실행중인 프로그램 목록, 표시기 등으로 구성된다.",
2: "작업 표시줄의 오른쪽에는 현재 시간과 각종 하드웨어 사용을 알 수 없다.",
3: "작업 표시줄 등록정보는 마우스 왼쪽 단추를 작업 표시줄의 빈 곳에서 클릭 하여야만 알 수 있다.",
4: "작업 표시줄은 모니터의 상하좌우 및 가운데 어느 곳이나 놓일 수 있다.",
},
infoAnswer: "1",
infoDesc: "작업 표시줄의 맨 오른쪽에 시계, 사용하는 하드웨어가 있지요. .빈곳을 왼쪽클릭하는게 아닌 오른쪽 클릭입니다. 상하좌우는 가능하나, 가운데는 안됩니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100544",
infoQuestion: "도스 명령어 중 내부 명령어에 해당하는 것은?",
infoChoice: {
1: "ATTRIB",
2: "SORT",
3: "FORMAT",
4: "CLS",
},
infoAnswer: "4",
infoDesc: "CLS는 클리어 스크린의 약자로 화면을 깨끗하게 하라 내부 명령어 입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100545",
infoQuestion: "컴퓨터 하드웨어와 사용자를 연결시켜 사용자로 하여금 컴퓨터 시스템을 이용, 응용 프로그램을 수행할 수 있도록 도와주는 필수적인 프로그램은?",
infoChoice: {
1: "컴파일러",
2: "응용 프로그램",
3: "문서편집 프로그램",
4: "운영체제",
},
infoAnswer: "4",
infoDesc: "컴파일러 : 원본(소스) 프로그램을 읽어서 번역하는 프로그램<br>응용프로그램 : 한글, 엑셀, 파워포인트 같은 애플리케이션을 응용프로그램이라고 합니다. <br>문서편집프로그램 : 메모장, 워드패드, 한글, MS-WORD 등 문서 편집용 프로그램"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100546",
infoQuestion: "도스(MS-DOS)에서 특정한 디렉터리 내의 모든 파일 및 하부 디렉터리까지 복사해주는 명령어는?",
infoChoice: {
1: "COPY",
2: "XCOPY",
3: "FDISK",
4: "SORT",
},
infoAnswer: "2",
infoDesc: "XCOPY는 COPY 프로그램이 진화한 것으로 하부디렉토리까지 복사가 가능합니다../S 옵션 사용합니다..S의 뜻은 서브(하위)디렉토리 라는 뜻입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100547",
infoQuestion: "UNIX에서 사용하는 쉘(Shell)이 아닌 것은?",
infoChoice: {
1: "C Shell",
2: "Bourn Shell",
3: "DOS Shell",
4: "korn Shell",
},
infoAnswer: "3",
infoDesc: "DOS Shell은 없습니다. 참고로 각 Shell 별 사용 프롬프트는 아래와 같습니다. <br>% : C쉘, <br>$ : 콘쉘, 번"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100548",
infoQuestion: "다음 ( )안에 알맞은 용어는?",
infoChoice: {
1: "Time-sharing systems",
2: "Real-time operating systems",
3: "Distributed operating systems",
4: "Batch operating systems",
},
infoAnswer: "2",
infoDesc: "Short Time : 짧은 시간이란 뜻으로 바로 바로 일을 처리 한다는 뜻입니다..즉 실시간으로 일을 처리 한다는 뜻입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100549",
infoQuestion: "'윈도98'에서 디스켓을 포맷할 때 포맷형식으로 선택할 수 없는 것은?",
infoChoice: {
1: "전체",
2: "빠른 포맷",
3: "삭제된 파일 복구",
4: "시스템과 파일만 복사",
},
infoAnswer: "3",
infoDesc: "삭제된 파일 복구는 Undelete 라는 DOS 명령어를 사용합니다. 개별적으로 하나씩의 파일을 복구할수 있습니다. 포맷한 전체 디스크를 복구하는 방법은Unformat라는 DOS 명령어를 이용합니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100550",
infoQuestion: "운영체제를 제어 프로그램(Control program)과 처리 프로그램(processing program)으로 분류했을 때, 제어 프로그램에 해당하지 않는 것은?",
infoChoice: {
1: "감시 프로그램(Supervisor program)",
2: "데이터 관리 프로그램(data management program)",
3: "문제 프로그램(problem program) ",
4: "작업 제어 프로그램(job control program)",
},
infoAnswer: "3",
infoDesc: "일반적으로 문제와는 반대로 제어 프로그램 3가지만 외우시면 됩니다. 감작데 라고 외우며 아래와 같습니다. 제어프로그램 종류 3가지(제어 프로그램의 특징은 감시, 관리라는 말이 들어간다)<br>1. 감시프로그램<br>2. 작업관리 프로그램<br>3. 데이터 관리프로그램"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100551",
infoQuestion: "원거리에서 일괄처리를 수행하는 터미널(Terminal)은?",
infoChoice: {
1: "인텔리전트 터미널(Intelligent Terminal)",
2: "리모트 배치 터미널(Remote Batch Terminal)",
3: "키 엔트리 터미널(Key Entry Terminal)",
4: "논-인텔리전트 터미널(Non-Intelligent Terminal)",
},
infoAnswer: "2",
infoDesc: "원거리 : 리모트(리모콘을 이용하면 원(먼)거리에서 TV를 켤수 있죠?)<br>일괄처리 : 배치(Batch)<br>터미널 : 터미널(종착지)"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100552",
infoQuestion: "다음 중 통신제어장치의 역할과 거리가 먼 것은?",
infoChoice: {
1: "통신회선과 중앙처리장치의 결합",
2: "중앙처리장치와 데이터의 송·수신 제어",
3: "데이터의 교환 및 축적제어",
4: "회선 접속 및 전송 에러 제어",
},
infoAnswer: "3",
infoDesc: "통신제어장치는 데이터의교환과는 상관있지만 축적이랑은 상관없음"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100553",
infoQuestion: "데이터 통신에서 사용되는 전송속도의 기본단위는?",
infoChoice: {
1: "earlang",
2: "db",
3: "km/s",
4: "bps",
},
infoAnswer: "4",
infoDesc: "bps : Bit Per Second의 약자로 단위 시간(초)당 몇 비트를 전송하는지를 나타내는 단위 입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100554",
infoQuestion: "분산된 터미널 또는 여러 컴퓨터들이 중앙의 호스트 컴퓨터와 집중 연결되어 있는 정보통신망의 구성 형태는?",
infoChoice: {
1: "루프형",
2: "스타형",
3: "그물형",
4: "나무형",
},
infoAnswer: "2",
infoDesc: "중앙에 호스트 라는 단어을 통하여 스타(별)형임을 알수 있습니다. 종이에 별을 그려 보시고 그 중앙에 점을 찍어보시면 대충 이해가 됩니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100555",
infoQuestion: "광통신 케이블의 전송방식에 이용되는 빛의 특성은?",
infoChoice: {
1: "회절",
2: "산란",
3: "흡수",
4: "전반사",
},
infoAnswer: "4",
infoDesc: "광통신은 전반사 도파 원리를 이용합니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100556",
infoQuestion: "FTP는 OSI 7계층 중 어느 계층에 속하는가?",
infoChoice: {
1: "데이터 링크 계층",
2: "네트워크 계층",
3: "세션 계층",
4: "응용 계층",
},
infoAnswer: "4",
infoDesc: "물리 계층 - 데이터 링크 계층 - 네트워크 계층 - 전송 계층 - 세션 계층 - 표현 계층 - 응용 계층줄여서 물데네전세표응"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100557",
infoQuestion: "다음 중 데이터통신 교환방식이 아닌 것은?",
infoChoice: {
1: "회선 교환방식",
2: "메시지 교환방식",
3: "패킷 교환 방식",
4: "선로 교환방식",
},
infoAnswer: "4",
infoDesc: "데이터 교환방식 : 회선, 패킷, 메세지"
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100558",
infoQuestion: "변복조기의 역할과 거리가 먼 것은?",
infoChoice: {
1: "통신신호의 변환기라고 볼 수 있다.",
2: "디지털신호를 아날로그신호로 변환한다.",
3: "공중전화통신망에 적합한 통신신호로 변환한다.",
4: "컴퓨터신호를 광케이블에 적합한 광신호로 변환한다.",
},
infoAnswer: "4",
infoDesc: "컴퓨터신호를 광케이블에 적합한 광신호로 변환하는것은 전광변환기에서 합니다. 전기 신호를 광으로 변환하므로 전광변환이라고 합니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100559",
infoQuestion: "전화용 동케이블과 비교하여 광케이블의 특성이 아닌 것은?",
infoChoice: {
1: "전송용량이 커서 많은 신호를 전송 할 수 있다.",
2: "케이블 간의 누화가 없다.",
3: "주파수에 따른 신호감쇠 및 전송 지연의 변화가 크다.",
4: "통신의 보안성이 우수하다.",
},
infoAnswer: "3",
infoDesc: "광케이블은 빛을 이용하므로 주파수라는 개념 자체가 없습니다."
},{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100560",
infoQuestion: "프로토콜의 기본적인 요소가 아닌 것은?",
infoChoice: {
1: "구문",
2: "의미",
3: "타이밍",
4: "처리",
},
infoAnswer: "4",
infoDesc: "프로토콜의 3요소 : 구문, 의미, 타이밍"
},
];
// 문제 출력
const updateQuiz = () => {
const exam = [];
quizInfo.forEach((question, number) => {
exam.push(`
<div class="quiz">
<div class="quiz__header">
<h2 class="quiz__title">${question.infoType} ${question.infoTime}</h2>
</div>
<div class="quiz__main">
<div class="quiz__question"<em>${number+1}</em>. ${question.infoQuestion}
</div>
<div class="quiz__view">
<div class="dog__wrap">
<div class="true">정답입니다!</div>
<div class="false">틀렸습니다..</div>
<div class="card-container">
<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>
</div>
<div class="quiz__choice">
<label for="choice1${number}">
<input type="radio" id="choice1${number}" name="choice${number}" value="1">
<span>${question.infoChoice[1]}</span>
</label>
<label for="choice2${number}">
<input type="radio" id="choice2${number}" name="choice${number}" value="2">
<span>${question.infoChoice[2]}</span>
</label>
<label for="choice3${number}">
<input type="radio" id="choice3${number}" name="choice${number}" value="3">
<span>${question.infoChoice[3]}</span>
</label>
<label for="choice4${number}">
<input type="radio" id="choice4${number}" name="choice${number}" value="4">
<span>${question.infoChoice[4]}</span>
</label>
</div>
<div class="quiz__desc">정답은 <em>${question.infoAnswer}</em>번!<br> ${question.infoDesc}</div>
</div>
</div>
`);
});
exam.push(`
<div class="quiz__info">??점</div>
<div class="quiz__check">정답 확인</div>
`)
quizWrap.innerHTML = exam.join('');
//설명 숨기기
document.querySelectorAll(".quiz__desc").forEach (el => el.style.display = "none"); //설명가리기
}
updateQuiz();
//정답 확인
const anwerQuiz = () => {
const quizChoices = document.querySelectorAll(".quiz__choice");
//사용자가 체크가 정답 == 문제 정답
quizInfo.forEach((question, number) => {
const userSelector = `input[name=choice${number}]:checked`;
const quizSelectorWrap = quizChoices[number];
const userAnswer = (quizSelectorWrap.querySelector(userSelector)||{ }).value;
const dogWrap = quizWrap.querySelectorAll(".dog__wrap");
if(userAnswer == question.infoAnswer){
dogWrap[number].classList.remove("dislike");
dogWrap[number].classList.add("like");
quizScore++;
} else {
dogWrap[number].classList.remove("like");
dogWrap[number].classList.add("dislike");
}
});
document.querySelectorAll(".quiz__desc").forEach (el => el.style.display = "block"); //설명보이기
//점수 보이기
document.querySelector(".quiz__info").innerHTML = Math.ceil((quizScore / quizInfo.length) *100) + "점";
document.querySelector(".quiz__info").style.display = "block";
}
//정답 클릭
document.querySelector(".quiz__check").addEventListener("click", anwerQuiz);
</script>script 부분 입니다.
문제가 많기때문에 코드가 길어보입니다.
문제 정보를 배열안에 객체를 이용하여 정리를 했습니다.
{
infoType: "정보처리 기능사",
infoTime: "2010년 5회",
infoNumber : "20100501",
infoQuestion: "다음이 설명하고 있는 데이터 입출력 방식은?<br>- 데이터의 입출력 전송이 CPU를 통하지 않고, 입출력 장치와 기억 장치 간에 직접 데이터를 주고받는다.<br>- CPU와 주변 장치간의 속도차를 줄일 수 있다." ,
infoChoice: {
1: "DCA",
2: "DMA",
3: "Multiplexer",
4: "Channel",
},
infoAnswer: "2",
infoDesc: "DMA(Direct Memory Access) : CPU 관여 없이 주기억장치와 보조기억장치(주변장치) 사이에 데이터를 전송하는 방식"
}infoType: (문제 출처)
infoTime: (출제일자)
infoNumber : (문제 일련번호)
infoQuestion: (문제)
infoChoice: {
1: (보기1번)
2: (보기2번)
3: (보기3번)
4: (보기4번)
},
infoAnswer: (정답 번호)
infoDesc: (답 설명)
객체 안에는 문제 정보가 담겨 있습니다.
새로운 빈 배열 exam을 생성합니다.
quizInfo 라는 배열의 각 항목에 대해 다음 작업을 수행합니다.
해당 항목의 정보를 이용하여 HTML 문자열을 생성합니다. 이때, push() 함수를 사용하여 exam 배열에 추가합니다.
exam 배열에 최종적으로 두 개의 HTML 문자열을 추가합니다.
quizWrap이라는 HTML 요소의 내용을 exam 배열의 문자열들을 결합한 결과로 설정합니다.
.quiz__desc 클래스를 가진 모든 HTML 요소를 선택하여, 이들의 display 속성 값을 "none"으로 설정하여 해당 요소들을 숨깁니다.
이 함수가 실행되면 quizWrap이라는 HTML 요소에 quizInfo 배열의 내용을 기반으로 생성된 HTML 문서를 삽입하고, 해당 문서에는 각 문제의 정보와 선택 가능한 답안, 정답/오답 여부 및 그에 대한 설명이 포함됩니다.
answerQuiz() 코드는 "정답 확인" 버튼을 클릭하면 호출되는 함수입니다.
먼저 querySelectorAll() 메서드를 사용하여 .quiz__choice 클래스를 가진 모든 요소를 가져옵니다.
그리고 forEach() 메서드를 사용하여 각 문제의 선택지를 검사합니다.
사용자가 선택한 정답을 가져와서, 문제의 정답과 비교합니다.
사용자가 선택한 정답이 정답과 일치하면, 해당 문제의 강아지를 웃는 강아지로 변경하고, 점수를 증가시킵니다.
일치하지 않으면, 강아지가 슬퍼 하도록 변경합니다.
마지막으로, querySelectorAll() 메서드를 사용하여 .quiz__desc 클래스를 가진 모든 요소를 가져온 다음, forEach() 메서드를 사용하여 모든 설명을 표시합니다.
그리고 마지막으로, Math.ceil() 메서드를 사용하여 소숫점을 올려, 사용자의 최종 점수를 계산하고, 해당 값을 출력합니다.
마지막으로, 점수 확인 버튼을 중복적으로 누르면 기존 점수에 새로운 점수가 플러스 되어 비정상적인 점수가 출력되는 의도치 않은 현상을 발견했습니다. 이 부분은,
정답 확인을 위해 버튼을 누르는 함수에 quizScore = 0; 을 넣어주면 버튼을 누를때마다 점수가 초기화 되어
점수가 중복 플러스되는 현상을 없앴습니다.