“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
안녕하세요 ヾ(≧▽≦*)o 오늘은 자바스크립트 마우스 이펙트 다섯 번째 만드는 방법에 대해 총정리를 해보도록 하겠습니다.
이번엔 정보처리기사 60문제를 주제로 퀴즈 이펙트를 만들어 보도록 하겠습니다.
영역 지정해주기
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>퀴즈 이펙트05</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/quiz.css">
</head>
<body>
<header id="header">
<h1><a href="../javascript14.html">Quiz</a> <em>객관식 확인하기(여러문제) 유형</em></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 -->
<footer id="footer">
<a href="mailto:ebmdols@naver.com">yuna243441@naver.com</a>
</footer>
<!-- //footer -->보기를 네 개 만들어주기 위해서 label, choice를 만들어 줍니다.
스크립트 작성
2006년 04월 기출문제로 60문제를 만들어 보았습니다.
<script>
//문제 정보
const quizInfo = [
{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060401",
infoQuestion: "Accumulator(누산기)에 대한 설명으로 가장 적절한 것은?",
infoChoice: {
1: "연산부호를 해독하는 장치이다.",
2: "연산명령의 순서를 기억하는 장치이다.",
3: "연산명령이 주어지면 연산 준비를 하는 장치이다.",
4: "레지스터의 일종으로 산술연산 및 논리연산의 결과를 일시 기억하는 장치이다.",
},
infoAnswer: "4",
infoDesc: "누산기(ACC) : 연산 결과 일시 저장"
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060402",
infoQuestion: "다음 [보기]에 나열된 내용과 관계되는 장치는 어느 것인가?<br>[보기] 논리회로, 누산기, 가산기, 보수기",
infoChoice: {
1: "연산장치",
2: "기억장치",
3: "제어장치",
4: "보조기억장치"
},
infoAnswer: "1",
infoDesc: "가산기는 덧셈을 해주는 기계로써 연산장치의 일종입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060403",
infoQuestion: " 다음 그림의 Gate는 어느 회로인가?",
infoChoice: { 1: "exclusive-AND",
2: "1exclusive-NOR",
3: "exclusive-OR",
4: "OR"
},
infoAnswer: "3",
infoDesc: "exclusive-OR 게이트 입니다. OR 게이트와 유사합니다. 주의 하세요"
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060404",
infoQuestion: "동시에 여러 개의 입출력장치를 제어할 수 있는 채널은?",
infoChoice: { 1: "Duplex Channel",
2: "Multiplexer Channel",
3: "Register Channel",
4: "Selector Channel"
},
infoAnswer: "2",
infoDesc: "동시에 여러개라는 단어을 통하여 답이 멀티플랙서 임을 알수 있습니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060405",
infoQuestion: "8진수 234를 16진수로 바르게 표현한 것은?",
infoChoice: { 1: "9C",
2: "AD",
3: "11B",
4: "BC"
},
infoAnswer: "1",
infoDesc: "8진수를 16진수로 바로 고치는 것이 어려우므로 일단 2진수로 변환후 16진수로 변환합니다. <br>8진수를 2진수로 바꿀때는 3자리씩 확장하면 되고 2진수를 16진수로 바꿀때는 4자리씩 줄여 주면 됩니다. <br>8진수 234를 2진수로 변환하면 010 011 100 이 됩니다. 이를 16진수로 바꾸면 9C가 됩니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060406",
infoQuestion: "그림의 전기회로를 컴퓨터의 논리회로로 치환하면?",
infoChoice: { 1: "AND",
2: "OR",
3: "NOT",
4: "NAND"
},
infoAnswer: "2",
infoDesc: "위 회로는 SW1 또는 SW2가 연결되면 꼬마 전구에 불이 들어오므로 OR 게이트입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "2006047",
infoQuestion: "다음논리회로에서 출력 f의 값은?",
infoChoice: { 1: "0",
2: "1",
3: "1/2",
4: "-1"
},
infoAnswer: "2",
infoDesc: "이런문제의 가장 기본적인 문제는 출력 F는 단 하나만 나온다는 것입니다. 논리 게이트에서 출력은 오직 0 또는 1입니다. 그렇게 때문에 문제를 전혀 풀지 못하더라도 답이 0, 또는 1임을 알아야 합니다. 계산을 해보면 1 AND 1 = 1 이며 1 AND 0 은 0 입니다. 이 출력을 다시 1 OR 0 해보면 출력은 1이 됩니다.",
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060408",
infoQuestion: "다음 진리표와 같이 되는 논리회로는?",
infoChoice: { 1: "AND",
2: "OR",
3: "NOT",
4: "NAND"
},
infoAnswer: "2",
infoDesc: "위 회로는 SW1 또는 SW2가 연결되면 꼬마 전구에 불이 들어오므로 OR 게이트입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060409",
infoQuestion: "특정 비트 또는 특정 문자를 삭제하기 위해 사용하는 연산은?",
infoChoice: { 1: "OR 연산",
2: "AND 연산",
3: "MOVE 연산",
4: "Complement 연산"
},
infoAnswer: "2",
infoDesc: "특정문자 또는 특정 비트를 삭제 하는 연산을 마스크 연산이라고 하면 마스크 연산에 사용되는 게이트는 AND 게이트 입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060410",
infoQuestion: "2개의 조건을 동시에 만족해야 출력하는 연산자는?",
infoChoice: { 1: "OR",
2: "NOT",
3: "AND",
4: "NAND"
},
infoAnswer: "3",
infoDesc: "두개의 조건을 모두 만족해야 한다고 했습니다. 다르게 말하면 둘다 참이어야 참 이므로 AND 게이트가 됩니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060411",
infoQuestion: "이항(binary) 연산에 해당하는 것으로만 나열한 것은?",
infoChoice: { 1: "ROTATE, AND",
2: "MOVE, OR",
3: "AND, OR",
4: "SHIFT, AND"
},
infoAnswer: "3",
infoDesc: "단항연산 : ROTATE, SHIFT, MOVE, NOT(COMPLEMENT)"
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060412",
infoQuestion: "누를 때 마다 ON, OFF가 교차되는 스위치를 만들고자 할 때 사용되는 플립플롭은?",
infoChoice: { 1: "RS 플립플롭",
2: "D 플립플롭",
3: "JK 플립플롭",
4: "T 플립플롭"
},
infoAnswer: "4",
infoDesc: "누를때마다 상태가 반대로 변한다는것은 토글을 의미 합니다. 토글 플립플롭인 T 플립플롭이 답이 됩니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060413",
infoQuestion: "0-주소 명령은 연산시 어떤 자료구조를 이용하는가?",
infoChoice: { 1: "STACK",
2: "TREE",
3: "QUEUE",
4: "DEQUE"
},
infoAnswer: "1",
infoDesc: "O주소 : STACK"
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060414",
infoQuestion: "아래의 보기는 명령어 인출절차를 보인 것이다. 올바른 순서로 나열된 것은?<br>[보기] 1. 명령 계수기를 증가시킨다.<br>2. 명령어를 주기억장치로부터 인출한다.<br> 3. 명령 코드를 명령 레지스터에 옮긴다.<br> 4. 명령 계수기의 값을 번지 레지스터에 옮긴다.",
infoChoice: { 1: "①→②→③→④",
2: "①→③→④→②",
3: "④→②→①→③",
4: "③→②→①→④"
},
infoAnswer: "3",
infoDesc: "무적권 외워라!!!!!!"
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060415",
infoQuestion: "전가산기(Full Adder)의 구성으로 옳은 것은?",
infoChoice: { 1: "1개의 반가산기와 2개의 OR 게이트 회로",
2: "2개의 반가산기와 1개의 OR 게이트 회로",
3: "1개의 AND 게이트 회로와 1개의 Exclusive OR 회로",
4: "2개의 반감산기만으로 구성"
},
infoAnswer: "2",
infoDesc: "전가산기는 반가산기 2개 + OR 게이트 1개로 구성됩니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060416",
infoQuestion: "기억장치 고유의 번지로서 0, 1, 2, 3 .......과 같이 16진수로 약속하여 순서대로 결정해 놓은 번지, 즉 기억장치 중의 기억장소를 직접 숫자로 지정하는 주소로서 기계어 정보가 기억되어 있는 번지는?",
infoChoice: { 1: "기호번지",
2: "상대번지",
3: "변위번지",
4: "절대번지"
},
infoAnswer: "4",
infoDesc: "고유의 번지를 지정하여 번지가 절대로 변하지 않게 되어 있습니다. 이런 번지를 절대 번지라고 합니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060417",
infoQuestion: "명령어의 구성이 연산자부에 3bit, 주소부에 5bit로 되어 있을 때 이 명령어를 사용하는 컴퓨터는 최대 몇 가지의 동작이 가능한가?",
infoChoice: { 1: "256",
2: "16",
3: "8",
4: "32"
},
infoAnswer: "3",
infoDesc: "명령어의 최대 갯수는(동작 갯수)는 연산자부 비트수에 의해 결정 됩니다. 3비트 명령어를 사용하므로 사용가능한 명령어 갯수는 2의 3승개(2^3)인 8개 사용 가능합니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060418",
infoQuestion: "불대수 정리 중 옳지 않은 것은?",
infoChoice: { 1: "A+A = 1",
2: "A·A = A",
3: "1+A = 1",
4: "A·1 = A"
},
infoAnswer: "1",
infoDesc: "A + A = A 입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060419",
infoQuestion: "입출력장치의 동작속도와 전자계산기 내부의 동작속도를 맞추는데 사용되는 레지스터는?",
infoChoice: { 1: "버퍼레지스터",
2: "시프트레지스터",
3: "어드레스레지스터",
4: "상태레지스터"
},
infoAnswer: "1",
infoDesc: "서로 다른 장치의 속도를 보완하기 위해서 사용하는 것을 버퍼라고 합니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060420",
infoQuestion: "2진수 1001을 Gray Code로 변환하면?",
infoChoice: { 1: "1001",
2: "1010",
3: "1101",
4: "1110"
},
infoAnswer: "3",
infoDesc: "처음 : 그대로 내려와서 1 <br> 두번째 : 1+0=1 <br> 세번째 : 0+0=0<br> 네번째 : 0+1=1<br> 따라서 1101",
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060421",
infoQuestion: "데이터베이스의 구조를 3단계로 구분할 때 해당되지 않는 것은?",
infoChoice: { 1: "내부스키마",
2: "외부스키마",
3: "개념스키마",
4: "내용스키마"
},
infoAnswer: "4",
infoDesc: "외 개 내 입니다. 내용 스키마는 없습니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060422",
infoQuestion: "스프레드시트에서 반복 실행하여야 하는 동일 작업이나 복잡한 작업을 하나의 명령으로 정의하여 실행할 수 있는 기능을 무엇이라고 하는가?",
infoChoice: { 1: "슬라이드",
2: "매크로",
3: "필터",
4: "셀"
},
infoAnswer: "2",
infoDesc: "매크로 : 동일한 작업을 자동으로 반복 시켜주는 것"
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060423",
infoQuestion: "다음 SQL 검색문의 의미로 가장 적절한 것은?<br>[보기] SELECT DISTINCT 학과명 FROM 학생;",
infoChoice: { 1: "학생테이블의 학과명을 모두 검색하라.",
2: "학생테이블의 학과명을 중복되지 않게 모두 검색하라",
3: "학생테이블의 학과명 중에서 중복된 학과명은 모두 검색하라",
4: "학생테이블의 학과명을 구별하지 말고 모두 검색하라"
},
infoAnswer: "2",
infoDesc: "DISTINCT : 검색 결과중 중복은 제거하고 보여 달라는 뜻입니다. 단순히 중복제거라고 암기 합니다"
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060424",
infoQuestion: "프레젠테이션에서 각 페이지의 기본 단위를 의미하는 것은?",
infoChoice: { 1: "매크로",
2: "블록",
3: "슬라이드",
4: "프로젝터"
},
infoAnswer: "3",
infoDesc: "프리젠테이션(파워포인트)의 기본단위는 슬라이드, 스프레드시트(엑셀)의 기본단위는 셀 입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060425",
infoQuestion: "INSA(SNO, NAME) 테이블에서 SNO가 100인 튜플을 삭제하는 SQL 문은?",
infoChoice: { 1: "DELETE FROM INSA WHERE SNO = 100;",
2: "REMOVE FROM INSA WHERE SNO = 100;",
3: "DROP TABLE INSA WHERE SNO = 100;",
4: "DESTORY INSA WHERE SHO = 100;"
},
infoAnswer: "1",
infoDesc: "DROP는 데이터 베이스, 테이블 삭제 명령어 입니다. 튜플삭제는 DELETE 명령어를 사용합니다. 삭제 조건이 SNO가 100인 튜플을 삭제 하므로 WHERE SNO=100 하면 됩니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060426",
infoQuestion: "프레젠테이션에서 프레젠테이션의 흐름을 기획한 것을 무엇이라고 하는가?",
infoChoice: { 1: "셀",
2: "개체",
3: "슬라이드",
4: "시나리오"
},
infoAnswer: "4",
infoDesc: "각종 문서의 흐름을 기획한것을 시나리오 라고 합니다. 영화 시나리오와 같은 의미 입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060427",
infoQuestion: "스프레드시트의 기능으로 거리가 먼 것은?",
infoChoice: { 1: "그래프 기능",
2: "슬라이드 쇼 기능",
3: "문서작성 기능",
4: "수치계산 기능"
},
infoAnswer: "2",
infoDesc: "스프레드 시트는 수치 계산용 프로그램입니다. 약간의 문서 작성 기능도 지원하며. 슬라이드쇼 기능은 프리젠테이션 프로그램의 고유 기능입니다."
}
];quizInfo라는 변수에 문제 정보들을 배열과 객체 안에 넣어줍니다.
문제가 너무 많아서 조금 생략 ,, 해씁니다 ? ㅎ
선택자 만들기
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
let quizScore = 0;quizWrap 선택자를 만들어 준 뒤 점수를 표시해주기 위해 quizScore라는 변수를 선언해 줍니다.
문제 출력하기
// 문제 출력
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();answerQuiz 함수는 퀴즈의 정답을 확인하고, 정답 여부에 떠러 화면에 결과를 보여주는 기능을 수행합니다.
quizChoices 변수에 문제의 선택지가 담긴 DOM 엘리먼트를 선택한 뒤 document.qureySelectorAll 메서드를 사용해 선택한 엘리먼트를 NodeList 형태로 반환합니다.
quizInfo 배열에 저장된 각 문제에 대해 반복문을 수행합니다. 각 문제에 대해 사용자가 선택한 답안을 가져오고, 이를 정답과 비교합니다.
정답 여부에 따라 해당 문제의 선택지 영역에 강아지 이미지와 함께 정답입니다 또는 틀렸습니다는 메세지를 출력합니다.
4quizScore 변수를 사용해 정답을 경우 점수를 추가합니다.
모든 문제에 대해 정답 여부를 확인한 후 설명과 사용자의 점수를 화면에 출력합니다.
즉, 해당 코드는 퀴즈를 수행하는 웹 페이지에서 정답확인 버튼을 누르면 호출되며, 사용자가 선택한 답안을 확인하고, 정답 여부에 따라 결과를 보여주는 기능을 수행합니다.
정답 표시하기
exam.push(`
<div class="quiz__info">??점</div>
<div class="quiz__check"><b>정답 확인</b></div>
`);
quizWrap.innerHTML = exam.join(" ");quiz__info와 quiz__check를 설정해 준 뒤
document.querySelector(".quiz__check").addEventListener("click", answerQuiz);선택자를 통해 quiz__check를 클릭했을 때 addEventListener를 통해 answerQuiz가 출력될 수 있도록 해줍니다.
완성된 페이지
잘 모르는 속성
| 속성 | 설명 |
| innerHTML | HTML 요소의 내부 HTML 콘텐츠를 변경하는 데 사용됩니다. 위 코드를 실행하면, <div> 요소의 내부 HTML이 "새로운 내용"으로 변경됩니다. 이러한 방식으로, innerHTML 속성을 사용하여 DOM 요소의 내용을 동적으로 변경할 수 있습니다. |
| document.querySelectorAll | document.querySelectorAll() 메소드는 지정된 CSS 선택자에 해당하는 모든 요소를 NodeList 객체로 반환합니다. 이 메소드를 사용하면 많은 요소를 선택하고 조작할 수 있으므로, 코드를 보다 간결하고 효율적으로 작성할 수 있습니다. |
| DOM | DOM(Document Object Model)은 HTML, XML, 그리고 SVG와 같은 문서를 객체 모델로 표현하는 방법입니다. 즉, 웹 페이지를 구성하는 HTML, CSS, JavaScript 등의 요소들을 트리 구조로 표현하고, 이들 요소에 접근하고 조작할 수 있는 API를 제공합니다.JavaScript를 사용하여 DOM 요소의 스타일을 변경하거나, 새로운 HTML 콘텐츠를 동적으로 추가하거나, 기존 콘텐츠를 제거하는 등의 작업을 수행할 수 있습니다. |
🥰 오늘도 감사합니다.
'정보처리기능사' 카테고리의 다른 글
| 정보처리기사 / 기능사 문제풀이 오답노트 (8) | 2023.04.28 |
|---|---|
| MySQL 테스트 (8) | 2023.04.21 |
| 웹디자인기능사 2015년 7월 19일 필기 오답노트 (9) | 2023.04.09 |
| 정보처리기능사 2011년 4월 17일 필기 오답노트 (11) | 2023.04.07 |
| 정보처리기능사 문제풀이 퀴즈 이펙트 여섯번째 (7) | 2023.03.27 |