“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
퀴즈 이펙트 -04
저번 시간에 이어서 퀴즈이펙트 4번째 유형을 만들어 보았습니다. 이번 유형은 정답을 확인할 때 여러 객관식이 있어서 정답을 하나 선택하는 유형을 만들어 보았습니다. 이번 퀴즈 이펙트 04번째에서는 데이터를 저장할 때는 배열과 객체를 이용하고 데이터를 불러 올 때 배열,객체,for문과 forEach()문 그리고 실행은 함수를 활용한 뒤 제어문은 if,다중 if문을 사용해 보도록 하겠습니다.
퀴즈 이펙트 완성본
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>퀴즈 이펙트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="quizEffext01.html">1</a></li>
<li><a href="quizEffext02.html">2</a></li>
<li><a href="quizEffext03.html">3</a></li>
<li class="active"><a href="quizEffext04.html">4</a></li>
<li><a href="quizEffext05.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="ture">정답입니다!</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:jeongyouna_@naver.com">jeongyouna_@naver.com</a>
</footer>
<!-- footer -->- 코드는 저번에 했던 퀴즈 3번과 동일한 코드를 가져오는데 quiz를 하나만 선택하고 2개를 만들었던 코드는 지워줍니다.
- 여러 객관식 답을 적기 위해 choice안에 label을 사용해서 choice 1,2,3,4 4개 만들어 주어 그 안에 radio라는 속성을 넣어 동그랗게 체크할 수 있는 박스를 만들어 줍니다.
- 자바스크립을 사용해서 문제와 정답이 나오게 하고 객관식 중 정답을 맞출 때 정답을 확인할 수 있도록 스크립트 해줍니다.
CSS코드
.quiz__choice {
padding: 20px;
border-bottom: 6px ridge #cacaca;
font-family: 'suncheon';
}
.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-color: #fff;
box-shadow: inset 0 0 0 4px #5cc302;
transition: all 0.2s;
flex-shrink: 0;
}
.quiz__choice label input:checked + span {
background-color: #ffffc3;
}
.quiz__choice label input:checked + span::before {
box-shadow: inset 0 0 0 8px #5cc302;;
}
.quiz__check {
position: fixed;
right: 20px;
bottom: 20px;
width: 130px;
height: 130px;
border-radius: 50%;
line-height: 130px;
z-index: 1000;
text-align: center;
background-color: #fffb29;
color: #000;
font-family: 'suncheon';
cursor: pointer;
}
.quiz__info {
position: fixed;
right: 20px;
bottom: 180px;
background-color: #fff649;
text-align: center;
width: 130px;
height: 50px;
line-height: 50px;
border-radius: 10px;
font-family: 'suncheon';
color: #000;
}
.quiz__info::after {
content: '';
position: absolute;
left: 50%;
margin-left: -10px;
bottom: -10px;
border-top: 10px solid #fff649;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}- HTEL에 새로운 속성을 넣었으니 그 속성을 꾸며줄 수 있게 CSS 진행합니다.
- 전체적인 choice의 폰트 사이즈와 폰트를 지정하고 패딩값을 맞춰줍니다.
- 그 후에 lable과 input도 css속성을 입력해줍니다.
- 가상요소를 사용해서 정답 안 동그라미 버튼이 span값에 색이 들어갈 수 있도록 설정해줍니다.
- 문제를 풀고 나서 정답을 확인할 수 있는 버튼을 만들어 주는데 quiz__check에 속성들을 입력해 줍니다.
- 그리고 quiz__info또한 가상요소 after를 사용해서 정답을 클릭할 때 밑줄이 들어갈 수 있도록 설정 해줍니다.
자바스크립트
<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];
}
// quizChoice.forEach(function(el, i){
// el.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>>- 스크립트를 하기 전 quiz__info로 문제 정보들을 가져와 줍니다. 그리고 그 위에 선택자를 선택해서 퀴즈 wrap을 만들어 줍니다.
- 하나하나 적었던 예전 방식과 다르게 함수를 사용해서 출력해줍니다. 함수는 총 3가지의 기능이 있는데 데이터를 출력시켜주는 기능과 재활용 할 수 있는 기능 그리고 구조를 단순화 만들어주는 기능을 하고 있습니다.
- 문제의 종류가 많기 때문에 배열 안에 객체가 있는 형식으로 각 구역에 알맞은 값을 지정 해줍니다.
- 출력은 함수와 for문을 이용해 innerHTML을 사용해서 문제 정보가 배열안에 객체가 있는 형식으로 출력해줍니다.
- 정답 확인을 위해 for문을 사용해서 사용자가 보기를 체크한 상태를 입력해주고 정답일 때와 오답일 때 어떻게 뜨는지 체크해주었씁니다.
- 해설을 보이고 숨길때 style.display를 사용해서 보일때는 block 숨길 때는 none으로 표시해 주었습니다.
- addEventListenenr을 사용해서 정답을 체크하고 정답 확인하기 버튼을 클릭할 때 정답이 출력되는 속성을 사용해 주었습니다.
몰랐던 속성
- cilp : 속성의 요소의 위치와 크기를 조절하는데 사용합니다. 원하는 요소의 일부 영역만 보이도록 할 때 유용하게 사용됩니다.
- rect (top, rigth, bottom, left) : 요소의 크기를 지정하고 상자 모델의 위치를 지정하여 잘라냅니다.
- flex-shrink : flex-item요소의 flex-shrink 값을 설정하는 속성 입니다.
- transparent : 요소의 불투명도를 설정해 줍니다.