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>퀴즈 이펙트03</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 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 -->
<footer id="footer">
<a href="mailto:lee3ll@naver.com">lee3ll@naver.com</a>
</footer>
<!-- //footer -->
<script>
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelectorAll(".quiz__title"); //시험 종목 /시간
const quizQuestion = quizWrap.querySelectorAll(".quiz__question span"); //문제 번호
const quizQuestionNum = quizWrap.querySelectorAll(".quiz__question em"); //문제 질문
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(e, 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;
});
quizInfo.forEach(function(e, i){
quizAnswerResult[i].style.display = "none";
quizDesc[i].style.display = "none";
});
//정답 확인
quizAnswerConfirm.forEach(function(btn, num){
btn.addEventListener("click", function(){
//사용자 정답
const userAnswer = quizAnswerInput[num].value;
console.log(userAnswer);
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){
dogWrap[num].classList.add("like");
}else {
dogWrap[num].classList.add("dislike");
}
});
});
</script>
</body>
</html>
☞ quizInfo에 여러 문제를 입력하였고 querySelector에 All을 붙여 일치하는 모든요소를 한번에 불러냈다.
☞ 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;
}☞ for문을 사용한 정답 숨기기 방법
for(let i=0; i<quizInfo.length; i++){
quizAnswerResult[0].style.display = "none";
quizDesc[0].style.display = "none";
}코드보충설명
| querySelectorAll | 선택자All을 사용하여 일치하는 모든 요소를 선택할 수 있다. |
| placeholder | HTML의 <input> 요소와 <textarea> 요소에서 사용되는 속성으로, 입력 필드에 입력되어야 하는 예상 값을 사용자에게 힌트로 제공한다. 일반적으로 이 값은 입력 필드의 형식, 내용 또는 예상 값에 대한 간단한 설명이다. |
| innerText | innerText는 DOM 요소의 텍스트 콘텐츠를 나타내는 속성이다. 이 속성은 해당 요소와 그 자손 요소의 텍스트 콘텐츠를 가져오거나 설정하는 데 사용된다. |
| input의 type 설정 | "type" 속성은 입력 필드의 종류를 지정한다 1. "text":일반적인 텍스트 입력 필드 2. "password": 비밀번호를 입력 받는 필드로, 입력 내용이 마스킹 처리됩니다. 3. "number": 숫자 입력 필드 4. "email": 이메일 주소 입력 필드 5. "date": 날짜 입력 필드 6. "file": 파일 업로드 필드 |