Effect/Quiz Effect6 퀴즈 이펙트 6 퀴즈 이펙트 퀴즈를 풀 수 있는 페이지를 구성할 때에, 퀴즈의 유형에 맞는 다양한 이펙트를 사용하면 단조롭지 않은 생동감 넘치는 페이지를 만들 수 있습니다. 객관식(여러문제) 유형 : 슬라이드 객관식 여러문제를 나타내는 효과입니다. 객관식 문제의 보기를 고르면, 보기가 체크되어 있는지 확인한 후 보기와 정답이 같은지 확인합니다. 정답이라면 "정답" 알림을, 오답이라면 "오답" 알림을 띄웁니다. 또한, 정답 갯수를 확인하여 합격, 불합격 여부를 나타냅니다. 원본 소스 보기 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. -객관식 문제의 정보를 배열 속 객체를 활용하여 저장하였습니다. -문제를 나타내는 html코드를 자바스크립트를 이용해 넣었습니다. -자바스크립트를 이용해 문제의 각 정보를 요.. 2022. 8. 24. 퀴즈 이펙트 5 퀴즈 이펙트 퀴즈를 풀 수 있는 페이지를 구성할 때에, 퀴즈의 유형에 맞는 다양한 이펙트를 사용하면 단조롭지 않은 생동감 넘치는 페이지를 만들 수 있습니다. 객관식(여러문제) 유형 : 점수 객관식 여러문제를 나타내는 효과입니다. 객관식 문제의 보기를 고르면, 보기가 체크되어 있는지 확인한 후 보기와 정답이 같은지 확인합니다. 정답이라면 "정답" 알림을, 오답이라면 "오답" 알림을 띄웁니다. 또한, 정답 갯수를 확인하여 합격, 불합격 여부를 나타냅니다. 원본 소스 보기 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. -객관식 문제의 정보를 배열 속 객체를 활용하여 저장하였습니다. -문제를 나타내는 html코드를 자바스크립트를 이용해 넣었습니다. -자바스크립트를 이용해 문제의 각 정보를 요소에.. 2022. 8. 24. 퀴즈 이펙트 4 퀴즈 이펙트 퀴즈를 풀 수 있는 페이지를 구성할 때에, 퀴즈의 유형에 맞는 다양한 이펙트를 사용하면 단조롭지 않은 생동감 넘치는 페이지를 만들 수 있습니다. 객관식(한문제) 유형 객관식 문제의 보기를 고르면, 보기가 체크되어 있는지 확인한 후 보기와 정답이 같은지 확인합니다. 정답이라면 "정답" 알림을, 오답이라면 "오답" 알림을 띄웁니다. 원본 소스 보기 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저 선택자를 지정한 후, 각각의 선택자로 지정한 구역에 알맞은 정보를 대입하는 것과 if문을 사용하는 것은 이전에 한 유형과 같습니다. 그러나, 한문제 객관식 유형은 문제의 보기가 여러개 주어지고, 보기 내용 작성에 더 복잡한 구조가 사용된다는 점이 주관식과의 차이점 입니다. 보기 항목의.. 2022. 8. 8. 퀴즈 이펙트 3 퀴즈 이펙트 퀴즈를 풀 수 있는 페이지를 구성할 때에, 퀴즈의 유형에 맞는 다양한 이펙트를 사용하면 단조롭지 않은 생동감 넘치는 페이지를 만들 수 있습니다. 주관식(여러문제) 유형 주관식 답을 적으면 정답인지 오답인지 비교한 후, 정답/오답이라는 문구를 띄우고 오답이라면 정답을 보여주는 이펙트입니다. 주관식 유형과 비슷하지만, 이번에 작성한 코드는 주관식인 여러 문제를 페이지에 나타나게 할 때에 유용합니다. 원본 소스 보기 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저 선택자를 지정한 후, 각각의 선택자로 지정한 구역에 알맞은 정보를 대입하는 것과 if문을 사용하는 것은 이전에 한 주관식 유형과 같습니다. 그러나, 여러문제 주관식 유형은 선택자를 통해 각 문제의 부분을 선택하고, 객.. 2022. 8. 5. 퀴즈 이펙트 2 퀴즈 이펙트 퀴즈를 풀 수 있는 페이지를 구성할 때에, 퀴즈의 유형에 맞는 다양한 이펙트를 사용하면 단조롭지 않은 생동감 넘치는 페이지를 만들 수 있습니다. 주관식 유형 주관식 답을 적으면 정답인지 오답인지 비교한 후, 정답/오답이라는 문구와 함께 정답을 보여주는 이펙트입니다. 원본 소스 보기 해당 이펙트의 자바스크립트는 다음과 같습니다. 먼저 선택자를 지정한 후, 각각의 선택자로 지정한 구역에 알맞은 정보를 대입하는 것은 정답 확인하기 유형과 같습니다. 주관식 유형은 입력받은 정보를 정답과 비교하여, 정답과 오답일 때에 각각의 상황에 맞는 실행문을 작동하도록 if문을 사용합니다. //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류.. 2022. 8. 4. 퀴즈 이펙트 1 퀴즈 이펙트 퀴즈를 풀 수 있는 페이지를 구성할 때에, 퀴즈의 유형에 맞는 다양한 이펙트를 사용하면 단조롭지 않은 생동감 넘치는 페이지를 만들 수 있습니다. 정답 확인하기 유형 버튼을 누르면 정답을 보여주는 유형의 문제에 활용가능한 이펙트입니다. 원본 소스 보기 해당 이펙트의 자바스크립트는 다음과 같습니다. 먼저 선택자를 지정한 후, 각각의 선택자로 지정한 구역에 알맞은 정보를 대입합니다. //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.query.. 2022. 8. 4. 이전 1 다음 728x90
