Effect(자바스크립트 활용)33 "퀴즈이펙트" Quiz 03 : 여러 개의 주관식 유형 Quiz 03. 자바스크립트를 활용하여 웹디자인기능사 필기 2014년도 1회차 4개의 문제를 만들어봅시다! 원본 소스보기 자바스크립트 활용 ※ 주관식 문제 ※ -input 활용 => quizInput (주관식 답을 넣어주기 위함) -for문 또는 forEach문을 통해 데이터가 많을 때를 고려해서 사용!(중요) -if문 활용 => 정답인지 아닌지에 대한 확인 1. 선택자를 지정해준 후 문제 정보를 적어줍니다. 2. 그 후 문제 출력을 위해 선택자와 문제 정보를 연결해줍니다. 이 때 textContent를 사용해 줍니다. 여러 데이터를 저장하기 위해서는 for문이나 forEach문을 활용해줍니다. 3. 정답을 숨겨놓기 위해서 정답(quizResult)를 quizResult.style.diplay = "no.. 2022. 8. 5. "퀴즈이펙트" Quiz 02 : 주관식 유형 Quiz 02. 자바스크립트를 활용하여 Quiz 01과는 다른 주관식 퀴즈를 만들어 봅시다. 원본 소스보기 자바스크립트 활용 ※ 주관식 문제 ※ -input 활용 => quizInput (주관식 답을 넣어주기 위함) -if문 활용 => 정답인지 아닌지에 대한 확인 1. 선택자를 지정해준 후 문제 정보를 적어줍니다. 2. 그 후 문제 출력을 위해 선택자와 문제 정보를 연결해줍니다. 이 때 textContent를 사용해 줍니다. 3. 정답을 숨겨놓기 위해서 정답(quizResult)를 quizResult.style.diplay = "none"으로 숨겨줍니다. 4. 정답 확인을 위해 사용자의 정답이 필요한데 이를 userWord라고 지정해줍니다. 5. if문을 활용하여 정답이었을 때와 정답이 아닐 때를 구분지.. 2022. 8. 4. "퀴즈이펙트" Quiz 01 : 정답 확인하기 유형 Quiz 01. 자바스크립트를 활용하여 퀴즈를 만들어 봅시다. 원본 소스보기 자바스크립트 활용 1. 선택자를 먼저 지정해주고 문제 정보를 정리해준 후 문제 출력을 위해 선택자와 문제 정보를 innerText를 이용하여 문제를 출력해줍니다. 2. 정답을 확인하기 위한 버튼과 정답을 확인한 후의 화면을 디자인해줍니다. 이 때 정답을 확인하기 위해서 클릭하는 효과로 이벤트 객체인 addEventListener()메서드를 활용해 줍니다. //선택자 const quizType = document.querySelector(".quiz_type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz_question .number"); //퀴즈 번호 const qui.. 2022. 8. 4. 이전 1 2 다음
