Quiz - Laning Page Template

##### Quiz - Practice Free Mock Test MCQs | PDF

Practice topic-wise ##### MCQs, take a free online Quiz, and download solved practice test questions in PDF format.

<!-- CSS -->

<style> body { background: white; margin-bottom: 30vh; } :root { --primary: #4f46e5; --correct: #16a34a; --incorrect: #dc2626; --bg: #f8fafc; --card: #ffffff; --text: #1e293b; --muted: #64748b; } .container-small { max-width: 750px; padding: 1rem; } .content { border: none; padding: 0; margin: 2rem auto; } .hero { display: block; min-height: 75vh; } .hero-title { display: block; margin: 2rem auto !important; line-height: 200%; } .hero-title b { display: block; } .hero-title b:nth-child(1) { font-size: 3rem; font-weight: 900; color: orange; margin: 2rem 0; } .hero-title b:nth-child(2) { font-size: 2.5rem; margin: 1rem 0; } .hero-title b:nth-child(3) { font-size: 2rem; font-weight: 100; } .hero::before { content: "\1F3C6"; font-size: 15rem; } .hero-title::before { content: "\275D"; text-align: left; } .hero-title::after { content: "\275E"; text-align: right; } .hero-title::before, .hero-title::after { display: block; color: orange; font-size: 3rem; } div.12 { width: 100%; } #start { display: block; background: white; position: fixed; bottom: 0; left: 0; right: 0; height: 20vh; border: none; cursor: pointer; } #start b { padding: 2rem 5rem; font-size: 2.5rem; font-weight: 700; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #000; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 0 1rem 0 transparent; animation: breathe 4s ease-in-out infinite; } #start b:hover { box-shadow: 0 0 1rem 0 gold; cursor: pointer; } div.background-muted.padding-small.text-center .button.button-danger.button-large.text-white { display: none !important; } @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); /* softer breathe – change to 1.15 or 1.2 if you want stronger */ } } @media (max-width: 768px) { #start b { padding: 1.5rem 1rem; font-size: 2rem; border-radius: 1rem; } .hero::before { font-size: 10rem; } .hero-title::before, .hero-title::after { display: none; } } /* ===== MCQ SECTION ===== */ section.mcqs details.mcq { background: var(--card); border: 1px solid #e2e8f0; border-radius: 12px; margin: 2rem 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } details.mcq>summary { list-style: none; cursor: pointer; padding: 1rem 1.25rem; font-weight: 500; display: flex; gap: 0.75rem; align-items: flex-start; user-select: none; } details.mcq>summary::-webkit-details-marker { display: none; } .mcq-index { background: var(--primary); color: white; font-size: 1rem; width: 2rem; height: 2rem; line-height: 2rem; flex-shrink: 0; text-align: center; border-radius: 5px; } .mcq-q {overflow: auto; max-width: 650px; padding-bottom: 1rem;} ol.mcq-options { list-style: none; padding: 0 1.25rem 1rem; counter-reset: option; } ol.mcq-options li { counter-increment: option; cursor: pointer; transition: all 0.2s ease; overflow: auto; max-width: 700px; display: flex; border: 1px solid #ddd; padding: 1rem; border-radius: 1rem; font-size: 1rem; line-height: 2rem; gap: 1rem; } ol.mcq-options li::before { content: counter(option, upper-alpha); display: inline-block; background: #eee; color: #444; width: 2rem; height: 2rem; line-height: 2rem; text-align: center; border-radius: 50%; flex-shrink: 0; } ol.mcq-options li:hover:not(.selected) { border-color: #c7d2fe; background: #eef2ff; } /* Click animation */ ol.mcq-options li.clicked { animation: optionPulse 0.35s ease; } @keyframes optionPulse { 0% { transform: scale(1); } 40% { transform: scale(0.96); } 100% { transform: scale(1); } } /* Correct / Incorrect states */ ol.mcq-options li.correct-selected { border-color: var(--correct); background: #f0fdf4; } ol.mcq-options li.correct-selected::before { background: var(--correct); color: white; } ol.mcq-options li.incorrect-selected { border-color: var(--incorrect); background: #fef2f2; } ol.mcq-options li.incorrect-selected::before { background: var(--incorrect); color: white; } /* Answer panel */ .answer { display: none; padding: 1rem 1.25rem; margin: 0 1.25rem 1.25rem; background: #f1f5f9; border-left: 4px solid var(--primary); border-radius: 0 8px 8px 0; font-size: 0.95rem; color: #334155; } .answer.show { display: block; animation: slideDown 0.3s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ===== FORMULAS SECTION ===== */ section.formulas { margin-top: 3rem; background: var(--card); border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; } /* Confetti canvas */ #confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; } h1, h2, h3, h4, h5, h6 {margin: 2rem 0 !important; background: none !important; padding: 1rem 0 !important;} .action1 {text-align: center; background: #f8f8f8; padding: 1rem 0;} summary {cursor: pointer; padding: 1rem 0;} .margin-top-large {margin-top: 0 !important;}</style>

<!-- MATHJAX Formatting $ / $$ -->

<script>

window.MathJax = {

tex: {

inlineMath: [['\$', '\$'], ['$', '$']],

displayMath: [['\\[', '\\]'], ['$$', '$$']]

}

};

</script>

<!-- Print MCQs -->

<script>

function printMCQs() {

const mcqs = document.querySelector('section.mcqs');

if (!mcqs) return;

const printWindow = window.open('', '_blank');

printWindow.document.write(`

<!DOCTYPE html>

<html>

<head>

<title>##### Practice Test Questions</title>

<style>

@media print {

@page {

margin: 15mm;

}

}

</style>

</head>

<body>

${mcqs.outerHTML}

</body>

</html>

`);

printWindow.document.close();

printWindow.focus();

printWindow.onload = function () {

printWindow.print();

printWindow.close();

};

}

</script>

<!-- MATHJAX CDN -->

<script defer src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>

<!-- Action Buttons - Practice / Print PDF -->

<section class="action1">

<a href="#practice" class="button button-primary text-white">Practice Test Questions</a>

<button type="button" onclick="printMCQs()" class="button button-warning text-white">Free PDF</button>

</section>

<!-- Action Buttons for Quiz -->

<section class="action2">

<canvas id="confetti-canvas"></canvas>

<button id="start"><b>🚀 Start Quiz</b></button>

<section class="quiz"></section>

</section>

<!-- Loader Overlay -->

<div id="quiz-loader">

<div class="loader-spinner"></div>

<div class="countdown-number" id="countdown-number">3</div>

<div class="loader-text">Get Ready</div>

</div>

<!-- Quiz Parameters -->

<script>

const totalQuizTime = 30;

const marksPerQuestion = 4;

const negativeMarks = 1;

const passPercentage = 30;

const streakBonus = 1;

</script>

<!-- // START // -->

<!-- // END // -->

<!-- Quiz JS -->

<script src="https://cdn.jsdelivr.net/gh/oneprt/testmocks-quiz-1@main/qtm2.js"></script>

<!-- Quiz CSS -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/oneprt/testmocks-quiz-1@main/qtm1.css">