본문 바로가기

Effect/Quiz Effect6

[Quiz Effect] 퀴즈 이펙트 06 - 슬라이드 형식 퀴즈 만들기 06 : 객관식(여러 문제) 유형 : 슬라이드 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다! 변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다! 문제 정보·선택자 생성 문제 정보를 배열 안의 객체 형태로 작성해준다. 다른 퀴즈 효과와는 달리 answerResult에 번호가 아닌 answerChoice에 있는 정답 그 자체를 그대로 똑같이 입력해준다. 필요한 const 상수를 생성해준 다음 연결해주는 작업까지 마.. 2022. 8. 24.

[Quiz Effect] 퀴즈 이펙트 05 - 2013년 4회 웹디자인기능사 기출문제 풀어보기 퀴즈 만들기 05 : 2013년 4회 웹디자인기능사 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다! 변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다! JS 소스 다섯번째 객관식(여러 문제) 유형의 자바스크립트 소스와 부연 설명(주석 처리됨)이다. 기존 문제 풀이 기능에 총 문제수와 정답 개수, 총 점수, 합격 여부 등을 표시하는 기능을 추가하자. HTML과 CSS 소스를 함께 보고 싶다면 맨 아래의 '원본 소스 보기' 버튼.. 2022. 8. 24.

[Quiz Effect] 퀴즈 이펙트 04 - 객관식(한 문제) 유형 퀴즈 만들기 04 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다! 변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다! 객관식 유형 네 번째 주관식(여러 문제) 유형의 자바스크립트 소스와 부연 설명(주석 처리됨)이다. HTML과 CSS 소스를 함께 보고 싶다면 맨 아래의 '원본 소스 보기' 버튼을 누를 것. // 선택자 // quizChoice와 quizSelect는 총 4개이므로 뒤에 All을 붙여준다. const quizT.. 2022. 8. 8.

[Quiz Effect] 퀴즈 이펙트 03 - 주관식(여러 문제) 유형 퀴즈 만들기 03 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다! 변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다! 주관식(여러 문제) 유형 세 번째 주관식(여러 문제) 유형의 자바스크립트 소스와 부연 설명(주석 처리됨)이다. HTML과 CSS 소스를 함께 보고 싶다면 맨 아래의 '원본 소스 보기' 버튼을 누를 것. // 선택자 : 상수 const를 필요한 만큼 선언한 다음 HTML 영역의 div, 시맨틱 태그 등의 Cla.. 2022. 8. 5.

[Quiz Effect] 퀴즈 이펙트 02 - 주관식 유형 퀴즈 만들기 02 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다! 변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다! 주관식 유형 두번째 주관식 유형의 자바스크립트 소스와 부연 설명(주석 처리됨)이다. HTML과 CSS 소스를 함께 보고 싶다면 맨 아래의 '원본 소스 보기' 버튼을 누를 것. // 선택자 : 상수 const를 필요한 만큼 선언한 다음 HTML 영역의 div, 시맨틱 태그 등의 Class명과 연결시킨다. //c.. 2022. 8. 4.

[Quiz Effect] 퀴즈 이펙트 01 - 정답 확인하기 유형 퀴즈 만들기 01 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다! 변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다! 정답 확인하기 유형 첫번째 정답 확인하기 유형의 자바스크립트 소스와 부연 설명(주석 처리됨)이다. HTML과 CSS 소스를 함께 보고 싶다면 맨 아래의 '원본 소스 보기' 버튼을 누를 것. // 선택자 : 상수 const를 필요한 만큼 선언한 다음 HTML 영역의 div, 시맨틱 태그 등의 Class명과 연결.. 2022. 8. 4.

이전 1 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바