기능사 시험
당신의 이름은 입니다.
정보처리기능사 2006년 2회 문제를 선택했습니다.
시작하겠습니까?
총 시간은 60분이며, 60점 이상 맞아야 합격입니다.
2020년 1회 정보처리기사 기출문제
남은 시간 60분 00초
수험자 : jeong
답안지 제출하기
포기하기
다시 풀기
소스 보기
Javascript
// 선택자
const cbtWrap = document.querySelector(".cbt__wrap");
const cbtBox = document.querySelector(".cbt__box");
const cbtSelect1 = document.getElementById("cbtSelect1");
const cbtSelect2 = document.getElementById("cbtSelect2");
const cbtSelectTitle = document.querySelector(".cbt__select__title");
const cbtBoxStart = document.querySelector(".cbt__box__start");
const cbtSelectInput = document.querySelector(".cbt__selelct__input");
const cbtTime = document.querySelector(".cbt__time span");
const cbtQuiz = document.querySelector(".cbt__quiz");
const cbtOmr = document.querySelector(".cbt__omr");
const cbtTitle = document.querySelector(".cbt__title");
const cbtName = document.querySelector(".cbt__name span");
const cbtSubmit = document.querySelector(".cbt__submit");
const cbtGiveup = document.querySelector(".cbt__giveup");
const cbtAgain = document.querySelector(".cbt__again");
// 문제 정보
let quizInfo = []; // 모든 퀴즈 정보
let quizScore = 0; // 퀴즈 점수
let quizCorrect = 0; // 퀴즈 맞은 갯수
let remainingTime = 3600; // 남은 시간
let timerInterval = "";
// 문제 정보
const handleSelectChange = (e) => {
let selectValue = e.target.value;
let selectText = e.target.options[e.target.selectedIndex].text;
console.log(selectValue);
cbtSelectTitle.innerHTML = selectText;
fetchQuiz(selectValue, selectText);
cbtTitle.innerHTML = selectText;
}
// 문제 가져오기
const fetchQuiz = (value, text) => {
fetch(`https://jeongsaeyeong.github.io/webs2024/json/${value}.json`)
.then(res => res.json())
.then(items => {
console.log(items);
quizInfo = items.map((item, index) => {
const formattedQuiz = {
infoNum: index + 1,
infoQuestion: item.question,
infoDesc: item.desc,
infoAnswer: item.correct_answer
}
// 보기 가져오기
const choices = [...item. incorrect_answers, item.correct_answer];
// 보기 랜덤으로 섞기
for(let i=choices.length-1; i >=0; i--){
const j = Math.floor(Math.random() * (i+1));
[choices[i], choices[j]] = [choices[j], choices[i]];
}
formattedQuiz.infoChoice = choices;
// 문제에 대한 이미지가 있다면
if(item.hasOwnProperty("question_img")){
const src = "![장보처리기능사](https://jeongsaeyeong.github.io/webs2024/json/img/"
formattedQuiz.infoQuestionImg = src + item.question_img + ".jpg)
";
}
// 문제에 대한 보조 섦영이 있다면 출력
if(item.hasOwnProperty("question_desc")){
formattedQuiz.infoQuestionDesc = item.question_desc;
}
return formattedQuiz;
});
console.log(quizInfo);
updateQuiz();
});
};
// 문제 출력하기
const updateQuiz = () => {
const exam = [];
const omr = [];
quizInfo.forEach((question, number) => {
exam.push(`
< div class="cbt">
< div class="cbt__question">${question.infoNum}.${question.infoQuestion}< /div>
${question.infoQuestionDesc ? `< div class="cbt__question__desc">${question.infoQuestionDesc}< /div>` : ``}
${question.infoQuestionImg ? `< div class="cbt__question__img">${question.infoQuestionImg}< /div>` : ``}
< div class="cbt__choices">
< input type="radio" id="select${number}_1" name="select${number}" value="${number}_1" onclick="answerSelect(this)">
< label for="select${number}_1">< span>${question.infoChoice[0]}< /span>< /label>
< input type="radio" id="select${number}_2" name="select${number}" value="${number}_2" onclick="answerSelect(this)">
< label for="select${number}_2">< span>${question.infoChoice[1]}< /span>< /label>
< input type="radio" id="select${number}_3" name="select${number}" value="${number}_3" onclick="answerSelect(this)">
< label for="select${number}_3">< span>${question.infoChoice[2]}< /span>< /label>
< input type="radio" id="select${number}_4" name="select${number}" value="${number}_4" onclick="answerSelect(this)">
< label for="select${number}_4">< span>${question.infoChoice[3]}< /span>< /label>
< /div>
< div class="cbt__answer none">${question.infoAnswer}< /div>
< div class="cbt__desc none">${question.infoDesc}< /div>
< /div>
`);
omr.push(`
< div class="omr">
< strong>${question.infoNum}< /strong>
< input type="radio" name="omr${number}" id="omr${number}_1" value="${number}_1" onclick="answerSelect2(this)">
< label for="omr${number}_1">< span class="label-inner">< /span>< /label>
< input type="radio" name="omr${number}" id="omr${number}_2" value="${number}_2" onclick="answerSelect2(this)">
< label for="omr${number}_2">< span class="label-inner">< /span>< /label>
< input type="radio" name="omr${number}" id="omr${number}_3" value="${number}_3" onclick="answerSelect2(this)">
< label for="omr${number}_3">< span class="label-inner">< /span>< /label>
< input type="radio" name="omr${number}" id="omr${number}_4" value="${number}_4" onclick="answerSelect2(this)">
< label for="omr${number}_4">< span class="label-inner">< /span>< /label>
< /div>
`)
});
cbtQuiz.innerHTML = exam.join('');
cbtOmr.innerHTML = omr.join('');
}
// 시간 표시
const displayTime = () => {
const minutes = Math.floor(remainingTime / 60);
const seconds = remainingTime % 60;
const formattedSeconds = seconds < 10 ? `0${seconds}`: seconds;
cbtTime.textContent = `${minutes}분 ${seconds}초`;
}
// 타이머 작동
const startTimer = () => {
timerInterval = setInterval(() => {
if(remainingTime >0){
remainingTime--;
// 시간 표시
displayTime();
} else {
clearInterval(timerInterval); // 시간이 다 되면 타이머 중지
alert("시간이 종료되었습니다.")
}
}, 1000);
}
// 정답 체크 표시
const answerSelect = (el) => {
const value = el.value.split('_');
const questionNum = parseInt(value[0]);
const choiceNum = parseInt(value[1]);
const selectedChoice = document.querySelector(`#select${questionNum}_${choiceNum}`);
if(selectedChoice.checked){
const omrChoice = document.querySelector(`#omr${questionNum}_${choiceNum}`);
omrChoice.checked = true;
}
};
// OMR 체크 표시
const answerSelect2 = (el) => {
const value = el.value.split('_');
const questionNum = parseInt(value[0]);
const choiceNum = parseInt(value[1]);
const omrChoice = document.querySelector(`#omr${questionNum}_${choiceNum}`);
if(omrChoice.checked){
const selectedChoice = document.querySelector(`#select${questionNum}_${choiceNum}`);
selectedChoice.checked = true;
}
};
// 정답 체크
const checkAnswer = () => {
quizInfo.forEach((question, number) => {
const choices = question.infoChoice; // 정답지의 보기
const userChoice = getSelectChoice(number); // 사용자가 체크한 정답
const cbtQuestion = document.querySelector(`.cbt:nth-child(${number +1})`);
const cbtDesc = cbtQuestion.querySelector(".cbt__desc");
const cbtAnswer = cbtQuestion.querySelector(".cbt__answer");
if(userChoice !== -1){
const selectedChoice = choices[userChoice-1];
if(selectedChoice === question.infoAnswer){
quizCorrect++;
cbtQuestion.classList.add('good');
} else {
cbtQuestion.classList.add('bad');
cbtDesc.classList.remove('none');
cbtAnswer.classList.remove('none');
}
}
// else { // 정답이 체크되지 않은 경우
// const selectedChoice = choices[userChoice-1];
// cbtDesc.classList.remove('none');
// cbtAnswer.classList.remove('none');
// if(selectedChoice === question.infoAnswer){
// quizScore++;
// quizCorrect++;
// cbtQuestion.classList.add('good');
// } else {
// cbtQuestion.classList.add('bad');
// cbtDesc.classList.remove('none');
// cbtAnswer.classList.remove('none');
// }
// }
});
quizScore = (quizCorrect/quizInfo.length)*100;
console.log(quizScore);
alert(`전체 ${quizInfo.length}문제 중에 ${quizCorrect}개를 맞추었습니다. 당신의 점수는 ${quizScore.toFixed(2)}입니다.`)
}
// 선택된 보기의 인덱스 가져오기
const getSelectChoice = (questionNum) => {
const choices = document.querySelectorAll(`input[name="select${questionNum}"]:checked`);
if(choices.length === 0){
return -1; // 체크하지 않은 문제
alert("풀지 않은 문제가 있습니다. 다시 한 번 확인해주세요.")
} else {
return parseInt(choices[0].value.split('_')[1]);
}
}
// 페이지가 로드된 후 실행
document.addEventListener("DOMContentLoaded", () => {
fetchQuiz("gineungsaJC2005_02", "정보처리기능사 2005년 2회");
// 문제 선택
cbtSelect1.addEventListener("change", handleSelectChange);
cbtSelect2.addEventListener("change", handleSelectChange);
// 시작하기 버튼
cbtBoxStart.addEventListener("click", () => {
// 이름이 입력되었는지 확인해야 함.
const palyerName = cbtSelectInput.value.trim();
if(palyerName === ""){
alert("이름을 입력해야 시작하실 수 있습니다.")
} else {
alert("제한 시간은 60분이며, 확인을 누르면 바로 시작합니다.");
cbtBox.classList.add("none");
cbtWrap.classList.remove("none");
cbtName.innerHTML = palyerName;
startTimer();
}
});
// 정답 제출하기 버튼
cbtSubmit.addEventListener(("click"), () => {
// checkAnswer();
// 모든 문제에 대한 체크 여부를 확인
const allQuestionCheaked = quizInfo.every((_, number) => {
return getSelectChoice(number) !== -1;
});
if(allQuestionCheaked){
checkAnswer();
cbtGiveup.classList.add("none");
cbtSubmit.classList.add("none");
cbtAgain.classList.remove("none");
clearInterval(timerInterval);
} else {
alert("모든 문제에 대한 답을 선택해야 합니다. 체크되지 않은 문제가 있습니다. 정답과 해설을 보고 싶다면 포기하기 버튼을 눌러주세요.");
}
});
// 포기하기 버튼
// cbtGiveup.addEventListener(("click"), () => {
// alert("확인을 누르시면 정답과 해설이 나타납니다.");
// // checkAnswer();
// cbtGiveup.classList.add("none");
// });
cbtGiveup.addEventListener(("click"), () => {
alert("확인을 누르시면 정답과 해설이 나타납니다.");
// checkAnswer();
// 각 문제에 대한 정답과 해설 표시
quizInfo.forEach((question, number) => {
const cbtQuestion = document.querySelector(`.cbt:nth-child(${number +1})`);
const cbtDesc = cbtQuestion.querySelector(".cbt__desc");
const cbtAnswer = cbtQuestion.querySelector(".cbt__answer");
cbtQuestion.classList.add("bad");
cbtDesc.classList.remove("none");
cbtAnswer.classList.remove("none");
});
// 포기하기 버튼 숨김
cbtGiveup.classList.add("none");
cbtSubmit.classList.add("none");
cbtAgain.classList.remove("none");
// 시간 정지
clearInterval(timerInterval);
});
// 다시 풀기 버튼
cbtAgain.addEventListener("click", () => {
cbtBox.classList.remove("none");
cbtWrap.classList.add("none");
// 모든 정답과 해설을 숨겨야 함.
quizInfo.forEach((question, number) => {
const cbtQuestion = document.querySelector(`.cbt:nth-child(${number +1})`);
const cbtDesc = cbtQuestion.querySelector(".cbt__desc");
const cbtAnswer = cbtQuestion.querySelector(".cbt__answer");
cbtQuestion.classList.remove("good", "bad");
cbtAnswer.classList.add("none");
cbtDesc.classList.add("none");
});
// // 모든 선택된 보기 초기화
// const selectedChoice = document.querySelectorAll('input[type="radio"]"checked');
// selectedChoice.forEach(choice => {
// choice.checked = false;
// });
// // 타이머 리셋
// remainingTime = 3600;
// displayTime();
// clearInterval(timerInterval);
// // 점수와 정답 개수 초기화
// quizScore = 0;
// quizCorrect = 0;
// // 버튼 활성화
// cbtGiveup.classList.remove("none");
// cbtSubmit.classList.remove("none");
// cbtAgain.classList.add("none");
// 모든 선택된 보기 초기화
const selectedChoices = document.querySelectorAll('input[type="radio"]:checked');
selectedChoices.forEach(choice => {
choice.checked = false;
});
// 타이머 리셋
remainingTime = 3600;
displayTime();
clearInterval(timerInterval);
// 점수와 정답 개수 초기화
quizScore = 0;
quizCorrect = 0;
// 버튼 활성화
cbtGiveup.classList.remove("none");
cbtSubmit.classList.remove("none");
cbtAgain.classList.add("none");
});
});