quiz 02

quiz 02

정답을 적어서 맞으면 "맞았습니다!" 정답이 틀리면 "틀렸습니다!"

선택자

const quizType = document.querySelector(".quiz__type");   //퀴즈종류
const quizNum = 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"); //강아지

문제 정보

let변하는 값

const answeType = "웹디자인기능사";
const answerNum = "2";
const answerask = "기업의 새로운 이념 구축에 필요한 커뮤니케이션 시스템을 의도적, 계획적으로 만들어내는 기업이미지 통합 전력은 무엇인가요?"
let answerResult = "CIP";

문제 출력

toLowerCase 소문자로 바꿔줌

quizType.innerText = answeType;
quizNum.innerText = answerNum + ".";
quizask.innerText = answerask;
quizResult.innerText ="정답은 : " + answerResult.toLowerCase() + "입니다.";

정답 숨기기

quizResult.style.display = "none";

정답 확인

quizconfirm.addEventListener("click", () => {
quizinput.style.display = "none";
quizResult.style.display = "block";
quizconfirm.style.display = "none";

사용자 정답

toLowerCase 소문자로 바꿔줌 trim 여백

const userWord = quizinput.value.toLowerCase().trim();
answerResult = answerResult.toLowerCase().trim(); //변하는 값('='우변을 좌변으로?)
// console.log(userWord)
// console.log(answerResult)

사용자 정답 == 문제 정답

if (userWord == answerResult) {
//정답 일때
quizview.classList.add("like");
// alert("정답입니다.")
} else {
//오답 일때
quizview.classList.add("dislike");
// alert("오답입니다.")
}
});  //정답버튼을 클릭 했을 때

원본 소스 보기