“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
안녕하세요 ヾ(≧▽≦*)o 오늘은 자바스크립트 마우스 이펙트 여섯 번째 만드는 방법에 대해 총정리를 해보도록 하겠습니다.
이번에도 다섯번째와 같이 정보처리기능사 60문제를 주제로 퀴즈 이펙트를 만들어 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<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/quiz.css">
<link rel="stylesheet" href="css/reset.css">
<link href="https://unpkg.com/pattern.css" rel="stylesheet">
</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><a href="quizEffect05.html">5</a></li>
<li class="active"><a href="quizEffect06.html">6</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">
<h4></h4>
<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">
</div>
<div class="quiz__answer">
<button class="next">다음 문제보기</button>
</div>
<div class="quiz__desc"></div>
</div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:gnsrbdi@naver.com">gnsrdbi@naver.com</a>
</footer>
<!-- //footer -->
</body>
</html>기존 4번의 객관식 페이지와 동일하지만 이번 페이지에선 각각의 Tag를 만들어 script를 통해 html문서에 넣어 줄 것이라 문제의 보기 부분을 지워줍니다.
새로 추가된 CSS
.quiz__main h4 {
text-align: center;
padding-top: 5px;
font-family: DungGeunMo;
}
JAVASCRIPT
<script>
//문제 정보
const quizInfo = [
{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060401",
infoQuestion: "Accumulator(누산기)에 대한 설명으로 가장 적절한 것은?",
infoChoice: ["연산부호를 해독하는 장치이다.","연산명령의 순서를 기억하는 장치이다.","연산명령이 주어지면 연산 준비를 하는 장치이다.","레지스터의 일종으로 산술연산 및 논리연산의 결과를 일시 기억하는 장치이다.",],
infoAnswer: "레지스터의 일종으로 산술연산 및 논리연산의 결과를 일시 기억하는 장치이다.",
infoDesc: "누산기(ACC) : 연산 결과 일시 저장"
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060402",
infoQuestion: "다음 [보기]에 나열된 내용과 관계되는 장치는 어느 것인가?<br>[보기] 논리회로, 누산기, 가산기, 보수기",
infoChoice: ["연산장치","기억장치","제어장치","보조기억장치"],
infoAnswer: "연산장치",
infoDesc: "가산기는 덧셈을 해주는 기계로써 연산장치의 일종입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060403",
infoQuestion: " 다음 그림의 Gate는 어느 회로인가?",
infoChoice: ["exclusive-AND","1exclusive-NOR","exclusive-OR","OR"],
infoAnswer: "exclusive-OR",
infoDesc: "exclusive-OR 게이트 입니다. OR 게이트와 유사합니다. 주의 하세요"
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060404",
infoQuestion: "동시에 여러 개의 입출력장치를 제어할 수 있는 채널은?",
infoChoice: ["Duplex Channel","Multiplexer Channel","Register Channel","Selector Channel"],
infoAnswer: "Multiplexer Channel",
infoDesc: "동시에 여러개라는 단어을 통하여 답이 멀티플랙서 임을 알수 있습니다."
},{
infoType: "정보처리 기능사",
infoTime: "2006년 4회",
infoNumber: "20060405",
infoQuestion: "8진수 234를 16진수로 바르게 표현한 것은?",
infoChoice: ["9C","AD","11B","BC"],
infoAnswer: "9C",
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:["AND","OR","NOT","NAND"],
infoAnswer: "OR",
infoDesc: "위 회로는 SW1 또는 SW2가 연결되면 꼬마 전구에 불이 들어오므로 OR 게이트입니다."
}
];
//선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title");
const quizQuestion = quizWrap.querySelector(".quiz__question");
const quizChoice = quizWrap.querySelector(".quiz__choice");
const dogWrap = quizWrap.querySelector(".dog__wrap");
const dogWrapem = quizWrap.querySelector(".dog__wrap em");
const dogWrapp = quizWrap.querySelector(".dog__wrap p");
const dogWrapspan = quizWrap.querySelector(".dog__wrap span");
const quizAnswer = quizWrap.querySelector(".quiz__answer");
const quizNext = quizWrap.querySelector(".quiz__answer .next");
const quizDesc = quizWrap.querySelector(".quiz__desc");
const quizInfos = quizWrap.querySelector(".quiz__info");
let quizCount = 0;
let quizScore = 0;
//문제 출력
const updateQuiz = (index) => {
let typeTag = `
<span>${quizInfo[index].infoType}</span>
<em>${quizInfo[index].infoTime}</em>
`;
let quesetionTag = `
<em>${index+1}</em>.
<span>${quizInfo[index].infoQuestion}</span>
`;
let choiceTag = `
<label for="choice1">
<input type="radio" id="choice1" name="choice" value="1">
<span>${quizInfo[index].infoChoice[0]}</span>
</label>
<label for="choice2">
<input type="radio" id="choice2" name="choice" value="2">
<span>${quizInfo[index].infoChoice[1]}</span>
</label>
<label for="choice3">
<input type="radio" id="choice3" name="choice" value="3">
<span>${quizInfo[index].infoChoice[2]}</span>
</label>
<label for="choice4">
<input type="radio" id="choice4" name="choice" value="4">
<span>${quizInfo[index].infoChoice[3]}</span>
</label>
`;
let descTag = `
정답은 ${quizInfo[index].infoAnswer}입니다.
${quizInfo[index].infoDesc}
`;
dogWrapem.textContent = "총 갯수는 "+quizInfo.length +"개 입니다.";
dogWrapspan.textContent = `현재까지 푼 문제는 ${quizCount+1} 개 입니다.`;
dogWrapp.textContent = `맞힌 갯수는 ${quizScore} 개 입니다.`;
quizTitle.innerHTML = typeTag;
quizQuestion.innerHTML = quesetionTag;
quizChoice.innerHTML = choiceTag;
quizDesc.innerHTML = descTag;
//보기 선택자
const quizChoiceSpan = quizWrap.querySelectorAll(".quiz__choice span");
const quizChoiceInput = quizWrap.querySelectorAll(".quiz__choice input");
// quizChoiceSpan.forEach((span, num) => {
// span.setAttribute("onclick", "choiceSelected(this)");
// });
for(let i=0; i<quizChoiceSpan.length; i++){
quizChoiceSpan[i].setAttribute("onclick", "choiceSelected(this)");
// quizChoiceInput[i].disabled = "true";
}
//다음 버튼 , 해설 숨기기
quizAnswer.style.display = "none";
quizDesc.style.display = "none";
};
updateQuiz(quizCount);
//객관식 선택
function choiceSelected(answer){
let userAnswer = answer.textContent; //사용자 정답
let currentAnswer = quizInfo[quizCount].infoAnswer;
if(userAnswer == currentAnswer){
dogWrap.classList.add("like");
quizScore++
} else {
dogWrap.classList.add("dislike");
}
quizAnswer.style.display = "block";
quizDesc.style.display = "block";
dogWrapp.textContent = `맞힌 갯수는 ${quizScore} 개 입니다.`;
}
console.log(quizScore);
//정답 확인
quizNext.addEventListener("click", () => {
quizCount++;
if(quizCount==quizInfo.length) {
quizInfos.textContent = Math.ceil((quizScore / quizInfo.length) * 100) + "점";
} else {
updateQuiz(quizCount);
}
dogWrap.classList.remove("like","dislike")
dogWrapspan.textContent = `현재까지 푼 문제는 ${quizCount+1} 개 입니다.`;
});
</script>quizInfo,라는 변수에 배열 속 객체 형식으로 여섯 문제를 저장해 준 뒤 각각의 선택자를 변수에 저장해 주었습니다.
| 속성 | 설명 |
| update | 각각의 변화하는 값을 변수에 저장해 innerHTML로 html문서에 넣어 문제를 출력하는 함수입니다. |
| questionnumTag | 총 문제 갯수에서 index의 값을 뺀 것으로 남은 문제를 구하기 위한 내용입니다.(quizCount는 처음에 0을 저장해놓은 변수로 나중에 ++연산을 통해 1씩 증가하면서 현재 문제 번호를 나타내는데 사용합니다.) |
| typeTag | 문제 유형과 출제 연도를 나타내기 위한 내용입니다. |
| choiceTag | 각각의 보기안에 quizInfo에서 가져온 보기를 넣어주기 위한 내용입니다. |
| questionTag | index에 +1 값을 사용하면서 문제 번호를 나타내고, 문제 지문을 가져오기 위한 내용입니다. |
| descTag | 정답내용과 해설을 적어주기 위한 내용입니다. |
각각의 Tag를 사용해 맞는 부분에 innerHTML을 사용해 넣어주었습니다.
각각의 보기를 선택자로 지정해주고 각각의 보기에 setAttribute를 사용해 onclick의 속성을 넣어주고 함수를 넣어줍니다.
다음 버튼과 해설 버튼을 숨기는 것까지 적어주고 함수의 정의를 마칩니다.
매개변수 자리로 넘겨줄 quizCount를 적어주고 updateQuiz(quizCount)함수를 실행시킵니다.
🥰 완성 모습입니다.
'정보처리기능사' 카테고리의 다른 글
| 정보처리기사 / 기능사 문제풀이 오답노트 (8) | 2023.04.28 |
|---|---|
| MySQL 테스트 (8) | 2023.04.21 |
| 웹디자인기능사 2015년 7월 19일 필기 오답노트 (9) | 2023.04.09 |
| 정보처리기능사 2011년 4월 17일 필기 오답노트 (11) | 2023.04.07 |
| 정보처리기능사 문제 풀어보기(퀴즈이펙트 5) (14) | 2023.03.25 |