這個項目是一個簡單的互動式測驗應(yīng)用程式，使用HTML、CSS和 JavaScript。它允許用戶回答多項選擇題、提交答案並獲得即時分?jǐn)?shù)。該應(yīng)用程式演示了 JavaScript 中的基本表單處理、動態(tài)內(nèi)容更新和 DOM 操作。

---

？

專案概況

特點

• 多項選擇題：三個問題，有多個答案選項。
• 提交按鈕：允許使用者提交他們的答案。
• 即時評分：提交後立即顯示使用者的分?jǐn)?shù)。
• 互動設(shè)計：簡單的樣式和懸停效果，帶來更好的使用者體驗。

使用的技術(shù)

• HTML：用來建構(gòu)內(nèi)容。
• CSS：用於設(shè)計測驗介面的樣式。
• JavaScript：用於添加互動性和處理答案。

---

？

文件結(jié)構(gòu)

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

---

？

程式碼分解

？

HTML (index.html)

HTML 檔案建立測驗的結(jié)構(gòu)，包括問題、答案選擇和提交按鈕。

關(guān)鍵要素：

• 表格 (
  ) 將測驗問題分組。
• 單選按鈕（）用於選擇答案。
• 提交按鈕檢查答案。
• Result Div 顯示分?jǐn)?shù)。

<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 檔案處理測驗邏輯、處理使用者答案並顯示分?jǐn)?shù)。

關(guān)鍵概念：

• 事件監(jiān)聽器：偵測使用者何時點選提交按鈕。
• 表單處理：存取使用者選擇的答案。
• DOM 操作：用使用者的分?jǐn)?shù)更新結(jié)果部分。

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!`;
});

---

？

學(xué)習(xí)的關(guān)鍵概念

1. HTML 表單與輸入:

   如何建立表單並使用單選按鈕來解決多項選擇題。
   了解將無線電輸入分組的名稱屬性。

2. CSS 樣式:

   使用 Flexbox 進行版面配置和對齊。
   透過懸停效果和陰影添加視覺吸引力。

3. JavaScript 互動性:

   • 使用 addEventListener() 新增事件監(jiān)聽器。
   • 讀取表單資料並將使用者輸入與正確答案進行比較。
   • 使用 textContent 動態(tài)更新 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. 試試看測驗：
   • 回答問題。
   • 點擊「提交答案」查看您的分?jǐn)?shù)。

---

？ 值得嘗試的增強功能

• 增加更多問題：增加挑戰(zhàn)使用者的問題數(shù)。
• 自訂回饋：顯示每個問題的詳細回饋。
• 計時器：為每個問題添加倒數(shù)計時器。
• 樣式改進：透過動畫或主題增強設(shè)計。

---

？ 在 GitHub 上查看項目 ?

以上是互動測驗應(yīng)用程式的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！