한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
퀴즈유형 4
퀴즈유형4 코드
<!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></a> 주관식 확인하기 유형</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:esansi@naver.com">esansi@naver.com</a>
</footer>
<!--//footer-->
<script>
// 선택자
const quizWrap = document.querySelector(".quiz__wrap")
const quizTitle = quizWrap.querySelector(".quiz__title") //시험종목 /시간
const quizQusetion = 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: "6",
infoQuestion: "다음 중 디자인의 기본 요소들로 옳은 것은",
infoChoice: ["선,색채,공간,수량", "점,선,면,질감", "시간, 수량, 구조, 공간", "면, 구조, 공간, 수량"],
infoAnswer: "2" ,
infoDesc: "디자인의 기본요소에는 점,선,면,질감이 있습니다."
}
]
// 문제출력
function updateQuiz(){
quizTitle.innerHTML = quizInfo[0].infoType +" "+ quizInfo[0].infoTime
quizQusetion.innerHTML = "<em>"+quizInfo[0].infoNumber+"</em>."+ quizInfo[0].infoQuestion
quizDesc.innerHTML = quizInfo[0].infoDesc
for(let i = 0 ; i<4; i++){
quizChoice[i].innerHTML = quizInfo[0].infoChoice[i];
}
// quizChoice.forEach(function(e , i){
// e.innerHTML = quizInfo[0].infoChoice[i]
// });
// 해설 숨기기
quizDesc.style.display = "none";
} updateQuiz();
// 정답 확인
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>
</script>
</body>
</html>퀴즈 4는 퀴즈1,2,3과는 다르게 주관식으로 만듭니다. 객관식 선택형으로 만듭니다.
input type 유형
- text 일반 텍스트를 입력 받을 수 있습니다.
- password 패스워드를 입력 받을 수 있도록, 입력 값이 화면에 보여지지 않도록 합니다.
- submit <form> 태그 내에 입력된 데이터를 서버로 전달해 줍니다.
- button 버튼을 생성해 줍니다.
- checkbox 체크박스 형태의 입력을 받을 수 있습니다.
- radio 라디오 버튼 형태의 입력을 받을 수 있습니다.
- reset <form> 태그 안의 사용자 입력을 초기화 합니다.
radio를 사용해 선택을 입력 받습니다.
4가지의 선택지를 만들기 때문에 다음 코드와 같이 4개를 생성
<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>
사용자가
if(quizSelect[i].checked == true) 사용자가 보기를 체크한 상태
if(quizSelect[i].value == quizInfo[0].infoAnswer) 체크한게 quizInfo[0].infoAnswer와 동일하면 정답으로 표시됩니다.
.quiz__choice{
border-bottom: 6px ridge #FFF1DC;
padding: 20px;
font-family: "MabinogiClassic";
}
.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 #3A98B9 ;
transition: all 0.2s;
flex-shrink: 0;
}
.quiz__choice label input:checked + span {
background-color: #fcf59f;
}
.quiz__choice label input:checked + span::before {
box-shadow: inset 0 0 0 8px #f78a2b;
}
.quiz__check {
position: fixed;
right: 20px;
bottom: 20px;
width: 130px;
height: 130px;
border-radius: 50%;
z-index: 1000;
line-height: 130px;
background-color: #073a4d;
text-align: center;
font-family: "MabinogiClassic";
color: #fff;
cursor: pointer;
}box-shadow 은 요소에 그림자 효과를 추가할 수 있는 CSS 속성입니다. 일반적으로 3D와 유사한 효과를 만들어 요소가 배경 위에 떠 있는 것처럼 보이게 하는 데 사용됩니다.
속성은 쉼표로 구분된 여러 값을 허용합니다.box-shadow
- offset-x: 요소에서 그림자의 가로 오프셋입니다. 양수 값은 그림자를 오른쪽으로 이동하고 음수 값은 왼쪽으로 이동합니다.
- offset-y: 요소에서 그림자의 수직 오프셋입니다. 양수 값은 그림자를 아래쪽으로, 음수 값은 위쪽으로 이동합니다.
- blur-radius: 그림자에 적용할 흐림 효과의 양입니다. 값이 클수록 더 확산되고 부드러운 그림자가 만들어집니다.
- spread-radius: 그림자가 펼쳐져야 하는 양입니다. 양수 값은 그림자의 크기를 늘리고 음수 값은 그림자의 크기를 줄입니다.
- color: 그림자의 색입니다.
flex-shrink 는 컨테이너에 공간이 충분하지 않을 때 요소를 축소해야 하는 정도를 제어하기 위해 Flexbox 레이아웃에서 사용되는 CSS 속성입니다.
flex-shrin' 속성은 항목이 축소해야 하는 사용 가능한 공간의 비례 점유율을 나타내는 단위 없는 값을 허용합니다. 예를 들어 값이 1로 설정되면 항목은 다른 항목과 동일한 양만큼 축소됩니다. flex-shrink 값 1.