한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
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>퀴즈 이펙트01</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 class="active"><a href ="quizEffect02.html">2</a></li>
</ul>
</header>
<!--//header-->
<main id="main">
<div class="quiz__wrap">
<div class="quiz">
<div class="quiz__header">
<h2 class="quiz__title"> <span></span> <em> </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="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__answer">
<input class="input" type="text" placeholder="정답을 적어주세요.">
<button class="confirm"></button>
<div class="result"></div>
</div>
</div>
<div class="quiz__footer" >
<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 span")
const quizTime = quizWrap.querySelector(".quiz__title em")
const quizQusetionNum = quizWrap.querySelector(".quiz__question em")
const quizQusetion = quizWrap.querySelector(".quiz__question span")
const quizAnswerConfirm = quizWrap.querySelector(".quiz__answer .confirm")
const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result")
const quizAnswerInput = quizWrap.querySelector(".quiz__answer .input")
const quizDesc = quizWrap.querySelector(".quiz__desc")
const quizFooter = quizWrap.querySelector(".quiz__footer")
const dogWrap = quizWrap.querySelector(".dog__wrap")
// 문제 정보
const infoType = "정보처리 기능사";
const infoTime = "2011년 5회";
const infoNumber = "2";
const infoQuestion = "프레젠테이션에서 화면 전체를 전환하는 단위를 의미하는 것은?"
const infoConfirm = "정답 확인하기"
const infoAnswer = "슬라이드"
const infoDesc = "슬라이드는 프레젠테이션 화면 전체를 말하고 개체는 화면을 구성하는 개개의 요소를 말한다."
//문제 출력
quizTitle.textContent = infoType
quizTime.textContent = infoTime
quizQusetionNum.textContent = infoNumber
quizQusetion.textContent = infoQuestion
quizDesc.textContent = infoDesc
quizAnswerConfirm.textContent = infoConfirm
quizAnswerResult.textContent = infoAnswer
//정답 % 해설 숨기기
quizAnswerResult.style.display = "none";
quizFooter.style.display = "none";
// 사용자 정답
quizAnswerConfirm.addEventListener("click", function(){
const userAnswer = quizAnswerInput.value.trim();
quizAnswerConfirm.style.display = "none"; //인풋 박스 숨김
quizAnswerResult.style.display = "block"; //정답 확인 버튼 숨김
quizFooter.style.display = "block"; //정답 보이기
quizAnswerInput.style.display = "none"; //해설 보이기
if(infoAnswer == userAnswer){
// alert("정답입니다.")
dogWrap.classList.add("like");
} else {
// alert("오답입니다.")
quizAnswerConfirm.style.display = "none";
dogWrap.classList.add("dislike");
}
});
퀴즈 효과1 번과 동일하지만 주관식으로 정답을 입력 받기 위해 인풋 박스와 placeholder 를 사용했다.
<input class="input" type="text" placeholder="정답을 적어주세요.">
퀴즈 1과 동일하게 선택자 ,문제정보, 문제 출력을 사용하여 텍스트를 나타내고 퀴즈효과2 에선 정답&해설 숨기기와 앞에만든 input 박스에 텍스트를 입력하면 정답과 오답의 차이를 주었다.
// 선택자
const quizWrap = document.querySelector(".quiz__wrap")
const quizTitle = quizWrap.querySelector(".quiz__title span")
const quizTime = quizWrap.querySelector(".quiz__title em")
const quizQusetionNum = quizWrap.querySelector(".quiz__question em")
const quizQusetion = quizWrap.querySelector(".quiz__question span")
const quizAnswerConfirm = quizWrap.querySelector(".quiz__answer .confirm")
const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result")
const quizAnswerInput = quizWrap.querySelector(".quiz__answer .input")
const quizDesc = quizWrap.querySelector(".quiz__desc")
const quizFooter = quizWrap.querySelector(".quiz__footer")
const dogWrap = quizWrap.querySelector(".dog__wrap")
// 문제 정보
const infoType = "정보처리 기능사";
const infoTime = "2011년 5회";
const infoNumber = "2";
const infoQuestion = "프레젠테이션에서 화면 전체를 전환하는 단위를 의미하는 것은?"
const infoConfirm = "정답 확인하기"
const infoAnswer = "슬라이드"
const infoDesc = "슬라이드는 프레젠테이션 화면 전체를 말하고 개체는 화면을 구성하는 개개의 요소를 말한다."
//문제 출력
quizTitle.textContent = infoType
quizTime.textContent = infoTime
quizQusetionNum.textContent = infoNumber
quizQusetion.textContent = infoQuestion
quizDesc.textContent = infoDesc
quizAnswerConfirm.textContent = infoConfirm
quizAnswerResult.textContent = infoAnswer
//정답 해설 숨기기
quizAnswerResult.style.display = "none";
quizFooter.style.display = "none";
// 사용자 정답
quizAnswerConfirm.addEventListener("click", function(){
const userAnswer = quizAnswerInput.value.trim();
quizAnswerConfirm.style.display = "none"; //인풋 박스 숨김
quizAnswerResult.style.display = "block"; //정답 확인 버튼 숨김
quizFooter.style.display = "block"; //정답 보이기
quizAnswerInput.style.display = "none"; //해설 보이기
if(infoAnswer == userAnswer){
// alert("정답입니다.")
dogWrap.classList.add("like");
} else {
// alert("오답입니다.")
quizAnswerConfirm.style.display = "none";
dogWrap.classList.add("dislike");
}
});
위 코드가 사용자의 입력창을 나타내고 값을 입력받고 입력을 받으면 정답확인 버튼이 사라지게 하며, 정답과 해설이 나오게 짜여진 코드이다.
NEW
placeholder : HTML 폼 요소(input, textarea 등)에 입력하는 값의 예시를 제공하는 속성입니다. placeholder에 지정된 값은 사용자가 아직 값을 입력하지 않은 상태에서 폼 요소에 보이며, 입력된 값이 없을 경우 다시 placeholder 값이 보이게 됩니다.
trim : 자바스크립트에서 문자열의 앞뒤 공백을 제거하는 함수는 trim()입니다. 이 함수는 원본 문자열의 앞뒤에 있는 모든 공백을 제거하고, 결과로 새로운 문자열을 반환합니다.
textContent : 자바스크립트에서 HTML 요소의 텍스트 콘텐츠를 나타내는 속성입니다. 이 속성은 해당 요소의 모든 자식 요소를 포함한 텍스트 콘텐츠를 반환합니다.
.value : HTML 요소의 값을 나타내는 속성입니다. 이 속성은 주로 폼 요소(input, select, textarea 등)의 값을 가져오거나 설정할 때 사용됩니다.