1rrock

주관식 1문제 스타일(제이쿼리/자바스크립트)

jQuery
JavaScript


    // 선택자   
    const questionAsk = $(".question");
    const questionNum = $(".num");
    const questionBtn = $(".confirm-btn");
    const questionAnswer = $(".confirm-answer");
    const questionEx = $(".confirm-ex");

    // 문제정보
    const quizNum = 1;
    const quizAsk = "태그 중에서 유일하게 블록구조를 감쌀 수 있는 태그는?";
    const quizAnswer = "<a>";
    const quizEx = "HTML5에서 <a> 태그는 유일하게 블록 구조를 감쌀 수 있습니다.";

    // 문제 출력
    questionNum.html(quizNum);
    questionAsk.html(quizAsk);
    questionAnswer.html(quizAnswer);
    questionEx.html(quizEx);

    // 정답 숨기기
    questionAnswer.hide();
    questionEx.hide();

    // 정답 확인
    // 버튼을 누르면 버튼은 사라지고 정답과 해설은 나타나게..
    questionBtn.click(function(){
        questionBtn.hide();
        questionAnswer.show();
        questionEx.show();
    });

   
    // 선택자
    const questionAsk = document.querySelector(".question");
    const questionNum = document.querySelector(".num");
    const questionBtn = document.querySelector(".confirm-btn");
    const questionAnswer = document.querySelector(".confirm-answer");
    const questionEx = document.querySelector(".confirm-ex");

    // 문제정보
    const quizNum = 1;
    const quizAsk = "태그 중에서 유일하게 블록구조를 감쌀 수 있는 태그는?";
    const quizAnswer = "<a>";
    const quizEx = "HTML5에서 <a> 태그는 유일하게 블록 구조를 감쌀 수 있습니다.";

    // 문제 출력
    questionNum.innerHTML = quizNum;
    questionAsk.innerHTML = quizAsk;
    questionAnswer.innerHTML = quizAnswer;
    questionEx.innerHTML = quizEx;

    // 정답 숨기기
    questionAnswer.style.display = "none";
    questionEx.style.display = "none";

    // 정답 확인
    // 버튼을 누르면 버튼은 사라지고 정답과 해설은 나타나게..
    questionBtn.addEventListener("click",function(){
        questionBtn.style.display = "none";
        questionAnswer.style.display = "block";
        questionEx.style.display = "block";
    });

주관식 3문제 스타일(자바스크립트/제이쿼리)

jQuery
JavaScript


// 선택자
const questionAsk = $(".question");
const questionNum = $(".num");
const questionBtn = $(".confirm-btn");
const questionAnswer = $(".confirm-answer");
const questionEx = $(".confirm-ex");

// 문제 정보
// const quizNum = 1;
// const quizAsk = "태그 중에서 유일하게 블록구조를 감쌀 수 있는 태그는?";
// const quizAnswer = "<a>";
// const quizEx = "HTML5에서 <a> 태그는 유일하게 블록 구조를 감쌀 수 있습니다.";
const quizInfo = [
    {
        quizNum : 1,
        quizAsk : "글씨의 색을 변경하는 CSS 속성은 무엇인가요?",
        quizAnswer : "color 속성",
        quizEx : "글씨 속성은 color 값을 이용합니다."
    },{
        quizNum : 2,
        quizAsk : "position : relative는 언제 사용하나요?",
        quizAnswer : "color 속성",
        quizEx : "글씨 속성은 color 값을 이용합니다."
    },{
        quizNum : 3,
        quizAsk : "컨텐츠 요소를 가운데로 오게하는 방법 3가지 이상을 설명하시오.",
        quizAnswer : "color 속성",
        quizEx : "글씨 속성은 color 값을 이용합니다."
    }
];

// 문제 출력
// each()
$(".quiz-wrap .quiz").each(function(i){
    $(this).find(questionNum).html(quizInfo[i].quizNum);
    $(this).find(questionAsk).html(quizInfo[i].quizAsk);
    $(this).find(questionAnswer).html(quizInfo[i].quizAnswer);
    $(this).find(questionEx).html(quizInfo[i].quizEx);
});

// 정답 숨기기
questionAnswer.hide();
questionEx.hide();
// 정답 확인
questionBtn.click(function(){
    $(this).nextAll().show();
});

 
// 선택자
const questionQuiz = document.querySelectorAll(".quiz");
const questionAsk = document.querySelectorAll(".question");
const questionNum = document.querySelectorAll(".num");
const questionBtn = document.querySelectorAll(".confirm-btn");
const confirmBottom = document.querySelectorAll(".confirm-bottom");
const questionAnswer = document.querySelectorAll(".confirm-answer");
const questionEx = document.querySelectorAll(".confirm-ex");

// 문제 정보
const quizInfo = [
    {
        quizNum : 1,
        quizAsk : "글씨의 색을 변경하는 CSS 속성은 무엇인가요?",
        quizAnswer : "color 속성입니다.",
        quizEx : "글씨 속성은 color 값을 이용합니다."
    },{
        quizNum : 2,
        quizAsk : "position : relative는 언제 사용하나요?",
        quizAnswer : "color 속성",
        quizEx : "글씨 속성은 color 값을 이용합니다."
    },{
        quizNum : 3,
        quizAsk : "컨텐츠 요소를 가운데로 오게하는 방법 3가지 이상을 설명하시오.",
        quizAnswer : "color 속성",
        quizEx : "글씨 속성은 color 값을 이용합니다."
    }
];

// 문제 출력
// forEach
questionQuiz.forEach((elem ,index) => {
    questionNum[index].innerHTML = quizInfo[index].quizNum;
    questionAsk[index].innerHTML = quizInfo[index].quizAsk;
    questionAnswer[index].innerHTML = quizInfo[index].quizAnswer;
    questionEx[index].innerHTML = quizInfo[index].quizEx;
});

// 숨기기
for( let i=0; i < questionAsk.length; i++){
    // questionAnswer[i].style.display = "none";
    // questionEx[i].style.display = "none";
    confirmBottom[i].style.display = "none";

}

// forEach
questionBtn.forEach(elem => {
    elem.addEventListener("click",function(){
        this.style.display = "none";
        this.nextElementSibling.style.display = "block";
    });
});

객관식 퀴즈(자바스크립트/제이쿼리)

jQuery
JavaScript

// 문제정보
const quizInfo = [
    {
        quizNum : 1,
        quizAsk : "다음 중 시멘틱 태그는 무엇인가요?",
        quizChoice : ["div 태그", "h1 태그", "span 태그", "main 태그"],
        quizAnswer : "4",
        quizEx : "시멘틱 태그는 의미가 부여된 태그로서 main 태그는 사이트에서 중요한 컨텐츠에 한번만 사용할 수 있습니다." 
    }
]

// 문제출력
function updateQuiz(){
        questionNum.html(quizInfo[0].quizNum);
        questionAsk.html(quizInfo[0].quizAsk);
        questionAnswer.html(quizInfo[0].quizAnswer);
        questionEx.html(quizInfo[0].quizEx);
        // 보기 출력
        questionChoice.each(function(i){
            $(this).html(quizInfo[0].quizChoice[i]);
        });
        // 정답 감추기
        questionAnswer.hide();
        questionEx.hide();
};
updateQuiz();

// 정답확인
function answerQuiz(){
    questionSelect.each(function(index){
        if(questionSelect[index].checked == true){
            // 정답과 사용자의 정답이 일치하는지 확인
            if(questionSelect[index].value == quizInfo[0].quizAnswer){
                // 정답인 경우
                // alert("정답입니다.");
                questionAnswer.html("정답");
                questionBtn.hide();
                questionAnswer.show();
                questionEx.show();
            } else {
                // 오답인 경우
                // alert("오답입니다.");
                questionAnswer.html("오답");
                questionBtn.hide();
                questionAnswer.show();
                questionEx.show();
            }
        }
    });
};
questionBtn.on("click", answerQuiz);

// 문제 출력
function updateQuiz(){
    questionNum.innerHTML = quizInfo[0].quizNum;
    questionAsk.innerHTML = quizInfo[0].quizAsk;
    questionAnswer.innerHTML = quizInfo[0].quizAnswer;
    questionEx.innerHTML = quizInfo[0].quizEx;

    for( let i=0; i<4; i++){
        questionChoice[i].innerHTML = quizInfo[0].quizChoice[i];
    }

    // 정답 감추기
    questionAnswer.style.display = "none";
    questionEx.style.display = "none";
}
updateQuiz();

// 정답 확인
function answerQuiz() {
    for (let i=0; i<questionSelect.length; i++){
        if(questionSelect[i].checked == true){
            if(questionSelect[i].value == quizInfo[0].quizAnswer){
                // 정답입니다.
                questionAnswer.innerHTML = "정답";
                questionBtn.style.display = "none";
                questionAnswer.style.display = "block";
                questionEx.style.display = "block";
            } else {
                // 오답입니다.
                questionAnswer.innerHTML = "오답";
                questionBtn.style.display = "none";
                questionAnswer.style.display = "block";
                questionEx.style.display = "block";
            }
        }
    }
}
questionBtn.addEventListener("click", answerQuiz);

객관식 퀴즈(자바스크립트/제이쿼리)

jQuery
JavaScript

// 문제출력
function updateQuiz(){
        questionNum.html(quizInfo[0].quizNum);
        questionAsk.html(quizInfo[0].quizAsk);
        questionAnswer.html(quizInfo[0].quizAnswer);
        questionEx.html(quizInfo[0].quizEx);
        // 보기 출력
        questionChoice.each(function(i){
            $(this).html(quizInfo[0].quizChoice[i]);
        });
        // 정답 감추기
        questionAnswer.hide();
        questionEx.hide();
};
updateQuiz();

// 정답확인
function answerQuiz(){
    questionSelect.each(function(index){
        if(questionSelect[index].checked == true){
            // 정답과 사용자의 정답이 일치하는지 확인
            if(questionSelect[index].value == quizInfo[0].quizAnswer){
                // 정답인 경우
                // alert("정답입니다.");
                questionAnswer.html("정답");
                questionBtn.hide();
                questionAnswer.show();
                questionEx.show();
            } else {
                // 오답인 경우
                // alert("오답입니다.");
                questionAnswer.html("오답");
                questionBtn.hide();
                questionAnswer.show();
                questionEx.show();
            }
        }
    });
};
questionBtn.on("click", answerQuiz);

 // 문제정보
const quizInfo = [
    {
        quizNum : 1,
        quizAsk : "다음 중 시멘틱 태그는 무엇인가요?",
        quizChoice : {
            1: "<a> 태그",
            2: "<br> 태그",
            3: "<em> 태그",
            4: "<main> 태그"
        },
        quizAnswer : 4,
        quizEx : "<main> 태그는 시멘틱 태그입니다."
    },{
        quizNum : 2,
        quizAsk : "다음 중 CSS의 단위로 맞지 않는 것은 무엇인가요?",
        quizChoice : {
            1: "em",
            2: "rem",
            3: "vm",
            4: "ch"
        },
        quizAnswer : 3,
        quizEx : "vm 단위는 없습니다."
    }, {
        quizNum : 3,
        quizAsk : "다음 중 자바스크립트 언어와 관련이 없는 것은 무엇인가요?",
        quizChoice : {
            1: "react.js",
            2: "jquery.js",
            3: "vue.js",
            4: "c++"
        },
        quizAnswer : 4,
        quizEx : "c++는 자바스크립트 언어와 관련이 없습니다."
    }
]

// 문제 만들기
function updateQuiz(){
    const output = [];

    quizInfo.forEach((currentQuestion, questionNumber) => {
        output.push(`
            < 문제${currentQuestion.quizNum} >
            ${currentQuestion.quizAsk}
            
                
                    
                    ${currentQuestion.quizChoice[1]}
                
                
                    
                    ${currentQuestion.quizChoice[2]}
                
                
                    
                    ${currentQuestion.quizChoice[3]}
                
                
                    
                    ${currentQuestion.quizChoice[4]}
                
            
            
                
                    ${currentQuestion.quizAnswer}
                    ${currentQuestion.quizEx}
                
            
        `);
        questionQuiz.innerHTML = output.join(' ');
    });
}
updateQuiz();

// 결과 확인하기
function showResults(){
    const selectContainers = questionQuiz.querySelectorAll(".selects");
    const confirmContainers = questionQuiz.querySelectorAll(".confirm");
    const BottomContainers = questionQuiz.querySelectorAll(".confirm .confirm-bottom");
    let numCorrect = 0;

    quizInfo.forEach(( currentQuestion, questionNumber ) => {
        const selectContainer = selectContainers[questionNumber];
        const resultSelector = `input[name=select${questionNumber}]:checked`;
        const resultAnswer = (selectContainer.querySelector(resultSelector) || {}).value;

        if(resultAnswer == currentQuestion.quizAnswer){
            numCorrect++;
            selectContainers[questionNumber].style.color = "blue";
        } else {
            selectContainers[questionNumber].style.color = "red";
        }
        confirmContainers[questionNumber].style.height = "120px";
        BottomContainers[questionNumber].style.display = "block";
    });
    questionResult.innerHTML = `${quizInfo.length} 문제 중에 ${numCorrect} 문제를 맞추었습니다.`;
}

questionBtn.addEventListener("click", showResults)

Quiz Effect Reference v1.0 </doc>

Quiz1

Quiz2

Quiz3

Quiz4

< 문제${currentQuestion.quizNum} >