정답
틀림
정답
틀림
정답
틀림
<main id="main">
<div class="quiz__wrap">
<div class="quiz">
<h2 class="quiz__type"></h2>
<h3 class="quiz__question">
<span class="quiz__number"></span>
<span class="quiz__ask"></span></h3>
<div class="quiz__view">
<div class="true">정답</div>
<div class="false">틀림</div>
<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 class="quiz__answer">
<input class="quiz__input" type="text" placeholder="정답을 적으세요">
<button class="quiz__confirm">정답 확인하기</button>
<div class="quiz_result"></div>
</div>
</div>
<div class="quiz">
<h2 class="quiz__type"></h2>
<h3 class="quiz__question">
<span class="quiz__number"></span>
<span class="quiz__ask"></span></h3>
<div class="quiz__view">
<div class="true">정답</div>
<div class="false">틀림</div>
<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 class="quiz__answer">
<input class="quiz__input" type="text" placeholder="정답을 적으세요">
<button class="quiz__confirm">정답 확인하기</button>
<div class="quiz_result"></div>
</div>
</div>
<div class="quiz">
<h2 class="quiz__type"></h2>
<h3 class="quiz__question">
<span class="quiz__number"></span>
<span class="quiz__ask"></span></h3>
<div class="quiz__view">
<div class="true">정답</div>
<div class="false">틀림</div>
<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 class="quiz__answer">
<input class="quiz__input" type="text" placeholder="정답을 적으세요">
<button class="quiz__confirm">정답 확인하기</button>
<div class="quiz_result"></div>
</div>
</div>
</div>
</main>
.quiz__wrap {
display: flex;
align-items: center;
justify-content: center;
margin-top: 150px;
flex-wrap: wrap;
}
.quiz {
max-width: 400px;
width: 100%;
background: #fff;
border: 8px ridge #cacaca;
margin: 10px;
}
.quiz__type {
background: #cacaca;
text-align: center;
font-size: 14px;
color: #3b3b3b;
border: 3px ridge #cacaca;
padding: 3px 0;
position: relative;
}
.quiz__type::before {
content: '';
position: absolute;
left: 2px;
top: 2px;
width: 5px;
height: 5px;
border: 6px ridge #cacaca;
}
.quiz__type::after {
content: '';
position: absolute;
right: 2px;
top: 2px;
width: 5px;
height: 5px;
border: 6px ridge #cacaca;
}
.quiz__question {
border-bottom: 6px ridge #cacaca;
border-top: 6px ridge #cacaca;
padding: 13px 30px;
font-size: 24px;
line-height: 1.4;
}
.quiz__number {
font-family: 'Cafe24Dangdanghae';
color: #64a30b;
}
.quiz__ask {
font-family: 'Cafe24Dangdanghae';
background-color: #f5f5f5;
}
.quiz__view {
background-color: #f5f5f5;
position: relative;
}
.quiz__view .true {
position: absolute;
left: 70%;
top: 100px;
width: 100px;
height: 100px;
background: #fff;
border-radius: 50%;
z-index: 100;
line-height: 100px;
text-align: center;
color: #fff;
background-color: #F5534F;
opacity: 0;
}
.quiz__view .false {
position: absolute;
right: 70%;
top: 100px;
width: 100px;
height: 100px;
background: #fff;
border-radius: 50%;
z-index: 100;
line-height: 100px;
text-align: center;
color: #F5534F;
opacity: 0;
}
.quiz__view.like .true {
opacity: 1;
animation: wobble 0.6s;
}
.quiz__view.dislike .false {
opacity: 1;
animation: wobble 0.6s;
}
@keyframes wobble {
0% {
transform: translateZ(0)
}
15% {
transform: translate3d(-25%, 0, 0) rotate(-5deg)
}
30% {
transform: translate3d(20%, 0, 0) rotate(3deg)
}
45% {
transform: translate3d(-15%, 0, 0) rotate(-3deg)
}
60% {
transform: translate3d(10%, 0, 0) rotate(2deg)
}
75% {
transform: translate3d(-5%, 0, 0) rotate(-1deg)
}
100% {
transform: translateZ(0)
}
}
.quiz__view .dislike {}
.quiz__confirm {
padding: 10px;
border-top: 6px ridge #cacaca;
width: 100%;
font-size: 22px;
padding: 13px 20px;
background: #d6d6d6;
font-family: 'Cafe24Dangdanghae';
text-shadow: 1px 1px 1px #fff;
cursor: pointer;
}
.quiz__confirm:hover {
background: #b3b3b3;
}
.quiz_result {
text-align: center;
border-top: 6px ridge #cacaca;
width: 100%;
font-size: 22px;
padding: 13px 20px;
background: #d6d6d6;
}
.quiz__input {
font-family: 'Cafe24Dangdanghae';
border-top: 6px ridge #cacaca;
width: 100%;
font-size: 22px;
padding: 13px 20px;
background: #d6d6d6;
margin-bottom: 10px;
}
const quizType = document.querySelectorAll(".quiz__type"); // 문제 유형
const quizNumber = document.querySelectorAll(".quiz__number"); // 문제 번호
const quizAsk = document.querySelectorAll(".quiz__ask"); // 문제 질문
const quizConfirm = document.querySelectorAll(".quiz__confirm"); // 정답 버튼
const quizResult = document.querySelectorAll(".quiz_result"); // 정답 결과
const quizView = document.querySelectorAll(".quiz__view"); // 문제 화면의 가운데 부분(강아지 / 정답, 틀림 그림)
const quizInput = document.querySelectorAll(".quiz__input"); // 정답 입력
const quizInfo = [
{
answerType: "javascript",
answerNum: 1,
answerAsk: "키와 값으로 구성되어 있는 데이터가 저장된 것은 무엇인가?",
answerResult: "객체"
},
{
answerType: "HTML",
answerNum: 2,
answerAsk: "웹 접근성을 위해 텍스트를 추가해야 할때 쓰는 문법은?",
answerResult: "ir"
},
{
answerType: "CSS",
answerNum: 3,
answerAsk: "요소를 왼쪽 또는 오른쪽으로 이동시키는 속성은 무엇인가?",
answerResult: "float"
},
];
quizInfo.forEach((ele, index) => { // 퀴즈 정보에 대한 데이터 접근
quizType[index].textContent = ele.answerType; // 퀴즈 유형에 대한 화면 출력 데이터
quizNumber[index].textContent = ele.answerNum + ". "; // 퀴즈 번호에 대한 출력 데이터
quizAsk[index].textContent = ele.answerAsk; // 퀴즈 질문에 대한 출력 데이터
quizResult[index].textContent = "정답은 " + ele.answerResult + "입니다"; // 퀴즈 정답에 대한 데이터
});
// 정답 숨기기
quizResult.forEach(ele => {
ele.style.display = "none";
});
// 정답 확인
quizConfirm.forEach((ele, index) => { // 정답 버튼들에 대한 이벤트
ele.addEventListener("click", () => { // 클릭하면
// 사용자가 입력한 텍스트와 객체의 정답과 비교
const userWord = quizInput[index].value.toLowerCase().trim(); // 사용자가 입력한 정답을 소문자로 변환(toLowerCase)하고 trim()으로 "," 문자를 없앤다
if(userWord == quizInfo[index].answerResult) { // 입력한 값이 정답과 같으면
quizView[index].classList.add("like"); // 강아지 표정 변화를 위해 like 클래스 이름 추가
quizView[index].classList.remove("dislike"); // 강아지 표정이 이상해지는 오류를 위해 dislike 삭제
quizConfirm[index].style.display = "none"; // 정답을 맞추면 정답 확인 버튼을 없앤다
} else { // 정답과 다르면
quizView[index].classList.add("dislike"); // dislike 추가
quizView[index].classList.remove("like"); // 강아지 표정이 이상해지는 오류를 위해 like 삭제
ele.style.display = "none"; // 정답 버튼을 숨긴다
quizResult[index].style.display = "block"; // 정답을 보여준다
quizInput[index].style.display = "none"; // 정답 입력 버튼을 없앤다
}
});
});