완성 화면
코드 보기 / 자바스크립트
//선택자
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 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: "2011년 4회",
infoNumber : "1",
infoQuestion: "주파수 분할 다중화 방식에서 각 채널 간 간섭을 막기 위해서 일종의 완충지역 역할을 하는 것을 무엇이라고 하는가?",
infoAnswer:"가드밴드",
infoDesc: "가드밴드는 주파수 분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 일종의 완충지역 역할을 한다."
}, {
infoType: "정보처리 기능사",
infoTime: "2011년 4회",
infoNumber : "2",
infoQuestion: "사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내주는 대화식 운영체제는 무엇인가?",
infoAnswer:"UNIX",
infoDesc: "UNIX는 사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내 주는 대화식 운영체제이다."
}, {
infoType: "정보처리 기능사",
infoTime: "2011년 4회",
infoNumber : "3",
infoQuestion: "프로세스들이 서로 다른 프로세스가 차지하고 있는 자원을 무한정 기다려 시스템이 멈춘 것처럼 보이는 상태는?",
infoAnswer:"교착상태",
infoDesc: "교착상태(Dead lock)는 2개 이상의 프로세스들이 서로 다른 프로세스가 차지하고 잇는 자원을 무한정 기다려 시스템이 멈춘 것처럼 보이는 상태이다."
}
];
//문제출력
// //과목
// 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;
//#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;
//번호
// 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;
// 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;
// }
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;
});
그동안 데이터를 변수에 저장만 하고 하나씩 불러오는 방법을 사용했으나, 3번 이펙트에서 달라진 점은 같은 선택자가 반복되는 데이터를 불러오는 데에 for문과 forEach문을 사용했다는 것이다.
과목, 문제 번호, 질문, 정답, 해설 모두 배열의 키를 제외하면 전부 같은 문장이 반복되기 때문에 for문과 forEach문을 사용하여 데이터를 불러올 수 있다.
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;
}
quizInfo
: 객체들(문제 종목과 회차, 문제 번호, 문제, 정답, 해설)이 담긴 배열이다.
quizTitle,
quizQuestionNum,
quizQuestion,
quizAnswerResult,
quizDesc
: HTML 문서에서 해당 객체 정보를 선택하여 출력하는 요소들이다.
for문을 이용해 문제의 정보가 담긴 quizInfo 배열의 길이만큼 반복하며, 각 객체의 정보를 출력하는 요소에 객체의 속성 값을 할당한다.
quizTitle
: 문제의 종목과 회차를 출력하는 요소이며, quizInfo 객체의 infoType 속성과 infoTime 속성 값을 가져와 할당한다.
(즉 정보처리 기능사, 2011년 4회라는 정보를 가져온다)
quizQuestionNum
:문제의 번호를 출력하는 요소이며, quizInfo 객체의 infoNumber 속성 값을 가져와 할당한다.
(즉 문제 1번, 문제 2번, 문제 3번 ····· 의 정보를 가져온다)
quizQuestion
: 문제를 출력하는 요소이며, quizInfo 객체의 infoQuestion 속성 값을 가져와 할당한다.
(즉 각 객체에서 infoQuestion이라는 키 안의 속성 값을 가져와 할당하는 것)
quizAnswerResult
:정답을 출력하는 요소이며, quizInfo 각 객체의 infoAnswer 속성 값을 가져와 할당한다.
quizDesc
:해설을 출력하는 요소이며, quizInfo 각 객체의 infoDesc 속성 값을 가져와 할당합니다.
forEach
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 함수를 이용해 quizInfo 배열의 요소들을 반복하며, 각 객체의 정보를 출력하는 요소에 객체의 속성 값을 할당한다.
quizTitle,
quizQuestionNum,
quizQuestion,
quizAnswerResult,
quizDesc
: HTML 문서에서 해당 객체 정보를 출력하는 요소들.
quizTitle
:문제 종목과 회차를 출력하는 요소이며, quizInfo 객체의 infoType 속성과 infoTime 속성 값을 가져와 할당한다.
quizQuestionNum
:문제의 번호를 출력하는 요소이며, quizInfo 객체의 infoNumber 속성 값을 가져와 할당한다.
quizQuestion
:문제를 출력하는 요소이며, quizInfo 객체의 infoQuestion 속성 값을 가져와 할당한다.
quizAnswerResult
:정답을 출력하는 요소이며, quizInfo 객체의 infoAnswer 속성 값을 가져와 할당한다.
quizDesc
:해설을 출력하는 요소이며, quizInfo 객체의 infoDesc 속성 값을 가져와 할당한다.
forEach문의 function(e,i)은 배열 요소와 해당 인덱스(키, 자리값)을 매개 변수로 받는 콜백 함수이다.
첫번째 매개변수는 element (배열요소, 속성)으로 받아들이기 때문에 인덱스(키, 자리값)을 사용하고 싶다면 반드시 앞에 el 이나 e 등 다른 변수를 적어준 후, 그 뒤에 키로 사용할 다른 변수 이름을 작성해 주어야 자리값을 사용할 수 있다.