728x90
퀴즈 효과03
웹디자인기능사 필기 기출문제를 이용한 주관식(여러 문제) 유형입니다. 단일 문제가 아닌 여러 문제이기 때문에 다중 선택을 위해 querySelectorAll을 사용하였고, 문제는 여러 정보를 담기 위해 객체 속에 데이터를 저장하였습니다.
자바스크립트
퀴즈를 만들기 위한 자바스크립트 작성법입니다. 자세한 설명은 아래에 있습니다.
//01. 선택자 : 다중 선택을 위해 querySelectorAll 사용
const quizType = document.querySelectorAll(".quiz__type"); //퀴즈 종류
const quizNumber = document.querySelectorAll(".quiz__question .number"); //퀴즈 번호
const quizAsk = document.querySelectorAll(".quiz__question .ask"); //퀴즈 질문
const quizConfirm = document.querySelectorAll(".quiz__answer .confirm"); //정답 확인 버튼
const quizResult = document.querySelectorAll(".quiz__answer .result"); //정답 결과
const quizInput = document.querySelectorAll(".quiz__answer .input"); //사용자 정답
const quizView = document.querySelectorAll(".quiz__view"); //강아지
//02. 문제 정보 : 여러 가지 정보를 한 번에 담기 위해 객체 속에 데이터를 저장
const quizInfo = [{
answerType: "웹디자인 기능사 2016년 1회 기출문제",
answerNum: "1",//3번,
answerAsk: "미적 대상을 구상하는 부분과 부분의 사이에 질적으로나 양적으로 모순되는 일 없이 질서가 잡혀 어울리는 것은?",
answerResult: "조화"
},
{
answerType: "웹디자인 기능사 2016년 1회 기출문제",
answerNum: "2",//7번
answerAsk: "한국산업표준(KS)에 따른 색의 3속성은 무엇입니까?",
answerResult: "Hue, Value, Chroma"
},
{
answerType: "웹디자인 기능사 2016년 1회 기출문제",
answerNum: "3",//8번
answerAsk: "같은 크기의 형을 상, 하로 겹칠 때 위쪽의 것이 크게 보이는 착시현상은?",
answerResult: "상방 거리의 과대착시"
},
{
answerType: "웹디자인 기능사 2016년 1회 기출문제",
answerNum: "4",//9번
answerAsk: "디자인 원리 중 동질의 부분이 조합될 때 이루어지는 것은?",
answerResult: "유사"
},
]
//03. 문제 출력 : for문과 forEach() 모두 사용 가능
//for문 사용
for(let i=0; i<quizInfo.length; i++){
quizType[i].textContent = quizInfo[i].answerType;
quizNumber[i].textContent = quizInfo[i].answerNum + ". ";
quizAsk[i].textContent = quizInfo[i].answerAsk;
quizResult[i].textContent = quizInfo[i].answerResult;
};
//forEach() 사용
quizInfo.forEach((e, i) => { //element, index
quizType[i].textContent = quizInfo[i].answerType;
quizNumber[i].textContent = quizInfo[i].answerNum + ". ";
quizAsk[i].textContent = quizInfo[i].answerAsk;
quizResult[i].textContent = quizInfo[i].answerResult;
});
//하나씩 출력하는 방법: 비효율적
// quizType[0].textContent = quizInfo[0].answerType;
// quizType[1].textContent = quizInfo[1].answerType;
// quizType[2].textContent = quizInfo[2].answerType;
// quizType[3].textContent = quizInfo[3].answerType;
// quizNumber[0].textContent = quizInfo[0].answerNum + ". ";
// quizNumber[1].textContent = quizInfo[1].answerNum + ". ";
// quizNumber[2].textContent = quizInfo[2].answerNum + ". ";
// quizNumber[3].textContent = quizInfo[3].answerNum + ". ";
// quizAsk[0].textContent = quizInfo[0].answerAsk;
// quizAsk[1].textContent = quizInfo[1].answerAsk;
// quizAsk[2].textContent = quizInfo[2].answerAsk;
// quizAsk[3].textContent = quizInfo[3].answerAsk;
// quizResult[0].textContent = quizInfo[0].answerResult;
// quizResult[1].textContent = quizInfo[1].answerResult;
// quizResult[2].textContent = quizInfo[2].answerResult;
// quizResult[3].textContent = quizInfo[3].answerResult;
//04. 정답 숨기기
//for문 사용
for(let i=0; i<quizInfo.length; i++){
quizResult[i].style.display = "none"
}
//forEach() 사용
quizInfo.forEach((e, i)=>{
quizResult[i].style.display = "none"
});
//하나씩 정답 숨기는 방법
// quizResult[0].style.display = "none"
// quizResult[1].style.display = "none"
// quizResult[2].style.display = "none"
// quizResult[3].style.display = "none"
//05. 정답확인 : forEach() 사용
// quizConfirm.addEventListener("click", () => { //문제가 하나일때는 가능하지만 여러개이기 때문에 적절하지 않은 방법
// alert("ddd")
// });
quizConfirm.forEach((btn, num) => { //버튼이 4개인 것을 자바스크립트에게 알려줌
btn.addEventListener("click", () => {
//사용자 정담
const userWord = quizInput[num].value; //해당 문제에 맞는 답변 불러오기
//console.log(userWord) //출력값을 console.log로 확인
//console.log(quizInfo[num].answerResult)
//사용자 정답 == 문제 정답(비교 확인)
if(userWord == quizInfo[num].answerResult){ //사용자 정답과 문제 정답 비교
//정답
//alert("정답")
quizView[num].classList.add("like"); //해당 문제에 맞게 출력되도록 [num] 입력 & 정답이면 강아지의 웃는 표정
quizConfirm[num].style.display = "none"; //정답 확인하기 버튼 없어지도록 설정
} else {
//오답
//alert("오답")
quizView[num].classList.add("dislike"); //오답이면 강아지의 슬픈 표정
quizConfirm[num].style.display = "none";
quizResult[num].style.display = "block"; //정답이 보일 수 있게 설정
quizInput[num].style.display = "none"; //정답 입력칸 없어지게 설정
}
})
});
728x90
반응형
'JAVASCRIPT Effect' 카테고리의 다른 글
| SEARCH Effect 02 (3) | 2022.08.17 |
|---|---|
| SEARCH Effect 01 (3) | 2022.08.16 |
| QUIZ Effect 04 (7) | 2022.08.08 |
| QUIZ Effect 03 (11) | 2022.08.05 |
| QUIZ Effect 01 (9) | 2022.08.04 |
댓글