퀴즈이팩트4 QUIZ | 문제 만들기 | 방법 04 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 객관식(한문항) 형식으로 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! 문제/보기 출력 | 함수는 실행문으로 여러 실행문을 모아 정리해 줄 수 있습니다. 보기 출력 | 4개가 있기 때문에 반복문을 사용하여 출력해줍니다. 정답 확인 | 사용자가 어떤 답을 선택했는지 확인 > 사용자가 선택한 답과 정답 일치 여부 확인 > 일치하면 정답표시/ 그렇지 않으면 오답과 해설표시 2022. 8. 8. QUIZ | 문제 만들기 | 방법 03 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 주관식(여러문항) 형식으로 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! #1. forEach( )는 순서를 인식하기 때문에 괄호 안에 i만 쓰면 요소로 인식합니다. forEach(e, i)로 써야 index 값으로 인식 할 수 있습니다. #2. 버튼이 여러개일 경우 또한 여러개가 있다는 것을 알려주고 실행해야 됩니다. 버튼이 한개일 경우 quizConfirm.addEventListener("click", () => { 버튼이 여러개일 경우 quizConfirm.forEach((btn, num) => { btn.addEventListener("click", () => { 2022. 8. 6. QUIZ | 문제 만들기 | 방법 02 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 주관식 답변 형식으로 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! 속성값 의미 textContent innerText와 같은 기능으로 쓰이지만 띄어쓰기를 포함해 텍스트를 있는 그대로 읽는다는 점이 다릅니다. toLowerCase() 해당 문자열을 소문자로 변환시키는 속성입니다. trim() 문자열에 있는 공백을 없애주는 속성입니다. 2022. 8. 4. QUIZ | 문제 만들기 | 방법 01 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 정답 확인하기 형식으로 만들어봅시다. 원본 소스 보기 _ script를 살펴봅시다 ! 속성값 의미 innerText Element 속성으로 사용자에게 보여지는 텍스트 값을 불러오는 속성입니다. addEventListener document의 특정요소에 event를 등록하는 속성으로 이번 퀴즈에서는 click 이벤트를 사용했습니다. El.classList.add 클래스를 추가하는 속성입니다. 2022. 8. 4. 이전 1 다음
