互動測驗應用程式

這個項目是一個簡單的互動式測驗應用程式，使用HTML、CSS和 JavaScript。它允許用戶回答多項選擇題、提交答案並獲得即時分數。該應用程式演示了 JavaScript 中的基本表單處理、動態內容更新和 DOM 操作。

專案概況

特點

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

使用的技術

• HTML：用來建構內容。
• CSS：用於設計測驗介面的樣式。
• JavaScript：用於添加互動性和處理答案。

文件結構

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

程式碼分解

HTML (index.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)

關鍵概念：

• 事件監聽器：偵測使用者何時點選提交按鈕。
• 表單處理：存取使用者選擇的答案。
• 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 表單與輸入:

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

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中文網其他相關文章！