“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
퀴즈 사이트 만들기 3번째
오늘은 퀴즈 사이트 만들기 3번째로 했던 걸 정리해보겠습니다.
💜 퀴즈 3번째
<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 -->body태그 안에 들어간 main태그 입니다.
사이트 안에 들어갈 속성값들을 지정해줬습니다.
선택자
//선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelectorAll(".quiz__title"); //시험 종목/시간
const quizQuestion = quizWrap.querySelectorAll(".quiz__question span"); //문제 질문
const quizQuestionNum = quizWrap.querySelectorAll(".quiz__question em"); //문제 번호
const quizDesc = quizWrap.querySelectorAll(".quiz__desc"); //정답 해설
const quizAnswerResult = quizWrap.querySelectorAll(".quiz__answer .result"); //문제 정답
const quizAnswerInput = quizWrap.querySelectorAll(".quiz__answer .input"); //사용자 정답
const quizAnswerConfirm = quizWrap.querySelectorAll(".quiz__answer .confirm"); //정답 버튼
const dogwrap = quizWrap.querySelector(".dog__wrap");
script에 메인 태그들 안에 들어갈 속성값들을 작업해줍니다.
우선 선택자를 입력해줍니다.
위에 작성했던
시험 종목, 시간, 질문, 번호, 해설, 정답, 사용자정답, 정답버튼, 강아지를 하나씩 다 지정해줍니다.
여러가지 항목이 있는 다중이 이기 때문에 queryselector뒤에는 All을 붙여줍니다.
시험 종목과 시간은 합쳐서 작업하겠습니다.
문제정보
//문제정보
const quizInfo = [
{
infoType: "정보처리 기능사",
infoTime: "2011년 4회",
infoNumber: "1",
infoQuestion: "주파수분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 일종의 완충지역 역할을 하는 것을 무엇이라고 하는가?",
infoAnswer: "가드밴드",
infoDesc: "가드밴드(Guard Band)는 주파수분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 일종의 완충 지역 역할을 한다."
}, {
infoType: "정보처리 기능사",
infoTime: "2011년 4회",
infoNumber: "2",
infoQuestion: "사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내 주는 대화식 운영체제는 무엇인가?",
infoAnswer: "UNIX",
infoDesc: "UNIX는 사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내 주는 대화식 운영체제이다."
}, {
infoType: "정보처리 기능사",
infoTime: "2011년 4회",
infoNumber: "3",
infoQuestion: "프로세스들이 서로 다른 프로세스가 차지하고 있는 자원을 무한정 기다려 시스템이 멈춘 것처럼 보이는 상태를 무엇이라고 하는가?",
infoAnswer: "교착상태",
infoDesc: "교착상태(Deadlock)는 2개 이상의 프로세스들이 서로 다른 프로세스가 차지하고 있는 자원을 무한정 기다려 시스템이 멈춘 것처럼 보이는 것이다."
}
];화면에 출력될 문제 정보들을 변수 안에 배열과 대활호를 사용해 입력해줍니다.
출력값 #1
//#1
//문제 출력
quizTitle[0].textContent = quizInfo[0].infoType;
quizTitle[1].textContent = quizInfo[1].infoType;
quizTitle[2].textContent = quizInfo[2].infoType;
//문제 시간
quizTime[0].textContent = quizInfo[0].infoTime;
quizTime[1].textContent = quizInfo[1].infoTime;
quizTime[2].textContent = quizInfo[2].infoTime;
//문제 번호
quizQuestionNum[0].textContent = quizInfo[0].infoNumber;
quizQuestionNum[1].textContent = quizInfo[1].infoNumber;
quizQuestionNum[2].textContent = quizInfo[2].infoNumber;
//시험 문제
quizQuestion[0].textContent = quizInfo[0].infoQuestion;
quizQuestion[1].textContent = quizInfo[1].infoQuestion;
quizQuestion[2].textContent = quizInfo[2].infoQuestion;
//시험 정답
quizAnswerResult[0].textContent = quizInfo[0].infoAnswer;
quizAnswerResult[1].textContent = quizInfo[1].infoAnswer;
quizAnswerResult[2].textContent = quizInfo[2].infoAnswer;
//문제 해설
quizDesc[0].textContent = quizInfo[0].infoDesc;
quizDesc[1].textContent = quizInfo[1].infoDesc;
quizDesc[2].textContent = quizInfo[2].infoDesc;지정된 값을 화면에 출력시키는 방법은 여러가지가 있습니다.
우선 기본적인 방법부터 해봤습니다.
어디에 출력시킬 건지 선택자 이름을 먼저 불러오고,
텍스트 속성을 가져오는 속성인 textContent를 사용해
const quizInfo 의 배열 값 안에 값을 가져옵니다.
나머지 값들도 마찬가지로 작업해줬습니다.
이제 이것들은 주석표시를 하고
밑에선 더 간략하게 가져오는 방법을 써보겠습니다.
#2
// #2
// 문제 종류 + 문제 시간
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;우선 문제 종류와 문제 시간은 한 칸 안에 한줄로 들어오기 때문에
'+' 를 사용해 한번에 지정해줄 수 있습니다.
띄어쓰기는 " " 빈 문자열을 사용하면 됩니다.
#3
//#3
//for문 사용, 전체불러오기
for(let i=0; i<quizInfo.length; i++){
quizTitle[i].innerHTML = quizInfo[i].infoType + " " + quizInfo[i].infoTime;
quizQuestionNum[i].textContent = quizInfo[i].infoNumber;
quizQuestion[i].textContent = quizInfo[i].infoQuestion;
quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
quizDesc[i].textContent = quizInfo[i].infoDesc;
}위에서 했던 모든것들을 for문을 사용해 한번에 불러올 수 있습니다.
for문으로 배열값안에 숫자만큼 반복되게 해주고,
선택자의 모든 값들은 i로 변경시켜 원하는 값을 불러옵니다.
#4
quizInfo.forEach(function(e, i){
quizTitle[i].innerHTML = quizInfo[i].infoType + " " + quizInfo[i].infoTime;
quizQuestionNum[i].textContent = quizInfo[i].infoNumber;
quizQuestion[i].textContent = quizInfo[i].infoQuestion;
quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
quizDesc[i].textContent = quizInfo[i].infoDesc;
});더 간단하게 forEach문으로 바꿔 el,i로 값을 불러올 수 있습니다.
정답 숨기기 #1
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";기본 작업은 이렇게 할 수 있습니다.
선택자를 작성하고, style과 display를 사용해 none을 주어 없애줍니다.
#2
이것도 for문과 forEach문으로 변경이 가능합니다.
//for
for(let i=0; i<=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";
});불러올 값들을 i로 바꿔주면 됩니다.
정답확인(숨김,표시)
//정답 확인
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");
}
});
});마지막으로 정답 확인과 사용자정답
인풋박스 숨김, 정답확인 버튼, 정답 보이기, 사용자 정답과 문제의 정답이 맞는지 확인하는 코드를 작성해보겠습니다.
forEach문을 사용해 한번에 지정해줍니다.
매개변수 btn,num을 지정해주고
btn을 클릭했을 때 사용되는 값을 지정해줍니다.
입력 요소인 value를 지정해주고
선택자를 선택해 style.display로 숨길건지 보이게 할건지 지정해줍니다.
if else문을 사용해 사용자가 작성한 답과 문제의 답이 맞는지 확인해주고
맞으면 웃는강아지를
틀리면 우는 강아지를 넣어 주면!
끝!
반응형