01. 퀴즈 이펙트 : 정답 확인하기 유형(1문제)
문제를 풀면 정답을 확인하고 결과에 따라 특정 애니메이션이 실행되는 퀴즈입니다.
- 저장하기 : 변수
- 제어하기 : if문
- 선택자 : document.querySelector()
- 메서드 : innerText(), classList.add(), classList.remove()
{
// 문제 정보
const infoDate = "2021년 10월";
const infoType = "정보처리 기능사";
const infoNum = "1.";
const infoQuestion = "CPU의 정보처리 속도 단위 중 초당 100만 개의 연산을 수행한다는 의미의 단위는?"
const infoAnswer = "MIPS";
const infoDesc = "LIPS는 초당 1개, KIPS는 초당 1000개, MIPS는 초당 1000000의 연산을 수행하는것을 의미합니다."
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizDate = quizWrap.querySelector(".quiz__date");
const quizType = quizWrap.querySelector(".quiz__type");
const quizNum = quizWrap.querySelector(".quiz__question em");
const quizQuestion = quizWrap.querySelector(".quiz__question span");
const quizAnswer = quizWrap.querySelector(".quiz__answer");
const quizDesc = quizWrap.querySelector(".quiz__desc");
const quizConfirm = quizWrap.querySelector(".quiz__confirm");
const quizInput = quizWrap.querySelector(".quiz__input input");
const quizAnimation = quizWrap.querySelector(".quiz__animation");
// 문제 출력
quizDate.innerText = infoDate;
quizType.innerText = infoType;
quizNum.innerText = infoNum;
quizQuestion.innerText = infoQuestion;
quizAnswer.innerText = infoAnswer;
quizDesc.innerText = infoDesc;
// 정답 해설 숨기기
quizAnswer.classList.add("none");
quizDesc.classList.add("none");
// 정답 확인하기
quizConfirm.addEventListener("click", () => {
const userAnswer = quizInput.value;
if(infoAnswer == userAnswer){
quizAnimation.classList.add("like");
} else {
quizAnimation.classList.add("dislike");
}
quizConfirm.classList.add("none");
quizInput.classList.add("none");
quizAnswer.classList.remove("none");
quizDesc.classList.remove("none");
});
}
01. 문제 정보 세팅(line2~8):
이 부분에서는 퀴즈에 필요한 정보를 변수에 저장합니다. infoDate에는 퀴즈의 날짜, infoType에는 퀴즈의 유형,
infoNum에는 문제 번호, infoQuestion에는 퀴즈 질문, infoAnswer에는 정답,
infoDesc에는 정답에 대한 설명이 들어갑니다.
02. 선택자 설정(line11~20):
이 부분에서는 HTML 문서 내에서 각 요소를 선택합니다.
예를 들어, .quiz__date 클래스를 가진 요소를 quizDate 변수에 저장하고, 이와 같이 다른 요소들도 선택합니다.
03. 문제 출력(line23~28):
이 부분에서는 선택한 HTML 요소들에 퀴즈 정보를 출력합니다.
각 변수에 저장된 정보를 해당 요소의 innerText 속성에 할당하여 화면에 퀴즈 내용을 표시합니다.
04. 정답, 해설 숨기기(line31~32):
퀴즈 페이지를 처음 로드했을 때, 정답과 정답 설명은 숨겨져 있도록 하기 위해
해당 요소들에 none 클래스를 추가합니다.
05. 정답 확인하기(line35~46):
정답을 확인하는 기능이 구현된 부분입니다. 사용자가 입력한 답안을 quizInput에서 가져와 userAnswer 변수에 저장합니다.
그런 다음, 사용자의 답안과 정답을 비교하여 일치하면 "like" 애니메이션을 추가하고, 불일치하면 "dislike" 애니메이션을 추가합니다.
그리고 확인 버튼(quizConfirm)을 숨기고 입력 필드(quizInput)도 숨깁니다.
마지막으로 정답과 정답 설명을 화면에 보여주기 위해 none 클래스를 제거합니다.
02. 퀴즈 이펙트 : 정답 확인하기 유형(5문제)
문제를 풀면 정답을 확인하고 결과에 따라 특정 애니메이션이 실행되는 퀴즈입니다.
- 저장하기 : 변수, 배열, 객체
- 제어하기 : if문, for문, forEach()
- 선택자 : querySelector(), querySelectorAll()
- 메서드 : textContent(), classList, trim(), toLowerCase()
- 이벤트 : if문, addEventListener()
{
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizDate = quizWrap.querySelectorAll(".quiz__date");
const quizType = quizWrap.querySelectorAll(".quiz__type");
const quizNum = quizWrap.querySelectorAll(".quiz__question em");
const quizQuestion = quizWrap.querySelectorAll(".quiz__question span");
const quizAnswer = quizWrap.querySelectorAll(".quiz__answer");
const quizDesc = quizWrap.querySelectorAll(".quiz__desc");
const quizConfirm = quizWrap.querySelectorAll(".quiz__confirm");
const quizInput = quizWrap.querySelectorAll(".quiz__input input");
const quizAnimation = quizWrap.querySelectorAll(".quiz__animation");
// 문제 정보
const quizInfo = [
{
infoDate : "2019년 상시",
infoType : "정보처리기능사",
infoNum : "1.",
infoQuestion : "어떤 릴레이션 R의 정의에서 애트리뷰트의 수를 무엇이라 하는가?",
infoAnswer : "차수",
infoDesc : "속성(Attribute)의 개수를 차수, 튜플(Tuple)의 개수를 기수라고 합니다.",
},
{
infoDate : "2021년 10월",
infoType : "정보처리기능사",
infoNum : "2.",
infoQuestion : "시스템의 날짜를 변경하거나 확인할 수 있는 DOS 명령어는?",
infoAnswer : "2",
infoDesc : "'시스템 날짜 변경' 명령어는 DATE입니다.",
},
{
infoDate : "2021년 6월",
infoType : "정보처리기능사",
infoNum : "3.",
infoQuestion : "2개의 조건을 동시에 만족해야 출력하는 논리 연산자는?",
infoAnswer : "AND",
infoDesc : "2개의 조건을 동시에 만족한다는 것은 2개의 조건이 모두 참이라는 의미입니다. 즉 모든 조건이 참일 때만 참을 출력하는 논리 연산자는 AND입니다",
}
];
// 문제 출력
// for()
// for(let i=0; i<quizInfo.length; i++){
// quizDate[i].textContent = quizInfo[i].infoDate;
// quizType[i].textContent = quizInfo[i].infoType;
// quizNum[i].textContent = quizInfo[i].infoNum;
// quizQuestion[i].textContent = quizInfo[i].infoQuestion;
// quizAnswer[i].textContent = quizInfo[i].infoAnswer;
// quizDesc[i].textContent = quizInfo[i].infoDesc;
// }
// forEach()
quizInfo.forEach((el, i) => {
quizDate[i].textContent = quizInfo[i].infoDate;
quizType[i].textContent = quizInfo[i].infoType;
quizNum[i].textContent = quizInfo[i].infoNum;
quizQuestion[i].textContent = quizInfo[i].infoQuestion;
quizAnswer[i].textContent = quizInfo[i].infoAnswer;
quizDesc[i].textContent = quizInfo[i].infoDesc;
});
// 정답 해설 숨기기
// quizAnswer[0].style.display = "none";
// quizAnswer[1].style.display = "none";
// quizAnswer[2].style.display = "none";
// quizDesc[0].style.display = "none";
// quizDesc[1].style.display = "none";
// quizDesc[2].style.display = "none";
// for()
// for(i=0; i<quizInfo.length; i++){
// quizAnswer[i].style.display = "none";
// quizDesc[i].style.display = "none";
// }
// forEach()
quizInfo.forEach((el, i) => {
quizAnswer[i].style.display = "none";
quizDesc[i].style.display = "none";
});
// 정답확인
quizConfirm.forEach(function(btn, num){
btn.addEventListener("click", function(){
const userAnswer = quizInput[num].value.trim().toLowerCase();
const correctAnswer = quizInfo[num].infoAnswer.trim().toLowerCase();
if(userAnswer == correctAnswer){
quizAnimation[num].classList.add("like");
} else {
quizAnimation[num].classList.add("dislike");
}
quizAnswer[num].style.display = "block";
quizDesc[num].style.display = "block";
quizConfirm[num].style.display = "none";
quizInput[num].style.display = "none";
});
});
}
1.선택자 설정(line3~12):
먼저, HTML 문서에서 필요한 요소들을 선택자로 가져옵니다. 예를 들어, .quiz__date, .quiz__type, .quiz__question, 등의 클래스를 가진 요소들을 선택합니다.
2.문제 정보 세팅(line15~40):
quizInfo 배열은 퀴즈 정보를 저장하는데 사용됩니다. 각 항목은 퀴즈의 날짜, 유형, 번호, 질문, 정답 및 설명을 포함하는 객체입니다.
3.문제 출력(line55~61):
forEach 메서드를 사용하여 각 배열 요소에 대해 정보를 채웁니다.
4.정답 해설 숨기기(line80~82):
그 후, 정답과 해설을 숨기기 위해 quizAnswer 및 quizDesc 배열의 스타일 속성의 display를 "none"으로 설정합니다.
5.정답 확인(line86~100):
quizConfirm 배열의 각 버튼(정답 확인 버튼)에 이벤트 리스너를 추가합니다. 사용자가 정답 확인 버튼을 클릭하면, 해당 퀴즈에 대한 사용자의 답변과 정답을 비교하여 퀴즈의 상태를 나타내는 클래스를 추가합니다. 그리고 정답과 해설을 표시하고, 정답 확인 버튼과 입력 필드를 숨깁니다.
03. 퀴즈 이펙트 : 객관식 : 정답 선택하기 유형(1문제)
객관식을 선택하면 정답을 알려줍니다.
- 저장하기 : 변수, 배열, 객체
- 제어하기 : 다중 if문, for문, break
- 선택자 : querySelector(), querySelectorAll()
- 메서드 : innerHTML(), alert(), classList
- 이벤트 : addEventListener()
{
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizHeader = quizWrap.querySelector(".quiz__header");
const quizQuestion = quizWrap.querySelector(".quiz__question");
const quizAnswer = quizWrap.querySelector(".quiz__answer");
const quizDesc = quizWrap.querySelector(".quiz__desc");
const quizChoice = quizWrap.querySelectorAll(".quiz__choice span");
const quizSelect = quizWrap.querySelectorAll(".quiz__choice input");
const quizConfirm = quizWrap.querySelector(".quiz__confirm");
// 문제 정보
const quizInfo = [
{
infoDate : "2019년 상시",
infoType : "정보처리기능사",
infoNum : "01",
infoQuestion : "어떤 릴레이션 R의 정의에서 애트리뷰트의 수를 무엇이라 하는가?",
infoChoice : ["차수", "기수", "도메인", "튜플"],
infoAnswer : "1",
infoDesc : "속성(Attribute)의 개수를 차수, 튜플(Tuple)의 개수를 기수라고 합니다.",
}
];
// 문제 출력
quizHeader.innerHTML = quizInfo[0].infoDate + " " +quizInfo[0].infoType;
quizQuestion.innerHTML = quizInfo[0].infoNum + ". " + quizInfo[0].infoQuestion;
quizAnswer.innerText = quizInfo[0].infoAnswer;
quizDesc.innerText = quizInfo[0].infoDesc;
for(let i=0; i<quizChoice.length; i++){
quizChoice[i].innerText = quizInfo[0].infoChoice[i];
}
// 정답 확인
quizConfirm.addEventListener("click", ()=>{
let selectedChoice = null;
for(let i=0; i<quizSelect.length; i++){
if(quizSelect[i].checked){
selectedChoice = quizSelect[i].value;
break;
}
}
if(selectedChoice !== null){
if(selectedChoice == quizInfo[0].infoAnswer){
// alert("정답");
alert("정답입니다.");
quizDesc.classList.remove("none");
} else {
// alert("오답");
alert("오답입니다.");
quizAnswer.classList.remove("none");
quizDesc.classList.remove("none");
}
} else {
alert("보기를 선택해주세요!! 😊");
}
});
}
1. 선택자 설정(line3~9):
먼저, HTML 문서에서 필요한 요소들을 선택자로 가져옵니다. .quiz__wrap 클래스 내부의 요소들을 선택합니다.
2. 문제 정보 세팅(line14~22):
quizInfo 배열은 퀴즈 정보를 저장하는데 사용됩니다. 각 항목은 퀴즈의 날짜, 유형, 번호, 질문, 보기, 정답 및 설명을 포함하는 객체입니다. 이 예시에서는 하나의 퀴즈만을 다루기 때문에 배열 내에 하나의 객체만 포함됩니다.
3. 문제 출력(line28~34):
퀴즈 정보를 HTML 요소에 채워 넣습니다. quizHeader, quizQuestion, quizAnswer, quizDesc는 텍스트 콘텐츠를 설정하고, quizChoice와 quizSelect는 각각의 선택지와 라디오 버튼을 설정합니다.
4. 정답 확인 및 해설 확인(line38~60):
quizConfirm 버튼에 클릭 이벤트 리스너를 추가합니다. 사용자가 "정답 확인" 버튼을 클릭하면, 사용자가 선택한 답을 확인하고, 선택한 답이 정답인지 여부에 따라 적절한 경고 메시지를 표시합니다. 선택한 답이 정답이면 "정답입니다." 메시지가 표시되고, 그렇지 않으면 "오답입니다." 메시지가 표시됩니다. 또한, 보기를 선택하지 않은 경우 "보기를 선택해주세요!" 메시지가 표시됩니다.
04. 퀴즈 이펙트 : 객관식 : 정답 선택하기 유형(5문제)
객관식을 선택하면 정답을 알려줍니다.
- 저장하기 : 변수, 배열, 객체
- 실행하기 : 익명 함수, 매개변수 함수
- 제어하기 : 다중 if문, forEach
- 선택자 : querySelector(), querySelectorAll()
- 메서드 : join(), push(), classList, alert()
- 이벤트 : addEventListener()
{
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
// 문제 정보
const quizInfo = [
{
infoDate : "2006년 5회",
infoType : "정보처리 기능사",
infoQuestion : "이항(binary) 연산에 해당하는 것은?",
infoChoice : {
1: "COMPLEMENT",
2: "AND",
3: "ROTATE",
4: "SHIFT"
},
infoAnswer : "2",
infoDesc : "단항연산 : ROTATE, SHIFT, MOVE, NOT(COMPLEMENT)"
},{
infoDate : "2006년 5회",
infoType : "정보처리 기능사",
infoQuestion : "프로그램이 컴퓨터의 기종에 관계없이 수행될 수 있는 성질을 의미하는 것은?",
infoChoice : {
1: "가용성",
2: "신뢰성",
3: "호환성",
4: "안전성"
},
infoAnswer : "3",
infoDesc : "컴퓨터의 기종에 관계없이 동작하므로 호환성입니다. 호환성이란 까스활명수, 까스명수, 베아제등 이름은 틀리지만 소화제의 기능을 하는것처럼 기종에 관계없이 동작할수 있는 것들을 말합니다."
},{
infoDate : "2006년 5회",
infoType : "정보처리 기능사",
infoQuestion : "제어장치가 앞의 명령 실행을 완료한 후, 다음에 실행 할 명령을 기억장치로부터 가져오는 동작을 완료할 때까지의 주기를 무엇이라고 하는가?",
infoChoice : {
1: "fetch cycle",
2: "transfer cycle",
3: "search time",
4: "run time"
},
infoAnswer : "1",
infoDesc : "명령어를 가지고 오는것을 fetch cycle 이라고 합니다."
}
];
// 문제 출력
const updataQuiz = () => {
const quizArray = [];
quizInfo.forEach((quiz, index) => {
quizArray.push(`
<div class="quiz">
<div class="quiz__header">${quiz.infoDate} ${quiz.infoType}</div>
<div class="quiz__main">
<div class="quiz__question">${index+1} ${quiz.infoQuestion}</div>
<div class="quiz__choice">
<label for="choice1-${index}">
<input type="radio" id="choice1-${index}" name="choice-${index}" value="1">
<span>${quiz.infoChoice[1]}</span>
</label>
<label for="choice2-${index}">
<input type="radio" id="choice2-${index}" name="choice-${index}" value="2">
<span>${quiz.infoChoice[2]}</span>
</label>
<label for="choice3-${index}">
<input type="radio" id="choice3-${index}" name="choice-${index}" value="3">
<span>${quiz.infoChoice[3]}</span>
</label>
<label for="choice4-${index}">
<input type="radio" id="choice4-${index}" name="choice-${index}" value="4">
<span>${quiz.infoChoice[4]}</span>
</label>
</div>
<div class="quiz__answer none">
${quiz.infoAnswer}
</div>
<div class="quiz__desc none">
${quiz.infoDesc}
</div>
</div>
<div class="quiz__footer">
<button class="quiz__confirm" data-index="${index}">정답 확인하기</button>
</div>
</div>
`);
});
quizWrap.innerHTML = quizArray.join("");
};
// 정답 확인
const answerQuiz = (index) => {
const quizChoices = quizWrap.querySelectorAll(`.quiz__choice input[name="choice-${index}"]:checked`);
const quizElement = quizWrap.querySelectorAll(".quiz")[index];
const descElement = quizWrap.querySelectorAll(".quiz__desc")[index];
const answerElement = quizWrap.querySelectorAll(".quiz__answer")[index];
const confirmElement = quizWrap.querySelectorAll(".quiz__confirm")[index];
if (quizChoices.length > 0) {
const userAnswer = quizChoices[0].value; // 사용자가 체크한 정답
if(userAnswer === quizInfo[index].infoAnswer){
quizElement.classList.add("good"); // O 표시
descElement.classList.remove("none");
} else {
quizElement.classList.add("bad"); // X 표시
descElement.classList.remove("none"); // 해설 보기
answerElement.classList.remove("none"); // 정답 보기
}
confirmElement.classList.add("none"); // 정답 확인버튼 삭제
} else {
alert("보기를 선택해주세요!");
}
};
// 페이지가 로드된 후 실행
document.addEventListener("DOMContentLoaded", () => {
updataQuiz();
const quizConfirm = document.querySelectorAll(".quiz__confirm");
quizConfirm.forEach((button, index) => {
button.addEventListener("click", () => {
answerQuiz(index);
});
});
});
}
1. 선택자 설정(line3):
quizWrap: 이 변수는 HTML에서 "quiz__wrap" 클래스를 가진 요소를 선택합니다.
2. 문제 정보 세팅(line6~31):
quizInfo: 이 배열은 각 퀴즈 질문을 나타내는 객체들로 구성됩니다. 각 객체에는 질문의 날짜, 유형, 질문 내용, 답변 선택지, 올바른 답변 및 설명이 포함되어 있습니다.
3. 문제 출력(line47~56):
forEach를 이용해 문제를 출력합니다.
4. 정답 확인(line57~81):
if문을 이용해 정답이면 O표시를하고, 오답이면 X표시를하고 해설과 정답을 보여줍니다.
5. DOMContentLoaded 이벤트 리스너(line84~91):
이 이벤트 리스너는 DOM(Document Object Model)이 완전히 로드되고 파싱된 후에 트리거됩니다.
05. 퀴즈 이펙트 : 객관식 : 정답 선택하기 유형(슬라이드)
객관식 문제를 슬라이드 형식으로 작업합니다.
- 저장하기 : 변수, 배열, 객체
- 실행하기 : 익명 함수, 매개변수 함수, 화살표 함수
- 제어하기 : 다중 if문, forEach
- 선택자 : querySelector(), querySelectorAll()
- 메서드 : innerHTML, classList
- 이벤트 : addEventListener()
{
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
// 문제 정보
const quizInfo = [
{
infoDate : "2006년 5회",
infoType : "정보처리 기능사",
infoQuestion : "이항(binary) 연산에 해당하는 것은?",
infoChoice : ["COMPLEMENT","AND","ROTATE","SHIFT"],
infoAnswer : "2",
infoDesc : "단항연산 : ROTATE, SHIFT, MOVE, NOT(COMPLEMENT)"
},
{
infoDate : "2006년 5회",
infoType : "정보처리 기능사",
infoQuestion : "프로그램이 컴퓨터의 기종에 관계없이 수행될 수 있는 성질을 의미하는 것은?",
infoChoice : ["가용성","신뢰성","호환성","안전성"],
infoAnswer : "3",
infoDesc : "컴퓨터의 기종에 관계없이 동작하므로 호환성입니다. 호환성이란 까스활명수, 까스명수, 베아제등 이름은 틀리지만 소화제의 기능을 하는것처럼 기종에 관계없이 동작할수 있는 것들을 말합니다."
},
{
infoDate : "2006년 5회",
infoType : "정보처리 기능사",
infoQuestion : "제어장치가 앞의 명령 실행을 완료한 후, 다음에 실행 할 명령을 기억장치로부터 가져오는 동작을 완료할 때까지의 주기를 무엇이라고 하는가?",
infoChoice : ["fetch cycle","transfer cycle","search time","run time"],
infoAnswer : "1",
infoDesc : "명령어를 가지고 오는것을 fetch cycle 이라고 합니다."
}
];
let currentIndex = 0;
// 문제 출력
const updataQuiz = (index) => {
let quizWrapTag = `
<div class="quiz">
<div class="quiz__header">${quizInfo[index].infoDate} ${quizInfo[index].infoType}</div>
<div class="quiz__main">
<div class="quiz__question">${index+1}. ${quizInfo[index].infoQuestion}</div>
<div class="quiz__choice">
<label for="choice1">
<input type="radio" id="choice1" name="choice" value="1">
<span>${quizInfo[index].infoChoice[0]}</span>
</label>
<label for="choice2">
<input type="radio" id="choice2" name="choice" value="2">
<span>${quizInfo[index].infoChoice[1]}</span>
</label>
<label for="choice3">
<input type="radio" id="choice3" name="choice" value="3">
<span>${quizInfo[index].infoChoice[2]}</span>
</label>
<label for="choice4">
<input type="radio" id="choice4" name="choice" value="4">
<span>${quizInfo[index].infoChoice[3]}</span>
</label>
</div>
<div class="quiz__answer none">
${quizInfo[index].infoAnswer}
</div>
<div class="quiz__desc none">
${quizInfo[index].infoDesc}
</div>
</div>
<div class="quiz__footer">
<button class="quiz__confirm">정답 확인하기</button>
<button class="quiz__next none">다음 문제</button>
</div>
</div>
`;
quizWrap.innerHTML = quizWrapTag;
// 선택자
const quizConfirm = quizWrap.querySelector(".quiz__confirm");
const quizNext = quizWrap.querySelector(".quiz__next");
// 정답 확인 버튼
quizConfirm.addEventListener("click", () => {
const selectedChoice = quizWrap.querySelector("input[name='choice']:checked");
if (!selectedChoice) {
alert("답을 선택하세요!"); // 원하는 경고 메시지로 대체할 수 있습니다.
return; // 함수 종료
}
checkAnswer();
quizConfirm.classList.add("none"); // 정답 버튼 삭제
quizNext.classList.remove("none"); // 다음 버튼 추가
});
// 다음 문제 버튼
quizNext.addEventListener("click", () => {
if(currentIndex < quizInfo.length -1){
quizNext.classList.add("none"); // 다음 버튼 삭제
quizConfirm.classList.remove("none"); // 정답 버튼 추가
currentIndex++; // 문제 번호 추가
updataQuiz(currentIndex); // 퀴즈 반영
} else {
alert("퀴즈가 종료되었습니다.");
}
});
};
// 정답 확인
const checkAnswer = () => {
const selectedChoice = quizWrap.querySelector("input[name='choice']:checked");
const userAnswer = selectedChoice.value; // 사용자가 클릭한 정답
const correctAnswer = quizInfo[currentIndex].infoAnswer; // 정답자의 정답
const quizElement = quizWrap.querySelector(".quiz");
const descElement = quizWrap.querySelector(".quiz__desc");
const answerElement = quizWrap.querySelector(".quiz__answer");
if(userAnswer === correctAnswer){
quizElement.classList.add("good");
} else {
quizElement.classList.add("bad");
answerElement.classList.remove("none");
}
descElement.classList.remove("none");
}
// 페이지가 로드된 후 실행
document.addEventListener("DOMContentLoaded", () => {
updataQuiz(currentIndex);
});
}
1. 선택자 설정(line3, line 77~78):
quizWrap: 이 변수는 HTML에서 "quiz__wrap" 클래스를 가진 요소를 선택합니다.
2. 문제 정보 세팅(line6~42):
quizInfo: 이 배열은 각 퀴즈 질문을 나타내는 객체들로 구성됩니다. 각 객체에는 질문의 날짜, 유형, 질문 내용, 답변 선택지, 올바른 답변 및 설명이 포함되어 있습니다.
3. 문제 출력(line36~72):
forEach를 이용해 문제를 출력합니다.
4. 정답 확인 버튼(line81~91):
if문을 이용해 정답이면 O표시를하고, 오답이면 X표시를하는 버튼을 생성합니다.
5. 다음 문제 버튼(line94~104):
문제를 풀면 다음으로 넘어갈 수 있는 버튼을 만듭니다.
6. 정답 확인(line107~129):
if문을 이용해 정답이면 O표시를 하고, 오답이면 X표시를 하며 설명과 정답이 생깁니다.
7. DOMContentLoaded 이벤트 리스너(line84~91):
이 이벤트 리스너는 DOM(Document Object Model)이 완전히 로드되고 파싱된 후에 트리거됩니다.
++ 정답을 체크하지 않았을 경우(line84~87):
if문을 이용해 답을 체크하지 않았다면 답을 선택하라는 경고문이 생깁니다.
06. 퀴즈 이펙트 : 객관식 : 정답 선택하기 유형(슬라이드, JSON)
JSON 파일을 이용해서 객관식 문제를 슬라이드 형식으로 작업합니다.
- 저장하기 : 변수, 배열, 객체
- 실행하기 : 익명 함수, 매개변수 함수, 화살표 함수
- 제어하기 : 다중if
- 선택자 : querySelector(), querySelectorAll()
- 메서드 : innerHTML, classList
- 이벤트 : addEventListener()
07. 퀴즈 이펙트 : 객관식 : 정답 선택하기 유형(슬라이드, JSON)
JSON 파일을 이용해서 객관식 문제를 슬라이드 형식으로 작업합니다.
- 저장하기 : 변수, 배열, 객체
- 실행하기 : 익명 함수, 매개변수 함수, 화살표 함수
- 제어하기 : 다중if
- 선택자 : querySelector(), querySelectorAll()
- 메서드 : innerHTML, classList
- 이벤트 : addEventListener()