Effect/Quiz Effect6 퀴즈 만들기06 / 객관식 다중형(슬라이드) 퀴즈 만들기_객관식 유형(슬라이드) 이번시간에는 객관식 유형(다중형)을 만들어보겠습니다! 이번엔 60문항이나 만들어야 하는데 일일히 html태그로 입력하기는 번거로우므로 스크립트를 잘~ 이용해서 작업해보겠습니다. 원본 소스 보기 원본 사이트 HTML 소스 문제 안의 변하는 내용들은 가변하는 값이지만 기본틀은 변함없으므로 html에서 필요한 부분(기본틀에 해당하는 요소들)만 작성합니다. 무엇이 빠지는 건지는 주석처리로 해놨으니 주석표시를 보시면서 확인해 주세요! 정답🐾 오답 입니다! 다음 문제 ≫ JAVASCRIPT 소스 if(quizInfo.length -1 == quizCount){ quizConfirm.innerHTML = "총 " + quizInfo.length +"문제 중 " + answerCou.. 2022. 8. 24. 퀴즈 만들기05/ 객관식 다중형 퀴즈 만들기_객관식 유형(다중) 이번시간에는 객관식 유형(다중형)을 만들어보겠습니다! 이번엔 60문항이나 만들어야 하는데 일일히 html태그로 입력하기는 번거로우므로 스크립트를 잘~ 이용해서 작업해보겠습니다. 원본 소스 보기 원본 사이트 HTML 소스 js를 이용해서 quiz__wrap안에 기존의 소스들을 반복해서 넣어주기 위해 안의 내용들은 제거합니다. JAVASCRIPT 소스 exam.push(``) quizWrap.innerHTML = exam.join(''); const exam = []으로 배열형식으로 exam을 지정했습니다. push()메서드는 값을 배열로 넣어주는 메서드인데요. 배열로 값이 들어가는 특성때문에 ,(쉼표)로 각각 구분이 됩니다. 그래서 저희가 원하는 기존의 소스형식대로 들어갈 .. 2022. 8. 24. 퀴즈 만들기04/객관식 문제 퀴즈 만들기_객관식 유형 이번시간에는 객관식 유형(단일형)을 만들어보겠습니다! 객관식 문항을 만들기 위해서 태그를 이용하여 작성합니다. 들어가기에 앞서서 input태그의 성질에 대해 하나만 알아보고 갈게요. 이 태그는 이용자가 체크할 시 우리 눈에 보이지는 않지만 checked라는 속성값을 부여합니다. ○ 문항 체크 ❌ ● 문항 체크 ⭕ 원본 소스 보기 1_ 문제정보 및 선택자 지정 문제정보는 기존과 같이 작성하되, 객관식이라 4개의문제가 있으므로 배열-객체-배열 구조로 작성합니다. 다중선택할 일은 없기 때문에 querySelector를 사용하되, 객관식은 4번 반복되므로 querySelectorAll을 사용하여 선택해주겠습니다. 선택자지정시 한가지 꿀팁!!! quizChoice와quizSelect는 지.. 2022. 8. 8. 퀴즈 만들기 03/ 주관식 유형(다중) 퀴즈 만들기_주관식 유형(다중) 이번시간에는 저번시간에 만들었던 주관식 퀴즈의 다중유형을 만들어보겠습니다! 문제가 여러개가 될 경우 일일히 하나하나 언제 다 입력하겠어요? 이런 불편함을 자바스크립트를 통해서 보다 쉽게 해결해 봅시다. 원본 소스 보기 1_ 문제정보 및 선택자 지정 각 문제정보를 'quizInfo'라는 배열에 입력하고 저장시킨 후 반복해서 출력해야 하기 때문에 반복문을 활용해서 작업을 할거에요. 기존과 마찬가지로 querySelector를 활용하지만 이번엔 같은 이름을 가진 요소들이 중복되므로 중복되는 요소들 중에서도 특정 n번째 요소를 선택해 줄 수 있게 하기 위해서 querySelectorAll을 활용해서 작업해 주겠습니다. // 선택자 const quizType = document.q.. 2022. 8. 5. 퀴즈 만들기02/ 주관식 유형 퀴즈 만들기_주관식 유형 이번에도 자바 스크립트를 이용해서 퀴즈를 만들어 보겠습니다. 저번시간과는 다르게 스크립트를 이용해 문제를 입력 후, 정답확인을 눌렀을 때 1. 정답 확인하기 버튼을 숨기고 정답을 출력하며 2. 정답일 경우 "정답입니다"출력, 오답일 경우 "오답입니다"를 출력 합니다. 원본 소스 보기 Javascript 영문의 경우에는 대소문자에 따라 맞는 정답도 오답이 될 수 있으므로 정답과 입력된정답값을 소문자로 변환시키는 toLowerCase()를 활용하고 공백을 제거하기 위해 trim()을 활용합니다. // 선택자 // querySelector를 이용해 각 class이름에 연결시킴 const quizType = document.querySelector(".quiz__type"); // 퀴즈.. 2022. 8. 4. 퀴즈 만들기01/ 정답 확인 유형 퀴즈 만들기_정답 확인하기 유형 오늘은 자바 스크립트를 이용해서 퀴즈를 만들어 보겠습니다. 스크립트를 이용해 문제를 입력 후, 정답확인을 눌렀을 때 정답 확인하기 버튼을 눌렀을 때 정답을 보여줍니다. 원본 소스 보기 Javascript innerHTML/innerText : html은 태그를 인식하고, text 는 말그대로 텍스트로 출력합니다. textContent()를 사용할 수 도 있지만 이 메서드는 브라우저 호환문제로 잘 쓰지 않습니다. // 선택자 // querySelector를 이용해 각 class이름에 연결시킴 const quizType = document.querySelector(".quiz__type"); // 퀴즈 종류 const quizNumber = document.querySelec.. 2022. 8. 4. 이전 1 다음 반응형
