기능사 시험

당신의 이름은 입니다.
정보처리기능사 2005년 2회 문제를 선택했습니다.
시작하겠습니까?
총 시간은 60분이며, 60점 이상 맞아야 합격입니다.

2020년 1회 정보처리기사 기출문제

남은 시간 60분 00초
수험자 :
답안지 제출하기
포기하기
다시 풀기
소스보기
Javascript 
// 선택자
const cbtWrap = document.querySelector(".cbt__wrap");
const cbtBox = document.querySelector(".cbt__box");
const cbtTitle = document.querySelector(".cbt__title");
const cbtName = document.querySelector(".cbt__name span")
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__select__input");
const cbtTime = document.querySelector(".cbt__time span");
const cbtQuiz = document.querySelector(".cbt__quiz");
const cbtOmr = document.querySelector(".cbt__omr");
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 fetchQuiz = (value, text) => {
    fetch(`https://chfhr22.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(i=choices.length -1; i>=0; i--){
                const j = Math.floor(Math.random() * (i + 1));
                [choices[i], choices[j]] = [choices[j], choices[i]];
            }
            formattedQuiz.infoChoices = choices;

            // 문제에 대한 이미지가 있다면
            if(item.hasOwnProperty("question_img")){
                const src = "정보처리기능사";
            }

            // 문제에 대한 보조 설명이 있다면
            if(item.hasOwnProperty("question_desc")){
                formattedQuiz.infoQuestionDesc = item.qustion_desc;
            }


            return formattedQuiz;
        });
        console.log(quizInfo)
        updateQuiz();
    });

};

// 문제 정보
const handleSelectChange = (e) => {
    // 텍스트, value값 가져오기
    let selectValue = e.target.value;
    let selectText = e.target.options[e.target.selectedIndex].text;
    // console.log(selectText)

    // cbtSelectTitle --> 텍스트값 주기
    cbtSelectTitle.textContent = selectText;
    fetchQuiz(selectValue, selectText);

    // 헤더에 언제 문제인지 표시
    cbtTitle.textContent = selectText + "기출문제";

}

// 문제 출력하기
const updateQuiz = () => {
    const exam = [];
    const omr = [];

    quizInfo.forEach((question, number) => {
        exam.push(`
            

                
${question.infoNum}. ${question.infoQuestion}

                ${question.infoQuestionDesc ? `
${question.infoQuestionDesc}
` : ``}
                ${question.infoQuestionImg ? `
${question.infoQuestionImg}
` : ``}
                

                    
                    
                    
                    
                    
                    
                    
                    
                

                
${question.infoAnswer}

                
${question.infoDesc}

            

        `);

        omr.push(`
            

                ${question.infoNum}
                
                
                
                
                
                
                
                
            

        `);
    });

    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}분 ${formattedSeconds}초`;
}
// 타이머
const startTimer = () => {
    timerInterval = setInterval(() => {
        if(remainingTime > 0){
            remainingTime--;       
            const minutes = Math.floor(remainingTime / 60);
            const seconds = remainingTime % 60;
            const  formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;
            
            cbtTime.textContent = `${minutes}분 ${formattedSeconds}초`;           
            
        } else {
            clearInterval(timerInterval);       // 시간이 다되면 타이머 중지
            alert("시간이 종료되었습니다.");
        }
    }, 1000);
}

// 정답 체크 표시
const answerSelect = (el) => {
    const value = el.value.split("_");      // ['0', '2']
    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("_");      // ['0', '2']
    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 checkAnswers = () => {
    quizInfo.forEach((question, number) => {
        const choices = question.infoChoices;       // 정답지의 보기
        const userChoice = getSelectChoice(number);      // 사용자가 체크한 정답
        const cbtQuestion = document.querySelector(`.cbt:nth-child(${number + 1})`);
        const cbtAnswer = cbtQuestion.querySelector(`.cbt__answer`);
        const cbtDesc = cbtQuestion.querySelector(`.cbt__desc`);

        if(userChoice !== -1){
            const selectedChoice = choices[userChoice -1];

            if(selectedChoice === question.infoAnswer){
                quizCorrect++;
                cbtQuestion.classList.add('good');
            } else {
                cbtQuestion.classList.add('bad');
                cbtAnswer.classList.remove('none');
                cbtDesc.classList.remove('none');
            }
        }
    });

    quizScore = (quizCorrect / quizInfo.length) * 100;
    alert(`전체 ${quizInfo.length}문제 중에 ${quizCorrect}개 맞추었습니다. 당신의 점수는 ${quizScore}점 입니다.`);
}

// // 포기하기
// cbtGiveup.addEventListener("click", () => {
    
//     quizInfo.forEach((question, number) => {
//         const selectedChoiceIndex = getSelectChoice(number);
//         const cbtQuestion = document.querySelector(`.cbt:nth-child(${number + 1})`);
//         const cbtAnswer = cbtQuestion.querySelector(".cbt__answer");
//         const cbtDesc = cbtQuestion.querySelector(".cbt__desc");

//         // 정답과 해설 표시
//         cbtAnswer.classList.remove('none');
//         cbtDesc.classList.remove('none');
//     });
// });

// 선택된 보기의 인덱스 가져오기
const getSelectChoice = (questionNumber) => {
    const choices = document.querySelectorAll(`input[name="select${questionNumber}"]:checked`);

    if(choices.length === 0){       
        return -1;      // 체크하지 않은 문제는 -1을 반환
    } 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 playerName = cbtSelectInput.value.trim();

        if(playerName === ""){
            alert("이름을 입력해주세요.");
        } else {
            alert("제한 시간은 60분이며, 확인을 누르면 바로 시작합니다.");
            cbtBox.classList.add("none");
            cbtWrap.classList.remove("none");
            cbtName.innerHTML = playerName;
            startTimer();
        }
    });

    // 정답 제출하기 버튼 클릭
    cbtSubmit.addEventListener("click", () => {
        // checkAnswers();

        // 모든 문제에 대한 체크 여부를 확인
        const allQuestionChecked = quizInfo.every((_, number) => {
            return getSelectChoice(number) !== -1;
        });

        if(allQuestionChecked){
            checkAnswers();

            cbtGiveup.classList.add("none");
            cbtSubmit.classList.add("none");
            cbtAgain.classList.remove("none");
            clearInterval(timerInterval);
        } else {
            alert("풀지 않은 문제가 있습니다. 정답과 해설을 보고싶다면 포기하기 버튼을 눌러주세요");
        }

    });

    // 포기하기 버튼
    cbtGiveup.addEventListener("click", () => {
        alert("정말 포기하시겠습니까?");

        // 각 문제에 대한 정답과 해설 표시
        quizInfo.forEach((question,  number) => {
            const cbtQuestion = document.querySelector(`.cbt:nth-child(${number + 1})`);
            const cbtAnswer = cbtQuestion.querySelector(`.cbt__answer`);
            const cbtDesc = cbtQuestion.querySelector(`.cbt__desc`);

            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 cbtAnswer = cbtQuestion.querySelector(`.cbt__answer`);
            const cbtDesc = cbtQuestion.querySelector(`.cbt__desc`);

            cbtQuestion.classList.remove("good", "bad");
            cbtDesc.classList.add("none");
            cbtAnswer.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");
    });
});