오늘은 어제 이어서 다른 퀴즈 이펙트를 풀어보겠습니다!
어제는 정답만 나오는 퀴즈 효과였다면
이번엔 사용자가 답을 입력하고 정답인지 오답인지 판별하는 스크립트를 짜보겠습니다!!
자바스크립트 퀴즈 이펙트(두 번째) 만들기
어제와 비슷한 구조로 작업하겠습니다!
영역 지정해주기
<header id="header">
<h1><a href="../javascript14.html">Quiz</a> <em>주관식 확인하기 유형</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></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 -->구역을 짜줘야하기 때문에 어제와 동일한 구조를 가지고옵니다.
여기서 추가한 것은 사용자가 정답을 적어야하기 때문에 정답을 적는 칸을 적어줍니다.
quiz__answer 안에 input태그를 만들어 답을 입력하는 칸을 생기게 해주면 좋겠죠??
또, 정답을 적고 확인했을 때, 해설을 확인할 수 있도록 quiz__footer 아래에 desc, 설명 칸을 만들어 해설을 넣어줄 영역을 지정해줍니다.
선택자 만들기
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title span");
const quizTime = quizWrap.querySelector(".quiz__title em");
const quizQuestionNum = quizWrap.querySelector(".quiz__question em");
const quizQuestion = quizWrap.querySelector(".quiz__question span");
const quizDesc = quizWrap.querySelector(".quiz__desc");
const quizAnswerConfirm = quizWrap.querySelector(".quiz__answer .confirm");
const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result");
const quizAnswerInput = quizWrap.querySelector(".quiz__answer .input");
const dogWrap = quizWrap.querySelector(".dog__wrap");
const quizFooter = quizWrap.querySelector(".quiz__footer");어제와 같이 변수를 지정해주고 document.querySelector( )를 사용해 선택자를 만들어줍니다. 그리고 괄호 안에 각 내용에 맞는 이름들을 적어둡니다. 전에 했던 것과 동일하므로 재활용하고, 추가로 넣어준 내용만 선택자를 만들어줍니다.
새로 들어간 것은 해설인 quizDesc, quizFooter, 정답을 입력해주는 칸 quizAnswerInput을 추가해주었습니다.
문제 정보 입력해주기
// 문제 정보
const infoType = "정보처리 기능사";
const infoTime = " 2011년 5회";
const infoNumber = "2";
const infoQeustion = "프리젠테이션에서 화면 전체를 전환하는 단위를 의미하는 것은?";
const infoAnswer = "슬라이드";
const infoDesc = "슬라이드는 프리젠테이션의 화면 전체를 말하고 개체는 화면을 구성하는 개개의 요소를 말한다.";
전에 것과는 다른 문제를 적었으므로 문제 정보는 바꿔줘야겠죠?
그리고 새로 해설이 추가되었으니 infoDesc를 통해 해설을 적어줍니다.
문제 출력하기
// 문제 출력
quizTitle.textContent = infoType;
quizTime.textContent = infoTime;
quizQuestionNum.textContent = infoNumber;
quizQuestion.textContent = infoQeustion;
quizDesc.textContent = infoDesc;
quizAnswerResult.textContent = infoAnswer;.textContent를 이용해 문제와 답을 출력해줍니다. 전엔 innerText를 사용하였지만 오늘은 textContent를 사용하였습니다.
textcontent?
JavaScript의 textContent 속성은 HTML 요소의 텍스트 콘텐츠를 설정하거나 반환하는 데 사용됩니다. textContent 속성은 HTML 요소의 모든 자식 요소의 텍스트 콘텐츠를 포함합니다.
textContent 속성은 모든 HTML 요소에 사용할 수 있으며, 이 속성을 사용하여 요소의 텍스트 콘텐츠를 동적으로 변경할 수 있습니다. 이는 웹 애플리케이션에서 동적인 콘텐츠를 표시할 때 매우 유용합니다.
정답 & 해설 숨기기
// 정답 & 해설 숨기기
quizAnswerResult.style.display = "none";
quizFooter.style.display = "none";style.display = "none";을 이용해 정답과 해설을 잠시 숨겨줍니다.
사용자 정답
// 사용자 정답
quizAnswerConfirm.addEventListener("click", function(){
const userAnswer = quizAnswerInput.value.trim();
quizAnswerConfirm.style.display = "none"; // 정답 확인 버튼 숨김
quizAnswerInput.style.display = "none"; // 인풋 박스 숨김
quizAnswerResult.style.display = "block"; // 정답 보이기
quizFooter.style.display = "block"; // 해설 보이기
if(infoAnswer == userAnswer){
dogWrap.classList.add("like");
} else {
dogWrap.classList.add("dislike");
}
});이제 사용자가 값을 입력했을 때 정답인지 오답인지 판단해줘야겠죠??
이번엔 사용자가 클릭했을 때 함수 안 value라는 것을 이용해 결과를 출력해보겠습니다.
value?
JavaScript의 .value는 HTML 폼 요소의 값을 가져오거나 설정하는 데 사용됩니다. 이 속성은 input, select, textarea 등과 같은 HTML 폼 요소에서 사용할 수 있습니다.
.value 속성은 입력된 값의 문자열을 반환합니다. 따라서, 만약 input 요소가 숫자를 받는다면, 반환된 값은 문자열일 것이므로 숫자로 변환해야 합니다.
전에 배웠던 if문을 활용해 사용자가 입력한 값 (userAnswer)과 문제의 답(infoAnswer)이 맞았을 때와 틀렸을 때로 나누어줍니다. 맞다면 강아지가 웃고 :), 틀리면 강아지가 울 거에요 ㅜㅜ
그리고 여기서 중요한점!
답을 입력했을 때 빈 공백이 있으면 문자열 때문에 오답으로 인지하므로 trim을 이용해 정답 외 공백을 다 잘라줍니다.
trim?
JavaScript의 trim() 함수는 문자열의 양 끝에 있는 공백을 제거하는 데 사용됩니다. 이 함수는 웹 페이지에서 사용자가 입력한 문자열의 앞뒤에 공백이 포함되는 것을 방지하고, 문자열을 비교하거나 처리할 때 유용합니다.
또한 답을 적었을 때
style.display="none";과 style.display="block"; 을 이용해 숨길 부분은 숨기고, 보이고 싶은 부분은 보여줍니다.
완성된 코드
<!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>퀴즈 이펙트02</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 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></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:yds43557340@gmail.com">yds43557340@gmail.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 quizQuestionNum = quizWrap.querySelector(".quiz__question em");
const quizQuestion = quizWrap.querySelector(".quiz__question span");
const quizDesc = quizWrap.querySelector(".quiz__desc");
const quizAnswerConfirm = quizWrap.querySelector(".quiz__answer .confirm");
const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result");
const quizAnswerInput = quizWrap.querySelector(".quiz__answer .input");
const dogWrap = quizWrap.querySelector(".dog__wrap");
const quizFooter = quizWrap.querySelector(".quiz__footer");
// 문제 정보
const infoType = "정보처리 기능사";
const infoTime = " 2011년 5회";
const infoNumber = "2";
const infoQeustion = "프리젠테이션에서 화면 전체를 전환하는 단위를 의미하는 것은?";
const infoAnswer = "슬라이드";
const infoDesc = "슬라이드는 프리젠테이션의 화면 전체를 말하고 개체는 화면을 구성하는 개개의 요소를 말한다.";
// 문제 출력
quizTitle.textContent = infoType;
quizTime.textContent = infoTime;
quizQuestionNum.textContent = infoNumber;
quizQuestion.textContent = infoQeustion;
quizDesc.textContent = infoDesc;
quizAnswerResult.textContent = infoAnswer;
// 정답 & 해설 숨기기
quizAnswerResult.style.display = "none";
quizFooter.style.display = "none";
// 사용자 정답
quizAnswerConfirm.addEventListener("click", function(){
const userAnswer = quizAnswerInput.value.trim();
quizAnswerConfirm.style.display = "none"; // 정답 확인 버튼 숨김
quizAnswerInput.style.display = "none"; // 인풋 박스 숨김
quizAnswerResult.style.display = "block"; // 정답 보이기
quizFooter.style.display = "block"; // 해설 보이기
if(infoAnswer == userAnswer){
dogWrap.classList.add("like");
} else {
dogWrap.classList.add("dislike");
}
});
</script>
</body>
</html>
완성된 화면과 페이지
https://yeodaseul4355.github.io/web2023/javascirpt/quiz/quizEffect02.html
도움이 되셨다면~~
많은 공감과 댓글 부탁드립니다 ^__________^
퀴즈 이펙트의 다른 유형 보러가기
퀴즈 이펙트 1: https://duektmf34.tistory.com/33
퀴즈 이펙트 3: https://duektmf34.tistory.com/41
퀴즈 이펙트 4: https://duektmf34.tistory.com/47
퀴즈 이펙트 5: https://duektmf34.tistory.com/57
