728x90
반응형
이번에는 객관식 유형의 퀴즈 이펙트 페이지를 만들어보았습니다.
HTML
<!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>퀴즈 이펙트0</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"></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 -->
<footer id="footer">
<a href="mailto:hyejeong3283@gmail.com">hyejeong3283@gmail.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<quizChoice.length; 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";
// 정답 숨기기
quizConfirm.style.display = "none";
}
// 정답 클릭
quizConfirm.addEventListener("click", answerQuiz);
// 문제 출력
updateQuiz();
</script>
</body>
</html>quiz_chioce라는 클래스명을 가진 태그 영역을 만듭니다.
그 안에 객관식 답안을 넣을 4개의 버튼 유형의 태그를 넣었습니다.
<input type="radio">
radio 유형의 <input> 요소는 보통 서로 관련된 옵션을 나타내는 라디오 버튼 콜렉션, 라디오 그룹에 사용합니다.
임의의 그룹 내에서는 동시에 하나의 라디오 버튼만 선택할 수 있습니다.
라디오 버튼은 흔히 원형으로 그려지며, 선택한 경우 속을 채우거나 강조 표시를 합니다.
CSS 추가
.quiz__choice {
padding: 20px;
border-bottom: 6px ridge #cacaca;
font-family: 'Hallym';
}
.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: 26px;
height: 26px;
border-radius: 50%;
margin-right: 15px;
background: #fff;
box-shadow: inset 0 0 0 4px #CB7A1D;
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;
}css 속성 정리
| 속성 | 설명 |
| clip : rect( top, right, bottom, left) | position 속성값이 absolute 또는 fixed일 때만 적용됩니다. top : 위를 기준으로 시작하는 위치 right : 왼쪽을 기준으로 끝나는 위치 bottom : 위를 기준으로 끝나는 위치 left : 왼쪽을 기준으로 시작하는 위 |
| overflow | 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다. visible : 넘칠 경우 컨텐츠가 상자 밖으로 보여집니다. hidden : 넘치는 부분은 잘려서 보여지지 않습니다. scroll : 스크롤바가 추가되어 스크롤할 수 있습니다.(가로, 세로 모두 추가 됩니다.) auto : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정됩니다.( 필요에 따라 가로, 세로 별도로 추가될 수도 있습니다.) |
| cursor | 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있습니다. auto: 자동 default: 기본값 (화살표) pointer: 손가락 모양 (클릭 가능한 버튼) wait: 로딩 |
| flex-shrink | flex-item 요소의 flex-shrink 값을 설정하는 속성입니다. 만약 flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소됩니다. |
완성 퀴즈이펙트4 페이지