728x90
퀴즈 사이트만들기
이번에는 다음과 같이 객관식 문제유형의 퀴즈사이트를 만들어 보겠습니다.
코드블럭
<!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</a> <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>
<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" class="select" value="1">
<span></span>
</label>
<label for="choice2">
<input type="radio" id="choice2" name="choice" class="select" value="2">
<span></span>
</label>
<label for="choice3">
<input type="radio" id="choice3" name="choice" class="select" value="3">
<span></span>
</label>
<label for="choice4">
<input type="radio" id="choice4" name="choice" class="select" 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 -->
<footer id="footer">
<a href="mailto:lee3ll@naver.com">lee3ll@naver.com</a>
</footer>
<!-- //footer -->
<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");
const quizSelect = quizWrap.querySelectorAll(".quiz__choice input");
const quizDesc = quizWrap.querySelector(".quiz__desc");
const quizAnswer = quizWrap.querySelector(".quiz__answer");
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];
}
// 해설 숨기기
quizDesc.style.display = "none";
}
// 정답 확인
function answerQuiz(){
// 사용자가 선택한 인풋박스(checked) == 문제 정답(quizInfo[0].infoAnswer)
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");
} else {
// alert("오답입니다.")
dogWrap.classList.add("dislike");
}
}
}
//해설 보이기
quizDesc.style.display = "block";
//정답 숨기기
quizAnswer.style.display = "none";
}
// 정답 클릭
quizConfirm.addEventListener("click", answerQuiz);
//문제 출력
updateQuiz();
</script>
</body>
</html>보충설명
☞객관식 체크박스를 만들어주기 위해 div박스에 quiz__choice라는 class이름을주어 생성 후 4지선다형 보기를 만들어주기 때문에 자식박스로 4개의 label박스를 만들어줍니다. label박스에는 각각 input박슬를 생성합니다.
☞<input type="radio" id="choice1" name="choice" class="select" value="1">
input 태그를 사용하여 라디오 버튼을 생성합니다.
type="radio" 속성은 라디오 버튼임을 나타내며, id 속성은 라디오 버튼을 식별하기 위한 고유한 값입니다. name 속성은 라디오 버튼 그룹을 식별하기 위한 값입니다.
같은 name 속성 값을 가지는 라디오 버튼들은 하나의 그룹으로 묶여있으며, 그룹 내에서는 오직 하나의 버튼만 선택할 수 있습니다.
객관식체크박스 CSS코드블럭
.quiz__choice {
padding: 20px;
border-bottom: 6px ridge #CACACA;
font-family: 'PyeongChang';
}
.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.4;
padding: 6px;
display: flex;
cursor: pointer;
margin: 2px 0;
}
.quiz__choice label span::before{
content: '';
width: 30px;
height: 26px;
border-radius: 50%;
margin-right: 15px;
background: #fff;
box-shadow: inset 0 0 0 4px #6fa30b;
transition: all 0.2s;
flex-shrink: 0;
}
.quiz__choice label input:checked + span {
background-color: #f5ffe7;
}
.quiz__choice label input:checked + span::before {
box-shadow: inset 0 0 0 8px #6fa30b;
}보충설명
| clip: rect(0 0 0 0); | clip 속성을 이용하여 요소를 화면에서 잘라냅니다. clip 속성은 위치 지정 요소(position: absolute 또는 position: fixed)와 함께 사용되며, 요소의 일부분만을 화면에 보여주는 클리핑 영역을 지정할 수 있습니다. clip 속성은 rect(top, right, bottom, left) 형식으로 값을 지정합니다. 속성의 값이 rect(0 0 0 0)으로 지정되어 있으면 클리핑 영역의 모든 가장자리가 0으로 지정되어, 요소의 내용이 전부 화면에서 잘려나가 보이지 않게 됩니다. 즉, 해당 요소가 화면에서 숨겨지게 됩니다. |
| overflow: hidden; | overflow 속성을 이용하여 요소의 내용이 넘칠 경우 숨겨줍니다. overflow 속성은 요소의 내용이 지정된 크기를 벗어날 때의 동작을 지정합니다. hidden 값은 요소의 내용이 넘칠 때, 넘치는 부분을 숨김으로써 화면에 보이지 않게 합니다. |
| box-shadow: inset 0 0 0 4px | box-shadow 속성은 요소의 테두리 주변에 그림자를 추가합니다. inset 키워드가 추가되어 있어, 요소의 내부에 그림자를 추가합니다. 0 0은 그림자의 위치를 나타내며, 0은 x 방향으로의 이동 거리, 0은 y 방향으로의 이동 거리를 나타냅니다. 4px는 그림자의 두께 값입니다. |
| flex-shrink: 0; | flex-shrink: 0;는 CSS의 Flexbox 레이아웃에서 사용되는 속성으로, 요소의 크기를 축소시키지 않도록 지정하는 것입니다. |
| input:checked + span |
형제 선택자(sibling selector)를 이용하여 스타일을 적용하는 방법 중 하나로 input 요소가 선택되었을 때, 그 다음 형제 요소인 span 요소에 스타일을 적용하겠다는 것을 나타냅니다. |