HTML-Quiz-App/script.js at main · hafsa-nadim/HTML-Quiz-App · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
const usernameInput = document.getElementById("username");
const passwordInput = document.getElementById("password");
const loginBtn = document.getElementById("login-btn");
const loginContainer = document.getElementById("login-container");
const quizContainer = document.getElementById("quiz-container");
const resultContainer = document.getElementById("result-container");
const quizForm = document.getElementById("quiz-form");
const submitBtn = document.getElementById("submit-btn");

const loginError = document.getElementById("login-error");

loginBtn.addEventListener("click", () => {
  if (
    usernameInput.value === "smit-student" &&
    passwordInput.value === "smit-student123"
  ) {
    loginContainer.classList.add("hidden");
    quizContainer.classList.remove("hidden");
    loadQuiz();
  } else {
    loginError.textContent = "❌ Invalid username or password!";
  }
});

const questions = [
  { q: "1. What does HTML stand for?", options: ["Hyperlinks and Text Markup Language", "Hyper Text Markup Language", "Home Tool Markup Language", "Hyper Tool Multi Language"], ans: 1 },
  { q: "2. Who is making the Web standards?", options: ["Google", "Mozilla", "The World Wide Web Consortium", "Microsoft"], ans: 2 },
  { q: "3. Choose the correct HTML element for the largest heading:", options: ["&lt;heading&gt;", "&lt;h1&gt;", "&lt;h6&gt;", "&lt;head&gt;"], ans: 1 },
  { q: "4. What is the correct HTML element for inserting a line break?", options: ["&lt;lb&gt;", "&lt;break&gt;", "&lt;br&gt;", "&lt;ln&gt;"], ans: 2 },
  { q: "5. What is the correct HTML for adding a background color?", options: ["&lt;body color='yellow'&gt;", "&lt;background&gt;yellow&lt;/background&gt;", "&lt;body style='background-color:yellow;'&gt;", "&lt;bg&gt;yellow&lt;/bg&gt;"], ans: 2 },
  { q: "6. Choose the correct HTML element to define important text", options: ["&lt;strong&gt;", "&lt;important&gt;", "&lt;i&gt;", "&lt;b&gt;"], ans: 0 },
  { q: "7. Which tag is used to display a picture in a webpage?", options: ["&lt;pic&gt;", "&lt;img&gt;", "&lt;image&gt;", "&lt;photo&gt;"], ans: 1 },
  { q: "8. Which HTML attribute specifies an alternate text for an image?", options: ["title", "alt", "src", "longdesc"], ans: 1 },
  { q: "9. How can you make a numbered list?", options: ["&lt;ul&gt;", "&lt;ol&gt;", "&lt;list&gt;", "&lt;dl&gt;"], ans: 1 },
  { q: "10. How can you make a bulleted list?", options: ["&lt;ul&gt;", "&lt;ol&gt;", "&lt;dl&gt;", "&lt;list&gt;"], ans: 0 },
  { q: "11. What is the correct HTML for creating a hyperlink?", options: ["&lt;a&gt;http://example.com&lt;/a&gt;", "&lt;a name='http://example.com'&gt;Example&lt;/a&gt;", "&lt;a href='http://example.com'&gt;Example&lt;/a&gt;", "&lt;link&gt;Example&lt;/link&gt;"], ans: 2 },
  { q: "12. Which character is used to indicate an end tag?", options: ["*", "/", "&lt;", "^"], ans: 1 },
  { q: "13. How can you open a link in a new tab?", options: ["&lt;a href='url' target='_blank'&gt;", "&lt;a href='url' new&gt;", "&lt;a href='url' open='tab'&gt;", "&lt;a href='url' window='new'&gt;"], ans: 0 },
  { q: "14. Which tag defines the document’s title?", options: ["&lt;meta&gt;", "&lt;title&gt;", "&lt;head&gt;", "&lt;h1&gt;"], ans: 1 },
  { q: "15. Where is the correct place to insert a JavaScript?", options: ["&lt;head&gt; or &lt;body&gt;", "&lt;footer&gt;", "&lt;html&gt;", "&lt;meta&gt;"], ans: 0 },
  { q: "16. Which element is used for inserting a comment?", options: ["&lt;!-- comment --&gt;", "// comment", "# comment", "&lt;comment&gt;"], ans: 0 },
  { q: "17. Which tag is used to define a table row?", options: ["&lt;td&gt;", "&lt;th&gt;", "&lt;tr&gt;", "&lt;table&gt;"], ans: 2 },
  { q: "18. Which tag defines a table cell?", options: ["&lt;td&gt;", "&lt;th&gt;", "&lt;tr&gt;", "&lt;cell&gt;"], ans: 0 },
  { q: "19. Which tag defines a table header cell?", options: ["&lt;td&gt;", "&lt;th&gt;", "&lt;head&gt;", "&lt;header&gt;"], ans: 1 },
  { q: "20. Which tag defines an unordered list?", options: ["&lt;ul&gt;", "&lt;ol&gt;", "&lt;list&gt;", "&lt;dl&gt;"], ans: 0 },
  { q: "21. What is the correct HTML for creating a checkbox?", options: ["&lt;check&gt;", "&lt;input type='check'&gt;", "&lt;input type='checkbox'&gt;", "&lt;checkbox&gt;"], ans: 2 },
  { q: "22. Which tag is used to define a dropdown list?", options: ["&lt;list&gt;", "&lt;dropdown&gt;", "&lt;input type='dropdown'&gt;", "&lt;select&gt;"], ans: 3 },
  { q: "23. Which tag is used for a text area?", options: ["&lt;textbox&gt;", "&lt;input type='textarea'&gt;", "&lt;textarea&gt;", "&lt;text&gt;"], ans: 2 },
  { q: "24. Which HTML tag is used to define an internal style sheet?", options: ["&lt;style&gt;", "&lt;script&gt;", "&lt;css&gt;", "&lt;link&gt;"], ans: 0 },
  { q: "25. Which HTML attribute is used to define inline styles?", options: ["font", "style", "class", "design"], ans: 1 },
  { q: "26. Which HTML tag is used to define an ordered list?", options: ["&lt;ol&gt;", "&lt;ul&gt;", "&lt;li&gt;", "&lt;dl&gt;"], ans: 0 },
  { q: "27. What is the correct HTML for inserting an image?", options: ["&lt;img href='image.jpg'&gt;", "&lt;img src='image.jpg'&gt;", "&lt;image src='image.jpg'&gt;", "&lt;src&gt;image.jpg&lt;/src&gt;"], ans: 1 },
  { q: "28. Which HTML attribute specifies the URL of the page the link goes to?", options: ["src", "href", "link", "url"], ans: 1 },
  { q: "29. Which HTML tag is used to define a footer?", options: ["&lt;bottom&gt;", "&lt;footer&gt;", "&lt;section&gt;", "&lt;base&gt;"], ans: 1 },
  { q: "30. Which HTML tag is used to define navigation links?", options: ["&lt;nav&gt;", "&lt;navigate&gt;", "&lt;links&gt;", "&lt;menu&gt;"], ans: 0 },
  { q: "31. Which HTML tag is used to define a paragraph?", options: ["&lt;para&gt;", "&lt;p&gt;", "&lt;pg&gt;", "&lt;text&gt;"], ans: 1 },
  { q: "32. What does the &lt;hr&gt; tag do?", options: ["Draws a horizontal line", "Creates a header", "Starts a new paragraph", "Inserts a page break"], ans: 0 },
  { q: "33. What is the correct HTML element for inserting a line break?", options: ["&lt;break&gt;", "&lt;lb&gt;", "&lt;br&gt;", "&lt;line&gt;"], ans: 2 },
  { q: "34. Which tag is used to display code?", options: ["&lt;computer&gt;", "&lt;code&gt;", "&lt;samp&gt;", "&lt;pre&gt;"], ans: 1 },
  { q: "35. Which HTML tag is used to define emphasized text?", options: ["&lt;i&gt;", "&lt;em&gt;", "&lt;italic&gt;", "&lt;strong&gt;"], ans: 1 },
  { q: "36. How do you specify a comment in HTML?", options: ["// comment", "# comment", "&lt;!-- comment --&gt;", "&lt;! comment&gt;"], ans: 2 },
  { q: "37. What is the purpose of the &lt;head&gt; element?", options: ["To contain meta-information", "To display headings", "To link images", "To show main content"], ans: 0 },
  { q: "38. Which HTML element defines the main content?", options: ["&lt;main&gt;", "&lt;body&gt;", "&lt;section&gt;", "&lt;article&gt;"], ans: 0 },
  { q: "39. Which tag is used to define a list item?", options: ["&lt;list&gt;", "&lt;item&gt;", "&lt;li&gt;", "&lt;ul&gt;"], ans: 2 },
  { q: "40. Which tag defines the document body?", options: ["&lt;main&gt;", "&lt;body&gt;", "&lt;html&gt;", "&lt;section&gt;"], ans: 1 },
  { q: "41. Which element defines a clickable button?", options: ["&lt;input type='button'&gt;", "&lt;btn&gt;", "&lt;button&gt;", "&lt;click&gt;"], ans: 2 },
  { q: "42. What is the correct HTML for making text bold?", options: ["&lt;strong&gt;", "&lt;bold&gt;", "&lt;b&gt;", "&lt;bl&gt;"], ans: 2 },
  { q: "43. Which tag defines the title of a table?", options: ["&lt;title&gt;", "&lt;caption&gt;", "&lt;head&gt;", "&lt;th&gt;"], ans: 1 },
  { q: "44. What is the correct HTML for inserting a background image?", options: ["&lt;background img='bg.jpg'&gt;", "&lt;body style='background-image:url(bg.jpg)'&gt;", "&lt;bg src='bg.jpg'&gt;", "&lt;body img='bg.jpg'&gt;"], ans: 1 },
  { q: "45. Which tag is used for inline quotations?", options: ["&lt;quote&gt;", "&lt;q&gt;", "&lt;block&gt;", "&lt;blockquote&gt;"], ans: 1 },
  { q: "46. Which tag defines preformatted text?", options: ["&lt;pre&gt;", "&lt;code&gt;", "&lt;text&gt;", "&lt;format&gt;"], ans: 0 },
  { q: "47. What is the correct HTML tag for inserting a video?", options: ["&lt;movie&gt;", "&lt;video&gt;", "&lt;media&gt;", "&lt;clip&gt;"], ans: 1 },
  { q: "48. Which HTML tag is used to play audio files?", options: ["&lt;sound&gt;", "&lt;music&gt;", "&lt;audio&gt;", "&lt;media&gt;"], ans: 2 },
  { q: "49. Which HTML tag is used to display a list of options?", options: ["&lt;select&gt;", "&lt;list&gt;", "&lt;dropdown&gt;", "&lt;ul&gt;"], ans: 0 },
  { q: "50. Which tag is used to create a table?", options: ["&lt;tab&gt;", "&lt;table&gt;", "&lt;tr&gt;", "&lt;grid&gt;"], ans: 1 },
];


function loadQuiz() {
  questions.forEach((q, index) => {
    const div = document.createElement("div");
    div.classList.add("question");
    div.innerHTML = `
      <h3>${q.q}</h3>
      ${q.options
        .map(
          (opt, i) =>
            `<label><input type="radio" name="q${index}" value="${i}"> ${opt}</label>`
        )
        .join("")}
    `;
    quizForm.appendChild(div);
  });
  submitBtn.classList.remove("hidden");
}

submitBtn.addEventListener("click", (e) => {
  e.preventDefault();
  let correct = 0;
  questions.forEach((q, i) => {
    const selected = document.querySelector(`input[name="q${i}"]:checked`);
    if (selected && parseInt(selected.value) === q.ans) correct++;
  });

  const wrong = questions.length - correct;
  const marks = (correct / questions.length) * 100;

  quizContainer.classList.add("hidden");
  resultContainer.classList.remove("hidden");
  document.getElementById("score").textContent = `Your Score: ${marks.toFixed(2)}%`;
  document.getElementById("correct").textContent = `✅ Correct Answers: ${correct}`;
  document.getElementById("wrong").textContent = `❌ Wrong Answers: ${wrong}`;
});