|
1.
|
Which tag can set the background color for your page ?1. 2. 3. 4.
</h2>
</td>
</tr>
</thead>
<tbody class="border-b border-gray-300 bg-gray-50 dark:bg-gray-900 dark:border-gray-700">
<tr class="dark:text-gray-300">
<td class="py-2 pl-4">A.</td>
<td class="py-2">ption 1</td>
</tr>
<tr class="dark:text-gray-300">
<td class="py-2 pl-4">B.</td>
<td class="py-2">ption 2</td>
</tr>
<tr class="dark:text-gray-300">
<td class="py-2 pl-4">C.</td>
<td class="py-2">ption 3</td>
</tr>
<tr class="dark:text-gray-300">
<td class="py-2 pl-4">D.</td>
<td class="py-2">ption 4</td>
</tr>
</tbody>
<tfoot class="bg-[#eafeea] dark:bg-gray-900 mcq_answer">
<tr>
<td colspan="2" class="pt-2 pl-3 dark:text-gray-200">
Answer» B. ption 2
</td>
</tr>
</tfoot>
<tfoot class="bg-gray-100 dark:bg-gray-900 mcq_show_btn hidden">
<tr>
<td colspan="2" class="p-2 text-center">
<button class="show_individual px-2 py-1 text-sm border border-violet-500 rounded text-violet-600 hover:bg-violet-100">
Show Answer
</button>
</td>
</tr>
</tfoot>
</table>
<div class="bg-[#eafeea] px-3 pb-1 rounded-b-lg flex justify-end items-center gap-3 text-slate-600 ans_footer dark:bg-gray-900">
<!-- <a class="dark:text-gray-300" href="" target="_blank">
<span>discuss</span>
</a> -->
</div>
</div>
<!-- comment section -->
<br><br>
<h2 class="pl-2 font-semibold text-gray-800 border-l-2 rounded-md text-md md:text-xl dark:text-gray-300 border-primary-600">
Discussion
</h2>
<div class="w-full py-2 bg-white rounded-lg dark:bg-black">
<div class="w-full my-4 space-y-4">
<h3>No Comment Found</h3>
<div class="mt-8">
<form action="https://mcqoptions.com/postComment" method="post">
<input type="hidden" name="_token" value="0nUtp6Kavo5ZHSIQbya9muXaahpqImbU4dd72Ty0" autocomplete="off"> <input type="text" name="name" class="w-full p-3 mb-2 bg-gray-100 border border-gray-400 rounded outline-none focus:ring-2 focus:ring-primary-600 dark:bg-gray-900 dark:text-gray-300" placeholder="Name*" required>
<input type="email" name="email" class="w-full p-3 mb-2 bg-gray-100 border border-gray-400 rounded outline-none focus:ring-2 focus:ring-primary-600 dark:bg-gray-900 dark:text-gray-300" placeholder="Email*" required>
<input type="hidden" name="q_id" value="2082998">
<textarea name="comment" class="w-full p-3 bg-gray-100 border border-gray-400 rounded outline-none focus:ring-2 focus:ring-primary-600 h-28 dark:bg-gray-900 dark:text-gray-300" placeholder="comment*" required>
</textarea>
<div class="text-xs text-red-500">
</div>
<div class="flex justify-end mt-4">
<button type="submit" class="relative inline-flex btn-primary">
<span >
Post Comment
</span>
</button>
</div>
</form>
</div>
</div>
</div>
<!-- related mcqs -->
<div class="p-2 my-4 text-lg border-gray-400 rounded-lg dark:text-gray-100 relative p-2 mb-3 text-lg border border-gray-200 rounded-lg dark:bg-gray-900 dark:border-none">
<h3 class=" px-2 mb-2 -ml-2 text-xl font-semibold border-l-4 rounded-sm dark:text-gray-100 border-primary-600">Related MCQs</h3>
<ul class="flex flex-col gap-2 py-4 pl-8 list-disc dark:text-gray-200">
<li>
<a href="https://mcqoptions.com/discussion/to-creat-a-list-using-lowercase-letters-use1-2083017" class="text-gray-600 dark:text-gray-300 ">
To creat a list using lowercase letters, use1. <ol "a">2. <ol="a">3. <ol letter="a">4. <ol type="a">
</a>
</li>
<li>
<a href="https://mcqoptions.com/discussion/to-start-a-list-at-the-count-of-2083014" class="text-gray-600 dark:text-gray-300 ">
To start a list at the count of 3, use1. <ol begin="3">2. <ol list="3">3. <ol start="3">4. <ol num="3">
</a>
</li>
<li>
<a href="https://mcqoptions.com/discussion/what-is-the-correct-html-tag-for-inserting-2083011" class="text-gray-600 dark:text-gray-300 ">
What is the correct HTML tag for inserting a linebreak ?1. <break>2. <lb>3. <pre>4. <br>
</a>
</li>
<li>
<a href="https://mcqoptions.com/discussion/what-is-the-correct-html-code-for-inserting-2083007" class="text-gray-600 dark:text-gray-300 ">
What is the correct HTML code for inserting an image ?1. image.gif2. 3.
</a>
</li>
<li>
<a href="https://mcqoptions.com/discussion/the-special-formatting-tag-is1-2-3-2083005" class="text-gray-600 dark:text-gray-300 ">
The special formatting tag is1. <P>2. <TT>3. <PRE>
</a>
</li>
<li>
<a href="https://mcqoptions.com/discussion/the-tag-which-allows-some-web-server-search-2083003" class="text-gray-600 dark:text-gray-300 ">
The tag which allows some Web server search engines to search your Web page.1. <SEARCH>2. <ISINDEX>3. <HEAD>4. <LINK>
</a>
</li>
<li>
<a href="https://mcqoptions.com/discussion/choose-the-correct-html-tag-to-left-align-the-2083002" class="text-gray-600 dark:text-gray-300 ">
Choose the correct HTML tag to left-align the content inside a table cell1. <td leftalign>2. <td align=”left”>3. <td valign=”left”>4. <td="left">
</a>
</li>
<li>
<a href="https://mcqoptions.com/discussion/the-and-tags-are-special-in-2083000" class="text-gray-600 dark:text-gray-300 ">
The <small> and <big> tags are special in what way ?
</a>
</li>
<li>
<a href="https://mcqoptions.com/discussion/which-tag-can-set-the-background-color-for-2082998" class="text-gray-600 dark:text-gray-300 ">
Which tag can set the background color for your page ?1. <body>2. <font>3. <head>4. <title>
</a>
</li>
<li>
<a href="https://mcqoptions.com/discussion/which-of-the-following-is-underline-tag-1-2082996" class="text-gray-600 dark:text-gray-300 ">
Which of the following is underline tag ?1. <PRE>2. <UL>3. <U>4. <HR>
</a>
</li>
</ul>
</div>
</main>
<aside class="py-4 md:w-1/3 lg:w-1/4">
<div class="relative p-2 mb-12 text-lg border border-gray-200 rounded-lg dark:bg-gray-900 dark:border-none">
<div class="flex items-center gap-2 px-2 mb-2 -ml-2 text-xl font-semibold border-l-4 rounded-sm dark:text-gray-100 border-primary-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" data-slot="icon" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
</svg>
<span>Related Topics</span>
</div>
<div class="flex flex-col gap-2 px-2 font-serif text-md ">
<a href="https://mcqoptions.com/topic/elements-attributes-support-web-applications-in-html-3135" class="text-gray-600 dark:text-gray-300 " >
Elements Attributes Support Web Applications in Html
</a>
<hr class="dark:border-gray-600/50">
<a href="https://mcqoptions.com/topic/html5-semantics-youtube-videos-in-html-3167" class="text-gray-600 dark:text-gray-300 " >
Html5 Semantics Youtube Videos in Html
</a>
<hr class="dark:border-gray-600/50">
<a href="https://mcqoptions.com/topic/responsive-overview-in-html-3288" class="text-gray-600 dark:text-gray-300 " >
Responsive Overview in Html
</a>
<hr class="dark:border-gray-600/50">
<a href="https://mcqoptions.com/topic/html-geolocation-in-html-4366" class="text-gray-600 dark:text-gray-300 " >
Html Geolocation in Html
</a>
<hr class="dark:border-gray-600/50">
<a href="https://mcqoptions.com/topic/optimization-images-in-html-4533" class="text-gray-600 dark:text-gray-300 " >
Optimization Images in Html
</a>
<hr class="dark:border-gray-600/50">
<a href="https://mcqoptions.com/topic/essential-javascript-jquery-in-html-4551" class="text-gray-600 dark:text-gray-300 " >
Essential Javascript Jquery in Html
</a>
<hr class="dark:border-gray-600/50">
<a href="https://mcqoptions.com/topic/html5-semantics-in-html-4610" class="text-gray-600 dark:text-gray-300 " >
Html5 Semantics in Html
</a>
<hr class="dark:border-gray-600/50">
<a href="https://mcqoptions.com/topic/web-storage-in-html-4742" class="text-gray-600 dark:text-gray-300 " >
Web Storage in Html
</a>
<hr class="dark:border-gray-600/50">
<a href="https://mcqoptions.com/topic/drag-drop-in-html-5178" class="text-gray-600 dark:text-gray-300 " >
Drag Drop in Html
</a>
<hr class="dark:border-gray-600/50">
<a href="https://mcqoptions.com/topic/html5-document-structure-changes-in-html-5454" class="text-gray-600 dark:text-gray-300 " >
Html5 Document Structure Changes in Html
</a>
<hr class="dark:border-gray-600/50">
</div>
</div>
<fieldset class=" text-lg border border-gray-200 rounded-lg p-2 mb-4 dark:border-gray-600" id="recent_visits_container">
<legend class="px-2 text-xl font-semibold dark:text-gray-300">
Recent Visits
</legend>
<div class="flex flex-col gap-2 px-2 text-md font-serif" id="links_container">
<a href="https://mcqoptions.com/subject/html5-document-structure-changes-in-html-5454" class="text-gray-600 dark:text-gray-300 "> </a>
<hr class="dark:border-gray-600/50">
</div>
</fieldset>
</aside>
</div>
<!-- Modal (Tailwind, centered + fade) -->
<div id="replyModal" class="fixed inset-0 z-50 hidden flex items-center justify-center">
<!-- Backdrop -->
<div id="replyOverlay" class="absolute inset-0 bg-black/50 opacity-0 transition-opacity duration-200 ease-out" style="background: rgba(0, 0, 0, 0.5);"></div>
<!-- Dialog -->
<div id="replyDialog" class="relative mx-4 w-full max-w-lg rounded-2xl bg-white dark:bg-gray-800 shadow-2xl opacity-0 scale-95 transition-all duration-200 ease-out">
<div class="p-5">
<div class="mb-3 flex items-center justify-between">
<h5 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Reply to Comment</h5>
<button type="button" class="close-btn text-2xl leading-none text-gray-500 hover:text-gray-800 dark:text-gray-300">×</button>
</div>
<form method="POST" action="https://mcqoptions.com/postComment" id="replyForm" class="space-y-4">
<input type="hidden" name="_token" value="0nUtp6Kavo5ZHSIQbya9muXaahpqImbU4dd72Ty0" autocomplete="off"> <input type="hidden" name="parent_id" id="parentIdInput">
<div>
<label class="block text-sm font-medium mb-1 dark:text-gray-200">Name <span style="color:red;">*</span></label>
<input type="text" name="name" class="w-full rounded border border-gray-300 px-3 py-2 focus:outline-none focus:ring focus:ring-indigo-300 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100" required>
</div>
<div>
<label class="block text-sm font-medium mb-1 dark:text-gray-200">Email <span style="color:red;">*</span></label>
<input type="email" name="email" class="w-full rounded border border-gray-300 px-3 py-2 focus:outline-none focus:ring focus:ring-indigo-300 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100" required>
</div>
<div>
<label class="block text-sm font-medium mb-1 dark:text-gray-200">Comment <span style="color:red;">*</span></label>
<textarea name="comment" rows="3" class="w-full rounded border border-gray-300 px-3 py-2 focus:outline-none focus:ring focus:ring-indigo-300 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100" required></textarea>
</div>
<div class="mt-4 flex justify-end gap-3">
<button type="submit" class="inline-flex items-center btn-primary rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">
Submit Reply
</button>
</div>
</form>
</div>
</div>
</div>
<!-- jQuery (already included) -->
<script>
function openReplyModal() {
const $modal = $('#replyModal');
const $overlay = $('#replyOverlay');
const $dialog = $('#replyDialog');
$modal.removeClass('hidden');
$('body').addClass('overflow-hidden');
// animate in (fade + scale)
// small timeout ensures transition runs after display change
setTimeout(() => {
$overlay.removeClass('opacity-0'); // backdrop fade in
$dialog.removeClass('opacity-0 scale-95'); // dialog fade + scale up
}, 10);
}
function closeReplyModal() {
const $modal = $('#replyModal');
const $overlay = $('#replyOverlay');
const $dialog = $('#replyDialog');
// animate out
$overlay.addClass('opacity-0');
$dialog.addClass('opacity-0 scale-95');
// wait for transition to finish, then hide container
setTimeout(() => {
$modal.addClass('hidden');
$('body').removeClass('overflow-hidden');
}, 200); // matches duration-200
}
// open on reply click
$(document).on('click', '.reply-btn', function () {
const cmntId = $(this).data('cmntid');
$('#parentIdInput').val(cmntId);
openReplyModal();
// focus first input for UX
setTimeout(() => $('#replyForm input[name="name"]').trigger('focus'), 220);
});
// close triggers
$(document).on('click', '.close-btn', closeReplyModal);
$(document).on('click', '#replyOverlay', closeReplyModal);
$(document).on('keydown', function (e) {
if (e.key === 'Escape' && !$('#replyModal').hasClass('hidden')) {
closeReplyModal();
}
});
// optional: disable submit while posting
$('#replyForm').on('submit', function () {
$(this).find('button[type="submit"]').prop('disabled', true).addClass('opacity-70 cursor-not-allowed');
});
</script>
<footer class="px-3 border-t-2 lg:px-9 bg-gray-50 dark:bg-black dark:text-gray-300 dark:border-gray-700">
<div class="flex flex-col-reverse items-md-center items-center justify-between gap-2 py-5 text-sm lg:flex-row">
<p> © Copyright 2025 McqOptions. All rights reserved. </p>
<ul class="flex items-md-center items-center gap-2 mb-4 text-sm sm:flex-row md:mb-0">
<li class="md:border-r-2 dark:border-gray-700 md:pr-2">
<a href="https://mcqoptions.com/terms-condition"> Terms & Conditions </a>
</li>
<li class="md:border-r-2 dark:border-gray-700 md:pr-2">
<a href="https://mcqoptions.com/privacy-policy"> Privacy Policy </a>
</li>
<li class="dark:border-gray-700 md:pr-2">
<a href="https://mcqoptions.com/disclaimer"> Disclaimer </a>
</li>
</ul>
<p>Support: <a href="javascript:;" title="send email">admin@mcqoptions.com</a> </p>
</div>
</footer>
<link rel="modulepreload" href="https://mcqoptions.com/assets/build/assets/app-BO9Klyof.js" />
<script type="module" src="https://mcqoptions.com/assets/build/assets/app-BO9Klyof.js" data-navigate-track="reload"></script>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script src="https://mcqoptions.com/assets/build/assets/script.js"></script>
<script>
particlesJS.load('particles-js', "https://mcqoptions.com/assets/build/assets/particlesjs-config.json", function() {
console.log('callback - particles.js config loaded');
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
let visits = JSON.parse(localStorage.getItem("recent_visits")) || [];
// get current page details
let currentUrl = window.location.href;
let currentTitle = document.title; // or set manually if you prefer
// check if already exists (avoid duplicates)
visits = visits.filter(item => item.url !== currentUrl);
// add to beginning
visits.unshift({ url: currentUrl, title: currentTitle });
// keep only 10 latest
if (visits.length > 10) {
visits = visits.slice(0, 10);
}
// save back
localStorage.setItem("recent_visits", JSON.stringify(visits));
// render
renderVisits();
function renderVisits() {
let container = document.getElementById("links_container");
container.innerHTML = "";
if (visits.length === 0) {
container.innerHTML = `<p class="text-gray-500 dark:text-gray-400">No recent visits</p>`;
return;
}
visits.forEach(item => {
let a = document.createElement("a");
a.href = item.url;
a.textContent = item.title;
a.className = "text-gray-600 dark:text-gray-300 hover:underline";
let hr = document.createElement("hr");
hr.className = "dark:border-gray-600/50";
container.appendChild(a);
container.appendChild(hr);
});
}
});
</script>
</body>
</html> |
