MINJEONG

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

jQuery

//선택자
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();
});

JavaScript

//선택자
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

//선택자
const questionAsk = $(".question");
const questionNum = $(".num");
const questionBtn = $(".confirm-btn");
const questionAnswer = $(".confirm-answer");
const questionEx = $(".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 값을 이용합니다."
}];

//문제출력
// questionAsk.eq(0).html(quizInfo[0].quizAsk);
// questionAsk.eq(1).html(quizInfo[1].quizAsk);
// questionAsk.eq(2).html(quizInfo[2].quizAsk);
// questionNum.eq(0).html(quizInfo[0].quizNum);
// questionNum.eq(1).html(quizInfo[1].quizNum);
// questionNum.eq(2).html(quizInfo[2].quizNum);
// questionAnswer.eq(0).html(quizInfo[0].quizAnswer);
// questionAnswer.eq(1).html(quizInfo[1].quizAnswer);
// questionAnswer.eq(2).html(quizInfo[2].quizAnswer);
// questionEx.eq(0).html(quizInfo[0].quizEx);
// questionEx.eq(1).html(quizInfo[1].quizEx);
// questionEx.eq(2).html(quizInfo[2].quizEx);

//for문
// for(let i=0; i<quizInfo.length; i++){
//     questionAsk.eq(i).html(quizInfo[i].quizAsk);
//     questionNum.eq(i).html(quizInfo[i].quizNum);
//     questionAnswer.eq(i).html(quizInfo[i].quizAnswer);
//     questionEx.eq(i).html(quizInfo[i].quizEx);
// }

//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).hide();
    $(this).nextAll().show();
});

JavaScript

//선택자
const questionquiz = document.querySelectorAll(".quiz");
const questionAsk = document.querySelectorAll(".question");
const questionNum = document.querySelectorAll(".num");
const questionBtn = document.querySelectorAll(".confirm-btn");
const cinfirmBottom = document.querySelectorAll(".cinfirm-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 값을 이용합니다."
}];

//문제 출력
// questionNum[0].innerHTML= quizInfo[0].quizNum;
// questionNum[1].innerHTML= quizInfo[1].quizNum;
// questionNum[2].innerHTML= quizInfo[2].quizNum;

// questionAsk[0].innerHTML= quizInfo[0].quizAsk;
// questionAsk[1].innerHTML= quizInfo[1].quizAsk;
// questionAsk[2].innerHTML= quizInfo[2].quizAsk;

// questionAnswer[0].innerHTML= quizInfo[0].quizAnswer;
// questionAnswer[1].innerHTML= quizInfo[1].quizAnswer;
// questionAnswer[2].innerHTML= quizInfo[2].quizAnswer;

// questionEx[0].innerHTML= quizInfo[0].quizEx;
// questionEx[1].innerHTML= quizInfo[1].quizEx;
// questionEx[2].innerHTML= quizInfo[2].quizEx;

//for문
// for(let i = 0; i<quizInfo.length; i++){
//     questionNum[i].innerHTML= quizInfo[i].quizNum;
//     questionAsk[i].innerHTML= quizInfo[i].quizAsk;
//     questionAnswer[i].innerHTML= quizInfo[i].quizAnswer;
//     questionEx[i].innerHTML= quizInfo[i].quizEx;
// }

//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<quizInfo.length; i++){
    cinfirmBottom[i].style.display = "none";
}

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

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

jQuery

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

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

//문제출력
function updataQuiz(){
    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();
};
updataQuiz();

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

JavaScript

//선택자
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 questionBottom = document.querySelector(".confirm-bottom");
const questionSelect = document.querySelectorAll(".select");
const questionChoice = document.querySelectorAll(".choice")

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

//문제출력
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 answeQuiz(){
    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",answeQuiz);

gameEffect Reference v1.0 </doc>

Quiz1

jQuery

JavaScript

Quiz2

jQuery

JavaScript

Quiz3

jQuery

JavaScript