퀴즈 이펙트
퀴즈를 풀 수 있는 페이지를 구성할 때에, 퀴즈의 유형에 맞는 다양한 이펙트를 사용하면 단조롭지 않은 생동감 넘치는 페이지를 만들 수 있습니다.
주관식(여러문제) 유형
주관식 답을 적으면 정답인지 오답인지 비교한 후, 정답/오답이라는 문구를 띄우고 오답이라면 정답을 보여주는 이펙트입니다. 주관식 유형과 비슷하지만, 이번에 작성한 코드는 주관식인 여러 문제를 페이지에 나타나게 할 때에 유용합니다.
해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저 선택자를 지정한 후, 각각의 선택자로 지정한 구역에 알맞은 정보를 대입하는 것과 if문을 사용하는 것은 이전에 한 주관식 유형과 같습니다. 그러나, 여러문제 주관식 유형은 선택자를 통해 각 문제의 부분을 선택하고, 객체를 통해 문제를 출력한다는 점이 일반 주관식 유형과의 차이점입니다.
선택자
다중선택이 필요한 경우, querySelector가 아닌 querySelectorAll을 사용해야 조건에 해당하는 전체에서의 선택이 가능해집니다.
//선택자
const quizType = document.querySelectorAll(".quiz__type"); //퀴즈 종류
const quizNumber = document.querySelectorAll(".quiz__question .number"); //퀴즈 번호
const quizAsk = document.querySelectorAll(".quiz__question .ask"); //퀴즈 질문
const quizConfilm = document.querySelectorAll(".quiz__answer .confilm"); //정답 확인 버튼
const quizResult = document.querySelectorAll(".quiz__answer .result"); //정답 결과
const quizInput = document.querySelectorAll(".quiz__answer .input"); //사용자 정답
const quizView = document.querySelectorAll(".quiz__view"); //사용자 정답
//다중선택이 필요한 경우, querySelector가 아닌 querySelectorAll을 사용해야 조건에 해당하는 전체 경우에서의 선택이 가능해진다.
문제 정보
문제가 여러개인 경우, 문제 정보를 배열과 객체에 저장하면 보다 효율적인 관리가 가능합니다.
//문제정보
const quizInfo = [
{
answerType: "웹디자인 기능사 2016년 1회",
answerNum: "1. ",
answerAsk: "화면을 표현하기 위한 최소 단위이며, 화소라고 불리는 것은?",
answerResult: "픽셀"
},
{
answerType: "웹디자인 기능사 2016년 1회",
answerNum: "2. ",
answerAsk: "디자인 원리 중 동질의 부분이 조합될 때 이루어지는 것은?",
answerResult: "유사"
},
{
answerType: "웹디자인 기능사 2016년 1회",
answerNum: "3. ",
answerAsk: "색채를 과학적으로 정리하여 스펙트럼을 7색으로 분리한 사람은?",
answerResult: "뉴턴"
},
{
answerType: "웹디자인 기능사 2016년 1회",
answerNum: "4. ",
answerAsk: "원근에 의한 공간표현으로 색채와 명암을 활용하는 방법은?",
answerResult: "대기원근법"
}
]
문제 출력
문제가 여러개인 경우, 문제를 출력하는 데에도 많은 코드를 필요로 하게 됩니다. 그러나, for문과 forEach문을 사용하면 간단하게 표현할 수 있습니다. 그 중 forEach문은 조건을 작성하지 않아도 자동으로 배열의 수만큼 반복해서 작동하기 때문에, for문보다 효율적으로 작성할 수 있습니다.
//문제 출력
//단순한 반복을 통해 출력하는 방법
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;
//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문으로 출력하는 방법(조건문이 생략되기 때문에, for문보다 단순한 형태이다.)
quizInfo.forEach((el, i)=>{ //forEach문은 자동으로 배열의 수만큼 작동한다. for문과의 차이점.
quizType[i].textContent = quizInfo[i].answerType;
quizNumber[i].textContent = quizInfo[i].answerNum;
quizAsk[i].textContent = quizInfo[i].answerAsk;
quizResult[i].textContent = quizInfo[i].answerResult;
});
정답 숨기기
답을 입력하기 전, 정답이 작성된 박스를 숨기기 위한 스크립트 입니다. 이 스크립트 또한 여러번 반복해서 작성해야 하기 때문에, for문이나 forEach문을 사용하면 효율적으로 작성할 수 있습니다.
//정답 숨기기(반복)
quizResult[0].style.display = "none";
quizResult[1].style.display = "none";
quizResult[2].style.display = "none";
quizResult[3].style.display = "none";
//for문을 이용한 방법
for(i=0;i<quizInfo.length;i++){
quizResult[i].style.display = "none";
}
//forEach문을 이용한 방법
quizInfo.forEach((el, i)=>{
quizResult[i].style.display = "none";
});
정답 확인
정답 확인하기 버튼을 누르면 버튼이 사라지고, 정답/오답의 여부를 알려주는 알림을 띄웁니다. 그리고 강아지에게 클래스를 추가하여 웃거나 울상인 상태로 보이도록 합니다. 오답인 경우 정답을 보여주는 스크립트입니다.
//정답 확인
quizConfilm.addEventListener("click", ()=>{ //addEventListener("click", function(){}); 클릭했을 때 함수를 실행하는 메소드
alert("add");
});
//quizConfilm이 하나라면 이렇게 작성해도 되지만, 여러개인 경우엔 이렇게 쓰면 오류가 발생한다.
//addEventListener메소드를 적용하려는 대상이 하나가 아니라면 forEach문을 사용해 반복해주어야 한다.
quizConfilm.forEach((btn, num)=>{ //btn은 quizConfilm의 요소를 나타내는 변수, num은 인덱스를 나타내는 변수로 작용합니다.
btn.addEventListener("click", ()=>{
//사용자 입력 답안
const userword = quizInput[num].value;
//정답이 한글인 경우 소문자 변환 메소드와 여백제거 메소드가 적용되지 않는다.
//버튼 안보이기는 공통요소이기 때문에 바깥에 적어서 정답/오답의 두 셩우에 모두 적용할 수 있습니다.
quizConfilm[num].style.display = "none";
//사용자 정답 == 문제 정답 확인
if(userword==quizInfo[num].answerResult){
//정답인 경우
alert("정답입니다!") //정답 알림 띄우기
quizView[num].classList.add("like"); //강아지에 속성을 추가
} else {
//오답인 경우
alert("오답입니다!")
quizView[num].classList.add("dislike");
quizResult[num].style.display = "block"; //정답을 보이게
quizInput[num].style.display = "none"; //정답 적는 박스를 안보이게
}
});
});
댓글