완성 화면
코드 보기 / HTML
<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" name="choice" value="1">
<span></span>
</label>
<label for="choice2">
<input type="radio" id="choice2" name="choice" value="2">
<span></span>
</label>
<label for="choice3">
<input type="radio" id="choice3" name="choice" value="3">
<span></span>
</label>
<label for="choice4">
<input type="radio" id="choice4" name="choice" value="4">
<span></span>
</label>
</div>
<div class="quiz__answer">
<button class="confirm">정답 확인하기</button>
</div>
<div class="quiz__desc"></div>
</div>
</div>
</div>
코드 보기 / JAVASCRIPT
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title");
const quizQuestion = quizWrap.querySelector(".quiz__question");
const quizChoice = quizWrap.querySelectorAll(".quiz__choice span");
const quizSelect = quizWrap.querySelectorAll(".quiz__choice input");
const quizConfirm = quizWrap.querySelector(".quiz__answer .confirm");
const quizDesc = quizWrap.querySelector(".quiz__desc");
const quizAnswer = quizWrap.querySelector(".quiz__answer");
const dogWrap = quizWrap.querySelector(".dog__wrap");
//문제정보
const quizInfo = [
{
infoType: "웹디자인 기능사",
infoTime: "2016년 4회",
infoNumber : "1",
infoQuestion: "다음 중 디자인의 기본 요소들로 옳은 것은?",
infoChoice:["선, 색채, 공간, 수량","점, 선, 면, 질감","시간, 수량, 구조, 공간","면, 구조, 공간, 수량"],
infoAnswer:"2",
infoDesc: "디자인의 기본 요소에는 점, 선, 면, 질감이 있습니다."
}
];
//문제 출력
function updateQuiz(){
quizTitle.innerHTML = quizInfo[0].infoType + " " + quizInfo[0].infoTime;
quizQuestion.innerHTML = "<em>"+quizInfo[0].infoNumber+"</em>. "+ quizInfo[0].infoQuestion;
quizDesc.innerHTML = quizInfo[0].infoDesc;
for(let i=0; i<4; i++){
quizChoice[i].textContent = quizInfo[0].infoChoice[i];
}
}
//정답확인
function answerQuiz(){
for(let i=0; i<quizChoice.length; i++) {
if(quizSelect[i].checked == true) { //사용자가 보기를 선택 유무
if(quizSelect[i].value == quizInfo[0].infoAnswer) {
alert ("정답") //정답일 시
dogWrap.classList.add("like");
quizAnswer.style.display = "none";
quizDesc.style.display = "none;"
} else {
alert ("오답") //오답일 시
dogWrap.classList.add("dislike");
quizAnswer.style.display = "none";
quizDesc.style.display = "none";
}
}
}
}
//사용자가 선택한 인풋박스가 문제 정답(quizInfo[0].infoAnswer과 일치하는지 확인
//정답 체크박스 클릭
quizConfirm.addEventListener("click", answerQuiz);
updateQuiz(); //문제출력
코드 보기 / CSS
.quiz__choice{
padding: 20px;
border-bottom: 6px ridge #a12cd3;
font-family: 'ElandChoice';
}
.quiz__choice label {
display: flex;
}
.quiz__choice label input {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
.quiz__choice label span {
font-size: 20px;
line-height: 1.5;
padding: 6px;
display: flex;
cursor: pointer;
margin: 2px 0;
}
.quiz__choice label span::before {
content: '';
width: 26px;
height: 26px;
border-radius: 50%;
margin-right: 15px;
background-color: #fff;
box-shadow: inset 0 0 0 4px #63068a;
transition: all 0.2s;
flex-shrink: 0;
}
.quiz__choice label input:checked + span {
background-color: #f6ecfa;
}
.quiz__choice label input:checked + span::before {
box-shadow: inset 0 0 0 8px #63068a;
}
.quiz__check {
position: fixed;
right: 20px;
bottom: 20px;
width: 110px;
height: 110px;
line-height: 110px;
border-radius: 50%;
z-index: 1000;
background-color: #9d07f4;
text-align: center;
font-family: 'ElandChoice';
color: #fff;
cursor: pointer;
}
문제 출력 구문
function updateQuiz(){
quizTitle.innerHTML = quizInfo[0].infoType + " " + quizInfo[0].infoTime;
quizQuestion.innerHTML = "<em>"+quizInfo[0].infoNumber+"</em>. "+ quizInfo[0].infoQuestion;
quizDesc.innerHTML = quizInfo[0].infoDesc;
for(let i=0; i<4; i++){
quizChoice[i].textContent = quizInfo[0].infoChoice[i];
}
}
quizTitle, quizQuestion, quizDesc
: HTML 문서에서 ID를 사용하여 가져온 요소.
각각 문제의 종목, 문제, 해설을 담게 될 요소들이다.
quizInfo
:배열로 정의된 객체를 담고 있는 변수
quizTitle.innerHTML = quizInfo[0].infoType + " " + quizInfo[0].infoTime;
: quizTitle 요소의 내부 HTML을 업데이트한다.
이 때, quizInfo 배열의 첫 번째 객체인 quizInfo[0]에서 infoType 속성과 infoTime 속성을 가져와 공백으로 구분한 문자열을 quizTitle 요소 내부 HTML로 설정합니다.
quizTitle 요소의 내용을 quizInfo 배열의 첫 번째 객체의 infoType(웹 디자인 기능사) 속성과 infoTime(2016년 4회) 속성을 이용해 설정한다.
quizQuestion.innerHTML = "<em>"+quizInfo[0].infoNumber+"</em>. "+ quizInfo[0].infoQuestion;
: quizQuestion 요소의 내부 HTML을 업데이트합니다.
이 때, quizInfo 배열의 첫 번째 객체인 quizInfo[0]에서 infoNumber 속성과 infoQuestion 속성을 가져와 <em> 태그로 감싸고 번호와 함께 문자열을 생성한 뒤, quizQuestion 요소 내부 HTML로 설정한다.
quizQuestion 요소의 내용을 quizInfo 배열의 첫 번째 객체의 infoNumber(1) 속성과 infoQuestion (다음 중 디자인의 기본 요소들로 ~)속성을 이용해 설정한다.
quizDesc.innerHTML = quizInfo[0].infoDesc;
: quizDesc 요소의 내부 HTML을 업데이트한다.
이 때, quizInfo 배열의 첫 번째 객체인 quizInfo[0]에서 infoDesc 속성을 가져와 quizDesc 요소 내부 HTML로 설정한다.
quizDesc 요소의 내용을 quizInfo 배열의 첫번째 객체의 infoDesc(디자인의 기본 요소에는 ~~) 속성을 이용해 설정한다.
for(let i=0; i<4; i++){ quizChoice[i].textContent = quizInfo[0].infoChoice[i]; }
: quizChoice 배열에 있는 네 개의 요소(quizChoice[0], quizChoice[1], quizChoice[2], quizChoice[3])의 내부 텍스트를 각각 quizInfo 배열의 첫 번째 객체인 quizInfo[0]에서 가져온 infoChoice 속성의 값으로 설정하고, for 루프를 사용하여 각 요소의 인덱스를 참조하고, textContent 속성을 사용하여 내부 텍스트를 업데이트한다.
for문을 사용하여 quizChoice 배열의 요소에 quizInfo 배열의 첫 번째 객체의 infoChoice 속성을 순서대로 설정한다.
정답 확인 구문
function answerQuiz(){
for(let i=0; i<quizChoice.length; i++) {
if(quizSelect[i].checked == true) {
if(quizSelect[i].value == quizInfo[0].infoAnswer) {
alert ("정답")
dogWrap.classList.add("like");
quizAnswer.style.display = "none";
quizDesc.style.display = "none;"
} else {
alert ("오답")
dogWrap.classList.add("dislike");
quizAnswer.style.display = "none";
quizDesc.style.display = "none";
}
}
}
}
for(let i=0; i<quizChoice.length; i++)
: for 루프를 이용하여 quizChoice 배열의 요소를 순서대로 확인한다.
if(quizSelect[i].checked == true)
: if문은 해당 보기가 선택되었는지 확인한다.
quizSelect[i]는 해당 보기의 라디오 버튼 요소를 나타낸다.
checked 속성은 해당 라디오 버튼이 선택되었는지 여부를 확인하며, 선택된 보기가 정답인지 확인한다.
quizSelect[i].value는 해당 보기의 값(내용)을 나타낸다.
if(quizSelect[i].value == quizInfo[0].infoAnswer) {
alert ("정답")
dogWrap.classList.add("like");
quizAnswer.style.display = "none";
quizDesc.style.display = "none;"
: quizInfo[0].infoAnswer는 퀴즈의 첫 번째 객체의 infoAnswer 속성으로, 정답의 값(내용)을 나타낸다.
정답일 경우, alert()를 이용하여 "정답" 메시지를 출력한다.
dogWrap은 HTML 문서에서 id를 이용해 가져온 요소로, classList.add() 메소드를 이용하여 like 클래스를 추가한다.
quizAnswer와 quizDesc 요소의 display 속성을 "none"으로 설정하여 숨긴다.
else {
alert ("오답")
dogWrap.classList.add("dislike");
quizAnswer.style.display = "none";
quizDesc.style.display = "none";
}
: 오답일 경우, alert()를 이용하여 "오답" 메시지를 출력한다.
dogWrap은 HTML 문서에서 id를 이용해 가져온 요소로, classList.add() 메소드를 이용하여 dislike 클래스를 추가한다.
quizAnswer와 quizDesc 요소의 display 속성을 "none"으로 설정하여 숨긴다.