// 선택자
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: "2021년 10월",
infoType: "정보처리 기능사",
infoNum: "1. ",
infoQuestion: "16진수 2C를 10진수로 변환하면?",
infoAnswer: "44",
infoDesc: "16진수에서 'C'는 12를 나타내며, '2C'는 16^1 * 2 + 16^0 * 12로 계산됩니다 16^1 * 2 = 32 16^0 * 12 = 12 따라서 10진수로 변환하면 32 + 12 = 44가 됩니다."
}, {
infoDate: "2021년 11월",
infoType: "정보처리 기능사",
infoNum: "2. ",
infoQuestion: "컴퓨터 내에서 실행되는 명령어와 데이터가 이동되는 통로를 일컫는 것은?",
infoAnswer: "버스",
infoDesc: "컴퓨터 시스템 내에서 중앙처리장치(CPU), 메모리, 입출력장치 등 각각의 컴포넌트 사이에 데이터 및 명령어가 이동하는 경로를 버스라고 합니다. 버스는 데이터 버스와 주소 버스, 제어 버스로 나뉘어질 수 있으며, 이들은 각각 데이터, 주소, 제어 정보를 전송하는 역할을 합니다."
}, {
infoDate: "2021년 12월",
infoType: "정보처리 기능사",
infoNum: "3. ",
infoQuestion: "UNIX에서 파일의 내용을 화면에 보여 주는 명령은?",
infoAnswer: "cat",
infoDesc: "UNIX와 UNIX 계열 운영 체제에서 파일의 내용을 화면에 보여 주는 명령은 'cat'입니다. 'cat' 명령은 concatenate(연결하다)의 약어로 사용되며, 파일의 내용을 연결하여 화면에 출력합니다."
}
];
// 문제 출력
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();
if (userAnswer === quizInfo[num].infoAnswer) {
quizAnimation[num].classList.add("like");
} else {
alert("오답입니다.");
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";
});
});