퀴즈만들기 3

[javascript] 자바스크립트를 이용한 퀴즈 만들기 : 객관식 퀴즈

자바스크립트를 이용한 퀴즈 만들기 : 객관식 퀴즈 자바스크립트를 이용하여 슬라이드형 객관식 문제를 만들어 보았습니다. HTML과 CSS, SCRIPT를 각각 살펴보면서 어떻게 만들었는지 살펴보겠습니다. ✈. 퀴즈 완성화면 정보처리기능사 문제입니다. 같이 풀어볼까요? ✈. HTML Quiz 객관식 확인(슬라이드)하기(여러문제) 유형 : 슬라이드 1 2 3 4 5 6 정답입니다! 틀렸습니다! 다음문제 설명 aimee00418@gmail.com 🏁. POINT ✈. JAVASCRIPT :문제정보 //문제정보 // 이렇게 이미지 넣기 const quizInfo = [ { infoType: "정보처리 기능사", infoTime: "2009년 7월 12일 5회", infoNumber: "20090501", info..

WEB/JAVASCRIPT 2023.03.27

[javascript] QUIZ : 객관식 문제 만들기

QUIZ : 객관식 문제 만들기 객관식 퀴즈를 만들어 보려고 합니다.(웹디자인 기능사 문제 입니다) 순서. ✈. 객관식 퀴즈 화면을 만들고 ✈. 답을 체크하면, ✈. 정답과 해설이 나오고, ✈. 정답이면 강아지가 웃고, ✈. 오답이면 강아지가 우는 퀴즈를 만들어 보겠습니다! ✈객관식 퀴즈 화면 만들기 1. 먼저 보여져야 할 화면을 디자인 합니다. 2. HTML으로 구조를 작성해 줍니다. 3. CSS로 디자인을 적용해 주고(컬러와 글씨체 등) 4. JAVASCRIPT로 퀴즈의 정보를 담은 스크립트를 넣어줍니다. 🏁. HTML : 구조를 작성해 줍니다. 정답입니다! 틀렸습니다! 정답확인하기 설명 🏁. CSS : 디자인을 적용해 줍니다. /* header */ #header { background-color:..

WEB/JAVASCRIPT 2023.03.18

[javascript] 퀴즈 이펙트 : 퀴즈 내고 맞추는 페이지 만들기

퀴즈 이펙트 : 퀴즈 내고 맞추는 페이지 만들기 퀴즈를 푸는 사이트를 만들어 보겠습니다. HTML/ CSS/ JAVASCRIPT를 활용하여 만들었습니다. 목적은 자바스크립트로 문제를 저장하고 문제에 맞는 텍스트를 출력할 수 있도록 만들었습니다. HTML Quiz 정답 확인하기 유형 . 정답확인하기 연변대비 aimee00418@gmail.com CSS_공통 리셋 /* reset css */ @import url('https://webfontworld.github.io/neodgm/NeoDunggeunmo.css'); @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontworld...

WEB/JAVASCRIPT 2023.03.08
반응형