퀴즈 문제 만들기02

퀴즈 주관식 유형

자바스크립트를 이용하여 웹디자인기능사 필기문제를 주관식 유형 퀴즈로 제작해보기!

---

주관식 유형으로 제작한 자바스크립트 소스

퀴즈박스의 번호, 퀴즈 문제, 답 등을 모두 자바스크립트를 통해 보여준다.
함수와 if문을 통해 사용자가 답을 작성할 경우 정답 or 오답에 대한 이벤트가 실행되도록 한다.

//선택자
const quizType = document.querySelector(".quiz__type"); //퀴즈종류
const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호
const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문
const quizConfirm = document.querySelector(".quiz__answer .confirm"); //퀴즈 확인 버튼
const quizResult = document.querySelector(".quiz__answer .result"); //정답 결과
const quizInput = document.querySelector(".quiz__answer .input"); //사용자 정답
const quizView = document.querySelector(".quiz__view"); //강아지

//문제정보
const answerType = "웹디자인기능사";
const answerNum = "2";
const answerAsk = "기업의 새로운 이념 구축에 필요한 이미지와 커뮤니케이션 시스템을 의도적, 계획적으로 만들어내는 기업 이미지 통합 전략은?";
let answerResult = "CIP";

//문제출력
quizType.innerText = answerType;
quizNumber.innerText = answerNum + ". ";
quizAsk.textContent = answerAsk; // textContent와 innerText는 같은 실행문이다. 
quizResult.textContent = "정답은 : " + answerResult + " 입니다.";

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

//정답확인
// quizConfirm.addEventListener("click", () => {}); 꼭 한문장으로 먼저 쓴 뒤 선언해주기 
//정답을 클릭했을 때 정답 실행 화살표 함수로!
quizConfirm.addEventListener("click", () => {
    //css스타일을 한 번에 작성하여 정답 오답 모두 실행되도록 한다. (if문에 일일히 주지 않아도 된다.)
    quizInput.style.display = "none"; // 인풋박스를 숨기기
    quizResult.style.display = "block"; //버튼을 클릭할 경우 정답 나타내기
    quizConfirm.style.display = "none"; //정답확인버튼 숨기기

    //사용자 정답
    //value값을 적으면 사용자가 작성한 답을 확인할 수 있다.
    const userWord = quizInput.value.toLowerCase().trim();
    answerResult = answerResult.toLowerCase().trim(); //소문자로 변환 및 여백을 없애준다. 

    //사용자 정답 == 문제정답
    if (userWord == answerResult) {
        //정답일 때
        quizView.classList.add("like");
    } else {
        //오답일 때
        quizView.classList.add("dislike");
    }
});

!기억해야 할 문법!

사용자가 소문자 및 여백을 포함 작성해도 정답처리가 될 수 있도록 해준다.

const userWord = quizInput.value.toLowerCase().trim();
answerResult = answerResult.toLowerCase().trim();

화살표 함수로 버튼을 클릭했을 때 이벤트를 실행해준다.

quizConfirm.addEventListener( "click", () => {}); 

사용자의 답이 정답 일 경우 강아지가 웃으며, 오답일 경우 울상짓는다.

if (userWord == answerResult) {
    //정답일 때
    quizView.classList.add("like");
} else {
    //오답일 때
    quizView.classList.add("dislike");
}

요소에 텍스트 설정하기

innerText()
textContent() //둘 다 같은 표현이다.

---

결과보기

원본 사이트 보기ß