본문 바로가기

퀴즈효과6

자바스크립트 퀴즈 효과 : 객관식(여러 문제 유형) : 슬라이드 형식 자바스크립트 : 퀴즈 효과 : 슬라이드 형식 자바스크립트의 다양한 효과들 중, 퀴즈를 맞힐 수 있는 퀴즈 효과입니다. 그 중에서도, 객관식 정답을 선택하고, '다음 문제' 버튼을 누르면 다음 문제로 이동하는 슬라이드 형식으로 퀴즈를 작업했습니다. 객관식(여러 문제) 유형 : 슬라이드 형식 예시는 웹디자인기능사의 필기 시험 문제입니다. 문제의 정답을 맞히면 문구가 나타나며 강아지 애니메이션이 기뻐하고, 정답을 맞히지 못하면 슬퍼하는 애니메이션으로 입력값에 따라 다른 결과가 나타납니다. 문제를 다 푼 뒤 '정답 확인하기' 버튼을 클릭하면 맞힌 문제의 갯수와 점수, 합/불합격 여부가 나타납니다. // 문제 정보 const quizInfo = [ { answerType: "웹디자인기능사 2013년 01회", a.. 2022. 8. 24.

자바스크립트 퀴즈 효과 : 객관식(여러 문제) 유형 : 웹디자인기능사 2013년 2회 기출 60문제 자바스크립트 : 퀴즈 효과 : 웹디자인기능사 2015년 2회 기출 문제 자바스크립트의 다양한 효과들 중, 퀴즈를 맞힐 수 있는 퀴즈 효과입니다. 그 중에서도, 여러 개의 문제의 객관식 정답을 선택하는 퀴즈 유형을 작업해 보도록 하겠습니다. 객관식(여러 문제) 유형 예시는 웹디자인기능사의 필기 시험 문제입니다. 문제의 정답을 맞히면 문구가 나타나며 강아지 애니메이션이 기뻐하고, 정답을 맞히지 못하면 슬퍼하는 애니메이션으로 입력값에 따라 다른 결과가 나타납니다. 문제를 다 푼 뒤 '정답 확인하기' 버튼을 클릭하면 맞힌 문제의 갯수와 점수, 합/불합격 여부가 나타납니다. // 문제 정보 : 배열 안에 객체를 넣은 형태로 각 문제를 작성했습니다. const quizInfo = [ { answerType: "웹디.. 2022. 8. 24.

자바스크립트 퀴즈 효과 : 객관식 유형 자바스크립트 : 퀴즈 효과 자바스크립트의 다양한 효과들 중, 퀴즈를 맞힐 수 있는 퀴즈 효과입니다. 그 중에서도, 객관식 정답을 선택하는 퀴즈 유형을 작업해 보도록 하겠습니다. 객관식 유형 예시는 웹디자인기능사의 필기 시험 문제입니다. 4지선다 문제의 정답을 맞히면 문구가 나타나며 강아지 애니메이션이 기뻐하고, 정답을 맞히지 못하면 슬퍼하는 애니메이션으로 입력값에 따라 다른 결과가 나타납니다. // 선택자 const quizType = document.querySelector(".quiz__type"); // 퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); // 퀴즈 번호 const quizAsk = document... 2022. 8. 8.

자바스크립트 퀴즈 효과 : 주관식(여러 문제) 유형 자바스크립트 : 퀴즈 효과 자바스크립트의 다양한 효과들 중, 퀴즈를 맞힐 수 있는 퀴즈 효과입니다. 그 중에서도, 여러 개의 문제에 주관식 정답을 입력할 수 있는 퀴즈 유형을 작업해 보도록 하겠습니다. 주관식(여러 문제) 유형 예시는 웹디자인기능사의 필기 시험 문제입니다. 각 문제의 정답을 맞히면 문구가 나타나며 강아지 애니메이션이 기뻐하고, 정답을 맞히지 못하면 슬퍼하는 애니메이션으로 입력값에 따라 다른 결과가 나타납니다. // 선택자 const quizType = document.querySelectorAll(".quiz__type"); // 퀴즈 종류 const quizNumber = document.querySelectorAll(".quiz__question .number"); // 퀴즈 번호 c.. 2022. 8. 6.

자바스크립트 퀴즈 효과 : 주관식 유형 자바스크립트 : 퀴즈 효과 자바스크립트의 다양한 효과들 중, 퀴즈를 맞힐 수 있는 퀴즈 효과입니다. 그 중에서도, 주관식 정답을 입력할 수 있는 퀴즈 유형을 작업해 보도록 하겠습니다. 주관식 유형 예시는 웹디자인기능사의 필기 시험 문제입니다. 정답을 맞히면 문구가 나타나며 강아지 애니메이션이 기뻐하고, 정답을 맞히지 못하면 슬퍼하는 애니메이션으로 입력값에 따라 다른 결과가 나타납니다. // 선택자 const quizType = document.querySelector(".quiz__type"); // 퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); // 퀴즈 번호 const quizAsk = document.query.. 2022. 8. 4.

자바스크립트 퀴즈 효과 : 정답 확인하기 유형 자바스크립트 : 퀴즈 효과 자바스크립트의 다양한 효과들 중, 퀴즈를 맞힐 수 있는 퀴즈 효과입니다. 그 중에서도, 정답을 입력하지 않고 정답을 확인할 수 있는 퀴즈 유형을 작업해 보도록 하겠습니다. 정답 확인하기 유형 예시는 웹디자인기능사의 필기 시험 문제입니다. '정답 확인하기' 버튼을 누르면 문제의 정답을 확인할 수 있습니다. // 선택자 const quizType = document.querySelector(".quiz__type"); // 퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); // 퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask".. 2022. 8. 4.

이전 1 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바