여러문제3 QUIZ | 문제 만들기 | 방법 06 | 슬라이드 형식 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 객관식(여러문항); 슬라이드 형식 형식으로 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! + 정답 확인 버튼을 누를 경우, 문제 카운트수가 1씩 증가되며 그에 따라 다음 문제로 체인지 + 동시에 맞고 틀림을 알려줬던 강아지의 모습도 원래대로 돌리기 위해 like 와 dislike 제거 + 마지막 문제에 도달했을 경우 총 몇문제중 얼만큼 맞췄는지 표시 2022. 8. 24. QUIZ | 문제 만들기 | 방법 05 | 점수 확인 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 객관식(여러문항); 점수확인 형식으로 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! const divBox = document.createElement("div"); quizSelectsWrap.appendChild(divBox).innerHTML = `${question.answerEx}`; + 오답일 경우 div 박스를 만들고 quizSelectsWrap의 자식요소로 넣어 해설이 뜨도록 설정 quizConfirm.textContent = `${quizScore < 36 ? "총 " + quizInfo.length + "문제 중에 " + quizScore + "문제를 맞추었습니다. 결과는 탈락입니다!" : "총 " + quizInfo.len.. 2022. 8. 24. 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. 이전 1 다음
