Dragonball Online Goku Hand
본문 바로가기

Effect(자바스크립트 활용)/Quiz Effect 퀴즈이펙트6

"퀴즈이펙트" Quiz 06 : 객관식(여러문제) 확인하기 : 슬라이드 형식 Quiz 06. 자바스크립트를 활용하여 웹디자인기능사 필기 2013년도 5회차 문제를 통해 객관식 여러문제 확인하기를 슬라이드 형식으로 만들어봅시다! 사이트 실제 보기 원본 소스보기 코드 참고 // 문제 정보 const quizInfo = [ { answerType: "웹디자인 기능사 2013년 05회", answerNum: "1", answerAsk: "디자인 형태의 개념에서 조화(harmony)를 이루는 법칙과 거리가 먼 것은?", answerChoice: [ "균형", "대비", "통일", "색상" ], answerResult: "색상", answerEx: "조화를 이루는 법칙은 균형, 대비, 통일, 유사, 균일, 강약, 변화가 있습니다." }, { answerType: "웹디자인 기능사 2013년.. 2022. 8. 24.
"퀴즈이펙트" Quiz 05 : 객관식 60문제 유형 Quiz 05. 자바스크립트를 활용하여 웹디자인기능사 필기 2013년도 5회차 문제를 통해 객관식(여러문제) 확인하기를 점수까지 나오도록 만들어봅시다! 몇 문제 중에 몇 개가 정답인지와 점수, 합격여부를 알려주는 기능을 만들었습니다. ✽ 참고 : 100점을 60문제로 나누면 1.666・・・・이 나오는데 깔끔하게 소수점을 버리는 Math.floor()라는 메서드를 사용해보았습니다. 퀴즈 확인하기 원본 소스보기 코드 참고 //문제 정보 (밑 문제 처럼 60개 만들어야 함. 나머지는 생략함) const quizInfo = [ { answerType: "웹디자인 기능사 2013년 05회", answerNum: "1", answerAsk: "디자인 형태의 개념에서 조화(harmony)를 이루는 법칙과 거리가 먼 .. 2022. 8. 24.
"퀴즈이펙트" Quiz 04 : 객관식(한문제) 유형 Quiz 04. 자바스크립트를 활용하여 웹디자인기능사 필기 2013년도 5회차 문제를 통해 객관식 문제를 만들어봅시다! 원본 소스보기 자바스크립트 활용 ※ 객관식 문제 ※ -주관식이 아니므로 input X => quizInput없어도 됨! -문제를 출력할 때 실행문의 집합이 함수이므로 데이터가 많아질 때를 고려하여 자바스크립트에서 함수를 블록화 해주는 것이 편리한데 이 때 function updateQuiz(){}를 이용-> !!!함수를 이용했다면 반드시 마지막 }; 에 함수실행 써주어야함updateQuiz();!!! -정답 확인 시에도 함수를 실행해주는데 이 때 과정을 주의해야 한다. 1. for문을 통해 객관식 보기 수에 따라 몇 번 if문을 반복할지 정해줘야 함 2. for문 안에 if문을 쓸 때 .. 2022. 8. 8.
"퀴즈이펙트" Quiz 03 : 여러 개의 주관식 유형 Quiz 03. 자바스크립트를 활용하여 웹디자인기능사 필기 2014년도 1회차 4개의 문제를 만들어봅시다! 원본 소스보기 자바스크립트 활용 ※ 주관식 문제 ※ -input 활용 => quizInput (주관식 답을 넣어주기 위함) -for문 또는 forEach문을 통해 데이터가 많을 때를 고려해서 사용!(중요) -if문 활용 => 정답인지 아닌지에 대한 확인 1. 선택자를 지정해준 후 문제 정보를 적어줍니다. 2. 그 후 문제 출력을 위해 선택자와 문제 정보를 연결해줍니다. 이 때 textContent를 사용해 줍니다. 여러 데이터를 저장하기 위해서는 for문이나 forEach문을 활용해줍니다. 3. 정답을 숨겨놓기 위해서 정답(quizResult)를 quizResult.style.diplay = "no.. 2022. 8. 5.
"퀴즈이펙트" Quiz 02 : 주관식 유형 Quiz 02. 자바스크립트를 활용하여 Quiz 01과는 다른 주관식 퀴즈를 만들어 봅시다. 원본 소스보기 자바스크립트 활용 ※ 주관식 문제 ※ -input 활용 => quizInput (주관식 답을 넣어주기 위함) -if문 활용 => 정답인지 아닌지에 대한 확인 1. 선택자를 지정해준 후 문제 정보를 적어줍니다. 2. 그 후 문제 출력을 위해 선택자와 문제 정보를 연결해줍니다. 이 때 textContent를 사용해 줍니다. 3. 정답을 숨겨놓기 위해서 정답(quizResult)를 quizResult.style.diplay = "none"으로 숨겨줍니다. 4. 정답 확인을 위해 사용자의 정답이 필요한데 이를 userWord라고 지정해줍니다. 5. if문을 활용하여 정답이었을 때와 정답이 아닐 때를 구분지.. 2022. 8. 4.
"퀴즈이펙트" Quiz 01 : 정답 확인하기 유형 Quiz 01. 자바스크립트를 활용하여 퀴즈를 만들어 봅시다. 원본 소스보기 자바스크립트 활용 1. 선택자를 먼저 지정해주고 문제 정보를 정리해준 후 문제 출력을 위해 선택자와 문제 정보를 innerText를 이용하여 문제를 출력해줍니다. 2. 정답을 확인하기 위한 버튼과 정답을 확인한 후의 화면을 디자인해줍니다. 이 때 정답을 확인하기 위해서 클릭하는 효과로 이벤트 객체인 addEventListener()메서드를 활용해 줍니다. //선택자 const quizType = document.querySelector(".quiz_type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz_question .number"); //퀴즈 번호 const qui.. 2022. 8. 4.

티스토리툴바