Javascript_Effect34 퀴즈 만들기 - 객관식(한문제) 유형 퀴즈 효과 객관식(한문제) 유형 결과 원본 사이트 보기 body 퀴즈 보기쪽은 input type을 버튼타입으로, 각각 id 값을 select(..)로 설정하였으며 class값과 name에 select, 벨류값을(..)해서 설정하였습니다. 정답 확인하기 Javascript 선택자는 이전예시와 같으며 객관식 보기를 추가하였습니다. 문제출력은 직접작성하고 보기출력은 for문을 이용해 출력했기에 두개를 updateQuiz라는 함수로 묶어 한번에 출력하였습니다. 정답 확인쪽은 사용자가 선택한 정답과 문제 정답이 맞는지, 그다음에 그 체크된 번호와 문제 번호가 같은지를 확인하기위해 if문 안에 if문을 사용해 표시했습니다. //선택자 const quizType = document.querySelector(".qu.. 2022. 8. 8. 퀴즈 만들기 - 주관식(여러문제) 유형 퀴즈 효과 주관식(여러문제) 유형 결과 원본 사이트 보기 JavaScript 문제 출력, 정답 숨기기, 정답 확인쪽 스크립트는 문제가 2개이상 복수형태이므로 직접 텍스트를 치거나, for문을 이용하거나 forEach문을 이용해서 출력하였습니다. 자세한 설명은 주석표시로 확인하겠습니다. //선택자 //선택자 const quizType = document.querySelectorAll(".quiz__type"); //퀴즈 종류, 다중선택을위해 querySelector에 All을 붙힌다. const quizNumber = document.querySelectorAll(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelectorAll("... 2022. 8. 5. 퀴즈 만들기 - 주관식 유형 퀴즈 효과 정답 확인하기 유형 결과 원본 사이트 보기 JavaScript 정답버튼을 클릭했을 때 사용자 정답과 정답확인버튼이 사라지고 정답결과가 보이게 만들었으며, 사용자 정답을 소문자 대문자 상관없이 정답이 허용되게 하고, 여백을 없앴습니다. if문을 사용해 정답일 때 quizView에 like를 추가해 강아지가 웃게, 오답일 때 dislike를 추가해 강아지가 슬프게 만들었습니다. //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySel.. 2022. 8. 4. 퀴즈 만들기 - 정답 확인 유형 퀴즈 효과 정답 확인하기 유형 결과 원본 사이트 보기 JavaScript 각각의 선택자를 상수로 선언한뒤에 innerText를 이용해 출력하고, 정답 확인하기 버튼을 클릭했을 때 event를 걸어줍니다. //선택자 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 .confi.. 2022. 8. 4. 이전 1 2 다음
