간단한 JavaScript 퀴즈를 만드는 방법 : 코드 자습서

퀴즈는 재미 있습니다! 그들은 새로운 주제에 대해 배우는 좋은 방법이며, 재미 있고 장난스러운 무언가로 청중을 참여시킬 수 있습니다. 개발자의 관점에서“JavaScript 퀴즈를 어떻게 만드는가?” 웹 개발을 배우는 사람들이 묻는 가장 일반적인 질문 중 하나입니다. 자신의 자바 스크립트 퀴즈 게임 코딩은 환상적인 학습 운동입니다. 이벤트를 처리하고, DOM을 조작하고, 사용자 입력을 처리하고, 로컬 스토리지를 사용하여 점수를 추적하는 방법을 가르쳐줍니다. 기본 퀴즈가 업 및 실행이 있으면 Pagination과 같은 고급 기능을 추가 할 수있는 모든 가능성이 있습니다. 이 튜토리얼에서는 JavaScript로 퀴즈를내는 방법을 통해 귀하의 요구에 적응하고 자신의 사이트에 추가 할 수있는 방법을 안내해 드리겠습니다. 우리가 무엇을 끝낼 지 알기를 원한다면 앞서 건너 뛰고 작동하는 JavaScript 퀴즈 코드를 볼 수 있습니다. 보다 심층적 인 JavaScript 지식과 도전에 대해서는 무료 책을 꺼내십시오 : JavaScript로 코드를 배우십시오. 시작하기 전에 알아야 할 것들 시작하기 전에 알아야 할 몇 가지 사항은 다음과 같습니다

이것은 프론트 엔드 튜토리얼입니다. 즉, 페이지의 소스 코드를 살펴 보는 방법을 아는 사람은 답을 찾을 수 있습니다. 심각한 퀴즈의 경우이 튜토리얼의 범위를 벗어난 백엔드를 통해 데이터를 처리해야합니다. 이 기사의 코드는 최신 JavaScript 구문 (ES6)을 사용합니다. 즉, 인터넷 익스플로러 버전과 호환되지 않습니다. 그러나 Microsoft Edge를 포함한 최신 브라우저에서는 잘 작동합니다.

이전 브라우저를 지원 해야하는 경우 IE8과 호환되는 JavaScript 퀴즈 자습서를 작성했습니다. 또는 ES6에서 Refresher를 원한다면 Sitepoint Premium에서 Darin Haener 가이 과정을 확인하십시오. HTML, CSS 및 JavaScript에 대한 친숙 함이 필요하지만 각 코드 라인은 개별적으로 설명됩니다.

.

1 단계 - JavaScript 퀴즈의 기본 구조

이상적으로, 우리는 퀴즈의 질문과 답변이 JavaScript 코드에 있고 스크립트가 자동으로 퀴즈 앱을 생성하도록합니다. 그렇게하면 반복적 인 마크 업을 많이 쓸 필요가 없으며 질문을 쉽게 추가하고 제거 할 수 있습니다.

이 예에서는 세 가지 주요 파일을 사용하여 프로젝트를 구성 할 것입니다.

기본 사용자 인터페이스 (UI)의 HTML 파일 스타일링을위한 CSS 파일 모든 대화식 기능을 처리하기위한 JavaScript 파일

그러나 원하는 경우 HTML 파일 내에 직접 CSS 및 JavaScript 코드를 인라인 코드로 포함시킬 수도 있습니다. HTML 및 JavaScript에서 퀴즈를 만드는 방법을 배울 때 HTML 구조가 JavaScript 로직과 어떻게 상호 작용하는지 이해하는 것이 중요합니다. 따라서 첫 번째 단계로 JavaScript 퀴즈 게임의 HTML 구조를 설정해 봅시다.

> a

퀴즈를 잡으려면 > a 답변을 제출하려면 결과를 표시하려면 > a

다음은 다음과 같습니다
• 이 구조는 JavaScript 퀴즈 템플릿의 기초 역할을하는 퀴즈 HTML 코드를 만드는 방법의 간단한 예입니다. 지금 응용 프로그램을 실행하면 "퀴즈 제출"버튼 만 나타납니다.
2 단계 - JavaScript 변수를 초기화 이제 JavaScript 문서를 사용하여 위의 html 요소를 선택하고 아래와 같은 JavaScript 퀴즈 코드에서 참조를 저장할 수 있습니다.
• 다음으로 퀴즈 앱이 필요한 것은 몇 가지 질문입니다. JavaScript 객체 리터럴을 사용하여 개별 질문과 퀴즈 앱을 구성하는 모든 질문을 보유하는 배열을 나타냅니다. 배열을 사용하면 질문을 쉽게 반복 할 수 있습니다.
원하는만큼 질문이나 답변을 자유롭게 발표하십시오.
노 질문을 사용자에게 제시하기 전에 어떤 식 으로든 질문을 정렬하려면

의 빠른 팁을 확인하십시오. 3 단계 - 퀴즈 함수를 빌드 이제 질문 목록이 있었으므로 페이지에 표시 할 수 있습니다. 이를 위해 BuildQuix ()라는 기능을 사용합니다. 다음 JavaScript 라인을 통해 작동 방식을 확인해 보겠습니다.

먼저, 질문 및 답변 선택을 포함하여 모든 HTML 출력을 포함하는 출력 변수를 만듭니다. 다음으로 우리는 각 질문에 대해 HTML을 구축하기 시작할 수 있습니다. 다음과 같은 각 질문을 반복해야합니다

간단하게, 우리는 화살표 기능을 사용하여 각 질문에 대한 작업을 수행하고 있습니다. 이것은 Foreach 루프에 있으므로 현재 값, 인덱스 (배열의 현재 항목의 위치 번호) 및 배열 자체를 매개 변수로 얻습니다. 우리는 현재 값과 인덱스 만 필요합니다. 우리의 목적을 위해 각각 CurrentQuestion과 설문지 이름을 지정할 것입니다. 이제 루프 내부의 코드를 봅시다 :

<span><span><span><div</span> id<span>="quiz"</span>></span><span><span></div</span>></span>
</span><span><span><span><button</span> id<span>="submit"</span>></span>Submit Quiz<span><span></button</span>></span>
</span><span><span><span><div</span> id<span>="results"</span>></span><span><span></div</span>></span></span>

각 질문에 대해 올바른 HTML을 생성하고 싶습니다. 따라서 첫 번째 단계는 가능한 답변 목록을 보유 할 배열을 만드는 것입니다. 다음으로, 우리는 루프를 사용하여 현재 질문에 대한 가능한 답변을 작성합니다. 각 선택마다 요소로 둘러싸인 HTML 라디오 버튼을 만들고 있습니다. 이를 통해 사용자는 답변 텍스트의 어느 곳에서나 클릭하여 해당 답을 선택할 수 있습니다. 레이블이 생략되면 사용자는 라디오 버튼 자체를 클릭해야합니다. 여기, 우리는 템플릿 리터럴을 사용하고 있습니다.이 문자는 문자열이지만 더 강력합니다. 템플릿 리터럴의 다음 기능을 사용하겠습니다.

멀티 라인 기능. 템플릿 리터럴을 사용하기 때문에 인용문 내에서 탈출 인용문을 사용할 필요가 없습니다.

문자열 보간은 다음과 같이 문자열에 바로 JavaScript 표현을 포함시킬 수 있습니다. $ {code_goes_here}.

답변 버튼 목록이 있으면 질문 html과 답변 html을 전체 출력 목록으로 푸시 할 수 있습니다. 우리는 템플릿 리터럴과 일부 내장 된 표현식을 사용하여 먼저 질문 DIV를 만들고 답을 만듭니다. Join Expression은 답변 목록을 가져 와서 답변으로 출력 할 수있는 하나의 문자열로 구성합니다. 이제 각 질문에 대해 HTML을 생성 했으므로 모든 것을 함께 합류하여 페이지에 표시 할 수 있습니다.

이제 BuildQuiz 기능이 완료되었으며 퀴즈 앱을 실행하고 표시된 질문을 볼 수 있어야합니다.

그러나 코드의 구조가 중요합니다. The Temperal Dead Zone이라 불리는 것이므로 정의되기 전에 질문 배열을 참조 할 수 없습니다. 요약하려면 이것이 올바른 구조입니다
• 4 단계 - 퀴즈 결과 표시 이 시점에서, 우리는 쇼 레이스 기능을 구축하여 답변을 루프하고 확인하고 결과를 표시하려고합니다. 이것은 성능에 따라 사용자에게 즉각적인 피드백을 제공하기 때문에 모든 퀴즈 게임 JavaScript 구현의 중요한 부분입니다. 다음은 다음에 자세히 살펴볼 기능입니다.
먼저, 우리는 퀴즈의 HTML에서 모든 답변 컨테이너를 선택합니다. 그런 다음 사용자의 현재 답변과 총 정답 수를 추적하기 위해 변수를 생성합니다.
• 이제, 우리는 각 질문을 반복하고 답을 확인할 수 있습니다.
우리는 3 단계를 사용할 것입니다 :
• HTML에서 선택한 답변을 찾으십시오 대답이 올바른 경우 발생하는 일을 처리하십시오 답이 잘못되면 발생하는 일을 처리하십시오
HTML에서 선택한 답변을 어떻게 찾는 지 더 자세히 살펴 보겠습니다.

먼저, 우리는 현재 질문에 대한 답변 컨테이너를 살펴보고 있는지 확인하고 있습니다.

. 다음 줄에서, 우리는 어떤 라디오 버튼을 확인할 수있는 CSS 선택기를 정의하고 있습니다. 그런 다음 JavaScript의 QuerySelector를 사용하여 이전에 정의 된 AnswerContainer에서 CSS 선택기를 검색합니다. 본질적으로 이것은 우리가 어떤 답변의 라디오 버튼을 확인할 것임을 의미합니다.

마지막으로 .Value를 사용하여 해당 답변의 값을 얻을 수 있습니다. 불완전한 사용자 입력을 다루는

사용자가 답을 비워두면 어떻게해야합니까? 이 경우 .Value를 사용하면 존재하지 않는 무언가의 가치를 얻을 수 없기 때문에 오류가 발생합니다. 이를 해결하기 위해 ||, 이는 빈 개체 인“OR”및 {}를 의미합니다. 이제 전반적인 진술은 다음과 같이 말합니다

선택한 답변 요소에 대한 참조를 받거나 존재하지 않는 경우 빈 개체를 사용하십시오. 첫 번째 진술에 있던 모든 것의 가치를 얻으십시오.

결과적으로 값은 사용자의 답변이거나 정의되지 않은 것입니다. 즉, 사용자는 퀴즈 앱을 충돌시키지 않고 질문을 건너 뛸 수 있습니다.

. 답변을 평가하고 결과를 표시 답변 검사 루프의 다음 진술은 올바른 답변을 처리 할 수있게 해줄 것입니다.

사용자의 답변이 올바른 선택과 일치하면 정답 수를 하나씩 늘리고 (선택적으로) 선택 세트를 녹색으로 색상하십시오. 대답이 잘못되었거나 비워지면 답변을 빨간색으로 선택하십시오 (다시 선택 사항). 답변 검사 루프가 완료되면 사용자가 올바른 몇 가지 질문을 표시 할 수 있습니다.

그리고 이제 우리는 작동하는 javaScript 퀴즈를 가지고 있습니다! 원하는 경우, IIFE (즉시 기능 표현식)에서 전체 퀴즈를 랩핑 할 수 있습니다.이 기능은 정의하자마자 실행되는 함수입니다. 이렇게하면 변수가 전역 범위를 벗어나고 퀴즈 앱이 페이지에서 실행되는 다른 스크립트를 방해하지 않도록합니다.

이제 당신은 모두 설정되어 있습니다! 질문과 답변을 추가하거나 제거하고 원하는대로 퀴즈를 자유롭게 스타일을 유지하십시오.
• 이제 응용 프로그램을 실행하는 경우 답변을 선택하고 퀴즈를 제출하여 결과를 얻을 수 있습니다.
.
5 단계 - 스타일 추가 이제 우리는 작동 퀴즈가있는 이후 스타일을 추가하여 사용자 친화적으로 만들어 봅시다. 그러나 나는 각 스타일의 세부 사항으로 들어 가지 않을 것입니다. 아래 코드를 Styles.css 파일에 직접 복사 할 수 있습니다.

이 시점에서 퀴즈는 다음과 같이 보일 수 있습니다 (작은 스타일링 포함) : 6 단계 - 페이지 매김 구현 위의 이미지에서 볼 수 있듯이 퀴즈의 질문은 차례로 주문됩니다. 답을 선택하려면 아래로 스크롤해야합니다. 이것은 세 가지 질문으로는 괜찮아 보이지만 질문의 수가 증가 할 때 대답하기 위해 고군분투하기 시작할 수 있습니다. 따라서 우리는 페이지 매김을 통해 한 번에 하나의 질문 만 보여줄 수있는 방법을 찾아야합니다.

이를 위해서는 다음과 같습니다

질문을 보여주고 숨기는 방법. Quiz를 탐색하려면

버튼

그래서 html로 시작하여 코드를 조정하겠습니다 : .

대부분의 마크 업은 이전과 동일하지만 이제 내비게이션 버튼과 퀴즈 컨테이너를 추가했습니다. 퀴즈 컨테이너는 우리가 보여줄 수있는 레이어로 질문을 배치하는 데 도움이됩니다. 다음, BuildQuiz 함수 내부에서는 방금 만든 질문과 답변 컨테이너를 보유하기 위해 클래스 슬라이드와 함께

요소를 추가해야합니다.

다음으로, 우리는 일부 CSS 포지셔닝을 사용하여 슬라이드를 서로 겹치게 만듭니다. 이 예에서는 Z- 인덱스 및 불투명도 전환을 사용하여 슬라이드가 사라지고 아웃 할 수 있습니다. CSS의 모습은 다음과 같습니다

이제 우리는 페이지 매김을 만들기 위해 JavaScript를 추가합니다. 이전과 마찬가지로 순서가 중요하므로 코드의 수정 된 구조입니다.

우리는 일부 변수로 시작하여 내비게이션 버튼에 대한 참조를 저장하고 우리가 켜져있는 슬라이드를 추적 할 수 있습니다. 위에 표시된대로 호출 후 BuildQuiz ()에 추가하십시오.
• 다음은 슬라이드를 표시하는 기능을 작성합니다. 기존 함수 (buildQuiz 및 showResults) 아래에 이것을 추가하십시오
여기에 처음 세 줄이하는 일이 있습니다 :
• 활성 슬라이드 클래스를 제거하여 현재 슬라이드를 숨 깁니다 활성 슬라이드 클래스를 추가하여 새 슬라이드를 표시하십시오 현재 슬라이드 번호를 업데이트하십시오
다음 줄은 다음 줄이 다음 JavaScript 로직을 소개합니다 :

첫 번째 슬라이드에 있으면

이전 슬라이드 버튼을 숨 깁니다. 그렇지 않으면 버튼을 표시하십시오. 마지막 슬라이드에 있으면 다음 슬라이드 버튼을 숨기고

버튼을 표시하십시오. 그렇지 않으면 다음 슬라이드 버튼을 표시하고

<span><span><span><div</span> id<span>="quiz"</span>></span><span><span></div</span>></span>
</span><span><span><span><button</span> id<span>="submit"</span>></span>Submit Quiz<span><span></button</span>></span>
</span><span><span><span><div</span> id<span>="results"</span>></span><span><span></div</span>></span></span>

버튼을 숨 깁니다.

기능을 작성한 후 즉시 ShowSlide (0)를 호출하여 첫 ​​번째 슬라이드를 표시 할 수 있습니다. 이것은 페이지 매김 코드 다음에 나와야합니다

다음으로 내비게이션 버튼을 작동시키기 위해 기능을 작성할 수 있습니다. 이들은 쇼 슬라이드 함수 아래로 들어갑니다 :

여기, 우리는 내비게이션 버튼이 이전 슬라이드와 다음 슬라이드를 표시 할 수 있도록 쇼 슬라이드 기능을 사용하고 있습니다. 마지막으로, 내비게이션 버튼을 이러한 기능에 연결해야합니다. 이것은 코드의 끝에서 나옵니다 :

이제 퀴즈에 작업 내비게이션이 있습니다! > 다음은 무엇입니까?

이제 기본 JavaScript 퀴즈 앱이 있었으므로 이제 창의력과 실험을 할 차례입니다. 다음은 시도해 볼 수있는 몇 가지 제안이 있습니다 :

<span><span><span><div</span> id<span>="quiz"</span>></span><span><span></div</span>></span>
</span><span><span><span><button</span> id<span>="submit"</span>></span>Submit Quiz<span><span></button</span>></span>
</span><span><span><span><div</span> id<span>="results"</span>></span><span><span></div</span>></span></span>

정답이나 잘못 대답에 응답하는 다른 방법을 시도하십시오.

퀴즈를 멋지게 스타일링하십시오 진행률 표시 줄을 추가하십시오 제출하기 전에 사용자가 답을 검토하도록하십시오 사용자가 답변을 제출 한 후에 대한 답변 요약을 제공합니다.

사용자가 질문 번호로 건너 뛰도록 내비게이션을 업데이트하십시오.

각 결과 수준에 대한 사용자 정의 메시지를 만듭니다. 예를 들어, 누군가 8/10 이상의 점수를 받으면 퀴즈 닌자라고 부릅니다. 소셜 미디어에서 결과를 공유하기 위해 버튼을 추가하십시오 LocalStorage를 사용하여 높은 점수를 저장하십시오 사람들이 시계를 이길 수 있는지 확인하기 위해 카운트 다운 타이머를 추가합니다.

이 기사의 개념을 프로젝트 가격 추정기 또는 소셜 "character-are-you"퀴즈와 같은 다른 용도에 적용합니다.

간단한 JavaScript 퀴즈를 만드는 방법에 대한 FAQ JavaScript 퀴즈에 더 많은 질문을 추가하려면 어떻게해야합니까?

JavaScript 퀴즈에 더 많은 질문을 추가하는 것은 간단한 프로세스입니다. JavaScript 코드의 질문 배열에 더 많은 객체를 추가해야합니다. 각 객체는 질문을 나타내며 텍스트 (질문 자체)와 응답 (가능한 답변 배열)의 두 가지 속성이 있습니다. 다음은 새로운 질문을 추가하는 방법의 예입니다.

이 예에서는 4 가지 가능한 답변으로 프랑스 수도에 대한 질문을 추가하고 있습니다. 정답에는‘정확한 : true’가 표시됩니다 퀴즈에서 질문 순서를 무작위로 무작위로 만들 수 있습니까?

질문 순서를 무작위화하면 퀴즈가 더욱 도전적이고 재미있게 만들 수 있습니다. Math.random () 함수와 결합 된 Sort () 메소드를 사용하여이를 달성 할 수 있습니다. 할 수있는 방법은 다음과 같습니다.
이 코드는 페이지가로드 될 때마다 질문 배열을 무작위로 정렬합니다. 퀴즈에 타이머를 추가 할 수 있습니까? 타이머를 추가하면 퀴즈가 더 흥미로울 수 있습니다. javaScript setInterVal () 함수를 사용하여 퀴즈에 타이머를 쉽게 추가 할 수 있습니다. 간단한 예는 다음과 같습니다.
• 이 예에서 퀴즈는 30 초 동안 지속됩니다. 타이머는 1 초마다 업데이트되며 시간이 다가 오면 경고가 표시됩니다. 사용자가 잘못되면 정답을 어떻게 표시 할 수 있습니까?
checkanswer () 함수를 수정하여 정답을 표시 할 수 있습니다. 답이 올바른지 확인하는 if 문에 다른 조항을 추가 할 수 있습니다. 할 수있는 방법은 다음과 같습니다.

• <span><span><span><div</span> id<span>="quiz"</span>></span><span><span></div</span>></span>
  </span><span><span><span><button</span> id<span>="submit"</span>></span>Submit Quiz<span><span></button</span>></span>
  </span><span><span><span><div</span> id<span>="results"</span>></span><span><span></div</span>></span></span>

  이 예에서는 사용자의 답변이 올바르지 않으면 정답으로 경고가 표시됩니다. 질문에 이미지를 추가 할 수있는 방법? 질문 객체에 '이미지'속성을 추가하여 질문에 이미지를 추가 할 수 있습니다. 그런 다음이 속성을 사용하여 HTML에 이미지를 표시 할 수 있습니다. 예는 다음과 같습니다.

  html에서는 다음과 같은 이미지를 표시 할 수 있습니다.

  및 JavaScript에서는 새로운 질문을 표시 할 때 이미지의 SRC 속성을 업데이트 할 수 있습니다.

  이 예에서는 질문이 표시되면 코끼리의 이미지가 표시됩니다.

  JavaScript 퀴즈에서 여러 정답을 어떻게 처리합니까?

  여러 정답을 처리하려면 사용자가 하나 이상의 답변을 선택하고 선택한 답변이 올바른지 확인할 수 있습니다. 예를 들어, 여러 정답을 처리하기 위해 위의 showResults () 함수를 업데이트하는 방법은 다음과 같습니다.

  별도의 JavaScript 파일과 CSS 파일을 유지해야합니까? 별도의 JavaScript 및 CSS 파일을 유지하는 것은 필수가 아닙니다. 그러나 코드의 가독성과 유지 가능성을 향상시키기 때문에 일반적으로 모범 사례로 간주됩니다.

위 내용은 간단한 JavaScript 퀴즈를 만드는 방법 : 코드 자습서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!