728x90
퀴즈사이트 만들기
다음 프레임 처럼 다중 문제를 다음문제버튼을 통해 다음문제로 넘어가는 형태로 만들어 보겠습니다.
코드블럭
<!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>퀴즈 이펙트06</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><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">
<div class="quiz__question">
<em></em>. <span></span>
</div>
<div class="quiz__view">
<div class="dog__wrap">
<div class="search__info">
<span></span>
</div>
<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" class="select" value="1">
<span></span>
</label>
<label for="choice2">
<input type="radio" id="choice2" name="choice" class="select" value="2">
<span></span>
</label>
<label for="choice3">
<input type="radio" id="choice3" name="choice" class="select" value="3">
<span></span>
</label>
<label for="choice4">
<input type="radio" id="choice4" name="choice" class="select" value="4">
<span></span>
</label> -->
</div>
<div class="quiz__answer">
<button class="next">다음 문제</button>
</div>
<div class="quiz__desc"></div>
<div class="quiz__info">??점</div>
<div class="quiz__check"><span>?</span>개</div>
</div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:lee3ll@naver.com">lee3ll@naver.com</a>
</footer>
<!-- //footer -->
<script>
//문제 정보
//문제 정보
const quizInfo = [
{
infoType: "정보처리 기능사",
infoTime: "2009년 27회",
infoNumber: "20110927",
infoQuestion: "입/출력장치와 주기억장치 사이에 위치하여 데이터 처리속도의 차이를 줄이는데 도움이 되는 장치는?",
infoChoice: [
"입/출력 채널","명령해독기","연산장치","인덱스레지스터"
],
infoAnswer: "입/출력 채널",
infoDesc: "채중입 : 채널은 중앙처리장치와 입출력 장치 사이에서 데이터 처리 속도 차이를 보완해 줍니다."
},{
infoType: "정보처리 기능사",
infoTime: "2009년 27회",
infoNumber: "20110927",
infoQuestion: "다음과 같은 계산에 의해 주소를 지정하는 방식은?",
infoChoice: [
"색인주소지정","상대주소지정","베이스주소지정","절대주소지정"
],
infoAnswer: "상대주소지정",
infoDesc: "주소부분 + 프로그램카운터(PC) : 상대주소(Relative)주소부분 + 인덱스 레지스터(Index) : 인덱스 주소방식주소부분 + 베이스 레지스터(Base) : 베이스 주소방식PC값을 더하는 경우만 특별히 상대주소라고 합니다.나머지는 더해지는 레지스터 이름을 그대로 사용합니다."
},{
infoType: "정보처리 기능사",
infoTime: "2009년 27회",
infoNumber: "20110927",
infoQuestion: "(11111)₂+ (01011)₂의 결과로 옳은 것은?",
infoChoice: [
"(101010)₂","(110101)₂","(101001)₂","(010101)₂"
],
infoAnswer: "(101010)₂",
infoDesc: "<br>11111<br> +01011<br>______<br>101010"
},{
infoType: "정보처리 기능사",
infoTime: "2009년 27회",
infoNumber: "20110927",
infoQuestion: "동시에 여러 개의 입/출력 장치를 제어할 수 있는 채널(Channel)은?",
infoChoice: [
" Multiplexer","Duplex","Register","Selector",
],
infoAnswer: "Multiplexer",
infoDesc: "<br>11111<br> +01011<br>______<br>101010"
},{
infoType: "정보처리 기능사",
infoTime: "2009년 27회",
infoNumber: "20110927",
infoQuestion: "다음과 같은 설명에 해당되는 용어는?<br><br>컴퓨터가 정상적인 업무를 수행하는 도중에 발생하는 예기치 않은 일들에 대하여 컴퓨터의 작동이 중단 없이 계속적으로 업무를 수행할 수 있도록 하는 기능",
infoChoice: [
"Spooling","Buffering","Interrup","Virtual Memory"
],
infoAnswer: "Interrup",
infoDesc: "인터럽트 : 정상적일 일을 처리 하는 도중 예기치 못한 상황이 발생하여 예기치 못한 일부터 먼저 처리한후 다시 원래 일을 다시 하는것"
},{
infoType: "정보처리 기능사",
infoTime: "2009년 27회",
infoNumber: "20110927",
infoQuestion: "기억장치에서 읽어낸 명령을 받고 이것을 실행하기 위하여 일시 기억하는 레지스터는?",
infoChoice: [
"명령(instruction)", "누산기(accumulator)","저장(storage)","인덱스(index)",
],
infoAnswer: "명령(instruction)",
infoDesc: "명령어를 읽어서 저장한다고 하였으므로 명령어 레지스터(IR) 입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2009년 27회",
infoNumber: "20110927",
infoQuestion: "2진수 (110010101011)2을 8진수와 16진수로 올바르게 변환한 것은?",
infoChoice: [
"(5253)8, (BAB)16","(5253)8, (CAB)16","(6253)8, (BAB)16","(6253)8, (CAB)16"
],
infoAnswer: "(6253)8, (CAB)16",
infoDesc: "8진수 변환시에는 3자리씩 110 010 101 011 으로 끊고 각각 계산하여 6,2,5,3으로 만듭니다.16진수 변환시에는 4자리씩 1100 1010 1011 으로 끊고 각각 계산하여 12,10,11으로만듭니다.16진수를 계산하면 1,2,3,4,5,6,7,8,9,A,B,C,D,E,F 중에 맞는 숫자를 찾아서 계산하여 CAB를 만듭니다."
}
];
//선택자(전역변수)
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 quizAnswer = quizWrap.querySelector(".quiz__answer");
const quizNext = quizWrap.querySelector(".quiz__answer .next");
const quizDesc = quizWrap.querySelector(".quiz__desc");
const quizLength = quizWrap.querySelector(".search__info span");
const quizCheck = quizWrap.querySelector(".quiz__check span");
let quizCount = 0;
let quizScore = 0;
//문제 출력
const updateQuiz = (index) => {
let typeTag = `
<span>${quizInfo[index].infoType}</span>
<em>${quizInfo[index].infoTime}</em>
`;
let questionTag = `
<em>${index+1}.</em>
<span>${quizInfo[index].infoQuestion}</span>
`;
let choiceTag = `
<label for="choice1">
<input type="radio" id="choice1" name="choice" class="select" value="1">
<span>${quizInfo[index].infoChoice[0]}</span>
</label>
<label for="choice2">
<input type="radio" id="choice2" name="choice" class="select" value="2">
<span>${quizInfo[index].infoChoice[1]}</span>
</label>
<label for="choice3">
<input type="radio" id="choice3" name="choice" class="select" value="3">
<span>${quizInfo[index].infoChoice[2]}</span>
</label>
<label for="choice4">
<input type="radio" id="choice4" name="choice" class="select" value="4">
<span>${quizInfo[index].infoChoice[3]}</span>
</label>`
let descTag = `
정답은 ${quizInfo[index].infoAnswer}입니다.<br>
${quizInfo[index].infoDesc}
`;
let lengthTag = `
${quizInfo.length-index} 문제 남았습니다.
`;
quizTitle.innerHTML = typeTag;
quizQuestion.innerHTML = questionTag;
quizChoice.innerHTML = choiceTag;
quizDesc.innerHTML = descTag;
quizLength.innerHTML = lengthTag;
//보기 선택자
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; //문제 정답
// console.log(userAnswer);
// alert("클릭했습니다.")
if(userAnswer == currentAnswer){
console.log("정답입니다.");
dogWrap.classList.add("like");
quizScore++;
} else {
console.log("오답입니다.")
dogWrap.classList.add("dislike");
};
//다음 버튼, 해설 나타나기
quizAnswer.style.display = "block"
quizDesc.style.display = "block"
if(quizInfo.length - quizCount == 1){
document.querySelector(".quiz__info").innerHTML = Math.ceil((quizScore / quizInfo.length) * 100) + "점";
quizCheck.innerHTML = quizScore;
}
};
//정답 확인
quizNext.addEventListener("click", () => {
quizCount++;
updateQuiz(quizCount);
dogWrap.classList.remove("like","dislike");
});
</script>
</body>
</html>보충설명
✨<html>
☞ div 박스에 quiz__answer 라는 class 이름을 붙여 다음문제 버튼을 만들어줍니다.
☞ 점수를 표시하는 박스와 점수를 확인하기 위한 체크버튼을 div 박스로 만들어줍니다.
✨<scrip>
☞ const quizInfo = [ {} ] : quizInfo 배열안에 문제정보를 나열합니다.
☞ 전역변수 선택자를 만들어 줍니다.
☞ let quizCount=0와 let quizScore=0 으로 변수를 0으로 지정해줍니다.
☞ 문제를 출력하기 위해 updateQuiz라는 익명함수를 생성하여 "${quizInfo[index]" 안의 index값이 해당 인덱스문제 순서별로 정보가 바뀔수 있도록 설정합니다.
☞ questionTag를 통해 index에 +1를 넣어 문제번호와 지문의 정보를 불러옵니다.
☞ choiceTag에는 quizInfo안의 배열 객관식 4문제를 넣어줍니다
☞ 함수 choiceSelected를 생성하여 객관식 선택했을때 내가 선택한 답과 정답이 일치할때, 그렇지 않을때의 조건식을 만들어 효과를 넣어줍니다. 효과가 끝난 후 다음 버튼과 해설이 나타나도록 style.display를 block 처리해줍니다.