Quiz 1

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

See the Pen Quiz Project1 by DOHAEUN (@dohaeun) on CodePen. 

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

//선택자
const question = 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");

//문제 번호 출력
questionNum.innerText = quizNum;
question.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";
})
// 문제정보
const quizNum = "1";
const quizAsk = "태그 중에서 유일하게 블록 구조를 감쌀 수 있는 태그는?";
const quizAnswer = "<a>";
const quizEx = "HTML5에서 <a> 태그는 유일하게 블록 구조를 감쌀 수 있습니다.";

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

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

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

// 정답 확인
questionBtn.click(function(){
    questionBtn.hide();
    questionAnswer.show();
    questionEx.show();
})

Quiz 2

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