{
//선택자
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", () => {
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");
if(!selectedChoice){
alert("답을 선택해주세요");
};
const userAnswer = selectedChoice.value; // 사용자가 클릭한 정답
const corrcetAnswer = quizInfo[currentIndex].infoAnswer; //정답지의 정답
const quizElement = quizWrap.querySelector(".quiz");
const descElement = quizWrap.querySelector(".quiz__desc");
const answerElement = quizWrap.querySelector(".quiz__answer");
if(userAnswer === corrcetAnswer){
quizElement.classList.add("good");
descElement.classList.remove("none");
} else {
quizElement.classList.add("bad");
answerElement.classList.remove("none");
descElement.classList.remove("none");
}
descElement.classList.remove("none");
};
// 페이지가 로드된 후 실행
document.addEventListener("DOMContentLoaded", () => {
updataQuiz(currentIndex);
});
}