네 믿음은 네 생각이 된다 . 네 생각은 네 말이 된다. 네말은 네 행동이 된다 네행동은 네 습관이된다. 네 습관은 네 가치가 된다. 네 가치는 네 운명이 된다.
- 간디
반응형
퀴즈 사이트 ( 4 )
객관식 문제를 풀 수 있도록 만들어 보겠습니다.
[ 모르면 찍으시개 ]
VSCode
<!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>퀴즈 이펙트04</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 <em>객관식 확인하기</em></a></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>
<li><a href="quizEffect05.html">5</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__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>
</main>
<!--//main-->
<header> 쪽은 문제를 골랐을 시 우측 상단버튼에 표시가 나게끔 만들어 놨습니다.
<main> 쪽엔 객관식 문제를 풀 수 있게 누를 수 있는 체크박스 4개를 만들어 줍니다.
<input type="radio" id="choice1" name="choice" value="1">
이런 체크박스를 만들어 주는데 input이란 태그는 처음 써봅니다. 정보를 한번 정리해보자면
input태그는 type속성의 값에 따라 여러 기능을 수행합니다.
웹서비스를 이용하면서 취미를 선택하거나 할 때 동그라미 선택 버튼을 본 적이 있을것입니다.
이 버튼을 라디오버튼이라고 부릅니다. 여러 항목 중 한개의 값만 선택해야 할 때 사용합니다.
<input type='radio' name='서버에서 인식할 값' value='서버에 전송할 값'/>라디오 버튼은 여러 개의 선택지 중에서 단 하나의 선택지를 선택할 수 있도록 하는 버튼으로,
선택지마다 동일한 이름(name) 속성 값을 가져야 합니다.
그리고 각 라디오 버튼은 고유한 값(value) 속성 값을 가져야 합니다.
script
<script>
//선택자
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"); //객관식 문제 보기1~4번
const quizSelect = quizWrap.querySelectorAll(".quiz__choice input"); //체크박스
const quizDesc = quizWrap.querySelector(".quiz__desc"); //문제 해설
const quizConfirm = quizWrap.querySelector(".quiz__answer .confirm"); //정답버튼
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 anwerQuiz(){
//사용자가 선택한 인풋박스(checked) == 문제정답(quizInfo[0].infoAnswer)
for(let i=0; i<quizChoice.length; i++){
if(quizSelect[i].checked == true){ //사용자가 보기를 체크한 상태
if(quizSelect[i].value == quizInfo[0].infoAnswer){
dogWrap.classList.remove("dislike");
dogWrap.classList.add("like");
quizDesc.style.display = "block"; //해설보이기
quizAnswer.style.display = "none"; //정답버튼
} else {
dogWrap.classList.remove("like");
dogWrap.classList.add("dislike");
quizDesc.style.display = "block";
}
}
}
}
//해설숨기기
quizDesc.style.display = "none";
//정답버튼 클릭
quizConfirm.addEventListener("click", anwerQuiz);
//문제출력 실행문
updateQuiz()
</script>
//선택자 는 문제와 제목, 정답, 해설같은 정보들이 들어갈 자리를 const변수에 저장해주는 것 입니다. 이 변수를 사용해,
innerHTML, textContent 메서드를 이용하여 정보를 자리에 불러 올 수있습니다.
//문제정보 는 //선택자 자리에 들어갈 정보들 입니다.
infoChoice 의 값을 배열로 만들어 활용하면 객관식 문제를 낼 수 있습니다.
//문제출력 은 //선택자 자리에 //문제정보 를 넣어 출력하는 방법입니다.
for문을 이용하여 배열 안에 있는 문제를 1~4번 자리에에 출력해줍니다.
//정답 확인 은 for문과 if문을 사용해 선택자가 보기를 체크했을 때 정답과 비교해줍니다.
for문으로 사용자가 보기를 체크했는지 확인을 하며, 체크를 했을시 사용자 체크와 정답을 비교하여 참 거짓을 나눕니다.
정답일시 dogWrap에 like를 붙여 강아지를 웃게 만들고 해설을 띄우며 정답버튼을 안보이게 만들었습니다.
오답일시 dogWrap에 dislike를 붙여 울게 만들고, 해설을 띄우며 꿀팁을 줍니다!
[ 주말이 좋개~ ]