インタラクティブなクイズアプリ

このプロジェクトは、HTML、CSS、および JavaScriptシンプルなインタラクティブなクイズ アプリケーションです。 🎜>。これにより、ユーザーは多肢選択式の質問に回答し、回答を送信して、即時にスコアを受け取ることができます。このアプリは、JavaScript での基本的なフォーム処理、動的なコンテンツ更新、DOM 操作を示します。

---

?

プロジェクト概要

特徴

• 多肢選択問題: 複数の回答オプションがある 3 つの質問。
• 送信ボタン: ユーザーが回答を送信できるようにします。
• 即時スコア: 送信直後にユーザーのスコアを表示します。
• インタラクティブなデザイン: シンプルなスタイルとホバー効果により、ユーザー エクスペリエンスが向上します。

使用されているテクノロジー

• HTML: コンテンツの構造化用。
• CSS: クイズインターフェイスのスタイルを設定します。
• JavaScript: インタラクティブ機能の追加と回答の処理用。

---

?

ファイル構造

quiz-app/
│-- index.html      ← The HTML structure
│-- styles.css      ← The CSS styling
└-- script.js       ← The JavaScript logic

---

?

コードの内訳

?

HTML (index.html)

HTML ファイルは、質問、回答の選択肢、送信ボタンなどのクイズの構造を作成します。

主要要素:

• フォーム (
  ) でクイズの質問をグループ化します。
• ラジオ ボタン () 回答を選択します。
• 送信ボタン で答えを確認してください。
• Result Div でスコアを表示します。

<form>



<h3>
  
  
  ? <strong>CSS (styles.css)</strong>
</h3>

<p>The CSS file styles the quiz interface, making it visually appealing and responsive.</p>

<p><strong>Key Styling Concepts:</strong></p>

• Layout: Flexbox for alignment and spacing.
• Hover Effects: Button changes color when hovered.
• Box Shadow: For a modern card-like appearance.

button {
  background-color: #28a745;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

⚙️

JavaScript (script.js)

JavaScript ファイルはクイズ ロジックを処理し、ユーザーの回答を処理し、スコアを表示します。

主要な概念:

• イベント リスナー: ユーザーが送信ボタンをクリックしたときを検出します。
• フォーム処理: ユーザーが選択した回答へのアクセス。
• DOM 操作: ユーザーのスコアで結果セクションを更新します。

document.getElementById('submit-btn').addEventListener('click', function() {
  const answers = {
    q1: 'Paris',
    q2: '4',
    q3: 'Blue'
  };

  let score = 0;
  const form = document.getElementById('quiz-form');

  if (form.q1.value === answers.q1) score++;
  if (form.q2.value === answers.q2) score++;
  if (form.q3.value === answers.q3) score++;

  document.getElementById('result').textContent = `You scored ${score} out of 3!`;
});

---

?

学習のための重要な概念

1. HTML フォームと入力:

   フォームを構成し、多肢選択式の質問でラジオ ボタンを使用する方法。
   無線入力をグループ化するための name 属性を理解します。

2. CSS スタイル:

   レイアウトと配置に Flexbox を使用します。
   ホバー効果とシャドウを使用して視覚的な魅力を追加します。

3. JavaScript インタラクティブ性:

   • addEventListener() を使用してイベント リスナーを追加します。
   • フォームデータを読み取り、ユーザー入力と正しい回答を比較します。
   • textContent を使用して DOM を動的に更新します。

---

?️ プロジェクトの実行方法

1. プロジェクトを複製またはダウンロード:

quiz-app/
│-- index.html      ← The HTML structure
│-- styles.css      ← The CSS styling
└-- script.js       ← The JavaScript logic

1. ブラウザでindex.htmlを開きます:

<form>



<h3>
  
  
  ? <strong>CSS (styles.css)</strong>
</h3>

<p>The CSS file styles the quiz interface, making it visually appealing and responsive.</p>

<p><strong>Key Styling Concepts:</strong></p>

• Layout: Flexbox for alignment and spacing.
• Hover Effects: Button changes color when hovered.
• Box Shadow: For a modern card-like appearance.

button {
  background-color: #28a745;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

1. クイズに挑戦してください:
   • 質問に答えてください。
   • スコアを確認するには、「回答を送信」 をクリックしてください。

---

? 試すべき拡張機能

• さらに質問を追加: ユーザーに挑戦する質問の数を増やします。
• カスタム フィードバック: 各質問の詳細なフィードバックを表示します。
• タイマー: 各質問にカウントダウン タイマーを追加します。
• スタイルの改善: アニメーションやテーマを使用してデザインを強化します。

---

? GitHub でプロジェクトを表示 ?

以上がインタラクティブなクイズアプリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。