01. 퀴즈 이펙트 : 정답 확인하기 유형
정답 확인 버튼을 누르면 정답이 나오는 효과입니다
- 데이터 저장하기 : 변수
- querySelector() : HTML 문서 내에서 특정 선택자를 가진 요소를 찾아 해당 요소의 참조를 반환하는 역할을 하는 메서드이다.
- innterText: 텍스트 컨텐츠를 가져오거나 설정하기 위한 속성.
- .style.속성(ex. display) : HTML 문서 요소의 CSS 스타일을 조작하기 위한 프로퍼티로, display가 올 경우 해당 요소의 display 속성 값을 설정하거나 가져올 수 있다.
- classlist : 요소의 클래스를 추가하거나 제거하여 스타일을 설정하는데 사용된다.
- addEventListener : 이벤트를 처리하기 위해 사용되는 메서드(Method)이며, 사용 시 HTML 요소에서 발생하는 이벤트 (클릭, 마우스 오버, 키보드 입력 등)을 감지하고 이벤트가 발생하였을 때 실행할 함수를 등록할 수 있다.
02. 퀴즈 이펙트 : 주관식 확인하기 유형
정답을 작성하고 확인 버튼을 누르면 정답이 나오는 효과입니다
- 데이터 저장하기 : 변수
- 데이터 제어하기 : if문
- trim( ): 문자열의 양쪽 끝에 있는 공백 문자(스페이스, 탭 등)를 제거하는 내장 함수이다.
- textContent() : 문서에서 텍스트 컨텐츠를 나타내는 속성이다. 변수에 저장된 문자열 값을 가져와 해당 요소의 textContent 속성에 할당한다.
- value: HTML 요소의 값을 나타내는 javascript 프로퍼티이다.
03. 퀴즈 이펙트 : 주관식 (여러 문제) 확인하기 유형
정답을 작성하면 맞는지 확인해주는 효과입니다
- 데이터 저장하기 : 배열, 객체
- 데이터 불러오기 : for문, forEach( )
- 데이터 제어하기 : if문
- querySelectorALL : 문서 내에서 지정된 선택자와 일치하는 모든 요소를 반환하는 메서드이다.
- innerHTML : 요소의 내부 HTML 컨텐츠를 나타내는 속성이다. HTML 문자열을 가져오거나 설정할 수 있다.
04. 퀴즈 이펙트 : 객관식 확인하기 유형
객관식 번호를 선택하면 정답을 확인하는 유형입니다
- 데이터 저장하기 : 배열, 객체
- 데이터 불러오기 : 배열, 객체
- 데이터 실행하기 : 함수
- 데이터 제어하기 : if문, 다중if문
05. 퀴즈 이펙트 : 객관식(여러 문제) 확인하기 유형
객관식 번호를 선택하면 정답을 확인하는 유형입니다
- 데이터 저장하기 : 배열, 객체
- 데이터 불러오기 : 배열, 객체, for문, forEach( )
- 데이터 실행하기 : 함수, 익명함수, 화살표 함수
- 데이터 제어하기 : if문, 다중if문
- 배열 객체 : push( ), join( )
- 수학 객체 : Math.ceil( )
06. 퀴즈 이펙트 : 객관식(슬라이드) 확인하기 유형
객관식 번호를 선택하면 정답을 확인하는 유형이면서 슬라이드 형식입니다.
- 데이터 저장하기 : 배열, 객체
- 데이터 불러오기 :
- 데이터 실행하기 :
- 데이터 제어하기 :
- 배열 객체 :
- 수학 객체 :
07. 퀴즈 이펙트 : 객관식(CBT) 확인하기 유형
객관식 번호를 선택하면 정답을 확인하는 유형이면서 슬라이드 형식입니다.
- 데이터 저장하기 : 배열, 객체
- 데이터 불러오기 :
- 데이터 실행하기 :
- 데이터 제어하기 :
- 배열 객체 :
- 수학 객체 :