퀴즈 에펙트07

기능사 시험

당신의 이름은 입니다.
정보처리기능사 2005년 2회 문제를 선택했습니다.
시작하겠습니다?
총 시간은 60분 이며, 60점 이상 맞아야 합격입니다.
소스보기
quizEffect07
{
    // 선택자
    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");
    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 timeInterval = "";

    // 문제 정보
    const hendleSelectChange = (e) => {

        let selectValue = e.target.value;
        let selectText = e.target.options[e.target.selectedIndex].text;

        cbtSelectTitle.innerHTML = selectText;
        cbtTitle.innerHTML = selectText + "기출문제";

        fetchQuiz(selectValue, selectText);
    }

    // 문제 가져오기
    const fetchQuiz = (value, text) => {
        fetch(`https://webstoryboy.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.infoChoices = choices;

                    // 문제에 대한 이미지가 있다면
                    if (item.hasOwnProperty("question_img")) {
                        const src = "";
                    }

                    // 문제에 대한 보조 설명이 있다면
                    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(`
            
                    ${question.infoNum}. ${question.infoQuestion}
                    ${question.infoQuestionDesc ? `${question.infoQuestionDesc}` : ''}
                    ${question.infoQuestionImg ? `${question.infoQuestionImg}` : ''}
                    
                        
                        ${question.infoChoices[0]}
                        
                        ${question.infoChoices[1]}
                        
                        ${question.infoChoices[2]}
                        
                        ${question.infoChoices[3]}
                    
                    ${question.infoAnswer}
                    ${question.infoDesc}
                
            `);

            omr.push(`
            
                    ${question.infoNum}
                    
                    1
                    
                    2
                    
                    3
                    
                    4
                
            `);
        })
        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();

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

    // 정답 체크
    const answerSelect = (el) => {
        const value = el.value.split('_');          // ['0', '2']
        const questionNum = parseInt(value[0]);     // 0
        const choiceNum = parseInt(value[1]);       // 2

        const selectedChoice = document.querySelector(`#select${questionNum}_${choiceNum}`);

        if (selectedChoice.checked) {
            const selectChoice = document.querySelector(`#omr${questionNum}_${choiceNum}`);
            selectChoice.checked = true;
        }
    }

    // OMR 체크 표시
    const answerSelect2 = (el) => {
        const value = el.value.split('_');          // ['0', '2']
        const questionNum = parseInt(value[0]);     // 0
        const choiceNum = parseInt(value[1]);       // 2

        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 = (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", 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();

                cbtGiveup.classList.add("none")
                cbtSubmit.classList.add("none");
                cbtAgain.classList.remove("none");

                clearInterval(timeInterval);
            } else {
                alert("선택되지 않은 문제가 있습니다. 모든 문제의 답을 선택해야 합니다. 정답과 해설을 보려면 포기하기 버튼을 눌러주세요.");
            }
           

        })

          // 포기하기 버튼
          cbtGiveup.addEventListener("click", () => {
            alert("정말 포기하겠습니까? 포기를 하면 정답과 해설을 볼 수 있습니다.");

            // 각 문제에 대한 정답과 해설을 표시
            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(timeInterval);
        });


            //다시 풀기 버튼
            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');

                    cbtAnswer.classList.add("none");
                    cbtDesc.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");
            });
        });
}
answlsgh95@gmail.com
기능사 시험

정보처리기능사 2005년 2회 기출문제
