01. 퀴즈 이펙트 : 정답 확인하기 유형
정답 확인버튼을 누르면 정답이 나오는 효과입니다.
- 데이터 저장 : 변수
- querySelector() : HTML 문서 내에서 특정 요소(element)를 선택하는 메소드입니다.
- innerText : 해당 요소의 모든 자식 요소들을 포함한 텍스트 내용을 가져오거나 설정할 수 있습니다.
- style.속성 = "속성값" : 자바스크립트에서 CSS 스타일을 표현하는 방법입니다.
- classList : 클래스를 추가하거나 제거하여 스타일을 설정하는 데 사용됩니다.
- addEventListener : 이벤트를 처리하는 함수 입니다.
02. 퀴즈 이펙트 : 주관식 확인하기 유형
정답을 적으면 맞는지 확인해주는 효과입니다.
- 데이터 저장 : 변수
- 데이터 제어하기 : if문
- trim() :문자열의 양쪽 끝에서 공백을 제거하는 방법 입니다.
- textContent :HTML 요소의 텍스트 콘텐츠를 가져오거나 설정하는 속성입니다.
- value : HTML 폼 요소의 값(value)을 가져오거나 설정하는 속성입니다.
03. 퀴즈 이펙트 : 주관식(여러문제) 확인하기 유형
정답을 선택하면 확인해주는 효과입니다.
- 데이터 저장 : 배열, 객체
- 데이터 불러오기 : for문 forEach()문
- 데이터 제어하기 : if문
- querySelectorAll() :querySelectorAll() 메소드는 자바스크립트의 Document 객체의 메소드 중 하나로, HTML 문서 내에서 특정 CSS 선택자를 사용하여 요소를 선택하고 NodeList 객체를 반환합니다. 이 메소드는 일치하는 모든 요소를 반환합니다.
- innerHTML : innerHTML은 자바스크립트에서 사용되는 속성 중 하나로, HTML 요소의 내용을 동적으로 변경할 수 있게 해줍니다.
04. 퀴즈 이펙트 : 객관식 확인하기 유형
객관식을 선택하면 정답을 확인하는 유형입니다.
- 데이터 저장하기 : 배열, 객체
- 데이터 불러오기 : 배열, 객체, for문, forEach()
- 데이터 실행하기 : 함수
- 데이터 제어하기 : if문, 다중if문
- checked :주로 HTML 폼 요소에서 사용됩니다. 체크박스, 라디오 버튼 등의 요소에서 "checked" 속성을 사용하여 해당 요소가 선택되었는지 여부를 나타냅니다.
05. 퀴즈 이펙트 : 객관식 확인하기(여러문제) 유형
객관식을 선택하면 정답을 확인하는 유형입니다.
- 데이터 저장하기 : 배열, 객체
- 데이터 불러오기 : 배열, 객체, for문, forEach()
- 데이터 실행하기 : 함수, 익명함수, 화살표 함수
- 데이터 제어하기 : if문, 다중if문
- 배열 객체 : push() :배열의 끝에 하나 이상의 요소를 추가하는 함수입니다. 이 메서드는 배열의 길이를 반환하며, 변경된 배열을 직접 수정합니다., join(): 배열의 모든 요소를 하나의 문자열로 합치는 함수입니다. 이 메서드는 구분자(separator)를 선택적으로 지정할 수 있으며, 구분자를 사용하여 요소 사이에 삽입됩니다. 기본 구분자는 쉼표(,)입니다.
- 수학 객체 : Math.ceil() :인수로 전달된 숫자보다 크거나 같은 최소 정수를 반환하는 함수입니다. 이 함수는 올림(rounding up) 연산을 수행합니다.
06. 퀴즈 이펙트 : 객관식(슬라이드) 확인하기(여러문제) 유형
객관식을 선택하면 정답을 확인하는 유형이고 슬라이드 형식으로 확인합니다.
- 데이터 저장하기 :
- 데이터 불러오기 :
- 데이터 실행하기 :
- 데이터 제어하기 :
- 배열 객체 :
- 수학 객체 :
07. 퀴즈 이펙트 : CBT 유형
객관식을 선택하는 시험 유형입니다.
- 데이터 저장하기 : json, 배열, 객체
- 데이터 불러오기 : fetch(), map(), forEach(), hasOwnProperty()
- 데이터 실행하기 : 함수, 익명함수, 화살표함수, 리턴함수, setInterval()
- 데이터 제어하기 : if문
- 배열 객체 : push(), join()
- 수학 객체 : Math.ceil(), Math.random()