한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- 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>퀴즈 이펙트03</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 class="active"><a href ="quizEffect03.html">3</a></li>
<li><a href ="quizEffect04.html">4</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">
<em></em>. <span></span>
</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__answer">
<input class="input" type="text" placeholder="정답을 적어주세요.">
<button class="confirm">정답 확인하기</button>
<div class="result"></div>
</div>
<div class="quiz__desc"></div>
</div>
</div>
<div class="quiz">
<div class="quiz__header">
<h2 class="quiz__title"></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="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__answer">
<input class="input" type="text" placeholder="정답을 적어주세요.">
<button class="confirm">정답 확인하기</button>
<div class="result"></div>
</div>
<div class="quiz__desc"></div>
</div>
</div>
<div class="quiz">
<div class="quiz__header">
<h2 class="quiz__title"></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="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__answer">
<input class="input" type="text" placeholder="정답을 적어주세요.">
<button class="confirm">정답 확인하기</button>
<div class="result"></div>
</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.querySelectorAll(".quiz__title") //시험종목 /시간
const quizQusetionNum = quizWrap.querySelectorAll(".quiz__question em") //문제번호
const quizQusetion = quizWrap.querySelectorAll(".quiz__question span") //문제
const quizAnswerResult = quizWrap.querySelectorAll(".quiz__answer .result") //정답
const quizDesc = quizWrap.querySelectorAll(".quiz__desc") //해설
const quizAnswerConfirm = quizWrap.querySelectorAll(".quiz__answer .confirm") //정답
const quizAnswerInput = quizWrap.querySelectorAll(".quiz__answer .input") //사용자 정답
const dogWrap = quizWrap.querySelectorAll(".dog__wrap")
// 문제 정보
const quizInfo = [
{
infoType: "정보처리 기능사",
infoTime: "2012년 2회",
infoNumber: "3",
infoQuestion: "주파수분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 일종의 완충제 역활을 하는 것을 무엇이라고 하는가?",
infoAnswer: "가드밴드",
infoDesc: "가드밴드(Guard Band)는 주파수분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 일종의 완충제 역활을 한다.",
},{
infoType: "정보처리 기능사",
infoTime: "2012년 2회",
infoNumber: "4",
infoQuestion: "사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내주는 대화식 운영체제는 무엇인가?",
infoAnswer: "UNIX",
infoDesc: "UNIX는 사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내주는 대화식 운영체제이다.",
},{
infoType: "정보처리 기능사",
infoTime: "2012년 2회",
infoNumber: "5",
infoQuestion: "프로세스들이 서로 다른 프로세스가 차지하고 있는 자원을 무한장 기다려 시스템이 멈춘것처럼 보이는 상태를 무엇이라고 하는가",
infoAnswer: "교착상태",
infoDesc: "교착상태(Deadlock)는 2개 이상의 프로세스들이 서로 다른 프로세스가 차지하고 있는 자원을 무한정 기다려 시스템이 멈춘 것 처럼 보이는 현상",
}
]
quizInfo.forEach(function(e, i){
quizTitle[i].innerHTML = quizInfo[i].infoType+" "+ quizInfo[i].infoTime;
quizQusetionNum[i].textContent = quizInfo[i].infoNumber;
quizQusetion[i].textContent = quizInfo[i].infoQuestion;
quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
quizDesc[i].textContent = quizInfo[i].infoDesc;
});
quizInfo.forEach(function(e, i){
quizAnswerResult[i].style.display = "none";
quizDesc[i].style.display = "none";
});
//정답확인
quizAnswerConfirm.forEach(function(btn, num){
btn.addEventListener("click", function(){
//사용자 정답
const userAnswer = quizAnswerInput[num].value;
quizAnswerInput[num].style.display = "none"; //해설 보이기
quizAnswerConfirm[num].style.display = "none"; //인풋 박스 숨김
quizAnswerResult[num].style.display = "block"; //정답 확인 버튼 숨김
quizDesc[num].style.display = "block"; //정답 보이기
//사용자 정답 == 문제 정답
if(userAnswer == quizInfo[num].infoAnswer){
dogWrap[num].classList.add("like");
} else {
dogWrap[num].classList.add("dislike");
}
});
});퀴즈효과 3번 에선 한번에 여러문제를 출력했다. (다중이) 여러 문제를 동시에 하기 위해 queryselctor에 All을 추가하였고, const quizinfo를 배열 과 객체를 사용해 정보를 저장하였다.
문제출력을 다양한 방법으로 해보기 (배열,객체)
문제출력-- 기본
quizTitle[0].innerHTML = quizInfo[0].infoType+" "+ quizInfo[0].infoTime;
quizTitle[1].innerHTML = quizInfo[1].infoType+" "+ quizInfo[1].infoTime;
quizTitle[2].innerHTML = quizInfo[2].infoType+" "+ quizInfo[2].infoTime;
quizQusetionNum[0].textContent = quizInfo[0].infoNumber;
quizQusetionNum[1].textContent = quizInfo[1].infoNumber;
quizQusetionNum[2].textContent = quizInfo[2].infoNumber;
quizQusetion[0].textContent = quizInfo[0].infoQuestion;
quizQusetion[1].textContent = quizInfo[1].infoQuestion;
quizQusetion[2].textContent = quizInfo[2].infoQuestion;
문제출력-- for문
for(let i =0; i<quizInfo.length; i++){
quizTitle[i].innerHTML = quizInfo[i].infoType+" "+ quizInfo[i].infoTime;
quizQusetionNum[i].textContent = quizInfo[i].infoNumber;
quizQusetion[i].textContent = quizInfo[i].infoQuestion;
quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
quizDesc[i].textContent = quizInfo[i].infoDesc;
}문제출력-- forEach문
quizInfo.forEach(function(e, i){
quizTitle[i].innerHTML = quizInfo[i].infoType+" "+ quizInfo[i].infoTime;
quizQusetionNum[i].textContent = quizInfo[i].infoNumber;
quizQusetion[i].textContent = quizInfo[i].infoQuestion;
quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
quizDesc[i].textContent = quizInfo[i].infoDesc;
});
정답 & 해설 숨기기 (배열 ,객체)
숨기기-- 기본
quizAnswerResult[0].style.display = "none";
quizAnswerResult[1].style.display = "none";
quizAnswerResult[2].style.display = "none";
quizDesc[0].style.display = "none";
quizDesc[1].style.display = "none";
quizDesc[2].style.display = "none";숨기기-- for문
for(let i = 0; quizInfo.length; i++){
quizAnswerResult[i].style.display = "none";
quizDesc[i].style.display = "none";
}숨기기-- forEach문
quizInfo.forEach(function(e, i){
quizAnswerResult[i].style.display = "none";
quizDesc[i].style.display = "none";
});
같은 값을 다양한 방법으로 출력 해보았습니다.
innerHTML
innerHTML은 HTML 요소의 내부 HTML 마크업을 설정하거나 반환하는 속성입니다. 이 속성은 HTML 태그, 속성 및 텍스트를 포함한 모든 내용을 가져오거나 설정합니다.
textContent와 innerHTML차이
textContent와 innerHTML 모두 사용 가능하지만,
상황에 따라 적절한 속성을 선택해야합니다. textContent는 텍스트 값을 조작할 때 사용하고,
innerHTML은 HTML 마크업을 조작할 때 사용합니다.
그러나, innerHTML은 취약점으로 인해 사용할 때 주의해야 합니다. 사용자 입력과 같이 안전하지 않은 데이터를 innerHTML로 삽입하면, 악성 스크립트의 실행을 유발할 수 있습니다. 따라서, innerHTML을 사용할 때는 항상 안전성 검사를 수행하고, 적절한 대책을 강구해야 한다고 합니다.