HTML & CSS Basics Exam<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Inter', sans-serif;\n }\n .code-textarea {\n font-family: monospace;\n background-color: #282c34;\n color: #abb2bf;\n border-radius: 8px;\n padding: 1rem;\n border: 1px solid #3e4451;\n outline: none;\n resize: vertical;\n min-height: 150px;\n }\n .correct-answer { color: #16a34a; }\n .incorrect-answer { color: #dc2626; }\n .correct-border { border-color: #16a34a !important; }\n .incorrect-border { border-color: #dc2626 !important; }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100 text-gray-800\">\n\n <div class=\"container mx-auto max-w-4xl my-12 p-8 bg-white rounded-2xl shadow-lg\">\n \n <header class=\"border-b-2 border-gray-200 pb-6 mb-8 text-center\">\n <h1 class=\"text-4xl font-bold text-gray-700\">HTML & CSS Basics Exam<\/h1>\n <p class=\"text-gray-500 mt-2\">Test your knowledge of web fundamentals!<\/p>\n <\/header>\n\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-10\">\n <div>\n <label for=\"name\" class=\"block text-sm font-medium text-gray-700 mb-1\">Name:<\/label>\n <input type=\"text\" id=\"name\" class=\"w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition\">\n <\/div>\n <div>\n <label for=\"date\" class=\"block text-sm font-medium text-gray-700 mb-1\">Date:<\/label>\n <input type=\"date\" id=\"date\" class=\"w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition\">\n <\/div>\n <\/div>\n\n <main id=\"exam-form\">\n \n <section id=\"multiple-choice\" class=\"mb-12\">\n <h2 class=\"text-2xl font-bold text-blue-600 border-l-4 border-blue-600 pl-3 mb-6\">Part 1: Multiple Choice<\/h2>\n <div class=\"space-y-8\">\n \n <div class=\"question-block\">\n <p class=\"font-semibold mb-2\">1. What is the correct tag for the <span class=\"font-bold\">largest<\/span> heading? <span id=\"feedback-q1\" class=\"ml-2 font-bold\"><\/span><\/p>\n <div class=\"space-y-2\">\n <div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q1\" value=\"h6\" class=\"form-checkbox text-blue-500\"> <span class=\"ml-2\"><h6><\/span><\/label><\/div>\n <div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q1\" value=\"heading\" class=\"form-checkbox text-blue-500\"> <span class=\"ml-2\"><heading><\/span><\/label><\/div>\n <div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q1\" value=\"h1\" class=\"form-checkbox text-blue-500\"> <span class=\"ml-2\"><h1><\/span><\/label><\/div>\n <div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q1\" value=\"head\" class=\"form-checkbox text-blue-500\"> <span class=\"ml-2\"><head><\/span><\/label><\/div>\n <\/div>\n <\/div>\n \n <div class=\"question-block\">\n <p class=\"font-semibold mb-2\">2. Which tag is used to create a <span class=\"font-bold\">paragraph<\/span>? <span id=\"feedback-q2\" class=\"ml-2 font-bold\"><\/span><\/p>\n <div class=\"space-y-2\">\n <div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q2\" value=\"p\" class=\"form-checkbox text-blue-500\"> <span class=\"ml-2\"><p><\/span><\/label><\/div>\n <div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q2\" value=\"para\" class=\"form-checkbox text-blue-500\"> <span class=\"ml-2\"><para><\/span><\/label><\/div>\n <div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q2\" value=\"b\" class=\"form-checkbox text-blue-500\"> <span class=\"ml-2\"><b><\/span><\/label><\/div>\n <div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q2\" value=\"body\" class=\"form-checkbox text-blue-500\"> <span class=\"ml-2\"><body><\/span><\/label><\/div>\n <\/div>\n <\/div>\n \n <div class=\"question-block\"><p class=\"font-semibold mb-2\">3. What is the correct way to create a <span class=\"font-bold\">link<\/span>? <span id=\"feedback-q3\" class=\"ml-2 font-bold\"><\/span><\/p><div class=\"space-y-2\"><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q3\" value=\"a-url\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><a url="...">Link<\/a><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q3\" value=\"a-href\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><a href="\/km\/...\/">Link<\/a><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q3\" value=\"a-only\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><a>...<\/a><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q3\" value=\"link-tag\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><link>...<\/link><\/span><\/label><\/div><\/div><\/div>\n \n <div class=\"question-block\"><p class=\"font-semibold mb-2\">4. Which tag is used to display an <span class=\"font-bold\">image<\/span>? <span id=\"feedback-q4\" class=\"ml-2 font-bold\"><\/span><\/p><div class=\"space-y-2\"><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q4\" value=\"image\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><image><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q4\" value=\"pic\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><pic><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q4\" value=\"jpeg\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><jpeg><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q4\" value=\"img\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><img><\/span><\/label><\/div><\/div><\/div>\n \n <div class=\"question-block\"><p class=\"font-semibold mb-2\">5. Which attribute provides <span class=\"font-bold\">alternative text<\/span> for an image if it cannot be displayed? <span id=\"feedback-q5\" class=\"ml-2 font-bold\"><\/span><\/p><div class=\"space-y-2\"><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q5\" value=\"src\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">src<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q5\" value=\"title\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">title<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q5\" value=\"alt\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">alt<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q5\" value=\"href\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">href<\/span><\/label><\/div><\/div><\/div>\n \n <div class=\"question-block\"><p class=\"font-semibold mb-2\">6. Which tags are used to create an <span class=\"font-bold\">unordered (bulleted) list<\/span>? <span id=\"feedback-q6\" class=\"ml-2 font-bold\"><\/span><\/p><div class=\"space-y-2\"><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q6\" value=\"ol-li\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><ol> and <li><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q6\" value=\"ul-li\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><ul> and <li><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q6\" value=\"list-item\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><list> and <item><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q6\" value=\"ul-i\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><ul> and <i><\/span><\/label><\/div><\/div><\/div>\n \n <div class=\"question-block\"><p class=\"font-semibold mb-2\">7. How do you add a <span class=\"font-bold\">comment<\/span> in an HTML file that the browser will ignore? <span id=\"feedback-q7\" class=\"ml-2 font-bold\"><\/span><\/p><div class=\"space-y-2\"><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q7\" value=\"js-comment\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">\/\/ This is a comment<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q7\" value=\"css-comment\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">\/* This is a comment *\/<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q7\" value=\"html-comment\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q7\" value=\"wrong-comment\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><-- This is a comment --!><\/span><\/label><\/div><\/div><\/div>\n \n <div class=\"question-block\"><p class=\"font-semibold mb-2\">8. Which tag contains all the <span class=\"font-bold\">visible content<\/span> of a webpage? <span id=\"feedback-q8\" class=\"ml-2 font-bold\"><\/span><\/p><div class=\"space-y-2\"><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q8\" value=\"head\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><head><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q8\" value=\"html\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><html><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q8\" value=\"title\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><title><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q8\" value=\"body\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><body><\/span><\/label><\/div><\/div><\/div>\n \n <div class=\"question-block\"><p class=\"font-semibold mb-2\">9. What is the purpose of the <span class=\"font-bold\"><title><\/span> tag? <span id=\"feedback-q9\" class=\"ml-2 font-bold\"><\/span><\/p><div class=\"space-y-2\"><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q9\" value=\"main-heading\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">To create the main heading on the page<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q9\" value=\"browser-tab\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">To set the text for the browser tab<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q9\" value=\"style-text\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">To add a style to the text<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q9\" value=\"link-page\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">To link to another page<\/span><\/label><\/div><\/div><\/div>\n \n <div class=\"question-block\"><p class=\"font-semibold mb-2\">10. How do you add an <span class=\"font-bold\">inline CSS style<\/span> to change an element's color to red? <span id=\"feedback-q10\" class=\"ml-2 font-bold\"><\/span><\/p><div class=\"space-y-2\"><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q10\" value=\"css-attr\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">css=\"color:red;\"<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q10\" value=\"style-tag\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><style>color:red;<\/style><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q10\" value=\"design-attr\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">design=\"color:red;\"<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q10\" value=\"style-attr\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">style=\"color:red;\"<\/span><\/label><\/div><\/div><\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"fill-in-the-blank\" class=\"mb-12\">\n <h2 class=\"text-2xl font-bold text-green-600 border-l-4 border-green-600 pl-3 mb-6\">Part 2: Fill in the Blank<\/h2>\n <div class=\"space-y-6\">\n <div class=\"flex items-center flex-wrap\">\n <label for=\"blank1\" class=\"mr-2\">1. To make text <strong>bold<\/strong>, you use the<\/label>\n <input type=\"text\" id=\"blank1\" class=\"form-input p-1 border-b-2 border-gray-300 focus:border-green-500 outline-none w-20 text-center\">\n <span class=\"ml-2\">tag.<\/span>\n <\/div>\n <div class=\"flex items-center flex-wrap\">\n <label for=\"blank2\" class=\"mr-2\">2. The attribute used to define the destination of a link in an <a> tag is<\/label>\n <input type=\"text\" id=\"blank2\" class=\"form-input p-1 border-b-2 border-gray-300 focus:border-green-500 outline-none w-20 text-center\">\n <span class=\"ml-0\">.<\/span>\n <\/div>\n <div class=\"flex items-center flex-wrap\">\n <label for=\"blank3\" class=\"mr-2\">3. An <strong>ordered<\/strong>, or numbered, list is created with the<\/label>\n <input type=\"text\" id=\"blank3\" class=\"form-input p-1 border-b-2 border-gray-300 focus:border-green-500 outline-none w-20 text-center\">\n <span class=\"ml-2\">tag.<\/span>\n <\/div>\n <div class=\"flex items-center flex-wrap\">\n <label for=\"blank4\" class=\"mr-2\">4. To insert an image, you use the <img> tag with the<\/label>\n <input type=\"text\" id=\"blank4\" class=\"form-input p-1 border-b-2 border-gray-300 focus:border-green-500 outline-none w-20 text-center\">\n <span class=\"ml-2\">attribute to point to the image file.<\/span>\n <\/div>\n <div class=\"flex items-center flex-wrap\">\n <label for=\"blank5\" class=\"mr-2\">5. All HTML documents must start with the <!DOCTYPE html> declaration and have a root<\/label>\n <input type=\"text\" id=\"blank5\" class=\"form-input p-1 border-b-2 border-gray-300 focus:border-green-500 outline-none w-20 text-center\">\n <span class=\"ml-2\">tag.<\/span>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"open-questions\" class=\"mb-12\">\n <h2 class=\"text-2xl font-bold text-purple-600 border-l-4 border-purple-600 pl-3 mb-6\">Part 3: Open Questions<\/h2>\n <div class=\"space-y-6\">\n <div>\n <label for=\"open1\" class=\"block font-semibold mb-2\">1. Explain the difference between an <h1> tag and a <p> tag.<\/label>\n <textarea id=\"open1\" rows=\"3\" class=\"w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition\"><\/textarea>\n <\/div>\n <div>\n <label for=\"open2\" class=\"block font-semibold mb-2\">2. What is the purpose of the <head> section in an HTML document?<\/label>\n <textarea id=\"open2\" rows=\"3\" class=\"w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition\"><\/textarea>\n <\/div>\n <div>\n <label for=\"open3\" class=\"block font-semibold mb-2\">3. What does <strong>CSS<\/strong> stand for and what is its main purpose?<\/label>\n <textarea id=\"open3\" rows=\"3\" class=\"w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition\"><\/textarea>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"exercises\">\n <h2 class=\"text-2xl font-bold text-red-600 border-l-4 border-red-600 pl-3 mb-6\">Part 4: Exercises<\/h2>\n <div class=\"space-y-8\">\n <div>\n <label for=\"ex1\" class=\"block font-semibold mb-2\">1. Write the HTML code for a webpage that has a main heading that says \"My Hobbies\" and an unordered list with three hobbies: \"Reading,\" \"Gaming,\" and \"Soccer.\"<\/label>\n <textarea id=\"ex1\" class=\"w-full code-textarea\"><\/textarea>\n <\/div>\n <div>\n <label for=\"ex2\" class=\"block font-semibold mb-2\">2. Write the HTML code for a heading that says \"This Heading is Green.\" Make the text actually appear green by using an inline CSS style attribute.<\/label>\n <textarea id=\"ex2\" class=\"w-full code-textarea\"><\/textarea>\n <\/div>\n <\/div>\n <\/section>\n\n \n <div class=\"mt-12 text-center\">\n <button type=\"button\" onclick=\"validateExam()\" class=\"bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg shadow-md transition-transform transform hover:scale-105\">\n Submit Exam\n <\/button>\n <\/div>\n\n \n <section id=\"results\" class=\"hidden mt-12 p-6 bg-gray-50 rounded-lg border\">\n <h2 class=\"text-2xl font-bold text-gray-700 text-center\">Results<\/h2>\n <p id=\"score\" class=\"text-center text-3xl font-bold my-4\"><\/p>\n <p id=\"feedback-message\" class=\"text-center text-gray-600\"><\/p>\n <\/section>\n <\/main>\n <\/div>\n\n <script>\n const correctAnswers = {\n q1: 'h1',\n q2: 'p',\n q3: 'a-href',\n q4: 'img',\n q5: 'alt',\n q6: 'ul-li',\n q7: 'html-comment',\n q8: 'body',\n q9: 'browser-tab',\n q10: 'style-attr',\n blank1: '<b>',\n blank2: 'href',\n blank3: '<ol>',\n blank4: 'src',\n blank5: '<html>'\n };\n\n function validateExam() {\n let score = 0;\n const totalMcq = 10;\n const totalFill = 5;\n const totalGraded = totalMcq + totalFill;\n\n \/\/ --- Part 1: Multiple Choice Validation ---\n for (let i = 1; i <= totalMcq; i++) {\n const questionName = `q${i}`;\n const selectedCheckboxes = document.querySelectorAll(`input[name=\"${questionName}\"]:checked`);\n const feedbackEl = document.getElementById(`feedback-${questionName}`);\n \n \/\/ For simplicity, we assume one correct answer. \n \/\/ Student is correct if they check ONLY the correct answer.\n const isCorrect = selectedCheckboxes.length === 1 && selectedCheckboxes[0].value === correctAnswers[questionName];\n\n if (isCorrect) {\n score++;\n feedbackEl.textContent = '\u2714\ufe0f Correct';\n feedbackEl.className = 'ml-2 font-bold correct-answer';\n } else {\n feedbackEl.textContent = '\u2716\ufe0f Incorrect';\n feedbackEl.className = 'ml-2 font-bold incorrect-answer';\n }\n\n \/\/ Highlight correct answer for learning\n const allOptions = document.querySelectorAll(`input[name=\"${questionName}\"]`);\n allOptions.forEach(option => {\n if (option.value === correctAnswers[questionName]) {\n option.parentElement.classList.add('correct-answer', 'font-bold');\n }\n });\n }\n\n \/\/ --- Part 2: Fill in the Blank Validation ---\n for (let i = 1; i <= totalFill; i++) {\n const blankId = `blank${i}`;\n const inputEl = document.getElementById(blankId);\n \/\/ Clean the input for comparison\n const userAnswer = inputEl.value.trim().toLowerCase();\n const correctAnswer = correctAnswers[blankId].toLowerCase();\n\n \/\/ Reset classes\n inputEl.classList.remove('correct-border', 'incorrect-border');\n\n if (userAnswer === correctAnswer) {\n score++;\n inputEl.classList.add('correct-border');\n } else {\n inputEl.classList.add('incorrect-border');\n }\n }\n\n \/\/ --- Display Results ---\n const resultsSection = document.getElementById('results');\n const scoreEl = document.getElementById('score');\n const feedbackMessageEl = document.getElementById('feedback-message');\n\n scoreEl.textContent = `${score} \/ ${totalGraded}`;\n scoreEl.className = 'text-center text-3xl font-bold my-4'; \/\/ Reset class\n if(score > totalGraded * 0.7) {\n scoreEl.classList.add('text-green-600');\n feedbackMessageEl.textContent = \"Great job! You have a solid understanding of the basics.\";\n } else if (score > totalGraded * 0.4) {\n scoreEl.classList.add('text-yellow-600');\n feedbackMessageEl.textContent = \"Good effort! A little more practice will make a big difference.\";\n } else {\n scoreEl.classList.add('text-red-600');\n feedbackMessageEl.textContent = \"Keep practicing! Review the highlighted answers to learn from your mistakes.\";\n }\n\n resultsSection.classList.remove('hidden');\n resultsSection.scrollIntoView({ behavior: 'smooth' });\n }\n <\/script>\n\n<\/body>\n<\/html>\n\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>HTML & CSS Basics Exam HTML & CSS Basics Exam Test your knowledge of web fundamentals! Name: Date: Part 1: Multiple Choice 1. What is the correct tag for the largest heading? <h6> <heading> <h1> <head> 2. Which tag is used to create a paragraph? <p> <para> <b> <body> 3. What is the correct way […]<\/p>","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4546","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts\/4546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/comments?post=4546"}],"version-history":[{"count":7,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts\/4546\/revisions"}],"predecessor-version":[{"id":4553,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts\/4546\/revisions\/4553"}],"wp:attachment":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/media?parent=4546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/categories?post=4546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/tags?post=4546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\n\n\n \n \n HTML & CSS Basics Exam<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Inter', sans-serif;\n }\n .code-textarea {\n font-family: monospace;\n background-color: #282c34;\n color: #abb2bf;\n border-radius: 8px;\n padding: 1rem;\n border: 1px solid #3e4451;\n outline: none;\n resize: vertical;\n min-height: 150px;\n }\n .correct-answer { color: #16a34a; }\n .incorrect-answer { color: #dc2626; }\n .correct-border { border-color: #16a34a !important; }\n .incorrect-border { border-color: #dc2626 !important; }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100 text-gray-800\">\n\n <div class=\"container mx-auto max-w-4xl my-12 p-8 bg-white rounded-2xl shadow-lg\">\n \n <header class=\"border-b-2 border-gray-200 pb-6 mb-8 text-center\">\n <h1 class=\"text-4xl font-bold text-gray-700\">HTML & CSS Basics Exam<\/h1>\n <p class=\"text-gray-500 mt-2\">Test your knowledge of web fundamentals!<\/p>\n <\/header>\n\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-10\">\n <div>\n <label for=\"name\" class=\"block text-sm font-medium text-gray-700 mb-1\">Name:<\/label>\n <input type=\"text\" id=\"name\" class=\"w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition\">\n <\/div>\n <div>\n <label for=\"date\" class=\"block text-sm font-medium text-gray-700 mb-1\">Date:<\/label>\n <input type=\"date\" id=\"date\" class=\"w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition\">\n <\/div>\n <\/div>\n\n <main id=\"exam-form\">\n \n <section id=\"multiple-choice\" class=\"mb-12\">\n <h2 class=\"text-2xl font-bold text-blue-600 border-l-4 border-blue-600 pl-3 mb-6\">Part 1: Multiple Choice<\/h2>\n <div class=\"space-y-8\">\n \n <div class=\"question-block\">\n <p class=\"font-semibold mb-2\">1. What is the correct tag for the <span class=\"font-bold\">largest<\/span> heading? <span id=\"feedback-q1\" class=\"ml-2 font-bold\"><\/span><\/p>\n <div class=\"space-y-2\">\n <div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q1\" value=\"h6\" class=\"form-checkbox text-blue-500\"> <span class=\"ml-2\"><h6><\/span><\/label><\/div>\n <div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q1\" value=\"heading\" class=\"form-checkbox text-blue-500\"> <span class=\"ml-2\"><heading><\/span><\/label><\/div>\n <div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q1\" value=\"h1\" class=\"form-checkbox text-blue-500\"> <span class=\"ml-2\"><h1><\/span><\/label><\/div>\n <div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q1\" value=\"head\" class=\"form-checkbox text-blue-500\"> <span class=\"ml-2\"><head><\/span><\/label><\/div>\n <\/div>\n <\/div>\n \n <div class=\"question-block\">\n <p class=\"font-semibold mb-2\">2. Which tag is used to create a <span class=\"font-bold\">paragraph<\/span>? <span id=\"feedback-q2\" class=\"ml-2 font-bold\"><\/span><\/p>\n <div class=\"space-y-2\">\n <div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q2\" value=\"p\" class=\"form-checkbox text-blue-500\"> <span class=\"ml-2\"><p><\/span><\/label><\/div>\n <div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q2\" value=\"para\" class=\"form-checkbox text-blue-500\"> <span class=\"ml-2\"><para><\/span><\/label><\/div>\n <div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q2\" value=\"b\" class=\"form-checkbox text-blue-500\"> <span class=\"ml-2\"><b><\/span><\/label><\/div>\n <div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q2\" value=\"body\" class=\"form-checkbox text-blue-500\"> <span class=\"ml-2\"><body><\/span><\/label><\/div>\n <\/div>\n <\/div>\n \n <div class=\"question-block\"><p class=\"font-semibold mb-2\">3. What is the correct way to create a <span class=\"font-bold\">link<\/span>? <span id=\"feedback-q3\" class=\"ml-2 font-bold\"><\/span><\/p><div class=\"space-y-2\"><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q3\" value=\"a-url\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><a url="...">Link<\/a><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q3\" value=\"a-href\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><a href="\/km\/...\/">Link<\/a><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q3\" value=\"a-only\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><a>...<\/a><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q3\" value=\"link-tag\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><link>...<\/link><\/span><\/label><\/div><\/div><\/div>\n \n <div class=\"question-block\"><p class=\"font-semibold mb-2\">4. Which tag is used to display an <span class=\"font-bold\">image<\/span>? <span id=\"feedback-q4\" class=\"ml-2 font-bold\"><\/span><\/p><div class=\"space-y-2\"><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q4\" value=\"image\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><image><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q4\" value=\"pic\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><pic><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q4\" value=\"jpeg\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><jpeg><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q4\" value=\"img\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><img><\/span><\/label><\/div><\/div><\/div>\n \n <div class=\"question-block\"><p class=\"font-semibold mb-2\">5. Which attribute provides <span class=\"font-bold\">alternative text<\/span> for an image if it cannot be displayed? <span id=\"feedback-q5\" class=\"ml-2 font-bold\"><\/span><\/p><div class=\"space-y-2\"><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q5\" value=\"src\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">src<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q5\" value=\"title\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">title<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q5\" value=\"alt\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">alt<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q5\" value=\"href\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">href<\/span><\/label><\/div><\/div><\/div>\n \n <div class=\"question-block\"><p class=\"font-semibold mb-2\">6. Which tags are used to create an <span class=\"font-bold\">unordered (bulleted) list<\/span>? <span id=\"feedback-q6\" class=\"ml-2 font-bold\"><\/span><\/p><div class=\"space-y-2\"><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q6\" value=\"ol-li\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><ol> and <li><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q6\" value=\"ul-li\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><ul> and <li><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q6\" value=\"list-item\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><list> and <item><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q6\" value=\"ul-i\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><ul> and <i><\/span><\/label><\/div><\/div><\/div>\n \n <div class=\"question-block\"><p class=\"font-semibold mb-2\">7. How do you add a <span class=\"font-bold\">comment<\/span> in an HTML file that the browser will ignore? <span id=\"feedback-q7\" class=\"ml-2 font-bold\"><\/span><\/p><div class=\"space-y-2\"><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q7\" value=\"js-comment\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">\/\/ This is a comment<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q7\" value=\"css-comment\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">\/* This is a comment *\/<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q7\" value=\"html-comment\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q7\" value=\"wrong-comment\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><-- This is a comment --!><\/span><\/label><\/div><\/div><\/div>\n \n <div class=\"question-block\"><p class=\"font-semibold mb-2\">8. Which tag contains all the <span class=\"font-bold\">visible content<\/span> of a webpage? <span id=\"feedback-q8\" class=\"ml-2 font-bold\"><\/span><\/p><div class=\"space-y-2\"><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q8\" value=\"head\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><head><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q8\" value=\"html\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><html><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q8\" value=\"title\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><title><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q8\" value=\"body\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><body><\/span><\/label><\/div><\/div><\/div>\n \n <div class=\"question-block\"><p class=\"font-semibold mb-2\">9. What is the purpose of the <span class=\"font-bold\"><title><\/span> tag? <span id=\"feedback-q9\" class=\"ml-2 font-bold\"><\/span><\/p><div class=\"space-y-2\"><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q9\" value=\"main-heading\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">To create the main heading on the page<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q9\" value=\"browser-tab\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">To set the text for the browser tab<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q9\" value=\"style-text\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">To add a style to the text<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q9\" value=\"link-page\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">To link to another page<\/span><\/label><\/div><\/div><\/div>\n \n <div class=\"question-block\"><p class=\"font-semibold mb-2\">10. How do you add an <span class=\"font-bold\">inline CSS style<\/span> to change an element's color to red? <span id=\"feedback-q10\" class=\"ml-2 font-bold\"><\/span><\/p><div class=\"space-y-2\"><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q10\" value=\"css-attr\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">css=\"color:red;\"<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q10\" value=\"style-tag\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\"><style>color:red;<\/style><\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q10\" value=\"design-attr\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">design=\"color:red;\"<\/span><\/label><\/div><div><label class=\"inline-flex items-center\"><input type=\"checkbox\" name=\"q10\" value=\"style-attr\" class=\"form-checkbox text-blue-500\"><span class=\"ml-2\">style=\"color:red;\"<\/span><\/label><\/div><\/div><\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"fill-in-the-blank\" class=\"mb-12\">\n <h2 class=\"text-2xl font-bold text-green-600 border-l-4 border-green-600 pl-3 mb-6\">Part 2: Fill in the Blank<\/h2>\n <div class=\"space-y-6\">\n <div class=\"flex items-center flex-wrap\">\n <label for=\"blank1\" class=\"mr-2\">1. To make text <strong>bold<\/strong>, you use the<\/label>\n <input type=\"text\" id=\"blank1\" class=\"form-input p-1 border-b-2 border-gray-300 focus:border-green-500 outline-none w-20 text-center\">\n <span class=\"ml-2\">tag.<\/span>\n <\/div>\n <div class=\"flex items-center flex-wrap\">\n <label for=\"blank2\" class=\"mr-2\">2. The attribute used to define the destination of a link in an <a> tag is<\/label>\n <input type=\"text\" id=\"blank2\" class=\"form-input p-1 border-b-2 border-gray-300 focus:border-green-500 outline-none w-20 text-center\">\n <span class=\"ml-0\">.<\/span>\n <\/div>\n <div class=\"flex items-center flex-wrap\">\n <label for=\"blank3\" class=\"mr-2\">3. An <strong>ordered<\/strong>, or numbered, list is created with the<\/label>\n <input type=\"text\" id=\"blank3\" class=\"form-input p-1 border-b-2 border-gray-300 focus:border-green-500 outline-none w-20 text-center\">\n <span class=\"ml-2\">tag.<\/span>\n <\/div>\n <div class=\"flex items-center flex-wrap\">\n <label for=\"blank4\" class=\"mr-2\">4. To insert an image, you use the <img> tag with the<\/label>\n <input type=\"text\" id=\"blank4\" class=\"form-input p-1 border-b-2 border-gray-300 focus:border-green-500 outline-none w-20 text-center\">\n <span class=\"ml-2\">attribute to point to the image file.<\/span>\n <\/div>\n <div class=\"flex items-center flex-wrap\">\n <label for=\"blank5\" class=\"mr-2\">5. All HTML documents must start with the <!DOCTYPE html> declaration and have a root<\/label>\n <input type=\"text\" id=\"blank5\" class=\"form-input p-1 border-b-2 border-gray-300 focus:border-green-500 outline-none w-20 text-center\">\n <span class=\"ml-2\">tag.<\/span>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"open-questions\" class=\"mb-12\">\n <h2 class=\"text-2xl font-bold text-purple-600 border-l-4 border-purple-600 pl-3 mb-6\">Part 3: Open Questions<\/h2>\n <div class=\"space-y-6\">\n <div>\n <label for=\"open1\" class=\"block font-semibold mb-2\">1. Explain the difference between an <h1> tag and a <p> tag.<\/label>\n <textarea id=\"open1\" rows=\"3\" class=\"w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition\"><\/textarea>\n <\/div>\n <div>\n <label for=\"open2\" class=\"block font-semibold mb-2\">2. What is the purpose of the <head> section in an HTML document?<\/label>\n <textarea id=\"open2\" rows=\"3\" class=\"w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition\"><\/textarea>\n <\/div>\n <div>\n <label for=\"open3\" class=\"block font-semibold mb-2\">3. What does <strong>CSS<\/strong> stand for and what is its main purpose?<\/label>\n <textarea id=\"open3\" rows=\"3\" class=\"w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition\"><\/textarea>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"exercises\">\n <h2 class=\"text-2xl font-bold text-red-600 border-l-4 border-red-600 pl-3 mb-6\">Part 4: Exercises<\/h2>\n <div class=\"space-y-8\">\n <div>\n <label for=\"ex1\" class=\"block font-semibold mb-2\">1. Write the HTML code for a webpage that has a main heading that says \"My Hobbies\" and an unordered list with three hobbies: \"Reading,\" \"Gaming,\" and \"Soccer.\"<\/label>\n <textarea id=\"ex1\" class=\"w-full code-textarea\"><\/textarea>\n <\/div>\n <div>\n <label for=\"ex2\" class=\"block font-semibold mb-2\">2. Write the HTML code for a heading that says \"This Heading is Green.\" Make the text actually appear green by using an inline CSS style attribute.<\/label>\n <textarea id=\"ex2\" class=\"w-full code-textarea\"><\/textarea>\n <\/div>\n <\/div>\n <\/section>\n\n \n <div class=\"mt-12 text-center\">\n <button type=\"button\" onclick=\"validateExam()\" class=\"bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg shadow-md transition-transform transform hover:scale-105\">\n Submit Exam\n <\/button>\n <\/div>\n\n \n <section id=\"results\" class=\"hidden mt-12 p-6 bg-gray-50 rounded-lg border\">\n <h2 class=\"text-2xl font-bold text-gray-700 text-center\">Results<\/h2>\n <p id=\"score\" class=\"text-center text-3xl font-bold my-4\"><\/p>\n <p id=\"feedback-message\" class=\"text-center text-gray-600\"><\/p>\n <\/section>\n <\/main>\n <\/div>\n\n <script>\n const correctAnswers = {\n q1: 'h1',\n q2: 'p',\n q3: 'a-href',\n q4: 'img',\n q5: 'alt',\n q6: 'ul-li',\n q7: 'html-comment',\n q8: 'body',\n q9: 'browser-tab',\n q10: 'style-attr',\n blank1: '<b>',\n blank2: 'href',\n blank3: '<ol>',\n blank4: 'src',\n blank5: '<html>'\n };\n\n function validateExam() {\n let score = 0;\n const totalMcq = 10;\n const totalFill = 5;\n const totalGraded = totalMcq + totalFill;\n\n \/\/ --- Part 1: Multiple Choice Validation ---\n for (let i = 1; i <= totalMcq; i++) {\n const questionName = `q${i}`;\n const selectedCheckboxes = document.querySelectorAll(`input[name=\"${questionName}\"]:checked`);\n const feedbackEl = document.getElementById(`feedback-${questionName}`);\n \n \/\/ For simplicity, we assume one correct answer. \n \/\/ Student is correct if they check ONLY the correct answer.\n const isCorrect = selectedCheckboxes.length === 1 && selectedCheckboxes[0].value === correctAnswers[questionName];\n\n if (isCorrect) {\n score++;\n feedbackEl.textContent = '\u2714\ufe0f Correct';\n feedbackEl.className = 'ml-2 font-bold correct-answer';\n } else {\n feedbackEl.textContent = '\u2716\ufe0f Incorrect';\n feedbackEl.className = 'ml-2 font-bold incorrect-answer';\n }\n\n \/\/ Highlight correct answer for learning\n const allOptions = document.querySelectorAll(`input[name=\"${questionName}\"]`);\n allOptions.forEach(option => {\n if (option.value === correctAnswers[questionName]) {\n option.parentElement.classList.add('correct-answer', 'font-bold');\n }\n });\n }\n\n \/\/ --- Part 2: Fill in the Blank Validation ---\n for (let i = 1; i <= totalFill; i++) {\n const blankId = `blank${i}`;\n const inputEl = document.getElementById(blankId);\n \/\/ Clean the input for comparison\n const userAnswer = inputEl.value.trim().toLowerCase();\n const correctAnswer = correctAnswers[blankId].toLowerCase();\n\n \/\/ Reset classes\n inputEl.classList.remove('correct-border', 'incorrect-border');\n\n if (userAnswer === correctAnswer) {\n score++;\n inputEl.classList.add('correct-border');\n } else {\n inputEl.classList.add('incorrect-border');\n }\n }\n\n \/\/ --- Display Results ---\n const resultsSection = document.getElementById('results');\n const scoreEl = document.getElementById('score');\n const feedbackMessageEl = document.getElementById('feedback-message');\n\n scoreEl.textContent = `${score} \/ ${totalGraded}`;\n scoreEl.className = 'text-center text-3xl font-bold my-4'; \/\/ Reset class\n if(score > totalGraded * 0.7) {\n scoreEl.classList.add('text-green-600');\n feedbackMessageEl.textContent = \"Great job! You have a solid understanding of the basics.\";\n } else if (score > totalGraded * 0.4) {\n scoreEl.classList.add('text-yellow-600');\n feedbackMessageEl.textContent = \"Good effort! A little more practice will make a big difference.\";\n } else {\n scoreEl.classList.add('text-red-600');\n feedbackMessageEl.textContent = \"Keep practicing! Review the highlighted answers to learn from your mistakes.\";\n }\n\n resultsSection.classList.remove('hidden');\n resultsSection.scrollIntoView({ behavior: 'smooth' });\n }\n <\/script>\n\n<\/body>\n<\/html>\n\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>HTML & CSS Basics Exam HTML & CSS Basics Exam Test your knowledge of web fundamentals! Name: Date: Part 1: Multiple Choice 1. What is the correct tag for the largest heading? <h6> <heading> <h1> <head> 2. Which tag is used to create a paragraph? <p> <para> <b> <body> 3. What is the correct way […]<\/p>","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4546","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts\/4546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/comments?post=4546"}],"version-history":[{"count":7,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts\/4546\/revisions"}],"predecessor-version":[{"id":4553,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts\/4546\/revisions\/4553"}],"wp:attachment":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/media?parent=4546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/categories?post=4546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/tags?post=4546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}