? ????? 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 ??? ??, ?? ??, ?? ??? ??? ??? ??? ????.

?? ??:

• ?? (
  )? ???? ?? ??? ??????.
• ??? ??() ?? ??
• ?? ??? ?? ??? ?????.
• ?? 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;
}

??

??????(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 ?? ? ??:

   ??? ???? ??? ??? ??? ?? ??? ??? ???? ??
   ??? ?? ???? ?? ?? ?? ??

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 ??? ????? ?? ?? ??? ?????!