Apl Kuiz Interaktif

Projek ini ialah aplikasi kuiz interaktif mudah dibina dengan HTML, CSS dan JavaScript. Ia membolehkan pengguna menjawab soalan aneka pilihan, menyerahkan jawapan mereka dan menerima skor segera. Apl ini menunjukkan pengendalian borang asas, kemas kini kandungan dinamik dan manipulasi DOM dalam JavaScript.

---

? Gambaran Keseluruhan Projek

Ciri

• Soalan Aneka Pilihan: Tiga soalan dengan berbilang pilihan jawapan.
• Butang Hantar: Membenarkan pengguna menyerahkan jawapan mereka.
• Pemarkahan Segera: Memaparkan skor pengguna serta-merta selepas penyerahan.
• Reka Bentuk Interaktif: Penggayaan mudah dan kesan tuding untuk pengalaman pengguna yang lebih baik.

Teknologi Digunakan

• HTML: Untuk menstruktur kandungan.
• CSS: Untuk menggayakan antara muka kuiz.
• JavaScript: Untuk menambah interaktiviti dan memproses jawapan.

---

? Struktur Fail

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

---

? Pecahan Kod

? HTML (index.html)

Fail HTML mencipta struktur kuiz, termasuk soalan, pilihan jawapan dan butang hantar.

Elemen Utama:

• Borang (
  ) untuk mengumpulkan soalan kuiz.
• Butang Radio () untuk memilih jawapan.
• Butang Hantar untuk menyemak jawapan.
• Div Keputusan untuk memaparkan skor.

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

Fail JavaScript mengendalikan logik kuiz, memproses jawapan pengguna dan memaparkan skor.

Konsep Utama:

• Pendengar Acara: Untuk mengesan apabila pengguna mengklik butang serah.
• Pengendalian Borang: Mengakses jawapan yang dipilih pengguna.
• Manipulasi DOM: Mengemas kini bahagian hasil dengan skor pengguna.

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

---

? Konsep Utama untuk Pembelajaran

1. Borang HTML dan Input:

   • Cara menstruktur borang dan menggunakan butang radio untuk soalan aneka pilihan.
   • Memahami atribut nama untuk mengumpulkan input radio.

2. Penggayaan CSS:

   • Menggunakan Flexbox untuk reka letak dan penjajaran.
   • Menambah daya tarikan visual dengan kesan tuding dan bayang-bayang.

3. Interaktiviti JavaScript:

   • Menambahkan pendengar acara dengan addEventListener().
   • Membaca data borang dan membandingkan input pengguna dengan jawapan yang betul.
   • Mengemas kini DOM secara dinamik menggunakan textContent.

---

?️ Cara Menjalankan Projek

1. Klon atau Muat Turun Projek:

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

1. Buka index.html dalam penyemak imbas anda:

<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. Cuba Kuiz:
   • Jawab soalan.
   • Klik "Serahkan Jawapan" untuk melihat markah anda.

---

? Penambahan untuk Dicuba

• Tambah Lagi Soalan: Tingkatkan bilangan soalan untuk mencabar pengguna.
• Maklum Balas Tersuai: Tunjukkan maklum balas terperinci untuk setiap soalan.
• Pemasa: Tambahkan pemasa kira detik untuk setiap soalan.
• Penambahbaikan Penggayaan: Tingkatkan reka bentuk dengan animasi atau tema.

---

? Lihat Projek di GitHub ?

Atas ialah kandungan terperinci Apl Kuiz Interaktif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!