퀴즈 이펙트07

기능사 시험

당신의 이름은 입니다.
정보처리기능사 2005년 2회 문제를 선택했습니다.
시작하시겠습니까?
총 시간은 60분이며, 60점이상 맞아야 합니다.
소스 보기
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__select__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 hendleSelectChange = (e) => {
        let selectValue = e.target.value;
        let selectText = e.target.options[e.target.selectedIndex].text;
        console.log(selectValue)

        cbtSelectTitle.innerHTML = selectText;
        cbtTitle.innerHTML = selectText + "기출문제";
        fetchQuiz(selectValue, selectText);
    };

    // 문제 가져오기
    const fetchQuiz = (value, text) => {
        fetch(`https://l-jy16.github.io/webs2024/json/${value}.json`)
        .then(res => res.json())
        .then(items => {
            quizInfo = items.map((item, index) => {
                const formattedQuiz ={
                    infoNum: index + 1,
                    inforQuestion: 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.infoChoices = choices;

                // 문제에 대한 이미지가 있다면
                if(item.hasOwnProperty("question_img")){
                    const src = "<img src='https://l-jy16.github.io/webs2024/json/img/"
                    formattedQuiz.infoQuestionImg = src + item.question_img + ".jpg' alt='정보치리가능사' />"
                }

                // 문제에 대한 보조 설명이 있다면
                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.inforQuestion}</div>
                    ${question.infoQuestionDesc ? `<div class="cbt__question__desc">${question.infoQuestionDesc}</div>` : ""}
                    ${question.infoQuestionImg ? `<div class="cbt__question__imgc">${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.infoChoices[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.infoChoices[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.infoChoices[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.infoChoices[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">1</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">2</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">3</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">4</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}분 ${formattedSeconds}초`;
    }

    //타이머 작동
    const startTimer = () => {
        timerInterval = setInterval(() => {
            if(remainingTime > 0){
                remainingTime--;

                // 시간 표시
                displayTime();

                // 내 정답
                // if(seconds<10){
                //     cbtTime.textContent = `${minutes}분 0${seconds}초`;
                // } else {
                //     cbtTime.textContent = `${minutes}분 ${seconds}초`;
                // }
                

            } else {
                clearInterval(timerInterval);   // 시간이 다 되면 타이머 중지
                alert("시간이 종료되었습니다.");
            }
        }, 1000);
    }

    // 정답 체크 표시
    const answerSelect = (el) => {
        const value = el.value.split('_');      // ['0', '2']   -> [클릭한 문제 번호, 클릭한 보기 번호]
        const questionNum = parseInt(value[0]); // 0    parseInt() -> 정수로 만들 때 사용
        const choiceNum = parseInt(value[1]);   // 2
        
        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 selectChoice = document.querySelector(`#select${questionNum}_${choiceNum}`)
            selectChoice.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 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');
                }
            }
        });

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


    // 선택된 보기의 인덱스 가져오기
    const getSelectChoice = (questionNumm) => {
        const choices = document.querySelectorAll(`input[name="select${questionNumm}"]: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", hendleSelectChange);
        cbtSelect2.addEventListener("change", hendleSelectChange);

        // 시작하기 버튼
        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();

                cbtSubmit.classList.add("none");
                cbtGiveup.classList.add("none");
                cbtAgain.classList.remove("none");
                clearInterval(timerInterval); // 시간 정지
            } else {
                alert("모든 문제에 대한 답을 선택해야 합니다. 체크 되지 않은 문제가 있습니다. 정답과 해설을 보고 싶다면 포기하기 버튼을 클릭하시오.")
            }

        })

        // 포기 버튼 클릭
        cbtGiveup.addEventListener("click", () => {
            alert("정말 포기하겠습니까? 포기를 하면 정답과 해설을 볼 수 있습니다.");
            
            // 각 문제에 대한 정답과 해설을 표시
            quizInfo.forEach((question, index) => {
                const cbtQuestion = document.querySelector(`.cbt:nth-child(${index + 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 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 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");
        });
    });
};
기능사 시험

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