QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
자바스크립트 퀴즈(Quiz) 사이트 만들기
이번에 만들어 본 퀴즈 사이트는 전에 만든 사이트와 달리 주관식(여러문제) 확인하기 퀴즈 유형입니다.
짜잔~ 스크롤을 내리시면 문제 3번까지 나와있는 것처럼 한 페이지에 주관식 문제가 여러개 있도록 만들어 줬습니다.
직접 만들어 본 퀴즈 사이트 코드
<!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>퀴즈 이펙트03</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/quiz.css">
<style>
</style>
</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 class="active"><a href="quizEffect03.html">3</a></li>
<li><a href="quizEffect04.html">4</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="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__answer">
<input class="input" type="text" placeholder="정답을 적어주세요.">
<button class="confirm">정답 확인하기</button>
<div class="result"></div>
</div>
<div class="quiz__desc"></div>
</div>
</div>
<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="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__answer">
<input class="input" type="text" placeholder="정답을 적어주세요.">
<button class="confirm">정답 확인하기</button>
<div class="result"></div>
</div>
<div class="quiz__desc"></div>
</div>
</div>
<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="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__answer">
<input class="input" type="text" placeholder="정답을 적어주세요.">
<button class="confirm">정답 확인하기</button>
<div class="result"></div>
</div>
<div class="quiz__desc"></div>
</div>
</div>
</div>
</main>
<!-- //main -->
참고
<input> 태그의 placeholder 속성은 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말을 명시합니다.
문법
<input placeholder = "텍스트"> // 텍스트 : <input> 요소에 입력될 값에 대한 짧은 힌트를 명시합니다.
script 코드
<script>
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelectorAll(".quiz__title"); //시험 종목 /시간
const quizQuestionNum = quizWrap.querySelectorAll(".quiz__question em"); //문제 번호
const quizQuestion = quizWrap.querySelectorAll(".quiz__question span"); //시험 문제
const quizAnswerResult = quizWrap.querySelectorAll(".quiz__answer .result");//문제 정답
const quizDesc = quizWrap.querySelectorAll(".quiz__desc"); //문제 설명
const quizAnswerConfirm = quizWrap.querySelectorAll(".quiz__answer .confirm"); //정답 버튼
const quizAnswerInput = quizWrap.querySelectorAll(".quiz__answer .input"); //사용자 정답
const dogWrap = quizWrap.querySelectorAll(".dog__wrap");
//문제 정보
const quizInfo = [
{
infoType : "정보처리 기능사",
infoTime : "2011년 4회",
infoNumber : "1",
infoQuestion : "주파수분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 일종의 완충지역 역할을 하는 것을 무엇이라고 하는가?",
infoAnswer : "가드밴드",
infoDesc : "가드밴드(Guard Band)는 주파수분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 일종의 완충지역 역할을 한다.",
}, {
infoType : "정보처리 기능사",
infoTime : "2011년 4회",
infoNumber : "2",
infoQuestion : "사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내 주는 대화식 운영체제는 무엇인가?",
infoAnswer : "UNIX",
infoDesc : "UNIX는 사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내 주는 대화식 운영체제이다.",
}, {
infoType : "정보처리 기능사",
infoTime : "2011년 4회",
infoNumber : "3",
infoQuestion : "프로세스들이 서로 다른 프로세스가 차지하고 있는 자원을 무한정 기다려 시스템이 멈춘 것처럼 보이는 상태를 무엇이라고 하는가?",
infoAnswer : "교착상태",
infoDesc : "교착상태(Deadlock)는 2개 이상의 프로세스들이 서로 다른 프로세스가 차지하고 있는 자원을 무한정 기다려 시스템이 멈춘 것처럼 보이는 상태이다.",
}
];
//문제 출력
quizInfo.forEach(function(el,i){
quizTitle[i].innerHTML = quizInfo[i].infoType + " " + quizInfo[i].infoTime;
quizQuestionNum[i].textContent = quizInfo[i].infoNumber;
quizQuestion[i].textContent = quizInfo[i].infoQuestion;
quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
quizDesc[i].textContent = quizInfo[i].infoDesc;
});
// 정답 + 해설 숨기기
//forEach문
quizInfo.forEach(function(el,i){
quizAnswerResult[i].style.display = "none";
quizDesc[i].style.display = "none";
});
//정답 확인 //forEach
quizAnswerConfirm.forEach(function(btn, num){
btn.addEventListener("click", function(){
//사용자 정답
const userAnswer = quizAnswerInput[num].value;
quizAnswerInput[num].style.display = "none"; //인풋 박스 숨김
quizAnswerConfirm[num].style.display = "none"; //정답 확인 버튼 숨김
quizAnswerResult[num].style.display = "block"; //정답 보이기
quizDesc[num].style.display = "block"; //해설 보이기
//사용자 정답 == 문제 정답
if(userAnswer == quizInfo[num].infoAnswer){
// alert("정답");
dogWrap[num].classList.add("like");
} else {
// alert("오답");
dogWrap[num].classList.add("dislike");
}
});
});
</script>
querySelectorAll
- JavaScript에서 제공하는 DOM API 중 하나로, 문서 내에서 특정한 CSS 선택자를 이용하여 요소들을 찾는 메소드입니다
- querySelectorAll을 사용하면 CSS 선택자를 이용하여 요소들을 선택할 수 있으며, 선택된 모든 요소를 NodeList 객체로 반환합니다. 이 때, NodeList 객체는 배열과 유사하지만 배열은 아니며, forEach() 등 일부 배열 메소드를 사용할 수 있습니다.
ex)
const elements = document.querySelectorAll('.example');
NodeLis
- NodeList 객체는 DOM API에서 반환되는 유사한 유형의 노드 집합을 나타내는 객체입니다. 이 객체는 일반적으로 특정 조건에 따라 선택된 DOM 요소들의 집합을 포함합니다.
- NodeList는 배열과 유사하지만 배열은 아닙니다. 따라서 NodeList 객체에는 배열 메소드 중 일부만 사용할 수 있습니다. 예를 들어, forEach() 메소드는 NodeList 객체에 사용할 수 있지만, push()나 pop()과 같은 배열 메소드는 사용할 수 없습니다.
- NodeList 객체는 일반적으로 querySelectorAll() 및 childNodes와 같은 DOM 메소드 및 속성으로 생성됩니다. querySelectorAll()은 CSS 선택자에 따라 일치하는 모든 요소를 반환하고, childNodes는 지정된 요소의 모든 자식 노드를 포함하는 NodeList 객체를 반환합니다.
스크립트 부분을 for문, forEach()로 짧게 정리해보겠습니다.
// #1 //문제 종류
quizTitle[0].textContent = quizInfo[0].infoType;
quizTitle[1].textContent = quizInfo[1].infoType;
quizTitle[2].textContent = quizInfo[2].infoType;
//문제 시간
quizTime[0].textContent = quizInfo[0].infoTime;
quizTime[1].textContent = quizInfo[1].infoTime;
quizTime[2].textContent = quizInfo[2].infoTime;
//문제 번호
quizQuestionNum[0].textContent = quizInfo[0].infoNumber;
quizQuestionNum[1].textContent = quizInfo[1].infoNumber;
quizQuestionNum[2].textContent = quizInfo[2].infoNumber;
//문제 질문
quizQuestion[0].textContent = quizInfo[0].infoQuestion;
quizQuestion[1].textContent = quizInfo[1].infoQuestion;
quizQuestion[2].textContent = quizInfo[2].infoQuestion;
//문제 정답
quizAnswerResult[0].textContent = quizInfo[0].infoAnswer;
quizAnswerResult[1].textContent = quizInfo[1].infoAnswer;
quizAnswerResult[2].textContent = quizInfo[2].infoAnswer;
//문제 해설
quizDesc[0].textContent = quizInfo[0].infoDesc;
quizDesc[1].textContent = quizInfo[1].infoDesc;
quizDesc[2].textContent = quizInfo[2].infoDesc;
위 과정에서
// #2 //문제 출력
//문제 종류 + 시간
quizTitle[0].innerHTML = quizInfo[0].infoType + " " + quizInfo[0].infoTime;
quizTitle[1].innerHTML = quizInfo[1].infoType + " " + quizInfo[1].infoTime;
quizTitle[2].innerHTML = quizInfo[2].infoType + " " + quizInfo[2].infoTime;
//문제 번호
quizQuestionNum[0].textContent = quizInfo[0].infoNumber;
quizQuestionNum[1].textContent = quizInfo[1].infoNumber;
quizQuestionNum[2].textContent = quizInfo[2].infoNumber;
//문제 질문
quizQuestion[0].textContent = quizInfo[0].infoQuestion;
quizQuestion[1].textContent = quizInfo[1].infoQuestion;
quizQuestion[2].textContent = quizInfo[2].infoQuestion;
//문제 정답
quizAnswerResult[0].textContent = quizInfo[0].infoAnswer;
quizAnswerResult[1].textContent = quizInfo[1].infoAnswer;
quizAnswerResult[2].textContent = quizInfo[2].infoAnswer;
//문제 해설
quizDesc[0].textContent = quizInfo[0].infoDesc;
quizDesc[1].textContent = quizInfo[1].infoDesc;
quizDesc[2].textContent = quizInfo[2].infoDesc;
이 과정을 이제 for문으로 바꿔주겠습니다!
//#2를 for문으로 출력
for(let i=0; i<quizInfo.length; i++){
quizTitle[i].innerHTML = quizInfo[i].infoType + " " + quizInfo[i].infoTime;
quizQuestionNum[i].textContent = quizInfo[i].infoNumber;
quizQuestion[i].textContent = quizInfo[i].infoQuestion;
quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
quizDesc[i].textContent = quizInfo[i].infoDesc;
}
이제 더 편하게 forEach로 바꿔주겠습니다!
// for문을 forEach로 출력
quizInfo.forEach(function(el,i){
quizTitle[i].innerHTML = quizInfo[i].infoType + " " + quizInfo[i].infoTime;
quizQuestionNum[i].textContent = quizInfo[i].infoNumber;
quizQuestion[i].textContent = quizInfo[i].infoQuestion;
quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
quizDesc[i].textContent = quizInfo[i].infoDesc;
});
위 과정처럼 코드를 작성하면 이렇게 주관식(여러문제) 확인하기 유형 사이트가 완성됩니다!
정답을 맞히면 강아지가 웃으며 정답이라고 알려주고
정답을 맞히지 못하면 강아지가 틀렸다며 울고있네요ㅠㅠ
반응형
