이펙트 만들기/Quiz 이펙트 만들기7 퀴즈 이펙트 만들기 06 퀴즈 만들기 자바스크립트 함수를 활용하여 퀴즈 만들기입니다. 퀴즈 만들기 06 이번 퀴즈는 객관식 슬라이드 유형입니다. 이번 유형은 보기를 선택시 바로 정답 여부를 알려주고 다음 화면으로 넘어가도록 하는 슬라이드 유형입니다. 1. 문제 정보 const quizInfo = [ { answerType: "웹디자인기능사 2009년 05회", answerNum: "1", answerAsk: "다음 중 커뮤니케이션 디자인의 설명으로 틀린 것은?" , answerChoice: [ "라틴어 'Communicare'를 어원으로 한다.", "두 개 이상의 개체가 기호를 매개로 무언가를 공유하는 것이다.", "운동과 시선을 중시하는 디자인이다.", "사람과 사람사이에 기호에 의해서 의미를 전달하는 과정이다.", ], an.. 2022. 8. 25. 퀴즈 이펙트 만들기 05 퀴즈 만들기 자바스크립트 함수를 활용하여 퀴즈 만들기입니다. 퀴즈 만들기 05 이번 퀴즈는 퀴즈 유형04의 심화 버전으로 여러개의 객관식 문항 만들기 입니다. 이번 유형은 모든 문제를 html이 아닌 스크립트로 출력하고 추가로 전체 문제 수와 정답인 문제 수를 알려주는 방식이 추가됩니다. 1. 문제 정보 const quizInfo = [ { answerType: "웹디자인기능사 2009년 05회", answerNum: "1", answerAsk: "다음 중 커뮤니케이션 디자인의 설명으로 틀린 것은?" , answerChoice: { 1: "라틴어 'Communicare'를 어원으로 한다.", 2: "두 개 이상의 개체가 기호를 매개로 무언가를 공유하는 것이다.", 3: "운동과 시선을 중시하는 디자인이다.. 2022. 8. 25. 웹디자인기능사 기출 2009년 05회 웹디자인기능사 필기 2009.09.27 2009년 05회 기출문제입니다. 2022. 8. 15. 퀴즈 이펙트 만들기 04 퀴즈 만들기 자바스크립트 함수를 활용하여 퀴즈 만들기입니다. 퀴즈 만들기 04 이번 퀴즈는 객관식 유형으로 사용자가 선택한 답안을 정답과 비교하여 출력해주는 방식입니다. 이번 퀴즈는 객관식이기 때문에 사용자가 선택하기 위한 보기 문항과 체크 방식을 만들고 보기 문항에 선택자를 지정해야합니다. 요소 매서드와 이벤트 매서드 역시 사용자가 선택한 문항을 매치하여 결과를 출력하는 방식으로 만들어야 합니다. ○ 보기 문항 만들기 //CSS .quiz__selects { margin: 5px 0; } .quiz__selects label { display: flex; } .quiz__selects label input { position: absolute; left: -9999px; } .quiz__selects .. 2022. 8. 9. 퀴즈 이펙트 만들기 03 퀴즈 만들기 자바스크립트 함수를 활용하여 퀴즈 만들기입니다. 이번 퀴즈 만들기는 퀴즈 만들기02의 심화 학습니다. 퀴즈 만들기 03 이번 퀴즈는 여러개의 주관식 문제를 만드는 유형입니다. 여러개의 문제를 만들기 위해선 객체를 활용하여 각각의 블록에 맞는 실행값을 넣어야 합니다. ○ 선택자 //선택자 const quizType = document.querySelectorAll(".quiz__type"); //퀴즈 종류 //문제가 여러개라 "All"을 넣음 const quizNumber = document.querySelectorAll(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelectorAll(".quiz__question .a.. 2022. 8. 6. 퀴즈 이펙트 만들기 02 퀴즈 만들기 자바스크립트 함수를 활용하여 퀴즈 만들기입니다. 퀴즈를 만들기 위한 3가지 요소에 대해 퀴즈 만들기01에 좀 더 자세히 적었습니다. 퀴즈 만들기 02 이번 퀴즈는 주관식 유형으로 사용자가 답안을 입력이 정답과 매치해 결과를 보여주는 방식입니다. 주관식 유형은 사용자가 답안을 적기 위한 input과 정답을 매칭하기 위한 방법이 필요합니다. ○ 스크립트 코드 //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".qu.. 2022. 8. 4. 퀴즈 이펙트 만들기 01 퀴즈 만들기 자바스크립트 함수를 활용하여 퀴즈 만들기입니다. 퀴즈 만들기 01 이번 퀴즈는 정답 확인하기 유형으로 정답 확인 클릭 시 정답을 보여주는 간단한 형태입니다. HTML과 CSS로 만들어놓은 틀에 스크립트로 문제와 정답을 출력하기 위해서 우선 선택자를 지정해놓아야 하며, 요소 매서드와 이벤트 매서드를 활용해 지정한 선택자에 출력할 수 있습니다. ○ 선택자 //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz.. 2022. 8. 4. 이전 1 다음
