簡単なJavaScriptクイズの作成方法：コードチュートリアル

クイズは楽しいです！彼らは新しい科目について学ぶ素晴らしい方法であり、楽しく遊び心のあるもので聴衆を引き付けることができます。開発者の観点から、「JavaScriptクイズを作るにはどうすればよいですか？」 Web開発を学ぶ人々から尋ねられる最も一般的な質問の1つであり、正当な理由で。

独自のJavaScriptクイズゲームをコーディングすることは、素晴らしい学習演習です。イベントに対処し、DOMを操作し、ユーザーの入力を処理し、ローカルストレージを使用してスコアを追跡する方法を教えてくれます。基本的なクイズが稼働している場合、ページネーションなど、より高度な機能を追加する可能性がたくさんあります。 このチュートリアルでは、JavaScriptでクイズを作成する方法について説明します。私たちが何をするかを見たい場合は、先にスキップして、動作するJavaScriptクイズコードを見ることができます。

詳細なJavaScriptの知識と課題については、無料の本を入手してください。

開始する前に注意すべきこと

開始前に知っておくべきことがいくつかあります：

これはフロントエンドのチュートリアルです。つまり、ページのソースコードを調べる方法を知っている人は誰でも回答を見つけることができます。深刻なクイズの場合、このチュートリアルの範囲を超えたバックエンドでデータを処理する必要があります。 この記事のコードは、最新のJavaScript Syntax（ES6）を使用しています。つまり、インターネットエクスプローラーのバージョンと互換性がありません。ただし、Microsoft Edgeを含む最新のブラウザではうまく機能します。

古いブラウザをサポートする必要がある場合は、IE8と互換性のあるJavaScriptクイズチュートリアルを書きました。または、ES6の復習が必要な場合は、SitePoint PremiumでDarin Haenerのこのコースをチェックしてください。

HTML、CSS、およびJavaScriptに精通している必要がありますが、コードの各行は個別に説明されます。

ステップ1 - JavaScriptの基本構造クイズ
理想的には、クイズの質問と回答をJavaScriptコードに掲載し、スクリプトにクイズアプリを自動的に生成したいと考えています。そうすれば、繰り返しのマークアップを多く書く必要はありません。質問を簡単に追加して削除できます。 この例では、3つのキーファイルを使用してプロジェクトを構築します。
基本的なユーザーインターフェイス（UI）のHTMLファイル。
• スタイリング用のCSSファイル。
すべてのインタラクティブな機能を処理するJavaScriptファイル
• ただし、必要に応じて、HTMLファイル内にCSSとJavaScriptコードをインラインコードとして直接含めることもできます。

  HTMLとJavaScriptでクイズを作成する方法を学ぶとき、HTML構造がJavaScriptロジックとどのように相互作用するかを理解することが重要です。したがって、最初のステップとして、JavaScriptクイズゲームのHTML構造を設定しましょう。

  クイズを保持するために
  a
  a 回答を送信するため 結果を表示するために

  a

  それがどのように見えるかは次のとおりです この構造は、JavaScriptクイズテンプレートの基礎として機能するクイズHTMLコードを作成する方法の簡単な例です。今すぐアプリケーションを実行すると、「クイズを送信する」ボタンが表示されます。

  ステップ2 - 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>

  ここで、javascript document.getElementByIDメソッドを使用して、上記のHTML要素を選択し、以下のようなJavaScriptクイズコードでそれらへの参照を保存できます。

  クイズアプリが次に必要とするのは、表示する質問です。 JavaScriptオブジェクトリテラルを使用して、個々の質問と配列を表して、クイズアプリを構成するすべての質問を保持します。配列を使用すると、質問が簡単になります。

  好きなだけ多くの質問や答えを入れてください。

  <span>const quizContainer = document.getElementById('quiz');
  </span><span>const resultsContainer = document.getElementById('results');
  </span><span>const submitButton = document.getElementById('submit');</span>

  注

  <span>const myQuestions = [
  </span>  <span>{
  </span>    <span>question: "Who invented JavaScript?",
  </span>    <span>answers: {
  </span>      <span>a: "Douglas Crockford",
  </span>      <span>b: "Sheryl Sandberg",
  </span>      <span>c: "Brendan Eich"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which one of these is a JavaScript package manager?",
  </span>    <span>answers: {
  </span>      <span>a: "Node.js",
  </span>      <span>b: "TypeScript",
  </span>      <span>c: "npm"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which tool can you use to ensure code quality?",
  </span>    <span>answers: {
  </span>      <span>a: "Angular",
  </span>      <span>b: "jQuery",
  </span>      <span>c: "RequireJS",
  </span>      <span>d: "ESLint"
  </span>    <span>},
  </span>    <span>correctAnswer: "d"
  </span>  <span>}
  </span><span>];
  </span>

  ：これは配列であるため、質問がリストされている順序で質問が表示されます。ユーザーに提示する前に質問を何らかの形で並べ替えたい場合は、

  javascriptのオブジェクトの配列を並べ替える

  。 ステップ3 - クイズ関数を構築します 質問のリストができたので、ページに表示できます。そのために、BuildQuix（）という名前の関数を使用します。次のJavaScriptを1行ごとに進めて、それがどのように機能するかを確認しましょう： 最初に、質問や回答の選択を含むすべてのHTML出力を含む出力変数を作成します。 次に、各質問に対してHTMLの構築を開始できます。このような各質問をループする必要があります：

  簡潔にするために、各質問で操作を実行するために矢印関数を使用しています。これはforeachループにあるため、現在の値、インデックス（配列内の現在のアイテムの位置番号）、および配列自体がパラメーターとして取得されます。現在の値とインデックスのみが必要です。私たちの目的のために、それぞれCurrentQuestionとAbuctionNumberを名前を付けます。

  ループ内のコードを見てみましょう：

  <span>function buildQuiz(){
  </span>  <span>// variable to store the HTML output
  </span>  <span>const output = [];
  </span>
    <span>// for each question...
  </span>  myQuestions<span>.forEach(
  </span>    <span>(currentQuestion<span>, questionNumber</span>) => {
  </span>
        <span>// variable to store the list of possible answers
  </span>      <span>const answers = [];
  </span>
        <span>// and for each available answer...
  </span>      <span>for(letter in currentQuestion.answers){
  </span>
          <span>// ...add an HTML radio button
  </span>        answers<span>.push(
  </span>          <span><span>`<label>
  </span></span><span><span>            <input type="radio" name="question<span>${questionNumber}</span>" value="<span>${letter}</span>">
  </span></span><span><span>            <span>${letter}</span> :
  </span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
  </span></span><span><span>          </label>`</span>
  </span>        <span>);
  </span>      <span>}
  </span>
        <span>// add this question and its answers to the output
  </span>      output<span>.push(
  </span>        <span><span>`<div > <span>${currentQuestion.question}</span> </div>
  </span></span><span><span>        <div > <span>${answers.join('')}</span> </div>`</span>
  </span>      <span>);
  </span>    <span>}
  </span>  <span>);
  </span>
    <span>// finally combine our output list into one string of HTML and put it on the page
  </span>  quizContainer<span>.innerHTML = output.join('');
  </span><span>}</span>

  質問ごとに、正しいHTMLを生成する必要があります。したがって、私たちの最初のステップは、可能な回答のリストを保持する配列を作成することです。

  次に、ループを使用して、現在の質問の可能な答えを記入します。選択するたびに、要素に囲まれているHTMLラジオボタンを作成しています。これにより、ユーザーは回答テキストのどこでもクリックしてその回答を選択できます。ラベルが省略された場合、ユーザーはラジオボタン自体をクリックする必要がありますが、これはあまりアクセスできません。

  ここでは、テンプレートリテラルを使用しています。テンプレートは文字列ですが、より強力です。テンプレートリテラルの次の機能を使用します。

  マルチライン機能。

  • テンプレートリテラルがバックティックを使用しているため、引用符内でエスケープ見積もりを使用する必要はありません。
  文字列補間により、このような文字列にJavaScriptの式を埋め込むことができます：$ {code_goes_here}。
  回答ボタンのリストを取得したら、HTMLとAnswer HTMLを出力の全体的なリストに押し込むことができます。
  • テンプレートリテラルといくつかの埋め込み式を使用して、最初に質問DIVを作成し、次に回答divを作成していることに注意してください。 Join Expressionは、回答のリストを取得し、回答divに出力できる1つの文字列にそれらをまとめます。
  質問ごとにHTMLを生成したので、すべてを結合してページに表示できます。

  さあ、BuildQuiz関数は完了しており、クイズアプリを実行して表示されている質問を見ることができるはずです。

  ただし、コードの構造は重要です。時間的デッドゾーンと呼ばれるものがあるため、質問アレイが定義される前に参照することはできません。 要約するには、これが正しい構造です：

  <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>

  ステップ4 - クイズの結果の表示

  この時点で、showresults関数を構築して、回答をループし、それらを確認し、結果を表示したいと考えています。これは、パフォーマンスに基づいてユーザーにすぐにフィードバックを提供するため、クイズゲームJavaScriptの実装の重要な部分です。

  次に詳細に説明します。

  最初に、クイズのHTMLですべての回答コンテナを選択します。次に、ユーザーの現在の回答と正解の総数を追跡するための変数を作成します。

  さて、各質問をループして回答を確認できます。

  そのために3つのステップを使用します：

  <span>const quizContainer = document.getElementById('quiz');
  </span><span>const resultsContainer = document.getElementById('results');
  </span><span>const submitButton = document.getElementById('submit');</span>

  HTMLで選択した回答を見つけます。

  答えが正しい場合に何が起こるかを処理します。

  答えが間違っている場合に何が起こるかを処理します

  <span>const myQuestions = [
  </span>  <span>{
  </span>    <span>question: "Who invented JavaScript?",
  </span>    <span>answers: {
  </span>      <span>a: "Douglas Crockford",
  </span>      <span>b: "Sheryl Sandberg",
  </span>      <span>c: "Brendan Eich"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which one of these is a JavaScript package manager?",
  </span>    <span>answers: {
  </span>      <span>a: "Node.js",
  </span>      <span>b: "TypeScript",
  </span>      <span>c: "npm"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which tool can you use to ensure code quality?",
  </span>    <span>answers: {
  </span>      <span>a: "Angular",
  </span>      <span>b: "jQuery",
  </span>      <span>c: "RequireJS",
  </span>      <span>d: "ESLint"
  </span>    <span>},
  </span>    <span>correctAnswer: "d"
  </span>  <span>}
  </span><span>];
  </span>

  HTMLで選択された答えをどのように見つけているかをもっと詳しく見てみましょう：

  <span>function buildQuiz(){
  </span>  <span>// variable to store the HTML output
  </span>  <span>const output = [];
  </span>
    <span>// for each question...
  </span>  myQuestions<span>.forEach(
  </span>    <span>(currentQuestion<span>, questionNumber</span>) => {
  </span>
        <span>// variable to store the list of possible answers
  </span>      <span>const answers = [];
  </span>
        <span>// and for each available answer...
  </span>      <span>for(letter in currentQuestion.answers){
  </span>
          <span>// ...add an HTML radio button
  </span>        answers<span>.push(
  </span>          <span><span>`<label>
  </span></span><span><span>            <input type="radio" name="question<span>${questionNumber}</span>" value="<span>${letter}</span>">
  </span></span><span><span>            <span>${letter}</span> :
  </span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
  </span></span><span><span>          </label>`</span>
  </span>        <span>);
  </span>      <span>}
  </span>
        <span>// add this question and its answers to the output
  </span>      output<span>.push(
  </span>        <span><span>`<div > <span>${currentQuestion.question}</span> </div>
  </span></span><span><span>        <div > <span>${answers.join('')}</span> </div>`</span>
  </span>      <span>);
  </span>    <span>}
  </span>  <span>);
  </span>
    <span>// finally combine our output list into one string of HTML and put it on the page
  </span>  quizContainer<span>.innerHTML = output.join('');
  </span><span>}</span>

  最初に、現在の質問のために回答コンテナの内部を確認していることを確認しています。

  次の行では、どのラジオボタンがチェックされているかを見つけることができるCSSセレクターを定義しています。

  次に、JavaScriptのQuerySelectorを使用して、以前に定義されたAnswerContainerでCSSセレクターを検索しています。本質的に、これは、どの回答のラジオボタンがチェックされているかを見つけることを意味します。

  最後に、.value。

  を使用して、その答えの価値を得ることができます。 不完全なユーザー入力を扱う

  ユーザーが答えを空白にした場合はどうなりますか？この場合、.Valueを使用すると、そこにないものの価値を取得できないため、エラーが発生します。これを解決するために、「または」を意味する||を追加しました。{}は空のオブジェクトです。さて、全体的な声明には次のように書かれています

  選択した回答要素への参照を取得するか、それが存在しない場合は空のオブジェクトを使用します。

  最初のステートメントにあるものの価値を取得します。

  • その結果、値はユーザーの回答または未定義のいずれかです。つまり、ユーザーはクイズアプリをクラッシュせずに質問をスキップできます。
  答えを評価し、結果を表示
  回答チェックループの次のステートメントにより、正しい回答と誤った回答を処理できます。

  ユーザーの回答が正しい選択と一致する場合、正解の数を1つだけ増やし、（オプションで）選択のセットを緑色に色付けします。答えが間違っているか空白がある場合は、答えの選択肢を赤く色付けします（繰り返しますが、オプション）。

  回答チェックループが終了したら、ユーザーが正しくなった質問の数を示すことができます。

  そして今、私たちは働いている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>

  必要に応じて、クイズ全体をiife（すぐに呼び出した関数式）で包むことができます。これは、定義するとすぐに実行される関数です。これにより、変数がグローバルな範囲から締め出され、クイズアプリがページで実行されている他のスクリプトに干渉しないようにします。

  今、あなたはすべて設定されています！質問や回答を追加または削除して、好きなクイズを自由に削除してください。

  ここで、アプリケーションを実行した場合、回答を選択してクイズを送信して結果を得ることができます。

  <span>const quizContainer = document.getElementById('quiz');
  </span><span>const resultsContainer = document.getElementById('results');
  </span><span>const submitButton = document.getElementById('submit');</span>

  ステップ5 - スタイルの追加

  今では作業クイズがあるので、いくつかのスタイルを追加して、よりユーザーフレンドリーにしましょう。ただし、各スタイルの詳細については説明しません。以下のコードをStyles.cssファイルに直接コピーできます。

  <span>const myQuestions = [
  </span>  <span>{
  </span>    <span>question: "Who invented JavaScript?",
  </span>    <span>answers: {
  </span>      <span>a: "Douglas Crockford",
  </span>      <span>b: "Sheryl Sandberg",
  </span>      <span>c: "Brendan Eich"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which one of these is a JavaScript package manager?",
  </span>    <span>answers: {
  </span>      <span>a: "Node.js",
  </span>      <span>b: "TypeScript",
  </span>      <span>c: "npm"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which tool can you use to ensure code quality?",
  </span>    <span>answers: {
  </span>      <span>a: "Angular",
  </span>      <span>b: "jQuery",
  </span>      <span>c: "RequireJS",
  </span>      <span>d: "ESLint"
  </span>    <span>},
  </span>    <span>correctAnswer: "d"
  </span>  <span>}
  </span><span>];
  </span>

  この時点で、あなたのクイズはこのように見えるかもしれません（少しスタイリングがあります）：

  ステップ6 - ページネーションの実装

  上記の画像でわかるように、クイズの質問は次々と注文されます。回答を選択するには、下にスクロールする必要があります。これは3つの質問でうまく見えますが、質問の数が増えたときにそれらに答えるのに苦労し始めるかもしれません。したがって、ページネーションを通じて一度に1つの質問しか表示する方法を見つける必要があります。 そのためには、必要になります：

  質問を表示して非表示にする方法 クイズをナビゲートするためのボタン。

  • それでは、HTMLから始めて、コードを調整しましょう。
  • そのマークアップのほとんどは以前と同じですが、ナビゲーションボタンとクイズコンテナを追加しました。クイズコンテナは、質問を表示して隠すことができるレイヤーとして配置するのに役立ちます。
  次に、BuildQuiz関数内で、クラススライド付きの
  要素を追加して、質問を保持し、作成したコンテナに回答する必要があります。

  次に、いくつかのCSSポジショニングを使用して、スライドを互いの上にレイヤーとして座らせることができます。この例では、スライドがZ-Indexesと不透明な遷移を使用していることに気付くでしょう。 CSSがどのように見えるかは次のとおりです

  <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>

  ここで、ページネーションを機能させるためにJavaScriptを追加します。前と同様に、順序は重要であるため、これはコードの改訂された構造です：

  いくつかの変数から始めて、ナビゲーションボタンへの参照を保存し、どのスライドを使用しているかを追跡できます。上記のように、buildquiz（）への呼び出しの後にこれらを追加します：

  <span>const quizContainer = document.getElementById('quiz');
  </span><span>const resultsContainer = document.getElementById('results');
  </span><span>const submitButton = document.getElementById('submit');</span>

  次に、スライドを表示する関数を書き込みます。これを既存の関数（BuildQuiz and Showresults）の下に追加します：

  <span>const myQuestions = [
  </span>  <span>{
  </span>    <span>question: "Who invented JavaScript?",
  </span>    <span>answers: {
  </span>      <span>a: "Douglas Crockford",
  </span>      <span>b: "Sheryl Sandberg",
  </span>      <span>c: "Brendan Eich"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which one of these is a JavaScript package manager?",
  </span>    <span>answers: {
  </span>      <span>a: "Node.js",
  </span>      <span>b: "TypeScript",
  </span>      <span>c: "npm"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which tool can you use to ensure code quality?",
  </span>    <span>answers: {
  </span>      <span>a: "Angular",
  </span>      <span>b: "jQuery",
  </span>      <span>c: "RequireJS",
  </span>      <span>d: "ESLint"
  </span>    <span>},
  </span>    <span>correctAnswer: "d"
  </span>  <span>}
  </span><span>];
  </span>

  最初の3行が行うことは次のとおりです

  <span>function buildQuiz(){
  </span>  <span>// variable to store the HTML output
  </span>  <span>const output = [];
  </span>
    <span>// for each question...
  </span>  myQuestions<span>.forEach(
  </span>    <span>(currentQuestion<span>, questionNumber</span>) => {
  </span>
        <span>// variable to store the list of possible answers
  </span>      <span>const answers = [];
  </span>
        <span>// and for each available answer...
  </span>      <span>for(letter in currentQuestion.answers){
  </span>
          <span>// ...add an HTML radio button
  </span>        answers<span>.push(
  </span>          <span><span>`<label>
  </span></span><span><span>            <input type="radio" name="question<span>${questionNumber}</span>" value="<span>${letter}</span>">
  </span></span><span><span>            <span>${letter}</span> :
  </span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
  </span></span><span><span>          </label>`</span>
  </span>        <span>);
  </span>      <span>}
  </span>
        <span>// add this question and its answers to the output
  </span>      output<span>.push(
  </span>        <span><span>`<div > <span>${currentQuestion.question}</span> </div>
  </span></span><span><span>        <div > <span>${answers.join('')}</span> </div>`</span>
  </span>      <span>);
  </span>    <span>}
  </span>  <span>);
  </span>
    <span>// finally combine our output list into one string of HTML and put it on the page
  </span>  quizContainer<span>.innerHTML = output.join('');
  </span><span>}</span>

  アクティブスライドクラスを削除して、現在のスライドを非表示にします

  アクティブスライドクラスを追加して、新しいスライドを表示します

  現在のスライド番号を更新します

  myQuestions<span>.forEach( (currentQuestion<span>, questionNumber</span>) => {
  </span>  <span>// the code we want to run for each question goes here
  </span><span>});</span>

  次の行では、次のJavaScriptロジックを紹介します：

  <span>// we'll want to store the list of answer choices
  </span><span>const answers = [];
  </span>
  <span>// and for each available answer...
  </span><span>for(letter in currentQuestion.answers){
  </span>
    <span>// ...add an html radio button
  </span>  answers<span>.push(
  </span>    <span><span>`<label>
  </span></span><span><span>      <input type="radio" name="question<span>${questionNumber}</span>" value="<span>${letter}</span>">
  </span></span><span><span>      <span>${letter}</span> :
  </span></span><span><span>      <span>${currentQuestion.answers[letter]}</span>
  </span></span><span><span>    </label>`</span>
  </span>  <span>);
  </span><span>}
  </span>
  <span>// add this question and its answers to the output
  </span>output<span>.push(
  </span>  <span><span>`<div > <span>${currentQuestion.question}</span> </div>
  </span></span><span><span>  <div > <span>${answers.join('')}</span> </div>`</span>
  </span><span>);
  </span>

  最初のスライドにいる場合は、前のスライド

  ボタンを非表示にします。それ以外の場合は、ボタンを表示します

  最後のスライドに乗っている場合は、
  • 次のスライド
  ボタンを非表示にして、
  • ボタンを送信します。ボタンを表示します。それ以外の場合は、ボタンを表示し、
  • ボタンを送信します。

  関数を書いた後、すぐにshowslide（0）に電話して最初のスライドを表示できます。これは、ページネーションコードの後に​​行われるはずです：

  次に、ナビゲーションボタンを機能させるための関数を書き込むことができます。これらは、ショースライド関数の下に進みます：
  • ここでは、ショースライド機能を利用して、ナビゲーションボタンが前のスライドと次のスライドを表示できるようにします。

    最後に、ナビゲーションボタンをこれらの機能に接続する必要があります。これは、コードの最後にあります：

    <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>

    今、あなたのクイズには動作しているナビゲーションがあります！

    次は何ですか？

    基本的なJavaScriptクイズアプリを手に入れたので、創造的で実験する時が来ました。

    ここに試してみることができるいくつかの提案があります：
    正解や間違った答えに応答するさまざまな方法を試してみてください。
    • クイズをきれいにスタイルします。
    • 進行状況バーを追加します。
    • 提出する前にユーザーに回答を確認させます
    ユーザーが提出した後の回答の要約を提供してください。
    ナビゲーションを更新して、ユーザーが質問番号にスキップできるようにします。
    • 結果のレベルごとにカスタムメッセージを作成します。たとえば、誰かが8/10以上を獲得した場合は、クイズニンジャと呼びます。
    ボタンを追加して、ソーシャルメディアで結果を共有します
    • localStorageを使用してハイスコアを保存します。
    • カウントダウンタイマーを追加して、人々が時計に勝つことができるかどうかを確認します。 この記事の概念を、プロジェクト価格推定器やソーシャル「Character-Are-You」クイズなど、他の用途に適用します。
    • 簡単なJavaScriptクイズを作成する方法についてのFAQ
    • JavaScriptクイズにさらに質問を追加するにはどうすればよいですか？JavaScriptクイズにさらに質問を追加することは簡単なプロセスです。 JavaScriptコードの質問配列にオブジェクトを追加する必要があります。各オブジェクトは質問を表し、テキスト（質問自体）と回答（可能な回答の配列）の2つのプロパティを持っています。新しい質問を追加する方法の例は次のとおりです。
    この例では、フランスの首都についての質問を追加し、4つの答えがあります。正解には「正しい：true」がマークされています
    • クイズで質問の順序をランダム化するにはどうすればよいですか？
    質問の順序をランダム化すると、クイズがより挑戦的で楽しいものになる可能性があります。これは、Math.random（）関数と組み合わせたsort（）メソッドを使用して達成できます。これができる方法は次のとおりです
    このコードは、ページがロードされるたびに質問配列をランダムにソートします。

    クイズにタイマーを追加するにはどうすればよいですか？

    タイマーを追加すると、クイズがよりエキサイティングになります。 JavaScript setInterval（）関数を使用して、タイマーをクイズに簡単に追加できます。簡単な例を次に示します：

    <span>const quizContainer = document.getElementById('quiz');
    </span><span>const resultsContainer = document.getElementById('results');
    </span><span>const submitButton = document.getElementById('submit');</span>

    この例では、クイズは30秒間続きます。タイマーは毎秒更新され、時間が長くなるとアラートが表示されます。

    ユーザーが間違っている場合、正解を表示するにはどうすればよいですか？

    CheckAnswer（）関数を変更することにより、正解を表示できます。回答が正しいかどうかをチェックするIFステートメントにelse句を追加できます。これができる方法は次のとおりです

    <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では、次のような画像を表示できます。

    <span>const quizContainer = document.getElementById('quiz');
    </span><span>const resultsContainer = document.getElementById('results');
    </span><span>const submitButton = document.getElementById('submit');</span>

    そしてJavaScriptでは、新しい質問を表示するときに画像のSRC属性を更新できます。

    この例では、質問が表示されると象の画像が表示されます。

    <span>const myQuestions = [
    </span>  <span>{
    </span>    <span>question: "Who invented JavaScript?",
    </span>    <span>answers: {
    </span>      <span>a: "Douglas Crockford",
    </span>      <span>b: "Sheryl Sandberg",
    </span>      <span>c: "Brendan Eich"
    </span>    <span>},
    </span>    <span>correctAnswer: "c"
    </span>  <span>},
    </span>  <span>{
    </span>    <span>question: "Which one of these is a JavaScript package manager?",
    </span>    <span>answers: {
    </span>      <span>a: "Node.js",
    </span>      <span>b: "TypeScript",
    </span>      <span>c: "npm"
    </span>    <span>},
    </span>    <span>correctAnswer: "c"
    </span>  <span>},
    </span>  <span>{
    </span>    <span>question: "Which tool can you use to ensure code quality?",
    </span>    <span>answers: {
    </span>      <span>a: "Angular",
    </span>      <span>b: "jQuery",
    </span>      <span>c: "RequireJS",
    </span>      <span>d: "ESLint"
    </span>    <span>},
    </span>    <span>correctAnswer: "d"
    </span>  <span>}
    </span><span>];
    </span>

    JavaScriptクイズで複数の正解を処理するにはどうすればよいですか？複数の正解の処理には、ユーザーが複数の回答を選択できるようにし、選択した回答のいずれかが正しいかどうかを確認できます。たとえば、複数の正解を処理するために上記のshowResults（）関数を更新する方法を次に示します。

    <span>function buildQuiz(){
    </span>  <span>// variable to store the HTML output
    </span>  <span>const output = [];
    </span>
      <span>// for each question...
    </span>  myQuestions<span>.forEach(
    </span>    <span>(currentQuestion<span>, questionNumber</span>) => {
    </span>
          <span>// variable to store the list of possible answers
    </span>      <span>const answers = [];
    </span>
          <span>// and for each available answer...
    </span>      <span>for(letter in currentQuestion.answers){
    </span>
            <span>// ...add an HTML radio button
    </span>        answers<span>.push(
    </span>          <span><span>`<label>
    </span></span><span><span>            <input type="radio" name="question<span>${questionNumber}</span>" value="<span>${letter}</span>">
    </span></span><span><span>            <span>${letter}</span> :
    </span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
    </span></span><span><span>          </label>`</span>
    </span>        <span>);
    </span>      <span>}
    </span>
          <span>// add this question and its answers to the output
    </span>      output<span>.push(
    </span>        <span><span>`<div > <span>${currentQuestion.question}</span> </div>
    </span></span><span><span>        <div > <span>${answers.join('')}</span> </div>`</span>
    </span>      <span>);
    </span>    <span>}
    </span>  <span>);
    </span>
      <span>// finally combine our output list into one string of HTML and put it on the page
    </span>  quizContainer<span>.innerHTML = output.join('');
    </span><span>}</span>

    分離JavaScriptファイルとCSSファイルを維持する必要がありますか？

    個別のJavaScriptとCSSファイルを維持することは必須ではありません。ただし、コードの読みやすさと保守性を向上させるため、通常はベストプラクティスと見なされます。

以上が簡単なJavaScriptクイズの作成方法：コードチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。