<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 {
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;
}
.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;
display: none;
}
.quiz_source {
position: fixed;
padding: 10px 20px;
border: 8px ridge #cacaca;
background: #cacaca;
border-radius: 10px;
bottom: 10px;
right: 10px;
}
.quiz_source:hover {
background: #8d8d8d;
color: #fff;
cursor: pointer;
}
const quizType = document.querySelector(".quiz__Type"); // 퀴즈 질문
const quizNumber = document.querySelector(".quiz__number"); // 퀴즈 번호
const quizAsk = document.querySelector(".quiz__ask"); // 퀴즈 질문
const quizConfirm = document.querySelector(".quiz__confirm"); // 정답 확인 버튼
const quizResult = document.querySelector(".quiz_result"); // 정답 결과
const quizDog = document.querySelector(".quiz__view .dog"); // 강아지 이미지
//문제 정보
const quizTypeName = "HTML";
const answerNum = 1;
const answerAsk = "사이트의 대한 기본 정보를 나타낼때 사용하는 태그는 무엇인가?"
const answerResult = "head"
// 문제 출력
quizType.textContent = quizTypeName;
quizNumber.textContent = answerNum + ". ";
quizAsk.textContent = answerAsk;
quizResult.textContent = answerResult;
// 정답 확인
// 정답 버튼을 클릭하면 정답확인은 안보이게 숨겨진 정답은 보이게 설정
// 정답이면 강아지의 이미지를 like 상태로 변경
quizConfirm.addEventListener("click", () => {
quizConfirm.style.display = "none";
quizResult.style.display = "block";
quizDog.classList.add("like");
});