...
728x90
반응형
여러개의 객관식문제 출력하기 (슬라이드 형식)
HTML 작성하기
<!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>HTML 정리해보기
- 기존 4번의 객관식 페이지와 동일하지만 이번 페이지에서는 각각의 Tag를 만들어 script를 통해 html문서에 넣어 줄 것이라 문제의 보기 부분을 지웠습니다.
- 그 외는 4번 페이지의 html과 동일합니다.
새로 추가된 CSS
.quiz__main h4 {
text-align: center;
padding-top: 5px;
font-family: DungGeunMo;
}CSS 정리해보기
- 남은 문제의 개수를 알려주는 h4태그를 하나 넣어주었기 때문에 h4태그의 속성을 만들어 주었습니다.
Javascript 작성하기
//문제 정보
const quizInfo = [
{
infoType : "정보처리 기능사",
infoTime : "2005년 4회",
infoNumber : "20050401",
infoQuestion : "배타적 논리합(XOR) 게이트를 나타내는 논리기호는?",
infoChoice : [
"<img style='width:70px' src='img/img01-1.JPG'>",
"<img style='width:70px' src='img/img01-2.JPG'>",
"<img style='width:70px' src='img/img01-3.JPG'>",
"<img style='width:70px' src='img/img01-4.JPG'>"
],
infoAnswer : "<img style='width:70px' src='img/img01-2.JPG'>",
infoDesc : "OR게이트와 유사합니다.뒤에 날개가 달려 있습니다."
},{
infoType : "정보처리 기능사",
infoTime : "2005년 4회",
infoNumber : "20050402",
infoQuestion : "EBCDIC 코드는 몇 개의 Zone Bit를 갖는가?",
infoChoice : [
"1",
"2",
"3",
"4"
],
infoAnswer : "4",
infoDesc : "EBCDIC 코드는 총 8비트 코드 입니다..존비트 구하는 공식은 존비트 = 전체 비트수 - 4(디지트비트) 입니다. 모든 코드는 존비트 + 디지트비트로 구성됩니다. 모든 코드의 디지트 비트가 4 이므로 위의 공식이 성립합니다."
},{
infoType : "정보처리 기능사",
infoTime : "2005년 4회",
infoNumber : "20050403",
infoQuestion : "레지스터(Register)내로 새로운 자료(Data)를 읽어들이면 어떤 변화가 발생하는가?",
infoChoice : [
"현존하는 내용에 아무런 영향도 없다.",
"레지스터의 먼저 내용이 지워진다.",
"그 레지스터가 누산기일 때만 새 자료가 읽어진다.",
"그 레지스터가 누산기이거나 명령 레지스터일 때만 자료를 읽어 들일 수 있다."
],
infoAnswer : "레지스터의 먼저 내용이 지워진다.",
infoDesc : "레지시트터는 하나의 정보만 기억할수 있으므로 이전에 기억된 내용은 사라지고 새로입력된 정보만 기억되게 됩니다."
},{
infoType : "정보처리 기능사",
infoTime : "2005년 4회",
infoNumber : "20050404",
infoQuestion : "101101의 2의 보수는 얼마인가?",
infoChoice : [
"110111",
"110001",
"111000",
"010011"
],
infoAnswer : "010011",
infoDesc : "1의 보수를 취한뒤 1을 더해주거나, 오른쪽끝에서부터 1이 나올때 까지는 똑같이 적고 나머지는 반대값(1의보수)을 적어주면 됩니다.. 1의 보수 : 0->1, 1->0으로 바꾸시면 그것이 1의 보수입니다."
},{
infoType : "정보처리 기능사",
infoTime : "2005년 4회",
infoNumber : "20050405",
infoQuestion : "<img style='width:200px' src=img/img05.JPG>와 같은 논리식은?",
infoChoice : [
"<img style='width:130px' src=img/img05-1.JPG>",
"<img style='width:130px' src=img/img05-2.JPG>",
"<img style='width:130px' src=img/img05-3.JPG>",
"<img style='width:130px' src=img/img05-4.JPG>"
],
infoAnswer : "<img style='width:130px' src=img/img05-1.JPG>",
infoDesc : "분배법칙을 통해서 풀어서 드모르간 정리를 하시거나. 드모르간 정리를 먼저 하고 분배 법칙을 이용하면 됩니다."
},{
infoType : "정보처리 기능사",
infoTime : "2005년 4회",
infoNumber : "20050406",
infoQuestion : "이항(Binary) 연산에 해당하는 것은?",
infoChoice : [
"보수 연산",
"논리곱(AND) 연산",
"쉬프트 연산",
"로테이트 연산"
],
infoAnswer : "논리곱(AND) 연산",
infoDesc : "단항연산자 종류 : move, shift, rotate, not(complement) 입니다.이항 연산자란 항이 2개 인것을 말합니다."
}
];
// 선택자 (전역)
const quizWrap = document.querySelector(".quiz__wrap");
const quizMainH = quizWrap.querySelector(".quiz__main h4")
const quizTitle = quizWrap.querySelector(".quiz__title");
const quizChoice = quizWrap.querySelector(".quiz__choice");
const quizQuestion = quizWrap.querySelector(".quiz__question");
const dogWrap = quizWrap.querySelector(".dog__wrap");
const quizAnswer = quizWrap.querySelector(".quiz__answer");
const quizNext = quizWrap.querySelector(".quiz__answer .next");
const quizDesc = quizWrap.querySelector(".quiz__desc");
let quizCount = 0;
let quizScore = 0;
// 문제 출력
const updateQuiz = (index) => {
let questionnumTag = `
${quizInfo.length - index} 문제 남았습니다.
`;
let typeTag = `
<span>${quizInfo[index].infoType}</span>
<em>${quizInfo[index].infoTime}</em>
`;
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 questionTag = `
<em>${index+1}</em>.
<span>${quizInfo[index].infoQuestion}</span>
`;
let descTag = `
정답은 "${quizInfo[index].infoAnswer}"입니다.<br>
${quizInfo[index].infoDesc}
`;
quizTitle.innerHTML = typeTag;
quizChoice.innerHTML = choiceTag;
quizQuestion.innerHTML = questionTag;
quizDesc.innerHTML = descTag;
quizMainH.innerHTML = questionnumTag;
// 보기 선택자 (지역)
const quizChoiceSpan = quizWrap.querySelectorAll(".quiz__choice span");
const quizChoiceInput = quizWrap.querySelectorAll(".quiz__choice input");
// quizChoiceSpan.forEach((span, i) => {
// 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";
if(quizInfo.length - quizCount == 1){
alert(quizScore + "개 맞았습니다. 점수는" + Math.ceil((quizScore/quizInfo.length)*100) + "점 입니다.");
};
};
// 정답 확인
quizNext.addEventListener("click", () => {
quizCount++;
dogWrap.classList.remove("like", "dislike");
updateQuiz(quizCount);
});javascript 정리해보기
- quizInfo라는 변수에 배열 속 객체 형식으로 문제정보를 저장해 주었습니다. (6문제)
- 각각의 선택자를 변수에 저장해 주었습니다.
- updateQuiz 함수
- update 함수는 각각의 변화하는 값을 변수에 저장해 innerHTML로 html문서에 넣어주어 문제를 출력하는 함수입니다.
- questionnumTag 는 quizInfo.length (총 문제 개수)에서 index (매개변수로 받아온 quizCount)의 값을 뺀 것으로 남은 문제를 구하기 위한 내용입니다. (quizCount는 처음에 0을 저장해놓은 변수로 나중에 ++연산을 통해 1씩 증가하면서 현재 문제 번호를 나타내는데 사용합니다.)
- typeTag 는 문제 유형과 출제 연도를 나타내기 위한 내용입니다.
- choiceTag 는 각각의 보기안에 quizInfo에서 가져온 보기를 넣어주기 위한 내용입니다.
- questionTag 는 index에 +1 값을 사용하면서 문제 번호를 나타내고, 문제 지문을 가져오기 위한 내용입니다.
- descTag 는 정답내용과 해설을 적어주기 위한 내용입니다.
- 각각의 Tag를 사용해서 맞는 부분에 innerHTML을 사용해 넣어주었습니다.
- 각각의 보기를 선택자로 지정해주고 각각의 보기에 setAttribute를 사용해 onclick의 속성을 넣어주고 함수를 넣어줍니다.
- 다음 버튼과 해설 버튼을 숨기는 것 까지 적어주고 함수 정의를 마칩니다.
- 매개변수 자리로 넘겨줄 quizCount를 적어주고 updateQuiz(quizCount)함수를 실행시킵니다.
- choiceSelected 함수
- userAnswer라는 변수에 answer.textContent를 사용해 사용자가 체크한 답의 텍스트를 가져와 저장합니다.
- currentAnswer라는 변수에 quizInfo[quizCount].infoAnswer 로 현재 문제의 정답을 불러와 저장합니다.
- if문을 사용해 userAnswer == currentAnswer (사용자의 정답과 현재 문제의 정답이 같으면) 일 때,
- 다른 퀴즈 페이지와 동일하게 dogWrap의 classList에 like를 추가하고, quizScore에 ++연산을 해줍니다.
- else (다를경우) dogWrap의 classList에 dislike를 추가합니다.
- 다음 문제 버튼과 해설 버튼을 보이게 만들어줍니다.
- if문을 사용하여 quizInfo.length - quizCount == 1 (문제 개수 - 현재문제의 index값 을 뺀 값이 1) 일 때,
- alert창을 통해 맞힌 문제, 틀린 문제의 개수를 알려주고 점수를 알려줍니다. (점수는 퀴즈 페이지 5번과 동일하게 구합니다.)
- quizNext에 addEventListener를 통해 클릭했을 때 이벤트를 줍니다. 내용으로는
- quizCount++ ( quizCount가 1씩 증가하면서 매개변수로 전달되는 값이 1씩 증가하면서 다음문제로 넘어갑니다.)
- dogWrap의 classList에서 like와 dislike를 제거합니다.
- updateQuiz(quizCount)를 실행합니다.
728x90
반응형