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

---

？

專(zhuān)案概況

特點(diǎn)

• 多項(xiàng)選擇題：三個(gè)問(wèn)題，有多個(gè)答案選項(xiàng)。
• 提交按鈕：允許使用者提交他們的答案。
• 即時(shí)評(píng)分：提交後立即顯示使用者的分?jǐn)?shù)。
• 互動(dòng)設(shè)計(jì)：簡(jiǎn)單的樣式和懸停效果，帶來(lái)更好的使用者體驗(yàn)。

使用的技術(shù)

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

---

？

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

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

---

？

程式碼分解

？

HTML (index.html)

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

關(guān)鍵要素：

• 表格 (
  ) 將測(cè)驗(yàn)問(wè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 檔案處理測(cè)驗(yàn)邏輯、處理使用者答案並顯示分?jǐn)?shù)。

關(guān)鍵概念：

• 事件監(jiān)聽(tīng)器：偵測(cè)使用者何時(shí)點(diǎ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 表單與輸入:

   如何建立表單並使用單選按鈕來(lái)解決多項(xiàng)選擇題。
   了解將無(wú)線(xiàn)電輸入分組的名稱(chēng)屬性。

2. CSS 樣式:

   使用 Flexbox 進(jìn)行版面配置和對(duì)齊。
   透過(guò)懸停效果和陰影添加視覺(jué)吸引力。

3. JavaScript 互動(dòng)性:

   • 使用 addEventListener() 新增事件監(jiān)聽(tīng)器。
   • 讀取表單資料並將使用者輸入與正確答案進(jìn)行比較。
   • 使用 textContent 動(dòng)態(tài)更新 DOM。

---

?? 如何運(yùn)作專(zhuān)案

1. 複製或下載項(xiàng)目：

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

1. 在瀏覽器中開(kāi)啟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. 試試看測(cè)驗(yàn)：
   • 回答問(wèn)題。
   • 點(diǎn)擊「提交答案」查看您的分?jǐn)?shù)。

---

？ 值得嘗試的增強(qiáng)功能

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

---

？ 在 GitHub 上查看項(xiàng)目 ?

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