728x90
Quiz 02.
자바스크립트를 활용하여 Quiz 01과는 다른 주관식 퀴즈를 만들어 봅시다.
자바스크립트 활용
※ 주관식 문제 ※
-input 활용 => quizInput (주관식 답을 넣어주기 위함)
-if문 활용 => 정답인지 아닌지에 대한 확인
1. 선택자를 지정해준 후 문제 정보를 적어줍니다.
2. 그 후 문제 출력을 위해 선택자와 문제 정보를 연결해줍니다. 이 때 textContent를 사용해 줍니다.
3. 정답을 숨겨놓기 위해서 정답(quizResult)를 quizResult.style.diplay = "none"으로 숨겨줍니다.
4. 정답 확인을 위해 사용자의 정답이 필요한데 이를 userWord라고 지정해줍니다.
5. if문을 활용하여 정답이었을 때와 정답이 아닐 때를 구분지어 줍니다.
//선택자
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.textContent = answerType;
quizNumber.textContent = answerNum + ". ";
quizAsk.textContent = answerAsk;
quizResult.textContent = "정답 : " + answerResult;
//정답 숨기기
quizResult.style.display = "none";
//정답 확인
quizConfirm.addEventListener("click", () => {
quizInput.style.display = "none";
quizResult.style.display = "block";
quizConfirm.style.display = "none"; //정답 확인 후 확인버튼 안 나오게 하는 것
//사용자 정답
const userWord = quizInput.value.toLowerCase().trim(); //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("오답입니다.")
}
}); //정답버튼을 클릭했을 때 //function을 화살표 함수 () => {} 로 가능!
'Effect(자바스크립트 활용) > Quiz Effect 퀴즈이펙트' 카테고리의 다른 글
| "퀴즈이펙트" Quiz 06 : 객관식(여러문제) 확인하기 : 슬라이드 형식 (3) | 2022.08.24 |
|---|---|
| "퀴즈이펙트" Quiz 05 : 객관식 60문제 유형 (8) | 2022.08.24 |
| "퀴즈이펙트" Quiz 04 : 객관식(한문제) 유형 (7) | 2022.08.08 |
| "퀴즈이펙트" Quiz 03 : 여러 개의 주관식 유형 (6) | 2022.08.05 |
| "퀴즈이펙트" Quiz 01 : 정답 확인하기 유형 (9) | 2022.08.04 |
댓글