클릭
버튼을 클릭하면 명언이 나와요
-이름이 나와요
학원에서 여태까지 스타일 변경이나 클릭 이벤트 관련해서 1개씩 손으로 타이핑 하면서 작업을 했습니다.
quiz웹사이트3부터는 for문과 forEach문으로 스타일이나 클릭 이벤트를 적용하는 방법을 배웠습니다.
1.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>퀴즈 이펙트02</title>
<!-- css -->
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/quiz.css"/>
<!-- 폰트(둥근모) -->
<link href="https://webfontworld.github.io/DungGeunMo/DungGeunMo.css" rel="stylesheet">
<link href="https://webfontworld.github.io/PyeongChang/PyeongChang.css" rel="stylesheet">
</head>
<body>
<header id="header">
<h1>
<a href="../assets/javascript/javascript14.html">Quiz</a><span>객관식 확인하기 유형</span> <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 class="active"><a href="quizEffect04.html">4</a></li>
</ul>
</header>
<!-- testAnGyonam -->
<!-- //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">
</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">
<label for="choice1">
<input type="radio" id="choice1" class="select" name="choice" value="1">
<span></span>
</label>
<label for="choice2">
<input type="radio" id="choice2" class="select" name="choice" value="2">
<span></span>
</label>
<label for="choice3">
<input type="radio" id="choice3" class="select" name="choice" value="3">
<span></span>
</label>
<label for="choice4">
<input type="radio" id="choice4" class="select" name="choice" value="4">
<span></span>
</label>
</div>
<div class="quiz__answer">
<button class="confirm">정답 확인하기</button>
</div>
</div>
<div class="quiz__desc">
설명
</div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="skadldldl123@gmail.com">mailto:skadldldl123@gmail.com</a>
</footer>
<!-- //footer -->코드설명
★퀴즈01, 02의 HTML과 비슷합니다.
(다른것은 문제가 3개 출력되는거라 "2번"이 총 3개 만들어집니다.)
1. main태그는 위에 완성본 이미지 전부를 담아줍니다.
2. div태그를 4개로 나누기 전에 이것들을 전부 담아 줄 / .quiz인 div태그를 생성합니다.
★.quiz div 태그는 3개로 만듭니다.★
3. div태그 중 .quiz__header는 자바스크립트를 이용해서 "웹디자인 기능사 2012년 1회 기출" 이라고 들어갈 부분입니다.
4. div태그 중 .quiz__main은 div태그 3개(문제, 그림, 정답)를 담아줍니다.
5. div태그의 .quiz__main 안의 .quiz__question의 div태그(문제) 입니다.
6. div태그의 .quiz__main 안의 .quiz__view의 div태그(그림)는 그림을 담아줍니다.(CSS로 조정합니다.)
7. div태그의 .quiz__main 안의 .quiz__answer의 div태그(문제)는 "정답 확인하기" 버튼과 "정답"을 담아줍니다.
8. div태그의 .quiz__main 안의 .quiz__footer의 div태그(TIP+설명)를 만듭니다.
2.자바스크립트 코드
<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 quizAnswerConfirm = quizWrap.querySelectorAll(".quiz__answer .confirm"); // 정답 버튼
const quizAnswerResult = quizWrap.querySelectorAll(".quiz__answer .result"); // 문제 정답
const quizDesc = quizWrap.querySelectorAll(".quiz__desc"); // 문제 해결
const quizAnswerInput = quizWrap.querySelectorAll(".quiz__answer input"); // 사용자 정답
const dogWrap = quizWrap.querySelectorAll(".dog__wrap");
//문제 정보
const quizInfo = [
{
infoType: "정보처리 기능사",
infoTime: "2012년 2회",
infoNumber: "1",
infoQuestion: "주파수분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 일종의 완충지역 역할을 하는 것은?",
infoAnswer: "가드밴드",
infoDesc : "가드밴드는 주파수분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 일종의 완충 지역을 한다."
},
{
infoType: "정보처리 기능사",
infoTime: "2012년 2회",
infoNumber: "2",
infoQuestion: "사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내 주는 대화식 운영체제 이다.",
infoAnswer: "UNIX",
infoDesc: "UNIX는 사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내 주는 대화식 운영체제이다."
},
{
infoType: "정보처리 기능사",
infoTime: "2012년 2회",
infoNumber: "3",
infoQuestion: "프로세스들이 서로 다른 프로세스가 차지하고 있는 자원을 무한정 기다려 시스템이 멈춘것 처럼 보이는 상태",
infoAnswer: "교착상태",
infoDesc: "교착상태는 2개 이상의 프로세스들이 서로 다른 프로세스가 차지하고 있는 자원을 무한정 기다려 시스템이 멈춰있는 것처럼 보이는 상태를 말합니다."
}
];
quizInfo.forEach(function(el, index){
quizTitle[index].innerHTML = quizInfo[index].infoType + " " + quizInfo[index].infoTime;
quizQuestionNum[index].textContent = quizInfo[index].infoNumber;
quizQuestion[index].textContent = quizInfo[index].infoQuestion;
quizDesc[index].textContent = quizInfo[index].infoDesc;
quizAnswerResult[index].textContent = quizInfo[index].infoAnswer;
});
quizInfo.forEach((el, index, array) => {
quizAnswerResult[index].style.display = "none";
quizDesc[index].style.display = "none";
});
// for문과 forEach 이용
// for(let i3=0; i3<quizInfo.length; i3++){
// quizAnswerResult[i3].style.display = "none";
// quizDesc[i3].style.display = "none";
// }
// 정답
quizAnswerConfirm.forEach((btn, num) => {
btn.addEventListener("click", function(){
// 사용자 정답
// trim() : 처음과 마지막 여백만 제거 함.
const userAnswer = quizAnswerInput[num].value.trim();
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>코드 설명
1번. const quizInfo 변수에는 배열을 만들고 안에 객체를 생성했습니다. 문제가 3개라 그렇습니다.
("0번지"는 첫번째 문제와 관련되어 있습니다.)
("1번지"는 첫번째 문제와 관련되어 있습니다.)
("2번지"는 첫번째 문제와 관련되어 있습니다.)
2번. 학원에서 알려준 for문 활용하기
for(초깃값; 조건문; 증감식) { 실행문 }
quizAnswerResult에는 3개의 문제에 대한 "정답"과 "설명"이 있습니다.
quizAnswerResult를 for문을 통해서 3문제를 불른다음 style의 display를 "none"으로 바꿔습니다.
3번. 학원에서 알려준 forEach 활용하기
- 대상.forEach(function(element, index, array) { 코드 });
- quizTitle은 "시험 종목, 시험 회차 div"
- quizQuestionNum은 "문제 번호 div"
- quizQuestion은 "문제 div"
- quizDesc은 "TIP 문제 설명 div"
- quizAnswerResult은 "문제 정답 div"
3개의 문제는 위에 써진 것들을 포함하고 있습니다.
forEach문으로 각각 index로 접근하여 간단하게 "문자열"을 넣어줍니다.
4번. button태그의 .btn을 누르면 input type="text"에 적힌 값을 value로 가져와서 정답과 비교 후 정답이 맞으면
CSS스타일로 속성을 숨겨주고나 다시 보여주는 것으로 마무리를 했습니다.
