




<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>GyanXp</title>
	<atom:link href="https://gyanxp.com/feed/" rel="self" type="application/rss+xml" />
	<link>https://gyanxp.com/</link>
	<description>अपनी Online Class</description>
	<lastBuildDate>Thu, 01 Oct 2026 13:39:20 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1.3</generator>

<image>
	<url>https://gyanxp.com/wp-content/uploads/2025/02/image-1.webp</url>
	<title>GyanXp</title>
	<link>https://gyanxp.com/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>tool</title>
		<link>https://gyanxp.com/tool/</link>
					<comments>https://gyanxp.com/tool/#respond</comments>
		
		<dc:creator><![CDATA[Balmukund Maurya]]></dc:creator>
		<pubDate>Thu, 24 Sep 2026 16:49:49 +0000</pubDate>
				<category><![CDATA[Uncategorized]]></category>
		<guid isPermaLink="false">https://gyanxp.com/?p=6447</guid>

					<description><![CDATA[<p>GyanXp Master Portal &#8211; Unified Tool Suite G GyanXp Master Suite Enter your secure credentials to access the tools portal Login ID Password Invalid Login ID or Password! Access Portal G GyanXp Unified Master Portal High-performance production tool suite for educational content Tool 1: MCQ Format Converter Tool 2: GyanXp Document Generator MCQ Format Converter [&#8230;]</p>
<p>The post <a href="https://gyanxp.com/tool/">tool</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="6447" class="elementor elementor-6447">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-4959ccc elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4959ccc" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7832d19" data-id="7832d19" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-a9fbfb3 elementor-widget elementor-widget-html" data-id="a9fbfb3" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GyanXp Master Portal - Unified Tool Suite</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Mammoth.js for robust .docx file parsing -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fira+Code:wght@450;600&family=Noto+Sans+Devanagari:wght@600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-orange: #FF6B00;
            --primary-orange-hover: #e56000;
            --dark-slate: #1e293b;
            --bg-main: #f8fafc;
            --card-bg: #ffffff;
            --border-color: #cbd5e1;
            --text-main: #0f172a;
            --text-muted: #64748b;
        }
        
        body {
            background-color: var(--bg-main) !important;
            color: var(--text-main) !important;
            font-family: 'Inter', 'Noto Sans Devanagari', sans-serif;
        }

        .portal-tool-section { display: none !important; }
        .portal-tool-section.active-portal-tool { display: flex !important; flex-direction: column !important; flex-grow: 1 !important; }
        
        .portal-card { background: var(--card-bg); border: 1.5px solid var(--border-color); border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02); }
        
        #portalContainerTool2 .analysis-dashboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 5px; }
        #portalContainerTool2 .dashboard-metric-card { background: var(--card-bg); border: 1.5px solid var(--border-color); border-radius: 12px; padding: 16px 20px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02); display: flex; flex-direction: column; justify-content: center; }
        #portalContainerTool2 .dashboard-metric-title { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
        #portalContainerTool2 .dashboard-metric-value { font-size: 22px; font-weight: 800; color: var(--dark-slate); }
        #portalContainerTool2 .card { background: var(--card-bg); padding: 35px; border-radius: 16px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); border: 1.5px solid var(--border-color); }
        #portalContainerTool2 .brand-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; border-bottom: 2px solid #f1f5f9; padding-bottom: 20px; }
        #portalContainerTool2 .brand-logo-circle { width: 50px; height: 50px; background: var(--dark-slate); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-orange); font-weight: 800; font-size: 26px; box-shadow: 0 4px 12px rgba(255, 107, 0, 0.2); }
        #portalContainerTool2 h2 { margin: 0; color: var(--dark-slate); font-size: 24px; font-weight: 700; letter-spacing: -0.025em; }
        #portalContainerTool2 .category-section { background: #f8fafc; border: 1.5px solid var(--border-color); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
        #portalContainerTool2 .category-title { font-size: 14px; font-weight: 700; color: var(--primary-orange); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
        #portalContainerTool2 .form-group { margin-bottom: 16px; }
        #portalContainerTool2 .form-group:last-child { margin-bottom: 0; }
        #portalContainerTool2 label { font-weight: 600; display: block; margin-bottom: 6px; font-size: 13px; color: var(--dark-slate); }
        #portalContainerTool2 input[type="file"], #portalContainerTool2 select, #portalContainerTool2 input[type="number"], #portalContainerTool2 input[type="text"], #portalContainerTool2 input[type="password"] { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border-color); border-radius: 10px; box-sizing: border-box; font-family: inherit; font-size: 14px; color: var(--text-main); background: #ffffff; transition: all 0.2s ease; }
        #portalContainerTool2 input[type="file"]:focus, #portalContainerTool2 select:focus, #portalContainerTool2 input[type="number"]:focus, #portalContainerTool2 input[type="text"]:focus, #portalContainerTool2 input[type="password"]:focus { outline: none; border-color: var(--primary-orange); box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15); }
        #portalContainerTool2 .color-picker-wrapper { display: flex; align-items: center; gap: 12px; background: #ffffff; padding: 8px 12px; border: 1.5px solid var(--border-color); border-radius: 10px; }
        #portalContainerTool2 .color-picker-wrapper span { font-size: 12px; font-weight: 600; color: var(--text-muted); }
        #portalContainerTool2 input[type="color"].sm-picker { width: 34px; height: 34px; border: none; padding: 0; background: none; cursor: pointer; border-radius: 6px; }
        #portalContainerTool2 .row { display: flex; gap: 16px; }
        #portalContainerTool2 .row > div { flex: 1; }
        #portalContainerTool2 .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
        #portalContainerTool2 .btn-group { display: flex; gap: 12px; margin-top: 25px; }
        #portalContainerTool2 button { background: var(--primary-orange); color: white; border: none; padding: 14px 28px; border-radius: 10px; font-weight: 600; font-size: 15px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(255, 107, 0, 0.25); width: 100%; }
        #portalContainerTool2 button:hover { background: var(--primary-orange-hover); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 107, 0, 0.35); }
        #portalContainerTool2 button.secondary { background: var(--dark-slate); box-shadow: 0 4px 12px rgba(30, 41, 59, 0.2); width: auto; color: #ffffff; }
        #portalContainerTool2 button.secondary:hover { background: #0f172a; box-shadow: 0 6px 16px rgba(30, 41, 59, 0.3); }
        #portalContainerTool2 button.reset-btn { background: #ef4444; padding: 6px 12px; font-size: 11px; margin-left: auto; width: auto; box-shadow: none; color: #ffffff; }
        #portalContainerTool2 button.reset-btn:hover { background: #dc2626; }
        #portalContainerTool2 button.nav-btn { background: #475569; padding: 10px 16px; font-size: 13px; width: auto; box-shadow: none; color: #ffffff; }
        #portalContainerTool2 button.nav-btn:hover { background: #334155; }
        #portalContainerTool2 #t2PreviewContainer { display: none; }
        #portalContainerTool2 .slide-viewport { width: 100%; height: 520px; border: 2px solid #e2e8f0; border-radius: 12px; margin-top: 15px; background: #0f172a; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; box-shadow: inset 0 2px 8px rgba(0,0,0,0.2); }
        #portalContainerTool2 .slide-canvas { background: white; background-size: 100% 100% !important; background-position: center !important; background-repeat: no-repeat !important; box-shadow: 0 20px 35px -10px rgba(0,0,0,0.3); box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; position: relative; transition: all 0.2s ease; }
        #portalContainerTool2 .set-divider-title { font-size: 64px; font-weight: 900; text-align: center; margin: auto; letter-spacing: 2px; text-transform: uppercase; z-index: 2; }
        #portalContainerTool2 .q-hindi, #portalContainerTool2 .q-english, #portalContainerTool2 .stmt-item, #portalContainerTool2 .opt-item { box-sizing: border-box; z-index: 2; word-break: break-word; overflow-wrap: break-word; white-space: normal; width: 100%; }
        #portalContainerTool2 .question-row-container { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 20px; width: 100%; box-sizing: border-box; z-index: 2; }
        #portalContainerTool2 .question-text-side { flex: 1; display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; }
        #portalContainerTool2 .question-image-side { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: flex-end; }
        #portalContainerTool2 .question-image-box { object-fit: contain; border: none !important; background: transparent !important; display: block; box-shadow: none !important; }
        #portalContainerTool2 .code-preview-box { font-family: 'Fira Code', monospace; padding: 6px 10px; margin: 6px 0; font-size: 0.8em; line-height: 1.4; white-space: pre; z-index: 2; box-sizing: border-box; display: inline-block; }
        #portalContainerTool2 .syntax-keyword { color: #2563eb; font-weight: bold; }
        #portalContainerTool2 .syntax-function { color: #7c3aed; font-weight: bold; }
        #portalContainerTool2 .syntax-string { color: #16a34a; }
        #portalContainerTool2 .syntax-number { color: #d97706; }
        #portalContainerTool2 .ak-container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; overflow: hidden; z-index: 2; padding: 15px; }
        #portalContainerTool2 .ak-title { text-align: center; font-size: 20px; font-weight: 800; letter-spacing: 1px; margin-bottom: 12px; text-transform: uppercase; color: #cc0000; }
        #portalContainerTool2 .pro-ak-table { width: 100%; border-collapse: collapse; border: 1.5px solid #000000; background: #ffffff; table-layout: fixed; }
        #portalContainerTool2 .pro-ak-table td { padding: 5px 2px; font-size: 11px; font-weight: bold; text-align: center; border: 1px solid #000000; color: #000000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        #portalContainerTool2 .pro-ak-table tr:nth-child(even) td { background-color: #d1d5db; }
        #portalContainerTool2 .preview-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; background: #f8fafc; padding: 12px 18px; border-radius: 10px; border: 1.5px solid var(--border-color); flex-wrap: wrap; gap: 12px; }
        #portalContainerTool2 .badge { background: #fff7ed; color: var(--primary-orange); padding: 3px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; border: 1px solid #fed7aa; }
        #portalContainerTool2 .section-title { font-size: 13px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; color: var(--dark-slate); text-transform: uppercase; letter-spacing: 0.025em; }
        #portalContainerTool2 .checkbox-card { display: flex; align-items: center; gap: 12px; background: #ffffff; padding: 12px 16px; border-radius: 10px; border: 1.5px solid var(--border-color); cursor: pointer; height: 100%; box-sizing: border-box; }
        #portalContainerTool2 .checkbox-card input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primary-orange); cursor: pointer; }
        #portalContainerTool2 .checkbox-card label { margin-bottom: 0; cursor: pointer; font-weight: 600; color: var(--dark-slate); text-transform: none; font-size: 14px; }
        #portalContainerTool2 .file-info-badge { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--primary-orange); }
    </style>
</head>
<body class="min-h-screen flex flex-col selection:bg-orange-500 selection:text-white">

    <!-- GLOBAL SECURE LOGIN OVERLAY -->
    <div id="masterLoginOverlay" class="fixed inset-0 bg-slate-900/80 backdrop-blur-md flex items-center justify-center z-[999999] px-4">
        <div class="portal-card bg-white p-8 rounded-3xl w-full max-w-md shadow-2xl text-center relative overflow-hidden">
            <div class="absolute -top-12 -right-12 w-32 h-32 bg-orange-600/15 rounded-full blur-2xl"></div>
            <div class="w-16 h-16 bg-gradient-to-tr from-orange-600 to-amber-500 text-white rounded-2xl flex items-center justify-center text-3xl font-black mx-auto mb-6 shadow-lg shadow-orange-600/30">G</div>
            <h2 class="text-xl font-extrabold text-slate-900 tracking-tight mb-1">GyanXp Master Suite</h2>
            <p class="text-slate-500 text-xs mb-8">Enter your secure credentials to access the tools portal</p>
            
            <div class="space-y-4 text-left">
                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Login ID</label>
                    <input type="text" id="masterLoginId" placeholder="Enter Login ID" class="w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-orange-500 focus:ring-1 focus:ring-orange-500 transition-all">
                </div>
                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Password</label>
                    <input type="password" id="masterLoginPass" placeholder="Enter Password" onkeypress="handleMasterLoginKey(event)" class="w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-orange-500 focus:ring-1 focus:ring-orange-500 transition-all">
                </div>
            </div>

            <div id="masterLoginError" class="text-rose-600 text-xs font-semibold mt-3 hidden">Invalid Login ID or Password!</div>

            <button onclick="verifyMasterLogin()" class="w-full mt-6 bg-gradient-to-r from-orange-600 to-amber-600 hover:from-orange-500 hover:to-amber-500 text-white font-bold py-3 px-4 rounded-xl shadow-lg shadow-orange-600/25 transition-all text-sm tracking-wide cursor-pointer">
                Access Portal
            </button>
        </div>
    </div>

    <!-- Global Portal Selector Navigation Header -->
    <header class="bg-white/90 backdrop-blur-md border-b border-slate-200 shadow-sm sticky top-0 z-[99999]">
        <div class="max-w-7xl mx-auto px-4 py-3.5 flex flex-col sm:flex-row justify-between items-center gap-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-gradient-to-tr from-orange-600 to-amber-500 text-white rounded-xl flex items-center justify-center text-lg font-black shadow-md shadow-orange-600/30">G</div>
                <div>
                    <h1 class="text-base font-extrabold tracking-tight text-slate-900 flex items-center gap-2">
                        GyanXp Unified Master Portal
                    </h1>
                    <p class="text-slate-500 text-xs">High-performance production tool suite for educational content</p>
                </div>
            </div>
            <div class="flex items-center gap-2 bg-slate-100 p-1.5 rounded-2xl border border-slate-200 shadow-inner">
                <button onclick="switchPortalTool(1)" id="portalNavBtn1" class="px-5 py-2.5 text-xs font-bold rounded-xl transition-all bg-orange-600 text-white shadow-lg shadow-orange-600/25 cursor-pointer">
                    Tool 1: MCQ Format Converter
                </button>
                <button onclick="switchPortalTool(2)" id="portalNavBtn2" class="px-5 py-2.5 text-xs font-bold rounded-xl transition-all text-slate-600 hover:text-slate-900 hover:bg-slate-200 cursor-pointer">
                    Tool 2: GyanXp Document Generator
                </button>
            </div>
        </div>
    </header>

    <!-- ================================================================= -->
    <!-- TOOL 1 CONTAINER (WITH CLIPBOARD PERMISSION ERROR FALLBACK)       -->
    <!-- ================================================================= -->
    <div id="portalContainerTool1" class="portal-tool-section active-portal-tool bg-slate-50 text-slate-800">
        <header class="bg-gradient-to-r from-orange-600 via-orange-500 to-amber-600 text-white shadow-md border-b border-orange-700/30">
            <div class="max-w-7xl mx-auto px-6 py-6 flex flex-col sm:flex-row justify-between items-center">
                <div>
                    <h2 class="text-2xl font-black tracking-tight text-white">MCQ Format Converter</h2>
                    <p class="text-orange-100 text-xs mt-1">Instant, error-free parsing and standardized export tool</p>
                </div>
                <div class="mt-3 sm:mt-0 bg-white/25 border border-white/30 px-4 py-1.5 rounded-full text-xs font-semibold text-white">
                    Version 4.6 Pro
                </div>
            </div>
        </header>

        <main class="max-w-7xl mx-auto px-6 py-8 flex-grow w-full grid grid-cols-1 lg:grid-cols-2 gap-8">
            <section class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 flex flex-col">
                <h3 class="text-base font-bold text-slate-800 mb-4 flex items-center gap-2">
                    <svg class="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
                    Upload & Input Questions
                </h3>
                <div class="mb-6">
                    <label class="block text-xs font-semibold text-slate-600 mb-2 uppercase tracking-wider">Upload Word Document (.docx) or Text File (.txt)</label>
                    <div class="border-2 border-dashed border-slate-300 rounded-xl p-6 text-center hover:border-orange-500 transition-colors bg-slate-50 cursor-pointer relative group" id="dropzone">
                        <input type="file" id="fileInput" accept=".docx,.txt" class="absolute inset-0 opacity-0 cursor-pointer w-full h-full">
                        <svg class="mx-auto h-12 w-12 text-slate-400 group-hover:text-orange-500 transition-colors mb-2" stroke="currentColor" fill="none" viewBox="0 0 48 48"><path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <p class="text-sm text-slate-700 font-medium" id="fileNameDisplay">Drag & drop your file here, or <span class="text-orange-600 underline">browse</span></p>
                        <p class="text-xs text-slate-400 mt-1">Supports .docx and .txt formats</p>
                    </div>
                </div>

                <div id="t1StatsAndSelectionContainer" class="mb-4 p-4 bg-slate-50 border border-slate-200 rounded-xl hidden">
                    <div class="flex flex-wrap justify-between items-center gap-2 mb-3">
                        <div class="text-xs font-bold text-slate-700">
                            Uploaded Questions: <span id="t1TotalUploadedCount" class="text-orange-600 font-black text-sm">0</span> | 
                            Selected: <span id="t1SelectedCount" class="text-emerald-600 font-black text-sm">0</span>
                        </div>
                        <div class="flex gap-2">
                            <button type="button" onclick="t1ToggleSelectAll(true)" class="text-xs bg-slate-200 hover:bg-slate-300 text-slate-700 font-semibold px-2.5 py-1 rounded-lg">Select All</button>
                            <button type="button" onclick="t1ToggleSelectAll(false)" class="text-xs bg-slate-200 hover:bg-slate-300 text-slate-700 font-semibold px-2.5 py-1 rounded-lg">Deselect All</button>
                        </div>
                    </div>
                    <div id="t1CheckboxesGrid" class="flex flex-wrap gap-1.5 max-h-36 overflow-y-auto bg-white p-2.5 border border-slate-200 rounded-lg">
                        <!-- Checkboxes injected dynamically -->
                    </div>
                </div>

                <div class="flex-grow flex flex-col mb-4">
                    <div class="flex justify-between items-center mb-2">
                        <label for="rawInput" class="text-xs font-semibold text-slate-600 uppercase tracking-wider">Or Paste Raw Questions Text</label>
                        <button id="clearBtn" class="text-xs text-rose-600 hover:text-rose-700 font-semibold transition-colors cursor-pointer">Clear Text</button>
                    </div>
                    <textarea id="rawInput" rows="6" class="w-full flex-grow p-4 bg-slate-50 border border-slate-300 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 text-sm font-mono leading-relaxed text-slate-800 placeholder-slate-400" placeholder="Q5. round(4.576)&#10;(A) 4.5&#10;(B) 4.6&#10;(C) 5&#10;(D) 4&#10;Answer: (C)"></textarea>
                </div>

                <button id="convertBtn" class="w-full bg-orange-600 hover:bg-orange-500 text-white font-bold py-3 px-4 rounded-xl transition-all shadow-lg shadow-orange-600/25 flex items-center justify-center gap-2 text-sm cursor-pointer">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
                    Convert to Standard Format
                </button>
            </section>

            <section class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 flex flex-col">
                <h3 class="text-base font-bold text-slate-800 mb-4 flex items-center gap-2">
                    <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    Converted Output Format
                </h3>
                <div class="flex-grow flex flex-col mb-4">
                    <textarea id="outputArea" readonly rows="12" class="w-full flex-grow p-4 bg-slate-50 border border-slate-300 rounded-xl text-sm font-mono leading-relaxed text-slate-700 placeholder-slate-400" placeholder="Converted output will appear here..."></textarea>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <button id="copyBtn" class="bg-slate-800 hover:bg-slate-900 text-white font-semibold py-3 px-4 rounded-xl transition-all flex items-center justify-center gap-2 text-sm shadow-md border border-slate-700 cursor-pointer">
                        <svg class="w-4 h-4 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
                        Copy to Clipboard
                    </button>
                    <button id="downloadWordBtn" class="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold py-3 px-4 rounded-xl transition-all flex items-center justify-center gap-2 text-sm shadow-lg shadow-emerald-600/25 cursor-pointer">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        Download as Word (.docx)
                    </button>
                </div>
                <div id="toast" class="mt-3 text-center text-xs text-emerald-600 font-semibold h-4 transition-opacity opacity-0"></div>
            </section>
        </main>

        <footer class="bg-white border-t border-slate-200 py-4 text-center text-xs text-slate-500 mt-auto">
            MCQ Format Converter &bull; Native Compatible Word Document Generator
        </footer>
    </div>


    <!-- ================================================================= -->
    <!-- TOOL 2 CONTAINER (EXACTLY UNCHANGED & PRESERVED)                  -->
    <!-- ================================================================= -->
    <div id="portalContainerTool2" class="portal-tool-section bg-slate-50 text-slate-900" style="padding: 30px 20px;">
        <div id="t2ScopedRoot" style="width: 100%; max-width: 1050px; margin: auto;">
            <div id="t2AppContent" style="display: flex; flex-direction: column; gap: 24px;">
                <div class="analysis-dashboard">
                    <div class="dashboard-metric-card">
                        <div class="dashboard-metric-title">Total Questions</div>
                        <div class="dashboard-metric-value" id="t2DashTotalQ">0</div>
                    </div>
                    <div class="dashboard-metric-card">
                        <div class="dashboard-metric-title">Selected Questions</div>
                        <div class="dashboard-metric-value" id="t2DashSelectedQ">0</div>
                    </div>
                    <div class="dashboard-metric-card">
                        <div class="dashboard-metric-title">Generated Sets</div>
                        <div class="dashboard-metric-value" id="t2DashTotalSets">1</div>
                    </div>
                    <div class="dashboard-metric-card">
                        <div class="dashboard-metric-title">Total Slides / Pages</div>
                        <div class="dashboard-metric-value" id="t2DashTotalSlides">0</div>
                    </div>
                </div>

                <div class="card">
                    <div class="brand-header">
                        <div class="brand-logo-circle">G</div>
                        <div>
                            <h2>GyanXp Unified Document Generator</h2>
                            <div style="font-size: 12px; color: var(--text-muted); font-weight: 500;">अपनी Online Class - Pro Programming & Test Series Suite with Smart Auto-Option Parser</div>
                        </div>
                    </div>

                    <div class="category-section">
                        <div class="category-title">📁 File & Assets Upload</div>
                        <div class="row">
                            <div class="form-group">
                                <label>Upload Word File (.docx with Tables & Images)</label>
                                <input type="file" id="t2DocFileInput" accept=".docx" onchange="t2HandleFileUploaded(event)">
                                <div id="t2FileInfoBadge" class="file-info-badge" style="display: none;"></div>
                            </div>
                            <div class="form-group">
                                <label>Background Image <span class="badge">Optional</span></label>
                                <input type="file" id="t2BgImageInput" accept="image/*">
                            </div>
                        </div>
                        
                        <div class="row" style="margin-top: 16px; display: none;" id="t2ManualSelectionWrapper">
                            <div class="form-group" style="flex: 1;">
                                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
                                    <label style="margin-bottom: 0;">Select Specific Questions (<span id="t2SelectedCountDisplay">0</span> Selected)</label>
                                    <div style="display: flex; gap: 8px;">
                                        <button type="button" class="nav-btn" onclick="t2ToggleSelectAllManual(true)" style="padding: 4px 10px; font-size: 11px;">Select All</button>
                                        <button type="button" class="nav-btn" onclick="t2ToggleSelectAllManual(false)" style="padding: 4px 10px; font-size: 11px;">Deselect All</button>
                                    </div>
                                </div>
                                <div id="t2QuestionCheckboxesGrid" style="display: flex; flex-wrap: wrap; gap: 8px; max-height: 160px; overflow-y: auto; background: #fff; padding: 12px; border: 1.5px solid var(--border-color); border-radius: 10px; box-sizing: border-box;">
                                    <span style="font-size: 13px; color: var(--text-muted);">Please upload a word file first to view question numbers.</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="category-section">
                        <div class="category-title">🎯 Document Output Formatting Mode</div>
                        <div class="row">
                            <div class="form-group">
                                <label>Select Output Format Style</label>
                                <select id="t2FormattingMode" onchange="t2RenderSlidePreview()">
                                    <option value="standard" selected>Standard MCQ & Programming Presentation</option>
                                    <option value="test_series">Test Series Format (With Detailed Solution)</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="category-section">
                        <div class="category-title">💻 Programming Code Block Styling</div>
                        <div class="row">
                            <div class="form-group">
                                <div class="checkbox-card">
                                    <input type="checkbox" id="t2EnableCodeHighlight" checked onchange="t2RenderSlidePreview()">
                                    <label for="t2EnableCodeHighlight">Enable Code Highlight</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="checkbox-card">
                                    <input type="checkbox" id="t2EnableSyntaxHighlighter" checked onchange="t2RenderSlidePreview()">
                                    <label for="t2EnableSyntaxHighlighter">Enable Syntax Highlighter</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="checkbox-card">
                                    <input type="checkbox" id="t2EnableCodeBorder" checked onchange="t2RenderSlidePreview()">
                                    <label for="t2EnableCodeBorder">Enable Code Block Border</label>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 16px;">
                            <div class="form-group">
                                <label>Code Border Corner Style</label>
                                <select id="t2CodeBorderShape" onchange="t2RenderSlidePreview()">
                                    <option value="rounded" selected>Rounded Corners</option>
                                    <option value="rectangle">Rectangle (Sharp Corners)</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Code Block Color</label>
                                <input type="color" id="t2CodeBlockBgColor" class="sm-picker" value="#f8fafc" style="width: 100%; height: 44px;" onchange="t2RenderSlidePreview()">
                            </div>
                            <div class="form-group">
                                <label>Code Block Opacity (0.0 to 1.0)</label>
                                <input type="number" id="t2CodeBlockOpacity" value="1.0" step="0.05" min="0" max="1" oninput="t2RenderSlidePreview()">
                            </div>
                        </div>
                    </div>

                    <div class="category-section">
                        <div class="category-title">⚙️ Structure & Sets Configuration</div>
                        <div class="row">
                            <div class="form-group">
                                <div class="checkbox-card">
                                    <input type="checkbox" id="t2EnableSetWise" onchange="t2RenderSlidePreview()">
                                    <label for="t2EnableSetWise">Create Set-wise Questions</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Questions Per Set</label>
                                <input type="number" id="t2QuestionsPerSet" value="10" min="1" max="500" oninput="t2RenderSlidePreview()">
                            </div>
                        </div>
                        <div class="row" style="margin-top: 16px;">
                            <div class="form-group">
                                <div class="checkbox-card">
                                    <input type="checkbox" id="t2HideOptions" onchange="t2RenderSlidePreview()">
                                    <label for="t2HideOptions">hide questions's option</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="checkbox-card">
                                    <input type="checkbox" id="t2IncludeAnswerKey" checked onchange="t2RenderSlidePreview()">
                                    <label for="t2IncludeAnswerKey">Include Answer Key at the end (Max 100 Q/Table)</label>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 16px;">
                            <div class="form-group">
                                <div class="checkbox-card">
                                    <input type="checkbox" id="t2ShowAnswerOnSlide" onchange="t2RenderSlidePreview()">
                                    <label for="t2ShowAnswerOnSlide">Show Answer After Question</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="checkbox-card">
                                    <input type="checkbox" id="t2ShowSolutionOnSlide" checked onchange="t2RenderSlidePreview()">
                                    <label for="t2ShowSolutionOnSlide">Show Detailed Solution</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="category-section">
                        <div class="category-title">📐 Layout & Pagination Settings</div>
                        <div class="row">
                            <div class="form-group">
                                <label>Target Questions Per Page</label>
                                <select id="t2QuestionsPerPage" onchange="t2RenderSlidePreview()">
                                    <option value="auto">Auto (Smart Fit based on Font Size)</option>
                                    <option value="1" selected>1 Question Per Page</option>
                                    <option value="2">2 Questions Per Page</option>
                                    <option value="3">3 Questions Per Page</option>
                                    <option value="4">4 Questions Per Page</option>
                                    <option value="5">5 Questions Per Page</option>
                                    <option value="6">6 Questions Per Page</option>
                                    <option value="7">7 Questions Per Page</option>
                                    <option value="8">8 Questions Per Page</option>
                                    <option value="9">9 Questions Per Page</option>
                                    <option value="10">10 Questions Per Page</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Page Columns Layout</label>
                                <select id="t2ColumnLayout" onchange="t2RenderSlidePreview()">
                                    <option value="1" selected>1 Column (Single View)</option>
                                    <option value="2">2 Columns (Continuous Flow)</option>
                                    <option value="3">3 Columns (Continuous Flow)</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Question Spacing (Line Space, px/pt)</label>
                                <input type="number" id="t2QuestionSpacing" value="12" min="0" max="100" oninput="t2RenderSlidePreview()">
                            </div>
                        </div>
                        <div class="row" style="margin-top: 16px;">
                            <div class="form-group">
                                <label>Page Size Format</label>
                                <select id="t2PageSize" onchange="t2RenderSlidePreview()">
                                    <option value="hd" selected>Full HD / Presentation (16:9 / 9:16)</option>
                                    <option value="a4">A4 Size</option>
                                    <option value="a3">A3 Size</option>
                                    <option value="letter">US Letter</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Page Orientation</label>
                                <select id="t2Orientation" onchange="t2HandleOrientationChange()">
                                    <option value="landscape" selected>Landscape (Horizontal)</option>
                                    <option value="portrait">Portrait (Vertical)</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Resolution Quality (HD Mode)</label>
                                <select id="t2ResolutionQuality" onchange="t2RenderSlidePreview()">
                                    <option value="1080p" selected>Full HD (1080p)</option>
                                    <option value="720p">Standard (720p)</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="category-section">
                        <div class="category-title">🎨 Typography & Styling Preferences</div>
                        <div class="row">
                            <div class="form-group">
                                <label>Font Type Selection</label>
                                <select id="t2FontFamily" onchange="t2RenderSlidePreview()">
                                    <option value="Noto Sans Devanagari" selected>Noto Sans Devanagari (Best Hindi Support)</option>
                                    <option value="Arial">Arial</option>
                                    <option value="Helvetica">Helvetica</option>
                                    <option value="Roboto">Roboto</option>
                                    <option value="Poppins">Poppins</option>
                                    <option value="Montserrat">Montserrat</option>
                                    <option value="Times New Roman">Times New Roman</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Question Font Size (pt)</label>
                                <input type="number" id="t2BaseFontSize" value="45" min="8" max="120" oninput="t2RenderSlidePreview()">
                            </div>
                            <div class="form-group">
                                <label>Bold Style Mode</label>
                                <select id="t2BoldStyleMode" onchange="t2RenderSlidePreview()">
                                    <option value="all" selected>Bold All (Default)</option>
                                    <option value="questions_only">Bold Questions Only</option>
                                    <option value="questions_and_options">Bold Questions & Options Both</option>
                                </select>
                            </div>
                        </div>

                        <div class="row" style="margin-top: 16px;">
                            <div class="form-group">
                                <label>Color Theme Preset</label>
                                <select id="t2ColorThemePreset" onchange="t2ApplyColorPreset()">
                                    <option value="custom" selected>Custom Colors</option>
                                    <option value="light">Light Theme Preset (For Dark BG)</option>
                                    <option value="dark">Dark Theme Preset (For Light BG)</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group" style="margin-top: 16px;">
                            <div class="section-title" style="margin-bottom: 8px;">
                                Text Color Palette
                                <button class="reset-btn" onclick="t2ResetDefaultColors()">Reset Colors</button>
                            </div>
                            <div class="grid-4">
                                <div class="color-picker-wrapper">
                                    <input type="color" id="t2HindiColor" class="sm-picker" value="#FF6B00" onchange="t2OnColorInputChanged()">
                                    <span>Hindi Q</span>
                                </div>
                                <div class="color-picker-wrapper">
                                    <input type="color" id="t2EnglishColor" class="sm-picker" value="#000000" onchange="t2OnColorInputChanged()">
                                    <span>English Q</span>
                                </div>
                                <div class="color-picker-wrapper">
                                    <input type="color" id="t2OptionsColor" class="sm-picker" value="#000000" onchange="t2OnColorInputChanged()">
                                    <span>Options</span>
                                </div>
                                <div class="color-picker-wrapper">
                                    <input type="color" id="t2AnswerKeyColor" class="sm-picker" value="#1e293b" onchange="t2OnColorInputChanged()">
                                    <span>Answer Key</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="category-section" style="margin-bottom: 0;">
                        <div class="category-title">📏 Range & Page Margins</div>
                        <div class="row">
                            <div class="form-group">
                                <label>Question Range (Start - End)</label>
                                <div class="row">
                                    <input type="number" id="t2QStart" placeholder="From (e.g. 1)" min="1">
                                    <input type="number" id="t2QEnd" placeholder="To (e.g. 136)" min="1">
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Page Margins (px/pt) <span class="badge" id="t2MarginNotice">Synchronized</span></label>
                                <div class="grid-4">
                                    <div><label style="font-size:10px; margin-bottom:2px;">Top</label><input type="number" id="t2MarginTop" value="120" min="0" oninput="t2RenderSlidePreview()"></div>
                                    <div><label style="font-size:10px; margin-bottom:2px;">Right</label><input type="number" id="t2MarginRight" value="30" min="0" oninput="t2RenderSlidePreview()"></div>
                                    <div><label style="font-size:10px; margin-bottom:2px;">Bottom</label><input type="number" id="t2MarginBottom" value="30" min="0" oninput="t2RenderSlidePreview()"></div>
                                    <div><label style="font-size:10px; margin-bottom:2px;">Left</label><input type="number" id="t2MarginLeft" value="120" min="0" oninput="t2RenderSlidePreview()"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="btn-group">
                        <button onclick="t2GenerateSlides()">Generate Presentation & Preview</button>
                    </div>
                </div>

                <div class="card" id="t2PreviewContainer">
                    <h2>Slide Document Interactive Preview</h2>
                    <div class="slide-viewport">
                        <div id="t2SlideStage" class="slide-canvas"></div>
                    </div>
                    <div class="preview-controls">
                        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                            <button class="nav-btn" onclick="t2PrevSlide()">Previous</button>
                            <span id="t2SlideIndicator" style="font-weight: 600; font-size: 13px;">Slide 1 of 1</span>
                            <button class="nav-btn" onclick="t2NextSlide()">Next</button>
                            <div style="display: flex; align-items: center; gap: 4px; margin-left: 8px;">
                                <span style="font-size: 12px; font-weight: 600; color: var(--text-muted);">Go to:</span>
                                <input type="number" id="t2JumpPageInput" min="1" value="1" style="width: 55px; padding: 7px; text-align: center; border: 1.5px solid var(--border-color); border-radius: 8px; font-size: 13px;" title="Jump to slide">
                                <button class="nav-btn" onclick="t2JumpToSlide()" style="padding: 7px 14px;">Go</button>
                            </div>
                        </div>
                        <div style="display: flex; gap: 10px; flex-wrap: wrap;" id="t2DownloadActionButtons">
                            <button class="secondary" onclick="t2DownloadPDF()">Download PDF File</button>
                            <button class="secondary" onclick="t2DownloadDOCX(false)">Download Word File (Normal)</button>
                            <button class="secondary" onclick="t2DownloadDOCX(true)">Download Word File (Compatibility)</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="t2PrintSection" style="display: none;"></div>
    </div>


    <!-- Master Portal Switcher & Global Login Handler Script -->
    <script>
        function verifyMasterLogin() {
            const enteredId = document.getElementById('masterLoginId').value.trim();
            const enteredPass = document.getElementById('masterLoginPass').value.trim();
            const errorMsg = document.getElementById('masterLoginError');

            if (enteredId === 'gxpmcq' && enteredPass === 'mcq@gxp') {
                document.getElementById('masterLoginOverlay').style.display = 'none';
                t2HandleOrientationChange();
            } else {
                errorMsg.classList.remove('hidden');
            }
        }

        function handleMasterLoginKey(e) {
            if (e.key === 'Enter') {
                verifyMasterLogin();
            }
        }

        function switchPortalTool(toolNumber) {
            const t1Div = document.getElementById('portalContainerTool1');
            const t2Div = document.getElementById('portalContainerTool2');
            const btn1 = document.getElementById('portalNavBtn1');
            const btn2 = document.getElementById('portalNavBtn2');

            if (toolNumber === 1) {
                t1Div.classList.add('active-portal-tool');
                t2Div.classList.remove('active-portal-tool');
                btn1.className = "px-5 py-2.5 text-xs font-bold rounded-xl transition-all bg-orange-600 text-white shadow-lg shadow-orange-600/25 cursor-pointer";
                btn2.className = "px-5 py-2.5 text-xs font-bold rounded-xl transition-all text-slate-600 hover:text-slate-900 hover:bg-slate-200 cursor-pointer";
            } else {
                t2Div.classList.add('active-portal-tool');
                t1Div.classList.remove('active-portal-tool');
                btn2.className = "px-5 py-2.5 text-xs font-bold rounded-xl transition-all bg-orange-600 text-white shadow-lg shadow-orange-600/25 cursor-pointer";
                btn1.className = "px-5 py-2.5 text-xs font-bold rounded-xl transition-all text-slate-600 hover:text-slate-900 hover:bg-slate-200 cursor-pointer";
            }
        }
    </script>


    <!-- ================================================================= -->
    <!-- TOOL 1 SCRIPT LOGIC (WITH SAFE CLIPBOARD FALLBACK)                -->
    <!-- ================================================================= -->
    <script>
        const fileInput = document.getElementById('fileInput');
        const fileNameDisplay = document.getElementById('fileNameDisplay');
        const rawInput = document.getElementById('rawInput');
        const outputArea = document.getElementById('outputArea');
        const convertBtn = document.getElementById('convertBtn');
        const clearBtn = document.getElementById('clearBtn');
        const copyBtn = document.getElementById('copyBtn');
        const downloadWordBtn = document.getElementById('downloadWordBtn');
        const toast = document.getElementById('toast');

        let t1GlobalQuestionsList = [];

        function showToast(message) {
            toast.textContent = message;
            toast.classList.remove('opacity-0');
            setTimeout(() => {
                toast.classList.add('opacity-0');
            }, 3000);
        }

        fileInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (!file) return;

            fileNameDisplay.textContent = `Selected: ${file.name}`;
            const fileExtension = file.name.split('.').pop().toLowerCase();

            if (fileExtension === 'txt') {
                const reader = new FileReader();
                reader.onload = (event) => {
                    rawInput.value = event.target.result;
                    processTextForTool1(event.target.result);
                    showToast('Text file loaded successfully!');
                };
                reader.readAsText(file);
            } else if (fileExtension === 'docx') {
                const reader = new FileReader();
                reader.onload = async (event) => {
                    try {
                        const arrayBuffer = event.target.result;
                        const result = await mammoth.extractRawText({ arrayBuffer: arrayBuffer });
                        rawInput.value = result.value;
                        processTextForTool1(result.value);
                        showToast('Word (.docx) loaded successfully!');
                    } catch (err) {
                        console.error(err);
                        alert('Error parsing Word document. Please ensure it is a valid .docx file.');
                    }
                };
                reader.readAsArrayBuffer(file);
            } else {
                alert('Unsupported file format. Please upload .docx or .txt files.');
            }
        });

        rawInput.addEventListener('input', () => {
            if (rawInput.value.trim()) {
                processTextForTool1(rawInput.value);
            } else {
                document.getElementById('t1StatsAndSelectionContainer').classList.add('hidden');
                t1GlobalQuestionsList = [];
            }
        });

        clearBtn.addEventListener('click', () => {
            rawInput.value = '';
            outputArea.value = '';
            fileInput.value = '';
            fileNameDisplay.innerHTML = `Drag & drop your file here, or <span class="text-orange-600 underline">browse</span>`;
            document.getElementById('t1StatsAndSelectionContainer').classList.add('hidden');
            t1GlobalQuestionsList = [];
        });

        function parseQuestionsToObjects(text) {
            if (!text.trim()) return [];
            const rawLines = text.split(/\r?\n/).map(l => l.replace(/\t/g, '    '));
            let questions = [];
            let currentQ = null;

            const qRegex = /^(?:Q\.?\s*|Question\s*)(\d+)[\.\)]\s*(.*)$/i;
            const explicitOptRegex = /^\(?([A-D])\)?[\.\)]\s*(.*)$/i;
            const answerRegex = /^(?:Answer|Ans)[:\s\-]*\(?([A-D])\)?(.*)$/i;

            for (let i = 0; i < rawLines.length; i++) {
                let line = rawLines[i];
                let trimmedLine = line.trim();
                if (!trimmedLine) continue;

                let qMatch = trimmedLine.match(qRegex);
                if (qMatch) {
                    if (currentQ) questions.push(currentQ);
                    currentQ = {
                        number: qMatch[1],
                        linesPool: [qMatch[2]],
                        explicitAnswer: ''
                    };
                    continue;
                }

                let ansMatch = trimmedLine.match(answerRegex);
                if (ansMatch && currentQ) {
                    currentQ.explicitAnswer = ansMatch[1].toUpperCase();
                    continue;
                }

                if (currentQ) {
                    if (!currentQ.explicitAnswer && /^ans/i.test(trimmedLine)) {
                        let cleanAns = trimmedLine.replace(/[^A-D]/gi, '').toUpperCase();
                        if (cleanAns) currentQ.explicitAnswer = cleanAns[0];
                        continue;
                    }
                    currentQ.linesPool.push(line);
                } else {
                    currentQ = {
                        number: '1',
                        linesPool: [line],
                        explicitAnswer: ''
                    };
                }
            }
            if (currentQ) questions.push(currentQ);
            return questions;
        }

        function processTextForTool1(text) {
            t1GlobalQuestionsList = parseQuestionsToObjects(text);
            const container = document.getElementById('t1StatsAndSelectionContainer');
            const totalCountEl = document.getElementById('t1TotalUploadedCount');
            const grid = document.getElementById('t1CheckboxesGrid');

            if (t1GlobalQuestionsList.length > 0) {
                container.classList.remove('hidden');
                totalCountEl.innerText = t1GlobalQuestionsList.length;

                let gridHtml = '';
                t1GlobalQuestionsList.forEach((q, idx) => {
                    let qNum = idx + 1;
                    gridHtml += `
                        <label class="inline-flex items-center gap-1 bg-white px-2 py-1 border border-slate-200 rounded text-xs font-semibold cursor-pointer">
                            <input type="checkbox" class="t1-q-cb" value="${idx}" checked onchange="t1UpdateSelectedCount()" style="accent-color: var(--primary-orange);">
                            Q${qNum}
                        </label>
                    `;
                });
                grid.innerHTML = gridHtml;
                t1UpdateSelectedCount();
            } else {
                container.classList.add('hidden');
            }
        }

        function t1UpdateSelectedCount() {
            const checkedBoxes = document.querySelectorAll('.t1-q-cb:checked');
            const countEl = document.getElementById('t1SelectedCount');
            if (countEl) countEl.innerText = checkedBoxes.length;
        }

        function t1ToggleSelectAll(state) {
            const checkboxes = document.querySelectorAll('.t1-q-cb');
            checkboxes.forEach(cb => cb.checked = state);
            t1UpdateSelectedCount();
        }

        function parseAndConvertMCQs(text) {
            let allParsedQs = parseQuestionsToObjects(text);
            if (allParsedQs.length === 0) return '';

            const checkedBoxes = document.querySelectorAll('.t1-q-cb');
            let allowedIndices = [];
            if (checkedBoxes.length > 0) {
                checkedBoxes.forEach(cb => {
                    if (cb.checked) allowedIndices.push(parseInt(cb.value));
                });
            } else {
                allowedIndices = allParsedQs.map((_, idx) => idx);
            }

            let questions = allParsedQs.filter((_, idx) => allowedIndices.includes(idx));
            if (questions.length === 0) return '';

            let formattedOutput = [];
            questions.forEach((q, idx) => {
                let qNum = idx + 1;
                let pool = q.linesPool;

                let parsedOptions = [];
                let tempLines = [...pool];
                const explicitOptRegex = /^\(?([A-D])\)?[\.\)]\s*(.*)$/i;

                while (tempLines.length > 0) {
                    let lastLine = tempLines[tempLines.length - 1].trim();
                    let optM = lastLine.match(explicitOptRegex);
                    if (optM) {
                        parsedOptions.unshift({ letter: optM[1].toUpperCase(), text: optM[2].trim() });
                        tempLines.pop();
                    } else {
                        break;
                    }
                }

                if (parsedOptions.length > 0) {
                    pool = tempLines;
                } else if (pool.length >= 5) {
                    let potentialOpts = pool.splice(pool.length - 4, 4);
                    const letters = ['A', 'B', 'C', 'D'];
                    parsedOptions = potentialOpts.map((o, oIdx) => ({
                        letter: letters[oIdx],
                        text: o.trim().replace(/^\(?([A-D])\)?[\.\)]\s*/i, '')
                    }));
                }

                let questionTextLines = pool;

                if (questionTextLines.length > 0) {
                    formattedOutput.push(`${qNum}. ${questionTextLines[0].trim()}`);
                    for (let i = 1; i < questionTextLines.length; i++) {
                        formattedOutput.push(questionTextLines[i]);
                    }
                } else {
                    formattedOutput.push(`${qNum}. Question text missing`);
                }

                ['A', 'B', 'C', 'D'].forEach((optKey) => {
                    let foundOpt = parsedOptions.find(o => o.letter === optKey);
                    let optText = foundOpt ? foundOpt.text : `Option ${optKey}`;
                    formattedOutput.push(`${optKey}. ${optText}`);
                });

                let finalAns = q.explicitAnswer ? q.explicitAnswer : 'A';
                formattedOutput.push(`Answer ${finalAns}`);
                formattedOutput.push('');
            });

            return formattedOutput.join('\n').trim();
        }

        convertBtn.addEventListener('click', () => {
            const rawText = rawInput.value;
            if (!rawText.trim()) {
                alert('Please paste some text or upload a file first.');
                return;
            }
            const converted = parseAndConvertMCQs(rawText);
            outputArea.value = converted;
            showToast('Converted successfully!');
        });

        // FIXED CLIPBOARD COPY WITH FALLBACK (NO PERMISSION ERROR)
        copyBtn.addEventListener('click', () => {
            const textToCopy = outputArea.value;
            if (!textToCopy.trim()) {
                alert('No output to copy!');
                return;
            }

            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(textToCopy).then(() => {
                    showToast('Copied to clipboard!');
                }).catch(() => {
                    fallbackCopyTextToClipboard(textToCopy);
                });
            } else {
                fallbackCopyTextToClipboard(textToCopy);
            }
        });

        function fallbackCopyTextToClipboard(text) {
            const textArea = document.createElement("textarea");
            textArea.value = text;
            textArea.style.position = "fixed";  // Avoid scrolling to bottom
            textArea.style.top = "0";
            textArea.style.left = "0";
            textArea.style.opacity = "0";
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();

            try {
                const successful = document.execCommand('copy');
                if (successful) {
                    showToast('Copied to clipboard!');
                } else {
                    alert('Unable to copy. Please select and copy manually.');
                }
            } catch (err) {
                alert('Browser does not support automatic copying.');
            }
            document.body.removeChild(textArea);
        }

        downloadWordBtn.addEventListener('click', async () => {
            const text = outputArea.value;
            if (!text.trim()) {
                alert('No converted output available to download.');
                return;
            }

            try {
                if (window.docx) {
                    const { Document, Packer, Paragraph, TextRun } = window.docx;
                    const lines = text.split('\n');
                    const children = lines.map(line => {
                        if (line.trim() === '') {
                            return new Paragraph({ spacing: { after: 120 } });
                        }
                        return new Paragraph({
                            children: [
                                new TextRun({
                                    text: line,
                                    font: "Calibri",
                                    size: 22 // 11pt
                                })
                            ],
                            spacing: { after: 80 }
                        });
                    });

                    const doc = new Document({
                        sections: [{
                            properties: {},
                            children: children
                        }]
                    });

                    const blob = await Packer.toBlob(doc);
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'Converted_MCQs.docx';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                    showToast('Word document downloaded successfully!');
                    return;
                }
            } catch (e) {
                console.warn('Native docx fallback triggered:', e);
            }

            const htmlContent = `
                <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
                <head><meta charset='utf-8'><title>Converted MCQs</title></head>
                <body style='font-family: Calibri, sans-serif; font-size: 11pt;'>
                ${text.split('\n').map(line => line.trim() === '' ? '<br/>' : `<p style='margin: 0 0 4pt 0;'>${line}</p>`).join('')}
                </body>
                </html>
            `;
            const blob = new Blob(['\ufeff' + htmlContent], { type: 'application/msword' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'Converted_MCQs.doc';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            showToast('Word document downloaded successfully!');
        });
    </script>


    <!-- ================================================================= -->
    <!-- TOOL 2 SCRIPT LOGIC (EXACTLY UNCHANGED & PRESERVED)                  -->
    <!-- ================================================================= -->
    <script>
        let t2ActiveBgJpegDataUrl = null;
        let t2RawBgData = null;
        let t2MasterSlides = [];
        let t2CurrentSlideIndex = 0;
        let t2CurrentFilteredQuestions = [];
        let t2GlobalParsedQuestions = [];

        function t2UnescapeHtml(str) {
            if (!str) return '';
            const parser = new DOMParser();
            return parser.parseFromString(str, 'text/html').body.textContent;
        }

        function t2EscapeHtml(str) {
            if (!str) return '';
            let unescaped = t2UnescapeHtml(str);
            return unescaped
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        function t2UpdateDashboardMetrics() {
            const totalQEl = document.getElementById('t2DashTotalQ');
            const selectedQEl = document.getElementById('t2DashSelectedQ');
            const totalSetsEl = document.getElementById('t2DashTotalSets');
            const totalSlidesEl = document.getElementById('t2DashTotalSlides');

            if (totalQEl) totalQEl.innerText = t2GlobalParsedQuestions.length || 0;
            if (selectedQEl) selectedQEl.innerText = t2CurrentFilteredQuestions.length || 0;

            const enableSetWise = document.getElementById('t2EnableSetWise').checked;
            const questionsPerSet = parseInt(document.getElementById('t2QuestionsPerSet').value) || 10;
            
            let totalSets = 1;
            if (enableSetWise && t2CurrentFilteredQuestions.length > 0) {
                totalSets = Math.ceil(t2CurrentFilteredQuestions.length / questionsPerSet);
            }
            if (totalSetsEl) totalSetsEl.innerText = totalSets;
            if (totalSlidesEl) totalSlidesEl.innerText = t2MasterSlides.length || 0;
        }

        function t2HandleOrientationChange() {
            t2RenderSlidePreview();
        }

        function t2ApplyColorPreset() {
            const preset = document.getElementById('t2ColorThemePreset').value;
            if (preset === 'light') {
                document.getElementById('t2HindiColor').value = "#FFFFFF";
                document.getElementById('t2EnglishColor').value = "#FFFFFF";
                document.getElementById('t2OptionsColor').value = "#FFFFFF";
                document.getElementById('t2AnswerKeyColor').value = "#FFFFFF";
            } else if (preset === 'dark') {
                document.getElementById('t2HindiColor').value = "#000000";
                document.getElementById('t2EnglishColor').value = "#000000";
                document.getElementById('t2OptionsColor').value = "#000000";
                document.getElementById('t2AnswerKeyColor').value = "#000000";
            }
            const previewContainer = document.getElementById('t2PreviewContainer');
            if (previewContainer && previewContainer.style.display === 'block') {
                t2RenderSlidePreview();
            }
        }

        function t2OnColorInputChanged() {
            document.getElementById('t2ColorThemePreset').value = 'custom';
            t2RenderSlidePreview();
        }

        function t2ResetDefaultColors() {
            document.getElementById('t2ColorThemePreset').value = 'custom';
            document.getElementById('t2HindiColor').value = "#FF6B00";
            document.getElementById('t2EnglishColor').value = "#000000";
            document.getElementById('t2OptionsColor').value = "#000000";
            document.getElementById('t2AnswerKeyColor').value = "#1e293b";
            const previewContainer = document.getElementById('t2PreviewContainer');
            if (previewContainer && previewContainer.style.display === 'block') {
                t2RenderSlidePreview();
            }
        }

        document.getElementById('t2BgImageInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(evt) {
                    const img = new Image();
                    img.onload = function() {
                        const canvas = document.createElement('canvas');
                        canvas.width = img.width;
                        canvas.height = img.height;
                        const ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0);
                        t2ActiveBgJpegDataUrl = canvas.toDataURL('image/jpeg', 0.95);
                        t2RawBgData = {
                            base64: t2ActiveBgJpegDataUrl.split(',')[1],
                            width: img.width,
                            height: img.height
                        };
                        const previewContainer = document.getElementById('t2PreviewContainer');
                        if (previewContainer && previewContainer.style.display === 'block') {
                            t2RenderSlidePreview();
                        }
                    };
                    img.src = evt.target.result;
                };
                reader.readAsDataURL(file);
            } else {
                t2ActiveBgJpegDataUrl = null;
                t2RawBgData = null;
            }
        });

        function t2GetActiveDimensions() {
            const pageSize = document.getElementById('t2PageSize').value;
            const orientation = document.getElementById('t2Orientation').value;
            const isLandscape = (orientation === 'landscape');

            if (pageSize === 'a4') {
                return isLandscape ? { width: 842, height: 595 } : { width: 595, height: 842 };
            } else if (pageSize === 'a3') {
                return isLandscape ? { width: 1190, height: 842 } : { width: 842, height: 1190 };
            } else if (pageSize === 'letter') {
                return isLandscape ? { width: 792, height: 612 } : { width: 612, height: 792 };
            } else {
                const res = document.getElementById('t2ResolutionQuality').value;
                if (isLandscape) {
                    return res === '720p' ? { width: 1280, height: 720 } : { width: 1920, height: 1080 };
                } else {
                    return res === '720p' ? { width: 720, height: 1280 } : { width: 1080, height: 1920 };
                }
            }
        }

        function t2GetPortraitBaseDimensions() {
            const pageSize = document.getElementById('t2PageSize').value;
            if (pageSize === 'a4') return { width: 595, height: 842 };
            if (pageSize === 'a3') return { width: 842, height: 1190 };
            if (pageSize === 'letter') return { width: 612, height: 792 };
            const res = document.getElementById('t2ResolutionQuality').value;
            return res === '720p' ? { width: 720, height: 1280 } : { width: 1080, height: 1920 };
        }

        function t2CreateDefaultBgCanvas(width, height) {
            const canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            const ctx = canvas.getContext('2d');
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, width, height);
            ctx.strokeStyle = '#e2e8f0';
            ctx.lineWidth = 4;
            ctx.strokeRect(40, 40, width - 80, height - 80);
            ctx.fillStyle = '#FF6B00';
            ctx.font = 'bold 36px Inter, sans-serif';
            ctx.fillText('GyanXp Academy', 80, 100);
            ctx.fillStyle = '#64748b';
            ctx.font = '24px Inter, sans-serif';
            ctx.fillText('GyanXp. All Rights Reserved.', 80, height - 60);
            return canvas.toDataURL('image/jpeg', 0.92);
        }

        function t2ParseDocx(file) {
            return file.arrayBuffer().then(arrayBuffer => {
                let currentImgBase64 = null;
                const options = {
                    convertImage: mammoth.images.imgElement(function(image) {
                        return image.read("base64").then(function(imageBuffer) {
                            currentImgBase64 = `data:${image.contentType};base64,${imageBuffer}`;
                            return { src: currentImgBase64 };
                        });
                    })
                };
                return mammoth.convertToHtml({ arrayBuffer: arrayBuffer }, options).then(result => {
                    const html = result.value;
                    const parser = new DOMParser();
                    const docHtml = parser.parseFromString(html, 'text/html');

                    const elements = Array.from(docHtml.querySelectorAll('p, td, li, pre'));
                    let qMap = {};
                    let activeQNum = null;

                    elements.forEach(el => {
                        let txt = t2UnescapeHtml(el.textContent || '').trim();
                        let match = txt.match(/^Q(\d+)\./i);
                        if (match) {
                            activeQNum = parseInt(match[1]);
                            if (!qMap[activeQNum]) {
                                qMap[activeQNum] = { images: [] };
                            }
                        }
                        if (activeQNum) {
                            let imgs = el.querySelectorAll('img');
                            imgs.forEach(img => {
                                if (img.src && !qMap[activeQNum].images.includes(img.src)) {
                                    qMap[activeQNum].images.push(img.src);
                                }
                            });
                        }
                    });

                    const rawLines = [];
                    elements.forEach(el => {
                        let inner = el.innerHTML || '';
                        inner = inner.replace(/<br\s*[\/]?>/gi, '\n');
                        const tmpDiv = document.createElement('div');
                        tmpDiv.innerHTML = inner;
                        
                        let textContent = tmpDiv.textContent || tmpDiv.innerText || '';
                        let linesArr = textContent.split(/\r?\n/);
                        linesArr.forEach(l => {
                            rawLines.push(l);
                        });
                    });

                    const filteredLines = rawLines.filter(l => l.trim().length > 0);

                    const rawQuestions = [];
                    let currentQ = null;
                    let currentLines = [];

                    filteredLines.forEach(l => {
                        const qMatch = l.trim().match(/^Q(\d+)\.\s*(.*)/i);
                        if (qMatch) {
                            if (currentQ) {
                                currentQ.rawLines = currentLines;
                                rawQuestions.push(currentQ);
                            }
                            const qNum = parseInt(qMatch[1]);
                            currentQ = {
                                num: qNum,
                                hindiQ: '',
                                englishQ: '',
                                codeBlock: '',
                                statements: [],
                                options: [],
                                answer: '',
                                image: (qMap[qNum] && qMap[qNum].images && qMap[qNum].images.length > 0) ? qMap[qNum].images[0] : null
                            };
                            currentLines = [qMatch[2]];
                        } else if (currentQ) {
                            currentLines.push(l);
                        }
                    });
                    if (currentQ) {
                        currentQ.rawLines = currentLines;
                        rawQuestions.push(currentQ);
                    }

                    const questions = [];

                    rawQuestions.forEach(q => {
                        let linesList = q.rawLines;
                        let ansIndex = -1;
                        for (let i = 0; i < linesList.length; i++) {
                            if (/^(?:Answer|उत्तर)\s*[:\-]?\s*(.*)/i.test(linesList[i].trim())) {
                                ansIndex = i;
                                const m = linesList[i].match(/^(?:Answer|उत्तर)\s*[:\-]?\s*(.*)/i);
                                q.answer = m[1].trim();
                                break;
                            }
                        }

                        if (ansIndex === -1) ansIndex = linesList.length;
                        let preAnswerLines = linesList.slice(0, ansIndex).filter(l => l.trim().length > 0);

                        let explicitOptions = [];
                        let remainingLines = [];

                        preAnswerLines.forEach(l => {
                            const optMatch = l.trim().match(/^(?:\(?([A-Ea-e])\)?[\.\)]+)\s*(.*)/i);
                            if (optMatch) {
                                let ltr = optMatch[1].toUpperCase();
                                let textVal = optMatch[2] || '';
                                explicitOptions.push({ prefix: `(${ltr})`, text: textVal, letter: ltr });
                            } else {
                                remainingLines.push(l);
                            }
                        });

                        if (explicitOptions.length >= 2) {
                            q.options = explicitOptions;
                        } else {
                            if (remainingLines.length >= 5) {
                                let potentialOpts = remainingLines.slice(-4);
                                remainingLines = remainingLines.slice(0, remainingLines.length - 4);
                                const letters = ['A', 'B', 'C', 'D', 'E'];
                                potentialOpts.forEach((optText, idx) => {
                                    let ltr = letters[idx] || 'A';
                                    q.options.push({ prefix: `(${ltr})`, text: optText.trim(), letter: ltr });
                                });
                            } else if (remainingLines.length === 4) {
                                let potentialOpts = remainingLines;
                                remainingLines = [];
                                const letters = ['A', 'B', 'C', 'D', 'E'];
                                potentialOpts.forEach((optText, idx) => {
                                    let ltr = letters[idx] || 'A';
                                    q.options.push({ prefix: `(${ltr})`, text: optText.trim(), letter: ltr });
                                });
                            }
                        }

                        let statements = [];
                        let nonOptLines = [];

                        remainingLines.forEach(l => {
                            const stmtMatch = l.trim().match(/^(\d+[\.\)])\s*(.*)/);
                            if (stmtMatch) {
                                statements.push(l);
                            } else {
                                nonOptLines.push(l);
                            }
                        });

                        q.statements = statements;
                        q.hindiQ = nonOptLines[0] ? nonOptLines[0].trim() : '';
                        q.englishQ = nonOptLines[1] ? nonOptLines[1].trim() : '';
                        
                        if (nonOptLines.length > 2) {
                            q.codeBlock = nonOptLines.slice(2).join('\n');
                        }

                        questions.push(q);
                    });

                    return questions;
                });
            });
        }

        function t2HandleFileUploaded(event) {
            const file = event.target.files[0];
            const badge = document.getElementById('t2FileInfoBadge');
            const wrapper = document.getElementById('t2ManualSelectionWrapper');
            const grid = document.getElementById('t2QuestionCheckboxesGrid');

            if (!file) {
                badge.style.display = 'none';
                wrapper.style.display = 'none';
                t2GlobalParsedQuestions = [];
                t2UpdateDashboardMetrics();
                return;
            }

            t2ParseDocx(file).then(questions => {
                t2GlobalParsedQuestions = questions;
                badge.style.display = 'block';
                badge.innerText = `✔ Uploaded successfully! Total questions found: ${questions.length}`;
                
                wrapper.style.display = 'flex';
                let gridHTML = '';
                questions.forEach((q) => {
                    gridHTML += `
                        <label style="display: inline-flex; align-items: center; gap: 4px; background: #f8fafc; padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer;">
                            <input type="checkbox" class="t2-q-checkbox-item" value="${q.num}" checked onchange="t2UpdateManualSelectedCount()" style="width: 14px; height: 14px; accent-color: var(--primary-orange);">
                            Q${q.num}
                        </label>
                    `;
                });
                grid.innerHTML = gridHTML;
                t2UpdateManualSelectedCount();
                t2UpdateDashboardMetrics();
            }).catch(err => {
                badge.style.display = 'block';
                badge.style.color = '#ef4444';
                badge.innerText = `Error parsing file: ${err.message}`;
                t2GlobalParsedQuestions = [];
                t2UpdateDashboardMetrics();
                wrapper.style.display = 'none';
            });
        }

        function t2UpdateManualSelectedCount() {
            const checkboxes = document.querySelectorAll('.t2-q-checkbox-item:checked');
            const countDisplay = document.getElementById('t2SelectedCountDisplay');
            if (countDisplay) {
                countDisplay.innerText = checkboxes.length;
            }
            t2UpdateDashboardMetrics();
        }

        function t2ToggleSelectAllManual(selectState) {
            const checkboxes = document.querySelectorAll('.t2-q-checkbox-item');
            checkboxes.forEach(cb => cb.checked = selectState);
            t2UpdateManualSelectedCount();
        }

        function t2HighlightSyntax(code) {
            const escaped = t2EscapeHtml(code);
            const keywords = /\b(def|return|import|from|as|for|in|if|else|elif|while|class|try|except|with|print|range|bin|max|min|round|type)\b/g;
            const strings = /(["'])(?:(?=(\\?))\2.)*?\1/g;
            const numbers = /\b\d+\b/g;

            return escaped
                .replace(strings, '<span class="syntax-string">$&</span>')
                .replace(keywords, '<span class="syntax-keyword">$&</span>')
                .replace(numbers, '<span class="syntax-number">$&</span>');
        }

        function t2TokenizeCodeForDocxLine(lineText, size) {
            const regex = /(\b(?:def|return|import|from|as|for|in|if|else|elif|while|class|try|except|with|print|range|bin|max|min|round|type)\b)|(["'].*?["'])|(\b\d+\b)/g;
            
            let runs = [];
            let lastIndex = 0;
            let match;

            while ((match = regex.exec(lineText)) !== null) {
                if (match.index > lastIndex) {
                    runs.push(new window.docx.TextRun({ text: lineText.substring(lastIndex, match.index), font: "Fira Code", size: size, color: "0F172A" }));
                }

                if (match[1]) {
                    runs.push(new window.docx.TextRun({ text: match[1], font: "Fira Code", size: size, color: "2563EB", bold: true }));
                } else if (match[2]) {
                    runs.push(new window.docx.TextRun({ text: match[2], font: "Fira Code", size: size, color: "16A34A" }));
                } else if (match[3]) {
                    runs.push(new window.docx.TextRun({ text: match[3], font: "Fira Code", size: size, color: "D97706" }));
                }
                lastIndex = regex.lastIndex;
            }

            if (lastIndex < lineText.length) {
                runs.push(new window.docx.TextRun({ text: lineText.substring(lastIndex), font: "Fira Code", size: size, color: "0F172A" }));
            }

            return runs;
        }

        function t2BuildSingleAnswerKeyTableHTML(chunkQuestions, setNum) {
            const totalQ = Math.min(100, chunkQuestions ? chunkQuestions.length : 0);
            const colsCount = Math.ceil(totalQ / 10);
            const rowsPerCol = 10;
            
            let titleText = setNum ? `Answer Key Set-${setNum}` : `ANSWER KEY`;
            let html = `<div class="ak-container"><div class="ak-title">${titleText}</div>`;
            html += `<table class="pro-ak-table"><tbody>`;

            for (let r = 0; r < rowsPerCol; r++) {
                html += `<tr>`;
                for (let c = 0; c < colsCount; c++) {
                    const localIndex = r + (c * rowsPerCol);
                    if (localIndex < totalQ) {
                        const qNum = localIndex + 1;
                        let ansRaw = chunkQuestions[localIndex].answer || '-';
                        let cleanAns = ansRaw.replace(/[\(\)]/g, '').trim().charAt(0).toUpperCase();
                        html += `<td>${qNum}</td><td>${cleanAns}</td>`;
                    } else {
                        html += `<td></td><td></td>`;
                    }
                }
                html += `</tr>`;
            }
            html += `</tbody></table></div>`;
            return html;
        }

        function t2GetSmartQuestionsPerSlide() {
            const qPerSlideSetting = document.getElementById('t2QuestionsPerPage').value;
            if (qPerSlideSetting !== 'auto') {
                return parseInt(qPerSlideSetting) || 1;
            }
            return 1; 
        }

        function t2BuildMasterSlides(questions) {
            if (!questions || questions.length === 0) return [];
            const slides = [];
            const enableSetWise = document.getElementById('t2EnableSetWise').checked;
            const questionsPerSet = parseInt(document.getElementById('t2QuestionsPerSet').value) || 10;
            const qPerSlide = t2GetSmartQuestionsPerSlide();
            const includeAK = document.getElementById('t2IncludeAnswerKey').checked;

            if (enableSetWise) {
                const sets = [];
                for (let i = 0; i < questions.length; i += questionsPerSet) {
                    sets.push(questions.slice(i, i + questionsPerSet));
                }

                sets.forEach((setQuestions, setIdx) => {
                    const setNum = setIdx + 1;
                    
                    slides.push({
                        type: 'divider',
                        setNumber: setNum
                    });

                    const renumberedSetQuestions = setQuestions.map((q, qIndex) => ({
                        ...q,
                        displayNum: qIndex + 1
                    }));

                    for (let i = 0; i < renumberedSetQuestions.length; i += qPerSlide) {
                        slides.push({
                            type: 'question',
                            setNumber: setNum,
                            questions: renumberedSetQuestions.slice(i, i + qPerSlide)
                        });
                    }

                    if (includeAK) {
                        for (let i = 0; i < renumberedSetQuestions.length; i += 100) {
                            slides.push({
                                type: 'answerkey',
                                setNumber: setNum,
                                questions: renumberedSetQuestions.slice(i, i + 100)
                            });
                        }
                    }
                });
            } else {
                const renumberedQuestions = questions.map((q, qIndex) => ({
                    ...q,
                    displayNum: qIndex + 1
                }));

                for (let i = 0; i < renumberedQuestions.length; i += qPerSlide) {
                    slides.push({
                        type: 'normal-question',
                        questions: renumberedQuestions.slice(i, i + qPerSlide)
                    });
                }

                if (includeAK) {
                    for (let i = 0; i < renumberedQuestions.length; i += 100) {
                        slides.push({
                            type: 'normal-answerkey',
                            questions: renumberedQuestions.slice(i, i + 100)
                        });
                    }
                }
            }

            return slides;
        }

        function t2GetActivePtForQuestion(q, baseFontSize) {
            return baseFontSize;
        }

        function t2GetDynamicImageDimensions(q, scale) {
            return { width: Math.round(380 * scale), height: Math.round(270 * scale) };
        }

        function t2HexToRgba(hex, opacity) {
            let c = hex.replace('#','');
            if(c.length===3) c = c.split('').map(x=>x+x).join('');
            const num = parseInt(c,16);
            return `rgba(${num>>16},${(num>>8)&255},${num&255},${opacity})`;
        }

        function t2GenerateSlides() {
            const fileInput = document.getElementById('t2DocFileInput');
            if (!fileInput.files[0]) {
                alert("Please select a Word (.docx) file first.");
                return;
            }

            t2ParseDocx(fileInput.files[0]).then(parsedQuestions => {
                t2GlobalParsedQuestions = parsedQuestions;
                
                const checkedBoxes = document.querySelectorAll('.t2-q-checkbox-item:checked');
                const allowedNums = Array.from(checkedBoxes).map(cb => parseInt(cb.value));

                let processedQuestions = parsedQuestions.filter(q => allowedNums.includes(q.num));

                const start = parseInt(document.getElementById('t2QStart').value) || 1;
                const end = parseInt(document.getElementById('t2QEnd').value) || 9999;
                
                processedQuestions = processedQuestions.filter(q => q.num >= start && q.num <= end);

                t2CurrentFilteredQuestions = processedQuestions.map((q, index) => ({
                    ...q,
                    num: index + 1
                }));

                if (t2CurrentFilteredQuestions.length === 0) {
                    alert("No questions selected or found matching your criteria.");
                    return;
                }

                t2MasterSlides = t2BuildMasterSlides(t2CurrentFilteredQuestions);
                t2CurrentSlideIndex = 0;
                t2RenderSlidePreview();
                t2UpdateDownloadButtonsUI();
                t2UpdateDashboardMetrics();
                const previewContainer = document.getElementById('t2PreviewContainer');
                if (previewContainer) {
                    previewContainer.style.display = 'block';
                    previewContainer.scrollIntoView({ behavior: 'smooth' });
                }
            }).catch(err => {
                alert("Error reading file: " + err.message);
            });
        }

        function t2UpdateDownloadButtonsUI() {
            const container = document.getElementById('t2DownloadActionButtons');
            if (!container) return;
            
            const enableSetWise = document.getElementById('t2EnableSetWise').checked;
            
            let html = `<button class="secondary" onclick="t2DownloadPDF()">Download PDF File</button>`;
            html += `<button class="secondary" onclick="t2DownloadDOCX(false)">Download Word File (Normal)</button>`;
            html += `<button class="secondary" onclick="t2DownloadDOCX(true)">Download Word File (Compatibility)</button>`;

            if (enableSetWise && t2CurrentFilteredQuestions.length > 0) {
                const questionsPerSet = parseInt(document.getElementById('t2QuestionsPerSet').value) || 10;
                const sets = [];
                for (let i = 0; i < t2CurrentFilteredQuestions.length; i += questionsPerSet) {
                    sets.push(t2CurrentFilteredQuestions.slice(i, i + questionsPerSet));
                }

                sets.forEach((_, setIdx) => {
                    const setNum = setIdx + 1;
                    html += `<button class="secondary" onclick="t2DownloadSpecificSetDOCX(${setNum}, false)">Download Set-${setNum} DOCX</button>`;
                });
            }

            container.innerHTML = html;
        }

        function t2RenderSlidePreview() {
            const stage = document.getElementById('t2SlideStage');
            if (!stage) return;

            if (t2CurrentFilteredQuestions && t2CurrentFilteredQuestions.length > 0) {
                t2MasterSlides = t2BuildMasterSlides(t2CurrentFilteredQuestions) || [];
                if (t2CurrentSlideIndex >= t2MasterSlides.length) {
                    t2CurrentSlideIndex = Math.max(0, t2MasterSlides.length - 1);
                }
            } else {
                t2MasterSlides = [];
            }

            t2UpdateDownloadButtonsUI();
            t2UpdateDashboardMetrics();

            const fontFamily = document.getElementById('t2FontFamily').value;
            const baseFontSize = parseInt(document.getElementById('t2BaseFontSize').value) || 20;
            const boldStyleMode = document.getElementById('t2BoldStyleMode').value;
            const hindiColor = document.getElementById('t2HindiColor').value;
            const englishColor = document.getElementById('t2EnglishColor').value;
            const optionsColor = document.getElementById('t2OptionsColor').value;
            const answerKeyColor = document.getElementById('t2AnswerKeyColor').value;
            const showAns = document.getElementById('t2ShowAnswerOnSlide').checked;
            const hideOpts = document.getElementById('t2HideOptions').checked;
            const columns = parseInt(document.getElementById('t2ColumnLayout').value) || 1;
            const questionSpacing = parseInt(document.getElementById('t2QuestionSpacing').value) || 12;

            const enableCodeHighlight = document.getElementById('t2EnableCodeHighlight').checked;
            const enableSyntaxHighlighter = document.getElementById('t2EnableSyntaxHighlighter').checked;
            const enableCodeBorder = document.getElementById('t2EnableCodeBorder').checked;
            const codeBorderShape = document.getElementById('t2CodeBorderShape').value;
            const codeBlockBgColor = document.getElementById('t2CodeBlockBgColor').value;
            const codeBlockOpacity = parseFloat(document.getElementById('t2CodeBlockOpacity').value) || 1.0;
            
            const dims = t2GetActiveDimensions();
            const maxBoxWidth = 750;
            const maxBoxHeight = 480;
            const aspect = dims.width / dims.height;
            let previewWidth, previewHeight;
            if (aspect >= 1) {
                previewWidth = maxBoxWidth;
                previewHeight = Math.round(maxBoxWidth / aspect);
            } else {
                previewHeight = maxBoxHeight;
                previewWidth = Math.round(maxBoxHeight * aspect);
            }
            
            stage.style.width = `${previewWidth}px`;
            stage.style.height = `${previewHeight}px`;

            const scale = previewWidth / dims.width;
            const mTop = Math.round((parseInt(document.getElementById('t2MarginTop').value) || 30) * scale);
            const mRight = Math.round((parseInt(document.getElementById('t2MarginRight').value) || 30) * scale);
            const mBottom = Math.round((parseInt(document.getElementById('t2MarginBottom').value) || 30) * scale);
            const mLeft = Math.round((parseInt(document.getElementById('t2MarginLeft').value) || 30) * scale);
            const scaledSpacing = Math.round(questionSpacing * scale);

            stage.style.fontFamily = `"${fontFamily}", "Noto Sans Devanagari", sans-serif`;
            stage.style.padding = `${mTop}px ${mRight}px ${mBottom}px ${mLeft}px`;
            
            const bgToDraw = t2ActiveBgJpegDataUrl || t2CreateDefaultBgCanvas(dims.width, dims.height);
            stage.style.background = `url("${bgToDraw}")`;

            const totalSlides = t2MasterSlides.length || 1;
            const slideIndicator = document.getElementById('t2SlideIndicator');
            if (slideIndicator) {
                slideIndicator.innerText = `Slide ${t2CurrentSlideIndex + 1} of ${totalSlides}`;
            }

            const jumpInput = document.getElementById('t2JumpPageInput');
            if (jumpInput) {
                jumpInput.value = t2CurrentSlideIndex + 1;
                jumpInput.max = totalSlides;
            }

            if (t2MasterSlides.length > 0 && t2CurrentSlideIndex < t2MasterSlides.length) {
                const slide = t2MasterSlides[t2CurrentSlideIndex];
                let html = '';

                if (slide.type === 'divider') {
                    html += `<div class="set-divider-title" style="color: ${hindiColor}; font-size: ${Math.round(64 * scale)}px;">SET-${slide.setNumber}</div>`;
                    stage.innerHTML = html;
                } else if (slide.type === 'question' || slide.type === 'normal-question') {
                    html += `<div style="column-count: ${columns}; column-gap: 15px; column-fill: auto; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box;">`;
                    
                    slide.questions.forEach((q, idx) => {
                        const activePt = t2GetActivePtForQuestion(q, baseFontSize);
                        const pxFontSize = Math.max(10, Math.round(activePt * scale * 1.15));
                        const qNum = q.displayNum !== undefined ? q.displayNum : q.num;
                        const bottomMargin = (idx < slide.questions.length - 1) ? scaledSpacing : 0;

                        const qFontWeight = (boldStyleMode === 'all' || boldStyleMode === 'questions_only' || boldStyleMode === 'questions_and_options') ? 'bold' : 'normal';
                        const optFontWeight = (boldStyleMode === 'all' || boldStyleMode === 'questions_and_options') ? 'bold' : 'normal';

                        html += `<div class="q-item-block" style="margin-bottom: ${bottomMargin}px;">`;
                        html += `<div class="question-row-container">`;
                        html += `<div class="question-text-side">`;

                        if (q.hindiQ) {
                            html += `<div class="q-hindi" style="font-size: ${pxFontSize}px; color: ${hindiColor}; font-weight: ${qFontWeight}; line-height: 1.25;">Q${qNum}. ${t2EscapeHtml(q.hindiQ)}</div>`;
                        }
                        if (q.englishQ) {
                            html += `<div class="q-english" style="font-size: ${pxFontSize}px; color: ${englishColor}; margin-top: 4px; font-weight: ${qFontWeight}; line-height: 1.25;">${t2EscapeHtml(q.englishQ)}</div>`;
                        }

                        if (q.statements && q.statements.length > 0) {
                            q.statements.forEach(stmt => {
                                html += `<div class="stmt-item" style="font-size: ${Math.round(pxFontSize * 0.9)}px; color: ${englishColor}; margin-top: 4px; padding-left: 14px; font-weight: ${qFontWeight}; line-height: 1.25;">${t2EscapeHtml(stmt)}</div>`;
                            });
                        }

                        if (q.codeBlock) {
                            let codeStyles = `font-size: ${Math.round(pxFontSize * 0.8)}px; line-height: 1.4; `;
                            if (enableCodeBorder) {
                                codeStyles += `border: 1.5px solid #cbd5e1; `;
                                if (codeBorderShape === 'rounded') codeStyles += `border-radius: 6px; `;
                                else codeStyles += `border-radius: 0px; `;
                            } else {
                                codeStyles += `border: none; `;
                            }
                            if (enableCodeHighlight) {
                                const rgbaBg = t2HexToRgba(codeBlockBgColor, codeBlockOpacity);
                                codeStyles += `background: ${rgbaBg}; `;
                            } else {
                                codeStyles += `background: transparent; `;
                            }
                            
                            const codeDisplayContent = enableSyntaxHighlighter ? t2HighlightSyntax(q.codeBlock) : t2EscapeHtml(q.codeBlock);
                            html += `<div class="code-preview-box" style="${codeStyles}">${codeDisplayContent}</div>`;
                        }

                        if (!hideOpts && q.options) {
                            q.options.forEach(opt => {
                                html += `<div class="opt-item" style="font-size: ${Math.round(pxFontSize * 0.82)}px; color: ${optionsColor}; margin-top: 3px; font-weight: ${optFontWeight}; line-height: 1.25;">${opt.prefix ? opt.prefix + ' ' : ''}${t2EscapeHtml(opt.text)}</div>`;
                            });
                        }
                        if (showAns && q.answer) {
                            let cleanAnswerText = q.answer.trim();
                            if (!cleanAnswerText.startsWith('(')) {
                                cleanAnswerText = `(${cleanAnswerText})`;
                            }
                            html += `<div class="q-answer" style="font-size: ${Math.round(pxFontSize * 0.82)}px; color: ${answerKeyColor}; margin-top: 5px; font-weight: bold; line-height: 1.25;">Answer: ${t2EscapeHtml(cleanAnswerText)}</div>`;
                        }

                        html += `</div>`;

                        if (q.image) {
                            const dynSize = t2GetDynamicImageDimensions(q, scale);
                            html += `<div class="question-image-side"><img decoding="async" src="${q.image}" class="question-image-box" style="width: ${dynSize.width}px; height: ${dynSize.height}px;" alt="Question Graphic"/></div>`;
                        }

                        html += `</div>`;
                        html += `</div>`;
                    });
                    html += `</div>`;
                    stage.innerHTML = html;
                } else if (slide.type === 'answerkey') {
                    stage.innerHTML = t2BuildSingleAnswerKeyTableHTML(slide.questions, slide.setNumber);
                } else if (slide.type === 'normal-answerkey') {
                    stage.innerHTML = t2BuildSingleAnswerKeyTableHTML(slide.questions, null);
                }
            } else {
                stage.innerHTML = `<div style="text-align: center; padding-top: 100px; font-weight: bold; color: #555;">No preview available</div>`;
            }
        }

        function t2PrevSlide() {
            if (t2CurrentSlideIndex > 0) {
                t2CurrentSlideIndex--;
                t2RenderSlidePreview();
            }
        }

        function t2NextSlide() {
            if (t2CurrentSlideIndex < t2MasterSlides.length - 1) {
                t2CurrentSlideIndex++;
                t2RenderSlidePreview();
            }
        }

        function t2JumpToSlide() {
            const input = document.getElementById('t2JumpPageInput');
            if (!input) return;
            const target = parseInt(input.value) - 1;
            const totalSlides = t2MasterSlides.length || 1;
            if (!isNaN(target) && target >= 0 && target < totalSlides) {
                t2CurrentSlideIndex = target;
                t2RenderSlidePreview();
            } else {
                alert(`Please enter a valid slide number between 1 and ${totalSlides}.`);
            }
        }

        function t2DownloadPDF() {
            if (t2CurrentFilteredQuestions.length === 0) {
                alert("Please generate and view the preview first.");
                return;
            }
            t2MasterSlides = t2BuildMasterSlides(t2CurrentFilteredQuestions);

            const fontFamily = document.getElementById('t2FontFamily').value;
            const ptFontSize = parseInt(document.getElementById('t2BaseFontSize').value) || 45;
            const boldStyleMode = document.getElementById('t2BoldStyleMode').value;
            const hindiColor = document.getElementById('t2HindiColor').value;
            const englishColor = document.getElementById('t2EnglishColor').value;
            const optionsColor = document.getElementById('t2OptionsColor').value;
            const answerKeyColor = document.getElementById('t2AnswerKeyColor').value;
            const showAns = document.getElementById('t2ShowAnswerOnSlide').checked;
            const hideOpts = document.getElementById('t2HideOptions').checked;
            const columns = parseInt(document.getElementById('t2ColumnLayout').value) || 1;
            const orientation = document.getElementById('t2Orientation').value;
            const questionSpacing = parseInt(document.getElementById('t2QuestionSpacing').value) || 12;
            
            const enableCodeHighlight = document.getElementById('t2EnableCodeHighlight').checked;
            const enableSyntaxHighlighter = document.getElementById('t2EnableSyntaxHighlighter').checked;
            const enableCodeBorder = document.getElementById('t2EnableCodeBorder').checked;
            const codeBorderShape = document.getElementById('t2CodeBorderShape').value;
            const codeBlockBgColor = document.getElementById('t2CodeBlockBgColor').value;
            const codeBlockOpacity = parseFloat(document.getElementById('t2CodeBlockOpacity').value) || 1.0;

            const mTop = parseInt(document.getElementById('t2MarginTop').value) || 120;
            const mRight = parseInt(document.getElementById('t2MarginRight').value) || 30;
            const mBottom = parseInt(document.getElementById('t2MarginBottom').value) || 30;
            const mLeft = parseInt(document.getElementById('t2MarginLeft').value) || 120;
            
            const dims = t2GetActiveDimensions();
            const bgToDraw = t2ActiveBgJpegDataUrl || t2CreateDefaultBgCanvas(dims.width, dims.height);

            const printContainer = document.getElementById('t2PrintSection');
            if (!printContainer) return;

            let dynamicStyleTag = document.getElementById('t2DynamicPrintStyle');
            if (!dynamicStyleTag) {
                dynamicStyleTag = document.createElement('style');
                dynamicStyleTag.id = 't2DynamicPrintStyle';
                document.head.appendChild(dynamicStyleTag);
            }
            dynamicStyleTag.innerHTML = `@media print { @page { size: ${orientation}; margin: 0; } body { background-color: white !important; } }`;

            let printHTML = '';

            t2MasterSlides.forEach((slide) => {
                printHTML += `<div class="print-page" style="font-family: '${fontFamily}', 'Noto Sans Devanagari', sans-serif; padding: ${mTop}px ${mRight}px ${mBottom}px ${mLeft}px; background-image: url('${bgToDraw}');">`;
                
                if (slide.type === 'divider') {
                    printHTML += `<div style="font-size: 64px; font-weight: 900; text-align: center; margin: auto; color: ${hindiColor}; letter-spacing: 2px; text-transform: uppercase;">SET-${slide.setNumber}</div>`;
                } else if (slide.type === 'question' || slide.type === 'normal-question') {
                    printHTML += `<div style="column-count: ${columns}; column-gap: 15px; column-fill: auto; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box;">`;
                    slide.questions.forEach((q, idx) => {
                        const activePt = t2GetActivePtForQuestion(q, ptFontSize);
                        const qNum = q.displayNum !== undefined ? q.displayNum : q.num;
                        const bottomMargin = (idx < slide.questions.length - 1) ? questionSpacing : 0;

                        const qFontWeight = (boldStyleMode === 'all' || boldStyleMode === 'questions_only' || boldStyleMode === 'questions_and_options') ? 'bold' : 'normal';
                        const optFontWeight = (boldStyleMode === 'all' || boldStyleMode === 'questions_and_options') ? 'bold' : 'normal';

                        printHTML += `<div class="q-item-block" style="margin-bottom: ${bottomMargin}px;">`;
                        printHTML += `<div style="display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 20px; width: 100%; box-sizing: border-box;">`;
                        printHTML += `<div style="flex: 1; display: flex; flex-direction: column; min-width: 0;">`;

                        if (q.hindiQ) {
                            printHTML += `<div class="q-hindi" style="font-size: ${activePt}px; color: ${hindiColor}; font-weight: ${qFontWeight}; line-height: 1.25; word-break: break-word; overflow-wrap: break-word; white-space: normal;">Q${qNum}. ${t2EscapeHtml(q.hindiQ)}</div>`;
                        }
                        if (q.englishQ) {
                            printHTML += `<div class="q-english" style="font-size: ${activePt}px; color: ${englishColor}; margin-top: 4px; font-weight: ${qFontWeight}; line-height: 1.25; word-break: break-word; overflow-wrap: break-word; white-space: normal;">${t2EscapeHtml(q.englishQ)}</div>`;
                        }

                        if (q.statements && q.statements.length > 0) {
                            q.statements.forEach(stmt => {
                                printHTML += `<div style="font-size: ${Math.round(activePt * 0.9)}px; color: ${englishColor}; margin-top: 4px; padding-left: 14px; font-weight: ${qFontWeight}; line-height: 1.25; word-break: break-word; overflow-wrap: break-word; white-space: normal;">${t2EscapeHtml(stmt)}</div>`;
                            });
                        }

                        if (q.codeBlock) {
                            let codeStyles = `font-family: 'Fira Code', monospace; font-size: ${Math.round(activePt * 0.8)}px; line-height: 1.4; padding: 6px 10px; margin: 6px 0; white-space: pre; display: inline-block; box-sizing: border-box; `;
                            if (enableCodeBorder) {
                                codeStyles += `border: 1.5px solid #cbd5e1; `;
                                if (codeBorderShape === 'rounded') codeStyles += `border-radius: 6px; `;
                                else codeStyles += `border-radius: 0px; `;
                            } else {
                                codeStyles += `border: none; `;
                            }
                            if (enableCodeHighlight) {
                                const rgbaBg = t2HexToRgba(codeBlockBgColor, codeBlockOpacity);
                                codeStyles += `background: ${rgbaBg}; `;
                            } else {
                                codeStyles += `background: transparent; `;
                            }
                            const codeDisplayContent = enableSyntaxHighlighter ? t2HighlightSyntax(q.codeBlock) : t2EscapeHtml(q.codeBlock);
                            printHTML += `<div style="${codeStyles}">${codeDisplayContent}</div>`;
                        }

                        if (!hideOpts && q.options) {
                            printHTML += q.options.map(opt => `<div class="opt-item" style="font-size: ${Math.round(activePt * 0.82)}px; color: ${optionsColor}; padding-left: 18px; text-indent: -18px; margin-top: 3px; font-weight: ${optFontWeight}; line-height: 1.25; word-break: break-word; overflow-wrap: break-word; white-space: normal;">${opt.prefix ? opt.prefix + ' ' : ''}${t2EscapeHtml(opt.text)}</div>`).join('');
                        }
                        if (showAns && q.answer) {
                            let cleanAnswerText = q.answer.trim();
                            if (!cleanAnswerText.startsWith('(')) {
                                cleanAnswerText = `(${cleanAnswerText})`;
                            }
                            printHTML += `<div class="q-answer" style="font-size: ${Math.round(activePt * 0.82)}px; color: ${answerKeyColor}; margin-top: 5px; font-weight: bold; line-height: 1.25; word-break: break-word; overflow-wrap: break-word; white-space: normal;">Answer: ${t2EscapeHtml(cleanAnswerText)}</div>`;
                        }

                        printHTML += `</div>`;

                        if (q.image) {
                            const dynPrintSize = t2GetDynamicImageDimensions(q, 1.0);
                            printHTML += `<div style="flex-shrink: 0; display: flex; align-items: flex-start; justify-content: flex-end;"><img decoding="async" src="${q.image}" style="width: ${dynPrintSize.width}px; height: ${dynPrintSize.height}px; object-fit: contain; border: none !important; background: transparent !important; display: block;" alt="Question Graphic"/></div>`;
                        }

                        printHTML += `</div>`;
                        printHTML += `</div>`;
                    });
                    printHTML += `</div>`;
                } else if (slide.type === 'answerkey') {
                    printHTML += t2BuildSingleAnswerKeyTableHTML(slide.questions, slide.setNumber);
                } else if (slide.type === 'normal-answerkey') {
                    printHTML += t2BuildSingleAnswerKeyTableHTML(slide.questions, null);
                }

                printHTML += `</div>`;
            });

            printContainer.innerHTML = printHTML;
            printContainer.style.display = 'block';
            
            setTimeout(() => {
                window.print();
                setTimeout(() => {
                    printContainer.style.display = 'none';
                }, 1000);
            }, 400);
        }

        async function t2DownloadDOCX(isCompatibilityMode) {
            if (t2CurrentFilteredQuestions.length === 0) return;

            try {
                const { Document, Packer, Paragraph, TextRun, Table, TableRow, TableCell, WidthType, PageOrientation, AlignmentType, Header, ImageRun, BorderStyle, ShadingType } = window.docx;
                const orientation = document.getElementById('t2Orientation').value;
                const pageSizeMode = document.getElementById('t2PageSize').value;
                const resolutionMode = document.getElementById('t2ResolutionQuality').value;
                const baseFontSize = parseInt(document.getElementById('t2BaseFontSize').value) || 45;
                const boldStyleMode = document.getElementById('t2BoldStyleMode').value;
                const selectedFont = document.getElementById('t2FontFamily').value;
                const showAns = document.getElementById('t2ShowAnswerOnSlide').checked;
                const hideOpts = document.getElementById('t2HideOptions').checked;
                const columns = parseInt(document.getElementById('t2ColumnLayout').value) || 1;
                const questionSpacing = parseInt(document.getElementById('t2QuestionSpacing').value) || 12;

                const enableCodeHighlight = document.getElementById('t2EnableCodeHighlight').checked;
                const enableSyntaxHighlighter = document.getElementById('t2EnableSyntaxHighlighter').checked;
                const enableCodeBorder = document.getElementById('t2EnableCodeBorder').checked;
                const codeBlockBgColor = document.getElementById('t2CodeBlockBgColor').value.replace('#', '');

                const mTop = (parseInt(document.getElementById('t2MarginTop').value) || 120) * 15;
                const mRight = (parseInt(document.getElementById('t2MarginRight').value) || 30) * 15;
                const mBottom = (parseInt(document.getElementById('t2MarginBottom').value) || 30) * 15;
                const mLeft = (parseInt(document.getElementById('t2MarginLeft').value) || 120) * 15;
                const docxSpacingAfter = questionSpacing * 20;

                const hindiColor = document.getElementById('t2HindiColor').value.replace('#', '');
                const englishColor = document.getElementById('t2EnglishColor').value.replace('#', '');
                const optionsColor = document.getElementById('t2OptionsColor').value.replace('#', '');
                const answerKeyColor = document.getElementById('t2AnswerKeyColor').value.replace('#', '');
                const isLandscape = (orientation === 'landscape');

                const isQBold = (boldStyleMode === 'all' || boldStyleMode === 'questions_only' || boldStyleMode === 'questions_and_options');
                const isOptBold = (boldStyleMode === 'all' || boldStyleMode === 'questions_and_options');

                let dxaWidth, dxaHeight;
                if (pageSizeMode === 'hd') {
                    if (resolutionMode === '720p') {
                        dxaWidth = 12825;
                        dxaHeight = 22860;
                    } else {
                        dxaWidth = 19305;
                        dxaHeight = 34290;
                    }
                } else if (pageSizeMode === 'a4') {
                    dxaWidth = 11900;
                    dxaHeight = 16838;
                } else if (pageSizeMode === 'a3') {
                    dxaWidth = 16838;
                    dxaHeight = 23811;
                } else {
                    dxaWidth = 12240;
                    dxaHeight = 15840;
                }

                const basePortraitRef = t2GetPortraitBaseDimensions();

                let headerObj = undefined;
                if (t2RawBgData) {
                    headerObj = {
                        default: new Header({
                            children: [
                                new Paragraph({
                                    children: [
                                        new ImageRun({
                                            data: Uint8Array.from(atob(t2RawBgData.base64), c => c.charCodeAt(0)),
                                            transformation: { 
                                                width: isLandscape ? basePortraitRef.height : basePortraitRef.width, 
                                                height: isLandscape ? basePortraitRef.width : basePortraitRef.height 
                                            },
                                            floating: {
                                                horizontalPosition: { relative: window.docx.HorizontalPositionRelativeFrom.PAGE, offset: 0 },
                                                verticalPosition: { relative: window.docx.VerticalPositionRelativeFrom.PAGE, offset: 0 },
                                                behindDocument: true
                                            }
                                        })
                                    ]
                                })
                            ]
                        })
                    };
                }

                const localMasterSlides = t2BuildMasterSlides(t2CurrentFilteredQuestions);
                const sections = [];

                localMasterSlides.forEach((slide) => {
                    const children = [];

                    if (slide.type === 'divider') {
                        children.push(new Paragraph({
                            children: [new TextRun({ text: `SET-${slide.setNumber}`, bold: true, size: 96, color: hindiColor, font: selectedFont })],
                            alignment: AlignmentType.CENTER,
                            spacing: { before: 2000, after: 1000 }
                        }));
                    } else if (slide.type === 'question' || slide.type === 'normal-question') {
                        slide.questions.forEach((q, qIdx) => {
                            const activePt = t2GetActivePtForQuestion(q, baseFontSize);
                            const qNum = q.displayNum !== undefined ? q.displayNum : q.num;
                            const isLastInSlide = (qIdx === slide.questions.length - 1);
                            const currentAfterSpace = isLastInSlide ? 50 : docxSpacingAfter;

                            let textParagraphs = [];

                            if (q.hindiQ) {
                                textParagraphs.push(new Paragraph({
                                    children: [new TextRun({ text: `Q${qNum}. ${q.hindiQ}`, bold: isQBold, size: Math.round(activePt * 2), color: hindiColor, font: selectedFont })],
                                    spacing: { before: 25, after: 10, line: 300, lineRule: "auto" }
                                }));
                            }
                            if (q.englishQ) {
                                textParagraphs.push(new Paragraph({
                                    children: [new TextRun({ text: q.englishQ, bold: isQBold, size: Math.round(activePt * 2), color: englishColor, font: selectedFont })],
                                    spacing: { after: 12, line: 300, lineRule: "auto" }
                                }));
                            }

                            if (q.statements && q.statements.length > 0) {
                                q.statements.forEach(stmt => {
                                    textParagraphs.push(new Paragraph({
                                        children: [new TextRun({ text: stmt, bold: isQBold, size: Math.round(activePt * 1.7), color: englishColor, font: selectedFont })],
                                        indent: { left: 280 },
                                        spacing: { after: 8, line: 300, lineRule: "auto" }
                                    }));
                                });
                            }

                            if (q.codeBlock) {
                                const codeLines = q.codeBlock.split('\n');
                                const codeParagraphs = codeLines.map((cLine) => {
                                    let leadingMatch = cLine.match(/^(\s*)/);
                                    let leadingSpaces = leadingMatch ? leadingMatch[1].length : 0;
                                    let NBSP = '\u00A0'.repeat(leadingSpaces);
                                    let lineText = NBSP + cLine.trimStart();

                                    let lineRuns = [];
                                    if (enableSyntaxHighlighter) {
                                        lineRuns = t2TokenizeCodeForDocxLine(lineText, Math.round(activePt * 1.6));
                                    } else {
                                        lineRuns = [new window.docx.TextRun({ text: lineText, font: "Fira Code", size: Math.round(activePt * 1.6), color: "0F172A" })];
                                    }

                                    return new Paragraph({
                                        children: lineRuns,
                                        spacing: { before: 0, after: 0, line: 240, lineRule: "auto" }
                                    });
                                });

                                const cellProps = {
                                    children: codeParagraphs,
                                    width: { size: 0, type: WidthType.AUTO },
                                    margins: { top: 60, bottom: 60, left: 100, right: 100 }
                                };

                                if (enableCodeHighlight) {
                                    cellProps.shading = { fill: codeBlockBgColor, type: ShadingType.CLEAR, color: "auto" };
                                }
                                if (enableCodeBorder) {
                                    const borderConfig = { style: BorderStyle.SINGLE, size: 12, color: "CBD5E1" };
                                    cellProps.borders = { top: borderConfig, bottom: borderConfig, left: borderConfig, right: borderConfig };
                                }

                                const codeTable = new Table({
                                    rows: [new TableRow({ children: [new TableCell(cellProps)] })],
                                    width: { size: 0, type: WidthType.AUTO }
                                });

                                textParagraphs.push(codeTable);
                                textParagraphs.push(new Paragraph({ spacing: { after: 12 } }));
                            }

                            if (!hideOpts && q.options) {
                                q.options.forEach((opt, optIdx) => {
                                    const isLastOpt = (optIdx === q.options.length - 1);
                                    const optAfterSpace = (isLastOpt && !showAns) ? currentAfterSpace : 12;
                                    textParagraphs.push(new Paragraph({
                                        children: [new TextRun({ text: `${opt.prefix ? opt.prefix + ' ' : ''}${opt.text}`, bold: isOptBold, size: Math.round(activePt * 1.7), color: optionsColor, font: selectedFont })],
                                        indent: { left: 420, hanging: 230 },
                                        spacing: { after: optAfterSpace, line: 300, lineRule: "auto" }
                                    }));
                                });
                            }
                            if (showAns && q.answer) {
                                let cleanAnswerText = q.answer.trim();
                                if (!cleanAnswerText.startsWith('(')) {
                                    cleanAnswerText = `(${cleanAnswerText})`;
                                }
                                textParagraphs.push(new Paragraph({
                                    children: [new TextRun({ text: `Answer: ${cleanAnswerText}`, bold: true, size: Math.round(activePt * 1.7), color: answerKeyColor, font: selectedFont })],
                                    spacing: { before: 12, after: currentAfterSpace, line: 300, lineRule: "auto" }
                                }));
                            }

                            if (q.image) {
                                try {
                                    const base64DataImg = q.image.split(',')[1];
                                    const uint8Arr = Uint8Array.from(atob(base64DataImg), c => c.charCodeAt(0));
                                    
                                    const imgPara = new Paragraph({
                                        children: [
                                            new ImageRun({
                                                data: uint8Arr,
                                                transformation: { width: 300, height: 210 }
                                            })
                                        ],
                                        alignment: AlignmentType.RIGHT
                                    });

                                    const availableWidth = dxaWidth - mLeft - mRight;
                                    const leftColWidth = Math.floor(availableWidth * 0.58);
                                    const rightColWidth = Math.floor(availableWidth * 0.42);

                                    const noBorderConfig = { style: BorderStyle.NONE, size: 0, color: "auto" };
                                    const borderlessConfig = { top: noBorderConfig, bottom: noBorderConfig, left: noBorderConfig, right: noBorderConfig };

                                    const layoutTable = new Table({
                                        rows: [
                                            new TableRow({
                                                children: [
                                                    new TableCell({
                                                        children: textParagraphs,
                                                        width: { size: leftColWidth, type: WidthType.DXA },
                                                        verticalAlign: window.docx.VerticalAlign.TOP,
                                                        borders: borderlessConfig
                                                    }),
                                                    new TableCell({
                                                        children: [imgPara],
                                                        width: { size: rightColWidth, type: WidthType.DXA },
                                                        verticalAlign: window.docx.VerticalAlign.TOP,
                                                        borders: borderlessConfig
                                                    })
                                                ]
                                            })
                                        ],
                                        width: { size: availableWidth, type: WidthType.DXA },
                                        alignment: AlignmentType.CENTER
                                    });

                                    children.push(layoutTable);
                                    children.push(new Paragraph({ spacing: { after: 20 } }));
                                } catch (e) {
                                    children.push(...textParagraphs);
                                }
                            } else {
                                children.push(...textParagraphs);
                            }
                        });
                    } else if (slide.type === 'answerkey' || slide.type === 'normal-answerkey') {
                        let akHeading = slide.setNumber ? `ANSWER KEY SET-${slide.setNumber}` : `ANSWER KEY`;
                        children.push(new Paragraph({
                            children: [new TextRun({ text: akHeading, bold: true, size: 36, color: "CC0000", font: selectedFont })],
                            alignment: AlignmentType.CENTER,
                            spacing: { before: 150, after: 200 }
                        }));

                        const chunkQ = slide.questions;
                        const totalQ = Math.min(100, chunkQ.length);
                        const colsCount = Math.ceil(totalQ / 10);
                        const rowsPerCol = 10;
                        
                        const tableRows = [];
                        const borderCfg = { style: BorderStyle.SINGLE, size: 8, color: "000000" };
                        const cellBorders = { top: borderCfg, bottom: borderCfg, left: borderCfg, right: borderCfg };

                        const availableTableWidth = dxaWidth - mLeft - mRight;
                        const totalCellsPerColumnPair = colsCount * 2;
                        const baseCellWidth = Math.floor(availableTableWidth / totalCellsPerColumnPair);
                        const numWidth = Math.max(360, Math.floor(baseCellWidth * 0.75));
                        const ansWidth = Math.max(480, Math.floor(baseCellWidth * 1.25));

                        for (let r = 0; r < rowsPerCol; r++) {
                            const rowCells = [];
                            const isEvenRow = (r % 2 !== 0);
                            const rowShading = isEvenRow ? { fill: "D1D5DB", type: ShadingType.CLEAR, color: "auto" } : undefined;

                            for (let c = 0; c < colsCount; c++) {
                                const localIndex = r + (c * rowsPerCol);
                                if (localIndex < totalQ) {
                                    const qNum = localIndex + 1;
                                    let ansRaw = chunkQ[localIndex].answer || '-';
                                    let cleanAns = ansRaw.replace(/[\(\)]/g, '').trim().charAt(0).toUpperCase();
                                    
                                    rowCells.push(new TableCell({ 
                                        children: [new Paragraph({ children: [new TextRun({ text: qNum.toString(), bold: true, size: 22, color: "000000", font: selectedFont })], alignment: AlignmentType.CENTER })], 
                                        borders: cellBorders,
                                        shading: rowShading,
                                        margins: { top: 60, bottom: 60, left: 30, right: 30 },
                                        width: { size: numWidth, type: WidthType.DXA } 
                                    }));
                                    rowCells.push(new TableCell({ 
                                        children: [new Paragraph({ children: [new TextRun({ text: cleanAns, bold: true, size: 22, color: "000000", font: selectedFont })], alignment: AlignmentType.CENTER })], 
                                        borders: cellBorders,
                                        shading: rowShading,
                                        margins: { top: 60, bottom: 60, left: 30, right: 30 },
                                        width: { size: ansWidth, type: WidthType.DXA } 
                                    }));
                                } else {
                                    rowCells.push(new TableCell({ children: [new Paragraph({ text: "" })], borders: cellBorders, shading: rowShading, margins: { top: 60, bottom: 60, left: 30, right: 30 }, width: { size: numWidth, type: WidthType.DXA } }));
                                    rowCells.push(new TableCell({ children: [new Paragraph({ text: "" })], borders: cellBorders, shading: rowShading, margins: { top: 60, bottom: 60, left: 30, right: 30 }, width: { size: ansWidth, type: WidthType.DXA } }));
                                }
                            }
                            tableRows.push(new TableRow({ children: rowCells }));
                        }

                        children.push(new Table({ 
                            rows: tableRows, 
                            width: { size: availableTableWidth, type: WidthType.DXA },
                            alignment: AlignmentType.CENTER 
                        }));
                    }

                    const secProps = {
                        page: {
                            margin: { top: mTop, right: mRight, bottom: mBottom, left: mLeft },
                            size: {
                                width: dxaWidth,
                                height: dxaHeight,
                                orientation: isLandscape ? PageOrientation.LANDSCAPE : PageOrientation.PORTRAIT
                            }
                        }
                    };

                    if (columns > 1 && slide.type.includes('question')) {
                        secProps.column = {
                            space: 300,
                            count: columns
                        };
                    }

                    sections.push({
                        properties: secProps,
                        headers: headerObj,
                        children: children
                    });
                });

                const docConfig = {
                    sections: sections,
                    compatibility: isCompatibilityMode,
                    styles: {
                        default: {
                            document: {
                                run: { font: selectedFont }
                            }
                        }
                    }
                };

                const doc = new Document(docConfig);

                Packer.toBlob(doc).then(blob => {
                    const link = document.createElement('a');
                    link.href = URL.createObjectURL(blob);
                    link.download = `Generated_Presentation_AllSets_${isCompatibilityMode ? 'Compat' : 'Normal'}_${orientation}.docx`;
                    link.click();
                });
            } catch (err) {
                alert("Error exporting Word document: " + err.message);
            }
        }

        async function t2DownloadSpecificSetDOCX(targetSetNum, isCompatibilityMode) {
            if (t2CurrentFilteredQuestions.length === 0) return;

            const questionsPerSet = parseInt(document.getElementById('t2QuestionsPerSet').value) || 10;
            const sets = [];
            for (let i = 0; i < t2CurrentFilteredQuestions.length; i += questionsPerSet) {
                sets.push(t2CurrentFilteredQuestions.slice(i, i + questionsPerSet));
            }

            const targetSetQuestions = sets[targetSetNum - 1];
            if (!targetSetQuestions) return;

            try {
                const { Document, Packer, Paragraph, TextRun, Table, TableRow, TableCell, WidthType, PageOrientation, AlignmentType, Header, ImageRun, BorderStyle, ShadingType } = window.docx;
                const orientation = document.getElementById('t2Orientation').value;
                const pageSizeMode = document.getElementById('t2PageSize').value;
                const resolutionMode = document.getElementById('t2ResolutionQuality').value;
                const baseFontSize = parseInt(document.getElementById('t2BaseFontSize').value) || 45;
                const boldStyleMode = document.getElementById('t2BoldStyleMode').value;
                const selectedFont = document.getElementById('t2FontFamily').value;
                const showAns = document.getElementById('t2ShowAnswerOnSlide').checked;
                const hideOpts = document.getElementById('t2HideOptions').checked;
                const columns = parseInt(document.getElementById('t2ColumnLayout').value) || 1;
                const questionSpacing = parseInt(document.getElementById('t2QuestionSpacing').value) || 12;
                const includeAK = document.getElementById('t2IncludeAnswerKey').checked;

                const enableCodeHighlight = document.getElementById('t2EnableCodeHighlight').checked;
                const enableSyntaxHighlighter = document.getElementById('t2EnableSyntaxHighlighter').checked;
                const enableCodeBorder = document.getElementById('t2EnableCodeBorder').checked;
                const codeBlockBgColor = document.getElementById('t2CodeBlockBgColor').value.replace('#', '');

                const mTop = (parseInt(document.getElementById('t2MarginTop').value) || 120) * 15;
                const mRight = (parseInt(document.getElementById('t2MarginRight').value) || 30) * 15;
                const mBottom = (parseInt(document.getElementById('t2MarginBottom').value) || 120) * 15;
                const mLeft = (parseInt(document.getElementById('t2MarginLeft').value) || 120) * 15;
                const docxSpacingAfter = questionSpacing * 20;

                const hindiColor = document.getElementById('t2HindiColor').value.replace('#', '');
                const englishColor = document.getElementById('t2EnglishColor').value.replace('#', '');
                const optionsColor = document.getElementById('t2OptionsColor').value.replace('#', '');
                const answerKeyColor = document.getElementById('t2AnswerKeyColor').value.replace('#', '');
                const isLandscape = (orientation === 'landscape');

                const isQBold = (boldStyleMode === 'all' || boldStyleMode === 'questions_only' || boldStyleMode === 'questions_and_options');
                const isOptBold = (boldStyleMode === 'all' || boldStyleMode === 'questions_and_options');

                let dxaWidth, dxaHeight;
                if (pageSizeMode === 'hd') {
                    if (resolutionMode === '720p') {
                        dxaWidth = 12825;
                        dxaHeight = 22860;
                    } else {
                        dxaWidth = 19305;
                        dxaHeight = 34290;
                    }
                } else if (pageSizeMode === 'a4') {
                    dxaWidth = 11900;
                    dxaHeight = 16838;
                } else if (pageSizeMode === 'a3') {
                    dxaWidth = 16838;
                    dxaHeight = 23811;
                } else {
                    dxaWidth = 12240;
                    dxaHeight = 15840;
                }

                const basePortraitRef = t2GetPortraitBaseDimensions();

                let headerObj = undefined;
                if (t2RawBgData) {
                    headerObj = {
                        default: new Header({
                            children: [
                                new Paragraph({
                                    children: [
                                        new ImageRun({
                                            data: Uint8Array.from(atob(t2RawBgData.base64), c => c.charCodeAt(0)),
                                            transformation: { 
                                                width: isLandscape ? basePortraitRef.height : basePortraitRef.width, 
                                                height: isLandscape ? basePortraitRef.width : basePortraitRef.height 
                                            },
                                            floating: {
                                                horizontalPosition: { relative: window.docx.HorizontalPositionRelativeFrom.PAGE, offset: 0 },
                                                verticalPosition: { relative: window.docx.VerticalPositionRelativeFrom.PAGE, offset: 0 },
                                                behindDocument: true
                                            }
                                        })
                                    ]
                                })
                            ]
                        })
                    };
                }

                const tempSetQuestions = targetSetQuestions.map((q, qIndex) => ({
                    ...q,
                    displayNum: qIndex + 1
                }));

                const qPerSlide = t2GetSmartQuestionsPerSlide();
                const singleSetSlides = [];

                singleSetSlides.push({ type: 'divider', setNumber: targetSetNum });

                for (let i = 0; i < tempSetQuestions.length; i += qPerSlide) {
                    singleSetSlides.push({
                        type: 'question',
                        setNumber: targetSetNum,
                        questions: tempSetQuestions.slice(i, i + qPerSlide)
                    });
                }

                if (includeAK) {
                    for (let i = 0; i < tempSetQuestions.length; i += 100) {
                        singleSetSlides.push({
                            type: 'answerkey',
                            setNumber: targetSetNum,
                            questions: tempSetQuestions.slice(i, i + 100)
                        });
                    }
                }

                const sections = [];

                singleSetSlides.forEach((slide) => {
                    const children = [];

                    if (slide.type === 'divider') {
                        children.push(new Paragraph({
                            children: [new TextRun({ text: `SET-${slide.setNumber}`, bold: true, size: 96, color: hindiColor, font: selectedFont })],
                            alignment: AlignmentType.CENTER,
                            spacing: { before: 2000, after: 1000 }
                        }));
                    } else if (slide.type === 'question') {
                        slide.questions.forEach((q, qIdx) => {
                            const activePt = t2GetActivePtForQuestion(q, baseFontSize);
                            const qNum = q.displayNum;
                            const isLastInSlide = (qIdx === slide.questions.length - 1);
                            const currentAfterSpace = isLastInSlide ? 50 : docxSpacingAfter;

                            let textParagraphs = [];

                            if (q.hindiQ) {
                                textParagraphs.push(new Paragraph({
                                    children: [new TextRun({ text: `Q${qNum}. ${q.hindiQ}`, bold: isQBold, size: Math.round(activePt * 2), color: hindiColor, font: selectedFont })],
                                    spacing: { before: 25, after: 10, line: 300, lineRule: "auto" }
                                }));
                            }
                            if (q.englishQ) {
                                textParagraphs.push(new Paragraph({
                                    children: [new TextRun({ text: q.englishQ, bold: isQBold, size: Math.round(activePt * 2), color: englishColor, font: selectedFont })],
                                    spacing: { after: 12, line: 300, lineRule: "auto" }
                                }));
                            }

                            if (q.statements && q.statements.length > 0) {
                                q.statements.forEach(stmt => {
                                    textParagraphs.push(new Paragraph({
                                        children: [new TextRun({ text: stmt, bold: isQBold, size: Math.round(activePt * 1.7), color: englishColor, font: selectedFont })],
                                        indent: { left: 280 },
                                        spacing: { after: 8, line: 300, lineRule: "auto" }
                                    }));
                                });
                            }

                            if (q.codeBlock) {
                                const codeLines = q.codeBlock.split('\n');
                                const codeParagraphs = codeLines.map((cLine) => {
                                    let leadingMatch = cLine.match(/^(\s*)/);
                                    let leadingSpaces = leadingMatch ? leadingMatch[1].length : 0;
                                    let NBSP = '\u00A0'.repeat(leadingSpaces);
                                    let lineText = NBSP + cLine.trimStart();

                                    let lineRuns = [];
                                    if (enableSyntaxHighlighter) {
                                        lineRuns = t2TokenizeCodeForDocxLine(lineText, Math.round(activePt * 1.6));
                                    } else {
                                        lineRuns = [new window.docx.TextRun({ text: lineText, font: "Fira Code", size: Math.round(activePt * 1.6), color: "0F172A" })];
                                    }

                                    return new Paragraph({
                                        children: lineRuns,
                                        spacing: { before: 0, after: 0, line: 240, lineRule: "auto" }
                                    });
                                });

                                const cellProps = {
                                    children: codeParagraphs,
                                    width: { size: 0, type: WidthType.AUTO },
                                    margins: { top: 60, bottom: 60, left: 100, right: 100 }
                                };

                                if (enableCodeHighlight) {
                                    cellProps.shading = { fill: codeBlockBgColor, type: ShadingType.CLEAR, color: "auto" };
                                }
                                if (enableCodeBorder) {
                                    const borderConfig = { style: BorderStyle.SINGLE, size: 12, color: "CBD5E1" };
                                    cellProps.borders = { top: borderConfig, bottom: borderConfig, left: borderConfig, right: borderConfig };
                                }

                                const codeTable = new Table({
                                    rows: [new TableRow({ children: [new TableCell(cellProps)] })],
                                    width: { size: 0, type: WidthType.AUTO }
                                });

                                textParagraphs.push(codeTable);
                                textParagraphs.push(new Paragraph({ spacing: { after: 12 } }));
                            }

                            if (!hideOpts && q.options) {
                                q.options.forEach((opt, optIdx) => {
                                    const isLastOpt = (optIdx === q.options.length - 1);
                                    const optAfterSpace = (isLastOpt && !showAns) ? currentAfterSpace : 12;
                                    textParagraphs.push(new Paragraph({
                                        children: [new TextRun({ text: `${opt.prefix ? opt.prefix + ' ' : ''}${opt.text}`, bold: isOptBold, size: Math.round(activePt * 1.7), color: optionsColor, font: selectedFont })],
                                        indent: { left: 420, hanging: 230 },
                                        spacing: { after: optAfterSpace, line: 300, lineRule: "auto" }
                                    }));
                                });
                            }
                            if (showAns && q.answer) {
                                let cleanAnswerText = q.answer.trim();
                                if (!cleanAnswerText.startsWith('(')) {
                                    cleanAnswerText = `(${cleanAnswerText})`;
                                }
                                textParagraphs.push(new Paragraph({
                                    children: [new TextRun({ text: `Answer: ${cleanAnswerText}`, bold: true, size: Math.round(activePt * 1.7), color: answerKeyColor, font: selectedFont })],
                                    spacing: { before: 12, after: currentAfterSpace, line: 300, lineRule: "auto" }
                                }));
                            }

                            if (q.image) {
                                try {
                                    const base64DataImg = q.image.split(',')[1];
                                    const uint8Arr = Uint8Array.from(atob(base64DataImg), c => c.charCodeAt(0));
                                    
                                    const imgPara = new Paragraph({
                                        children: [
                                            new ImageRun({
                                                data: uint8Arr,
                                                transformation: { width: 300, height: 210 }
                                            })
                                        ],
                                        alignment: AlignmentType.RIGHT
                                    });

                                    const availableWidth = dxaWidth - mLeft - mRight;
                                    const leftColWidth = Math.floor(availableWidth * 0.58);
                                    const rightColWidth = Math.floor(availableWidth * 0.42);

                                    const noBorderConfig = { style: BorderStyle.NONE, size: 0, color: "auto" };
                                    const borderlessConfig = { top: noBorderConfig, bottom: noBorderConfig, left: noBorderConfig, right: noBorderConfig };

                                    const layoutTable = new Table({
                                        rows: [
                                            new TableRow({
                                                children: [
                                                    new TableCell({
                                                        children: textParagraphs,
                                                        width: { size: leftColWidth, type: WidthType.DXA },
                                                        verticalAlign: window.docx.VerticalAlign.TOP,
                                                        borders: borderlessConfig
                                                    }),
                                                    new TableCell({
                                                        children: [imgPara],
                                                        width: { size: rightColWidth, type: WidthType.DXA },
                                                        verticalAlign: window.docx.VerticalAlign.TOP,
                                                        borders: borderlessConfig
                                                    })
                                                ]
                                            })
                                        ],
                                        width: { size: availableWidth, type: WidthType.DXA },
                                        alignment: AlignmentType.CENTER
                                    });

                                    children.push(layoutTable);
                                    children.push(new Paragraph({ spacing: { after: 20 } }));
                                } catch (e) {
                                    children.push(...textParagraphs);
                                }
                            } else {
                                children.push(...textParagraphs);
                            }
                        });
                    } else if (slide.type === 'answerkey') {
                        let akHeading = `ANSWER KEY SET-${slide.setNumber}`;
                        children.push(new Paragraph({
                            children: [new TextRun({ text: akHeading, bold: true, size: 36, color: "CC0000", font: selectedFont })],
                            alignment: AlignmentType.CENTER,
                            spacing: { before: 150, after: 200 }
                        }));

                        const chunkQ = slide.questions;
                        const totalQ = Math.min(100, chunkQ.length);
                        const colsCount = Math.ceil(totalQ / 10);
                        const rowsPerCol = 10;
                        
                        const tableRows = [];
                        const borderCfg = { style: BorderStyle.SINGLE, size: 8, color: "000000" };
                        const cellBorders = { top: borderCfg, bottom: borderCfg, left: borderCfg, right: borderCfg };

                        const availableTableWidth = dxaWidth - mLeft - mRight;
                        const totalCellsPerColumnPair = colsCount * 2;
                        const baseCellWidth = Math.floor(availableTableWidth / totalCellsPerColumnPair);
                        const numWidth = Math.max(360, Math.floor(baseCellWidth * 0.75));
                        const ansWidth = Math.max(480, Math.floor(baseCellWidth * 1.25));

                        for (let r = 0; r < rowsPerCol; r++) {
                            const rowCells = [];
                            const isEvenRow = (r % 2 !== 0);
                            const rowShading = isEvenRow ? { fill: "D1D5DB", type: ShadingType.CLEAR, color: "auto" } : undefined;

                            for (let c = 0; c < colsCount; c++) {
                                const localIndex = r + (c * rowsPerCol);
                                if (localIndex < totalQ) {
                                    const qNum = localIndex + 1;
                                    let ansRaw = chunkQ[localIndex].answer || '-';
                                    let cleanAns = ansRaw.replace(/[\(\)]/g, '').trim().charAt(0).toUpperCase();
                                    
                                    rowCells.push(new TableCell({ 
                                        children: [new Paragraph({ children: [new TextRun({ text: qNum.toString(), bold: true, size: 22, color: "000000", font: selectedFont })], alignment: AlignmentType.CENTER })], 
                                        borders: cellBorders,
                                        shading: rowShading,
                                        margins: { top: 60, bottom: 60, left: 30, right: 30 },
                                        width: { size: numWidth, type: WidthType.DXA } 
                                    }));
                                    rowCells.push(new TableCell({ 
                                        children: [new Paragraph({ children: [new TextRun({ text: cleanAns, bold: true, size: 22, color: "000000", font: selectedFont })], alignment: AlignmentType.CENTER })], 
                                        borders: cellBorders,
                                        shading: rowShading,
                                        margins: { top: 60, bottom: 60, left: 30, right: 30 },
                                        width: { size: ansWidth, type: WidthType.DXA } 
                                    }));
                                } else {
                                    rowCells.push(new TableCell({ children: [new Paragraph({ text: "" })], borders: cellBorders, shading: rowShading, margins: { top: 60, bottom: 60, left: 30, right: 30 }, width: { size: numWidth, type: WidthType.DXA } }));
                                    rowCells.push(new TableCell({ children: [new Paragraph({ text: "" })], borders: cellBorders, shading: rowShading, margins: { top: 60, bottom: 60, left: 30, right: 30 }, width: { size: ansWidth, type: WidthType.DXA } }));
                                }
                            }
                            tableRows.push(new TableRow({ children: rowCells }));
                        }

                        children.push(new Table({ 
                            rows: tableRows, 
                            width: { size: availableTableWidth, type: WidthType.DXA },
                            alignment: AlignmentType.CENTER 
                        }));
                    }

                    const secProps = {
                        page: {
                            margin: { top: mTop, right: mRight, bottom: mBottom, left: mLeft },
                            size: {
                                width: dxaWidth,
                                height: dxaHeight,
                                orientation: isLandscape ? PageOrientation.LANDSCAPE : PageOrientation.PORTRAIT
                            }
                        }
                    };

                    if (columns > 1 && slide.type.includes('question')) {
                        secProps.column = {
                            space: 300,
                            count: columns.toString()
                        };
                    }

                    sections.push({
                        properties: secProps,
                        headers: headerObj,
                        children: children
                    });
                });

                const docConfig = {
                    sections: sections,
                    compatibility: isCompatibilityMode,
                    styles: {
                        default: {
                            document: {
                                run: { font: selectedFont }
                            }
                        }
                    }
                };

                const doc = new Document(docConfig);

                Packer.toBlob(doc).then(blob => {
                    const link = document.createElement('a');
                    link.href = URL.createObjectURL(blob);
                    link.download = `GyanXp_Set_${targetSetNum}_${orientation}.docx`;
                    link.click();
                });
            } catch (err) {
                alert("Error exporting set document: " + err.message);
            }
        }
    </script>
    <!-- Include Docx.js Library for Tool 2 & Native Tool 1 Word Export -->
    <script src="https://cdn.jsdelivr.net/npm/docx@8.5.0/build/index.umd.js"></script>
</body>
</html>				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		<p>The post <a href="https://gyanxp.com/tool/">tool</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://gyanxp.com/tool/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>iul</title>
		<link>https://gyanxp.com/iul/</link>
					<comments>https://gyanxp.com/iul/#respond</comments>
		
		<dc:creator><![CDATA[Balmukund Maurya]]></dc:creator>
		<pubDate>Tue, 18 Aug 2026 14:50:24 +0000</pubDate>
				<category><![CDATA[Uncategorized]]></category>
		<guid isPermaLink="false">https://gyanxp.com/?p=6264</guid>

					<description><![CDATA[<p>University Exam Seating &#038; Attendance System Select Course Code(s) for Attendance Sheets ✕ Select one or more course codes below. 0 Selected Select All &#124; Deselect All No course codes detected. Generate reports first. Cancel Generate &#038; View Restricted Access University Exam Seating &#038; Attendance System Portal Invalid User ID or Password. Please try again. [&#8230;]</p>
<p>The post <a href="https://gyanxp.com/iul/">iul</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="6264" class="elementor elementor-6264">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-4cd98a4 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4cd98a4" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d387464" data-id="d387464" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-52f3c63 elementor-widget elementor-widget-html" data-id="52f3c63" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>University Exam Seating & Attendance System</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
  <style>
    /* Print Orientation & Formatting Rules */
    @media print {
      body * {
        visibility: hidden !important;
      }
      #print-area, #print-area * {
        visibility: visible !important;
      }
      #print-area {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      .no-print {
        display: none !important;
      }

      .page-break {
        page-break-after: always !important;
        break-after: page !important;
        height: 100vh !important;
        max-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        overflow: hidden !important;
      }

      .detained-row {
        background-color: #fee2e2 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }
      .detained-cell {
        background-color: #fca5a5 !important;
        color: #991b1b !important;
        font-weight: bold !important;
        text-decoration: line-through !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }
      .custom-header-box {
        background: #fff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }
      .cohort-a-cell {
        background-color: #ffffff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }
      .cohort-b-cell {
        background-color: #f1f5f9 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }
    }

    /* Page Setup & Margins */
    @page portrait-page {
      size: A4 portrait;
      margin: 6mm 10mm 6mm 10mm;
    }
    @page landscape-page {
      size: A4 landscape;
      margin: 6mm 10mm 6mm 10mm;
    }

    .portrait-view {
      page: portrait-page;
    }
    .landscape-view {
      page: landscape-page;
    }

    /* Professional Double-Ribbon Header Box */
    .pro-header-container {
      border: 2px solid #0f172a;
      border-radius: 6px;
      padding: 6px 10px;
      margin-bottom: 6px;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      position: relative;
    }
    .pro-header-divider {
      height: 2px;
      background: linear-gradient(90deg, #0f172a 0%, #2563eb 50%, #0f172a 100%);
      margin: 4px 0;
    }

    /* 1. Exact Student List & Attendance Table CSS (Portrait) */
    .report-table {
      width: 100%;
      border-collapse: collapse;
      border: 2px solid #0f172a;
      font-family: Arial, Helvetica, sans-serif;
      margin-bottom: 4px;
    }
    .report-table th, .report-table td {
      border: 1px solid #334155;
      padding: 3px 5px;
      font-size: 11px;
      line-height: 1.15;
    }
    .header-cell {
      border: 1px solid #0f172a;
      text-align: center;
      font-weight: bold;
      padding: 4px;
    }
    .cohort-header {
      border: 1.5px solid #0f172a;
      text-align: center;
      font-weight: 800;
      font-size: 12px;
      padding: 3px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .col-sno { width: 45px; text-align: center; font-weight: 700; }
    .col-roll { width: 130px; text-align: left; font-size: 12px; font-weight: 700; }
    .col-enroll { width: 140px; text-align: left; font-size: 12px; font-weight: 700; }
    .col-name { text-align: left; text-transform: uppercase; font-weight: 700; font-size: 12px; }
    .col-group { width: 85px; text-align: center; font-weight: 700; }
    .col-sign { width: 130px; text-align: center; }
    .col-reason { width: 150px; text-align: center; font-weight: 800; color: #b91c1c; }

    /* Highlight classes */
    .detained-row {
      background-color: #fee2e2;
    }
    .detained-cell {
      background-color: #fca5a5;
      color: #991b1b;
      font-weight: bold;
      text-decoration: line-through;
    }

    /* Cohort Shadow Differentiation Classes for Seating Matrix */
    .cohort-a-cell {
      background-color: #ffffff;
    }
    .cohort-b-cell {
      background-color: #f1f5f9;
    }

    /* 2. Seating Matrix CSS (Landscape) */
    .matrix-table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      border: 2px solid #0f172a;
      font-family: Arial, Helvetica, sans-serif;
    }
    .matrix-table td {
      border: 1px solid #334155;
      padding: 3px 2px;
      font-size: 11px;
      text-align: center;
      line-height: 1.2;
      height: 36px;
      vertical-align: middle;
      word-break: break-word;
    }
    .matrix-aisle {
      border-top: none !important;
      border-bottom: none !important;
      border-left: 2px solid #0f172a !important;
      border-right: 2px solid #0f172a !important;
      width: 32px !important;
      background: #f8fafc;
    }
  </style>
</head>
<body class="bg-slate-100 font-sans text-slate-900 min-h-screen">

  <!-- Course Code Selection Modal for Separate Course Code Wise Attendance Sheets -->
  <div id="courseCodeModal" class="hidden fixed inset-0 z-50 bg-slate-950/70 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl max-w-lg w-full p-6 space-y-4 border border-slate-200">
      <div class="flex justify-between items-center border-b pb-3">
        <h3 class="text-sm font-black text-slate-900 uppercase">Select Course Code(s) for Attendance Sheets</h3>
        <button onclick="closeCourseCodeModal()" class="text-slate-400 hover:text-slate-700 font-bold text-lg">✕</button>
      </div>
      <div class="flex justify-between items-center text-xs">
        <p class="text-slate-500 font-medium">Select one or more course codes below.</p>
        <span id="selectedCourseCountBadge" class="bg-indigo-100 text-indigo-800 font-bold px-2.5 py-0.5 rounded-full text-[11px]">0 Selected</span>
      </div>
      
      <div class="flex items-center gap-2 py-1">
        <button onclick="toggleAllCourseCodes(true)" class="text-[11px] font-bold text-indigo-600 hover:underline">Select All</button>
        <span class="text-slate-300">|</span>
        <button onclick="toggleAllCourseCodes(false)" class="text-[11px] font-bold text-slate-600 hover:underline">Deselect All</button>
      </div>

      <div id="courseCodeCheckboxContainer" class="max-h-60 overflow-y-auto space-y-2 border p-3 rounded-lg bg-slate-50">
        <p class="text-xs text-slate-400 italic">No course codes detected. Generate reports first.</p>
      </div>

      <div class="flex justify-end gap-2 pt-3 border-t">
        <button onclick="closeCourseCodeModal()" class="px-4 py-2 bg-slate-200 hover:bg-slate-300 text-slate-800 text-xs font-bold rounded-lg transition">Cancel</button>
        <button onclick="confirmGenerateCourseCodeAttendance()" class="px-5 py-2 bg-indigo-700 hover:bg-indigo-800 text-white text-xs font-bold rounded-lg shadow transition">Generate & View</button>
      </div>
    </div>
  </div>

  <!-- Login Overlay Section -->
  <div id="loginOverlay" class="fixed inset-0 z-50 bg-slate-950 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8 space-y-6 border border-slate-200">
      <div class="text-center space-y-2">
        <h2 class="text-2xl font-black text-slate-900 uppercase tracking-wide">Restricted Access</h2>
        <p class="text-xs text-slate-500 font-medium">University Exam Seating & Attendance System Portal</p>
      </div>
      
      <div id="loginError" class="hidden bg-red-50 border border-red-200 text-red-700 text-xs p-3 rounded-lg font-semibold text-center">
        Invalid User ID or Password. Please try again.
      </div>

      <div class="space-y-4">
        <div>
          <label class="block text-xs font-bold text-slate-700 mb-1">USER ID</label>
          <input id="loginUserId" type="text" placeholder="Enter User ID" class="w-full border rounded-lg p-3 text-xs font-bold text-slate-800 focus:ring-2 focus:ring-indigo-600 focus:outline-none" />
        </div>
        <div>
          <label class="block text-xs font-bold text-slate-700 mb-1">PASSWORD</label>
          <input id="loginPassword" type="password" placeholder="Enter Password" class="w-full border rounded-lg p-3 text-xs font-bold text-slate-800 focus:ring-2 focus:ring-indigo-600 focus:outline-none" />
        </div>
        <button onclick="handleLogin()" class="w-full bg-indigo-700 hover:bg-indigo-800 text-white py-3 rounded-lg text-xs font-extrabold shadow-lg transition tracking-wider uppercase">
          Login to System
        </button>
      </div>
      <div class="text-center">
        <p class="text-[10px] text-slate-400 font-medium">Department of Computer Science & Engineering, Integral University</p>
      </div>
    </div>
  </div>

  <!-- Main Application Wrapper (Hidden until authenticated) -->
  <div id="appContainer" class="hidden">
    <!-- Application Navbar -->
    <header class="bg-slate-900 text-white shadow sticky top-0 z-50 no-print">
      <div class="max-w-7xl mx-auto px-6 py-3 flex flex-wrap justify-between items-center gap-4">
        <div>
          <div class="flex items-center gap-2">
            <h1 class="text-lg font-bold">University Exam Seating Plan & Report Generator</h1>
            <span class="bg-indigo-700 text-indigo-100 text-[10px] font-bold px-2 py-0.5 rounded">v10.2 Pro</span>
          </div>
          <p class="text-xs text-indigo-300 font-medium tracking-wide mt-0.5">
            Develop by Balmukund Maurya, Integral University, Department of CSE
          </p>
        </div>
        <div class="flex items-center gap-3">
          <button onclick="exportToWordDoc()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-xs font-bold shadow flex items-center gap-2 transition">
            <span>📄 Export Word (.doc)</span>
          </button>
          <button onclick="safePrintReport()" class="bg-emerald-600 hover:bg-emerald-700 text-white px-5 py-2 rounded-lg text-xs font-bold shadow flex items-center gap-2 transition">
            <span>🖨️ Print / Save PDF</span>
          </button>
          <button onclick="handleLogout()" class="bg-red-600 hover:bg-red-700 text-white px-3 py-2 rounded-lg text-xs font-bold shadow transition" title="Logout">
            <span>Logout</span>
          </button>
        </div>
      </div>
    </header>

    <main class="max-w-7xl mx-auto p-6 space-y-6 no-print">

      <!-- TOP ANALYSIS DASHBOARD -->
      <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-3">
        <div class="bg-white p-3 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
          <span class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Total Rooms</span>
          <div class="flex items-baseline justify-between mt-1">
            <span id="dashRooms" class="text-lg font-extrabold text-slate-900">0</span>
            <span class="text-[9px] text-slate-400 font-medium">Configured</span>
          </div>
        </div>

        <div class="bg-white p-3 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
          <span class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Total Capacity</span>
          <div class="flex items-baseline justify-between mt-1">
            <span id="dashTotalCap" class="text-lg font-extrabold text-indigo-700">0</span>
            <span class="text-[9px] text-indigo-400 font-medium">Seats</span>
          </div>
        </div>

        <div class="bg-white p-3 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
          <span class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Total Students</span>
          <div class="flex items-baseline justify-between mt-1">
            <span id="dashTotalStudents" class="text-lg font-extrabold text-slate-900">0</span>
            <span class="text-[9px] text-slate-400 font-medium">Slot A + B</span>
          </div>
        </div>

        <div class="bg-white p-3 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
          <span class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Allotted Students</span>
          <div class="flex items-baseline justify-between mt-1">
            <span id="dashAllotted" class="text-lg font-extrabold text-emerald-700">0</span>
            <span class="text-[9px] text-emerald-500 font-medium">Seated</span>
          </div>
        </div>

        <div class="bg-white p-3 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
          <span class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Cohort A / B</span>
          <div class="flex items-baseline justify-between mt-1">
            <span class="text-xs font-bold text-indigo-900"><span id="dashA">0</span> / <span id="dashB">0</span></span>
            <span class="text-[9px] text-slate-400 font-medium">Enrolled</span>
          </div>
        </div>

        <div class="bg-white p-3 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
          <span class="text-[10px] font-bold text-red-600 uppercase tracking-wider">Detained</span>
          <div class="flex items-baseline justify-between mt-1">
            <span id="dashDetained" class="text-lg font-extrabold text-red-600">0</span>
            <span class="text-[9px] text-red-400 font-medium">Marked</span>
          </div>
        </div>

        <div class="bg-white p-3 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
          <span class="text-[10px] font-bold text-amber-600 uppercase tracking-wider">Unallotted</span>
          <div class="flex items-baseline justify-between mt-1">
            <span id="dashUnallotted" class="text-lg font-extrabold text-amber-600">0</span>
            <span class="text-[9px] text-amber-400 font-medium">Overflow</span>
          </div>
        </div>

        <div class="bg-white p-3 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
          <span class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Occupancy</span>
          <div class="flex items-baseline justify-between mt-1">
            <span id="dashOccupancy" class="text-lg font-extrabold text-emerald-600">0%</span>
            <span id="dashVacant" class="text-[9px] text-emerald-600 font-medium">0 Vacant</span>
          </div>
        </div>
      </div>

      <!-- Advanced Deep Analysis Breakdown Cards -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
        <div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm space-y-2">
          <div class="flex justify-between items-center text-xs">
            <span class="font-bold text-slate-700">Room Utilization Overview</span>
            <span id="utilizationRatio" class="font-bold text-indigo-700 text-[11px]">0 / 0 Seats</span>
          </div>
          <div class="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden flex">
            <div id="utilizationBar" class="bg-indigo-600 h-2.5 transition-all duration-500" style="width: 0%"></div>
          </div>
          <div class="flex justify-between text-[10px] text-slate-500 font-medium pt-0.5">
            <span>Utilization Rate</span>
            <span id="utilizationPct" class="font-bold text-slate-700">0%</span>
          </div>
        </div>

        <div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm space-y-2">
          <div class="flex justify-between items-center text-xs">
            <span class="font-bold text-slate-700">Cohort Distribution Mix</span>
            <span class="text-[10px] text-slate-500 font-medium">Ratio A : B</span>
          </div>
          <div class="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden flex">
            <div id="cohortABar" class="bg-indigo-500 h-2.5" style="width: 50%" title="Cohort A"></div>
            <div id="cohortBBar" class="bg-emerald-500 h-2.5" style="width: 50%" title="Cohort B"></div>
          </div>
          <div class="flex justify-between text-[10px] font-semibold pt-0.5">
            <span class="text-indigo-700 flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-indigo-500 inline-block"></span> Cohort A: <span id="cohortAPct">0%</span></span>
            <span class="text-emerald-700 flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-emerald-500 inline-block"></span> Cohort B: <span id="cohortBPct">0%</span></span>
          </div>
        </div>

        <div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm space-y-1.5">
          <div class="flex justify-between items-center text-xs">
            <span class="font-bold text-slate-700">Branch & Section Breakdown</span>
            <div class="flex items-center gap-2">
              <span id="groupTotalBadge" class="text-[10px] bg-slate-100 text-slate-600 px-1.5 py-0.5 rounded font-bold">0 Sections</span>
              <button onclick="printBranchSectionPdf()" class="bg-rose-600 hover:bg-rose-700 text-white text-[10px] px-2 py-0.5 rounded font-bold shadow transition" title="Download Branch & Section PDF">📥 PDF</button>
            </div>
          </div>
          <div id="groupStatsContainer" class="flex flex-wrap gap-1 max-h-12 overflow-y-auto pr-1">
            <span class="text-[11px] text-slate-400 italic">Generate report to view branch breakdown</span>
          </div>
        </div>
      </div>

      <!-- Used and Unused Rooms Detailed Status Card -->
      <div class="bg-white p-4 rounded-xl border border-slate-200 shadow-sm space-y-2">
        <div class="flex justify-between items-center text-xs border-b pb-1.5">
          <span class="font-bold text-slate-800">Rooms Allocation Status (Used vs Unused)</span>
          <span class="text-[10px] text-slate-500 font-semibold" id="roomStatusSummaryBadge">0 Used / 0 Unused</span>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 pt-1">
          <div class="bg-emerald-50/50 border border-emerald-200 p-2.5 rounded-lg">
            <div class="text-[11px] font-bold text-emerald-900 mb-1 flex items-center gap-1">
              <span>✅ Used Rooms:</span>
              <span id="usedRoomsCount" class="bg-emerald-200 text-emerald-950 px-1.5 py-0.5 rounded text-[10px]">0</span>
            </div>
            <div id="usedRoomsList" class="text-[11px] text-emerald-800 font-medium flex flex-wrap gap-1">
              <span class="italic text-slate-400">None</span>
            </div>
          </div>
          <div class="bg-slate-50 border border-slate-200 p-2.5 rounded-lg">
            <div class="text-[11px] font-bold text-slate-700 mb-1 flex items-center gap-1">
              <span>📌 Unused Rooms:</span>
              <span id="unusedRoomsCount" class="bg-slate-200 text-slate-800 px-1.5 py-0.5 rounded text-[10px]">0</span>
            </div>
            <div id="unusedRoomsList" class="text-[11px] text-slate-600 font-medium flex flex-wrap gap-1">
              <span class="italic text-slate-400">None</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Room-Wise Subject / Question Paper Count Summary -->
      <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm space-y-3">
        <div class="flex justify-between items-center border-b pb-2 flex-wrap gap-3">
          <div>
            <h2 class="font-bold text-slate-800 text-sm">📊 Room-Wise Subject / Question Paper Count Summary (Cohort A & B)</h2>
            <p class="text-[11px] text-slate-500">Breakdown of question paper requirements per room for all uploaded student subjects.</p>
          </div>
          <div class="flex gap-2 flex-wrap">
            <button onclick="generateSubjectPaperSummary()" class="bg-indigo-600 hover:bg-indigo-700 text-white text-xs px-3 py-1.5 rounded font-bold shadow transition">
              🔄 Refresh Counts
            </button>
            <button onclick="downloadSubjectPaperSummaryExcel()" class="bg-emerald-600 hover:bg-emerald-700 text-white text-xs px-3 py-1.5 rounded font-bold shadow flex items-center gap-1.5 transition">
              <span>📥 Download Excel (.xlsx)</span>
            </button>
            <button onclick="printSubjectPaperSummaryPdf()" class="bg-rose-600 hover:bg-rose-700 text-white text-xs px-3 py-1.5 rounded font-bold shadow flex items-center gap-1.5 transition">
              <span>🖨️ Download PDF / Print</span>
            </button>
          </div>
        </div>
        <div id="subjectPaperSummaryContainer" class="overflow-x-auto max-h-96">
          <p class="text-xs text-slate-400 italic py-2">Generate reports to calculate subject-wise question paper distribution per room.</p>
        </div>
      </div>

      <!-- 0. Download Sample Excel Templates Bar -->
      <div class="bg-gradient-to-r from-slate-800 to-indigo-900 text-white p-4 rounded-xl shadow-sm flex flex-wrap items-center justify-between gap-4">
        <div>
          <h2 class="text-sm font-bold flex items-center gap-2">
            <span>📥 Download Sample Excel Templates</span>
          </h2>
          <p class="text-[11px] text-slate-300">Download ready-to-use template spreadsheets with proper column formatting.</p>
        </div>
        <div class="flex flex-wrap gap-2">
          <button onclick="downloadSampleRoomsExcel()" class="bg-white/10 hover:bg-white/20 border border-white/30 text-white px-3 py-1.5 rounded-lg text-xs font-semibold flex items-center gap-1.5 transition">
            <span>🏢 Rooms Template</span>
          </button>
          <button onclick="downloadSampleCourseExcel('A')" class="bg-white/10 hover:bg-white/20 border border-white/30 text-white px-3 py-1.5 rounded-lg text-xs font-semibold flex items-center gap-1.5 transition">
            <span>🎓 Course A Template</span>
          </button>
          <button onclick="downloadSampleCourseExcel('B')" class="bg-white/10 hover:bg-white/20 border border-white/30 text-white px-3 py-1.5 rounded-lg text-xs font-semibold flex items-center gap-1.5 transition">
            <span>🎓 Course B Template</span>
          </button>
          <button onclick="downloadSampleDetainedExcel()" class="bg-red-500/20 hover:bg-red-500/30 border border-red-400/40 text-red-200 px-3 py-1.5 rounded-lg text-xs font-semibold flex items-center gap-1.5 transition">
            <span>🚫 Detained Template</span>
          </button>
        </div>
      </div>

      <!-- 1. Header Information & Shift Branding -->
      <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm space-y-4">
        <h2 class="font-bold text-slate-800 text-sm border-b pb-2">1. University, Examination & Session Details</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label class="block text-xs font-bold text-slate-700 mb-1">UNIVERSITY NAME</label>
            <input id="uniTitle" type="text" value="INTEGRAL UNIVERSITY" class="w-full border rounded p-2 text-xs font-bold text-slate-800" />
          </div>
          <div>
            <label class="block text-xs font-bold text-slate-700 mb-1">DEPARTMENT & SHIFT</label>
            <input id="deptShiftHeader" type="text" value="Department of CSE: Seating Plan 1st and 3rd Shift" class="w-full border rounded p-2 text-xs font-semibold text-slate-800" />
          </div>
          <div>
            <label class="block text-xs font-bold text-slate-700 mb-1">PROGRAM / DEGREE LINE</label>
            <input id="progHeader" type="text" value="Bachelor of Technology - Computer Science & Engineering" class="w-full border rounded p-2 text-xs font-semibold text-slate-800" />
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-1">
          <div>
            <label class="block text-xs font-bold text-indigo-900 mb-1">EXAMINATION NAME / TEST TITLE</label>
            <input id="examName" type="text" value="FIRST CONTINUOUS ASSESSMENT (ODD SEMESTER)" class="w-full border border-indigo-200 bg-indigo-50/30 rounded p-2 text-xs font-bold text-indigo-950" />
          </div>
          <div>
            <label class="block text-xs font-bold text-indigo-900 mb-1">ACADEMIC SESSION / YEAR</label>
            <input id="examSession" type="text" value="ACADEMIC SESSION 2026-2027" class="w-full border border-indigo-200 bg-indigo-50/30 rounded p-2 text-xs font-bold text-indigo-950" />
          </div>
        </div>
      </div>

      <!-- 2. Room & Grid Matrix Configuration -->
      <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm space-y-3">
        <div class="flex justify-between items-center border-b pb-2">
          <div>
            <h2 class="font-bold text-slate-800 text-sm">2. Room Roster & Seating Grids</h2>
            <p class="text-[11px] text-slate-500">Configure rooms manually or upload room list via Excel/CSV (Columns: Room No, Block, Rows, Columns, Capacity).</p>
          </div>
          <div class="flex items-center gap-2">
            <span id="roomCountBadge" class="text-xs bg-indigo-100 text-indigo-800 px-2.5 py-0.5 rounded font-bold">0 Rooms</span>
            <span id="totalCapBadge" class="text-xs bg-emerald-100 text-emerald-800 px-2.5 py-0.5 rounded font-bold">Total Capacity: 0</span>
          </div>
        </div>

        <!-- Optional Room Excel Upload -->
        <div class="bg-indigo-50/60 border border-indigo-200 p-2.5 rounded-lg flex flex-wrap items-center justify-between gap-3">
          <div class="flex items-center gap-2">
            <span class="text-xs font-bold text-indigo-900">📂 Upload Room List Excel/CSV (Optional):</span>
            <input type="file" id="fileRooms" accept=".csv, .xlsx, .xls" class="text-xs text-slate-500 file:mr-2 file:py-1 file:px-2.5 file:rounded file:border-0 file:text-xs file:bg-indigo-600 file:text-white" />
          </div>
          <button onclick="clearAllRooms()" class="text-xs text-red-600 font-bold hover:underline">Clear All Rooms</button>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-6 gap-2 bg-slate-50 p-3 rounded-lg border">
          <div>
            <label class="text-[10px] font-bold text-slate-600">ROOM NO.</label>
            <input id="rName" placeholder="e.g. E319" value="E319" class="w-full border rounded p-1.5 text-xs font-bold" />
          </div>
          <div>
            <label class="text-[10px] font-bold text-slate-600">BLOCK</label>
            <input id="rBlock" placeholder="e.g. BNLT" value="BNLT" class="w-full border rounded p-1.5 text-xs" />
          </div>
          <div>
            <label class="text-[10px] font-bold text-slate-600">ROWS</label>
            <input id="rRows" type="number" value="12" min="1" class="w-full border rounded p-1.5 text-xs font-semibold" />
          </div>
          <div>
            <label class="text-[10px] font-bold text-slate-600">COLUMNS</label>
            <input id="rCols" type="number" value="8" min="2" class="w-full border rounded p-1.5 text-xs font-semibold" />
          </div>
          <div>
            <label class="text-[10px] font-bold text-slate-600">CAPACITY</label>
            <input id="rCap" type="number" value="96" readonly class="w-full border bg-slate-200 rounded p-1.5 text-xs font-bold text-indigo-900" />
          </div>
          <div class="flex items-end">
            <button onclick="addCustomRoom()" class="w-full bg-slate-800 hover:bg-black text-white text-xs py-2 rounded font-bold">+ Add Room</button>
          </div>
        </div>

        <div class="flex flex-wrap gap-2 pt-1">
          <span class="text-slate-500 font-semibold text-[11px] self-center">Presets:</span>
          <button onclick="applyPreset('E319', 'BNLT', 12, 8)" class="px-2.5 py-1 bg-slate-200 hover:bg-slate-300 rounded text-slate-700 text-xs font-medium">E319/BNLT (12R × 8C = 96)</button>
          <button onclick="applyPreset('E410', 'BNLT', 8, 6)" class="px-2.5 py-1 bg-slate-200 hover:bg-slate-300 rounded text-slate-700 text-xs font-medium">E410/BNLT (8R × 6C = 48)</button>
          <button onclick="applyPreset('E107', 'BNLT BLOCK', 8, 6)" class="px-2.5 py-1 bg-slate-200 hover:bg-slate-300 rounded text-slate-700 text-xs font-medium">E107 (8R × 6C = 48)</button>
        </div>

        <!-- Room Order Arrangement List -->
        <div class="border-t pt-2 space-y-1">
          <div class="text-[11px] font-bold text-slate-700 mb-1">ROOM ALLOCATION ORDER (Use ⬆ / ⬇ to reorder):</div>
          <div id="roomPillsContainer" class="flex flex-col gap-1.5 max-h-48 overflow-y-auto pr-1"></div>
        </div>
      </div>

      <!-- 3. Multi-File Student Uploads & Detained List Section -->
      <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm space-y-4">
        <h2 class="font-bold text-slate-800 text-sm border-b pb-2">3. Upload Course Files, Optional Mapping & Detained List</h2>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <!-- Slot A -->
          <div class="border border-indigo-200 bg-indigo-50/40 p-3 rounded-xl space-y-2">
            <div class="flex justify-between items-center">
              <span class="text-xs font-bold text-indigo-900 uppercase">📁 Cohort A (1st Sem)</span>
              <span id="badgeCountA" class="text-xs bg-indigo-200 text-indigo-900 px-2 py-0.5 rounded font-bold">0</span>
            </div>
            <div>
              <label class="block text-[10px] font-semibold text-slate-600 mb-0.5">SECTION HEADER</label>
              <input id="titleA" value="FIRST YEAR/ FIRST SEMESTER" class="w-full border bg-white rounded p-1 text-[11px] font-semibold" />
            </div>
            <div>
              <label class="block text-[10px] font-semibold text-slate-600 mb-0.5">UPLOAD EXCEL/CSV</label>
              <input type="file" id="fileA" accept=".csv, .xlsx, .xls" class="w-full text-[11px] text-slate-500 file:mr-1 file:py-1 file:px-2 file:rounded file:border-0 file:text-[11px] file:bg-indigo-600 file:text-white" />
            </div>
          </div>

          <!-- Slot B -->
          <div class="border border-emerald-200 bg-emerald-50/40 p-3 rounded-xl space-y-2">
            <div class="flex justify-between items-center">
              <span class="text-xs font-bold text-emerald-900 uppercase">📁 Cohort B (3rd Sem)</span>
              <span id="badgeCountB" class="text-xs bg-emerald-200 text-emerald-900 px-2 py-0.5 rounded font-bold">0</span>
            </div>
            <div>
              <label class="block text-[10px] font-semibold text-slate-600 mb-0.5">SECTION HEADER</label>
              <input id="titleB" value="THIRD YEAR/ FIFTH SEMESTER" class="w-full border bg-white rounded p-1 text-[11px] font-semibold" />
            </div>
            <div>
              <label class="block text-[10px] font-semibold text-slate-600 mb-0.5">UPLOAD EXCEL/CSV</label>
              <input type="file" id="fileB" accept=".csv, .xlsx, .xls" class="w-full text-[11px] text-slate-500 file:mr-1 file:py-1 file:px-2 file:rounded file:border-0 file:text-[11px] file:bg-emerald-600 file:text-white" />
            </div>
          </div>

          <!-- Course Name Mapping (Optional) -->
          <div class="border border-blue-200 bg-blue-50/40 p-3 rounded-xl space-y-2">
            <div class="flex justify-between items-center">
              <span class="text-xs font-bold text-blue-900 uppercase">📚 Course Mapping</span>
              <span id="badgeCountMapping" class="text-xs bg-blue-200 text-blue-900 px-2 py-0.5 rounded font-bold">0 Mapped</span>
            </div>
            <div>
              <p class="text-[10px] text-slate-500 leading-tight">Optional Excel/CSV with columns: <strong>Course Code</strong>, <strong>Course Name</strong>.</p>
            </div>
            <div>
              <label class="block text-[10px] font-semibold text-slate-600 mb-0.5">UPLOAD MAPPING FILE</label>
              <input type="file" id="fileMapping" accept=".csv, .xlsx, .xls" class="w-full text-[11px] text-slate-500 file:mr-1 file:py-1 file:px-2 file:rounded file:border-0 file:text-[11px] file:bg-blue-600 file:text-white" />
            </div>
          </div>

          <!-- Detained Students Slot -->
          <div class="border border-red-200 bg-red-50/40 p-3 rounded-xl space-y-2">
            <div class="flex justify-between items-center">
              <span class="text-xs font-bold text-red-900 uppercase">🚫 Detained File</span>
              <span id="badgeCountDetained" class="text-xs bg-red-200 text-red-900 px-2 py-0.5 rounded font-bold">0</span>
            </div>
            <div>
              <p class="text-[10px] text-slate-500 leading-tight">Matched by <strong>Enrollment No</strong>.</p>
            </div>
            <div>
              <label class="block text-[10px] font-semibold text-slate-600 mb-0.5">UPLOAD DETAINED LIST</label>
              <input type="file" id="fileDetained" accept=".csv, .xlsx, .xls" class="w-full text-[11px] text-slate-500 file:mr-1 file:py-1 file:px-2 file:rounded file:border-0 file:text-[11px] file:bg-red-600 file:text-white" />
            </div>
          </div>
        </div>

        <!-- Additional Options & Toggles -->
        <div class="bg-slate-50 p-3 rounded-lg border border-slate-200 flex flex-wrap items-center justify-between gap-4">
          <label class="flex items-center gap-2 text-xs font-bold text-slate-800 cursor-pointer">
            <input type="checkbox" id="chkFillRemaining" checked class="w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500" />
            <span>Fill remaining seats with single cohort when student counts are unequal (Fill Same Cohort in Room)</span>
          </label>
        </div>

        <div class="flex flex-wrap justify-between items-center pt-2 gap-3">
          <div class="flex gap-2">
            <button onclick="loadSampleDataExact()" class="bg-slate-200 hover:bg-slate-300 text-slate-800 text-xs px-4 py-2 rounded font-semibold">
              Load Sample Data
            </button>
            <button onclick="generateAllReports()" class="bg-indigo-700 hover:bg-indigo-800 text-white text-xs px-6 py-2 rounded font-bold shadow">
              Generate Reports
            </button>
          </div>

          <div class="flex flex-wrap items-center gap-1 border border-slate-300 p-1 rounded-lg bg-slate-100">
            <button id="btnViewList" onclick="switchReportFormat('roomWise')" class="px-3 py-1.5 rounded text-xs font-bold bg-slate-900 text-white transition">
              📄 Student List (Portrait)
            </button>
            <button id="btnViewMatrix" onclick="switchReportFormat('matrix')" class="px-3 py-1.5 rounded text-xs font-semibold bg-transparent text-slate-700 hover:bg-slate-200 transition">
              📐 Seating Matrix (Landscape)
            </button>
            <button id="btnViewAttendance" onclick="switchReportFormat('attendance')" class="px-3 py-1.5 rounded text-xs font-semibold bg-transparent text-slate-700 hover:bg-slate-200 transition">
              ✍️ Room/Group Attendance
            </button>
            <button id="btnViewCourseCodeAttendance" onclick="openCourseCodeModal()" class="px-3 py-1.5 rounded text-xs font-semibold bg-transparent text-indigo-700 hover:bg-indigo-100 transition" title="Generate Course Code Wise Room Wise Attendance Sheet">
              🎓 Course Code Attendance
            </button>
            <button id="btnViewUnallotted" onclick="switchReportFormat('unallotted')" class="px-3 py-1.5 rounded text-xs font-semibold bg-transparent text-slate-700 hover:bg-slate-200 transition">
              ⚠️ Unallotted Students
            </button>
            <button id="btnViewDetained" onclick="switchReportFormat('detainedReport')" class="px-3 py-1.5 rounded text-xs font-semibold bg-transparent text-slate-700 hover:bg-slate-200 transition">
              🚫 Room-Wise Detained
            </button>
            <button id="btnViewDetainedContinuous" onclick="switchReportFormat('detainedContinuous')" class="px-3 py-1.5 rounded text-xs font-semibold bg-transparent text-slate-700 hover:bg-slate-200 transition" title="Continuous Detained List with Header at Top">
              📋 Detained (Continuous Print)
            </button>
            <button id="btnViewBlankAttendance" onclick="switchReportFormat('blankAttendance')" class="px-3 py-1.5 rounded text-xs font-semibold bg-transparent text-emerald-800 hover:bg-emerald-100 transition" title="Print Blank Attendance Sheet (30 Rows)">
              🖨️ Print Blank Attendance (30 Rows)
            </button>
            <button id="btnViewCopyCollection" onclick="switchReportFormat('copyCollection')" class="px-3 py-1.5 rounded text-xs font-semibold bg-transparent text-blue-800 hover:bg-blue-100 transition" title="Room-Wise Exam Copy Collection Sheet">
              📦 Copy Collection Sheet
            </button>
            <button id="btnViewBlankCopyCollection" onclick="switchReportFormat('blankCopyCollection')" class="px-3 py-1.5 rounded text-xs font-semibold bg-transparent text-blue-800 hover:bg-blue-100 transition" title="Print Blank Copy Collection Sheet">
              📦 Print Blank Copy Collection
            </button>
          </div>
        </div>
      </div>

      <!-- ON-PAGE ACTION TOOLBAR ABOVE REPORT SECTION -->
      <div class="bg-slate-900 text-white p-4 rounded-xl shadow-md flex flex-wrap justify-between items-center gap-4">
        <div class="flex items-center gap-2">
          <span class="w-3 h-3 rounded-full bg-emerald-500 animate-pulse"></span>
          <span class="text-sm font-bold tracking-wide">Generated Report Preview & Actions:</span>
        </div>
        <div class="flex items-center gap-3">
          <button onclick="printDetainedStudentsPdf()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-xs font-bold shadow flex items-center gap-1.5 transition">
            <span>📥 Detained Students PDF</span>
          </button>
          <button onclick="exportToWordDoc()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-xs font-bold shadow flex items-center gap-1.5 transition">
            <span>📄 Download Word (.doc)</span>
          </button>
          <button onclick="safePrintReport()" class="bg-emerald-600 hover:bg-emerald-700 text-white px-5 py-2 rounded-lg text-xs font-extrabold shadow-lg flex items-center gap-2 transition ring-2 ring-emerald-400/50">
            <span>🖨️ Print Report (PDF)</span>
          </button>
        </div>
      </div>

    </main>

    <div id="print-area" class="mx-auto min-h-screen bg-white">
      <div id="reportContainer" class="p-6">
        <div class="text-center py-20 text-slate-400 no-print">
          <p class="text-base font-bold">No Report Generated Yet.</p>
          <p class="text-xs mt-1">Upload both Course Excel files or click "Load Sample Data", then click "Generate Reports".</p>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Authentication System Logic
    const AUTH_USER = "F01270";
    const AUTH_PASS = "Myexam@2026";

    function handleLogin() {
      const uInput = document.getElementById("loginUserId").value.trim();
      const pInput = document.getElementById("loginPassword").value.trim();
      const errBox = document.getElementById("loginError");

      if (uInput === AUTH_USER && pInput === AUTH_PASS) {
        document.getElementById("loginOverlay").classList.add("hidden");
        document.getElementById("appContainer").classList.remove("hidden");
        sessionStorage.setItem("isExamAuthenticated", "true");
      } else {
        errBox.classList.remove("hidden");
      }
    }

    function handleLogout() {
      sessionStorage.removeItem("isExamAuthenticated");
      document.getElementById("appContainer").classList.add("hidden");
      document.getElementById("loginOverlay").classList.remove("hidden");
      document.getElementById("loginUserId").value = "";
      document.getElementById("loginPassword").value = "";
      document.getElementById("loginError").classList.add("hidden");
    }

    window.addEventListener("DOMContentLoaded", () => {
      if (sessionStorage.getItem("isExamAuthenticated") === "true") {
        document.getElementById("loginOverlay").classList.add("hidden");
        document.getElementById("appContainer").classList.remove("hidden");
      }
    });

    document.getElementById('rRows').addEventListener('input', refreshCapacity);
    document.getElementById('rCols').addEventListener('input', refreshCapacity);
    function refreshCapacity() {
      const r = parseInt(document.getElementById('rRows').value) || 0;
      const c = parseInt(document.getElementById('rCols').value) || 0;
      document.getElementById('rCap').value = r * c;
    }

    let roomRoster = [
      { name: "E319", block: "BNLT", rows: 12, cols: 8, capacity: 96, subCap: 48 },
      { name: "E410", block: "BNLT", rows: 8, cols: 6, capacity: 48, subCap: 24 },
      { name: "E107", block: "BNLT BLOCK", rows: 8, cols: 6, capacity: 48, subCap: 24 },
      { name: "E108", block: "BNLT BLOCK", rows: 8, cols: 6, capacity: 48, subCap: 24 },
      { name: "E109", block: "BNLT BLOCK", rows: 8, cols: 6, capacity: 48, subCap: 24 }
    ];

    let datasetA = [];
    let datasetB = [];
    let detainedSet = new Set();
    let courseNameMapping = new Map();
    let allocatedRooms = [];
    let unallottedStudents = [];
    let activeFormat = 'roomWise';
    let selectedCourseCodesForAttendance = new Set();

    // GLOBAL HELPER FUNCTIONS DECLARED FIRST TO AVOID REFERENCE ERRORS
    function getField(obj, possibleKeys, defaultVal = "") {
      for (const k of Object.keys(obj)) {
        const cleaned = k.toLowerCase().replace(/[^a-z0-9]/g, '');
        for (const pk of possibleKeys) {
          if (cleaned === pk.toLowerCase().replace(/[^a-z0-9]/g, '')) {
            return obj[k];
          }
        }
      }
      return defaultVal;
    }

    function normalizeEnroll(val) {
      if (val === undefined || val === null) return "";
      return String(val).replace(/\.0+$/, '').trim().toUpperCase();
    }

    function isStudentDetained(st) {
      if (!st) return false;
      const eNorm = normalizeEnroll(st.enrollmentNo);
      const rNorm = normalizeEnroll(st.rollNo);
      return (eNorm !== "" && detainedSet.has(eNorm)) || (rNorm !== "" && detainedSet.has(rNorm));
    }

    function renderRoomBadges() {
      const container = document.getElementById('roomPillsContainer');
      const totalCapacity = roomRoster.reduce((sum, r) => sum + (parseInt(r.capacity) || 0), 0);
      
      document.getElementById('roomCountBadge').innerText = `${roomRoster.length} Rooms`;
      document.getElementById('totalCapBadge').innerText = `Total Capacity: ${totalCapacity}`;
      updateTopDashboard();
      
      container.innerHTML = "";
      roomRoster.forEach((r, idx) => {
        const item = document.createElement("div");
        item.className = "flex justify-between items-center bg-slate-50 border border-slate-300 text-slate-800 text-xs px-3 py-1.5 rounded shadow-sm";
        item.innerHTML = `
          <div class="flex items-center gap-2">
            <span class="font-bold text-slate-500 w-5">${idx + 1}.</span>
            <strong class="text-slate-900">${r.name}/${r.block}</strong>
            <span class="text-slate-500 text-[11px]">(${r.rows}R × ${r.cols}C = ${r.capacity} seats)</span>
          </div>
          <div class="flex items-center gap-1">
            <button onclick="moveRoomOrder(${idx}, -1)" ${idx === 0 ? 'disabled' : ''} class="px-1.5 py-0.5 bg-slate-200 hover:bg-slate-300 disabled:opacity-30 rounded font-bold text-xs" title="Move Up">⬆</button>
            <button onclick="moveRoomOrder(${idx}, 1)" ${idx === roomRoster.length - 1 ? 'disabled' : ''} class="px-1.5 py-0.5 bg-slate-200 hover:bg-slate-300 disabled:opacity-30 rounded font-bold text-xs" title="Move Down">⬇</button>
            <button onclick="removeRoom(${idx})" class="text-red-500 font-bold hover:text-red-700 ml-2 px-1 text-sm" title="Delete Room">✕</button>
          </div>
        `;
        container.appendChild(item);
      });
    }

    function updateTopDashboard() {
      const totalRooms = roomRoster.length;
      const totalCap = roomRoster.reduce((sum, r) => sum + (parseInt(r.capacity) || 0), 0);
      const countA = datasetA.length;
      const countB = datasetB.length;
      const totalStudents = countA + countB;
      const detainedCount = detainedSet.size;
      const unallottedCount = unallottedStudents.length;
      const allottedCount = totalStudents - unallottedCount;

      document.getElementById('dashRooms').innerText = totalRooms;
      document.getElementById('dashTotalCap').innerText = totalCap;
      document.getElementById('dashTotalStudents').innerText = totalStudents;
      document.getElementById('dashAllotted').innerText = allottedCount;
      document.getElementById('dashA').innerText = countA;
      document.getElementById('dashB').innerText = countB;
      document.getElementById('dashDetained').innerText = detainedCount;
      document.getElementById('dashUnallotted').innerText = unallottedCount;

      document.getElementById('utilizationRatio').innerText = `${allottedCount} / ${totalCap} Seats`;
      if (totalCap > 0) {
        const occupancy = Math.min(100, Math.round((allottedCount / totalCap) * 100));
        const vacant = Math.max(0, totalCap - allottedCount);
        document.getElementById('dashOccupancy').innerText = `${occupancy}%`;
        document.getElementById('dashVacant').innerText = `${vacant} Vacant`;
        document.getElementById('utilizationBar').style.width = `${occupancy}%`;
        document.getElementById('utilizationPct').innerText = `${occupancy}%`;
      } else {
        document.getElementById('dashOccupancy').innerText = "0%";
        document.getElementById('dashVacant').innerText = "0 Vacant";
        document.getElementById('utilizationBar').style.width = "0%";
        document.getElementById('utilizationPct').innerText = "0%";
      }

      if (totalStudents > 0) {
        const pctA = Math.round((countA / totalStudents) * 100);
        const pctB = 100 - pctA;
        document.getElementById('cohortABar').style.width = `${pctA}%`;
        document.getElementById('cohortBBar').style.width = `${pctB}%`;
        document.getElementById('cohortAPct').innerText = `${pctA}% (${countA})`;
        document.getElementById('cohortBPct').innerText = `${pctB}% (${countB})`;
      } else {
        document.getElementById('cohortABar').style.width = "50%";
        document.getElementById('cohortBBar').style.width = "50%";
        document.getElementById('cohortAPct').innerText = "0%";
        document.getElementById('cohortBPct').innerText = "0%";
      }

      const groupCounts = {};
      [...datasetA, ...datasetB].forEach(s => {
        if (s.group) groupCounts[s.group] = (groupCounts[s.group] || 0) + 1;
      });

      const groupContainer = document.getElementById('groupStatsContainer');
      const groupEntries = Object.entries(groupCounts);
      document.getElementById('groupTotalBadge').innerText = `${groupEntries.length} Sections`;

      if (groupEntries.length > 0) {
        groupContainer.innerHTML = groupEntries.map(([grp, count] ) => `
          <span class="inline-flex items-center gap-1 bg-slate-100 border border-slate-300 text-slate-800 text-[10px] px-2 py-0.5 rounded font-semibold">
            <span>${grp}:</span>
            <strong class="text-indigo-700">${count}</strong>
          </span>
        `).join('');
      } else {
        groupContainer.innerHTML = `<span class="text-[11px] text-slate-400 italic">No section data imported</span>`;
      }

      const usedRoomsNames = new Set(allocatedRooms.map(item => item.room.name));
      const usedList = [];
      const unusedList = [];

      roomRoster.forEach(r => {
        const roomIdentifier = `${r.name}(${r.capacity})`;
        if (usedRoomsNames.has(r.name)) {
          usedList.push(roomIdentifier);
        } else {
          unusedList.push(roomIdentifier);
        }
      });

      document.getElementById('usedRoomsCount').innerText = usedList.length;
      document.getElementById('unusedRoomsCount').innerText = unusedList.length;
      document.getElementById('roomStatusSummaryBadge').innerText = `${usedList.length} Used / ${unusedList.length} Unused`;

      document.getElementById('usedRoomsList').innerHTML = usedList.length > 0 ? 
        usedList.map(item => `<span class="bg-emerald-100 text-emerald-900 px-1.5 py-0.5 rounded text-[10px] font-bold">${item}</span>`).join(' ') : 
        `<span class="italic text-slate-400">None</span>`;

      document.getElementById('unusedRoomsList').innerHTML = unusedList.length > 0 ? 
        unusedList.map(item => `<span class="bg-slate-200 text-slate-700 px-1.5 py-0.5 rounded text-[10px] font-bold">${item}</span>`).join(' ') : 
        `<span class="italic text-slate-400">None</span>`;
      
      if (allocatedRooms.length > 0) {
        generateSubjectPaperSummary();
      }
    }

    // COURSE CODE ATTENDANCE MODAL LOGIC
    function openCourseCodeModal() {
      if (!allocatedRooms || allocatedRooms.length === 0) {
        return alert("⚠️ Please generate reports first before selecting course code attendance.");
      }

      const allSubjectsSet = new Set();
      allocatedRooms.forEach(plan => {
        const checkSubs = (st) => {
          if (st.subjects && Array.isArray(st.subjects)) {
            st.subjects.forEach(sub => allSubjectsSet.add(sub));
          }
        };
        plan.studentsA.forEach(checkSubs);
        plan.studentsB.forEach(checkSubs);
      });

      const subjects = Array.from(allSubjectsSet).sort();
      const container = document.getElementById('courseCodeCheckboxContainer');

      if (subjects.length === 0) {
        container.innerHTML = `<p class="text-xs text-red-600 font-semibold">⚠️ No course/subject codes detected in uploaded datasets.</p>`;
        document.getElementById('courseCodeModal').classList.remove('hidden');
        return;
      }

      container.innerHTML = subjects.map(sub => `
        <label class="flex items-center gap-2 text-xs font-bold text-slate-800 cursor-pointer p-1 hover:bg-slate-100 rounded">
          <input type="checkbox" value="${sub}" onchange="updateSelectedCourseCount()" class="course-code-chk w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500" checked />
          <span>${sub}</span>
        </label>
      `).join('');

      updateSelectedCourseCount();
      document.getElementById('courseCodeModal').classList.remove('hidden');
    }

    function closeCourseCodeModal() {
      document.getElementById('courseCodeModal').classList.add('hidden');
    }

    function toggleAllCourseCodes(selectState) {
      document.querySelectorAll('.course-code-chk').forEach(chk => chk.checked = selectState);
      updateSelectedCourseCount();
    }

    function updateSelectedCourseCount() {
      const checkedCount = document.querySelectorAll('.course-code-chk:checked').length;
      const badge = document.getElementById('selectedCourseCountBadge');
      if (badge) badge.innerText = `${checkedCount} Selected`;
    }

    function confirmGenerateCourseCodeAttendance() {
      selectedCourseCodesForAttendance.clear();
      document.querySelectorAll('.course-code-chk:checked').forEach(chk => {
        selectedCourseCodesForAttendance.add(chk.value);
      });

      if (selectedCourseCodesForAttendance.size === 0) {
        return alert("⚠️ Please select at least one course code.");
      }

      closeCourseCodeModal();
      switchReportFormat('courseCodeAttendance');
    }

    // DOWNLOAD TEMPLATE FUNCTIONS
    function downloadSampleRoomsExcel() {
      const rooms = [
        { "Room No": "E107", "Block": "BNLT", "Rows": 8, "Columns": 6, "Capacity": 48 },
        { "Room No": "E108", "Block": "BNLT", "Rows": 8, "Columns": 6, "Capacity": 48 },
        { "Room No": "E119", "Block": "BNLT", "Rows": 12, "Columns": 8, "Capacity": 96 },
        { "Room No": "E319", "Block": "BNLT", "Rows": 12, "Columns": 8, "Capacity": 96 }
      ];
      const ws = XLSX.utils.json_to_sheet(rooms);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Rooms");
      XLSX.writeFile(wb, "Sample_Rooms_List.xlsx");
    }

    function downloadSampleCourseExcel(cohort) {
      let filename = cohort === 'A' ? "Sample_Course_A_Students.xlsx" : "Sample_Course_B_Students.xlsx";
      let students = [
        { rollno: "2501012001", enrollmentno: "2500100039", studentname: "ADIL KAMAL", GroupName: "CSE-A", SUB1: "CS204", SUB2: "CS270", SUB3: "CS203" },
        { rollno: "2501012002", enrollmentno: "2500100075", studentname: "ABDUL QADIR", GroupName: "CSE-A", SUB1: "CS204", SUB2: "CS270", SUB3: "CS203" },
        { rollno: "2501012003", enrollmentno: "2500100196", studentname: "ABDUL GHALIB", GroupName: "CSE-B", SUB1: "CS204", SUB2: "CS270", SUB3: "CS203" },
        { rollno: "2501012004", enrollmentno: "2500100171", studentname: "AATIF ALI", GroupName: "CSE-B", SUB1: "CS204", SUB2: "CS270", SUB3: "CS203" }
      ];
      const ws = XLSX.utils.json_to_sheet(students);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, `Course_${cohort}`);
      XLSX.writeFile(wb, filename);
    }

    function downloadSampleDetainedExcel() {
      const detained = [
        { rollno: "2501012004", enrollmentno: "2500100171", studentname: "AATIF ALI", GroupName: "CSE-B", Reason: "Short Attendance (<75%)" }
      ];
      const ws = XLSX.utils.json_to_sheet(detained);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Detained");
      XLSX.writeFile(wb, "Sample_Detained_Students_List.xlsx");
    }

    // GENERATE ALL REPORTS ALLOCATION ENGINE
    function generateAllReports() {
      if (datasetA.length === 0 && datasetB.length === 0) {
        return alert("Please upload files or load sample data first.");
      }

      const qA = [...datasetA];
      const qB = [...datasetB];
      const titleA = document.getElementById("titleA").value.trim() || "FIRST YEAR/ FIRST SEMESTER";
      const titleB = document.getElementById("titleB").value.trim() || "THIRD YEAR/ FIFTH SEMESTER";
      const fillRemainingSameCohort = document.getElementById("chkFillRemaining").checked;

      allocatedRooms = [];
      unallottedStudents = [];

      let workingRooms = JSON.parse(JSON.stringify(roomRoster));
      let roomIdx = 0;
      let extraCount = 1;

      while (qA.length > 0 || qB.length > 0) {
        let room;
        if (roomIdx < workingRooms.length) {
          room = workingRooms[roomIdx];
        } else {
          room = {
            name: `EXTRA ROOM ${extraCount}`,
            block: "MAIN BLOCK",
            rows: 8,
            cols: 6,
            capacity: 48,
            subCap: 24
          };
          workingRooms.push(room);
          extraCount++;
        }

        let subCapA = room.subCap || Math.floor(room.capacity / 2);
        let subCapB = room.subCap || Math.floor(room.capacity / 2);

        let batchA = qA.splice(0, subCapA);
        let batchB = qB.splice(0, subCapB);

        if (fillRemainingSameCohort) {
          const roomTotalCap = room.capacity || (room.rows * room.cols);
          let currentRoomAllotted = batchA.length + batchB.length;
          let remainingSeats = roomTotalCap - currentRoomAllotted;

          if (remainingSeats > 0) {
            if (qA.length > 0 && batchB.length < subCapB) {
              const extraA = qA.splice(0, remainingSeats);
              batchA = batchA.concat(extraA);
            } else if (qB.length > 0 && batchA.length < subCapA) {
              const extraB = qB.splice(0, remainingSeats);
              batchB = batchB.concat(extraB);
            }
          }
        }

        batchA.forEach(s => {
          s.allottedRoom = `${room.name} (${room.block})`;
          s.cohortTag = titleA;
        });
        batchB.forEach(s => {
          s.allottedRoom = `${room.name} (${room.block})`;
          s.cohortTag = titleB;
        });

        const grid = Array.from({ length: room.rows }, () => Array(room.cols).fill(null));
        const poolA = [...batchA];
        const poolB = [...batchB];
        const stats = {};

        for (let c = 0; c < room.cols; c++) {
          for (let r = 0; r < room.rows; r++) {
            const isSlotA = (r + c) % 2 === 0;
            let student = null;
            if (isSlotA) {
              if (poolA.length > 0) student = poolA.shift();
              else if (fillRemainingSameCohort && poolB.length > 0) student = poolB.shift();
            } else {
              if (poolB.length > 0) student = poolB.shift();
              else if (fillRemainingSameCohort && poolA.length > 0) student = poolA.shift();
            }

            if (student) {
              student.isCohortB = (student.cohortTag === titleB);
              grid[r][c] = student;
              stats[student.group] = (stats[student.group] || 0) + 1;
            }
          }
        }

        allocatedRooms.push({
          room,
          titleA,
          titleB,
          studentsA: batchA,
          studentsB: batchB,
          grid,
          stats
        });

        roomIdx++;
      }

      if (qA.length > 0) {
        qA.forEach(s => unallottedStudents.push({ ...s, cohort: titleA, reason: "Capacity Exhausted" }));
      }
      if (qB.length > 0) {
        qB.forEach(s => unallottedStudents.push({ ...s, cohort: titleB, reason: "Capacity Exhausted" }));
      }

      updateTopDashboard();
      renderDocument();
    }

    // Room-Wise Subject / Question Paper Count Summary Calculation & Rendering
    function generateSubjectPaperSummary() {
      const container = document.getElementById('subjectPaperSummaryContainer');
      if (!allocatedRooms || allocatedRooms.length === 0) {
        container.innerHTML = `<p class="text-xs text-slate-400 italic py-2">No room allocations found. Generate reports first.</p>`;
        return;
      }

      const allSubjectsSet = new Set();
      allocatedRooms.forEach(plan => {
        const checkSubjects = (st) => {
          if (st.subjects && Array.isArray(st.subjects)) {
            st.subjects.forEach(sub => allSubjectsSet.add(sub));
          }
        };
        plan.studentsA.forEach(checkSubjects);
        plan.studentsB.forEach(checkSubjects);
      });

      const subjects = Array.from(allSubjectsSet).sort();
      if (subjects.length === 0) {
        container.innerHTML = `<p class="text-xs text-amber-600 font-semibold py-2">⚠️ No subject codes detected in uploaded student datasets. Make sure columns like 'SUB1', 'SUB2', etc. are present.</p>`;
        return;
      }

      let tableHtml = `
        <table id="paperSummaryTable" class="w-full border-collapse border border-slate-300 text-xs text-left">
          <thead>
            <tr class="bg-slate-900 text-white">
              <th class="border border-slate-700 p-2 text-center sticky top-0 bg-slate-900">Room No.</th>
              <th class="border border-slate-700 p-2 text-center sticky top-0 bg-slate-900">Block</th>
              <th class="border border-slate-700 p-2 text-center sticky top-0 bg-slate-900">Total Seated</th>
              ${subjects.map(sub => `<th class="border border-slate-700 p-2 text-center sticky top-0 bg-slate-900">${sub}</th>`).join('')}
              <th class="border border-slate-700 p-2 text-center bg-indigo-950 sticky top-0">Total Papers</th>
            </tr>
          </thead>
          <tbody>
      `;

      let grandTotals = {};
      subjects.forEach(sub => grandTotals[sub] = 0);
      let grandTotalPapers = 0;

      allocatedRooms.forEach(plan => {
        const roomSubCounts = {};
        subjects.forEach(sub => roomSubCounts[sub] = 0);

        const countStudentSubjects = (st) => {
          if (st.subjects && Array.isArray(st.subjects)) {
            st.subjects.forEach(sub => {
              if (roomSubCounts[sub] !== undefined) roomSubCounts[sub]++;
            });
          }
        };

        plan.studentsA.forEach(countStudentSubjects);
        plan.studentsB.forEach(countStudentSubjects);

        let roomTotalPapers = 0;
        subjects.forEach(sub => {
          roomTotalPapers += roomSubCounts[sub];
          grandTotals[sub] += roomSubCounts[sub];
        });
        grandTotalPapers += roomTotalPapers;

        const seatedCount = plan.studentsA.length + plan.studentsB.length;

        tableHtml += `
          <tr class="hover:bg-slate-50">
            <td class="border border-slate-300 p-2 font-bold text-center">${plan.room.name}</td>
            <td class="border border-slate-300 p-2 text-center text-slate-600">${plan.room.block}</td>
            <td class="border border-slate-300 p-2 font-bold text-center text-indigo-700">${seatedCount}</td>
            ${subjects.map(sub => `<td class="border border-slate-300 p-2 text-center ${roomSubCounts[sub] > 0 ? 'font-bold text-slate-900 bg-indigo-50/40' : 'text-slate-300'}">${roomSubCounts[sub] > 0 ? roomSubCounts[sub] : '-'}</td>`).join('')}
            <td class="border border-slate-300 p-2 font-extrabold text-center bg-indigo-50 text-indigo-950">${roomTotalPapers}</td>
          </tr>
        `;
      });

      tableHtml += `
          <tr class="bg-slate-100 font-extrabold text-slate-900 border-t-2 border-slate-900">
            <td colspan="2" class="border border-slate-300 p-2 text-right">GRAND TOTAL PAPERS:</td>
            <td class="border border-slate-300 p-2 text-center text-indigo-900">${allocatedRooms.reduce((sum, p) => sum + p.studentsA.length + p.studentsB.length, 0)}</td>
            ${subjects.map(sub => `<td class="border border-slate-300 p-2 text-center text-indigo-900">${grandTotals[sub]}</td>`).join('')}
            <td class="border border-slate-300 p-2 text-center bg-indigo-900 text-white">${grandTotalPapers}</td>
          </tr>
        </tbody>
      </table>
      `;

      container.innerHTML = tableHtml;
    }

    function downloadSubjectPaperSummaryExcel() {
      if (!allocatedRooms || allocatedRooms.length === 0) {
        return alert("⚠️ Please generate reports first before downloading paper summary.");
      }

      const allSubjectsSet = new Set();
      allocatedRooms.forEach(plan => {
        const checkSubjects = (st) => {
          if (st.subjects && Array.isArray(st.subjects)) {
            st.subjects.forEach(sub => allSubjectsSet.add(sub));
          }
        };
        plan.studentsA.forEach(checkSubjects);
        plan.studentsB.forEach(checkSubjects);
      });

      const subjects = Array.from(allSubjectsSet).sort();
      if (subjects.length === 0) {
        return alert("⚠️ No subject codes detected in student datasets.");
      }

      let summaryData = [];
      let grandTotals = {};
      subjects.forEach(sub => grandTotals[sub] = 0);
      let grandTotalPapers = 0;

      allocatedRooms.forEach(plan => {
        const roomSubCounts = {};
        subjects.forEach(sub => roomSubCounts[sub] = 0);

        const countStudentSubjects = (st) => {
          if (st.subjects && Array.isArray(st.subjects)) {
            st.subjects.forEach(sub => {
              if (roomSubCounts[sub] !== undefined) roomSubCounts[sub]++;
            });
          }
        };

        plan.studentsA.forEach(countStudentSubjects);
        plan.studentsB.forEach(countStudentSubjects);

        let roomTotalPapers = 0;
        subjects.forEach(sub => {
          roomTotalPapers += roomSubCounts[sub];
          grandTotals[sub] += roomSubCounts[sub];
        });
        grandTotalPapers += roomTotalPapers;

        let rowObj = {
          "Room No": plan.room.name,
          "Block": plan.room.block,
          "Total Seated": plan.studentsA.length + plan.studentsB.length
        };

        subjects.forEach(sub => {
          rowObj[sub] = roomSubCounts[sub];
        });
        rowObj["Total Papers"] = roomTotalPapers;

        summaryData.push(rowObj);
      });

      let totalRowObj = {
        "Room No": "GRAND TOTAL",
        "Block": "",
        "Total Seated": allocatedRooms.reduce((sum, p) => sum + p.studentsA.length + p.studentsB.length, 0)
      };
      subjects.forEach(sub => {
        totalRowObj[sub] = grandTotals[sub];
      });
      totalRowObj["Total Papers"] = grandTotalPapers;
      summaryData.push(totalRowObj);

      const ws = XLSX.utils.json_to_sheet(summaryData);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Paper_Summary");
      XLSX.writeFile(wb, "Room_Wise_Subject_Paper_Summary.xlsx");
    }

    function printSubjectPaperSummaryPdf() {
      const summaryElem = document.getElementById('subjectPaperSummaryContainer');
      if (!summaryElem || !summaryElem.querySelector('table')) {
        return alert("⚠️ Please generate or refresh the paper summary table first.");
      }

      const tableHtml = summaryElem.innerHTML;
      const uni = document.getElementById("uniTitle").value;
      const deptShift = document.getElementById("deptShiftHeader").value;
      const exam = document.getElementById("examName").value;
      const session = document.getElementById("examSession").value;

      const printWindow = window.open('', '_blank', 'width=1100,height=800');
      if (!printWindow) return alert("Pop-up blocked. Please allow pop-ups for printing.");

      printWindow.document.open();
      printWindow.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
          <title>Room-Wise Subject Paper Count Summary</title>
          <script src="https://cdn.tailwindcss.com"><\/script>
          <style>
            @page { size: A4 landscape; margin: 10mm; }
            body { font-family: Arial, sans-serif; padding: 20px; color: #000; background: #fff; }
            table { width: 100%; border-collapse: collapse; margin-top: 15px; }
            th, td { border: 1px solid #334155; padding: 6px 8px; font-size: 11px; text-align: center; }
            th { background-color: #0f172a !important; color: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
          </style>
        </head>
        <body onload="setTimeout(function(){ window.print(); window.close(); }, 400);">
          <div class="border-b-2 border-slate-900 pb-3 mb-4">
            <h1 class="text-2xl font-black uppercase">${uni}</h1>
            <p class="text-xs font-bold text-slate-700">${deptShift}</p>
            <p class="text-sm font-black text-indigo-900 mt-1">${exam} • ${session}</p>
            <h2 class="text-md font-bold uppercase mt-2 text-slate-900">Room-Wise Subject / Question Paper Count Summary (Cohort A & B)</h2>
          </div>
          ${tableHtml}
        </body>
        </html>
      `);
      printWindow.document.close();
    }

    function printBranchSectionPdf() {
      const groupCounts = {};
      [...datasetA, ...datasetB].forEach(s => {
        if (s.group) groupCounts[s.group] = (groupCounts[s.group] || 0) + 1;
      });

      const entries = Object.entries(groupCounts);
      if (entries.length === 0) {
        return alert("⚠️ No branch/section breakdown data available. Upload files or load sample data first.");
      }

      const uni = document.getElementById("uniTitle").value;
      const deptShift = document.getElementById("deptShiftHeader").value;
      const exam = document.getElementById("examName").value;
      const session = document.getElementById("examSession").value;

      let rowsHtml = entries.map(([grp, count], idx) => `
        <tr>
          <td style="border: 1px solid #334155; padding: 6px; text-align: center; font-weight: bold;">${idx + 1}</td>
          <td style="border: 1px solid #334155; padding: 6px; font-weight: bold; text-transform: uppercase;">${grp}</td>
          <td style="border: 1px solid #334155; padding: 6px; text-align: center; font-weight: bold; color: #3730a3;">${count} Students</td>
        </tr>
      `).join('');

      const printWindow = window.open('', '_blank', 'width=900,height=700');
      if (!printWindow) return alert("Pop-up blocked. Please allow pop-ups.");

      printWindow.document.open();
      printWindow.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
          <title>Branch & Section Breakdown Report</title>
          <style>
            @page { size: A4 portrait; margin: 12mm; }
            body { font-family: Arial, sans-serif; padding: 20px; color: #000; background: #fff; }
            table { width: 100%; border-collapse: collapse; margin-top: 15px; }
            th, td { border: 1px solid #334155; padding: 8px; font-size: 12px; }
            th { background-color: #0f172a; color: white; text-align: center; }
          </style>
        </head>
        <body onload="setTimeout(function(){ window.print(); window.close(); }, 400);">
          <div style="border-bottom: 2px solid #0f172a; padding-bottom: 10px; margin-bottom: 15px;">
            <h1 style="font-size: 20px; font-weight: 900; text-transform: uppercase; margin: 0;">${uni}</h1>
            <p style="font-size: 11px; font-weight: bold; text-transform: uppercase; margin: 2px 0;">${deptShift}</p>
            <p style="font-size: 12px; font-weight: 900; color: #3730a3; margin: 4px 0;">${exam} • ${session}</p>
            <h2 style="font-size: 14px; font-weight: bold; text-transform: uppercase; margin-top: 10px;">Branch & Section Enrollment Breakdown Report</h2>
          </div>
          <table>
            <thead>
              <tr>
                <th style="width: 60px;">S.No.</th>
                <th>Branch / Section Name</th>
                <th style="width: 150px;">Enrolled Count</th>
              </tr>
            </thead>
            <tbody>
              ${rowsHtml}
            </tbody>
          </table>
          <div style="margin-top: 30px; display: flex; justify-content: space-between; font-size: 11px; font-weight: bold;">
            <div>Total Sections: ${entries.length}</div>
            <div>Total Students: ${Object.values(groupCounts).reduce((a, b) => a + b, 0)}</div>
          </div>
        </body>
        </html>
      `);
      printWindow.document.close();
    }

    function printDetainedStudentsPdf() {
      if (!allocatedRooms || allocatedRooms.length === 0) {
        return alert("⚠️ Please generate reports first before printing detained list.");
      }

      const uni = document.getElementById("uniTitle").value;
      const deptShift = document.getElementById("deptShiftHeader").value;
      const exam = document.getElementById("examName").value;
      const session = document.getElementById("examSession").value;

      let detainedRoomsHtml = "";
      let totalDetainedCount = 0;

      const instructionsBlock = `
        <div style="margin-top: 25px; padding: 10px 12px; border: 1.5px solid #991b1b; background: #fef2f2; font-size: 10.5px; color: #7f1d1d; border-radius: 4px;">
          <strong>Instructions for Invigilators:</strong><br>
          • Verify each student’s name against the provided Detained Students List before entry.<br>
          • Do not allow any Detained Student to enter or appear for the examination.<br>
          • Report any discrepancy immediately to the Examination Control Room.
        </div>
      `;

      allocatedRooms.forEach(plan => {
        const roomDetained = [];
        const checkDetained = (st) => {
          if (isStudentDetained(st)) roomDetained.push(st);
        };
        plan.studentsA.forEach(checkDetained);
        plan.studentsB.forEach(checkDetained);

        if (roomDetained.length > 0) {
          totalDetainedCount += roomDetained.length;
          const rows = roomDetained.map((st, idx) => `
            <tr>
              <td style="border: 1px solid #334155; padding: 5px; text-align: center; font-weight: bold;">${idx + 1}</td>
              <td style="border: 1px solid #334155; padding: 5px; font-weight: bold;">${st.rollNo || ''}</td>
              <td style="border: 1px solid #334155; padding: 5px; font-family: monospace; font-weight: bold; color: #991b1b;">${st.enrollmentNo || ''}</td>
              <td style="border: 1px solid #334155; padding: 5px; font-weight: bold; text-transform: uppercase;">${st.name}</td>
              <td style="border: 1px solid #334155; padding: 5px; text-align: center; font-weight: bold;">${st.group}</td>
              <td style="border: 1px solid #334155; padding: 5px; text-align: center; font-weight: bold; color: #b91c1c;">DETAINED</td>
            </tr>
          `).join('');

          detainedRoomsHtml += `
            <div style="margin-bottom: 25px; page-break-after: always; break-after: page;">
              <div style="border-bottom: 2px solid #0f172a; padding-bottom: 8px; margin-bottom: 12px;">
                <h1 style="font-size: 18px; font-weight: 900; text-transform: uppercase; margin: 0;">${uni}</h1>
                <p style="font-size: 11px; font-weight: bold; text-transform: uppercase; margin: 2px 0;">${deptShift}</p>
                <p style="font-size: 12px; font-weight: 900; color: #991b1b; margin: 3px 0;">${exam} • ${session}</p>
              </div>
              <h3 style="background: #fee2e2; color: #991b1b; padding: 6px 10px; font-size: 12.5px; font-weight: 900; border: 1px solid #f87171; text-transform: uppercase; margin-bottom: 8px;">
                Room: ${plan.room.name} — Detained Candidates: ${roomDetained.length}
              </h3>
              <table style="width: 100%; border-collapse: collapse; font-size: 11px;">
                <thead>
                  <tr style="background: #f1f5f9;">
                    <th style="border: 1px solid #334155; padding: 5px; width: 45px;">S.No.</th>
                    <th style="border: 1px solid #334155; padding: 5px; width: 120px;">Roll No</th>
                    <th style="border: 1px solid #334155; padding: 5px; width: 130px;">Enrollment No</th>
                    <th style="border: 1px solid #334155; padding: 5px;">Student Name</th>
                    <th style="border: 1px solid #334155; padding: 5px; width: 80px;">Group</th>
                    <th style="border: 1px solid #334155; padding: 5px; width: 100px;">Status</th>
                  </tr>
                </thead>
                <tbody>
                  ${rows}
                </tbody>
              </table>
              ${instructionsBlock}
              <div style="margin-top: 25px; display: flex; justify-content: space-between; font-size: 11px; font-weight: bold;">
                <div>Total Detained in Room ${plan.room.name}: <strong>${roomDetained.length}</strong></div>
                <div style="text-align: center;">Head Dept. of CSE</div>
              </div>
            </div>
          `;
        }
      });

      if (totalDetainedCount === 0) {
        return alert("ℹ️ No detained students are currently seated in any room.");
      }

      const printWindow = window.open('', '_blank', 'width=900,height=800');
      if (!printWindow) return alert("Pop-up blocked. Please allow pop-ups.");

      printWindow.document.open();
      printWindow.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
          <title>Room-Wise Detained Students List</title>
          <style>
            @page { size: A4 portrait; margin: 10mm; }
            body { font-family: Arial, sans-serif; padding: 15px; color: #000; background: #fff; }
          </style>
        </head>
        <body onload="setTimeout(function(){ window.print(); window.close(); }, 400);">
          ${detainedRoomsHtml}
        </body>
        </html>
      `);
      printWindow.document.close();
    }

    function renderDocument() {
      const container = document.getElementById("reportContainer");
      container.innerHTML = "";

      const uni = document.getElementById("uniTitle").value;
      const deptShift = document.getElementById("deptShiftHeader").value;
      const prog = document.getElementById("progHeader").value;
      const exam = document.getElementById("examName").value;
      const session = document.getElementById("examSession").value;
      const printArea = document.getElementById("print-area");

      if (activeFormat === 'roomWise') {
        printArea.className = "max-w-4xl mx-auto min-h-screen bg-white portrait-view";
        document.body.className = "bg-slate-100 text-slate-900 min-h-screen";

        allocatedRooms.forEach(plan => {
          const maxRowsPerChunk = 40;
          
          let allRoomEntries = [];
          plan.studentsA.forEach(st => allRoomEntries.push({ cohortTitle: plan.titleA, student: st }));
          plan.studentsB.forEach(st => allRoomEntries.push({ cohortTitle: plan.titleB, student: st }));

          let chunks = [];
          for (let i = 0; i < allRoomEntries.length; i += maxRowsPerChunk) {
            chunks.push(allRoomEntries.slice(i, i + maxRowsPerChunk));
          }

          chunks.forEach(chunk => {
            const page = document.createElement("div");
            page.className = "page-break mb-8";

            const chunkSectionsMap = {};
            chunk.forEach(item => {
              if (!chunkSectionsMap[item.cohortTitle]) chunkSectionsMap[item.cohortTitle] = [];
              chunkSectionsMap[item.cohortTitle].push(item.student);
            });

            let tablesSectionsHtml = "";
            Object.keys(chunkSectionsMap).forEach(cohortTitle => {
              const list = chunkSectionsMap[cohortTitle];
              const globalStartIndex = allRoomEntries.findIndex(e => e.student === list[0]);

              const rows = list.map((st, idx) => {
                const isDetained = isStudentDetained(st);
                return `
                  <tr class="${isDetained ? 'detained-row' : ''}">
                    <td class="col-sno">${globalStartIndex + idx + 1}.</td>
                    <td class="col-roll">${st.rollNo || ''}</td>
                    <td class="col-enroll font-mono ${isDetained ? 'font-bold text-red-700' : ''}">${st.enrollmentNo || ''}</td>
                    <td class="col-name">${st.name} ${isDetained ? '<span class="text-red-600 font-bold ml-1">(DETAINED)</span>' : ''}</td>
                    <td class="col-group">${st.group}</td>
                  </tr>
                `;
              }).join('');

              tablesSectionsHtml += `
                <thead>
                  <tr>
                    <th colspan="5" class="cohort-header bg-slate-100 text-slate-950 font-black border-b-2 border-slate-900">${cohortTitle}</th>
                  </tr>
                  <tr class="font-bold text-center bg-slate-50 text-slate-900 border-b border-slate-900">
                    <th class="col-sno">S.No.</th>
                    <th class="col-roll">Roll No</th>
                    <th class="col-enroll">Enrollment No</th>
                    <th class="col-name">Student Name</th>
                    <th class="col-group">Group</th>
                  </tr>
                </thead>
                <tbody>
                  ${rows}
                </tbody>
              `;
            });

            page.innerHTML = `
              <div class="pro-header-container">
                <div class="flex justify-between items-start">
                  <div class="space-y-0.5">
                    <div class="text-2xl font-black tracking-wide text-slate-950 uppercase font-serif leading-none">${uni}</div>
                    <div class="text-xs font-extrabold uppercase text-slate-800 tracking-wider">${deptShift.split(':')[0] || 'Department of CSE'}</div>
                    <div class="text-xs font-semibold text-slate-700">${prog}</div>
                  </div>
                  <div class="text-right">
                    <div class="inline-block bg-slate-900 text-white text-xs font-black px-3.5 py-1 rounded shadow uppercase tracking-widest">
                      ROOM: ${plan.room.name} <span class="text-slate-300 font-normal">(${plan.room.block})</span>
                    </div>
                    <div class="text-[11px] font-black text-indigo-900 mt-1 uppercase tracking-tight">${session}</div>
                  </div>
                </div>
                <div class="pro-header-divider"></div>
                <div class="flex justify-between items-center text-[11px] text-slate-800 font-bold uppercase">
                  <span class="text-indigo-900 font-extrabold tracking-wide"> ${exam}</span>
                  <span>Allotted / Cap: <strong class="text-slate-950 font-black">${plan.studentsA.length + plan.studentsB.length} / ${plan.room.capacity}</strong></span>
                </div>
              </div>

              <table class="report-table">
                ${tablesSectionsHtml}
              </table>
            `;
            container.appendChild(page);
          });
        });

      } else if (activeFormat === 'attendance') {
        printArea.className = "max-w-4xl mx-auto min-h-screen bg-white portrait-view";
        document.body.className = "bg-slate-100 text-slate-900 min-h-screen";

        allocatedRooms.forEach(plan => {
          // GROUP-WISE BREAKDOWN WITHIN EACH ROOM
          const groupMap = {};
          const categorize = (st) => {
            const g = st.group || "GENERAL";
            if (!groupMap[g]) groupMap[g] = [];
            groupMap[g].push(st);
          };
          plan.studentsA.forEach(categorize);
          plan.studentsB.forEach(categorize);

          Object.keys(groupMap).forEach(groupName => {
            const groupStudents = groupMap[groupName];
            if (!groupStudents || groupStudents.length === 0) return;

            const page = document.createElement("div");
            page.className = "page-break mb-8";

            const rowsHtml = groupStudents.map((st, idx) => {
              const isDetained = isStudentDetained(st);
              return `
                <tr class="${isDetained ? 'detained-row' : ''}">
                  <td class="col-sno">${idx + 1}.</td>
                  <td class="col-roll">${st.rollNo || ''}</td>
                  <td class="col-enroll font-mono ${isDetained ? 'font-bold text-red-700' : ''}">${st.enrollmentNo || ''}</td>
                  <td class="col-name">${st.name} ${isDetained ? '<span class="text-red-600 font-bold ml-1">(DETAINED)</span>' : ''}</td>
                  <td class="col-group font-bold text-indigo-900">${st.group}</td>
                  <td class="col-sign">${isDetained ? '<span class="text-red-700 font-bold text-[10px]">DETAINED</span>' : ''}</td>
                </tr>
              `;
            }).join('');

            page.innerHTML = `
              <div class="pro-header-container">
                <div class="flex justify-between items-start">
                  <div class="space-y-0.5">
                    <div class="text-2xl font-black tracking-wide text-slate-950 uppercase font-serif leading-none">${uni}</div>
                    <div class="text-xs font-extrabold uppercase text-slate-800 tracking-wider">${deptShift.split(':')[0] || 'Department of CSE'} - ${prog}</div>
                    <div class="text-[11px] font-bold text-indigo-900 uppercase tracking-tight">${exam} • ${session}</div>
                  </div>
                  <div class="text-right">
                    <div class="inline-block border-2 border-slate-950 bg-slate-950 text-white text-xs font-black px-3 py-0.5 rounded uppercase tracking-wider shadow">
                      EXAM ATTENDANCE SHEET
                    </div>
                    <div class="text-xs font-black text-slate-900 mt-1 uppercase">Room: ${plan.room.name} (${plan.room.block})</div>
                  </div>
                </div>
                <div class="pro-header-divider"></div>
                
                <!-- ATTENDANCE HEADER ROW: Course Name on left, Course Code with dotted line on right -->
                <div class="flex justify-between items-center text-xs text-slate-900 font-bold uppercase mb-1.5 bg-slate-50 p-2 rounded border border-slate-200">
                  <div>Course Name: <span class="border-b border-dashed border-slate-400 inline-block w-48 font-semibold text-indigo-900"></span></div>
                  <div>Course Code: <span class="border-b border-dashed border-slate-400 inline-block w-32"></span></div>
                </div>

                <!-- NEXT ROW: Group Name (increased font), Group Seated Count, Date -->
                <div class="flex justify-between items-center text-xs text-slate-900 font-bold uppercase mb-1 bg-slate-50 p-2 rounded border border-slate-200">
                  <div>Group Name: <span class="text-indigo-900 font-black text-sm tracking-wide ml-1">${groupName}</span></div>
                  <div>Group Seated Count: <span class="text-slate-950 font-black">${groupStudents.length}</span></div>
                  <div>Shift: <span class="border-b border-dashed border-slate-400 inline-block w-32"></span></div>
                  <div>Exam Date: <span class="border-b border-dashed border-slate-400 inline-block w-24"></span></div>
                </div>
              </div>

              <table class="report-table">
                <thead>
                  <tr class="font-bold text-center bg-slate-100 text-slate-900 border-b-2 border-slate-900">
                    <th class="col-sno">S.No.</th>
                    <th class="col-roll">Roll No</th>
                    <th class="col-enroll">Enrollment No</th>
                    <th class="col-name">Student Name</th>
                    <th class="col-group">Group</th>
                    <th class="col-sign">Student Sign</th>
                  </tr>
                </thead>
                <tbody>
                  ${rowsHtml}
                </tbody>
              </table>

              <!-- 4 Invigilators Name & Sign in vertical manner -->
              <div class="mt-4 pt-2 text-[11px] font-bold text-slate-900 space-y-2">
                <div class="flex justify-between items-end pb-1 border-b border-slate-300">
                  <div>Total Candidates Present: ________ / ${groupStudents.length}</div>
                  <div class="text-slate-700">Invigilation Duty Verification & Signatures</div>
                </div>
                <div class="space-y-1.5 pt-1 font-semibold text-slate-900">
                  <div>1. Invigilator Name: ___________________________________________ &nbsp;&nbsp;&nbsp; Sign: ____________</div>
                  <div>2. Invigilator Name: ___________________________________________ &nbsp;&nbsp;&nbsp; Sign: ____________</div>
                  <div>3. Invigilator Name: ___________________________________________ &nbsp;&nbsp;&nbsp; Sign: ____________</div>
                  <div>4. Invigilator Name: ___________________________________________ &nbsp;&nbsp;&nbsp; Sign: ____________</div>
                </div>
              </div>
            `;
            container.appendChild(page);
          });
        });

      } else if (activeFormat === 'courseCodeAttendance') {
        printArea.className = "max-w-4xl mx-auto min-h-screen bg-white portrait-view";
        document.body.className = "bg-slate-100 text-slate-900 min-h-screen";

        allocatedRooms.forEach(plan => {
          selectedCourseCodesForAttendance.forEach(selectedCode => {
            const matchingStudents = [];
            const checkMatch = (st) => {
              if (st.subjects && st.subjects.includes(selectedCode)) {
                matchingStudents.push(st);
              }
            };
            plan.studentsA.forEach(checkMatch);
            plan.studentsB.forEach(checkMatch);

            if (matchingStudents.length === 0) return;

            const courseNameFromMap = courseNameMapping.get(selectedCode) || "";

            const page = document.createElement("div");
            page.className = "page-break mb-8";

            const rowsHtml = matchingStudents.map((st, idx) => {
              const isDetained = isStudentDetained(st);
              return `
                <tr class="${isDetained ? 'detained-row' : ''}">
                  <td class="col-sno">${idx + 1}.</td>
                  <td class="col-roll">${st.rollNo || ''}</td>
                  <td class="col-enroll font-mono ${isDetained ? 'font-bold text-red-700' : ''}">${st.enrollmentNo || ''}</td>
                  <td class="col-name">${st.name} ${isDetained ? '<span class="text-red-600 font-bold ml-1">(DETAINED)</span>' : ''}</td>
                  <td class="col-group font-bold text-indigo-900">${st.group}</td>
                  <td class="col-sign">${isDetained ? '<span class="text-red-700 font-bold text-[10px]">DETAINED</span>' : ''}</td>
                </tr>
              `;
            }).join('');

            page.innerHTML = `
              <div class="pro-header-container">
                <div class="flex justify-between items-start">
                  <div class="space-y-0.5">
                    <div class="text-2xl font-black tracking-wide text-slate-950 uppercase font-serif leading-none">${uni}</div>
                    <div class="text-xs font-extrabold uppercase text-slate-800 tracking-wider">${deptShift.split(':')[0] || 'Department of CSE'} - ${prog}</div>
                    <div class="text-[11px] font-bold text-indigo-900 uppercase tracking-tight">${exam} • ${session}</div>
                  </div>
                  <div class="text-right">
                    <div class="inline-block border-2 border-slate-950 bg-slate-950 text-white text-xs font-black px-3 py-0.5 rounded uppercase tracking-wider shadow">
                      ATTENDANCE SHEET
                    </div>
                    <div class="text-xs font-black text-slate-900 mt-1 uppercase">Room: ${plan.room.name} (${plan.room.block})</div>
                  </div>
                </div>
                <div class="pro-header-divider"></div>
                
                <!-- HEADER ROW: Course Name first (auto-filled if mapping uploaded, else blank line), then Course Code -->
                <div class="flex justify-between items-center text-xs text-slate-900 font-bold uppercase mb-1.5 bg-slate-50 p-2 rounded border border-slate-200">
                  <div>Course Name: <span class="font-semibold text-slate-900 ml-1">${courseNameFromMap !== "" ? courseNameFromMap : '<span class="border-b border-dashed border-slate-400 inline-block w-56">&nbsp;</span>'}</span></div>
                  <div>Course Code: <span class="text-indigo-900 font-black text-sm tracking-wide ml-1">${selectedCode}</span></div>
                </div>

                <!-- NEXT ROW: Enrolled Candidates and Exam Date -->
                <div class="flex justify-between items-center text-xs text-slate-900 font-bold uppercase mb-1 bg-slate-50 p-2 rounded border border-slate-200">
                  <div>Enrolled Candidates: <span class="text-slate-950 font-black">${matchingStudents.length}</span></div>
                  <div>Shift: <span class="border-b border-dashed border-slate-400 inline-block w-32"></span></div>
                  <div>Exam Date: <span class="border-b border-dashed border-slate-400 inline-block w-32"></span></div>
                </div>
              </div>

              <table class="report-table">
                <thead>
                  <tr class="font-bold text-center bg-slate-100 text-slate-900 border-b-2 border-slate-900">
                    <th class="col-sno">S.No.</th>
                    <th class="col-roll">Roll No</th>
                    <th class="col-enroll">Enrollment No</th>
                    <th class="col-name">Student Name</th>
                    <th class="col-group">Group</th>
                    <th class="col-sign">Student Sign</th>
                  </tr>
                </thead>
                <tbody>
                  ${rowsHtml}
                </tbody>
              </table>

              <div class="mt-4 pt-2 text-[11px] font-bold text-slate-900 space-y-2">
                <div class="flex justify-between items-end pb-1 border-b border-slate-300">
                  <div>Total Candidates Present: ________ / ${matchingStudents.length}</div>
                  <div class="text-slate-700">Invigilation Duty Verification & Signatures</div>
                </div>
                <div class="space-y-1.5 pt-1 font-semibold text-slate-900">
                  <div>1. Invigilator Name: ___________________________________________ &nbsp;&nbsp;&nbsp; Sign: ____________</div>
                  <div>2. Invigilator Name: ___________________________________________ &nbsp;&nbsp;&nbsp; Sign: ____________</div>
                  <div>3. Invigilator Name: ___________________________________________ &nbsp;&nbsp;&nbsp; Sign: ____________</div>
                  <div>4. Invigilator Name: ___________________________________________ &nbsp;&nbsp;&nbsp; Sign: ____________</div>
                </div>
              </div>
            `;
            container.appendChild(page);
          });
        });

      } else if (activeFormat === 'unallotted') {
        printArea.className = "max-w-4xl mx-auto min-h-screen bg-white portrait-view";
        document.body.className = "bg-slate-100 text-slate-900 min-h-screen";

        const page = document.createElement("div");
        page.className = "page-break mb-8";

        const rowsHtml = unallottedStudents.map((st, idx) => `
          <tr>
            <td class="col-sno">${idx + 1}.</td>
            <td class="col-roll">${st.rollNo || ''}</td>
            <td class="col-enroll font-mono font-bold">${st.enrollmentNo || ''}</td>
            <td class="col-name">${st.name}</td>
            <td class="col-group">${st.group}</td>
            <td class="text-center font-bold text-slate-800">${st.cohort || ''}</td>
            <td class="col-reason">${st.reason || 'Unallotted'}</td>
          </tr>
        `).join('');

        page.innerHTML = `
          <div class="pro-header-container border-amber-800 bg-amber-50/40">
            <div class="flex justify-between items-start">
              <div class="space-y-0.5">
                <div class="text-2xl font-black tracking-wide text-slate-950 uppercase font-serif leading-none">${uni}</div>
                <div class="text-xs font-extrabold uppercase text-slate-800 tracking-wider">${deptShift.split(':')[0] || 'Department of CSE'} - ${prog}</div>
                <div class="text-[11px] font-bold text-amber-950 uppercase tracking-tight">${exam} • ${session}</div>
              </div>
              <div class="text-right">
                <div class="inline-block bg-amber-800 text-white text-xs font-black px-3.5 py-1 rounded uppercase tracking-wider shadow">
                  UNALLOTTED CANDIDATES
                </div>
              </div>
            </div>
            <div class="pro-header-divider bg-amber-800"></div>
            <div class="text-[11px] text-amber-950 font-bold uppercase">
              Notice: The following candidates could not be accommodated within the configured room roster.
            </div>
          </div>

          <table class="report-table">
            <thead>
              <tr class="font-bold text-center bg-amber-100/80 text-slate-900 border-b-2 border-slate-900">
                <th class="col-sno">S.No.</th>
                <th class="col-roll">Roll No</th>
                <th class="col-enroll">Enrollment No</th>
                <th class="col-name">Student Name</th>
                <th class="col-group">Group</th>
                <th class="text-center">Cohort / Semester</th>
                <th class="col-reason">Status</th>
              </tr>
            </thead>
            <tbody>
              ${rowsHtml || '<tr><td colspan="7" class="text-center italic py-4 text-emerald-700 font-black text-xs">All students successfully allotted to rooms! (No unallotted candidates)</td></tr>'}
            </tbody>
          </table>
          <div class="mt-8 pt-4 flex justify-between items-end text-[11px] font-semibold text-slate-800">
            <div>Total Unallotted Candidates: <strong>${unallottedStudents.length}</strong></div>
            <div class="text-center font-bold">Head Dept. of CSE</div>
          </div>
        `;
        container.appendChild(page);

      } else if (activeFormat === 'detainedReport') {
        printArea.className = "max-w-4xl mx-auto min-h-screen bg-white portrait-view";
        document.body.className = "bg-slate-100 text-slate-900 min-h-screen";

        allocatedRooms.forEach(plan => {
          const roomDetained = [];
          const checkDetained = (st) => {
            if (isStudentDetained(st)) roomDetained.push(st);
          };
          plan.studentsA.forEach(checkDetained);
          plan.studentsB.forEach(checkDetained);

          if (roomDetained.length > 0) {
            const page = document.createElement("div");
            page.className = "page-break mb-8";

            const rowsHtml = roomDetained.map((st, idx) => `
              <tr class="detained-row">
                <td class="col-sno">${idx + 1}.</td>
                <td class="col-roll">${st.rollNo || ''}</td>
                <td class="col-enroll font-mono font-bold text-red-700">${st.enrollmentNo || ''}</td>
                <td class="col-name">${st.name}</td>
                <td class="col-group">${st.group}</td>
                <td class="col-reason">DETAINED</td>
              </tr>
            `).join('');

            page.innerHTML = `
              <div class="pro-header-container border-red-800 bg-red-50/40">
                <div class="flex justify-between items-start">
                  <div class="space-y-0.5">
                    <div class="text-2xl font-black tracking-wide text-slate-950 uppercase font-serif leading-none">${uni}</div>
                    <div class="text-xs font-extrabold uppercase text-slate-800 tracking-wider">${deptShift.split(':')[0] || 'Department of CSE'} - ${prog}</div>
                    <div class="text-[11px] font-bold text-red-900 uppercase tracking-tight">${exam} • ${session}</div>
                  </div>
                  <div class="text-right">
                    <div class="inline-block bg-red-800 text-white text-xs font-black px-3.5 py-1 rounded uppercase tracking-wider shadow">
                      ROOM-WISE DETAINED LIST
                    </div>
                    <div class="text-xs font-black text-slate-900 mt-1 uppercase">Room: ${plan.room.name}</div>
                  </div>
                </div>
                <div class="pro-header-divider bg-red-800"></div>
                <div class="flex justify-between items-center text-[11px] text-red-950 font-bold uppercase">
                  <span>Room Detained Candidates: <strong class="text-red-700 font-black">${roomDetained.length}</strong></span>
                </div>
              </div>

              <table class="report-table">
                <thead>
                  <tr class="font-bold text-center bg-red-100 text-slate-900 border-b-2 border-slate-900">
                    <th class="col-sno">S.No.</th>
                    <th class="col-roll">Roll No</th>
                    <th class="col-enroll">Enrollment No</th>
                    <th class="col-name">Student Name</th>
                    <th class="col-group">Group</th>
                    <th class="col-reason">Status</th>
                  </tr>
                </thead>
                <tbody>
                  ${rowsHtml}
                </tbody>
              </table>

              <div style="margin-top: 15px; padding: 8px 10px; border: 1.5px solid #991b1b; background: #fef2f2; font-size: 10px; color: #7f1d1d; border-radius: 4px;">
                <strong>Instructions for Invigilators:</strong><br>
                • Verify each student’s name against the provided Detained Students List before entry.<br>
                • Do not allow any Detained Student to enter or appear for the examination.<br>
                • Report any discrepancy immediately to the Examination Control Room.
              </div>

              <div class="mt-4 pt-2 flex justify-between items-end text-[11px] font-semibold text-slate-800">
                <div>Total Detained in Room ${plan.room.name}: <strong>${roomDetained.length}</strong></div>
                <div class="text-center font-bold">Head Dept. of CSE</div>
              </div>
            `;
            container.appendChild(page);
          }
        });

      } else if (activeFormat === 'detainedContinuous') {
        printArea.className = "max-w-4xl mx-auto min-h-screen bg-white portrait-view";
        document.body.className = "bg-slate-100 text-slate-900 min-h-screen";

        let allDetainedEntries = [];
        allocatedRooms.forEach(plan => {
          const checkDetained = (st) => {
            if (isStudentDetained(st)) {
              allDetainedEntries.push({ roomName: plan.room.name, student: st });
            }
          };
          plan.studentsA.forEach(checkDetained);
          plan.studentsB.forEach(checkDetained);
        });

        const page = document.createElement("div");
        page.className = "mb-8";

        const rowsHtml = allDetainedEntries.map((item, idx) => `
          <tr class="detained-row">
            <td class="col-sno">${idx + 1}.</td>
            <td class="text-center font-bold text-indigo-900">${item.roomName}</td>
            <td class="col-roll">${item.student.rollNo || ''}</td>
            <td class="col-enroll font-mono font-bold text-red-700">${item.student.enrollmentNo || ''}</td>
            <td class="col-name">${item.student.name}</td>
            <td class="col-group">${item.student.group}</td>
          </tr>
        `).join('');

        page.innerHTML = `
          <div class="pro-header-container border-red-800 bg-red-50/40">
            <div class="flex justify-between items-start">
              <div class="space-y-0.5">
                <div class="text-2xl font-black tracking-wide text-slate-950 uppercase font-serif leading-none">${uni}</div>
                <div class="text-xs font-extrabold uppercase text-slate-800 tracking-wider">${deptShift.split(':')[0] || 'Department of CSE'} - ${prog}</div>
                <div class="text-[11px] font-bold text-red-900 uppercase tracking-tight">${exam} • ${session}</div>
              </div>
              <div class="text-right">
                <div class="inline-block bg-red-800 text-white text-xs font-black px-3.5 py-1 rounded uppercase tracking-wider shadow">
                  DETAINED STUDENT LIST 
                </div>
              </div>
            </div>
            <div class="pro-header-divider bg-red-800"></div>
            <div class="flex justify-between items-center text-[11px] text-red-950 font-bold uppercase">
              <span>Total Detained Candidates: <strong class="text-red-700 font-black">${allDetainedEntries.length}</strong></span>
            </div>
          </div>

          <table class="report-table">
            <thead>
              <tr class="font-bold text-center bg-red-100 text-slate-900 border-b-2 border-slate-900">
                <th class="col-sno">S.No.</th>
                <th class="text-center w-24">Room</th>
                <th class="col-roll">Roll No</th>
                <th class="col-enroll">Enrollment No</th>
                <th class="col-name">Student Name</th>
                <th class="col-group">Group</th>
              </tr>
            </thead>
            <tbody>
              ${rowsHtml || '<tr><td colspan="6" class="text-center italic py-4 text-emerald-700 font-black text-xs">No detained students found across rooms!</td></tr>'}
            </tbody>
          </table>

          <div style="margin-top: 20px; padding: 10px 12px; border: 1.5px solid #991b1b; background: #fef2f2; font-size: 10.5px; color: #7f1d1d; border-radius: 4px;">
            <strong>Instructions for Invigilators:</strong><br>
            • Verify each student’s name against the provided Detained Students List before entry.<br>
            • Do not allow any Detained Student to enter or appear for the examination.<br>
            • Report any discrepancy immediately to the Examination Control Room.
          </div>

          <div class="mt-8 pt-4 flex justify-between items-end text-[11px] font-semibold text-slate-800">
            <div>Total Detained Candidates: <strong>${allDetainedEntries.length}</strong></div>
            <div class="text-center font-bold">Head Dept. of CSE</div>
          </div>
        `;
        container.appendChild(page);

      } else if (activeFormat === 'blankAttendance') {
        printArea.className = "max-w-4xl mx-auto min-h-screen bg-white portrait-view";
        document.body.className = "bg-slate-100 text-slate-900 min-h-screen";

        const page = document.createElement("div");
        page.className = "page-break mb-8";

        let blankRows = "";
        for (let i = 1; i <= 30; i++) {
          blankRows += `
            <tr>
              <td class="col-sno" style="height: 18px;">${i}.</td>
              <td class="col-roll"></td>
              <td class="col-enroll"></td>
              <td class="col-name"></td>
              <td class="col-group"></td>
              <td class="col-sign"></td>
            </tr>
          `;
        }

        page.innerHTML = `
          <div class="pro-header-container">
            <div class="flex justify-between items-start">
              <div class="space-y-0.5">
                <div class="text-2xl font-black tracking-wide text-slate-950 uppercase font-serif leading-none">${uni}</div>
                <div class="text-xs font-extrabold uppercase text-slate-800 tracking-wider">${deptShift.split(':')[0] || 'Department of CSE'} - ${prog}</div>
                <div class="text-[11px] font-bold text-indigo-900 uppercase tracking-tight">${exam} • ${session}</div>
              </div>
              <div class="text-right">
                <div class="inline-block border-2 border-slate-950 bg-slate-950 text-white text-xs font-black px-3 py-0.5 rounded uppercase tracking-wider shadow">
                  BLANK EXAMINATION ATTENDANCE SHEET
                </div>
                <div class="text-xs font-black text-slate-900 mt-1 uppercase">Room: ___________________</div>
              </div>
            </div>
            <div class="pro-header-divider"></div>
            
            <div class="flex justify-between items-center text-xs text-slate-900 font-bold uppercase mb-1.5 bg-slate-50 p-2 rounded border border-slate-200">
              <div>Course Name: <span class="border-b border-dashed border-slate-400 inline-block w-48 font-semibold text-indigo-900"></span></div>
              <div>Course Code: <span class="border-b border-dashed border-slate-400 inline-block w-32"></span></div>
            </div>

            <div class="flex justify-between items-center text-xs text-slate-900 font-bold uppercase mb-1 bg-slate-50 p-2 rounded border border-slate-200">
              <div>Group Name: <span class="text-indigo-900 font-black text-sm tracking-wide ml-1">___________________</span></div>
              <div>Group Seated Count: <span class="text-slate-950 font-black">________</span></div>
              <div>Shift: <span class="border-b border-dashed border-slate-400 inline-block w-32"></span></div>
              <div>Exam Date: <span class="border-b border-dashed border-slate-400 inline-block w-24"></span></div>
            </div>
          </div>

          <table class="report-table">
            <thead>
              <tr class="font-bold text-center bg-slate-100 text-slate-900 border-b-2 border-slate-900">
                <th class="col-sno">S.No.</th>
                <th class="col-roll">Roll No</th>
                <th class="col-enroll">Enrollment No</th>
                <th class="col-name">Student Name</th>
                <th class="col-group">Group</th>
                <th class="col-sign">Student Sign</th>
              </tr>
            </thead>
            <tbody>
              ${blankRows}
            </tbody>
          </table>

          <div class="mt-3 pt-1 text-[11px] font-bold text-slate-900 space-y-1.5">
            <div class="flex justify-between items-end pb-1 border-b border-slate-300">
              <div>Total Candidates Present: ________ / 30</div>
              <div class="text-slate-700">Invigilation Duty Verification & Signatures</div>
            </div>
            <div class="space-y-1 pt-0.5 font-semibold text-slate-900">
              <div>1. Invigilator Name: ___________________________________________ &nbsp;&nbsp;&nbsp; Sign: ____________</div>
              <div>2. Invigilator Name: ___________________________________________ &nbsp;&nbsp;&nbsp; Sign: ____________</div>
              <div>3. Invigilator Name: ___________________________________________ &nbsp;&nbsp;&nbsp; Sign: ____________</div>
              <div>4. Invigilator Name: ___________________________________________ &nbsp;&nbsp;&nbsp; Sign: ____________</div>
            </div>
          </div>
        `;
        container.appendChild(page);

      } else if (activeFormat === 'copyCollection') {
        printArea.className = "max-w-4xl mx-auto min-h-screen bg-white portrait-view";
        document.body.className = "bg-slate-100 text-slate-900 min-h-screen";

        allocatedRooms.forEach((plan, idx) => {
          const page = document.createElement("div");
          page.className = "page-break mb-8";

          const roomGroupsSet = new Set();
          const checkGrp = (st) => { if (st.group) roomGroupsSet.add(st.group); };
          plan.studentsA.forEach(checkGrp);
          plan.studentsB.forEach(checkGrp);
          const roomGroupsList = Array.from(roomGroupsSet).sort();

          let tableRowsHtml = "";
          let ufmRowsHtml = "";

          if (roomGroupsList.length > 0) {
            roomGroupsList.forEach((grp, gIdx) => {
              tableRowsHtml += `
                <tr>
                  <td class="text-center font-bold" style="padding: 5px; border: 1px solid #000;">${gIdx + 1}</td>
                  <td class="font-bold text-indigo-900 uppercase" style="padding: 5px; border: 1px solid #000;">${grp}</td>
                  <td class="text-center" style="padding: 5px; border: 1px solid #000;"></td>
                  <td class="text-center" style="padding: 5px; border: 1px solid #000;"></td>
                  <td class="text-center" style="padding: 5px; border: 1px solid #000;"></td>
                </tr>
              `;
            });
          } else {
            tableRowsHtml = `
              <tr>
                <td class="text-center font-bold" style="padding: 5px; border: 1px solid #000;">1</td>
                <td class="font-bold text-indigo-900 uppercase" style="padding: 5px; border: 1px solid #000;">GENERAL</td>
                <td class="text-center" style="padding: 5px; border: 1px solid #000;"></td>
                <td class="text-center" style="padding: 5px; border: 1px solid #000;"></td>
                <td class="text-center" style="padding: 5px; border: 1px solid #000;"></td>
              </tr>
            `;
          }

          let currentCount = roomGroupsList.length > 0 ? roomGroupsList.length : 1;
          for (let i = currentCount + 1; i <= 12; i++) {
            tableRowsHtml += `
              <tr>
                <td class="text-center font-bold" style="padding: 5px; border: 1px solid #000;">${i}</td>
                <td style="padding: 5px; border: 1px solid #000;"></td>
                <td style="padding: 5px; border: 1px solid #000;"></td>
                <td style="padding: 5px; border: 1px solid #000;"></td>
                <td style="padding: 5px; border: 1px solid #000;"></td>
              </tr>
            `;
          }

          for (let u = 1; u <= 5; u++) {
            ufmRowsHtml += `
              <tr>
                <td class="text-center font-bold" style="padding: 4px; border: 1px solid #000;">${u}</td>
                <td style="padding: 4px; border: 1px solid #000;"></td>
                <td style="padding: 4px; border: 1px solid #000;"></td>
                <td style="padding: 4px; border: 1px solid #000;"></td>
                <td style="padding: 4px; border: 1px solid #000;"></td>
              </tr>
            `;
          }

          page.innerHTML = `
            <div class="pro-header-container border-blue-900 bg-blue-50/35">
              <div class="flex justify-between items-start">
                <div class="space-y-0.5">
                  <div class="text-2xl font-black tracking-wide text-slate-950 uppercase font-serif leading-none">${uni}</div>
                  <div class="text-xs font-extrabold uppercase text-slate-800 tracking-wider">${deptShift.split(':')[0] || 'Department of CSE'} - ${prog}</div>
                  <div class="text-[11px] font-bold text-blue-950 uppercase tracking-tight">${exam} • ${session}</div>
                </div>
                <div class="text-right">
                  <div class="inline-block bg-blue-900 text-white text-xs font-black px-3.5 py-1 rounded uppercase tracking-wider shadow">
                    EXAM COPY COLLECTION SHEET
                  </div>
                  <div class="text-xs font-black text-slate-900 mt-1 uppercase">Room: ${plan.room.name} (${plan.room.block})</div>
                </div>
              </div>
              <div class="pro-header-divider bg-blue-900"></div>
              
              <div class="grid grid-cols-2 gap-2 text-xs text-slate-900 font-bold uppercase bg-white p-2 rounded border border-slate-200">
                <div>Shift: <span class="border-b border-dashed border-slate-400 inline-block w-48 font-semibold text-indigo-900"></span></div>
                <div>Date: <span class="border-b border-dashed border-slate-400 inline-block w-40"></span></div>
              </div>
            </div>

            <table style="width: 100%; border-collapse: collapse; border: 2px solid #000; font-family: Arial, sans-serif; margin-top: 4px;">
              <thead>
                <tr style="background-color: #1e3a8a; color: #fff; font-weight: bold; text-align: center; font-size: 11.5px;">
                  <th style="padding: 6px; width: 45px; border: 1px solid #000;">S. No.</th>
                  <th style="padding: 6px; text-align: left; border: 1px solid #000;">Group Name</th>
                  <th style="padding: 6px; width: 100px; border: 1px solid #000;">Year/Sem</th>
                  <th style="padding: 6px; width: 120px; border: 1px solid #000;">Course Code</th>
                  <th style="padding: 6px; width: 90px; border: 1px solid #000;">No of Copy</th>
                </tr>
              </thead>
              <tbody>
                ${tableRowsHtml}
              </tbody>
            </table>

            <div style="margin-top: 6px; font-size: 10.5px; font-weight: 900; text-transform: uppercase; color: #991b1b;">UFM Cases Record (If Any)</div>
            <table style="width: 100%; border-collapse: collapse; border: 2px solid #7f1d1d; font-family: Arial, sans-serif; margin-top: 2px;">
              <thead>
                <tr style="background-color: #7f1d1d; color: #fff; font-weight: bold; text-align: center; font-size: 11px;">
                  <th style="padding: 5px; width: 40px; border: 1px solid #000;">S.No</th>
                  <th style="padding: 5px; width: 110px; border: 1px solid #000;">Roll No</th>
                  <th style="padding: 5px; width: 120px; border: 1px solid #000;">Enrollment No.</th>
                  <th style="padding: 5px; text-align: left; border: 1px solid #000;">Student Name</th>
                  <th style="padding: 5px; width: 140px; border: 1px solid #000;">Course Name/Code</th>
                </tr>
              </thead>
              <tbody>
                ${ufmRowsHtml}
              </tbody>
            </table>

            <div class="mt-2 p-2 border border-slate-300 rounded-lg bg-slate-50 text-[10px] font-semibold text-slate-800">
              <div><strong>Collection Note:</strong> Group Name(s) are auto-filled from system records. Invigilators must fill Year/Sem, Course Code, No of Copies, and UFM records if applicable.</div>
            </div>

            <div class="mt-3 pt-1 flex justify-between items-end text-[11px] font-bold text-slate-900">
              <div>
                <div>Invigilator 1 Signature: ______________________</div>
                <div class="mt-1">Invigilator 2 Signature: ______________________</div>
              </div>
              <div class="text-center font-bold">
                Head Dept. of CSE<br>
                __________________________________<br>
                Received By (Examination Control Room)
              </div>
            </div>
          `;
          container.appendChild(page);
        });

      } else if (activeFormat === 'blankCopyCollection') {
        printArea.className = "max-w-4xl mx-auto min-h-screen bg-white portrait-view";
        document.body.className = "bg-slate-100 text-slate-900 min-h-screen";

        const page = document.createElement("div");
        page.className = "page-break mb-8";

        let blankCollectionRows = "";
        for (let i = 1; i <= 12; i++) {
          blankCollectionRows += `
            <tr>
              <td class="text-center font-bold" style="padding: 6px; border: 1px solid #000;">${i}</td>
              <td style="padding: 6px; border: 1px solid #000;"></td>
              <td style="padding: 6px; border: 1px solid #000;"></td>
              <td style="padding: 6px; border: 1px solid #000;"></td>
              <td style="padding: 6px; border: 1px solid #000;"></td>
            </tr>
          `;
        }

        let blankUfmRows = "";
        for (let u = 1; u <= 5; u++) {
          blankUfmRows += `
            <tr>
              <td class="text-center font-bold" style="padding: 5px; border: 1px solid #000;">${u}</td>
              <td style="padding: 5px; border: 1px solid #000;"></td>
              <td style="padding: 5px; border: 1px solid #000;"></td>
              <td style="padding: 5px; border: 1px solid #000;"></td>
              <td style="padding: 5px; border: 1px solid #000;"></td>
            </tr>
          `;
        }

        page.innerHTML = `
          <div class="pro-header-container border-blue-900 bg-blue-50/35">
            <div class="flex justify-between items-start">
              <div class="space-y-0.5">
                <div class="text-2xl font-black tracking-wide text-slate-950 uppercase font-serif leading-none">${uni}</div>
                <div class="text-xs font-extrabold uppercase text-slate-800 tracking-wider">${deptShift.split(':')[0] || 'Department of CSE'} - ${prog}</div>
                <div class="text-[11px] font-bold text-blue-950 uppercase tracking-tight">${exam} • ${session}</div>
              </div>
              <div class="text-right">
                <div class="inline-block bg-blue-900 text-white text-xs font-black px-3.5 py-1 rounded uppercase tracking-wider shadow">
                  BLANK EXAM COPY COLLECTION SHEET
                </div>
                <div class="text-xs font-black text-slate-900 mt-1 uppercase">Room: ___________________</div>
              </div>
            </div>
            <div class="pro-header-divider bg-blue-900"></div>
            
            <div class="grid grid-cols-2 gap-2 text-xs text-slate-900 font-bold uppercase bg-white p-2 rounded border border-slate-200">
              <div>Shift: <span class="border-b border-dashed border-slate-400 inline-block w-48 font-semibold text-indigo-900"></span></div>
              <div>Date: <span class="border-b border-dashed border-slate-400 inline-block w-40"></span></div>
            </div>
          </div>

          <table style="width: 100%; border-collapse: collapse; border: 2px solid #000; font-family: Arial, sans-serif; margin-top: 4px;">
            <thead>
              <tr style="background-color: #1e3a8a; color: #fff; font-weight: bold; text-align: center; font-size: 11.5px;">
                <th style="padding: 8px; width: 50px; border: 1px solid #000;">S. No.</th>
                <th style="padding: 8px; text-align: left; border: 1px solid #000;">Group Name</th>
                <th style="padding: 8px; width: 110px; border: 1px solid #000;">Year/Sem</th>
                <th style="padding: 8px; width: 130px; border: 1px solid #000;">Course Code</th>
                <th style="padding: 8px; width: 100px; border: 1px solid #000;">No of Copy</th>
              </tr>
            </thead>
            <tbody>
              ${blankCollectionRows}
            </tbody>
          </table>

          <div style="margin-top: 8px; font-size: 11px; font-weight: 900; text-transform: uppercase; color: #991b1b;">UFM Cases Record (If Any)</div>
          <table style="width: 100%; border-collapse: collapse; border: 2px solid #7f1d1d; font-family: Arial, sans-serif; margin-top: 2px;">
            <thead>
              <tr style="background-color: #7f1d1d; color: #fff; font-weight: bold; text-align: center; font-size: 11px;">
                <th style="padding: 6px; width: 45px; border: 1px solid #000;">S.No</th>
                <th style="padding: 6px; width: 120px; border: 1px solid #000;">Roll No</th>
                <th style="padding: 6px; width: 130px; border: 1px solid #000;">Enrollment No.</th>
                <th style="padding: 6px; text-align: left; border: 1px solid #000;">Student Name</th>
                <th style="padding: 6px; width: 150px; border: 1px solid #000;">Course Name/Course Code</th>
              </tr>
            </thead>
            <tbody>
              ${blankUfmRows}
            </tbody>
          </table>

          <div class="mt-3 p-2 border border-slate-300 rounded-lg bg-slate-50 text-[10px] font-semibold text-slate-800">
            <div><strong>Collection Note:</strong> Invigilators must fill Room No, Shift, Date, Group Name, Year/Sem, Course Code, No of Copies, and UFM records manually, and submit this signed sheet along with answer booklets to the Examination Control Room.</div>
          </div>

          <div class="mt-6 pt-1 flex justify-between items-end text-[11px] font-bold text-slate-900">
            <div>
              <div>Invigilator 1 Signature: ______________________</div>
              <div class="mt-1.5">Invigilator 2 Signature: ______________________</div>
            </div>
            <div class="text-center font-bold">
              Head Dept. of CSE<br>
              __________________________________<br>
              Received By (Examination Control Room)
            </div>
          </div>
        `;
        container.appendChild(page);

      } else {
        printArea.className = "max-w-6xl mx-auto min-h-screen bg-white landscape-view";
        document.body.className = "bg-slate-100 text-slate-900 min-h-screen";

        allocatedRooms.forEach(item => {
          const room = item.room;
          const page = document.createElement("div");
          page.className = "page-break mb-8";

          const halfCol = Math.floor(room.cols / 2);

          let tableRowsHtml = "";
          for (let r = 0; r < room.rows; r++) {
            tableRowsHtml += "<tr>";
            
            for (let c = 0; c < halfCol; c++) {
              const st = item.grid[r][c];
              const isDetained = isStudentDetained(st);
              let cohortShadowClass = '';
              if (st) {
                cohortShadowClass = st.isCohortB ? 'cohort-b-cell' : 'cohort-a-cell';
              }

              if (st) {
                tableRowsHtml += `
                  <td class="${cohortShadowClass} ${isDetained ? 'detained-cell' : ''}">
                    <div class="text-[9.5px] uppercase leading-tight truncate font-bold">${st.name}</div>
                    <div class="font-mono text-[10.5px] font-extrabold tracking-tight leading-tight">${st.enrollmentNo || st.rollNo}</div>
                  </td>
                `;
              } else {
                tableRowsHtml += `<td></td>`;
              }
            }

            tableRowsHtml += `<td class="matrix-aisle"></td>`;

            for (let c = halfCol; c < room.cols; c++) {
              const st = item.grid[r][c];
              const isDetained = isStudentDetained(st);
              let cohortShadowClass = '';
              if (st) {
                cohortShadowClass = st.isCohortB ? 'cohort-b-cell' : 'cohort-a-cell';
              }

              if (st) {
                tableRowsHtml += `
                  <td class="${cohortShadowClass} ${isDetained ? 'detained-cell' : ''}">
                    <div class="text-[9.5px] uppercase leading-tight truncate font-bold">${st.name}</div>
                    <div class="font-mono text-[10.5px] font-extrabold tracking-tight leading-tight">${st.enrollmentNo || st.rollNo}</div>
                  </td>
                `;
              } else {
                tableRowsHtml += `<td></td>`;
              }
            }

            tableRowsHtml += "</tr>";
          }

          const statsArray = Object.entries(item.stats);
          const midPoint = Math.ceil(statsArray.length / 2);
          const col1Stats = statsArray.slice(0, midPoint);
          const col2Stats = statsArray.slice(midPoint);

          page.innerHTML = `
            <div class="pro-header-container p-3 mb-2">
              <div class="flex justify-between items-center">
                <div class="space-y-0.5">
                  <div class="text-2xl font-black tracking-wide text-slate-950 uppercase font-serif leading-none">${uni}</div>
                  <div class="text-xs font-black text-slate-800 uppercase tracking-wide mt-1">${deptShift}</div>
                  <div class="text-[11px] font-bold text-indigo-900 uppercase tracking-tight">${exam} • ${session}</div>
                </div>
                <div class="flex items-center gap-3">
                  <div class="border-2 border-red-700 bg-red-50/70 px-3.5 py-1 rounded text-right shadow-sm">
                    <div class="text-[9.5px] font-bold text-red-700 leading-tight">INTEGRAL UNIVERSITY</div>
                    <div class="text-xs font-black text-red-800 uppercase tracking-tight">ACCREDITED BY NAAC A+</div>
                  </div>
                  <div class="bg-slate-900 text-white px-4 py-1.5 rounded text-center shadow-md">
                    <div class="text-sm font-black tracking-wide">${room.name} / ${room.block}</div>
                    <div class="text-[10px] font-bold text-slate-300">Capacity: ${room.capacity} Seats</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="w-full text-center my-1.5">
              <div class="inline-block text-xs font-black uppercase text-slate-950 tracking-widest px-8 pb-0.5 border-b-2 border-slate-900">
                Board / Stage (Front)
              </div>
            </div>

            <table class="matrix-table my-1">
              <tbody>${tableRowsHtml}</tbody>
            </table>

            <div class="mt-3 flex justify-end gap-16 text-xs font-bold text-slate-900 pr-4">
              <div class="space-y-0.5">
                ${col1Stats.map(([grp, cnt]) => `<div>${grp} (${cnt})</div>`).join('')}
              </div>
              <div class="space-y-0.5">
                ${col2Stats.map(([grp, cnt]) => `<div>${grp} (${cnt})</div>`).join('')}
              </div>
            </div>
          `;
          container.appendChild(page);
        });
      }
    }

    function switchReportFormat(format) {
      activeFormat = format;
      const btnList = document.getElementById("btnViewList");
      const btnMatrix = document.getElementById("btnViewMatrix");
      const btnAttendance = document.getElementById("btnViewAttendance");
      const btnCourseCodeAtt = document.getElementById("btnViewCourseCodeAttendance");
      const btnUnallotted = document.getElementById("btnViewUnallotted");
      const btnDetained = document.getElementById("btnViewDetained");
      const btnDetainedCont = document.getElementById("btnViewDetainedContinuous");
      const btnBlankAtt = document.getElementById("btnViewBlankAttendance");
      const btnCopyCol = document.getElementById("btnViewCopyCollection");
      const btnBlankCopyCol = document.getElementById("btnViewBlankCopyCollection");

      [btnList, btnMatrix, btnAttendance, btnCourseCodeAtt, btnUnallotted, btnDetained, btnDetainedCont, btnBlankAtt, btnCopyCol, btnBlankCopyCol].forEach(btn => {
        if(btn) btn.className = "px-3 py-1.5 rounded text-xs font-semibold bg-transparent text-slate-700 hover:bg-slate-200 transition";
      });

      if (format === 'roomWise') {
        btnList.className = "px-3 py-1.5 rounded text-xs font-bold bg-slate-900 text-white transition";
      } else if (format === 'matrix') {
        btnMatrix.className = "px-3 py-1.5 rounded text-xs font-bold bg-slate-900 text-white transition";
      } else if (format === 'attendance') {
        btnAttendance.className = "px-3 py-1.5 rounded text-xs font-bold bg-slate-900 text-white transition";
      } else if (format === 'courseCodeAttendance') {
        btnCourseCodeAtt.className = "px-3 py-1.5 rounded text-xs font-bold bg-indigo-800 text-white transition";
      } else if (format === 'unallotted') {
        btnUnallotted.className = "px-3 py-1.5 rounded text-xs font-bold bg-slate-900 text-white transition";
      } else if (format === 'detainedReport') {
        btnDetained.className = "px-3 py-1.5 rounded text-xs font-bold bg-red-900 text-white transition";
      } else if (format === 'detainedContinuous') {
        btnDetainedCont.className = "px-3 py-1.5 rounded text-xs font-bold bg-red-800 text-white transition";
      } else if (format === 'blankAttendance') {
        btnBlankAtt.className = "px-3 py-1.5 rounded text-xs font-bold bg-emerald-800 text-white transition";
      } else if (format === 'copyCollection') {
        btnCopyCol.className = "px-3 py-1.5 rounded text-xs font-bold bg-blue-900 text-white transition";
      } else if (format === 'blankCopyCollection') {
        btnBlankCopyCol.className = "px-3 py-1.5 rounded text-xs font-bold bg-blue-800 text-white transition";
      }

      if (activeFormat === 'blankAttendance' || activeFormat === 'copyCollection' || activeFormat === 'blankCopyCollection' || activeFormat === 'courseCodeAttendance' || allocatedRooms.length > 0 || unallottedStudents.length > 0) renderDocument();
    }

    function exportToWordDoc() {
      if (activeFormat !== 'blankAttendance' && activeFormat !== 'copyCollection' && activeFormat !== 'blankCopyCollection' && activeFormat !== 'courseCodeAttendance' && allocatedRooms.length === 0 && unallottedStudents.length === 0) {
        return alert("Please generate reports first before exporting to Word.");
      }

      const reportContent = document.getElementById("reportContainer").innerHTML;
      const isLandscape = (activeFormat === 'matrix');
      const pageOrientation = isLandscape ? 'landscape' : 'portrait';
      const pageSize = isLandscape ? '29.7cm 21.0cm' : '21.0cm 29.7cm';

      const wordHtml = `
        <html xmlns:o='urn:schemas-microsoft-com:office:office' 
              xmlns:w='urn:schemas-microsoft-com:office:word' 
              xmlns='http://www.w3.org/TR/REC-html40'>
        <head>
          <meta charset='utf-8'>
          <title>Examination Report</title>
          <!--[if gte mso 9]>
          <xml>
            <w:WordDocument>
              <w:View>Print</w:View>
              <w:Zoom>100</w:Zoom>
              <w:DoNotOptimizeForBrowser/>
            </w:WordDocument>
          </xml>
          <![endif]-->
          <style>
            @page Section1 {
              size: ${pageSize};
              mso-page-orientation: ${pageOrientation};
              margin: 1.0cm 1.0cm 1.0cm 1.0cm;
              mso-header-margin: 0.8cm;
              mso-footer-margin: 0.8cm;
            }
            div.Section1 {
              page: Section1;
            }
            body {
              font-family: Arial, sans-serif;
              font-size: 10pt;
            }
            .pro-header-container {
              border: 1.5pt solid #0f172a;
              padding: 6pt 10pt;
              margin-bottom: 8pt;
              background: #ffffff;
            }
            .pro-header-divider {
              height: 1.5pt;
              background: #0f172a;
              margin: 4pt 0;
            }
            table {
              width: 100%;
              border-collapse: collapse;
              margin-bottom: 12pt;
            }
            table, th, td {
              border: 1px solid black;
            }
            th, td {
              padding: 4px 6px;
              font-size: 9pt;
            }
            .header-cell {
              text-align: center;
              font-weight: bold;
            }
            .cohort-header {
              text-align: center;
              font-weight: bold;
              text-transform: uppercase;
              background-color: #f2f2f2;
            }
            .detained-row {
              background-color: #fee2e2 !important;
            }
            .detained-cell {
              background-color: #fca5a5 !important;
              color: #991b1b !important;
              font-weight: bold !important;
              text-decoration: line-through !important;
            }
            .cohort-a-cell {
              background-color: #ffffff !important;
            }
            .cohort-b-cell {
              background-color: #f1f5f9 !important;
            }
            .matrix-table td {
              text-align: center;
              font-size: 8.5pt;
              padding: 3px 2px;
            }
            .matrix-aisle {
              border-top: none !important;
              border-bottom: none !important;
              border-left: 1px solid black !important;
              border-right: 1px solid black !important;
              width: 25px;
            }
            .page-break {
              page-break-after: always;
              mso-special-character: line-break;
            }
          </style>
        </head>
        <body>
          <div class="Section1">
            ${reportContent}
          </div>
        </body>
        </html>
      `;

      const blob = new Blob(['\ufeff' + wordHtml], {
        type: 'application/msword;charset=utf-8'
      });

      const url = URL.createObjectURL(blob);
      const downloadLink = document.createElement("a");
      document.body.appendChild(downloadLink);

      let filename = "Exam_Report";
      if (activeFormat === 'roomWise') filename = "Room_Wise_Student_List.doc";
      else if (activeFormat === 'attendance') filename = "Room_Wise_Attendance_List.doc";
      else if (activeFormat === 'courseCodeAttendance') filename = "Course_Code_Attendance_List.doc";
      else if (activeFormat === 'matrix') filename = "Room_Wise_Seating_Matrix.doc";
      else if (activeFormat === 'unallotted') filename = "Unallotted_Students_List.doc";
      else if (activeFormat === 'detainedReport') filename = "Room_Wise_Detained_List.doc";
      else if (activeFormat === 'detainedContinuous') filename = "Continuous_Detained_List.doc";
      else if (activeFormat === 'blankAttendance') filename = "Blank_Attendance_Sheet.doc";
      else if (activeFormat === 'copyCollection') filename = "Exam_Copy_Collection_Sheet.doc";
      else if (activeFormat === 'blankCopyCollection') filename = "Blank_Copy_Collection_Sheet.doc";

      downloadLink.href = url;
      downloadLink.download = filename;
      downloadLink.click();
      document.body.removeChild(downloadLink);
      URL.revokeObjectURL(url);
    }

    // WordPress-Safe Isolation Printing Engine
    function safePrintReport() {
      if (activeFormat !== 'blankAttendance' && activeFormat !== 'copyCollection' && activeFormat !== 'blankCopyCollection' && activeFormat !== 'courseCodeAttendance' && allocatedRooms.length === 0 && unallottedStudents.length === 0) {
        return alert("⚠️ Please generate reports first before printing.");
      }

      const content = document.getElementById("reportContainer").innerHTML;
      const isLandscape = (activeFormat === 'matrix');
      const orientationCss = isLandscape ? 
        `@page { size: A4 landscape; margin: 6mm 10mm 6mm 10mm; }` : 
        `@page { size: A4 portrait; margin: 8mm 10mm 8mm 10mm; }`;

      const printWindow = window.open('', '_blank', 'width=1150,height=850');
      if (!printWindow) {
        window.print();
        return;
      }

      printWindow.document.open();
      printWindow.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
          <title>Print Examination Reports</title>
          <script src="https://cdn.tailwindcss.com"><\/script>
          <style>
            ${orientationCss}
            * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
            body { font-family: Arial, Helvetica, sans-serif; background: #fff; color: #000; margin: 0; padding: 0; }
            .page-break { page-break-after: always; break-after: page; display: block; clear: both; margin-bottom: 20px; }
            .pro-header-container { border: 2px solid #0f172a; border-radius: 4px; padding: 8px 12px; margin-bottom: 8px; background: #fff; }
            .pro-header-divider { height: 2px; background: #0f172a; margin: 6px 0; }
            .report-table { width: 100%; border-collapse: collapse; border: 2px solid #0f172a; }
            .report-table th, .report-table td { border: 1px solid #334155; padding: 3px 5px; font-size: 11px; line-height: 1.2; }
            .cohort-header { border: 1.5px solid #0f172a; text-align: center; font-weight: bold; font-size: 12px; padding: 4px; text-transform: uppercase; background: #f1f5f9; }
            .matrix-table { width: 100%; table-layout: fixed; border-collapse: collapse; border: 2px solid #0f172a; }
            .matrix-table td { border: 1px solid #334155; padding: 2px; font-size: 10.5px; text-align: center; height: 34px; vertical-align: middle; }
            .matrix-aisle { border-top: none !important; border-bottom: none !important; border-left: 2px solid #0f172a !important; border-right: 2px solid #0f172a !important; width: 30px !important; background: #f8fafc; }
            .detained-row { background-color: #fee2e2 !important; }
            .detained-cell { background-color: #fca5a5 !important; color: #991b1b !important; font-weight: bold !important; text-decoration: line-through !important; }
            .cohort-a-cell { background-color: #ffffff !important; }
            .cohort-b-cell { background-color: #f1f5f9 !important; }
          </style>
        </head>
        <body onload="setTimeout(function(){ window.print(); window.close(); }, 400);">
          <div style="padding: 10px;">
            ${content}
          </div>
        </body>
        </html>
      `);
      printWindow.document.close();
    }

    function parseUploadedFile(file, callback) {
      const reader = new FileReader();
      if (file.name.endsWith('.csv')) {
        reader.onload = e => {
          const res = Papa.parse(e.target.result, { header: true, skipEmptyLines: true });
          callback(mapData(res.data));
        };
        reader.readAsText(file);
      } else {
        reader.onload = e => {
          const data = new Uint8Array(e.target.result);
          const workbook = XLSX.read(data, { type: 'array' });
          const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
          const json = XLSX.utils.sheet_to_json(firstSheet);
          callback(mapData(json));
        };
        reader.readAsArrayBuffer(file);
      }
    }

    function parseCourseMappingFile(file) {
      const reader = new FileReader();
      const processMapping = (data) => {
        courseNameMapping.clear();
        data.forEach(item => {
          const code = getField(item, ["coursecode", "subjectcode", "code", "subcode"]);
          const name = getField(item, ["coursename", "subjectname", "name", "subname", "title"]);
          const normCode = String(code || "").trim().toUpperCase();
          const normName = String(name || "").trim().toUpperCase();
          if (normCode !== "") {
            courseNameMapping.set(normCode, normName);
          }
        });
        document.getElementById("badgeCountMapping").innerText = `${courseNameMapping.size} Mapped`;
      };

      if (file.name.endsWith('.csv')) {
        reader.onload = e => {
          const res = Papa.parse(e.target.result, { header: true, skipEmptyLines: true });
          processMapping(res.data);
        };
        reader.readAsText(file);
      } else {
        reader.onload = e => {
          const data = new Uint8Array(e.target.result);
          const workbook = XLSX.read(data, { type: 'array' });
          const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
          const json = XLSX.utils.sheet_to_json(firstSheet);
          processMapping(json);
        };
        reader.readAsArrayBuffer(file);
      }
    }

    function parseUploadedRoomFile(file) {
      const reader = new FileReader();
      const processRooms = (data) => {
        const parsed = data.map(item => {
          const name = getField(item, ["roomno", "room", "roomnumber", "room_no", "roomname"]);
          const block = getField(item, ["block", "blockname", "building"], "BNLT BLOCK");
          let rows = parseInt(getField(item, ["rows", "row", "depth", "totalrows"])) || 0;
          let cols = parseInt(getField(item, ["columns", "cols", "col", "width", "totalcols"])) || 0;
          let cap = parseInt(getField(item, ["capacity", "cap", "totalseats", "totalcapacity"])) || 0;

          if (rows > 0 && cols > 0 && cap === 0) {
            cap = rows * cols;
          } else if (cap > 0 && rows === 0 && cols === 0) {
            cols = 6;
            rows = Math.ceil(cap / cols);
            cap = rows * cols;
          } else if (rows === 0 && cols === 0 && cap === 0) {
            rows = 8;
            cols = 6;
            cap = 48;
          }

          const subCap = parseInt(getField(item, ["subcap", "persectioncap", "perslotcap"])) || Math.floor(cap / 2);

          return {
            name: String(name || "").trim(),
            block: String(block || "").trim(),
            rows: rows,
            cols: cols,
            capacity: cap,
            subCap: subCap
          };
        }).filter(r => r.name !== "");

        if (parsed.length > 0) {
          roomRoster = parsed;
          renderRoomBadges();
          alert(`Successfully loaded ${parsed.length} rooms from Excel.`);
        } else {
          alert("No valid room rows found in the uploaded file.");
        }
      };

      if (file.name.endsWith('.csv')) {
        reader.onload = e => {
          const res = Papa.parse(e.target.result, { header: true, skipEmptyLines: true });
          processRooms(res.data);
        };
        reader.readAsText(file);
      } else {
        reader.onload = e => {
          const data = new Uint8Array(e.target.result);
          const workbook = XLSX.read(data, { type: 'array' });
          const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
          const json = XLSX.utils.sheet_to_json(firstSheet);
          processRooms(json);
        };
        reader.readAsArrayBuffer(file);
      }
    }

    function mapData(arr) {
      return arr.map((item, idx) => {
        const roll = getField(item, ["rollno", "roll", "rollnumber", "roll_no", "roll no"]);
        const enroll = getField(item, ["enrollmentno", "enrollment", "enrollno", "enroll", "enroll_no", "enrolment no", "enrolmentno"], `250010${1000 + idx}`);
        const name = getField(item, ["studentname", "name", "student_name", "student name"], `STUDENT ${idx+1}`);
        const group = getField(item, ["group", "section", "branch", "groupname"], "CSE-A");

        const subjects = [];
        Object.keys(item).forEach(colKey => {
          const colClean = colKey.toLowerCase().replace(/[^a-z0-9]/g, '');
          if (colClean.startsWith('sub') || colClean.startsWith('subject') || colClean.startsWith('course')) {
            const val = String(item[colKey] || '').trim();
            if (val && val.toLowerCase() !== 'nan') {
              val.split(',').forEach(s => {
                const cleanSub = s.trim();
                if (cleanSub) subjects.push(cleanSub);
              });
            }
          }
        });

        return {
          rollNo: String(roll || "").trim(),
          enrollmentNo: normalizeEnroll(enroll),
          name: String(name || "").trim().toUpperCase(),
          group: String(group || "").trim(),
          subjects: subjects
        };
      });
    }

    document.getElementById("fileRooms").addEventListener("change", function(e) {
      if (e.target.files[0]) {
        parseUploadedRoomFile(e.target.files[0]);
      }
    });

    document.getElementById("fileA").addEventListener("change", function(e) {
      if (e.target.files[0]) {
        parseUploadedFile(e.target.files[0], res => {
          datasetA = res;
          document.getElementById("badgeCountA").innerText = datasetA.length;
          updateTopDashboard();
        });
      }
    });

    document.getElementById("fileB").addEventListener("change", function(e) {
      if (e.target.files[0]) {
        parseUploadedFile(e.target.files[0], res => {
          datasetB = res;
          document.getElementById("badgeCountB").innerText = datasetB.length;
          updateTopDashboard();
        });
      }
    });

    document.getElementById("fileMapping").addEventListener("change", function(e) {
      if (e.target.files[0]) {
        parseCourseMappingFile(e.target.files[0]);
      }
    });

    // STRICT UNIQUE COUNT FILTER FOR DETAINED LIST
    document.getElementById("fileDetained").addEventListener("change", function(e) {
      const file = e.target.files[0];
      if (!file) return;
      const reader = new FileReader();
      
      const processDetainedData = (data) => {
        detainedSet.clear();
        data.forEach(item => {
          const enroll = getField(item, ["enrollmentno", "enrollment", "enrollno", "enroll", "enroll_no", "enrolment no", "enrolmentno"]);
          const roll = getField(item, ["rollno", "roll", "rollnumber", "roll_no", "roll no"]);
          
          const normE = normalizeEnroll(enroll);
          const normR = normalizeEnroll(roll);

          if (normE !== "" && normE !== "UNDEFINED" && normE !== "NULL" && normE !== "NAN") {
            detainedSet.add(normE);
          } else if (normR !== "" && normR !== "UNDEFINED" && normR !== "NULL" && normR !== "NAN") {
            detainedSet.add(normR);
          }
        });
        document.getElementById("badgeCountDetained").innerText = `${detainedSet.size}`;
        updateTopDashboard();
        if (allocatedRooms.length > 0) renderDocument();
      };

      if (file.name.endsWith('.csv')) {
        reader.onload = ev => {
          const res = Papa.parse(ev.target.result, { header: true, skipEmptyLines: true });
          processDetainedData(res.data);
        };
        reader.readAsText(file);
      } else {
        reader.onload = ev => {
          const data = new Uint8Array(ev.target.result);
          const workbook = XLSX.read(data, { type: 'array' });
          const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
          const json = XLSX.utils.sheet_to_json(firstSheet);
          processDetainedData(json);
        };
        reader.readAsArrayBuffer(file);
      }
    });

    // FINAL INITIALIZATION CALL
    renderRoomBadges();
  </script>
</body>
</html>				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		<p>The post <a href="https://gyanxp.com/iul/">iul</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://gyanxp.com/iul/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Online IoT Practical Solution (PR4)</title>
		<link>https://gyanxp.com/online-iot-practical-solution-pr4/</link>
					<comments>https://gyanxp.com/online-iot-practical-solution-pr4/#respond</comments>
		
		<dc:creator><![CDATA[Balmukund Maurya]]></dc:creator>
		<pubDate>Mon, 17 Aug 2026 14:11:08 +0000</pubDate>
				<category><![CDATA[Online Practical]]></category>
		<guid isPermaLink="false">https://gyanxp.com/?p=6236</guid>

					<description><![CDATA[<p>O Level IoT Practical Solutions (M4-R5) Practice NIELIT IoT practical exam problems with Arduino source code and verified Wokwi diagram configurations! 🔌 IoT Practical Completion Progress 0 / 0 Practiced (0%) 📑 Practical Index ◀ ▶</p>
<p>The post <a href="https://gyanxp.com/online-iot-practical-solution-pr4/">Online IoT Practical Solution (PR4)</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="6236" class="elementor elementor-6236">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-4c83e89 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4c83e89" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4749882" data-id="4749882" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-818ded4 elementor-widget elementor-widget-html" data-id="818ded4" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<!-- Google Fonts & Prism.js Syntax Highlighting -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />

<style>
  :root {
    --gyanxp-orange: #ff6600;
    --gyanxp-orange-hover: #e65c00;
    --gyanxp-dark: #1f2421;
    --gyanxp-accent-blue: #007bff;
    --gyanxp-bg: #f8f9fa;
    --gyanxp-card-bg: #ffffff;
    --gyanxp-danger: #dc3545;
    --gyanxp-success: #28a745;
  }

  .gyanxp-full-page,
  .gyanxp-full-page * {
    box-sizing: border-box !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  .gyanxp-full-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: clamp(10px, 2vw, 24px) !important;
    background-color: var(--gyanxp-bg);
  }

  .gyanxp-page-header {
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    background: linear-gradient(135deg, var(--gyanxp-dark) 0%, #2c302e 100%) !important;
    color: #ffffff !important;
    padding: clamp(16px, 2.5vw, 24px) clamp(18px, 3vw, 30px) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #2c302e !important;
    border-left: 6px solid var(--gyanxp-orange) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .gyanxp-page-header h1 {
    margin: 0 !important;
    font-size: clamp(20px, 2.8vw, 28px) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
  }

  .gyanxp-page-header p {
    margin: 0 !important;
    font-size: clamp(13px, 1.8vw, 15px) !important;
    color: #d1d5db !important;
  }

  .progress-widget {
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    background: var(--gyanxp-card-bg) !important;
    padding: clamp(16px, 2vw, 20px) clamp(18px, 3vw, 30px) !important;
    border-radius: 12px !important;
    border: 1px solid #e9ecef !important;
    border-left: 6px solid var(--gyanxp-orange) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  }

  .progress-info {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    margin-bottom: 12px !important;
  }

  .progress-title {
    font-size: clamp(13.5px, 2vw, 15px) !important;
    font-weight: 600 !important;
    color: var(--gyanxp-dark) !important;
  }

  .progress-counter-badge {
    font-size: clamp(12px, 1.8vw, 13.5px) !important;
    font-weight: 600 !important;
    color: var(--gyanxp-orange) !important;
    background: #fff0e6 !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 102, 0, 0.2) !important;
  }

  .progress-bar-bg {
    width: 100% !important;
    height: 10px !important;
    background: #e9ecef !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .progress-bar-fill {
    height: 100% !important;
    width: 0% !important;
    background: linear-gradient(90deg, var(--gyanxp-orange), #ff9933) !important;
    transition: width 0.4s ease-in-out !important;
  }

  .practical-layout {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 320px 1fr !important;
    gap: 20px !important;
    align-items: start !important;
  }

  .program-sidebar {
    width: 100% !important;
    background: var(--gyanxp-card-bg);
    border-radius: 12px;
    padding: 18px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 15px;
    border: 1px solid #e9ecef;
  }

  .sidebar-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--gyanxp-orange);
  }

  .sidebar-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--gyanxp-dark);
    margin: 0;
  }

  .sidebar-scroll-wrapper { 
    position: relative; 
    width: 100%; 
  }

  .frame-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }

  .frame-arrow:hover {
    background: rgba(255, 102, 0, 0.85);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(255, 102, 0, 0.3);
  }

  .frame-arrow-left { left: 4px; }
  .frame-arrow-right { right: 4px; }

  .program-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding-right: 4px;
    scroll-behavior: smooth;
  }

  .nav-btn {
    width: 100%;
    text-align: left;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 12px 18px;
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gyanxp-dark);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
    gap: 10px;
  }

  .nav-btn:hover { background: #fff0e6; color: var(--gyanxp-orange); border-color: var(--gyanxp-orange); }
  .nav-btn.active { background: var(--gyanxp-orange); color: #ffffff; border-color: var(--gyanxp-orange); box-shadow: 0 3px 8px rgba(255, 102, 0, 0.25); }

  .program-workspace {
    width: 100% !important;
    background: var(--gyanxp-card-bg);
    border-radius: 12px;
    padding: clamp(18px, 2.5vw, 30px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid #e9ecef;
    min-width: 0;
  }

  .program-content { display: none; }
  .program-content.active { display: block; }

  .meta-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
  .badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; }
  .badge-tag { background: #fff0e6; color: var(--gyanxp-orange); }
  .badge-easy { background: #e6f4ea; color: #137333; }
  .badge-medium { background: #fef7e0; color: #b06000; }
  .badge-hard { background: #fce8e6; color: #c5221f; }
  .badge-marks { background: #e8f0fe; color: #1a73e8; }

  .question-title { font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; color: var(--gyanxp-dark); margin: 0 0 12px 0; }
  .question-desc { font-size: clamp(13px, 1.8vw, 14px); color: #555; line-height: 1.6; margin-bottom: 18px; background: #fffcf9; padding: 14px 16px; border-radius: 8px; border-left: 4px solid var(--gyanxp-orange); }

  .timer-box { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    background: #f1f3f5; 
    padding: 10px 16px; 
    border-radius: 8px; 
    margin-bottom: 18px; 
    font-size: 13.5px; 
    font-weight: 600; 
    flex-wrap: wrap; 
    gap: 10px; 
  }
  .timer-controls { display: inline-flex; align-items: center; gap: 8px; }
  .timer-display { font-family: monospace; font-size: 15px; color: var(--gyanxp-orange); background: #ffffff; padding: 4px 10px; border-radius: 4px; border: 1px solid #ced4da; }
  .timer-btn { background: var(--gyanxp-dark); color: #fff; border: none; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 12.5px; }

  .code-header { margin-bottom: 6px; }
  .code-section-title { font-size: 14px; font-weight: 600; color: var(--gyanxp-dark); }

  .code-container {
    position: relative;
    margin: 0 0 18px 0;
  }

  .floating-copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .floating-copy-btn:hover {
    background: var(--gyanxp-orange);
    color: #ffffff;
    border-color: var(--gyanxp-orange);
    box-shadow: 0 2px 8px rgba(255, 102, 0, 0.4);
  }

  .program-workspace pre { 
    border-radius: 8px; 
    margin: 0 !important; 
    font-size: 13.5px; 
    max-height: 400px; 
    overflow: auto; 
    padding-top: 40px !important;
  }

  .btn-group { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
  .btn-action { 
    border: none; 
    height: 40px;
    padding: 0 18px; 
    font-size: 13px; 
    font-weight: 600; 
    border-radius: 6px; 
    cursor: pointer; 
    transition: all 0.2s ease; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    gap: 6px; 
  }
  .try-code-btn { background-color: var(--gyanxp-orange); color: #ffffff; }
  .try-code-btn:hover { background-color: var(--gyanxp-orange-hover); }
  
  .circuit-btn { background-color: var(--gyanxp-accent-blue); color: #ffffff; }
  .circuit-btn:hover { background-color: #0069d9; }

  .complete-btn { background-color: #e9ecef; color: var(--gyanxp-dark); }
  .complete-btn.done { background-color: var(--gyanxp-success); color: #ffffff; }

  .accordion-box { margin-bottom: 18px; border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden; }
  .accordion-header { background: #f8f9fa; padding: 12px 16px; font-size: 13.5px; font-weight: 600; color: var(--gyanxp-dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
  .accordion-body { display: none; padding: 14px 16px; font-size: 13.5px; color: #444; line-height: 1.6; background: #ffffff; border-top: 1px solid #e9ecef; }

  .pagination-group { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 18px; border-top: 1px dashed #e9ecef; gap: 10px; }
  .btn-page { 
    height: 40px;
    padding: 0 20px; 
    background-color: #f1f3f5; 
    color: var(--gyanxp-dark); 
    border: 1px solid #ced4da; 
    font-size: 13px; 
    font-weight: 600; 
    border-radius: 6px; 
    cursor: pointer; 
  }
  .btn-page:hover:not(:disabled) { background-color: var(--gyanxp-orange); color: #ffffff; border-color: var(--gyanxp-orange); }
  .btn-page:disabled { opacity: 0.4; cursor: not-allowed; }

  @media (max-width: 992px) {
    .practical-layout { grid-template-columns: 100% !important; }
    .program-list { 
      flex-direction: row; 
      overflow-x: auto; 
      max-height: none; 
      padding: 4px 42px; 
      scrollbar-width: none;
    }
    .program-list::-webkit-scrollbar { display: none; }
    .nav-btn { white-space: nowrap; width: auto; }
    .btn-group { display: grid; grid-template-columns: 1fr; }
    .frame-arrow { display: flex; }
  }
</style>

<div class="gyanxp-full-page">
  <div class="gyanxp-page-header">
    <h1>O Level IoT Practical Solutions (M4-R5)</h1>
    <p>Practice NIELIT IoT practical exam problems with Arduino source code and verified Wokwi diagram configurations!</p>
  </div>

  <div class="progress-widget">
    <div class="progress-info">
      <span class="progress-title">🔌 IoT Practical Completion Progress</span>
      <span class="progress-counter-badge" id="progress-text">0 / 0 Practiced (0%)</span>
    </div>
    <div class="progress-bar-bg">
      <div class="progress-bar-fill" id="progress-fill"></div>
    </div>
  </div>

  <div class="practical-layout">
    <div class="program-sidebar">
      <div class="sidebar-header-wrapper">
        <div class="sidebar-title" id="sidebar-main-title">📑 Practical Index</div>
      </div>
      <div class="sidebar-scroll-wrapper">
        <button class="frame-arrow frame-arrow-left" onclick="scrollIndexSidebar(-120)" title="Scroll Left">◀</button>
        <div class="program-list" id="sidebar-list"></div>
        <button class="frame-arrow frame-arrow-right" onclick="scrollIndexSidebar(120)" title="Scroll Right">▶</button>
      </div>
    </div>

    <div class="program-workspace" id="workspace-container"></div>
  </div>
</div>

<!-- Prism.js Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-c.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-cpp.min.js"></script>

<script>
  var programsData = [
    {
      id: 1,
      title: "Q1. Blink an LED with 1-Second Interval using Arduino",
      problem: "Write an Arduino C program to blink an onboard LED connected to pin 13 with a delay of 1000ms (1 second).",
      difficulty: "Easy",
      marks: 10,
      timerMins: 5,
      explanation: "Configure pin 13 as OUTPUT using pinMode(). Alternate pin voltage using digitalWrite() with delay(1000).",
      code: `void setup() {\n  pinMode(13, OUTPUT);\n}\n\nvoid loop() {\n  digitalWrite(13, HIGH);\n  delay(1000);\n  digitalWrite(13, LOW);\n  delay(1000);\n}`,
      diagramJson: `{\n  "version": 1,\n  "author": "GyanXp",\n  "editor": "wokwi",\n  "parts": [\n    { "type": "wokwi-arduino-uno", "id": "uno", "top": 0, "left": 0, "attrs": {} },\n    { "type": "wokwi-led", "id": "led1", "top": -96, "left": 147, "attrs": { "color": "red" } },\n    { "type": "wokwi-resistor", "id": "r1", "top": -38, "left": 144, "attrs": { "value": "220" } }\n  ],\n  "connections": [\n    [ "uno:13", "r1:1", "green", [ "v0" ] ],\n    [ "r1:2", "led1:A", "green", [ "v0" ] ],\n    [ "uno:GND.1", "led1:C", "black", [ "v0" ] ]\n  ]\n}`
    },
    {
      id: 2,
      title: "Q2. Read DHT11 Temperature & Humidity Data",
      problem: "Write an IoT program to interface a DHT11 sensor with Arduino and display temperature/humidity on Serial Monitor.",
      difficulty: "Medium",
      marks: 15,
      timerMins: 8,
      explanation: "Include DHT.h library, initialize sensor pin 2, and call readTemperature() and readHumidity() functions.",
      code: `#include "DHT.h"\n#define DHTPIN 2\n#define DHTTYPE DHT11\n\nDHT dht(DHTPIN, DHTTYPE);\n\nvoid setup() {\n  Serial.begin(9600);\n  dht.begin();\n}\n\nvoid loop() {\n  float h = dht.readHumidity();\n  float t = dht.readTemperature();\n  Serial.print("Humidity: ");\n  Serial.print(h);\n  Serial.print("%  Temp: ");\n  Serial.print(t);\n  Serial.println("°C");\n  delay(2000);\n}`,
      diagramJson: `{\n  "version": 1,\n  "author": "GyanXp",\n  "editor": "wokwi",\n  "parts": [\n    { "type": "wokwi-arduino-uno", "id": "uno", "top": 0, "left": 0, "attrs": {} },\n    { "type": "wokwi-dht11", "id": "dht1", "top": -100, "left": 120, "attrs": {} }\n  ],\n  "connections": [\n    [ "uno:5V", "dht1:VCC", "red", [ "v0" ] ],\n    [ "uno:GND.1", "dht1:GND", "black", [ "v0" ] ],\n    [ "uno:2", "dht1:SDA", "blue", [ "v0" ] ]\n  ]\n}`
    },
    {
      id: 3,
      title: "Q3. Control LED via Push Button Switch",
      problem: "Write a program to turn ON an LED when a push button is pressed and OFF when released.",
      difficulty: "Easy",
      marks: 10,
      timerMins: 6,
      explanation: "Use INPUT_PULLUP on pin 2 to handle push button input, driving pin 13 high when pin 2 reads LOW.",
      code: `const int buttonPin = 2;\nconst int ledPin = 13;\n\nvoid setup() {\n  pinMode(ledPin, OUTPUT);\n  pinMode(buttonPin, INPUT_PULLUP);\n}\n\nvoid loop() {\n  int buttonState = digitalRead(buttonPin);\n  if (buttonState == LOW) {\n    digitalWrite(ledPin, HIGH);\n  } else {\n    digitalWrite(ledPin, LOW);\n  }\n}`,
      diagramJson: `{\n  "version": 1,\n  "author": "GyanXp",\n  "editor": "wokwi",\n  "parts": [\n    { "type": "wokwi-arduino-uno", "id": "uno", "top": 0, "left": 0, "attrs": {} },\n    { "type": "wokwi-pushbutton", "id": "btn1", "top": -80, "left": 100, "attrs": { "color": "green" } },\n    { "type": "wokwi-led", "id": "led1", "top": -80, "left": 200, "attrs": { "color": "red" } }\n  ],\n  "connections": [\n    [ "uno:2", "btn1:1.M", "blue", [ "v0" ] ],\n    [ "uno:GND.1", "btn1:2.M", "black", [ "v0" ] ],\n    [ "uno:13", "led1:A", "green", [ "v0" ] ],\n    [ "uno:GND.2", "led1:C", "black", [ "v0" ] ]\n  ]\n}`
    },
    {
      id: 4,
      title: "Q4. Measure Distance using HC-SR04 Ultrasonic Sensor",
      problem: "Interface HC-SR04 ultrasonic distance sensor with Arduino and output calculated distance in centimeters.",
      difficulty: "Medium",
      marks: 15,
      timerMins: 10,
      explanation: "Send 10us trigger pulse on pin 9, then use pulseIn() on pin 10 to measure return echo pulse.",
      code: `const int trigPin = 9;\nconst int echoPin = 10;\n\nvoid setup() {\n  Serial.begin(9600);\n  pinMode(trigPin, OUTPUT);\n  pinMode(echoPin, INPUT);\n}\n\nvoid loop() {\n  digitalWrite(trigPin, LOW);\n  delayMicroseconds(2);\n  digitalWrite(trigPin, HIGH);\n  delayMicroseconds(10);\n  digitalWrite(trigPin, LOW);\n\n  long duration = pulseIn(echoPin, HIGH);\n  float distance = duration * 0.034 / 2;\n  Serial.print("Distance: ");\n  Serial.print(distance);\n  Serial.println(" cm");\n  delay(500);\n}`,
      diagramJson: `{\n  "version": 1,\n  "author": "GyanXp",\n  "editor": "wokwi",\n  "parts": [\n    { "type": "wokwi-arduino-uno", "id": "uno", "top": 0, "left": 0, "attrs": {} },\n    { "type": "wokwi-hc-sr04", "id": "hc1", "top": -120, "left": 120, "attrs": {} }\n  ],\n  "connections": [\n    [ "uno:5V", "hc1:VCC", "red", [ "v0" ] ],\n    [ "uno:GND.1", "hc1:GND", "black", [ "v0" ] ],\n    [ "uno:9", "hc1:TRIG", "orange", [ "v0" ] ],\n    [ "uno:10", "hc1:ECHO", "green", [ "v0" ] ]\n  ]\n}`
    },
    {
      id: 5,
      title: "Q5. Analog Sensor Reading & Serial Output",
      problem: "Read continuous voltage changes from a Potentiometer connected to analog pin A0.",
      difficulty: "Easy",
      marks: 10,
      timerMins: 5,
      explanation: "Read raw voltage levels between 0 and 1023 using analogRead(A0) and scale to voltage.",
      code: `const int sensorPin = A0;\n\nvoid setup() {\n  Serial.begin(9600);\n}\n\nvoid loop() {\n  int sensorValue = analogRead(sensorPin);\n  float voltage = sensorValue * (5.0 / 1023.0);\n  Serial.print("Raw Value: ");\n  Serial.print(sensorValue);\n  Serial.print(" | Voltage: ");\n  Serial.println(voltage);\n  delay(500);\n}`,
      diagramJson: `{\n  "version": 1,\n  "author": "GyanXp",\n  "editor": "wokwi",\n  "parts": [\n    { "type": "wokwi-arduino-uno", "id": "uno", "top": 0, "left": 0, "attrs": {} },\n    { "type": "wokwi-potentiometer", "id": "pot1", "top": -100, "left": 100, "attrs": {} }\n  ],\n  "connections": [\n    [ "uno:5V", "pot1:VCC", "red", [ "v0" ] ],\n    [ "uno:GND.1", "pot1:GND", "black", [ "v0" ] ],\n    [ "uno:A0", "pot1:SIG", "blue", [ "v0" ] ]\n  ]\n}`
    },
    {
      id: 6,
      title: "Q6. Traffic Light System Controller",
      problem: "Simulate a traffic light sequence with Red (5s), Yellow (2s), and Green (5s) LEDs.",
      difficulty: "Easy",
      marks: 10,
      timerMins: 8,
      explanation: "Sequential control of 3 LEDs on Digital Pins 11, 12, and 13 using predefined delays.",
      code: `const int red = 13, yellow = 12, green = 11;\n\nvoid setup() {\n  pinMode(red, OUTPUT);\n  pinMode(yellow, OUTPUT);\n  pinMode(green, OUTPUT);\n}\n\nvoid loop() {\n  digitalWrite(red, HIGH);\n  digitalWrite(yellow, LOW);\n  digitalWrite(green, LOW);\n  delay(5000);\n\n  digitalWrite(red, LOW);\n  digitalWrite(yellow, HIGH);\n  delay(2000);\n\n  digitalWrite(yellow, LOW);\n  digitalWrite(green, HIGH);\n  delay(5000);\n}`,
      diagramJson: `{\n  "version": 1,\n  "author": "GyanXp",\n  "editor": "wokwi",\n  "parts": [\n    { "type": "wokwi-arduino-uno", "id": "uno", "top": 0, "left": 0, "attrs": {} },\n    { "type": "wokwi-led", "id": "ledR", "top": -120, "left": 100, "attrs": { "color": "red" } },\n    { "type": "wokwi-led", "id": "ledY", "top": -120, "left": 160, "attrs": { "color": "yellow" } },\n    { "type": "wokwi-led", "id": "ledG", "top": -120, "left": 220, "attrs": { "color": "green" } }\n  ],\n  "connections": [\n    [ "uno:13", "ledR:A", "red", [ "v0" ] ],\n    [ "uno:12", "ledY:A", "gold", [ "v0" ] ],\n    [ "uno:11", "ledG:A", "green", [ "v0" ] ],\n    [ "uno:GND.1", "ledR:C", "black", [ "v0" ] ],\n    [ "uno:GND.1", "ledY:C", "black", [ "v0" ] ],\n    [ "uno:GND.1", "ledG:C", "black", [ "v0" ] ]\n  ]\n}`
    },
    {
      id: 7,
      title: "Q7. PIR Motion Detection Alarm with Buzzer",
      problem: "Interface PIR Motion Sensor to trigger a Piezo Buzzer whenever movement is detected.",
      difficulty: "Medium",
      marks: 15,
      timerMins: 8,
      explanation: "Read high signal from PIR output pin on Digital Pin 2 and activate tone on Pin 8.",
      code: `const int pirPin = 2;\nconst int buzzerPin = 8;\n\nvoid setup() {\n  pinMode(pirPin, INPUT);\n  pinMode(buzzerPin, OUTPUT);\n  Serial.begin(9600);\n}\n\nvoid loop() {\n  int motion = digitalRead(pirPin);\n  if (motion == HIGH) {\n    Serial.println("Motion Detected!");\n    tone(buzzerPin, 1000);\n    delay(500);\n  } else {\n    noTone(buzzerPin);\n  }\n}`,
      diagramJson: `{\n  "version": 1,\n  "author": "GyanXp",\n  "editor": "wokwi",\n  "parts": [\n    { "type": "wokwi-arduino-uno", "id": "uno", "top": 0, "left": 0, "attrs": {} },\n    { "type": "wokwi-pir-motion-sensor", "id": "pir1", "top": -140, "left": 80, "attrs": {} },\n    { "type": "wokwi-buzzer", "id": "bz1", "top": -100, "left": 240, "attrs": {} }\n  ],\n  "connections": [\n    [ "uno:5V", "pir1:VCC", "red", [ "v0" ] ],\n    [ "uno:GND.1", "pir1:GND", "black", [ "v0" ] ],\n    [ "uno:2", "pir1:OUT", "purple", [ "v0" ] ],\n    [ "uno:8", "bz1:1", "orange", [ "v0" ] ],\n    [ "uno:GND.2", "bz1:2", "black", [ "v0" ] ]\n  ]\n}`
    },
    {
      id: 8,
      title: "Q8. Servo Motor Angle Control with Potentiometer",
      problem: "Rotate a Servo motor continuously between 0 to 180 degrees using Potentiometer input.",
      difficulty: "Medium",
      marks: 15,
      timerMins: 10,
      explanation: "Map analog value 0-1023 to degree range 0-180 and output angle with Servo.h library.",
      code: `#include <Servo.h>\n\nServo myServo;\nint potPin = A0;\n\nvoid setup() {\n  myServo.attach(9);\n}\n\nvoid loop() {\n  int val = analogRead(potPin);\n  int angle = map(val, 0, 1023, 0, 180);\n  myServo.write(angle);\n  delay(15);\n}`,
      diagramJson: `{\n  "version": 1,\n  "author": "GyanXp",\n  "editor": "wokwi",\n  "parts": [\n    { "type": "wokwi-arduino-uno", "id": "uno", "top": 0, "left": 0, "attrs": {} },\n    { "type": "wokwi-servo", "id": "servo1", "top": -120, "left": 180, "attrs": {} },\n    { "type": "wokwi-potentiometer", "id": "pot1", "top": -80, "left": 60, "attrs": {} }\n  ],\n  "connections": [\n    [ "uno:5V", "servo1:V+", "red", [ "v0" ] ],\n    [ "uno:GND.1", "servo1:GND", "black", [ "v0" ] ],\n    [ "uno:9", "servo1:PWM", "orange", [ "v0" ] ],\n    [ "uno:5V", "pot1:VCC", "red", [ "v0" ] ],\n    [ "uno:GND.2", "pot1:GND", "black", [ "v0" ] ],\n    [ "uno:A0", "pot1:SIG", "blue", [ "v0" ] ]\n  ]\n}`
    },
    {
      id: 9,
      title: "Q9. Display Custom Text on 16x2 LCD Display",
      problem: "Display 'GyanXp IoT' on line 1 and 'NIELIT O Level' on line 2 using I2C LCD Display.",
      difficulty: "Medium",
      marks: 15,
      timerMins: 10,
      explanation: "Initialize LiquidCrystal_I2C at 0x27 address, print text using setCursor() methods.",
      code: `#include <LiquidCrystal_I2C.h>\n\nLiquidCrystal_I2C lcd(0x27, 16, 2);\n\nvoid setup() {\n  lcd.init();\n  lcd.backlight();\n  lcd.setCursor(0, 0);\n  lcd.print("GyanXp IoT");\n  lcd.setCursor(0, 1);\n  lcd.print("NIELIT O Level");\n}\n\nvoid loop() {}`,
      diagramJson: `{\n  "version": 1,\n  "author": "GyanXp",\n  "editor": "wokwi",\n  "parts": [\n    { "type": "wokwi-arduino-uno", "id": "uno", "top": 0, "left": 0, "attrs": {} },\n    { "type": "wokwi-lcd1602", "id": "lcd1", "top": -160, "left": 100, "attrs": { "pins": "i2c" } }\n  ],\n  "connections": [\n    [ "uno:5V", "lcd1:VCC", "red", [ "v0" ] ],\n    [ "uno:GND.1", "lcd1:GND", "black", [ "v0" ] ],\n    [ "uno:A4", "lcd1:SDA", "blue", [ "v0" ] ],\n    [ "uno:A5", "lcd1:SCL", "yellow", [ "v0" ] ]\n  ]\n}`
    },
    {
      id: 10,
      title: "Q10. LED Brightness Control using PWM Signal",
      problem: "Fade an LED in and out smoothly using PWM signal generation on pin 9.",
      difficulty: "Easy",
      marks: 10,
      timerMins: 5,
      explanation: "Use analogWrite() from value 0 to 255 to alter duty cycle of PWM signal.",
      code: `const int ledPin = 9;\n\nvoid setup() {\n  pinMode(ledPin, OUTPUT);\n}\n\nvoid loop() {\n  for (int b = 0; b <= 255; b += 5) {\n    analogWrite(ledPin, b);\n    delay(30);\n  }\n  for (int b = 255; b >= 0; b -= 5) {\n    analogWrite(ledPin, b);\n    delay(30);\n  }\n}`,
      diagramJson: `{\n  "version": 1,\n  "author": "GyanXp",\n  "editor": "wokwi",\n  "parts": [\n    { "type": "wokwi-arduino-uno", "id": "uno", "top": 0, "left": 0, "attrs": {} },\n    { "type": "wokwi-led", "id": "led1", "top": -80, "left": 150, "attrs": { "color": "blue" } }\n  ],\n  "connections": [\n    [ "uno:9", "led1:A", "blue", [ "v0" ] ],\n    [ "uno:GND.1", "led1:C", "black", [ "v0" ] ]\n  ]\n}`
    },
    {
      id: 11,
      title: "Q11. LDR Light Sensor Night Lamp Automation",
      problem: "Automatically switch ON an LED when ambient light drops below threshold using LDR sensor.",
      difficulty: "Medium",
      marks: 15,
      timerMins: 8,
      explanation: "Read analog values from LDR voltage divider on pin A0 and toggle LED when light drops.",
      code: `const int ldrPin = A0;\nconst int ledPin = 13;\n\nvoid setup() {\n  pinMode(ledPin, OUTPUT);\n  Serial.begin(9600);\n}\n\nvoid loop() {\n  int ldrVal = analogRead(ldrPin);\n  Serial.println(ldrVal);\n  if (ldrVal < 500) {\n    digitalWrite(ledPin, HIGH);\n  } else {\n    digitalWrite(ledPin, LOW);\n  }\n  delay(300);\n}`,
      diagramJson: `{\n  "version": 1,\n  "author": "GyanXp",\n  "editor": "wokwi",\n  "parts": [\n    { "type": "wokwi-arduino-uno", "id": "uno", "top": 0, "left": 0, "attrs": {} },\n    { "type": "wokwi-photoresistor-sensor", "id": "ldr1", "top": -120, "left": 80, "attrs": {} },\n    { "type": "wokwi-led", "id": "led1", "top": -80, "left": 220, "attrs": { "color": "yellow" } }\n  ],\n  "connections": [\n    [ "uno:5V", "ldr1:VCC", "red", [ "v0" ] ],\n    [ "uno:GND.1", "ldr1:GND", "black", [ "v0" ] ],\n    [ "uno:A0", "ldr1:AO", "blue", [ "v0" ] ],\n    [ "uno:13", "led1:A", "gold", [ "v0" ] ],\n    [ "uno:GND.2", "led1:C", "black", [ "v0" ] ]\n  ]\n}`
    },
    {
      id: 12,
      title: "Q12. Keypad Lock Password Verification System",
      problem: "Accept 4-digit PIN via Matrix Keypad and output access granted or denied status.",
      difficulty: "Hard",
      marks: 20,
      timerMins: 15,
      explanation: "Read key matrix using Keypad.h library and match string sequence against stored password.",
      code: `#include <Keypad.h>\n\nconst byte ROWS = 4, COLS = 4;\nchar keys[ROWS][COLS] = {\n  {'1','2','3','A'},\n  {'4','5','6','B'},\n  {'7','8','9','C'},\n  {'*','0','#','D'}\n};\nbyte rowPins[ROWS] = {9, 8, 7, 6};\nbyte colPins[COLS] = {5, 4, 3, 2};\nKeypad keypad = Keypad(makeKeymap(keys), rowPins, colPins, ROWS, COLS);\n\nvoid setup() {\n  Serial.begin(9600);\n}\n\nvoid loop() {\n  char key = keypad.getKey();\n  if (key) {\n    Serial.print("Pressed Key: ");\n    Serial.println(key);\n  }\n}`,
      diagramJson: `{\n  "version": 1,\n  "author": "GyanXp",\n  "editor": "wokwi",\n  "parts": [\n    { "type": "wokwi-arduino-uno", "id": "uno", "top": 0, "left": 0, "attrs": {} },\n    { "type": "wokwi-membrane-keypad", "id": "kp1", "top": -200, "left": 120, "attrs": {} }\n  ],\n  "connections": [\n    [ "uno:9", "kp1:R1", "green", [ "v0" ] ],\n    [ "uno:8", "kp1:R2", "green", [ "v0" ] ],\n    [ "uno:7", "kp1:R3", "green", [ "v0" ] ],\n    [ "uno:6", "kp1:R4", "green", [ "v0" ] ],\n    [ "uno:5", "kp1:C1", "blue", [ "v0" ] ],\n    [ "uno:4", "kp1:C2", "blue", [ "v0" ] ],\n    [ "uno:3", "kp1:C3", "blue", [ "v0" ] ],\n    [ "uno:2", "kp1:C4", "blue", [ "v0" ] ]\n  ]\n}`
    },
    {
      id: 13,
      title: "Q13. Smart Home Relay Control with Switch",
      problem: "Control a high-voltage Appliance simulator via Relay Module with Digital Trigger Switch.",
      difficulty: "Medium",
      marks: 15,
      timerMins: 10,
      explanation: "Toggle relay coil control pin HIGH/LOW to switch isolated contact terminals.",
      code: `const int switchPin = 2;\nconst int relayPin = 7;\n\nvoid setup() {\n  pinMode(switchPin, INPUT_PULLUP);\n  pinMode(relayPin, OUTPUT);\n}\n\nvoid loop() {\n  int state = digitalRead(switchPin);\n  if (state == LOW) {\n    digitalWrite(relayPin, HIGH);\n  } else {\n    digitalWrite(relayPin, LOW);\n  }\n}`,
      diagramJson: `{\n  "version": 1,\n  "author": "GyanXp",\n  "editor": "wokwi",\n  "parts": [\n    { "type": "wokwi-arduino-uno", "id": "uno", "top": 0, "left": 0, "attrs": {} },\n    { "type": "wokwi-relay-module", "id": "rel1", "top": -100, "left": 160, "attrs": {} },\n    { "type": "wokwi-pushbutton", "id": "btn1", "top": -60, "left": 60, "attrs": {} }\n  ],\n  "connections": [\n    [ "uno:5V", "rel1:VCC", "red", [ "v0" ] ],\n    [ "uno:GND.1", "rel1:GND", "black", [ "v0" ] ],\n    [ "uno:7", "rel1:IN", "purple", [ "v0" ] ],\n    [ "uno:2", "btn1:1.M", "blue", [ "v0" ] ],\n    [ "uno:GND.2", "btn1:2.M", "black", [ "v0" ] ]\n  ]\n}`
    },
    {
      id: 14,
      title: "Q14. Stepper Motor Rotation Sequence Driver",
      problem: "Drive a 28BYJ-48 Stepper Motor using ULN2003 Driver Module for automated rotation.",
      difficulty: "Hard",
      marks: 20,
      timerMins: 12,
      explanation: "Step coil sequences on digital pins 8, 9, 10, 11 through Stepper.h library.",
      code: `#include <Stepper.h>\n\nconst int stepsPerRev = 200;\nStepper myStepper(stepsPerRev, 8, 9, 10, 11);\n\nvoid setup() {\n  myStepper.setSpeed(60);\n}\n\nvoid loop() {\n  myStepper.step(stepsPerRev);\n  delay(1000);\n  myStepper.step(-stepsPerRev);\n  delay(1000);\n}`,
      diagramJson: `{\n  "version": 1,\n  "author": "GyanXp",\n  "editor": "wokwi",\n  "parts": [\n    { "type": "wokwi-arduino-uno", "id": "uno", "top": 0, "left": 0, "attrs": {} },\n    { "type": "wokwi-stepper-motor", "id": "step1", "top": -140, "left": 150, "attrs": {} }\n  ],\n  "connections": [\n    [ "uno:8", "step1:A1", "orange", [ "v0" ] ],\n    [ "uno:9", "step1:A2", "yellow", [ "v0" ] ],\n    [ "uno:10", "step1:B1", "pink", [ "v0" ] ],\n    [ "uno:11", "step1:B2", "blue", [ "v0" ] ]\n  ]\n}`
    },
    {
      id: 15,
      title: "Q15. IoT Water Level Detector with Buzzer & LEDs",
      problem: "Indicate Low, Medium, and High water level status using 3 LEDs and a Warning Alarm.",
      difficulty: "Hard",
      marks: 20,
      timerMins: 15,
      explanation: "Map multi-threshold sensor analog inputs to 3 distinct warning levels and buzzer trigger.",
      code: `const int levelPin = A0;\nconst int greenLed = 10, yellowLed = 11, redLed = 12;\nconst int buzzer = 8;\n\nvoid setup() {\n  pinMode(greenLed, OUTPUT);\n  pinMode(yellowLed, OUTPUT);\n  pinMode(redLed, OUTPUT);\n  pinMode(buzzer, OUTPUT);\n}\n\nvoid loop() {\n  int val = analogRead(levelPin);\n  digitalWrite(greenLed, val > 200 ? HIGH : LOW);\n  digitalWrite(yellowLed, val > 500 ? HIGH : LOW);\n  if (val > 800) {\n    digitalWrite(redLed, HIGH);\n    tone(buzzer, 1200);\n  } else {\n    digitalWrite(redLed, LOW);\n    noTone(buzzer);\n  }\n  delay(200);\n}`,
      diagramJson: `{\n  "version": 1,\n  "author": "GyanXp",\n  "editor": "wokwi",\n  "parts": [\n    { "type": "wokwi-arduino-uno", "id": "uno", "top": 0, "left": 0, "attrs": {} },\n    { "type": "wokwi-potentiometer", "id": "pot1", "top": -80, "left": 40, "attrs": {} },\n    { "type": "wokwi-led", "id": "ledG", "top": -120, "left": 150, "attrs": { "color": "green" } },\n    { "type": "wokwi-led", "id": "ledY", "top": -120, "left": 200, "attrs": { "color": "yellow" } },\n    { "type": "wokwi-led", "id": "ledR", "top": -120, "left": 250, "attrs": { "color": "red" } },\n    { "type": "wokwi-buzzer", "id": "bz1", "top": -50, "left": 200, "attrs": {} }\n  ],\n  "connections": [\n    [ "uno:5V", "pot1:VCC", "red", [ "v0" ] ],\n    [ "uno:GND.1", "pot1:GND", "black", [ "v0" ] ],\n    [ "uno:A0", "pot1:SIG", "blue", [ "v0" ] ],\n    [ "uno:10", "ledG:A", "green", [ "v0" ] ],\n    [ "uno:11", "ledY:A", "gold", [ "v0" ] ],\n    [ "uno:12", "ledR:A", "red", [ "v0" ] ],\n    [ "uno:8", "bz1:1", "purple", [ "v0" ] ],\n    [ "uno:GND.2", "bz1:2", "black", [ "v0" ] ]\n  ]\n}`
    }
  ];

  var TOTAL_PROGRAMS = programsData.length;
  var completedPrograms = JSON.parse(localStorage.getItem('gyanxp_iot_completed')) || [];
  var activeTimers = {};

  function escapeHtml(text) {
    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
  }

  function scrollIndexSidebar(offset) {
    var sidebarList = document.getElementById('sidebar-list');
    if (sidebarList) {
      sidebarList.scrollBy({ left: offset, behavior: 'smooth' });
    }
  }

  function copySnippetCode(progId) {
    var program = programsData.find(function(p) { return p.id === progId; });
    var floatBtn = document.getElementById('float-copy-' + progId);

    if (program && floatBtn) {
      navigator.clipboard.writeText(program.code).then(function() {
        var originalText = floatBtn.innerText;
        floatBtn.innerText = '📋 Copied!';
        setTimeout(function() { floatBtn.innerText = originalText; }, 2000);
      });
    }
  }

  function renderAllPrograms() {
    var sidebarHtml = '';
    var workspaceHtml = '';

    var mainTitleEl = document.getElementById('sidebar-main-title');
    if (mainTitleEl) mainTitleEl.innerText = '📑 Practical Index (' + TOTAL_PROGRAMS + ')';

    programsData.forEach(function (item, index) {
      var isFirst = index === 0;
      var progNum = index + 1;
      var diffClass = 'badge-' + item.difficulty.toLowerCase();

      sidebarHtml += `
        <button class="nav-btn ${isFirst ? 'active' : ''}" id="side-btn-${item.id}" onclick="switchProgram(${item.id})">
          <span>Practical ${progNum}</span>
          <span class="status-dot" id="dot-${item.id}">⚪</span>
        </button>
      `;

      workspaceHtml += `
        <div id="prog-${item.id}" class="program-content ${isFirst ? 'active' : ''}">
          <div class="meta-tags">
            <span class="badge badge-tag">Practical #${progNum}</span>
            <span class="badge ${diffClass}">${item.difficulty}</span>
            <span class="badge badge-marks">Weightage: ${item.marks} Marks</span>
          </div>

          <h2 class="question-title">${item.title}</h2>
          <div class="question-desc"><strong>Problem Statement:</strong> ${item.problem}</div>

          <div class="timer-box">
            <span>⏱ Recommended Time: ${item.timerMins} mins</span>
            <div class="timer-controls">
              <span class="timer-display" id="timer-${item.id}">00:00</span>
              <button class="timer-btn" onclick="toggleTimer(${item.id})">Start Timer</button>
            </div>
          </div>

          <div class="code-header"><span class="code-section-title">Solution C++ Code (sketch.ino):</span></div>
          
          <div class="code-container">
            <button class="floating-copy-btn" id="float-copy-${item.id}" onclick="copySnippetCode(${item.id})">📋 Copy Code</button>
            <pre><code class="language-cpp" id="code-snippet-${item.id}">${escapeHtml(item.code)}</code></pre>
          </div>

          <div class="btn-group">
            <button class="btn-action try-code-btn" id="btn-editor-${item.id}" onclick="openCompilerTab(${item.id})">▶ Copy Code & Open Wokwi</button>
            <button class="btn-action circuit-btn" id="btn-circuit-${item.id}" onclick="copyCircuitCode(${item.id})">🔌 Copy Circuit Code</button>
            <button class="btn-action complete-btn" id="mark-btn-${item.id}" onclick="toggleCompletion(${item.id})">✔ Mark Done</button>
          </div>

          <div class="accordion-box">
            <div class="accordion-header" onclick="toggleAccordion(${item.id})">
              <span>💡 Hardware & Logic Explanation</span><span id="acc-icon-${item.id}">➕</span>
            </div>
            <div class="accordion-body" id="acc-body-${item.id}">${item.explanation}</div>
          </div>

          <div class="pagination-group">
            <button class="btn-page" ${index === 0 ? 'disabled' : `onclick="switchProgram(${programsData[index - 1].id})"`}>◀ Previous</button>
            <button class="btn-page" ${index === programsData.length - 1 ? 'disabled' : `onclick="switchProgram(${programsData[index + 1].id})"`}>Next ▶</button>
          </div>
        </div>
      `;
    });

    document.getElementById('sidebar-list').innerHTML = sidebarHtml;
    document.getElementById('workspace-container').innerHTML = workspaceHtml;

    if (window.Prism) Prism.highlightAll();
  }

  function switchProgram(progId) {
    document.querySelectorAll('.program-content').forEach(function(el) { el.classList.remove('active'); });
    document.querySelectorAll('.nav-btn').forEach(function(btn) { btn.classList.remove('active'); });

    var targetProg = document.getElementById('prog-' + progId);
    var targetBtn = document.getElementById('side-btn-' + progId);

    if (targetProg) targetProg.classList.add('active');
    if (targetBtn) {
      targetBtn.classList.add('active');
      targetBtn.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
    }
  }

  function openCompilerTab(progId) {
    var program = programsData.find(function(p) { return p.id === progId; });
    var editorBtn = document.getElementById('btn-editor-' + progId);

    if (program) {
      navigator.clipboard.writeText(program.code).then(function() {
        var originalText = editorBtn.innerText;
        editorBtn.innerText = '📋 Code Copied!';
        setTimeout(function() { editorBtn.innerText = originalText; }, 2000);
        window.open('online-iot-compiler', '_blank');
      }).catch(function() {
        window.open('online-iot-compiler', '_blank');
      });
    }
  }

  function copyCircuitCode(progId) {
    var program = programsData.find(function(p) { return p.id === progId; });
    var circuitBtn = document.getElementById('btn-circuit-' + progId);

    if (program) {
      navigator.clipboard.writeText(program.diagramJson).then(function() {
        var originalText = circuitBtn.innerText;
        circuitBtn.innerText = '✅ Circuit JSON Copied!';
        setTimeout(function() { circuitBtn.innerText = originalText; }, 2000);
      });
    }
  }

  function toggleAccordion(progId) {
    var body = document.getElementById('acc-body-' + progId);
    var icon = document.getElementById('acc-icon-' + progId);
    var isOpen = body.style.display === 'block';
    body.style.display = isOpen ? 'none' : 'block';
    icon.innerText = isOpen ? '➕' : '➖';
  }

  function toggleTimer(progId) {
    var timerDisplay = document.getElementById('timer-' + progId);
    var timerBtn = timerDisplay.nextElementSibling;

    if (activeTimers[progId]) {
      clearInterval(activeTimers[progId].interval);
      delete activeTimers[progId];
      timerBtn.innerText = 'Start Timer';
    } else {
      var seconds = 0;
      timerBtn.innerText = 'Stop Timer';
      activeTimers[progId] = {
        interval: setInterval(function () {
          seconds++;
          var mins = Math.floor(seconds / 60);
          var secs = seconds % 60;
          timerDisplay.innerText = (mins < 10 ? '0' : '') + mins + ':' + (secs < 10 ? '0' : '') + secs;
        }, 1000)
      };
    }
  }

  function toggleCompletion(progId) {
    var index = completedPrograms.indexOf(progId);
    if (index > -1) {
      completedPrograms.splice(index, 1);
    } else {
      completedPrograms.push(progId);
    }
    localStorage.setItem('gyanxp_iot_completed', JSON.stringify(completedPrograms));
    updateProgressUI();
  }

  function updateProgressUI() {
    programsData.forEach(function (item) {
      var markBtn = document.getElementById('mark-btn-' + item.id);
      var dot = document.getElementById('dot-' + item.id);

      if (completedPrograms.includes(item.id)) {
        if (markBtn) { markBtn.innerText = '✔ Practiced'; markBtn.classList.add('done'); }
        if (dot) dot.innerText = '🟢';
      } else {
        if (markBtn) { markBtn.innerText = '✔ Mark Done'; markBtn.classList.remove('done'); }
        if (dot) dot.innerText = '⚪';
      }
    });

    var validCompleted = completedPrograms.filter(function(id) {
      return programsData.some(p => p.id === id);
    }).length;

    var percentage = TOTAL_PROGRAMS > 0 ? Math.round((validCompleted / TOTAL_PROGRAMS) * 100) : 0;
    document.getElementById('progress-fill').style.width = percentage + '%';
    document.getElementById('progress-text').innerText = validCompleted + ' / ' + TOTAL_PROGRAMS + ' Practiced (' + percentage + '%)';
  }

  document.addEventListener("DOMContentLoaded", function () {
    renderAllPrograms();
    updateProgressUI();
  });
</script>				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		<p>The post <a href="https://gyanxp.com/online-iot-practical-solution-pr4/">Online IoT Practical Solution (PR4)</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://gyanxp.com/online-iot-practical-solution-pr4/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Online IoT Compiler</title>
		<link>https://gyanxp.com/online-iot-compiler/</link>
					<comments>https://gyanxp.com/online-iot-compiler/#respond</comments>
		
		<dc:creator><![CDATA[Balmukund Maurya]]></dc:creator>
		<pubDate>Mon, 17 Aug 2026 13:29:57 +0000</pubDate>
				<category><![CDATA[Online Practical]]></category>
		<guid isPermaLink="false">https://gyanxp.com/?p=6228</guid>

					<description><![CDATA[<p>IoT Lab IoT Practical Simulator — Arduino Uno Design circuits, write embedded C/C++ code, and simulate IoT hardware in real-time. Fullscreen Exit Fullscreen</p>
<p>The post <a href="https://gyanxp.com/online-iot-compiler/">Online IoT Compiler</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="6228" class="elementor elementor-6228">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-0352912 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="0352912" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c4869d4" data-id="c4869d4" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-e67576e elementor-widget elementor-widget-html" data-id="e67576e" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<style>
  /* Outer Container */
  .compiler-container {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  /* IoT Practical Title Header */
  .iot-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .iot-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .iot-badge {
    background-color: #00979d;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }

  .iot-title {
    margin: 0;
    color: #f8fafc;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
  }

  .iot-subtitle {
    margin: 2px 0 0 0;
    color: #94a3b8;
    font-size: 12px;
  }

  /* Top Actions Bar */
  .compiler-toolbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  /* Fullscreen Toggle Button */
  .fullscreen-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    background-color: #00979d;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
    outline: none;
  }

  .fullscreen-toggle-btn:hover {
    background-color: #008186;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14);
  }

  /* Floating Exit Fullscreen Button (Appears only in Fullscreen Mode) */
  .exit-fullscreen-floating-btn {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1000001;
    height: 32px;
    padding: 0 14px;
    background-color: rgba(30, 41, 59, 0.85);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s ease;
  }

  .exit-fullscreen-floating-btn:hover {
    background-color: rgba(15, 23, 42, 0.95);
  }

  /* Simulator Wrapper acting as a crop mask */
  .compiler-wrapper {
    position: relative;
    width: 100%;
    height: 520px;
    margin: 0;
    padding: 0;
    background-color: #1e1e1e;
    border-radius: 8px;
    overflow: hidden;
  }

  /* Iframe offset to hide Wokwi's top header bar */
  .compiler-wrapper iframe {
    width: 100%;
    height: calc(100% + 50px); 
    margin-top: -50px; 
    border: none;
    display: block;
  }

  /* =======================================================
     Mobile & Desktop Fullscreen Mode (Shows ONLY Compiler)
     ======================================================= */
  .compiler-container.is-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 999999 !important;
    background-color: #1e1e1e !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: hidden !important;
  }

  /* Hide Header and Standard Toolbar in Fullscreen Mode */
  .compiler-container.is-fullscreen .iot-header,
  .compiler-container.is-fullscreen .compiler-toolbar {
    display: none !important;
  }

  /* Show Floating Exit Button in Fullscreen Mode */
  .compiler-container.is-fullscreen .exit-fullscreen-floating-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
  }

  /* Expand Wrapper to 100% Edge-to-Edge */
  .compiler-container.is-fullscreen .compiler-wrapper {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
  }

  @media (max-width: 768px) {
    .iot-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    .fullscreen-toggle-btn {
      height: 30px;
      padding: 0 12px;
      font-size: 12px;
    }

    .compiler-wrapper {
      height: 420px;
    }
  }
</style>

<div id="compiler-container" class="compiler-container">
  <!-- Title Header for IoT Practical -->
  <div class="iot-header">
    <div class="iot-header-info">
      <span class="iot-badge">IoT Lab</span>
      <div>
        <h3 class="iot-title">IoT Practical Simulator — Arduino Uno</h3>
        <p class="iot-subtitle">Design circuits, write embedded C/C++ code, and simulate IoT hardware in real-time.</p>
      </div>
    </div>
  </div>

  <!-- Outside Top Toolbar -->
  <div class="compiler-toolbar">
    <button id="fullscreen-btn" class="fullscreen-toggle-btn" title="Toggle Fullscreen">
      <svg id="fullscreen-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
        <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
      </svg>
      <span id="fullscreen-text">Fullscreen</span>
    </button>
  </div>

  <!-- Wokwi Simulator Container -->
  <div class="compiler-wrapper">
    <!-- Floating Exit Fullscreen Button -->
    <button id="exit-fullscreen-floating-btn" class="exit-fullscreen-floating-btn" title="Exit Fullscreen">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
        <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>
      </svg>
      Exit Fullscreen
    </button>

    <iframe 
      id="wokwi-editor"
      src="https://wokwi.com/projects/new/arduino-uno?embed=1&theme=dark" 
      width="100%" 
      height="100%"
      allow="cross-origin-isolated">
    </iframe>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var fullscreenBtn = document.getElementById('fullscreen-btn');
    var exitFloatingBtn = document.getElementById('exit-fullscreen-floating-btn');
    var container = document.getElementById('compiler-container');

    function toggleFullscreen() {
      container.classList.toggle('is-fullscreen');
      var isFull = container.classList.contains('is-fullscreen');

      if (isFull) {
        document.body.style.overflow = 'hidden';
      } else {
        document.body.style.overflow = '';
      }
    }

    fullscreenBtn.addEventListener('click', toggleFullscreen);
    exitFloatingBtn.addEventListener('click', toggleFullscreen);
  });
</script>				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		<p>The post <a href="https://gyanxp.com/online-iot-compiler/">Online IoT Compiler</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://gyanxp.com/online-iot-compiler/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Online Web Practical Solution (PR2)</title>
		<link>https://gyanxp.com/online-web-practical-solution-pr2/</link>
					<comments>https://gyanxp.com/online-web-practical-solution-pr2/#respond</comments>
		
		<dc:creator><![CDATA[Balmukund Maurya]]></dc:creator>
		<pubDate>Mon, 17 Aug 2026 12:58:21 +0000</pubDate>
				<category><![CDATA[Online Practical]]></category>
		<guid isPermaLink="false">https://gyanxp.com/?p=6215</guid>

					<description><![CDATA[<p>O Level Web Designing &#038; Publishing Practical Solutions (M2-R5) Complete set of 30 Practical Exam Solutions with Live Output, Practice Timers, and Progress Tracking! 📚 Practical Completion Progress 0 / 30 Practiced (0%) 📑 Practical Index (Q1 &#8211; Q30) ◀ ▶ HTML FormEasyWeightage: 10 Marks Q1. Contact Form with Auto Focus on Name Problem Statement: [&#8230;]</p>
<p>The post <a href="https://gyanxp.com/online-web-practical-solution-pr2/">Online Web Practical Solution (PR2)</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="6215" class="elementor elementor-6215">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-20de10c elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="20de10c" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1c02dca" data-id="1c02dca" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-f238471 elementor-widget elementor-widget-html" data-id="f238471" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<!-- Google Fonts & Prism.js Syntax Highlighting for HTML/CSS/JS -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />

<style>
  :root {
    --gyanxp-orange: #ff6600;
    --gyanxp-orange-hover: #e65c00;
    --gyanxp-dark: #1f2421;
    --gyanxp-accent-blue: #007bff;
    --gyanxp-bg: #f8f9fa;
    --gyanxp-card-bg: #ffffff;
    --gyanxp-danger: #dc3545;
    --gyanxp-success: #28a745;
    --gyanxp-purple: #6f42c1;
  }

  /* Universal Box-Sizing & Typography */
  .gyanxp-container,
  .gyanxp-container * {
    box-sizing: border-box !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  /* Full Width Container */
  .gyanxp-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: clamp(10px, 2vw, 24px) !important;
    background-color: var(--gyanxp-bg);
  }

  /* Header Banner */
  .gyanxp-page-header {
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    background: linear-gradient(135deg, var(--gyanxp-dark) 0%, #2c302e 100%) !important;
    color: #ffffff !important;
    padding: clamp(16px, 2.5vw, 24px) clamp(18px, 3vw, 30px) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #2c302e !important;
    border-left: 6px solid var(--gyanxp-orange) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .gyanxp-page-header h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(20px, 2.8vw, 28px) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #ffffff !important;
  }

  .gyanxp-page-header p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(13px, 1.8vw, 15px) !important;
    color: #d1d5db !important;
    line-height: 1.5 !important;
  }

  /* Progress Bar Widget */
  .progress-widget {
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    background: var(--gyanxp-card-bg) !important;
    padding: clamp(16px, 2vw, 20px) clamp(18px, 3vw, 30px) !important;
    border-radius: 12px !important;
    border: 1px solid #e9ecef !important;
    border-left: 6px solid var(--gyanxp-orange) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  }

  .progress-info {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    margin-bottom: 12px !important;
    font-size: clamp(13px, 1.8vw, 15px) !important;
    font-weight: 600 !important;
    color: var(--gyanxp-dark) !important;
  }

  .progress-bar-bg {
    width: 100% !important;
    height: 10px !important;
    background: #e9ecef !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .progress-bar-fill {
    height: 100% !important;
    width: 0% !important;
    background: linear-gradient(90deg, var(--gyanxp-orange), #ff9933) !important;
    transition: width 0.4s ease-in-out !important;
  }

  /* Main Practical Layout (Grid) */
  .practical-layout {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 320px 1fr !important;
    gap: 20px !important;
    align-items: start !important;
    margin: 0 !important;
  }

  /* Sidebar */
  .program-sidebar {
    width: 100% !important;
    background: var(--gyanxp-card-bg);
    border-radius: 12px;
    padding: 18px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 15px;
    border: 1px solid #e9ecef;
  }

  .sidebar-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--gyanxp-dark);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--gyanxp-orange);
  }

  .sidebar-scroll-wrapper {
    position: relative;
    width: 100%;
  }

  .program-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding-right: 4px;
    scroll-behavior: smooth;
  }

  /* Navigation Arrows */
  .sidebar-nav-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    color: var(--gyanxp-dark);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
  }

  .sidebar-nav-arrow:hover { background: #ffffff; color: var(--gyanxp-orange); }
  .sidebar-nav-prev { left: -8px; }
  .sidebar-nav-next { right: -8px; }

  .nav-btn {
    width: 100%;
    text-align: left;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gyanxp-dark);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 40px;
  }

  .nav-btn:hover { background: #fff0e6; color: var(--gyanxp-orange); border-color: var(--gyanxp-orange); }
  .nav-btn.active { background: var(--gyanxp-orange); color: #ffffff; border-color: var(--gyanxp-orange); box-shadow: 0 3px 8px rgba(255, 102, 0, 0.25); }

  /* Workspace */
  .program-workspace {
    width: 100% !important;
    background: var(--gyanxp-card-bg);
    border-radius: 12px;
    padding: clamp(18px, 2.5vw, 30px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid #e9ecef;
    min-width: 0;
  }

  .program-content { display: none; }
  .program-content.active { display: block; }

  .meta-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }

  .badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; }
  .badge-tag { background: #fff0e6; color: var(--gyanxp-orange); }
  .badge-easy { background: #e6f4ea; color: #137333; }
  .badge-medium { background: #fef7e0; color: #b06000; }
  .badge-marks { background: #e8f0fe; color: #1a73e8; }

  .question-title { font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; color: var(--gyanxp-dark); margin: 0 0 12px 0; line-height: 1.4; }
  .question-desc { font-size: clamp(13px, 1.8vw, 14px); color: #555; line-height: 1.6; margin-bottom: 18px; background: #fffcf9; padding: 14px 16px; border-radius: 8px; border-left: 4px solid var(--gyanxp-orange); }

  /* Timer Widget */
  .timer-box { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    background: #f1f3f5; 
    padding: 10px 16px; 
    border-radius: 8px; 
    margin-bottom: 18px; 
    font-size: 13.5px; 
    font-weight: 600; 
    flex-wrap: wrap; 
    gap: 10px; 
  }
  .timer-controls { display: inline-flex; align-items: center; gap: 8px; }
  .timer-display { font-family: monospace; font-size: 15px; color: var(--gyanxp-orange); background: #ffffff; padding: 4px 10px; border-radius: 4px; border: 1px solid #ced4da; line-height: 1; }
  .timer-btn { background: var(--gyanxp-dark); color: #fff; border: none; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 12.5px; font-weight: 500; }
  .timer-btn:hover { background: #000; }

  /* Code Header */
  .code-header { margin-bottom: 6px; }
  .code-section-title { font-size: 14px; font-weight: 600; color: var(--gyanxp-dark); }

  .program-workspace pre { border-radius: 8px; margin: 0 0 18px 0; font-size: 13.5px; max-height: 500px; overflow: auto; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

  /* Action Buttons */
  .btn-group { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
  .btn-action { 
    border: none; 
    height: 40px;
    padding: 0 18px; 
    font-size: 13px; 
    font-weight: 600; 
    border-radius: 6px; 
    cursor: pointer; 
    transition: all 0.2s ease; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    gap: 6px; 
    user-select: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }
  .try-code-btn { background-color: var(--gyanxp-orange); color: #ffffff; }
  .try-code-btn:hover { background-color: var(--gyanxp-orange-hover); }
  .show-result-btn { background-color: var(--gyanxp-accent-blue); color: #ffffff; }
  .show-result-btn:hover { background-color: #0069d9; }
  .show-result-btn.active-btn { background-color: var(--gyanxp-danger); }
  .show-result-btn.active-btn:hover { background-color: #bd2130; }
  .complete-btn { background-color: #e9ecef; color: var(--gyanxp-dark); }
  .complete-btn:hover { background-color: #dde2e6; }
  .complete-btn.done { background-color: var(--gyanxp-success); color: #ffffff; }
  .complete-btn.done:hover { background-color: #218838; }

  /* Accordions */
  .accordion-box { margin-bottom: 18px; border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden; }
  .accordion-header { background: #f8f9fa; padding: 12px 16px; font-size: 13.5px; font-weight: 600; color: var(--gyanxp-dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; }
  .accordion-body { display: none; padding: 14px 16px; font-size: 13.5px; color: #444; line-height: 1.6; background: #ffffff; border-top: 1px solid #e9ecef; }

  /* Output Frame */
  .result-container { display: none; margin-top: 14px; margin-bottom: 18px; background: #ffffff; border-radius: 8px; overflow: hidden; border: 1px solid #ced4da; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
  .result-header { background: #1f2421; color: #ffffff; font-size: 11px; padding: 8px 14px; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid #333333; }
  .result-container iframe { width: 100%; height: 350px; border: none; display: block; background: #ffffff; }

  /* Pagination */
  .pagination-group { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 18px; border-top: 1px dashed #e9ecef; gap: 10px; }
  .btn-page { 
    height: 40px;
    padding: 0 20px; 
    background-color: #f1f3f5; 
    color: var(--gyanxp-dark); 
    border: 1px solid #ced4da; 
    font-size: 13px; 
    font-weight: 600; 
    border-radius: 6px; 
    cursor: pointer; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    transition: all 0.2s ease;
  }
  .btn-page:hover:not(:disabled) { background-color: var(--gyanxp-orange); color: #ffffff; border-color: var(--gyanxp-orange); }
  .btn-page:disabled { opacity: 0.4; cursor: not-allowed; }

  /* Responsive Design */
  @media (max-width: 992px) {
    .practical-layout { grid-template-columns: 100% !important; gap: 15px !important; }
    .program-sidebar { position: static; width: 100% !important; padding: 12px 14px; border-radius: 12px; }
    .sidebar-title { font-size: 14px; margin-bottom: 8px; }
    .sidebar-nav-arrow { display: inline-flex; }
    .program-list {
      flex-direction: row;
      overflow-x: auto;
      max-height: none;
      padding: 4px 20px 8px 20px;
      gap: 8px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .program-list::-webkit-scrollbar { display: none; }
    .nav-btn { white-space: nowrap; width: auto; flex-shrink: 0; padding: 6px 16px; font-size: 12.5px; min-height: 38px; border-radius: 20px; gap: 8px; scroll-snap-align: center; }
    .program-workspace { padding: 18px 14px; border-radius: 12px; }
    .btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .btn-action { width: 100%; height: 40px; font-size: 12.5px; padding: 0 10px; }
    .btn-action.complete-btn { grid-column: span 2; }
    .pagination-group .btn-page { flex: 1; height: 40px; }
    .result-container iframe { height: 280px; }
  }

  @media (max-width: 480px) {
    .btn-group { grid-template-columns: 1fr; }
    .btn-action.complete-btn { grid-column: auto; }
    .timer-box { flex-direction: column; align-items: flex-start; }
    .timer-controls { width: 100%; justify-content: space-between; }
  }
</style>

<div class="gyanxp-container">
  
  <!-- Header Banner -->
  <div class="gyanxp-page-header">
    <h1>O Level Web Designing & Publishing Practical Solutions (M2-R5)</h1>
    <p>Complete set of 30 Practical Exam Solutions with Live Output, Practice Timers, and Progress Tracking!</p>
  </div>

  <!-- Progress Bar Widget -->
  <div class="progress-widget">
    <div class="progress-info">
      <span>📚 Practical Completion Progress</span>
      <span id="progress-text">0 / 30 Practiced (0%)</span>
    </div>
    <div class="progress-bar-bg">
      <div class="progress-bar-fill" id="progress-fill"></div>
    </div>
  </div>

  <!-- Practical Workspaces Layout -->
  <div class="practical-layout">
    
    <!-- Sidebar / Index Bar -->
    <div class="program-sidebar">
      <div class="sidebar-title">📑 Practical Index (Q1 - Q30)</div>
      <div class="sidebar-scroll-wrapper">
        <button class="sidebar-nav-arrow sidebar-nav-prev" onclick="scrollIndexSidebar(-140)" title="Previous Programs">◀</button>
        <div class="program-list" id="sidebar-list">
          <!-- Sidebar Buttons Q1 to Q30 -->
          <script>
            for(let i=1; i<=30; i++) {
              document.write(`
                <button class="nav-btn ${i===1?'active':''}" id="side-btn-${i}" onclick="switchProgram(${i})">
                  <span>Practical ${i}</span> <span class="status-dot" id="dot-${i}">⚪</span>
                </button>
              `);
            }
          </script>
        </div>
        <button class="sidebar-nav-arrow sidebar-nav-next" onclick="scrollIndexSidebar(140)" title="Next Programs">▶</button>
      </div>
    </div>

    <!-- Main Workspace -->
    <div class="program-workspace">

      <!-- PRACTICAL 1 -->
      <div id="prog-1" class="program-content active">
        <div class="meta-tags"><span class="badge badge-tag">HTML Form</span><span class="badge badge-easy">Easy</span><span class="badge badge-marks">Weightage: 10 Marks</span></div>
        <h2 class="question-title">Q1. Contact Form with Auto Focus on Name</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Make a Contact form with Name, Mobile No, Email ID, Comments, and Submit button with focus on the Name field at cursor load.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 8 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-1">00:00</span> <button class="timer-btn" onclick="toggleTimer(1)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-1">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    body { font-family: Arial, sans-serif; padding: 15px; }
    .form-group { margin-bottom: 12px; }
    label { display: block; font-weight: bold; margin-bottom: 4px; }
    input, textarea { width: 100%; padding: 8px; box-sizing: border-box; }
    button { background: #ff6600; color: #fff; border: none; padding: 8px 16px; cursor: pointer; border-radius: 4px; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h3&gt;Contact Form&lt;/h3&gt;
  &lt;form&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;Name:&lt;/label&gt;
      &lt;input type="text" id="name" autofocus placeholder="Enter Name"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;Mobile No:&lt;/label&gt;
      &lt;input type="tel" placeholder="Enter Mobile No"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;Email ID:&lt;/label&gt;
      &lt;input type="email" placeholder="Enter Email"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;Comments:&lt;/label&gt;
      &lt;textarea rows="3" placeholder="Enter Comments"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
    &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(1, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-1" onclick="toggleResult(1, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-1" onclick="toggleCompletion(1)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(1)"><span>💡 How this code works</span><span id="acc-icon-1">➕</span></div>
          <div class="accordion-body" id="acc-body-1">The <code>autofocus</code> attribute automatically focuses the cursor on the Name input field when the page loads.</div>
        </div>
        <div id="result-box-1" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-1"></div></div>
        <div class="pagination-group"><button class="btn-page" disabled>◀ Previous</button><button class="btn-page" onclick="switchProgram(2)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 2 -->
      <div id="prog-2" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Form</span><span class="badge badge-easy">Easy</span><span class="badge badge-marks">Weightage: 10 Marks</span></div>
        <h2 class="question-title">Q2. Contact Form with Input Validation</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Create a Contact form with Name, Mobile No, Email ID, Comments, and Submit button, using required validation.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 8 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-2">00:00</span> <button class="timer-btn" onclick="toggleTimer(2)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-2">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    body { font-family: Arial, sans-serif; padding: 15px; }
    .form-group { margin-bottom: 12px; }
    label { display: block; font-weight: bold; margin-bottom: 4px; }
    input, textarea { width: 100%; padding: 8px; box-sizing: border-box; }
    button { background: #ff6600; color: #fff; border: none; padding: 8px 16px; cursor: pointer; border-radius: 4px; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h3&gt;Contact Form with Validation&lt;/h3&gt;
  &lt;form&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;Name:&lt;/label&gt;
      &lt;input type="text" autofocus required placeholder="Enter Name"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;Mobile No:&lt;/label&gt;
      &lt;input type="tel" required pattern="[0-9]{10}" placeholder="10 digit mobile number"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;Email ID:&lt;/label&gt;
      &lt;input type="email" required placeholder="Enter Email"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;Comments:&lt;/label&gt;
      &lt;textarea rows="3" placeholder="Enter Comments"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
    &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(2, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-2" onclick="toggleResult(2, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-2" onclick="toggleCompletion(2)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(2)"><span>💡 How this code works</span><span id="acc-icon-2">➕</span></div>
          <div class="accordion-body" id="acc-body-2">Uses HTML5 built-in validation like <code>required</code> and regex pattern <code>pattern="[0-9]{10}"</code>.</div>
        </div>
        <div id="result-box-2" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-2"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(1)">◀ Previous</button><button class="btn-page" onclick="switchProgram(3)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 3 -->
      <div id="prog-3" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">CSS Hover Effect</span><span class="badge badge-easy">Easy</span><span class="badge badge-marks">Weightage: 10 Marks</span></div>
        <h2 class="question-title">Q3. CSS Circle with Hover Color Change</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Design a circle with Specifications: Width 200px, Height 200px, Background Red, Border 2px Double Line and Black. Change background to Yellow on hover.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 8 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-3">00:00</span> <button class="timer-btn" onclick="toggleTimer(3)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-3">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    .circle {
      width: 200px;
      height: 200px;
      background-color: red;
      border: 2px double black;
      border-radius: 50%;
      transition: background-color 0.3s ease;
    }
    .circle:hover {
      background-color: yellow;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h3&gt;Hover Circle Demo&lt;/h3&gt;
  &lt;div class="circle"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(3, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-3" onclick="toggleResult(3, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-3" onclick="toggleCompletion(3)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(3)"><span>💡 How this code works</span><span id="acc-icon-3">➕</span></div>
          <div class="accordion-body" id="acc-body-3">Setting <code>border-radius: 50%</code> converts a square div into a circle, while <code>:hover</code> toggles color on mouse hover.</div>
        </div>
        <div id="result-box-3" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-3"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(2)">◀ Previous</button><button class="btn-page" onclick="switchProgram(4)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 4 -->
      <div id="prog-4" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Hyperlink</span><span class="badge badge-easy">Easy</span><span class="badge badge-marks">Weightage: 5 Marks</span></div>
        <h2 class="question-title">Q4. HTML Hyperlink to External Website</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Add a hyperlink in which clicking it redirects to www.google.com.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 3 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-4">00:00</span> <button class="timer-btn" onclick="toggleTimer(4)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-4">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
  &lt;h3&gt;Hyperlink Example&lt;/h3&gt;
  &lt;p&gt;Click the link below to go to Google:&lt;/p&gt;
  &lt;a href="https://www.google.com" target="_blank"&gt;Visit Google&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(4, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-4" onclick="toggleResult(4, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-4" onclick="toggleCompletion(4)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(4)"><span>💡 How this code works</span><span id="acc-icon-4">➕</span></div>
          <div class="accordion-body" id="acc-body-4">The <code>href</code> attribute defines the target URL, and <code>target="_blank"</code> opens the link in a new tab.</div>
        </div>
        <div id="result-box-4" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-4"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(3)">◀ Previous</button><button class="btn-page" onclick="switchProgram(5)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 5 -->
      <div id="prog-5" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">JavaScript Math</span><span class="badge badge-medium">Medium</span><span class="badge badge-marks">Weightage: 15 Marks</span></div>
        <h2 class="question-title">Q5. JavaScript Arithmetic Calculation Program</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Write a JavaScript program for basic arithmetic calculations (addition, subtraction, multiplication, division).</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 10 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-5">00:00</span> <button class="timer-btn" onclick="toggleTimer(5)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-5">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    body { font-family: Arial, sans-serif; padding: 15px; }
    input { width: 100px; padding: 5px; margin-right: 10px; }
    button { padding: 6px 12px; margin-right: 5px; cursor: pointer; }
    #result { margin-top: 15px; font-weight: bold; font-size: 16px; color: #ff6600; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h3&gt;Arithmetic Calculator&lt;/h3&gt;
  &lt;input type="number" id="num1" placeholder="Num 1"&gt;
  &lt;input type="number" id="num2" placeholder="Num 2"&gt;&lt;br&gt;&lt;br&gt;
  
  &lt;button onclick="calc('+')"&gt;Add&lt;/button&gt;
  &lt;button onclick="calc('-')"&gt;Subtract&lt;/button&gt;
  &lt;button onclick="calc('*')"&gt;Multiply&lt;/button&gt;
  &lt;button onclick="calc('/')"&gt;Divide&lt;/button&gt;

  &lt;div id="result"&gt;&lt;/div&gt;

  &lt;script&gt;
    function calc(op) {
      let n1 = parseFloat(document.getElementById('num1').value);
      let n2 = parseFloat(document.getElementById('num2').value);
      let res = 0;
      if (isNaN(n1) || isNaN(n2)) {
        document.getElementById('result').innerText = "Please enter valid numbers!";
        return;
      }
      if (op === '+') res = n1 + n2;
      else if (op === '-') res = n1 - n2;
      else if (op === '*') res = n1 * n2;
      else if (op === '/') res = n2 !== 0 ? (n1 / n2) : "Cannot divide by 0";
      
      document.getElementById('result').innerText = "Result: " + res;
    }
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(5, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-5" onclick="toggleResult(5, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-5" onclick="toggleCompletion(5)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(5)"><span>💡 How this code works</span><span id="acc-icon-5">➕</span></div>
          <div class="accordion-body" id="acc-body-5">Reads values from inputs, parses them to floats, performs the operator math, and updates the output DOM text.</div>
        </div>
        <div id="result-box-5" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-5"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(4)">◀ Previous</button><button class="btn-page" onclick="switchProgram(6)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 6 -->
      <div id="prog-6" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Image Link</span><span class="badge badge-easy">Easy</span><span class="badge badge-marks">Weightage: 5 Marks</span></div>
        <h2 class="question-title">Q6. HTML Clickable Image Demonstration</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Create an HTML page to demonstrate a Clickable image.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 5 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-6">00:00</span> <button class="timer-btn" onclick="toggleTimer(6)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-6">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
  &lt;h3&gt;Clickable Image Example&lt;/h3&gt;
  &lt;p&gt;Click the image below to visit GyanXP:&lt;/p&gt;
  &lt;a href="https://www.gyanxp.com" target="_blank"&gt;
    &lt;img src="https://via.placeholder.com/200x100?text=Click+Me" alt="Clickable Banner" style="border:2px solid #ff6600; border-radius:8px;"&gt;
  &lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(6, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-6" onclick="toggleResult(6, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-6" onclick="toggleCompletion(6)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(6)"><span>💡 How this code works</span><span id="acc-icon-6">➕</span></div>
          <div class="accordion-body" id="acc-body-6">Nesting an <code>&lt;img&gt;</code> tag inside an <code>&lt;a&gt;</code> anchor tag turns the image into a clickable link.</div>
        </div>
        <div id="result-box-6" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-6"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(5)">◀ Previous</button><button class="btn-page" onclick="switchProgram(7)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 7 -->
      <div id="prog-7" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Table</span><span class="badge badge-easy">Easy</span><span class="badge badge-marks">Weightage: 10 Marks</span></div>
        <h2 class="question-title">Q7. HTML Table (5 Rows x 4 Columns)</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Write an HTML program to display a table with 5 rows and 4 columns. Provide appropriate headings.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 8 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-7">00:00</span> <button class="timer-btn" onclick="toggleTimer(7)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-7">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    table { width: 100%; border-collapse: collapse; text-align: left; }
    th, td { border: 1px solid #ddd; padding: 8px; }
    th { background-color: #ff6600; color: white; }
    tr:nth-child(even) { background-color: #f2f2f2; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h3&gt;Student Academic Report Table&lt;/h3&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;Roll No&lt;/th&gt;
      &lt;th&gt;Student Name&lt;/th&gt;
      &lt;th&gt;Course&lt;/th&gt;
      &lt;th&gt;Marks&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;101&lt;/td&gt;&lt;td&gt;Rahul Sharma&lt;/td&gt;&lt;td&gt;O Level&lt;/td&gt;&lt;td&gt;85%&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;102&lt;/td&gt;&lt;td&gt;Priya Verma&lt;/td&gt;&lt;td&gt;A Level&lt;/td&gt;&lt;td&gt;90%&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;103&lt;/td&gt;&lt;td&gt;Amit Patel&lt;/td&gt;&lt;td&gt;O Level&lt;/td&gt;&lt;td&gt;78%&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;104&lt;/td&gt;&lt;td&gt;Neha Singh&lt;/td&gt;&lt;td&gt;CCC&lt;/td&gt;&lt;td&gt;92%&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(7, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-7" onclick="toggleResult(7, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-7" onclick="toggleCompletion(7)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(7)"><span>💡 How this code works</span><span id="acc-icon-7">➕</span></div>
          <div class="accordion-body" id="acc-body-7">Uses <code>&lt;table&gt;</code>, <code>&lt;tr&gt;</code>, <code>&lt;th&gt;</code>, and <code>&lt;td&gt;</code> tags to construct 1 header row + 4 data rows (5 rows total across 4 columns).</div>
        </div>
        <div id="result-box-7" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-7"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(6)">◀ Previous</button><button class="btn-page" onclick="switchProgram(8)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 8 -->
      <div id="prog-8" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">JavaScript Loops</span><span class="badge badge-medium">Medium</span><span class="badge badge-marks">Weightage: 15 Marks</span></div>
        <h2 class="question-title">Q8. JavaScript Squares and Cubes Table (0-10)</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Calculate the squares and cubes of numbers from 0 to 10 and display output in an HTML table.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 10 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-8">00:00</span> <button class="timer-btn" onclick="toggleTimer(8)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-8">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    table { width: 300px; border-collapse: collapse; text-align: center; }
    th, td { border: 1px solid #333; padding: 6px; }
    th { background-color: #ff6600; color: #fff; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h3&gt;Squares and Cubes (0 to 10)&lt;/h3&gt;
  &lt;div id="table-container"&gt;&lt;/div&gt;

  &lt;script&gt;
    let html = "&lt;table&gt;&lt;tr&gt;&lt;th&gt;Number&lt;/th&gt;&lt;th&gt;Square&lt;/th&gt;&lt;th&gt;Cube&lt;/th&gt;&lt;/tr&gt;";
    for (let i = 0; i &lt;= 10; i++) {
      html += `&lt;tr&gt;&lt;td&gt;${i}&lt;/td&gt;&lt;td&gt;${i * i}&lt;/td&gt;&lt;td&gt;${i * i * i}&lt;/td&gt;&lt;/tr&gt;`;
    }
    html += "&lt;/table&gt;";
    document.getElementById('table-container').innerHTML = html;
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(8, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-8" onclick="toggleResult(8, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-8" onclick="toggleCompletion(8)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(8)"><span>💡 How this code works</span><span id="acc-icon-8">➕</span></div>
          <div class="accordion-body" id="acc-body-8">A JS <code>for</code> loop iterates from 0 to 10, computing <code>i*i</code> and <code>i*i*i</code> and dynamically constructing the table markup.</div>
        </div>
        <div id="result-box-8" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-8"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(7)">◀ Previous</button><button class="btn-page" onclick="switchProgram(9)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 9 -->
      <div id="prog-9" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Table Formatting</span><span class="badge badge-easy">Easy</span><span class="badge badge-marks">Weightage: 10 Marks</span></div>
        <h2 class="question-title">Q9. Styled Table with Double Border & Cellpadding</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Create a table with double border, cellpadding 5, cellspacing 5, dynamic background color, and appropriate size.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 8 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-9">00:00</span> <button class="timer-btn" onclick="toggleTimer(9)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-9">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    table {
      width: 80%;
      height: 150px;
      border: 4px double #ff6600;
      border-spacing: 5px; /* Cell spacing equivalent */
      background-color: #fff8f0;
      margin: auto;
    }
    td, th {
      border: 1px solid #333;
      padding: 5px; /* Cell padding equivalent */
      text-align: center;
    }
    th { background-color: #ffe0cc; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h3 style="text-align:center;"&gt;Custom Styled Table&lt;/h3&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;Item Code&lt;/th&gt;
      &lt;th&gt;Item Name&lt;/th&gt;
      &lt;th&gt;Price&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;P001&lt;/td&gt;
      &lt;td&gt;Web Designing Book&lt;/td&gt;
      &lt;td&gt;₹350&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;P002&lt;/td&gt;
      &lt;td&gt;Python Module Kit&lt;/td&gt;
      &lt;td&gt;₹450&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(9, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-9" onclick="toggleResult(9, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-9" onclick="toggleCompletion(9)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(9)"><span>💡 How this code works</span><span id="acc-icon-9">➕</span></div>
          <div class="accordion-body" id="acc-body-9">Uses CSS properties <code>border: 4px double #ff6600</code>, <code>border-spacing: 5px</code>, and <code>padding: 5px</code> to achieve exact legacy formatting cleanly.</div>
        </div>
        <div id="result-box-9" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-9"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(8)">◀ Previous</button><button class="btn-page" onclick="switchProgram(10)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 10 -->
      <div id="prog-10" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Lists</span><span class="badge badge-medium">Medium</span><span class="badge badge-marks">Weightage: 15 Marks</span></div>
        <h2 class="question-title">Q10. HTML Ordered, Unordered & Definition Lists for Indian States</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> List 4 states using Ordered, Unordered, and Definition lists with custom text colors and attributes.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 10 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-10">00:00</span> <button class="timer-btn" onclick="toggleTimer(10)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-10">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    body { background-color: #f0f4f8; font-family: Arial; padding: 15px; }
    ol { color: red; }
    ul { color: blue; }
    dl { color: green; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h3&gt;Indian States List Demonstration&lt;/h3&gt;

  &lt;h4&gt;1. Ordered List (Numbered A, B, C...)&lt;/h4&gt;
  &lt;ol type="A" start="1"&gt;
    &lt;li&gt;Uttar Pradesh&lt;/li&gt;
    &lt;li&gt;Maharashtra&lt;/li&gt;
    &lt;li&gt;Rajasthan&lt;/li&gt;
    &lt;li&gt;Madhya Pradesh&lt;/li&gt;
  &lt;/ol&gt;

  &lt;h4&gt;2. Unordered List (Square Bullets)&lt;/h4&gt;
  &lt;ul type="square"&gt;
    &lt;li&gt;Uttar Pradesh&lt;/li&gt;
    &lt;li&gt;Maharashtra&lt;/li&gt;
    &lt;li&gt;Rajasthan&lt;/li&gt;
    &lt;li&gt;Madhya Pradesh&lt;/li&gt;
  &lt;/ul&gt;

  &lt;h4&gt;3. Definition List&lt;/h4&gt;
  &lt;dl&gt;
    &lt;dt&gt;&lt;b&gt;Uttar Pradesh&lt;/b&gt;&lt;/dt&gt;
    &lt;dd&gt;Capital: Lucknow&lt;/dd&gt;
    &lt;dt&gt;&lt;b&gt;Maharashtra&lt;/b&gt;&lt;/dt&gt;
    &lt;dd&gt;Capital: Mumbai&lt;/dd&gt;
  &lt;/dl&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(10, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-10" onclick="toggleResult(10, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-10" onclick="toggleCompletion(10)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(10)"><span>💡 How this code works</span><span id="acc-icon-10">➕</span></div>
          <div class="accordion-body" id="acc-body-10">Demonstrates <code>&lt;ol&gt;</code> with <code>type="A"</code>, <code>&lt;ul&gt;</code> with <code>type="square"</code>, and <code>&lt;dl&gt;</code> definition pairs, each styled in distinct colors.</div>
        </div>
        <div id="result-box-10" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-10"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(9)">◀ Previous</button><button class="btn-page" onclick="switchProgram(11)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 11 -->
      <div id="prog-11" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Form Validation</span><span class="badge badge-medium">Medium</span><span class="badge badge-marks">Weightage: 15 Marks</span></div>
        <h2 class="question-title">Q11. Swimming Membership Form with Age Validation</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Design "Swimming Membership Form" with Name, Address (Textarea), Contact Number, Age (Validation 10-18), and Duration radio buttons.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 12 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-11">00:00</span> <button class="timer-btn" onclick="toggleTimer(11)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-11">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    body { font-family: Arial; padding: 15px; }
    .form-container { width: 350px; margin: auto; border: 1px solid #ccc; padding: 15px; border-radius: 8px; }
    h2 { text-align: center; color: #ff6600; }
    .row { margin-bottom: 10px; }
    label { font-weight: bold; display: block; }
    input[type="text"], input[type="number"], textarea { width: 100%; padding: 6px; box-sizing: border-box; }
    .radio-group { display: flex; gap: 10px; margin-top: 5px; }
    button { width: 100%; background: #ff6600; color: white; border: none; padding: 8px; cursor: pointer; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="form-container"&gt;
    &lt;h2&gt;Swimming Membership Form&lt;/h2&gt;
    &lt;form&gt;
      &lt;div class="row"&gt;&lt;label&gt;Name:&lt;/label&gt;&lt;input type="text" required&gt;&lt;/div&gt;
      &lt;div class="row"&gt;&lt;label&gt;Address:&lt;/label&gt;&lt;textarea rows="2" required&gt;&lt;/textarea&gt;&lt;/div&gt;
      &lt;div class="row"&gt;&lt;label&gt;Contact Number:&lt;/label&gt;&lt;input type="text" required&gt;&lt;/div&gt;
      &lt;div class="row"&gt;&lt;label&gt;Age (10-18):&lt;/label&gt;&lt;input type="number" min="10" max="18" required&gt;&lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;label&gt;Membership Duration:&lt;/label&gt;
        &lt;div class="radio-group"&gt;
          &lt;label&gt;&lt;input type="radio" name="dur" value="1" required&gt; 1 Month&lt;/label&gt;
          &lt;label&gt;&lt;input type="radio" name="dur" value="2"&gt; 2 Months&lt;/label&gt;
          &lt;label&gt;&lt;input type="radio" name="dur" value="3"&gt; 3 Months&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;button type="submit"&gt;Join Membership&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(11, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-11" onclick="toggleResult(11, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-11" onclick="toggleCompletion(11)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(11)"><span>💡 How this code works</span><span id="acc-icon-11">➕</span></div>
          <div class="accordion-body" id="acc-body-11">Uses <code>min="10" max="18"</code> on numeric inputs for constraint validation and radio buttons grouped by <code>name="dur"</code>.</div>
        </div>
        <div id="result-box-11" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-11"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(10)">◀ Previous</button><button class="btn-page" onclick="switchProgram(12)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 12 -->
      <div id="prog-12" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Formatting</span><span class="badge badge-easy">Easy</span><span class="badge badge-marks">Weightage: 5 Marks</span></div>
        <h2 class="question-title">Q12. Centered Heading and 3-Line Paragraph with Background</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Use H1 tag for centered title introduction, create a paragraph spanning 3 lines, and set a custom background color.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 5 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-12">00:00</span> <button class="timer-btn" onclick="toggleTimer(12)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-12">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    body { background-color: #e3f2fd; font-family: Arial, sans-serif; padding: 20px; }
    h1 { text-align: center; color: #0d47a1; }
    p { font-size: 16px; line-height: 1.8; color: #333; text-align: justify; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Introduction to Web Designing&lt;/h1&gt;
  &lt;p&gt;
    Web Designing is an exciting field that combines creativity and technical skills to build websites.&lt;br&gt;
    It involves learning HTML for structure, CSS for styling, and JavaScript for interactive features.&lt;br&gt;
    Mastering these core technologies empowers students to create modern responsive web applications.
  &lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(12, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-12" onclick="toggleResult(12, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-12" onclick="toggleCompletion(12)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(12)"><span>💡 How this code works</span><span id="acc-icon-12">➕</span></div>
          <div class="accordion-body" id="acc-body-12">Uses <code>text-align: center</code> on H1 and line break tags <code>&lt;br&gt;</code> to separate the paragraph into 3 distinct lines.</div>
        </div>
        <div id="result-box-12" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-12"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(11)">◀ Previous</button><button class="btn-page" onclick="switchProgram(13)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 13 -->
      <div id="prog-13" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Table</span><span class="badge badge-easy">Easy</span><span class="badge badge-marks">Weightage: 10 Marks</span></div>
        <h2 class="question-title">Q13. Student Data Table with 3 Entries</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Create an HTML table with columns: Sr No, Name, Class, Year of Passing, Percentage. Populate with 3 entries.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 8 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-13">00:00</span> <button class="timer-btn" onclick="toggleTimer(13)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-13">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    table { width: 100%; border-collapse: collapse; }
    th, td { border: 1px solid #000; padding: 8px; text-align: center; }
    th { background-color: #ff6600; color: #fff; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h3&gt;Student Academic Records&lt;/h3&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;Sr No&lt;/th&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Class&lt;/th&gt;
      &lt;th&gt;Year of Passing&lt;/th&gt;
      &lt;th&gt;Percentage&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;Aman Gupta&lt;/td&gt;&lt;td&gt;O Level&lt;/td&gt;&lt;td&gt;2024&lt;/td&gt;&lt;td&gt;82%&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;Suman Singh&lt;/td&gt;&lt;td&gt;A Level&lt;/td&gt;&lt;td&gt;2025&lt;/td&gt;&lt;td&gt;88%&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;Rohan Mehta&lt;/td&gt;&lt;td&gt;CCC&lt;/td&gt;&lt;td&gt;2024&lt;/td&gt;&lt;td&gt;76%&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(13, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-13" onclick="toggleResult(13, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-13" onclick="toggleCompletion(13)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(13)"><span>💡 How this code works</span><span id="acc-icon-13">➕</span></div>
          <div class="accordion-body" id="acc-body-13">Structured HTML table layout using 5 column headers and 3 standard data rows.</div>
        </div>
        <div id="result-box-13" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-13"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(12)">◀ Previous</button><button class="btn-page" onclick="switchProgram(14)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 14 -->
      <div id="prog-14" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Form Dropdown</span><span class="badge badge-easy">Easy</span><span class="badge badge-marks">Weightage: 10 Marks</span></div>
        <h2 class="question-title">Q14. Library Management Form with Dropdown</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Create a Library Management form with Name, Father's Name, Email ID, Year dropdown (1st, 2nd, 3rd Year), and Submit button.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 8 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-14">00:00</span> <button class="timer-btn" onclick="toggleTimer(14)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-14">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    body { font-family: Arial; padding: 15px; }
    .form-card { width: 320px; border: 1px solid #ddd; padding: 15px; border-radius: 6px; }
    .field { margin-bottom: 10px; }
    label { display: block; font-weight: bold; }
    input, select { width: 100%; padding: 6px; margin-top: 4px; box-sizing: border-box; }
    button { background: #ff6600; color: #fff; border: none; padding: 8px 15px; cursor: pointer; width: 100%; margin-top: 10px; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="form-card"&gt;
    &lt;h3 style="text-align:center; margin-top:0;"&gt;Library Management&lt;/h3&gt;
    &lt;form&gt;
      &lt;div class="field"&gt;&lt;label&gt;Name:&lt;/label&gt;&lt;input type="text" required&gt;&lt;/div&gt;
      &lt;div class="field"&gt;&lt;label&gt;Father's Name:&lt;/label&gt;&lt;input type="text" required&gt;&lt;/div&gt;
      &lt;div class="field"&gt;&lt;label&gt;Email ID:&lt;/label&gt;&lt;input type="email" required&gt;&lt;/div&gt;
      &lt;div class="field"&gt;
        &lt;label&gt;Academic Year:&lt;/label&gt;
        &lt;select&gt;
          &lt;option&gt;1st Year&lt;/option&gt;
          &lt;option&gt;2nd Year&lt;/option&gt;
          &lt;option&gt;3rd Year&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;button type="submit"&gt;Submit Request&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(14, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-14" onclick="toggleResult(14, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-14" onclick="toggleCompletion(14)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(14)"><span>💡 How this code works</span><span id="acc-icon-14">➕</span></div>
          <div class="accordion-body" id="acc-body-14">Utilizes <code>&lt;select&gt;</code> and <code>&lt;option&gt;</code> elements to create a clean drop-down menu selection for academic years.</div>
        </div>
        <div id="result-box-14" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-14"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(13)">◀ Previous</button><button class="btn-page" onclick="switchProgram(15)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 15 -->
      <div id="prog-15" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Frames / Iframe Layout</span><span class="badge badge-medium">Medium</span><span class="badge badge-marks">Weightage: 15 Marks</span></div>
        <h2 class="question-title">Q15. Interactive Two-Pane Layout for National Leaders</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Create a two-frame/pane webpage where clicking a leader's link in the left pane displays details in the right target frame.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 12 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-15">00:00</span> <button class="timer-btn" onclick="toggleTimer(15)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-15">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    body { display: flex; height: 280px; margin: 0; font-family: Arial; }
    .left-pane { width: 40%; background: #f4f4f4; padding: 10px; border-right: 2px solid #ccc; }
    .right-pane { width: 60%; padding: 10px; }
    a { display: block; margin-bottom: 8px; color: #ff6600; text-decoration: none; font-weight: bold; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="left-pane"&gt;
    &lt;h4&gt;National Leaders&lt;/h4&gt;
    &lt;a href="javascript:void(0)" onclick="showLeader('Mahatma Gandhi', 'Father of the Nation, leader of Indian Independence Movement through non-violence.')"&gt;Mahatma Gandhi&lt;/a&gt;
    &lt;a href="javascript:void(0)" onclick="showLeader('Netaji Subhash Chandra Bose', 'Founder of Azad Hind Fauj (INA), key figure in armed struggle for independence.')"&gt;Subhash Chandra Bose&lt;/a&gt;
  &lt;/div&gt;

  &lt;div class="right-pane" id="details-pane"&gt;
    &lt;h4&gt;Leader Details&lt;/h4&gt;
    &lt;p&gt;Click a leader name on the left to view details.&lt;/p&gt;
  &lt;/div&gt;

  &lt;script&gt;
    function showLeader(name, desc) {
      document.getElementById('details-pane').innerHTML = `&lt;h3 style="color:#ff6600;"&gt;${name}&lt;/h3&gt;&lt;p&gt;${desc}&lt;/p&gt;`;
    }
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(15, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-15" onclick="toggleResult(15, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-15" onclick="toggleCompletion(15)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(15)"><span>💡 How this code works</span><span id="acc-icon-15">➕</span></div>
          <div class="accordion-body" id="acc-body-15">Simulates dual frame behavior using modern Flexbox split view and JS event target updates.</div>
        </div>
        <div id="result-box-15" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-15"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(14)">◀ Previous</button><button class="btn-page" onclick="switchProgram(16)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 16 -->
      <div id="prog-16" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Formatting</span><span class="badge badge-easy">Easy</span><span class="badge badge-marks">Weightage: 5 Marks</span></div>
        <h2 class="question-title">Q16. Simple Bio-Data Webpage Display</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Write HTML code to display Bio-data showing Name, Father's Name, Date of Birth, and Age.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 5 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-16">00:00</span> <button class="timer-btn" onclick="toggleTimer(16)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-16">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    .biodata-box { width: 300px; border: 2px solid #ff6600; padding: 15px; border-radius: 8px; font-family: Arial; }
    h2 { text-align: center; color: #ff6600; border-bottom: 1px solid #ddd; padding-bottom: 5px; }
    p { font-size: 14px; margin: 8px 0; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="biodata-box"&gt;
    &lt;h2&gt;BIO-DATA&lt;/h2&gt;
    &lt;p&gt;&lt;b&gt;Name:&lt;/b&gt; Rajesh Kumar&lt;/p&gt;
    &lt;p&gt;&lt;b&gt;Father's Name:&lt;/b&gt; Shri Suresh Kumar&lt;/p&gt;
    &lt;p&gt;&lt;b&gt;Date of Birth:&lt;/b&gt; 15/08/2002&lt;/p&gt;
    &lt;p&gt;&lt;b&gt;Age:&lt;/b&gt; 22 Years&lt;/p&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(16, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-16" onclick="toggleResult(16, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-16" onclick="toggleCompletion(16)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(16)"><span>💡 How this code works</span><span id="acc-icon-16">➕</span></div>
          <div class="accordion-body" id="acc-body-16">Uses simple semantic HTML tags like <code>&lt;h2&gt;</code>, <code>&lt;p&gt;</code>, and <code>&lt;b&gt;</code> for organized data presentation.</div>
        </div>
        <div id="result-box-16" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-16"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(15)">◀ Previous</button><button class="btn-page" onclick="switchProgram(17)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 17 -->
      <div id="prog-17" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Lists</span><span class="badge badge-easy">Easy</span><span class="badge badge-marks">Weightage: 10 Marks</span></div>
        <h2 class="question-title">Q17. Combination of OL, UL, and DL Lists</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Create an HTML document with (a) Top 3 Books (OL), (b) Hobbies (UL), and (c) Common HTML Tags (DL).</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 8 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-17">00:00</span> <button class="timer-btn" onclick="toggleTimer(17)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-17">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body style="font-family: Arial; padding: 15px;"&gt;
  &lt;h3&gt;(a) Favourite Books (Ordered List)&lt;/h3&gt;
  &lt;ol&gt;
    &lt;li&gt;Wings of Fire&lt;/li&gt;
    &lt;li&gt;The Alchemist&lt;/li&gt;
    &lt;li&gt;Atomic Habits&lt;/li&gt;
  &lt;/ol&gt;

  &lt;h3&gt;(b) Hobbies (Unordered List)&lt;/h3&gt;
  &lt;ul&gt;
    &lt;li&gt;Web Coding&lt;/li&gt;
    &lt;li&gt;Reading Tech Blogs&lt;/li&gt;
    &lt;li&gt;Playing Chess&lt;/li&gt;
  &lt;/ul&gt;

  &lt;h3&gt;(c) HTML Tags Glossary (Definition List)&lt;/h3&gt;
  &lt;dl&gt;
    &lt;dt&gt;&lt;b&gt;&amp;lt;h1&amp;gt;&lt;/b&gt;&lt;/dt&gt;
    &lt;dd&gt;Defines the most important top-level heading.&lt;/dd&gt;
    &lt;dt&gt;&lt;b&gt;&amp;lt;p&amp;gt;&lt;/b&gt;&lt;/dt&gt;
    &lt;dd&gt;Defines a paragraph block of text.&lt;/dd&gt;
  &lt;/dl&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(17, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-17" onclick="toggleResult(17, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-17" onclick="toggleCompletion(17)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(17)"><span>💡 How this code works</span><span id="acc-icon-17">➕</span></div>
          <div class="accordion-body" id="acc-body-17">Demonstrates all three list structures in HTML: <code>&lt;ol&gt;</code>, <code>&lt;ul&gt;</code>, and <code>&lt;dl&gt;</code>.</div>
        </div>
        <div id="result-box-17" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-17"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(16)">◀ Previous</button><button class="btn-page" onclick="switchProgram(18)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 18 -->
      <div id="prog-18" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Table Merge</span><span class="badge badge-medium">Medium</span><span class="badge badge-marks">Weightage: 15 Marks</span></div>
        <h2 class="question-title">Q18. Employee Table with ROWSPAN & COLSPAN</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Create an employee table using ROWSPAN to merge repeated departments and COLSPAN for aligned table headers.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 10 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-18">00:00</span> <button class="timer-btn" onclick="toggleTimer(18)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-18">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    table { width: 100%; border-collapse: collapse; text-align: center; }
    th, td { border: 1px solid #333; padding: 8px; }
    th { background-color: #ff6600; color: white; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h3&gt;Employee Department Matrix&lt;/h3&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;th colspan="3"&gt;GyanXP Employee Directory&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Department&lt;/th&gt;
      &lt;th&gt;Emp ID&lt;/th&gt;
      &lt;th&gt;Emp Name&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td rowspan="2"&gt;&lt;b&gt;IT Dept&lt;/b&gt;&lt;/td&gt;
      &lt;td&gt;E101&lt;/td&gt;
      &lt;td&gt;Aarav Sharma&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;E102&lt;/td&gt;
      &lt;td&gt;Kavya Verma&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;b&gt;HR Dept&lt;/b&gt;&lt;/td&gt;
      &lt;td&gt;E103&lt;/td&gt;
      &lt;td&gt;Rohan Das&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(18, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-18" onclick="toggleResult(18, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-18" onclick="toggleCompletion(18)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(18)"><span>💡 How this code works</span><span id="acc-icon-18">➕</span></div>
          <div class="accordion-body" id="acc-body-18">Uses <code>colspan="3"</code> to span the main title across columns and <code>rowspan="2"</code> to merge IT department cells.</div>
        </div>
        <div id="result-box-18" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-18"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(17)">◀ Previous</button><button class="btn-page" onclick="switchProgram(19)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 19 -->
      <div id="prog-19" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Formatting</span><span class="badge badge-easy">Easy</span><span class="badge badge-marks">Weightage: 5 Marks</span></div>
        <h2 class="question-title">Q19. Welcome Page with Text Formatting (Bold, Italic, Underline)</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Create welcome.html with a large title "Welcome to My Webpage", two self-description paragraphs, and bold, italic, and underline tags.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 5 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-19">00:00</span> <button class="timer-btn" onclick="toggleTimer(19)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-19">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body style="font-family: Arial; padding: 15px;"&gt;
  &lt;h1 style="color:#ff6600;"&gt;Welcome to My Webpage&lt;/h1&gt;
  
  &lt;p&gt;
    Hello! I am a student preparing for the &lt;b&gt;NIELIT O Level Course&lt;/b&gt;. 
    I enjoy &lt;i&gt;developing clean interactive web user interfaces&lt;/i&gt;.
  &lt;/p&gt;
  
  &lt;p&gt;
    My goal is to achieve &lt;u&gt;top marks in Web Designing &amp; Publishing (M2-R5)&lt;/u&gt; by practicing daily live coding practicals.
  &lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(19, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-19" onclick="toggleResult(19, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-19" onclick="toggleCompletion(19)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(19)"><span>💡 How this code works</span><span id="acc-icon-19">➕</span></div>
          <div class="accordion-body" id="acc-body-19">Demonstrates inline semantic text formatting tags: <code>&lt;b&gt;</code> for bold, <code>&lt;i&gt;</code> for italic, and <code>&lt;u&gt;</code> for underline.</div>
        </div>
        <div id="result-box-19" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-19"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(18)">◀ Previous</button><button class="btn-page" onclick="switchProgram(20)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 20 -->
      <div id="prog-20" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">CSS Animations</span><span class="badge badge-easy">Easy</span><span class="badge badge-marks">Weightage: 10 Marks</span></div>
        <h2 class="question-title">Q20. Styled Word "Welcome" with Color Change on Hover</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Display "Welcome" with center alignment, large font size, bold, underline, and color change on mouse hover.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 5 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-20">00:00</span> <button class="timer-btn" onclick="toggleTimer(20)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-20">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    .welcome-text {
      text-align: center;
      font-size: 48px;
      font-weight: bold;
      text-decoration: underline;
      color: #1f2421;
      transition: color 0.3s ease;
      cursor: pointer;
      margin-top: 50px;
    }
    .welcome-text:hover {
      color: #ff6600;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="welcome-text"&gt;Welcome&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(20, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-20" onclick="toggleResult(20, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-20" onclick="toggleCompletion(20)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(20)"><span>💡 How this code works</span><span id="acc-icon-20">➕</span></div>
          <div class="accordion-body" id="acc-body-20">Combines CSS text property rules with the <code>:hover</code> pseudo-class to smooth-transition text color.</div>
        </div>
        <div id="result-box-20" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-20"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(19)">◀ Previous</button><button class="btn-page" onclick="switchProgram(21)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 21 -->
      <div id="prog-21" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Table Layout</span><span class="badge badge-medium">Medium</span><span class="badge badge-marks">Weightage: 15 Marks</span></div>
        <h2 class="question-title">Q21. Webpage Layout using Table for College Infrastructure</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Use HTML tables to provide layout structure describing your college infrastructure.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 10 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-21">00:00</span> <button class="timer-btn" onclick="toggleTimer(21)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-21">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    .layout-table { width: 100%; border-collapse: collapse; font-family: Arial; }
    .header-cell { background: #ff6600; color: white; padding: 15px; text-align: center; }
    .nav-cell { width: 25%; background: #f8f9fa; padding: 10px; vertical-align: top; border-right: 1px solid #ccc; }
    .content-cell { padding: 15px; vertical-align: top; }
    .footer-cell { background: #1f2421; color: white; text-align: center; padding: 8px; font-size: 12px; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;table class="layout-table" border="1"&gt;
    &lt;tr&gt;&lt;td colspan="2" class="header-cell"&gt;&lt;h2 style="margin:0;"&gt;Government Polytechnic Infrastructure&lt;/h2&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="nav-cell"&gt;
        &lt;b&gt;Facilities&lt;/b&gt;&lt;br&gt;&lt;br&gt;
        • Computer Labs&lt;br&gt;
        • Central Library&lt;br&gt;
        • Sports Complex&lt;br&gt;
        • Auditorium
      &lt;/td&gt;
      &lt;td class="content-cell"&gt;
        &lt;h3&gt;State-of-the-Art Computer Labs&lt;/h3&gt;
        &lt;p&gt;Our campus features high-speed internet-enabled modern labs with over 200 high-performance workstations for IT students.&lt;/p&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;&lt;td colspan="2" class="footer-cell"&gt;© 2026 College Campus Portal&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(21, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-21" onclick="toggleResult(21, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-21" onclick="toggleCompletion(21)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(21)"><span>💡 How this code works</span><span id="acc-icon-21">➕</span></div>
          <div class="accordion-body" id="acc-body-21">Demonstrates classic table-based structural web layout using headers, sidebar columns, main content, and footers.</div>
        </div>
        <div id="result-box-21" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-21"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(20)">◀ Previous</button><button class="btn-page" onclick="switchProgram(22)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 22 -->
      <div id="prog-22" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Grid Layout</span><span class="badge badge-medium">Medium</span><span class="badge badge-marks">Weightage: 15 Marks</span></div>
        <h2 class="question-title">Q22. Student Profile Grid Layout (2 Rows x 3 Columns)</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Webpage layout: Top Row spanning 3 cols (Header: Student Profile in Bold with Orange BG). Second Row (3 Cols): Personal Details, Academic Table, Hobbies.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 12 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-22">00:00</span> <button class="timer-btn" onclick="toggleTimer(22)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-22">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    table { width: 100%; border-collapse: collapse; font-family: Arial; }
    td, th { border: 1px solid #333; padding: 10px; vertical-align: top; }
    .header { background-color: orange; color: white; text-align: center; font-weight: bold; font-size: 20px; }
    .sub-table { width: 100%; border-collapse: collapse; }
    .sub-table td { border: 1px solid #ccc; padding: 4px; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td colspan="3" class="header"&gt;Header: Student Profile&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td width="33%"&gt;
        &lt;h4 style="margin-top:0;"&gt;Personal Details&lt;/h4&gt;
        &lt;p&gt;&lt;b&gt;Name:&lt;/b&gt; Vikram Malhotra&lt;/p&gt;
        &lt;p&gt;&lt;b&gt;Age:&lt;/b&gt; 20&lt;/p&gt;
        &lt;p&gt;&lt;b&gt;Address:&lt;/b&gt; Lucknow, UP&lt;/p&gt;
      &lt;/td&gt;
      &lt;td width="33%"&gt;
        &lt;h4 style="margin-top:0;"&gt;Academic Information&lt;/h4&gt;
        &lt;table class="sub-table"&gt;
          &lt;tr&gt;&lt;th&gt;Subject&lt;/th&gt;&lt;th&gt;Grade&lt;/th&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;M2-R5&lt;/td&gt;&lt;td&gt;S Grade&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;M1-R5&lt;/td&gt;&lt;td&gt;A Grade&lt;/td&gt;&lt;/tr&gt;
        &lt;/table&gt;
      &lt;/td&gt;
      &lt;td width="33%"&gt;
        &lt;h4 style="margin-top:0;"&gt;Hobbies&lt;/h4&gt;
        &lt;ul style="padding-left:18px;"&gt;
          &lt;li&gt;Web Coding&lt;/li&gt;
          &lt;li&gt;Playing Chess&lt;/li&gt;
          &lt;li&gt;Blogging&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(22, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-22" onclick="toggleResult(22, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-22" onclick="toggleCompletion(22)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(22)"><span>💡 How this code works</span><span id="acc-icon-22">➕</span></div>
          <div class="accordion-body" id="acc-body-22">Full fills 2-row multi-column grid specs with <code>colspan="3"</code> top header span and nested table formatting.</div>
        </div>
        <div id="result-box-22" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-22"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(21)">◀ Previous</button><button class="btn-page" onclick="switchProgram(23)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 23 -->
      <div id="prog-23" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Form Validation</span><span class="badge badge-medium">Medium</span><span class="badge badge-marks">Weightage: 15 Marks</span></div>
        <h2 class="question-title">Q23. Swimming Membership Form with Title Alignment</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Design swimming membership form with name, address textarea, contact, age (10-18), properly aligned with title "Swimming Membership Form".</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 10 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-23">00:00</span> <button class="timer-btn" onclick="toggleTimer(23)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-23">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    .form-wrapper { width: 340px; margin: 10px auto; border: 2px solid #ff6600; padding: 15px; border-radius: 8px; font-family: Arial; }
    .form-title { text-align: center; color: #ff6600; text-transform: uppercase; font-size: 18px; margin-bottom: 15px; }
    .input-group { margin-bottom: 10px; }
    label { font-size: 13px; font-weight: bold; display: block; margin-bottom: 3px; }
    input[type="text"], input[type="number"], textarea { width: 100%; padding: 6px; box-sizing: border-box; }
    button { background: #ff6600; color: #fff; border: none; padding: 8px; width: 100%; cursor: pointer; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="form-wrapper"&gt;
    &lt;div class="form-title"&gt;Swimming Membership Form&lt;/div&gt;
    &lt;form&gt;
      &lt;div class="input-group"&gt;&lt;label&gt;Member Name:&lt;/label&gt;&lt;input type="text" required&gt;&lt;/div&gt;
      &lt;div class="input-group"&gt;&lt;label&gt;Address:&lt;/label&gt;&lt;textarea rows="2" required&gt;&lt;/textarea&gt;&lt;/div&gt;
      &lt;div class="input-group"&gt;&lt;label&gt;Contact Number:&lt;/label&gt;&lt;input type="text" required&gt;&lt;/div&gt;
      &lt;div class="input-group"&gt;&lt;label&gt;Age (10 - 18):&lt;/label&gt;&lt;input type="number" min="10" max="18" required&gt;&lt;/div&gt;
      &lt;button type="submit"&gt;Submit Application&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(23, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-23" onclick="toggleResult(23, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-23" onclick="toggleCompletion(23)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(23)"><span>💡 How this code works</span><span id="acc-icon-23">➕</span></div>
          <div class="accordion-body" id="acc-body-23">Validates range 10 to 18 automatically on submission using HTML5 constraints.</div>
        </div>
        <div id="result-box-23" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-23"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(22)">◀ Previous</button><button class="btn-page" onclick="switchProgram(24)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 24 -->
      <div id="prog-24" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">JavaScript Conditional Logic</span><span class="badge badge-medium">Medium</span><span class="badge badge-marks">Weightage: 15 Marks</span></div>
        <h2 class="question-title">Q24. JavaScript Simple Interest Calculator (>1 Lakh Conditional Rate)</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Calculate simple interest: If Principal > ₹1,000,000, interest rate is 15%; otherwise, rate is 10%.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 10 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-24">00:00</span> <button class="timer-btn" onclick="toggleTimer(24)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-24">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    body { font-family: Arial; padding: 15px; }
    .input-box { margin-bottom: 8px; }
    button { background: #ff6600; color: #fff; border: none; padding: 6px 12px; cursor: pointer; }
    #out { margin-top: 10px; font-weight: bold; color: #ff6600; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h3&gt;Simple Interest Calculator&lt;/h3&gt;
  &lt;div class="input-box"&gt;Principal (₹): &lt;input type="number" id="p"&gt;&lt;/div&gt;
  &lt;div class="input-box"&gt;Time (Years): &lt;input type="number" id="t"&gt;&lt;/div&gt;
  &lt;button onclick="calcInterest()"&gt;Calculate Interest&lt;/button&gt;

  &lt;div id="out"&gt;&lt;/div&gt;

  &lt;script&gt;
    function calcInterest() {
      let p = parseFloat(document.getElementById('p').value);
      let t = parseFloat(document.getElementById('t').value);
      if(isNaN(p) || isNaN(t)) return;

      let r = (p &gt; 100000) ? 15 : 10;
      let si = (p * r * t) / 100;

      document.getElementById('out').innerHTML = `Rate Applied: ${r}% &lt;br&gt;Simple Interest: ₹${si.toFixed(2)}`;
    }
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(24, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-24" onclick="toggleResult(24, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-24" onclick="toggleCompletion(24)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(24)"><span>💡 How this code works</span><span id="acc-icon-24">➕</span></div>
          <div class="accordion-body" id="acc-body-24">Uses conditional ternary operator <code>(p > 100000) ? 15 : 10</code> to dynamically assign interest rate.</div>
        </div>
        <div id="result-box-24" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-24"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(23)">◀ Previous</button><button class="btn-page" onclick="switchProgram(25)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 25 -->
      <div id="prog-25" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">JavaScript Application</span><span class="badge badge-medium">Medium</span><span class="badge badge-marks">Weightage: 15 Marks</span></div>
        <h2 class="question-title">Q25. Student Marks Calculation, Result & Grade Calculator</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Create student form to calculate total marks, average, pass/fail result, and grade using JavaScript.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 12 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-25">00:00</span> <button class="timer-btn" onclick="toggleTimer(25)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-25">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    body { font-family: Arial; padding: 15px; }
    .input-row { margin-bottom: 6px; }
    button { background: #ff6600; color: #fff; border: none; padding: 6px 12px; cursor: pointer; }
    #report { margin-top: 12px; line-height: 1.6; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h3&gt;Student Grade Report Calculator&lt;/h3&gt;
  &lt;div class="input-row"&gt;Subject 1: &lt;input type="number" id="m1"&gt;&lt;/div&gt;
  &lt;div class="input-row"&gt;Subject 2: &lt;input type="number" id="m2"&gt;&lt;/div&gt;
  &lt;div class="input-row"&gt;Subject 3: &lt;input type="number" id="m3"&gt;&lt;/div&gt;
  &lt;button onclick="calcResult()"&gt;Calculate Grade&lt;/button&gt;

  &lt;div id="report"&gt;&lt;/div&gt;

  &lt;script&gt;
    function calcResult() {
      let m1 = parseFloat(document.getElementById('m1').value) || 0;
      let m2 = parseFloat(document.getElementById('m2').value) || 0;
      let m3 = parseFloat(document.getElementById('m3').value) || 0;

      let total = m1 + m2 + m3;
      let avg = total / 3;
      let result = (m1 >= 33 && m2 >= 33 && m3 >= 33) ? "PASS" : "FAIL";
      let grade = "F";

      if (result === "PASS") {
        if (avg >= 85) grade = "S";
        else if (avg >= 75) grade = "A";
        else if (avg >= 65) grade = "B";
        else if (avg >= 55) grade = "C";
        else grade = "D";
      }

      document.getElementById('report').innerHTML = `
        &lt;b&gt;Total Marks:&lt;/b&gt; ${total}/300 &lt;br&gt;
        &lt;b&gt;Average:&lt;/b&gt; ${avg.toFixed(2)}% &lt;br&gt;
        &lt;b&gt;Result:&lt;/b&gt; &lt;span style="color:${result==='PASS'?'green':'red'};"&gt;${result}&lt;/span&gt; &lt;br&gt;
        &lt;b&gt;Grade:&lt;/b&gt; ${grade}
      `;
    }
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(25, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-25" onclick="toggleResult(25, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-25" onclick="toggleCompletion(25)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(25)"><span>💡 How this code works</span><span id="acc-icon-25">➕</span></div>
          <div class="accordion-body" id="acc-body-25">Sums three subject marks, calculates average percentage, and evaluates standard grading logic.</div>
        </div>
        <div id="result-box-25" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-25"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(24)">◀ Previous</button><button class="btn-page" onclick="switchProgram(26)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 26 -->
      <div id="prog-26" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">CSS Styling</span><span class="badge badge-medium">Medium</span><span class="badge badge-marks">Weightage: 15 Marks</span></div>
        <h2 class="question-title">Q26. "About My College" Page with Scrolling Text</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Title "about my college", large college name header followed by small address, background image styling, stylized courses list, and scrolling marquee.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 10 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-26">00:00</span> <button class="timer-btn" onclick="toggleTimer(26)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-26">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;about my college&lt;/title&gt;
  &lt;style&gt;
    body {
      background-color: #f0f4f8;
      font-family: Arial, sans-serif;
      padding: 15px;
    }
    .college-header { text-align: center; }
    .college-name { font-size: 28px; font-weight: bold; color: #ff6600; margin: 0; }
    .address { font-size: 12px; color: #666; margin-top: 4px; }
    .c1 { color: #d9534f; font-family: 'Georgia', serif; }
    .c2 { color: #0275d8; font-family: 'Courier New', monospace; }
    .c3 { color: #5cb85c; font-family: 'Verdana', sans-serif; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="college-header"&gt;
    &lt;div class="college-name"&gt;NATIONAL INSTITUTE OF TECHNOLOGY&lt;/div&gt;
    &lt;div class="address"&gt;123 Knowledge Park, City Campus, Pin - 226001&lt;/div&gt;
  &lt;/div&gt;

  &lt;hr&gt;
  &lt;marquee bgcolor="#ff6600" style="color:#fff; padding:5px; font-weight:bold;"&gt;Admissions Open for 2026 Academic Session! Apply Online Today.&lt;/marquee&gt;

  &lt;h3&gt;Offered Courses:&lt;/h3&gt;
  &lt;ul&gt;
    &lt;li class="c1"&gt;NIELIT O Level (Web Designing &amp; Publishing)&lt;/li&gt;
    &lt;li class="c2"&gt;Diploma in Computer Science&lt;/li&gt;
    &lt;li class="c3"&gt;Bachelor of Computer Applications (BCA)&lt;/li&gt;
  &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(26, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-26" onclick="toggleResult(26, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-26" onclick="toggleCompletion(26)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(26)"><span>💡 How this code works</span><span id="acc-icon-26">➕</span></div>
          <div class="accordion-body" id="acc-body-26">Implements <code>&lt;marquee&gt;</code> for scrolling text along with distinct font typography rules for each listed course.</div>
        </div>
        <div id="result-box-26" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-26"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(25)">◀ Previous</button><button class="btn-page" onclick="switchProgram(27)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 27 -->
      <div id="prog-27" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">JavaScript Algorithms</span><span class="badge badge-medium">Medium</span><span class="badge badge-marks">Weightage: 15 Marks</span></div>
        <h2 class="question-title">Q27. JavaScript Even, Odd and Prime Numbers (0 to 100)</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Write a JavaScript program to evaluate and categorize Even, Odd, and Prime numbers from 0 to 100.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 12 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-27">00:00</span> <button class="timer-btn" onclick="toggleTimer(27)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-27">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    body { font-family: Arial; padding: 15px; }
    .box { background: #f8f9fa; border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 6px; word-break: break-word; }
    h4 { margin: 0 0 5px 0; color: #ff6600; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h3&gt;Numbers Classifier (0 - 100)&lt;/h3&gt;
  
  &lt;div class="box"&gt;&lt;h4&gt;Even Numbers:&lt;/h4&gt;&lt;div id="evens"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div class="box"&gt;&lt;h4&gt;Odd Numbers:&lt;/h4&gt;&lt;div id="odds"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div class="box"&gt;&lt;h4&gt;Prime Numbers:&lt;/h4&gt;&lt;div id="primes"&gt;&lt;/div&gt;&lt;/div&gt;

  &lt;script&gt;
    let evens = [], odds = [], primes = [];

    function isPrime(num) {
      if (num &lt; 2) return false;
      for (let i = 2; i &lt;= Math.sqrt(num); i++) {
        if (num % i === 0) return false;
      }
      return true;
    }

    for (let i = 0; i &lt;= 100; i++) {
      if (i % 2 === 0) evens.push(i);
      else odds.push(i);
      
      if (isPrime(i)) primes.push(i);
    }

    document.getElementById('evens').innerText = evens.join(', ');
    document.getElementById('odds').innerText = odds.join(', ');
    document.getElementById('primes').innerText = primes.join(', ');
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(27, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-27" onclick="toggleResult(27, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-27" onclick="toggleCompletion(27)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(27)"><span>💡 How this code works</span><span id="acc-icon-27">➕</span></div>
          <div class="accordion-body" id="acc-body-27">Loops through numbers 0-100, checking modulus <code>i % 2</code> for parity and trial division up to <code>Math.sqrt(num)</code> for prime check.</div>
        </div>
        <div id="result-box-27" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-27"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(26)">◀ Previous</button><button class="btn-page" onclick="switchProgram(28)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 28 -->
      <div id="prog-28" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Frames</span><span class="badge badge-medium">Medium</span><span class="badge badge-marks">Weightage: 10 Marks</span></div>
        <h2 class="question-title">Q28. Target Attribute in HTML Frame/Iframe Navigation</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Demonstrate the target attribute in frames/iframes to update content dynamically.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 8 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-28">00:00</span> <button class="timer-btn" onclick="toggleTimer(28)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-28">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    .frame-wrapper { display: flex; gap: 15px; font-family: Arial; }
    .nav-box { width: 30%; background: #f0f0f0; padding: 10px; border-radius: 6px; }
    .display-box { width: 70%; border: 2px solid #ff6600; padding: 10px; border-radius: 6px; }
    a { display: block; margin-bottom: 8px; color: #ff6600; font-weight: bold; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h3&gt;Target Attribute Demonstration&lt;/h3&gt;
  &lt;div class="frame-wrapper"&gt;
    &lt;div class="nav-box"&gt;
      &lt;a href="https://www.wikipedia.org" target="myTargetFrame"&gt;Load Wikipedia&lt;/a&gt;
      &lt;a href="https://www.bing.com" target="myTargetFrame"&gt;Load Bing Search&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="display-box"&gt;
      &lt;iframe name="myTargetFrame" style="width:100%; height:200px; border:none;" srcdoc="&lt;h4 style='color:#666;'&gt;Click a link on the left to target this frame.&lt;/h4&gt;"&gt;&lt;/iframe&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(28, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-28" onclick="toggleResult(28, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-28" onclick="toggleCompletion(28)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(28)"><span>💡 How this code works</span><span id="acc-icon-28">➕</span></div>
          <div class="accordion-body" id="acc-body-28">Setting <code>target="myTargetFrame"</code> on links directs navigation output straight inside the named iframe.</div>
        </div>
        <div id="result-box-28" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-28"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(27)">◀ Previous</button><button class="btn-page" onclick="switchProgram(29)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 29 -->
      <div id="prog-29" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Image Alignment</span><span class="badge badge-easy">Easy</span><span class="badge badge-marks">Weightage: 10 Marks</span></div>
        <h2 class="question-title">Q29. Image Alignment Layout (Left, Center, Right)</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Create an HTML file displaying three images positioned at LEFT, RIGHT, and CENTER across the browser line.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 8 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-29">00:00</span> <button class="timer-btn" onclick="toggleTimer(29)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-29">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    .image-container { display: flex; justify-content: space-between; align-items: center; padding: 10px; }
    .img-box { text-align: center; font-family: Arial; font-size: 12px; font-weight: bold; }
    img { border: 2px solid #333; border-radius: 6px; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h3 style="text-align:center;"&gt;Image Alignment (Left, Center, Right)&lt;/h3&gt;
  &lt;div class="image-container"&gt;
    &lt;div class="img-box"&gt;
      &lt;img src="https://via.placeholder.com/100/ff6600/ffffff?text=Left" alt="Left"&gt;
      &lt;div&gt;LEFT&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="img-box"&gt;
      &lt;img src="https://via.placeholder.com/100/007bff/ffffff?text=Center" alt="Center"&gt;
      &lt;div&gt;CENTER&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="img-box"&gt;
      &lt;img src="https://via.placeholder.com/100/28a745/ffffff?text=Right" alt="Right"&gt;
      &lt;div&gt;RIGHT&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(29, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-29" onclick="toggleResult(29, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-29" onclick="toggleCompletion(29)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(29)"><span>💡 How this code works</span><span id="acc-icon-29">➕</span></div>
          <div class="accordion-body" id="acc-body-29">Uses <code>justify-content: space-between</code> in Flexbox to position three images cleanly at Left, Center, and Right.</div>
        </div>
        <div id="result-box-29" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-29"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(28)">◀ Previous</button><button class="btn-page" onclick="switchProgram(30)">Next ▶</button></div>
      </div>

      <!-- PRACTICAL 30 -->
      <div id="prog-30" class="program-content">
        <div class="meta-tags"><span class="badge badge-tag">HTML Form Validation</span><span class="badge badge-medium">Medium</span><span class="badge badge-marks">Weightage: 15 Marks</span></div>
        <h2 class="question-title">Q30. Complete Student Registration Form with JS Validation</h2>
        <div class="question-desc"><strong>Problem Statement:</strong> Create an HTML Student Registration Form with JavaScript validation checking empty fields before submission.</div>
        <div class="timer-box">
          <span>⏱ Practice Timer (Recommended: 12 mins)</span>
          <div class="timer-controls"><span class="timer-display" id="timer-30">00:00</span> <button class="timer-btn" onclick="toggleTimer(30)">Start Timer</button></div>
        </div>
        <div class="code-header"><span class="code-section-title">Solution Code:</span></div>
        <pre><code class="language-html" id="code-snippet-30">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    body { font-family: Arial, sans-serif; padding: 15px; }
    .reg-form { width: 320px; border: 1px solid #ccc; padding: 15px; border-radius: 8px; margin: auto; }
    .form-group { margin-bottom: 12px; }
    label { display: block; font-weight: bold; margin-bottom: 4px; }
    input[type="text"], input[type="email"] { width: 100%; padding: 8px; box-sizing: border-box; }
    button { background: #ff6600; color: #fff; border: none; padding: 8px 16px; width: 100%; cursor: pointer; border-radius: 4px; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="reg-form"&gt;
    &lt;h3 style="text-align:center; color:#ff6600;"&gt;Student Registration&lt;/h3&gt;
    &lt;form onsubmit="return validateForm()"&gt;
      &lt;div class="form-group"&gt;
        &lt;label&gt;Full Name:&lt;/label&gt;
        &lt;input type="text" id="fullname" placeholder="Enter full name"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label&gt;Email Address:&lt;/label&gt;
        &lt;input type="email" id="email" placeholder="Enter email address"&gt;
      &lt;/div&gt;
      &lt;button type="submit"&gt;Register Now&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;

  &lt;script&gt;
    function validateForm() {
      let name = document.getElementById('fullname').value;
      let email = document.getElementById('email').value;
      if (name.trim() === "" || email.trim() === "") {
        alert("Validation Error: Please fill in all required fields!");
        return false;
      }
      alert("Registration Successful!");
      return true;
    }
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        <div class="btn-group">
          <button class="btn-action try-code-btn" onclick="openCompilerTab(30, 'html')">▶ Try Code</button>
          <button class="btn-action show-result-btn" id="toggle-btn-30" onclick="toggleResult(30, 'html')">⚡ Show Result</button>
          <button class="btn-action complete-btn" id="mark-btn-30" onclick="toggleCompletion(30)">✔ Mark Done</button>
        </div>
        <div class="accordion-box">
          <div class="accordion-header" onclick="toggleAccordion(30)"><span>💡 How this code works</span><span id="acc-icon-30">➕</span></div>
          <div class="accordion-body" id="acc-body-30">Intercepts standard form submission via <code>onsubmit="return validateForm()"</code>, ensuring fields are verified before submission.</div>
        </div>
        <div id="result-box-30" class="result-container"><div class="result-header">Live Output Window</div><div id="iframe-holder-30"></div></div>
        <div class="pagination-group"><button class="btn-page" onclick="switchProgram(29)">◀ Previous</button><button class="btn-page" disabled>Next ▶</button></div>
      </div>

    </div>
  </div>

</div>

<!-- Prism.js Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>

<script>
  var TOTAL_PROGRAMS = 30;
  var completedPrograms = JSON.parse(localStorage.getItem('gyanxp_m2_completed')) || [];
  var activeTimers = {};

  function scrollIndexSidebar(offset) {
    var sidebarList = document.getElementById('sidebar-list');
    if (sidebarList) {
      sidebarList.scrollBy({ left: offset, behavior: 'smooth' });
    }
  }

  document.addEventListener("DOMContentLoaded", function() { updateProgressUI(); });

  function switchProgram(progId) {
    document.querySelectorAll('.program-content').forEach(function(el) { el.classList.remove('active'); });
    document.querySelectorAll('.nav-btn').forEach(function(btn) { btn.classList.remove('active'); });

    var targetProg = document.getElementById('prog-' + progId);
    var targetBtn = document.getElementById('side-btn-' + progId);

    if (targetProg) targetProg.classList.add('active');
    if (targetBtn) {
      targetBtn.classList.add('active');
      targetBtn.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
    }
  }

  function openCompilerTab(progId, language) {
    var codeText = document.getElementById('code-snippet-' + progId).innerText;
    localStorage.setItem('pendingCode', codeText);
    localStorage.setItem('pendingLang', language);
    window.open('/online-web-compiler/', '_blank');
  }

  function toggleResult(progId, language) {
    var resultBox = document.getElementById('result-box-' + progId);
    var iframeHolder = document.getElementById('iframe-holder-' + progId);
    var toggleBtn = document.getElementById('toggle-btn-' + progId);
    var codeText = document.getElementById('code-snippet-' + progId).innerText;

    if (resultBox.style.display === 'block') {
      resultBox.style.display = 'none';
      iframeHolder.innerHTML = '';
      toggleBtn.innerText = '⚡ Show Result';
      toggleBtn.classList.remove('active-btn');
    } else {
      resultBox.style.display = 'block';
      toggleBtn.innerText = '✕ Hide Result';
      toggleBtn.classList.add('active-btn');
      
      var iframe = document.createElement('iframe');
      iframe.style.width = '100%';
      iframe.style.border = 'none';
      iframeHolder.innerHTML = '';
      iframeHolder.appendChild(iframe);

      var doc = iframe.contentWindow.document;
      doc.open();
      doc.write(codeText);
      doc.close();
    }
  }

  function toggleAccordion(progId) {
    var body = document.getElementById('acc-body-' + progId);
    var icon = document.getElementById('acc-icon-' + progId);
    body.style.display = (body.style.display === 'block') ? 'none' : 'block';
    if (icon) icon.innerText = (body.style.display === 'block') ? '➖' : '➕';
  }

  function toggleTimer(progId) {
    var timerDisplay = document.getElementById('timer-' + progId);
    var timerBtn = timerDisplay.nextElementSibling;
    if (activeTimers[progId]) {
      clearInterval(activeTimers[progId].interval);
      delete activeTimers[progId];
      timerBtn.innerText = 'Start Timer';
    } else {
      var seconds = 0;
      timerBtn.innerText = 'Stop Timer';
      activeTimers[progId] = {
        interval: setInterval(function() {
          seconds++;
          var mins = Math.floor(seconds / 60);
          var secs = seconds % 60;
          timerDisplay.innerText = (mins < 10 ? '0' : '') + mins + ':' + (secs < 10 ? '0' : '') + secs;
        }, 1000)
      };
    }
  }

  function toggleCompletion(progId) {
    var index = completedPrograms.indexOf(progId);
    if (index > -1) completedPrograms.splice(index, 1);
    else completedPrograms.push(progId);
    localStorage.setItem('gyanxp_m2_completed', JSON.stringify(completedPrograms));
    updateProgressUI();
  }

  function updateProgressUI() {
    for (var i = 1; i <= TOTAL_PROGRAMS; i++) {
      var markBtn = document.getElementById('mark-btn-' + i);
      var dot = document.getElementById('dot-' + i);
      if (completedPrograms.includes(i)) {
        if (markBtn) { markBtn.innerText = '✔ Practiced'; markBtn.classList.add('done'); }
        if (dot) dot.innerText = '🟢';
      } else {
        if (markBtn) { markBtn.innerText = '✔ Mark Done'; markBtn.classList.remove('done'); }
        if (dot) dot.innerText = '⚪';
      }
    }
    var percentage = Math.round((completedPrograms.length / TOTAL_PROGRAMS) * 100);
    document.getElementById('progress-fill').style.width = percentage + '%';
    document.getElementById('progress-text').innerText = completedPrograms.length + ' / ' + TOTAL_PROGRAMS + ' Practiced (' + percentage + '%)';
  }
</script>				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		<p>The post <a href="https://gyanxp.com/online-web-practical-solution-pr2/">Online Web Practical Solution (PR2)</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://gyanxp.com/online-web-practical-solution-pr2/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Online Web Compiler</title>
		<link>https://gyanxp.com/online-web-compiler/</link>
					<comments>https://gyanxp.com/online-web-compiler/#respond</comments>
		
		<dc:creator><![CDATA[Balmukund Maurya]]></dc:creator>
		<pubDate>Mon, 17 Aug 2026 12:41:42 +0000</pubDate>
				<category><![CDATA[Online Practical]]></category>
		<guid isPermaLink="false">https://gyanxp.com/?p=6202</guid>

					<description><![CDATA[<p>Run Fullscreen</p>
<p>The post <a href="https://gyanxp.com/online-web-compiler/">Online Web Compiler</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="6202" class="elementor elementor-6202">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-20076a9 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="20076a9" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7b72d43" data-id="7b72d43" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-e5324a0 elementor-widget elementor-widget-html" data-id="e5324a0" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<style>
  /* Base Container */
  .compiler-container {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-sizing: border-box;
  }

  /* Top Toolbar */
  .compiler-toolbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }

  /* Action Buttons */
  .custom-run-btn,
  .fullscreen-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 16px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
    user-select: none;
  }

  .custom-run-btn {
    background-color: #e91e63;
  }

  .custom-run-btn:hover {
    background-color: #d81b60;
  }

  .fullscreen-toggle-btn {
    background-color: #333333;
  }

  .fullscreen-toggle-btn:hover {
    background-color: #444444;
  }

  /* Editor Frame Wrapper */
  .compiler-wrapper {
    width: 100%;
    height: 480px;
    margin: 0;
    padding: 0;
    background-color: #1e1e1e;
    border-radius: 8px;
    overflow: hidden;
  }

  .compiler-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }

  /* Fullscreen Overlay */
  .compiler-container.is-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 9999999 !important;
    background-color: #1e1e1e !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .compiler-container.is-fullscreen .compiler-toolbar {
    flex-shrink: 0;
  }

  .compiler-container.is-fullscreen .compiler-wrapper {
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 4px !important;
  }
</style>

<div id="compiler-container" class="compiler-container">
  <div class="compiler-toolbar">
    <button id="custom-run-btn" class="custom-run-btn" type="button" title="Run Code">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
        <path d="M8 5v14l11-7z"/>
      </svg>
      Run
    </button>

    <button id="fullscreen-btn" class="fullscreen-toggle-btn" type="button" title="Toggle Fullscreen">
      <svg id="fullscreen-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
        <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
      </svg>
      <span id="fullscreen-text">Fullscreen</span>
    </button>
  </div>

  <div class="compiler-wrapper">
    <iframe 
      id="oc-editor"
      src="https://onecompiler.com/embed/html?listenToEvents=true&theme=dark" 
      width="100%" 
      height="100%"
      allow="fullscreen"
      allowfullscreen="true">
    </iframe>
  </div>
</div>

<script>
  (function () {
    var iframe = document.getElementById('oc-editor');
    var runBtn = document.getElementById('custom-run-btn');
    var fullscreenBtn = document.getElementById('fullscreen-btn');
    var container = document.getElementById('compiler-container');
    var fullscreenText = document.getElementById('fullscreen-text');
    var fullscreenIcon = document.getElementById('fullscreen-icon');

    // 1. Trigger Run Programmatically via OneCompiler API
    function triggerRunCode() {
      if (iframe && iframe.contentWindow) {
        iframe.contentWindow.postMessage({
          eventType: 'triggerRun'
        }, 'https://onecompiler.com');
      }
    }

    runBtn.addEventListener('click', function (e) {
      e.preventDefault();
      triggerRunCode();
    });

    // 2. Fullscreen Toggle (Native API with CSS Overlay Fallback)
    function toggleFullscreen() {
      var isFullscreenCSS = container.classList.contains('is-fullscreen');

      if (!document.fullscreenElement && !isFullscreenCSS) {
        if (container.requestFullscreen) {
          container.requestFullscreen().catch(function () {
            container.classList.add('is-fullscreen');
            updateUI(true);
          });
        } else {
          container.classList.add('is-fullscreen');
          updateUI(true);
        }
      } else {
        if (document.exitFullscreen && document.fullscreenElement) {
          document.exitFullscreen();
        } else {
          container.classList.remove('is-fullscreen');
          updateUI(false);
        }
      }
    }

    function updateUI(isFull) {
      if (isFull) {
        fullscreenText.textContent = "Exit Fullscreen";
        fullscreenIcon.innerHTML = '<path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>';
        document.body.style.overflow = 'hidden';
      } else {
        fullscreenText.textContent = "Fullscreen";
        fullscreenIcon.innerHTML = '<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>';
        document.body.style.overflow = '';
      }
    }

    document.addEventListener('fullscreenchange', function () {
      updateUI(!!document.fullscreenElement);
    });

    fullscreenBtn.addEventListener('click', function (e) {
      e.preventDefault();
      toggleFullscreen();
    });

    // 3. Simple Default Code Population with GyanXp Message
    iframe.addEventListener('load', function () {
      var codeText = localStorage.getItem('pendingCode');
      var lang = localStorage.getItem('pendingLang') || 'html';

      // Very simple default code featuring GyanXp
      var defaultCode = '<!DOCTYPE html>\n<html>\n<head>\n  <style>\n    body {\n      font-family: Arial, sans-serif;\n      text-align: center;\n      margin-top: 50px;\n      background-color: #f4f4f4;\n    }\n    h1 {\n      color: #ff6600;\n    }\n    p {\n      color: #333;\n      font-size: 18px;\n    }\n  </style>\n</head>\n<body>\n\n  <h1>Welcome to GyanXp!</h1>\n  <p>Learn Web Designing with Ease.</p>\n\n</body>\n</html>';

      var finalCode = codeText ? codeText : defaultCode;

      // Delayed handshake to ensure OneCompiler listener is ready
      setTimeout(function () {
        iframe.contentWindow.postMessage({
          eventType: 'populateCode',
          language: lang,
          files: [{ name: 'index.html', content: finalCode }]
        }, 'https://onecompiler.com');

        setTimeout(function () {
          triggerRunCode();
          if (codeText) {
            localStorage.removeItem('pendingCode');
            localStorage.removeItem('pendingLang');
          }
        }, 500);
      }, 1000);
    });
  })();
</script>				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		<p>The post <a href="https://gyanxp.com/online-web-compiler/">Online Web Compiler</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://gyanxp.com/online-web-compiler/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Internet of Things (M4-R5.1) Paper Solution Set-4 Series-44 (JUL 2026)</title>
		<link>https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-4-series-44-jul-2026/</link>
					<comments>https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-4-series-44-jul-2026/#respond</comments>
		
		<dc:creator><![CDATA[Balmukund Maurya]]></dc:creator>
		<pubDate>Sun, 16 Aug 2026 14:25:11 +0000</pubDate>
				<category><![CDATA[O Level Paper Solution]]></category>
		<guid isPermaLink="false">https://gyanxp.com/?p=6155</guid>

					<description><![CDATA[<p>Print Answer Key 🌙 Subject Name Internet of Things Paper Code M4-R5.1 Session JUL 2026 Paper Set Set &#8211; 4 Series 44 Question Paper * Downloading and Printing is restricted for this document. Official Answer Key Q. No. Correct Options (OMR View) Bridge ← Prev Page 1 of 10 Next → Check Your Answer Key [&#8230;]</p>
<p>The post <a href="https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-4-series-44-jul-2026/">Internet of Things (M4-R5.1) Paper Solution Set-4 Series-44 (JUL 2026)</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="6155" class="elementor elementor-6155">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-4b28900 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4b28900" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-84bbf3e" data-id="84bbf3e" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-864eebb elementor-widget elementor-widget-html" data-id="864eebb" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<div class="paper-container" id="mainContainer">
    <!-- Top Action Bar -->
    <div class="top-action-bar no-print">
        <button class="action-btn secondary-btn" id="masterPrintBtn" onclick="printAnswerKey()">
            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/><path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"/></svg>
            Print Answer Key
        </button>

        <button class="dark-toggle-btn" id="themeToggle" onclick="toggleDarkMode()" aria-label="Toggle Dark Mode">
            <span class="mode-icon">🌙</span>
        </button>
    </div>

    <!-- Paper Details Header -->
    <header class="paper-header">
        <div class="meta-item subject-item">
            <span class="meta-label">Subject Name</span>
            <span class="meta-value">Internet of Things</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Paper Code</span>
            <span class="meta-value">M4-R5.1</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Session</span>
            <span class="meta-value">JUL 2026</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Paper Set</span>
            <span class="meta-value">Set - 4</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Series</span>
            <span class="meta-value">44</span>
        </div>
    </header>

    <!-- Main Workspace Split -->
    <div class="content-layout">
        <!-- PDF Presentation Block -->
        <div class="pdf-section" id="pdfSection">
            <h3 class="section-title">Question Paper</h3>
            <div class="pdf-wrapper-container">
                <div class="pdf-wrapper">
                    <iframe src="https://drive.google.com/file/d/1csOaGREjbJ6FkgFIpnnVWaJDkYymuxiw/preview" width="640" height="480" allow="autoplay" oncontextmenu="return false;"></iframe>
                </div>
                <div class="pdf-popout-shield"></div>
            </div>
            <p class="security-note">* Downloading and Printing is restricted for this document.</p>
        </div>

        <!-- Answer Grid Console Block -->
        <div class="answer-section" id="printableArea">
            <h3 class="section-title no-print">Official Answer Key</h3>
            
            <div class="search-box no-print">
                <input type="number" id="qSearch" placeholder="Jump to Question No. (e.g., 45)" min="1" max="100" oninput="searchQuestion()">
            </div>

            <div class="table-responsive" id="tableContainer">
                <table class="answer-table">
                    <thead>
                        <tr>
                            <th>Q. No.</th>
                            <th>Correct Options (OMR View)</th>
                            <th class="no-print">Bridge</th>
                        </tr>
                    </thead>
                    <tbody id="answer-body">
                        <!-- Loaded dynamically via JS Matrix -->
                    </tbody>
                </table>
            </div>

            <div class="pagination-container no-print" id="pagination-controls">
                <button class="nav-btn" id="prevBtn" onclick="changePage(-1)">← Prev</button>
                <span id="pageIndicator" class="page-indicator">Page 1 of 10</span>
                <button class="nav-btn" id="nextBtn" onclick="changePage(1)">Next →</button>
            </div>
        </div>
    </div>

    <!-- Bottom Trigger Action Button -->
    <div class="check-action-wrapper no-print">
        <button class="check-key-btn" onclick="revealOMRPortal()">Check Your Answer Key</button>
    </div>

    <!-- Student Evaluation Dynamic OMR Portal Section -->
    <div id="student-omr-portal" class="student-omr-portal no-print" style="display: none;">
        <h3 class="omr-title">OMR Answer Sheet (Select options here)</h3>
        
        <!-- OMR Grid Workspace Container -->
        <div class="omr-layout-box">
            <div class="omr-column-wrapper">
                <div id="omr-sheet-grid" class="omr-columns-container">
                    <!-- Loaded dynamically via JS -->
                </div>
            </div>
        </div>

        <!-- 🌟 Left/Right Navigation Buttons Centered at the Bottom 🌟 -->
        <div class="omr-scroll-center-bottom">
            <button class="omr-scroll-btn" onclick="scrollOMR('left')">← Scroll Left</button>
            <button class="omr-scroll-btn" onclick="scrollOMR('right')">Scroll Right →</button>
        </div>
        
        <div class="btn-container-vertical">
            <button class="btn-submit" onclick="evaluateOMRSheet()">SUBMIT TEST</button>
        </div>
        
        <!-- Results Dashboard Panel -->
        <div id="result" class="result-box"></div>

        <!-- Comprehensive Audit Verification Table Grid -->
        <div id="matrix-box" class="matrix-container" style="display: none;">
            <h3>📋 Detailed Answer Audit Sheet</h3>
            <div id="audit-grid" class="audit-grid"></div>
        </div>
    </div>
</div>

<style>
/* Modern Fluid Orange Design Tokens */
:root {
    --primary-color: #1e293b;
    --accent-color: #ff6b35; 
    --accent-gradient: linear-gradient(135deg, #ff6b35, #ff9f1c);
    --bg-main: #ffffff;
    --bg-light: #f8fafc;
    --text-main: #475569;
    --text-qno: #1e293b; 
    --border-color: #cbd5e1;
    --card-shadow: 0 4px 6px -1px rgba(255, 107, 53, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    --omr-inactive: #f1f5f9;
    --omr-text: #64748b;
}

[data-theme="dark"] {
    --primary-color: #f8fafc;
    --accent-color: #ff9f1c; 
    --accent-gradient: linear-gradient(135deg, #ff9f1c, #ff6b35);
    --bg-main: #0b0f19;
    --bg-light: #111824;
    --text-main: #cbd5e1;
    --text-qno: #ffffff; 
    --border-color: #1e293b;
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    --omr-inactive: #121824;
    --omr-text: #6b7280;
}

.paper-container {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    color: var(--text-main);
    background-color: var(--bg-main);
    transition: background 0.3s ease, color 0.3s ease;
}

.top-action-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-light);
    color: var(--text-main);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}
.action-btn:hover:not(:disabled) { 
    background: var(--accent-gradient); 
    color: white; 
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(255, 107, 53, 0.2);
}
.action-btn:disabled { opacity: 0.4; cursor: not-allowed !important; background: #e2e8f0; color: #94a3b8; }

.dark-toggle-btn {
    background: var(--bg-light); border: 1px solid var(--border-color);
    width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
    color: var(--text-main); transition: all 0.2s;
}
.dark-toggle-btn:hover { border-color: var(--accent-color); }

.paper-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 15px;
    background: linear-gradient(135deg, #ff6b35, #e65c00);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
    color: #ffffff;
    align-items: center;
    box-shadow: 0 8px 20px -5px rgba(230, 92, 0, 0.25);
}
[data-theme="dark"] .paper-header {
    background: linear-gradient(135deg, #cc5200, #993d00);
}
.meta-item {
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.meta-item:last-child { border-right: none; }
.subject-item { text-align: left; padding-left: 10px; }
.meta-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    font-weight: 700;
}
.meta-value { font-size: 1.15rem; font-weight: 800; color: #ffffff !important; }

.content-layout { display: flex; gap: 30px; flex-wrap: wrap; }
.pdf-section { flex: 1.3; min-width: 350px; }
.answer-section {
    flex: 1; min-width: 340px; background: var(--bg-main); border: 1px solid var(--border-color);
    border-radius: 14px; padding: 25px; box-shadow: var(--card-shadow);
    display: flex; flex-direction: column; height: 620px;
}
.section-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 20px; color: var(--accent-color); border-bottom: 2px solid var(--accent-color); padding-bottom: 6px; display: inline-block; }

.omr-container { display: flex; gap: 8px; justify-content: center; }
.omr-circle { width: 32px; height: 32px; border-radius: 50%; background: var(--omr-inactive); color: var(--omr-text); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; border: 1px solid var(--border-color); }
.omr-circle.correct { 
    background: var(--accent-gradient) !important; 
    color: white !important; 
    border-color: transparent !important;
    box-shadow: 0 2px 6px rgba(255, 107, 53, 0.2);
}

.sync-bridge-btn { background: none; border: none; color: var(--accent-color); cursor: pointer; font-size: 0.85rem; font-weight: 700; }
.sync-bridge-btn:hover { text-decoration: underline; }

.search-box { margin-bottom: 15px; }
.search-box input { width: 100%; padding: 11px 14px; border: 1px solid var(--border-color); background: var(--bg-light); color: var(--text-main); border-radius: 8px; outline: none; box-sizing: border-box; font-weight: 500; }
.search-box input:focus { border-color: var(--accent-color); box-shadow: 0 0 0 1px var(--accent-color); }

.pdf-wrapper-container { position: relative; width: 100%; }
.pdf-wrapper { position: relative; padding-bottom: 120%; height: 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--border-color); box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.pdf-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.pdf-popout-shield { position: absolute; top: 0; right: 0; width: 55px; height: 55px; background: transparent; z-index: 999; cursor: default; }
.security-note { font-size: 0.75rem; color: #ef4444; margin-top: 6px; font-style: italic; }

.table-responsive { flex-grow: 1; border: 1px solid var(--border-color); border-radius: 10px; overflow-y: auto; background-color: var(--bg-light); }
.answer-table { width: 100%; border-collapse: collapse; text-align: center; }
.answer-table th { background-color: var(--border-color); color: var(--text-main); padding: 14px; font-weight: 700; position: sticky; top: 0; z-index: 5; font-size: 0.88rem; }
.answer-table td { padding: 12px 6px; border-bottom: 1px solid var(--border-color); background: var(--bg-main); color: var(--text-main); }
.qno-text { color: var(--text-qno) !important; font-weight: 700; transition: color 0.3s ease; }

.pagination-container { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
.nav-btn { background: var(--bg-light); color: var(--text-main); border: 1px solid var(--border-color); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
.nav-btn:hover:not(:disabled) { border-color: var(--accent-color); color: var(--accent-color); }
.nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-indicator { font-size: 0.85rem; font-weight: 700; color: var(--text-main); }

.check-action-wrapper {
    display: flex;
    justify-content: center;
    margin: 40px 0 20px 0;
}
.check-key-btn {
    background: linear-gradient(135deg, #e65100, #ff6b35);
    color: #ffffff;
    border: none;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(230, 81, 0, 0.3);
    transition: all 0.2s ease;
}
.check-key-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(230, 81, 0, 0.4);
}
.student-omr-portal {
    margin-top: 30px;
    border-top: 3px solid var(--border-color);
    padding-top: 25px;
}
.omr-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-qno);
    margin: 10px 0 15px 0;
}

.omr-layout-box {
    border: 2px solid #e65100;
    border-radius: 8px;
    padding: 12px;
    background: var(--bg-main);
    margin-bottom: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
}
.omr-column-wrapper { width: 100%; }

/* 🌟 Styling for Centered Bottom Buttons 🌟 */
.omr-scroll-center-bottom {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin: 15px 0 25px 0;
    width: 100%;
}

.omr-scroll-btn {
    background: var(--bg-light);
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: var(--card-shadow);
}
.omr-scroll-btn:hover {
    background: var(--accent-gradient);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-1px);
}

/* 10 Columns Auto Matrix Layout for Row Limit 10 */
.omr-columns-container {
    display: grid;
    grid-template-columns: repeat(10, minmax(130px, 1fr));
    gap: 1px;
    background-color: var(--border-color);
    border: 1px solid var(--border-color);
}
.omr-table-column { background-color: var(--bg-main); display: flex; flex-direction: column; }
.omr-column-header {
    display: flex; background-color: #e65100; color: #ffffff;
    font-weight: 700; font-size: 12px; padding: 6px 2px; text-align: center;
}
.header-q { width: 30%; border-right: 1px solid rgba(255, 255, 255, 0.4); }
.header-a { width: 70%; }
.omr-sheet-row { display: flex; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--border-color); background-color: var(--bg-main); }
.omr-sheet-row:hover { background-color: var(--bg-light); }
.omr-q-num { width: 30%; font-weight: 700; color: var(--text-qno); font-size: 12px; text-align: center; border-right: 1px solid var(--border-color); }
.omr-bubble-options { width: 70%; display: flex; justify-content: space-around; align-items: center; padding-left: 2px; }
.omr-interactive-bubble {
    display: flex; align-items: center; justify-content: center;
    width: 21px; height: 21px; border: 1.5px solid #e65100; border-radius: 50%;
    font-size: 10.5px; font-weight: 700; color: #e65100; cursor: pointer;
    transition: all 0.15s ease; user-select: none; background-color: transparent;
}
.omr-interactive-bubble:hover { background-color: #ffe0b2; }
.omr-interactive-bubble.selected { background-color: #e65100 !important; color: #ffffff !important; border-color: #e65100 !important; }

.btn-container-vertical { display: flex; justify-content: center; margin-top: 15px; }
.btn-submit {
    display: block; width: 100%; max-width: 240px; height: 50px;
    color: #ffffff; border: none; border-radius: 6px; font-size: 16px;
    font-weight: 700; cursor: pointer; text-align: center; background: #2e7d32;
    transition: background 0.2s ease;
}
.btn-submit:hover { background: #1b5e20; }

.result-box { margin-top: 25px; padding: 20px; border-radius: 10px; display: none; border: 1px solid transparent; }
.pass { background-color: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.fail { background-color: #fef2f2; color: #991b1b; border-color: #fee2e2; }
.info { background-color: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.highlight-value { font-size: 26px; font-weight: 800; color: var(--text-qno); display: block; margin-top: 5px; }

.matrix-container { margin-top: 30px; border-top: 2px dashed var(--border-color); padding-top: 20px; }
.matrix-container h3 { font-size: 16px; font-weight: 700; color: var(--text-qno); margin-bottom: 15px; }
.audit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.audit-card { padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); font-size: 13px; background: var(--bg-light); line-height: 1.5; }
.audit-card.audit-correct { border-color: #bbf7d0; background-color: #f0fdf4; color: #15803d;}
.audit-card.audit-wrong { border-color: #fecaca; background-color: #fef2f2; color: #b91c1c;}
.audit-card strong { display: block; font-size: 14px; margin-bottom: 4px; color: var(--text-qno); }

@media print {
    body, html { background: #ffffff !important; color: #000000 !important; overflow: visible !important; height: auto !important; }
    .paper-container { max-width: 100% !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
    .paper-header { display: grid !important; grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important; background: #f1f5f9 !important; color: #000000 !important; border: 1px solid #000000 !important; border-radius: 6px !important; padding: 12px !important; box-shadow: none !important; }
    .meta-item { border-right: 1px solid #cbd5e1 !important; }
    .meta-label { color: #475569 !important; }
    .meta-value { color: #000000 !important; font-size: 1rem !important; }
    .no-print, .pdf-section, .top-action-bar, .search-box, .pagination-container, th:last-child, td:last-child, .omr-scroll-center-bottom { display: none !important; }
    .content-layout { display: block !important; overflow: visible !important; }
    .answer-section { border: none !important; box-shadow: none !important; width: 100% !important; height: auto !important; max-height: none !important; padding: 0 !important; display: block !important; overflow: visible !important; }
    .table-responsive { overflow: visible !important; max-height: none !important; height: auto !important; border: none !important; display: block !important; }
    .answer-table { width: 100% !important; border: 1px solid #000000 !important; margin-top: 15px; table-layout: auto !important; }
    .answer-table th { background-color: #f8fafc !important; color: #000000 !important; border-bottom: 2px solid #000000 !important; position: relative !important; }
    .answer-table td { background: #ffffff !important; color: #000000 !important; padding: 8px !important; border-bottom: 1px solid #cbd5e1 !important; page-break-inside: avoid !important; break-inside: avoid !important; }
    .qno-text { color: #000000 !important; }
    .omr-circle { border: 1px solid #64748b !important; background: transparent !important; color: #000000 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .omr-circle.correct { background-color: #ff6b35 !important; background: #ff6b35 !important; color: #ffffff !important; border-color: #ff6b35 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

@media (max-width: 900px) {
    .content-layout { flex-direction: column; }
    .answer-section { height: auto; }
    .paper-header { grid-template-columns: 1fr; gap: 10px; text-align: center; }
    .subject-item { text-align: center; padding-left: 0; }
    .meta-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 8px; }
    .meta-item:last-child { border-bottom: none; padding-bottom: 0; }
}
</style>

<script>
const ALLOW_PRINT = "YES";

const rawAnswers = [
    "A", "D", "B", "A", "A", "C", "B", "A", "A", "D",
    "B", "B", "A", "C", "A", "C", "B", "C", "B", "D",
    "C", "A", "C", "C", "D", "A", "B", "C", "B", "C",
    "D", "C", "D", "D", "C", "A", "A", "A", "A", "B",
    "D", "A", "D", "C", "A", "D", "D", "B", "C", "D",
    "B", "A", "C", "B", "B", "D", "C", "B", "A", "A",
    "A", "B", "C", "B", "A", "C", "A", "C", "B", "C",
    "B", "C", "D", "C", "D", "B", "A", "D", "D", "C",
    "B", "D", "D", "B", "B", "B", "A", "B", "B", "D",
    "D", "A", "D", "C", "B", "A", "C", "A", "D", "B"
];

const answersData = Array.from({ length: 100 }, (_, i) => ({
    qNo: i + 1,
    ans: rawAnswers[i] || "A"
}));

const studentAnswers = new Array(100).fill(null);

let currentPage = 1;
const itemsPerPage = 10;

// Dynamic Smooth Left-Right Scroll Navigation Function
function scrollOMR(direction) {
    const targetWrapper = document.querySelector('.omr-layout-box');
    if (!targetWrapper) return;
    const shiftValue = direction === 'left' ? -280 : 280;
    targetWrapper.scrollBy({ left: shiftValue, behavior: 'smooth' });
}

function generateOMRHTML(questionNumber, correctAnswer) {
    const options = ["A", "B", "C", "D"];
    let omrHTML = '<div class="omr-container">';
    options.forEach(opt => {
        const isCorrect = (opt === correctAnswer) ? 'correct' : '';
        omrHTML += '<span class="omr-circle ' + isCorrect + '">' + opt + '</span>';
    });
    omrHTML += '</div>';
    return omrHTML;
}

function renderTable(pageData) {
    const tbody = document.getElementById('answer-body');
    if (!tbody) return;
    tbody.innerHTML = '';
    pageData.forEach(item => {
        const row = '<tr>' +
            '<td><strong class="qno-text">Q. ' + item.qNo + '</strong></td>' +
            '<td>' + generateOMRHTML(item.qNo, item.ans) + '</td>' +
            '<td class="no-print">' +
                '<button class="sync-bridge-btn" onclick="scrollToPDF()">🔍 View</button>' +
            '</td>' +
        '</tr>';
        tbody.insertAdjacentHTML('beforeend', row);
    });
}

function showPage(page) {
    currentPage = page;
    const start = (page - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    renderTable(answersData.slice(start, end));
    
    const paginationControls = document.getElementById('pagination-controls');
    const pageIndicator = document.getElementById('pageIndicator');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    
    if (paginationControls) paginationControls.style.display = 'flex';
    if (pageIndicator) pageIndicator.innerText = 'Page ' + currentPage + ' of 10';
    if (prevBtn) prevBtn.disabled = currentPage === 1;
    if (nextBtn) nextBtn.disabled = currentPage === 10;
}

function changePage(direction) {
    let newPage = currentPage + direction;
    if (newPage >= 1 && newPage <= 10) showPage(newPage);
}

function searchQuestion() {
    const inputVal = parseInt(document.getElementById('qSearch').value);
    if (!inputVal || inputVal < 1 || inputVal > 100) {
        showPage(1);
        return;
    }
    const filteredResult = answersData.filter(q => q.qNo === inputVal);
    renderTable(filteredResult);
    const paginationControls = document.getElementById('pagination-controls');
    if (paginationControls) paginationControls.style.display = 'none';
}

function toggleDarkMode() {
    const container = document.getElementById('mainContainer');
    const iconSpan = document.querySelector('.mode-icon');
    if (!container) return;
    if(container.getAttribute('data-theme') === 'dark') {
        container.removeAttribute('data-theme');
        if (iconSpan) iconSpan.innerText = "🌙";
    } else {
        container.setAttribute('data-theme', 'dark');
        if (iconSpan) iconSpan.innerText = "☀️";
    }
}

function scrollToPDF() {
    const pdfSection = document.getElementById('pdfSection');
    if (pdfSection) pdfSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function checkPrintPermission() {
    const printBtn = document.getElementById('masterPrintBtn');
    if (!printBtn) return;
    if (ALLOW_PRINT.trim().toUpperCase() === "YES") {
        printBtn.disabled = false;
        printBtn.style.display = "inline-flex";
    } else {
        printBtn.disabled = true;
        printBtn.style.display = "none";
    }
}

function printAnswerKey() {
    if (ALLOW_PRINT.trim().toUpperCase() !== "YES") return;
    renderTable(answersData);
    setTimeout(() => {
        window.print();
        showPage(currentPage);
    }, 150);
}

function revealOMRPortal() {
    const portal = document.getElementById('student-omr-portal');
    portal.style.display = "block";
    buildStudentOMRGrid();
    portal.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function buildStudentOMRGrid() {
    const gridContainer = document.getElementById('omr-sheet-grid');
    if (gridContainer.children.length > 0) return; 
    
    let totalQuestions = 100;
    let questionsPerColumn = 10; 
    let columnsCount = totalQuestions / questionsPerColumn; 
    let fullHTML = '';
    
    for (let col = 0; col < columnsCount; col++) {
        let columnHTML = `<div class="omr-table-column">
            <div class="omr-column-header">
                <div class="header-q">Q.N</div>
                <div class="header-a">Ans</div>
            </div>`;
            
        let startQueryIndex = col * questionsPerColumn;
        let endQueryIndex = startQueryIndex + questionsPerColumn;
        
        for (let i = startQueryIndex; i < endQueryIndex; i++) {
            const qNum = i + 1;
            columnHTML += `
                <div class="omr-sheet-row">
                    <div class="omr-q-num">${qNum}</div>
                    <div class="omr-bubble-options">
                        <div class="omr-interactive-bubble" data-q="${i}" data-val="A">A</div>
                        <div class="omr-interactive-bubble" data-q="${i}" data-val="B">B</div>
                        <div class="omr-interactive-bubble" data-q="${i}" data-val="C">C</div>
                        <div class="omr-interactive-bubble" data-q="${i}" data-val="D">D</div>
                    </div>
                </div>
            `;
        }
        columnHTML += '</div>';
        fullHTML += columnHTML;
    }
    
    gridContainer.innerHTML = fullHTML;

    gridContainer.querySelectorAll('.omr-interactive-bubble').forEach(bubble => {
        bubble.addEventListener('click', function() {
            const qIndex = parseInt(this.getAttribute('data-q'));
            const value = this.getAttribute('data-val');
            const siblings = this.parentNode.querySelectorAll('.omr-interactive-bubble');
            
            siblings.forEach(sib => sib.classList.remove('selected'));

            if (studentAnswers[qIndex] === value) {
                studentAnswers[qIndex] = null; 
            } else {
                this.classList.add('selected');
                studentAnswers[qIndex] = value;
            }
        });
    });
}

function evaluateOMRSheet() {
    let resultDiv = document.getElementById('result');
    let matrixBox = document.getElementById('matrix-box');
    let auditGrid = document.getElementById('audit-grid');
    
    resultDiv.style.display = "block";
    matrixBox.style.display = "block";

    let score = 0;
    let auditHTML = '';

    for (let i = 0; i < 100; i++) {
        const qNum = i + 1;
        const studentSelection = studentAnswers[i] || "Unanswered";
        const correctKey = rawAnswers[i];
        const isCorrect = studentSelection === correctKey;

        if (isCorrect) score++;

        auditHTML += `
            <div class="audit-card ${isCorrect ? 'audit-correct' : 'audit-wrong'}">
                <strong>Question ${qNum}</strong>
                Your Answer: <b>${studentSelection}</b><br>
                Correct Answer: <b>${correctKey}</b>
            </div>
        `;
    }
    
    auditGrid.innerHTML = auditHTML;

    if (score < 33) {
        resultDiv.className = "result-box fail";
        resultDiv.innerHTML = `
            <h3>❌ Examination Status: FAILED</h3>
            <p>Total Obtained Marks: <span class="highlight-value">${score} / 100</span></p>
            <p style="margin-top:8px; font-weight:600;">The theory result is below the minimum required threshold of 33 marks. Therefore, passing is technically not possible..</p>
        `;
    } else {
        let dynamicPracticalRequirement = (50 - (score * 0.6)) / 0.4;
        let requiredPracticalScore = Math.ceil(dynamicPracticalRequirement);

        if (requiredPracticalScore < 33) {
            requiredPracticalScore = 33; 
        }

        if (requiredPracticalScore > 100) {
            resultDiv.className = "result-box fail";
            resultDiv.innerHTML = `
                <h3>⚠️ Core Aggregate Unobtainable</h3>
                <p>Total Obtained Marks: <span class="highlight-value">${score} / 100</span></p>
                <p>Required Practical Mark Index: <span class="highlight-value" style="color: #b91c1c !important;">${requiredPracticalScore} Marks</span></p>
                <p style="margin-top: 6px;">Your base aggregate ratio index cannot clear the overall total 50% target requirements even with an absolute maximum score of 100 in your practical portion.</p>
            `;
        } else {
            resultDiv.className = "result-box info";
            resultDiv.innerHTML = `
                <h3>🎉 Evaluation Metrics Calculated</h3>
                <p>Total Obtained Marks: <span class="highlight-value">${score} / 100</span></p>
                <hr style="border:0; border-top:1px solid #bfdbfe; margin:12px 0;">
                <p>To clear the remaining structural validation benchmarks, you need:</p>
                <p>Required Practical Score to Pass: <span class="highlight-value" style="color: #1e40af !important;">${requiredPracticalScore} Marks</span></p>
            `;
        }
    }
    
    resultDiv.scrollIntoView({ behavior: 'smooth' });
}

window.addEventListener('DOMContentLoaded', () => {
    showPage(1);
    checkPrintPermission();
});
</script>				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		<p>The post <a href="https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-4-series-44-jul-2026/">Internet of Things (M4-R5.1) Paper Solution Set-4 Series-44 (JUL 2026)</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-4-series-44-jul-2026/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Internet of Things (M4-R5.1) Paper Solution Set-2 Series-24 (JUL 2026)</title>
		<link>https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-2-series-24-jul-2026/</link>
					<comments>https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-2-series-24-jul-2026/#respond</comments>
		
		<dc:creator><![CDATA[Balmukund Maurya]]></dc:creator>
		<pubDate>Sun, 16 Aug 2026 14:05:05 +0000</pubDate>
				<category><![CDATA[O Level Paper Solution]]></category>
		<guid isPermaLink="false">https://gyanxp.com/?p=6146</guid>

					<description><![CDATA[<p>Print Answer Key 🌙 Subject Name Internet of Things Paper Code M4-R5.1 Session JUL 2026 Paper Set Set &#8211; 2 Series 24 Question Paper * Downloading and Printing is restricted for this document. Official Answer Key Q. No. Correct Options (OMR View) Bridge ← Prev Page 1 of 10 Next → Check Your Answer Key [&#8230;]</p>
<p>The post <a href="https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-2-series-24-jul-2026/">Internet of Things (M4-R5.1) Paper Solution Set-2 Series-24 (JUL 2026)</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="6146" class="elementor elementor-6146">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-b6bc715 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="b6bc715" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cad9a80" data-id="cad9a80" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-ceb97b0 elementor-widget elementor-widget-html" data-id="ceb97b0" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<div class="paper-container" id="mainContainer">
    <!-- Top Action Bar -->
    <div class="top-action-bar no-print">
        <button class="action-btn secondary-btn" id="masterPrintBtn" onclick="printAnswerKey()">
            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/><path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"/></svg>
            Print Answer Key
        </button>

        <button class="dark-toggle-btn" id="themeToggle" onclick="toggleDarkMode()" aria-label="Toggle Dark Mode">
            <span class="mode-icon">🌙</span>
        </button>
    </div>

    <!-- Paper Details Header -->
    <header class="paper-header">
        <div class="meta-item subject-item">
            <span class="meta-label">Subject Name</span>
            <span class="meta-value">Internet of Things</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Paper Code</span>
            <span class="meta-value">M4-R5.1</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Session</span>
            <span class="meta-value">JUL 2026</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Paper Set</span>
            <span class="meta-value">Set - 2</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Series</span>
            <span class="meta-value">24</span>
        </div>
    </header>

    <!-- Main Workspace Split -->
    <div class="content-layout">
        <!-- PDF Presentation Block -->
        <div class="pdf-section" id="pdfSection">
            <h3 class="section-title">Question Paper</h3>
            <div class="pdf-wrapper-container">
                <div class="pdf-wrapper">
                    <iframe src="https://drive.google.com/file/d/1aZeKENR6nf3LLt9ncf-tFOQYPcu0dlqK/preview" width="640" height="480" allow="autoplay" oncontextmenu="return false;"></iframe>
                </div>
                <div class="pdf-popout-shield"></div>
            </div>
            <p class="security-note">* Downloading and Printing is restricted for this document.</p>
        </div>

        <!-- Answer Grid Console Block -->
        <div class="answer-section" id="printableArea">
            <h3 class="section-title no-print">Official Answer Key</h3>
            
            <div class="search-box no-print">
                <input type="number" id="qSearch" placeholder="Jump to Question No. (e.g., 45)" min="1" max="100" oninput="searchQuestion()">
            </div>

            <div class="table-responsive" id="tableContainer">
                <table class="answer-table">
                    <thead>
                        <tr>
                            <th>Q. No.</th>
                            <th>Correct Options (OMR View)</th>
                            <th class="no-print">Bridge</th>
                        </tr>
                    </thead>
                    <tbody id="answer-body">
                        <!-- Loaded dynamically via JS Matrix -->
                    </tbody>
                </table>
            </div>

            <div class="pagination-container no-print" id="pagination-controls">
                <button class="nav-btn" id="prevBtn" onclick="changePage(-1)">← Prev</button>
                <span id="pageIndicator" class="page-indicator">Page 1 of 10</span>
                <button class="nav-btn" id="nextBtn" onclick="changePage(1)">Next →</button>
            </div>
        </div>
    </div>

    <!-- Bottom Trigger Action Button -->
    <div class="check-action-wrapper no-print">
        <button class="check-key-btn" onclick="revealOMRPortal()">Check Your Answer Key</button>
    </div>

    <!-- Student Evaluation Dynamic OMR Portal Section -->
    <div id="student-omr-portal" class="student-omr-portal no-print" style="display: none;">
        <h3 class="omr-title">OMR Answer Sheet (Select options here)</h3>
        
        <!-- OMR Grid Workspace Container -->
        <div class="omr-layout-box">
            <div class="omr-column-wrapper">
                <div id="omr-sheet-grid" class="omr-columns-container">
                    <!-- Loaded dynamically via JS -->
                </div>
            </div>
        </div>

        <!-- 🌟 Left/Right Navigation Buttons Centered at the Bottom 🌟 -->
        <div class="omr-scroll-center-bottom">
            <button class="omr-scroll-btn" onclick="scrollOMR('left')">← Scroll Left</button>
            <button class="omr-scroll-btn" onclick="scrollOMR('right')">Scroll Right →</button>
        </div>
        
        <div class="btn-container-vertical">
            <button class="btn-submit" onclick="evaluateOMRSheet()">SUBMIT TEST</button>
        </div>
        
        <!-- Results Dashboard Panel -->
        <div id="result" class="result-box"></div>

        <!-- Comprehensive Audit Verification Table Grid -->
        <div id="matrix-box" class="matrix-container" style="display: none;">
            <h3>📋 Detailed Answer Audit Sheet</h3>
            <div id="audit-grid" class="audit-grid"></div>
        </div>
    </div>
</div>

<style>
/* Modern Fluid Orange Design Tokens */
:root {
    --primary-color: #1e293b;
    --accent-color: #ff6b35; 
    --accent-gradient: linear-gradient(135deg, #ff6b35, #ff9f1c);
    --bg-main: #ffffff;
    --bg-light: #f8fafc;
    --text-main: #475569;
    --text-qno: #1e293b; 
    --border-color: #cbd5e1;
    --card-shadow: 0 4px 6px -1px rgba(255, 107, 53, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    --omr-inactive: #f1f5f9;
    --omr-text: #64748b;
}

[data-theme="dark"] {
    --primary-color: #f8fafc;
    --accent-color: #ff9f1c; 
    --accent-gradient: linear-gradient(135deg, #ff9f1c, #ff6b35);
    --bg-main: #0b0f19;
    --bg-light: #111824;
    --text-main: #cbd5e1;
    --text-qno: #ffffff; 
    --border-color: #1e293b;
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    --omr-inactive: #121824;
    --omr-text: #6b7280;
}

.paper-container {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    color: var(--text-main);
    background-color: var(--bg-main);
    transition: background 0.3s ease, color 0.3s ease;
}

.top-action-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-light);
    color: var(--text-main);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}
.action-btn:hover:not(:disabled) { 
    background: var(--accent-gradient); 
    color: white; 
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(255, 107, 53, 0.2);
}
.action-btn:disabled { opacity: 0.4; cursor: not-allowed !important; background: #e2e8f0; color: #94a3b8; }

.dark-toggle-btn {
    background: var(--bg-light); border: 1px solid var(--border-color);
    width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
    color: var(--text-main); transition: all 0.2s;
}
.dark-toggle-btn:hover { border-color: var(--accent-color); }

.paper-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 15px;
    background: linear-gradient(135deg, #ff6b35, #e65c00);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
    color: #ffffff;
    align-items: center;
    box-shadow: 0 8px 20px -5px rgba(230, 92, 0, 0.25);
}
[data-theme="dark"] .paper-header {
    background: linear-gradient(135deg, #cc5200, #993d00);
}
.meta-item {
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.meta-item:last-child { border-right: none; }
.subject-item { text-align: left; padding-left: 10px; }
.meta-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    font-weight: 700;
}
.meta-value { font-size: 1.15rem; font-weight: 800; color: #ffffff !important; }

.content-layout { display: flex; gap: 30px; flex-wrap: wrap; }
.pdf-section { flex: 1.3; min-width: 350px; }
.answer-section {
    flex: 1; min-width: 340px; background: var(--bg-main); border: 1px solid var(--border-color);
    border-radius: 14px; padding: 25px; box-shadow: var(--card-shadow);
    display: flex; flex-direction: column; height: 620px;
}
.section-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 20px; color: var(--accent-color); border-bottom: 2px solid var(--accent-color); padding-bottom: 6px; display: inline-block; }

.omr-container { display: flex; gap: 8px; justify-content: center; }
.omr-circle { width: 32px; height: 32px; border-radius: 50%; background: var(--omr-inactive); color: var(--omr-text); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; border: 1px solid var(--border-color); }
.omr-circle.correct { 
    background: var(--accent-gradient) !important; 
    color: white !important; 
    border-color: transparent !important;
    box-shadow: 0 2px 6px rgba(255, 107, 53, 0.2);
}

.sync-bridge-btn { background: none; border: none; color: var(--accent-color); cursor: pointer; font-size: 0.85rem; font-weight: 700; }
.sync-bridge-btn:hover { text-decoration: underline; }

.search-box { margin-bottom: 15px; }
.search-box input { width: 100%; padding: 11px 14px; border: 1px solid var(--border-color); background: var(--bg-light); color: var(--text-main); border-radius: 8px; outline: none; box-sizing: border-box; font-weight: 500; }
.search-box input:focus { border-color: var(--accent-color); box-shadow: 0 0 0 1px var(--accent-color); }

.pdf-wrapper-container { position: relative; width: 100%; }
.pdf-wrapper { position: relative; padding-bottom: 120%; height: 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--border-color); box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.pdf-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.pdf-popout-shield { position: absolute; top: 0; right: 0; width: 55px; height: 55px; background: transparent; z-index: 999; cursor: default; }
.security-note { font-size: 0.75rem; color: #ef4444; margin-top: 6px; font-style: italic; }

.table-responsive { flex-grow: 1; border: 1px solid var(--border-color); border-radius: 10px; overflow-y: auto; background-color: var(--bg-light); }
.answer-table { width: 100%; border-collapse: collapse; text-align: center; }
.answer-table th { background-color: var(--border-color); color: var(--text-main); padding: 14px; font-weight: 700; position: sticky; top: 0; z-index: 5; font-size: 0.88rem; }
.answer-table td { padding: 12px 6px; border-bottom: 1px solid var(--border-color); background: var(--bg-main); color: var(--text-main); }
.qno-text { color: var(--text-qno) !important; font-weight: 700; transition: color 0.3s ease; }

.pagination-container { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
.nav-btn { background: var(--bg-light); color: var(--text-main); border: 1px solid var(--border-color); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
.nav-btn:hover:not(:disabled) { border-color: var(--accent-color); color: var(--accent-color); }
.nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-indicator { font-size: 0.85rem; font-weight: 700; color: var(--text-main); }

.check-action-wrapper {
    display: flex;
    justify-content: center;
    margin: 40px 0 20px 0;
}
.check-key-btn {
    background: linear-gradient(135deg, #e65100, #ff6b35);
    color: #ffffff;
    border: none;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(230, 81, 0, 0.3);
    transition: all 0.2s ease;
}
.check-key-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(230, 81, 0, 0.4);
}
.student-omr-portal {
    margin-top: 30px;
    border-top: 3px solid var(--border-color);
    padding-top: 25px;
}
.omr-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-qno);
    margin: 10px 0 15px 0;
}

.omr-layout-box {
    border: 2px solid #e65100;
    border-radius: 8px;
    padding: 12px;
    background: var(--bg-main);
    margin-bottom: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
}
.omr-column-wrapper { width: 100%; }

/* 🌟 Styling for Centered Bottom Buttons 🌟 */
.omr-scroll-center-bottom {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin: 15px 0 25px 0;
    width: 100%;
}

.omr-scroll-btn {
    background: var(--bg-light);
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: var(--card-shadow);
}
.omr-scroll-btn:hover {
    background: var(--accent-gradient);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-1px);
}

/* 10 Columns Auto Matrix Layout for Row Limit 10 */
.omr-columns-container {
    display: grid;
    grid-template-columns: repeat(10, minmax(130px, 1fr));
    gap: 1px;
    background-color: var(--border-color);
    border: 1px solid var(--border-color);
}
.omr-table-column { background-color: var(--bg-main); display: flex; flex-direction: column; }
.omr-column-header {
    display: flex; background-color: #e65100; color: #ffffff;
    font-weight: 700; font-size: 12px; padding: 6px 2px; text-align: center;
}
.header-q { width: 30%; border-right: 1px solid rgba(255, 255, 255, 0.4); }
.header-a { width: 70%; }
.omr-sheet-row { display: flex; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--border-color); background-color: var(--bg-main); }
.omr-sheet-row:hover { background-color: var(--bg-light); }
.omr-q-num { width: 30%; font-weight: 700; color: var(--text-qno); font-size: 12px; text-align: center; border-right: 1px solid var(--border-color); }
.omr-bubble-options { width: 70%; display: flex; justify-content: space-around; align-items: center; padding-left: 2px; }
.omr-interactive-bubble {
    display: flex; align-items: center; justify-content: center;
    width: 21px; height: 21px; border: 1.5px solid #e65100; border-radius: 50%;
    font-size: 10.5px; font-weight: 700; color: #e65100; cursor: pointer;
    transition: all 0.15s ease; user-select: none; background-color: transparent;
}
.omr-interactive-bubble:hover { background-color: #ffe0b2; }
.omr-interactive-bubble.selected { background-color: #e65100 !important; color: #ffffff !important; border-color: #e65100 !important; }

.btn-container-vertical { display: flex; justify-content: center; margin-top: 15px; }
.btn-submit {
    display: block; width: 100%; max-width: 240px; height: 50px;
    color: #ffffff; border: none; border-radius: 6px; font-size: 16px;
    font-weight: 700; cursor: pointer; text-align: center; background: #2e7d32;
    transition: background 0.2s ease;
}
.btn-submit:hover { background: #1b5e20; }

.result-box { margin-top: 25px; padding: 20px; border-radius: 10px; display: none; border: 1px solid transparent; }
.pass { background-color: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.fail { background-color: #fef2f2; color: #991b1b; border-color: #fee2e2; }
.info { background-color: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.highlight-value { font-size: 26px; font-weight: 800; color: var(--text-qno); display: block; margin-top: 5px; }

.matrix-container { margin-top: 30px; border-top: 2px dashed var(--border-color); padding-top: 20px; }
.matrix-container h3 { font-size: 16px; font-weight: 700; color: var(--text-qno); margin-bottom: 15px; }
.audit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.audit-card { padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); font-size: 13px; background: var(--bg-light); line-height: 1.5; }
.audit-card.audit-correct { border-color: #bbf7d0; background-color: #f0fdf4; color: #15803d;}
.audit-card.audit-wrong { border-color: #fecaca; background-color: #fef2f2; color: #b91c1c;}
.audit-card strong { display: block; font-size: 14px; margin-bottom: 4px; color: var(--text-qno); }

@media print {
    body, html { background: #ffffff !important; color: #000000 !important; overflow: visible !important; height: auto !important; }
    .paper-container { max-width: 100% !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
    .paper-header { display: grid !important; grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important; background: #f1f5f9 !important; color: #000000 !important; border: 1px solid #000000 !important; border-radius: 6px !important; padding: 12px !important; box-shadow: none !important; }
    .meta-item { border-right: 1px solid #cbd5e1 !important; }
    .meta-label { color: #475569 !important; }
    .meta-value { color: #000000 !important; font-size: 1rem !important; }
    .no-print, .pdf-section, .top-action-bar, .search-box, .pagination-container, th:last-child, td:last-child, .omr-scroll-center-bottom { display: none !important; }
    .content-layout { display: block !important; overflow: visible !important; }
    .answer-section { border: none !important; box-shadow: none !important; width: 100% !important; height: auto !important; max-height: none !important; padding: 0 !important; display: block !important; overflow: visible !important; }
    .table-responsive { overflow: visible !important; max-height: none !important; height: auto !important; border: none !important; display: block !important; }
    .answer-table { width: 100% !important; border: 1px solid #000000 !important; margin-top: 15px; table-layout: auto !important; }
    .answer-table th { background-color: #f8fafc !important; color: #000000 !important; border-bottom: 2px solid #000000 !important; position: relative !important; }
    .answer-table td { background: #ffffff !important; color: #000000 !important; padding: 8px !important; border-bottom: 1px solid #cbd5e1 !important; page-break-inside: avoid !important; break-inside: avoid !important; }
    .qno-text { color: #000000 !important; }
    .omr-circle { border: 1px solid #64748b !important; background: transparent !important; color: #000000 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .omr-circle.correct { background-color: #ff6b35 !important; background: #ff6b35 !important; color: #ffffff !important; border-color: #ff6b35 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

@media (max-width: 900px) {
    .content-layout { flex-direction: column; }
    .answer-section { height: auto; }
    .paper-header { grid-template-columns: 1fr; gap: 10px; text-align: center; }
    .subject-item { text-align: center; padding-left: 0; }
    .meta-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 8px; }
    .meta-item:last-child { border-bottom: none; padding-bottom: 0; }
}
</style>

<script>
const ALLOW_PRINT = "YES";

const rawAnswers = [
    "D", "B", "B", "B", "A", "A", "A", "D", "C", "A",
    "C", "B", "C", "C", "D", "C", "B", "A", "D", "C",
    "B", "B", "A", "C", "B", "C", "C", "A", "D", "C",
    "D", "C", "B", "B", "D", "D", "D", "C", "D", "C",
    "C", "D", "C", "D", "B", "C", "B", "A", "C", "D",
    "C", "D", "B", "A", "A", "D", "A", "A", "D", "A",
    "A", "D", "A", "A", "D", "B", "B", "A", "B", "A",
    "C", "C", "A", "C", "B", "A", "A", "D", "B", "B",
    "D", "A", "A", "A", "C", "C", "C", "D", "D", "B",
    "D", "C", "A", "C", "C", "B", "D", "B", "B", "A"
];

const answersData = Array.from({ length: 100 }, (_, i) => ({
    qNo: i + 1,
    ans: rawAnswers[i] || "A"
}));

const studentAnswers = new Array(100).fill(null);

let currentPage = 1;
const itemsPerPage = 10;

// Dynamic Smooth Left-Right Scroll Navigation Function
function scrollOMR(direction) {
    const targetWrapper = document.querySelector('.omr-layout-box');
    if (!targetWrapper) return;
    const shiftValue = direction === 'left' ? -280 : 280;
    targetWrapper.scrollBy({ left: shiftValue, behavior: 'smooth' });
}

function generateOMRHTML(questionNumber, correctAnswer) {
    const options = ["A", "B", "C", "D"];
    let omrHTML = '<div class="omr-container">';
    options.forEach(opt => {
        const isCorrect = (opt === correctAnswer) ? 'correct' : '';
        omrHTML += '<span class="omr-circle ' + isCorrect + '">' + opt + '</span>';
    });
    omrHTML += '</div>';
    return omrHTML;
}

function renderTable(pageData) {
    const tbody = document.getElementById('answer-body');
    if (!tbody) return;
    tbody.innerHTML = '';
    pageData.forEach(item => {
        const row = '<tr>' +
            '<td><strong class="qno-text">Q. ' + item.qNo + '</strong></td>' +
            '<td>' + generateOMRHTML(item.qNo, item.ans) + '</td>' +
            '<td class="no-print">' +
                '<button class="sync-bridge-btn" onclick="scrollToPDF()">🔍 View</button>' +
            '</td>' +
        '</tr>';
        tbody.insertAdjacentHTML('beforeend', row);
    });
}

function showPage(page) {
    currentPage = page;
    const start = (page - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    renderTable(answersData.slice(start, end));
    
    const paginationControls = document.getElementById('pagination-controls');
    const pageIndicator = document.getElementById('pageIndicator');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    
    if (paginationControls) paginationControls.style.display = 'flex';
    if (pageIndicator) pageIndicator.innerText = 'Page ' + currentPage + ' of 10';
    if (prevBtn) prevBtn.disabled = currentPage === 1;
    if (nextBtn) nextBtn.disabled = currentPage === 10;
}

function changePage(direction) {
    let newPage = currentPage + direction;
    if (newPage >= 1 && newPage <= 10) showPage(newPage);
}

function searchQuestion() {
    const inputVal = parseInt(document.getElementById('qSearch').value);
    if (!inputVal || inputVal < 1 || inputVal > 100) {
        showPage(1);
        return;
    }
    const filteredResult = answersData.filter(q => q.qNo === inputVal);
    renderTable(filteredResult);
    const paginationControls = document.getElementById('pagination-controls');
    if (paginationControls) paginationControls.style.display = 'none';
}

function toggleDarkMode() {
    const container = document.getElementById('mainContainer');
    const iconSpan = document.querySelector('.mode-icon');
    if (!container) return;
    if(container.getAttribute('data-theme') === 'dark') {
        container.removeAttribute('data-theme');
        if (iconSpan) iconSpan.innerText = "🌙";
    } else {
        container.setAttribute('data-theme', 'dark');
        if (iconSpan) iconSpan.innerText = "☀️";
    }
}

function scrollToPDF() {
    const pdfSection = document.getElementById('pdfSection');
    if (pdfSection) pdfSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function checkPrintPermission() {
    const printBtn = document.getElementById('masterPrintBtn');
    if (!printBtn) return;
    if (ALLOW_PRINT.trim().toUpperCase() === "YES") {
        printBtn.disabled = false;
        printBtn.style.display = "inline-flex";
    } else {
        printBtn.disabled = true;
        printBtn.style.display = "none";
    }
}

function printAnswerKey() {
    if (ALLOW_PRINT.trim().toUpperCase() !== "YES") return;
    renderTable(answersData);
    setTimeout(() => {
        window.print();
        showPage(currentPage);
    }, 150);
}

function revealOMRPortal() {
    const portal = document.getElementById('student-omr-portal');
    portal.style.display = "block";
    buildStudentOMRGrid();
    portal.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function buildStudentOMRGrid() {
    const gridContainer = document.getElementById('omr-sheet-grid');
    if (gridContainer.children.length > 0) return; 
    
    let totalQuestions = 100;
    let questionsPerColumn = 10; 
    let columnsCount = totalQuestions / questionsPerColumn; 
    let fullHTML = '';
    
    for (let col = 0; col < columnsCount; col++) {
        let columnHTML = `<div class="omr-table-column">
            <div class="omr-column-header">
                <div class="header-q">Q.N</div>
                <div class="header-a">Ans</div>
            </div>`;
            
        let startQueryIndex = col * questionsPerColumn;
        let endQueryIndex = startQueryIndex + questionsPerColumn;
        
        for (let i = startQueryIndex; i < endQueryIndex; i++) {
            const qNum = i + 1;
            columnHTML += `
                <div class="omr-sheet-row">
                    <div class="omr-q-num">${qNum}</div>
                    <div class="omr-bubble-options">
                        <div class="omr-interactive-bubble" data-q="${i}" data-val="A">A</div>
                        <div class="omr-interactive-bubble" data-q="${i}" data-val="B">B</div>
                        <div class="omr-interactive-bubble" data-q="${i}" data-val="C">C</div>
                        <div class="omr-interactive-bubble" data-q="${i}" data-val="D">D</div>
                    </div>
                </div>
            `;
        }
        columnHTML += '</div>';
        fullHTML += columnHTML;
    }
    
    gridContainer.innerHTML = fullHTML;

    gridContainer.querySelectorAll('.omr-interactive-bubble').forEach(bubble => {
        bubble.addEventListener('click', function() {
            const qIndex = parseInt(this.getAttribute('data-q'));
            const value = this.getAttribute('data-val');
            const siblings = this.parentNode.querySelectorAll('.omr-interactive-bubble');
            
            siblings.forEach(sib => sib.classList.remove('selected'));

            if (studentAnswers[qIndex] === value) {
                studentAnswers[qIndex] = null; 
            } else {
                this.classList.add('selected');
                studentAnswers[qIndex] = value;
            }
        });
    });
}

function evaluateOMRSheet() {
    let resultDiv = document.getElementById('result');
    let matrixBox = document.getElementById('matrix-box');
    let auditGrid = document.getElementById('audit-grid');
    
    resultDiv.style.display = "block";
    matrixBox.style.display = "block";

    let score = 0;
    let auditHTML = '';

    for (let i = 0; i < 100; i++) {
        const qNum = i + 1;
        const studentSelection = studentAnswers[i] || "Unanswered";
        const correctKey = rawAnswers[i];
        const isCorrect = studentSelection === correctKey;

        if (isCorrect) score++;

        auditHTML += `
            <div class="audit-card ${isCorrect ? 'audit-correct' : 'audit-wrong'}">
                <strong>Question ${qNum}</strong>
                Your Answer: <b>${studentSelection}</b><br>
                Correct Answer: <b>${correctKey}</b>
            </div>
        `;
    }
    
    auditGrid.innerHTML = auditHTML;

    if (score < 33) {
        resultDiv.className = "result-box fail";
        resultDiv.innerHTML = `
            <h3>❌ Examination Status: FAILED</h3>
            <p>Total Obtained Marks: <span class="highlight-value">${score} / 100</span></p>
            <p style="margin-top:8px; font-weight:600;">The theory result is below the minimum required threshold of 33 marks. Therefore, passing is technically not possible..</p>
        `;
    } else {
        let dynamicPracticalRequirement = (50 - (score * 0.6)) / 0.4;
        let requiredPracticalScore = Math.ceil(dynamicPracticalRequirement);

        if (requiredPracticalScore < 33) {
            requiredPracticalScore = 33; 
        }

        if (requiredPracticalScore > 100) {
            resultDiv.className = "result-box fail";
            resultDiv.innerHTML = `
                <h3>⚠️ Core Aggregate Unobtainable</h3>
                <p>Total Obtained Marks: <span class="highlight-value">${score} / 100</span></p>
                <p>Required Practical Mark Index: <span class="highlight-value" style="color: #b91c1c !important;">${requiredPracticalScore} Marks</span></p>
                <p style="margin-top: 6px;">Your base aggregate ratio index cannot clear the overall total 50% target requirements even with an absolute maximum score of 100 in your practical portion.</p>
            `;
        } else {
            resultDiv.className = "result-box info";
            resultDiv.innerHTML = `
                <h3>🎉 Evaluation Metrics Calculated</h3>
                <p>Total Obtained Marks: <span class="highlight-value">${score} / 100</span></p>
                <hr style="border:0; border-top:1px solid #bfdbfe; margin:12px 0;">
                <p>To clear the remaining structural validation benchmarks, you need:</p>
                <p>Required Practical Score to Pass: <span class="highlight-value" style="color: #1e40af !important;">${requiredPracticalScore} Marks</span></p>
            `;
        }
    }
    
    resultDiv.scrollIntoView({ behavior: 'smooth' });
}

window.addEventListener('DOMContentLoaded', () => {
    showPage(1);
    checkPrintPermission();
});
</script>				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		<p>The post <a href="https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-2-series-24-jul-2026/">Internet of Things (M4-R5.1) Paper Solution Set-2 Series-24 (JUL 2026)</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-2-series-24-jul-2026/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Internet of Things (M4-R5.1) Paper Solution Set-2 Series-23 (JUL 2026)</title>
		<link>https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-2-series-23-jul-2026/</link>
					<comments>https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-2-series-23-jul-2026/#respond</comments>
		
		<dc:creator><![CDATA[Balmukund Maurya]]></dc:creator>
		<pubDate>Sun, 16 Aug 2026 13:44:07 +0000</pubDate>
				<category><![CDATA[O Level Paper Solution]]></category>
		<guid isPermaLink="false">https://gyanxp.com/?p=6137</guid>

					<description><![CDATA[<p>Print Answer Key 🌙 Subject Name Internet of Things Paper Code M4-R5.1 Session JUL 2026 Paper Set Set &#8211; 2 Series 23 Question Paper * Downloading and Printing is restricted for this document. Official Answer Key Q. No. Correct Options (OMR View) Bridge ← Prev Page 1 of 10 Next → Check Your Answer Key [&#8230;]</p>
<p>The post <a href="https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-2-series-23-jul-2026/">Internet of Things (M4-R5.1) Paper Solution Set-2 Series-23 (JUL 2026)</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="6137" class="elementor elementor-6137">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-d6d0d48 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="d6d0d48" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-73cbd4b" data-id="73cbd4b" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-2378cf0 elementor-widget elementor-widget-html" data-id="2378cf0" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<div class="paper-container" id="mainContainer">
    <!-- Top Action Bar -->
    <div class="top-action-bar no-print">
        <button class="action-btn secondary-btn" id="masterPrintBtn" onclick="printAnswerKey()">
            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/><path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"/></svg>
            Print Answer Key
        </button>

        <button class="dark-toggle-btn" id="themeToggle" onclick="toggleDarkMode()" aria-label="Toggle Dark Mode">
            <span class="mode-icon">🌙</span>
        </button>
    </div>

    <!-- Paper Details Header -->
    <header class="paper-header">
        <div class="meta-item subject-item">
            <span class="meta-label">Subject Name</span>
            <span class="meta-value">Internet of Things</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Paper Code</span>
            <span class="meta-value">M4-R5.1</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Session</span>
            <span class="meta-value">JUL 2026</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Paper Set</span>
            <span class="meta-value">Set - 2</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Series</span>
            <span class="meta-value">23</span>
        </div>
    </header>

    <!-- Main Workspace Split -->
    <div class="content-layout">
        <!-- PDF Presentation Block -->
        <div class="pdf-section" id="pdfSection">
            <h3 class="section-title">Question Paper</h3>
            <div class="pdf-wrapper-container">
                <div class="pdf-wrapper">
                    <iframe src="https://drive.google.com/file/d/1M3qkWV25Q-jSig3YzDPuhjJqRBzgT9Pw/preview" width="640" height="480" allow="autoplay" oncontextmenu="return false;"></iframe>
                </div>
                <div class="pdf-popout-shield"></div>
            </div>
            <p class="security-note">* Downloading and Printing is restricted for this document.</p>
        </div>

        <!-- Answer Grid Console Block -->
        <div class="answer-section" id="printableArea">
            <h3 class="section-title no-print">Official Answer Key</h3>
            
            <div class="search-box no-print">
                <input type="number" id="qSearch" placeholder="Jump to Question No. (e.g., 45)" min="1" max="100" oninput="searchQuestion()">
            </div>

            <div class="table-responsive" id="tableContainer">
                <table class="answer-table">
                    <thead>
                        <tr>
                            <th>Q. No.</th>
                            <th>Correct Options (OMR View)</th>
                            <th class="no-print">Bridge</th>
                        </tr>
                    </thead>
                    <tbody id="answer-body">
                        <!-- Loaded dynamically via JS Matrix -->
                    </tbody>
                </table>
            </div>

            <div class="pagination-container no-print" id="pagination-controls">
                <button class="nav-btn" id="prevBtn" onclick="changePage(-1)">← Prev</button>
                <span id="pageIndicator" class="page-indicator">Page 1 of 10</span>
                <button class="nav-btn" id="nextBtn" onclick="changePage(1)">Next →</button>
            </div>
        </div>
    </div>

    <!-- Bottom Trigger Action Button -->
    <div class="check-action-wrapper no-print">
        <button class="check-key-btn" onclick="revealOMRPortal()">Check Your Answer Key</button>
    </div>

    <!-- Student Evaluation Dynamic OMR Portal Section -->
    <div id="student-omr-portal" class="student-omr-portal no-print" style="display: none;">
        <h3 class="omr-title">OMR Answer Sheet (Select options here)</h3>
        
        <!-- OMR Grid Workspace Container -->
        <div class="omr-layout-box">
            <div class="omr-column-wrapper">
                <div id="omr-sheet-grid" class="omr-columns-container">
                    <!-- Loaded dynamically via JS -->
                </div>
            </div>
        </div>

        <!-- 🌟 Left/Right Navigation Buttons Centered at the Bottom 🌟 -->
        <div class="omr-scroll-center-bottom">
            <button class="omr-scroll-btn" onclick="scrollOMR('left')">← Scroll Left</button>
            <button class="omr-scroll-btn" onclick="scrollOMR('right')">Scroll Right →</button>
        </div>
        
        <div class="btn-container-vertical">
            <button class="btn-submit" onclick="evaluateOMRSheet()">SUBMIT TEST</button>
        </div>
        
        <!-- Results Dashboard Panel -->
        <div id="result" class="result-box"></div>

        <!-- Comprehensive Audit Verification Table Grid -->
        <div id="matrix-box" class="matrix-container" style="display: none;">
            <h3>📋 Detailed Answer Audit Sheet</h3>
            <div id="audit-grid" class="audit-grid"></div>
        </div>
    </div>
</div>

<style>
/* Modern Fluid Orange Design Tokens */
:root {
    --primary-color: #1e293b;
    --accent-color: #ff6b35; 
    --accent-gradient: linear-gradient(135deg, #ff6b35, #ff9f1c);
    --bg-main: #ffffff;
    --bg-light: #f8fafc;
    --text-main: #475569;
    --text-qno: #1e293b; 
    --border-color: #cbd5e1;
    --card-shadow: 0 4px 6px -1px rgba(255, 107, 53, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    --omr-inactive: #f1f5f9;
    --omr-text: #64748b;
}

[data-theme="dark"] {
    --primary-color: #f8fafc;
    --accent-color: #ff9f1c; 
    --accent-gradient: linear-gradient(135deg, #ff9f1c, #ff6b35);
    --bg-main: #0b0f19;
    --bg-light: #111824;
    --text-main: #cbd5e1;
    --text-qno: #ffffff; 
    --border-color: #1e293b;
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    --omr-inactive: #121824;
    --omr-text: #6b7280;
}

.paper-container {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    color: var(--text-main);
    background-color: var(--bg-main);
    transition: background 0.3s ease, color 0.3s ease;
}

.top-action-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-light);
    color: var(--text-main);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}
.action-btn:hover:not(:disabled) { 
    background: var(--accent-gradient); 
    color: white; 
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(255, 107, 53, 0.2);
}
.action-btn:disabled { opacity: 0.4; cursor: not-allowed !important; background: #e2e8f0; color: #94a3b8; }

.dark-toggle-btn {
    background: var(--bg-light); border: 1px solid var(--border-color);
    width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
    color: var(--text-main); transition: all 0.2s;
}
.dark-toggle-btn:hover { border-color: var(--accent-color); }

.paper-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 15px;
    background: linear-gradient(135deg, #ff6b35, #e65c00);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
    color: #ffffff;
    align-items: center;
    box-shadow: 0 8px 20px -5px rgba(230, 92, 0, 0.25);
}
[data-theme="dark"] .paper-header {
    background: linear-gradient(135deg, #cc5200, #993d00);
}
.meta-item {
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.meta-item:last-child { border-right: none; }
.subject-item { text-align: left; padding-left: 10px; }
.meta-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    font-weight: 700;
}
.meta-value { font-size: 1.15rem; font-weight: 800; color: #ffffff !important; }

.content-layout { display: flex; gap: 30px; flex-wrap: wrap; }
.pdf-section { flex: 1.3; min-width: 350px; }
.answer-section {
    flex: 1; min-width: 340px; background: var(--bg-main); border: 1px solid var(--border-color);
    border-radius: 14px; padding: 25px; box-shadow: var(--card-shadow);
    display: flex; flex-direction: column; height: 620px;
}
.section-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 20px; color: var(--accent-color); border-bottom: 2px solid var(--accent-color); padding-bottom: 6px; display: inline-block; }

.omr-container { display: flex; gap: 8px; justify-content: center; }
.omr-circle { width: 32px; height: 32px; border-radius: 50%; background: var(--omr-inactive); color: var(--omr-text); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; border: 1px solid var(--border-color); }
.omr-circle.correct { 
    background: var(--accent-gradient) !important; 
    color: white !important; 
    border-color: transparent !important;
    box-shadow: 0 2px 6px rgba(255, 107, 53, 0.2);
}

.sync-bridge-btn { background: none; border: none; color: var(--accent-color); cursor: pointer; font-size: 0.85rem; font-weight: 700; }
.sync-bridge-btn:hover { text-decoration: underline; }

.search-box { margin-bottom: 15px; }
.search-box input { width: 100%; padding: 11px 14px; border: 1px solid var(--border-color); background: var(--bg-light); color: var(--text-main); border-radius: 8px; outline: none; box-sizing: border-box; font-weight: 500; }
.search-box input:focus { border-color: var(--accent-color); box-shadow: 0 0 0 1px var(--accent-color); }

.pdf-wrapper-container { position: relative; width: 100%; }
.pdf-wrapper { position: relative; padding-bottom: 120%; height: 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--border-color); box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.pdf-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.pdf-popout-shield { position: absolute; top: 0; right: 0; width: 55px; height: 55px; background: transparent; z-index: 999; cursor: default; }
.security-note { font-size: 0.75rem; color: #ef4444; margin-top: 6px; font-style: italic; }

.table-responsive { flex-grow: 1; border: 1px solid var(--border-color); border-radius: 10px; overflow-y: auto; background-color: var(--bg-light); }
.answer-table { width: 100%; border-collapse: collapse; text-align: center; }
.answer-table th { background-color: var(--border-color); color: var(--text-main); padding: 14px; font-weight: 700; position: sticky; top: 0; z-index: 5; font-size: 0.88rem; }
.answer-table td { padding: 12px 6px; border-bottom: 1px solid var(--border-color); background: var(--bg-main); color: var(--text-main); }
.qno-text { color: var(--text-qno) !important; font-weight: 700; transition: color 0.3s ease; }

.pagination-container { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
.nav-btn { background: var(--bg-light); color: var(--text-main); border: 1px solid var(--border-color); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
.nav-btn:hover:not(:disabled) { border-color: var(--accent-color); color: var(--accent-color); }
.nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-indicator { font-size: 0.85rem; font-weight: 700; color: var(--text-main); }

.check-action-wrapper {
    display: flex;
    justify-content: center;
    margin: 40px 0 20px 0;
}
.check-key-btn {
    background: linear-gradient(135deg, #e65100, #ff6b35);
    color: #ffffff;
    border: none;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(230, 81, 0, 0.3);
    transition: all 0.2s ease;
}
.check-key-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(230, 81, 0, 0.4);
}
.student-omr-portal {
    margin-top: 30px;
    border-top: 3px solid var(--border-color);
    padding-top: 25px;
}
.omr-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-qno);
    margin: 10px 0 15px 0;
}

.omr-layout-box {
    border: 2px solid #e65100;
    border-radius: 8px;
    padding: 12px;
    background: var(--bg-main);
    margin-bottom: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
}
.omr-column-wrapper { width: 100%; }

/* 🌟 Styling for Centered Bottom Buttons 🌟 */
.omr-scroll-center-bottom {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin: 15px 0 25px 0;
    width: 100%;
}

.omr-scroll-btn {
    background: var(--bg-light);
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: var(--card-shadow);
}
.omr-scroll-btn:hover {
    background: var(--accent-gradient);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-1px);
}

/* 10 Columns Auto Matrix Layout for Row Limit 10 */
.omr-columns-container {
    display: grid;
    grid-template-columns: repeat(10, minmax(130px, 1fr));
    gap: 1px;
    background-color: var(--border-color);
    border: 1px solid var(--border-color);
}
.omr-table-column { background-color: var(--bg-main); display: flex; flex-direction: column; }
.omr-column-header {
    display: flex; background-color: #e65100; color: #ffffff;
    font-weight: 700; font-size: 12px; padding: 6px 2px; text-align: center;
}
.header-q { width: 30%; border-right: 1px solid rgba(255, 255, 255, 0.4); }
.header-a { width: 70%; }
.omr-sheet-row { display: flex; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--border-color); background-color: var(--bg-main); }
.omr-sheet-row:hover { background-color: var(--bg-light); }
.omr-q-num { width: 30%; font-weight: 700; color: var(--text-qno); font-size: 12px; text-align: center; border-right: 1px solid var(--border-color); }
.omr-bubble-options { width: 70%; display: flex; justify-content: space-around; align-items: center; padding-left: 2px; }
.omr-interactive-bubble {
    display: flex; align-items: center; justify-content: center;
    width: 21px; height: 21px; border: 1.5px solid #e65100; border-radius: 50%;
    font-size: 10.5px; font-weight: 700; color: #e65100; cursor: pointer;
    transition: all 0.15s ease; user-select: none; background-color: transparent;
}
.omr-interactive-bubble:hover { background-color: #ffe0b2; }
.omr-interactive-bubble.selected { background-color: #e65100 !important; color: #ffffff !important; border-color: #e65100 !important; }

.btn-container-vertical { display: flex; justify-content: center; margin-top: 15px; }
.btn-submit {
    display: block; width: 100%; max-width: 240px; height: 50px;
    color: #ffffff; border: none; border-radius: 6px; font-size: 16px;
    font-weight: 700; cursor: pointer; text-align: center; background: #2e7d32;
    transition: background 0.2s ease;
}
.btn-submit:hover { background: #1b5e20; }

.result-box { margin-top: 25px; padding: 20px; border-radius: 10px; display: none; border: 1px solid transparent; }
.pass { background-color: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.fail { background-color: #fef2f2; color: #991b1b; border-color: #fee2e2; }
.info { background-color: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.highlight-value { font-size: 26px; font-weight: 800; color: var(--text-qno); display: block; margin-top: 5px; }

.matrix-container { margin-top: 30px; border-top: 2px dashed var(--border-color); padding-top: 20px; }
.matrix-container h3 { font-size: 16px; font-weight: 700; color: var(--text-qno); margin-bottom: 15px; }
.audit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.audit-card { padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); font-size: 13px; background: var(--bg-light); line-height: 1.5; }
.audit-card.audit-correct { border-color: #bbf7d0; background-color: #f0fdf4; color: #15803d;}
.audit-card.audit-wrong { border-color: #fecaca; background-color: #fef2f2; color: #b91c1c;}
.audit-card strong { display: block; font-size: 14px; margin-bottom: 4px; color: var(--text-qno); }

@media print {
    body, html { background: #ffffff !important; color: #000000 !important; overflow: visible !important; height: auto !important; }
    .paper-container { max-width: 100% !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
    .paper-header { display: grid !important; grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important; background: #f1f5f9 !important; color: #000000 !important; border: 1px solid #000000 !important; border-radius: 6px !important; padding: 12px !important; box-shadow: none !important; }
    .meta-item { border-right: 1px solid #cbd5e1 !important; }
    .meta-label { color: #475569 !important; }
    .meta-value { color: #000000 !important; font-size: 1rem !important; }
    .no-print, .pdf-section, .top-action-bar, .search-box, .pagination-container, th:last-child, td:last-child, .omr-scroll-center-bottom { display: none !important; }
    .content-layout { display: block !important; overflow: visible !important; }
    .answer-section { border: none !important; box-shadow: none !important; width: 100% !important; height: auto !important; max-height: none !important; padding: 0 !important; display: block !important; overflow: visible !important; }
    .table-responsive { overflow: visible !important; max-height: none !important; height: auto !important; border: none !important; display: block !important; }
    .answer-table { width: 100% !important; border: 1px solid #000000 !important; margin-top: 15px; table-layout: auto !important; }
    .answer-table th { background-color: #f8fafc !important; color: #000000 !important; border-bottom: 2px solid #000000 !important; position: relative !important; }
    .answer-table td { background: #ffffff !important; color: #000000 !important; padding: 8px !important; border-bottom: 1px solid #cbd5e1 !important; page-break-inside: avoid !important; break-inside: avoid !important; }
    .qno-text { color: #000000 !important; }
    .omr-circle { border: 1px solid #64748b !important; background: transparent !important; color: #000000 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .omr-circle.correct { background-color: #ff6b35 !important; background: #ff6b35 !important; color: #ffffff !important; border-color: #ff6b35 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

@media (max-width: 900px) {
    .content-layout { flex-direction: column; }
    .answer-section { height: auto; }
    .paper-header { grid-template-columns: 1fr; gap: 10px; text-align: center; }
    .subject-item { text-align: center; padding-left: 0; }
    .meta-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 8px; }
    .meta-item:last-child { border-bottom: none; padding-bottom: 0; }
}
</style>

<script>
const ALLOW_PRINT = "YES";

const rawAnswers = [
    "A", "B", "B", "A", "D", "A", "C", "A", "C", "A",
    "A", "D", "B", "D", "B", "D", "A", "C", "C", "C",
    "B", "A", "A", "B", "D", "B", "C", "A", "B", "D",
    "D", "D", "B", "C", "B", "C", "C", "A", "C", "A",
    "C", "D", "A", "D", "C", "A", "A", "D", "C", "D",
    "C", "D", "D", "C", "B", "C", "B", "A", "D", "B",
    "A", "C", "C", "A", "B", "D", "C", "C", "D", "B",
    "C", "D", "C", "A", "A", "C", "A", "B", "B", "D",
    "B", "C", "B", "B", "B", "A", "C", "B", "D", "A",
    "D", "D", "D", "B", "C", "A", "C", "C", "B", "A"
];

const answersData = Array.from({ length: 100 }, (_, i) => ({
    qNo: i + 1,
    ans: rawAnswers[i] || "A"
}));

const studentAnswers = new Array(100).fill(null);

let currentPage = 1;
const itemsPerPage = 10;

// Dynamic Smooth Left-Right Scroll Navigation Function
function scrollOMR(direction) {
    const targetWrapper = document.querySelector('.omr-layout-box');
    if (!targetWrapper) return;
    const shiftValue = direction === 'left' ? -280 : 280;
    targetWrapper.scrollBy({ left: shiftValue, behavior: 'smooth' });
}

function generateOMRHTML(questionNumber, correctAnswer) {
    const options = ["A", "B", "C", "D"];
    let omrHTML = '<div class="omr-container">';
    options.forEach(opt => {
        const isCorrect = (opt === correctAnswer) ? 'correct' : '';
        omrHTML += '<span class="omr-circle ' + isCorrect + '">' + opt + '</span>';
    });
    omrHTML += '</div>';
    return omrHTML;
}

function renderTable(pageData) {
    const tbody = document.getElementById('answer-body');
    if (!tbody) return;
    tbody.innerHTML = '';
    pageData.forEach(item => {
        const row = '<tr>' +
            '<td><strong class="qno-text">Q. ' + item.qNo + '</strong></td>' +
            '<td>' + generateOMRHTML(item.qNo, item.ans) + '</td>' +
            '<td class="no-print">' +
                '<button class="sync-bridge-btn" onclick="scrollToPDF()">🔍 View</button>' +
            '</td>' +
        '</tr>';
        tbody.insertAdjacentHTML('beforeend', row);
    });
}

function showPage(page) {
    currentPage = page;
    const start = (page - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    renderTable(answersData.slice(start, end));
    
    const paginationControls = document.getElementById('pagination-controls');
    const pageIndicator = document.getElementById('pageIndicator');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    
    if (paginationControls) paginationControls.style.display = 'flex';
    if (pageIndicator) pageIndicator.innerText = 'Page ' + currentPage + ' of 10';
    if (prevBtn) prevBtn.disabled = currentPage === 1;
    if (nextBtn) nextBtn.disabled = currentPage === 10;
}

function changePage(direction) {
    let newPage = currentPage + direction;
    if (newPage >= 1 && newPage <= 10) showPage(newPage);
}

function searchQuestion() {
    const inputVal = parseInt(document.getElementById('qSearch').value);
    if (!inputVal || inputVal < 1 || inputVal > 100) {
        showPage(1);
        return;
    }
    const filteredResult = answersData.filter(q => q.qNo === inputVal);
    renderTable(filteredResult);
    const paginationControls = document.getElementById('pagination-controls');
    if (paginationControls) paginationControls.style.display = 'none';
}

function toggleDarkMode() {
    const container = document.getElementById('mainContainer');
    const iconSpan = document.querySelector('.mode-icon');
    if (!container) return;
    if(container.getAttribute('data-theme') === 'dark') {
        container.removeAttribute('data-theme');
        if (iconSpan) iconSpan.innerText = "🌙";
    } else {
        container.setAttribute('data-theme', 'dark');
        if (iconSpan) iconSpan.innerText = "☀️";
    }
}

function scrollToPDF() {
    const pdfSection = document.getElementById('pdfSection');
    if (pdfSection) pdfSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function checkPrintPermission() {
    const printBtn = document.getElementById('masterPrintBtn');
    if (!printBtn) return;
    if (ALLOW_PRINT.trim().toUpperCase() === "YES") {
        printBtn.disabled = false;
        printBtn.style.display = "inline-flex";
    } else {
        printBtn.disabled = true;
        printBtn.style.display = "none";
    }
}

function printAnswerKey() {
    if (ALLOW_PRINT.trim().toUpperCase() !== "YES") return;
    renderTable(answersData);
    setTimeout(() => {
        window.print();
        showPage(currentPage);
    }, 150);
}

function revealOMRPortal() {
    const portal = document.getElementById('student-omr-portal');
    portal.style.display = "block";
    buildStudentOMRGrid();
    portal.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function buildStudentOMRGrid() {
    const gridContainer = document.getElementById('omr-sheet-grid');
    if (gridContainer.children.length > 0) return; 
    
    let totalQuestions = 100;
    let questionsPerColumn = 10; 
    let columnsCount = totalQuestions / questionsPerColumn; 
    let fullHTML = '';
    
    for (let col = 0; col < columnsCount; col++) {
        let columnHTML = `<div class="omr-table-column">
            <div class="omr-column-header">
                <div class="header-q">Q.N</div>
                <div class="header-a">Ans</div>
            </div>`;
            
        let startQueryIndex = col * questionsPerColumn;
        let endQueryIndex = startQueryIndex + questionsPerColumn;
        
        for (let i = startQueryIndex; i < endQueryIndex; i++) {
            const qNum = i + 1;
            columnHTML += `
                <div class="omr-sheet-row">
                    <div class="omr-q-num">${qNum}</div>
                    <div class="omr-bubble-options">
                        <div class="omr-interactive-bubble" data-q="${i}" data-val="A">A</div>
                        <div class="omr-interactive-bubble" data-q="${i}" data-val="B">B</div>
                        <div class="omr-interactive-bubble" data-q="${i}" data-val="C">C</div>
                        <div class="omr-interactive-bubble" data-q="${i}" data-val="D">D</div>
                    </div>
                </div>
            `;
        }
        columnHTML += '</div>';
        fullHTML += columnHTML;
    }
    
    gridContainer.innerHTML = fullHTML;

    gridContainer.querySelectorAll('.omr-interactive-bubble').forEach(bubble => {
        bubble.addEventListener('click', function() {
            const qIndex = parseInt(this.getAttribute('data-q'));
            const value = this.getAttribute('data-val');
            const siblings = this.parentNode.querySelectorAll('.omr-interactive-bubble');
            
            siblings.forEach(sib => sib.classList.remove('selected'));

            if (studentAnswers[qIndex] === value) {
                studentAnswers[qIndex] = null; 
            } else {
                this.classList.add('selected');
                studentAnswers[qIndex] = value;
            }
        });
    });
}

function evaluateOMRSheet() {
    let resultDiv = document.getElementById('result');
    let matrixBox = document.getElementById('matrix-box');
    let auditGrid = document.getElementById('audit-grid');
    
    resultDiv.style.display = "block";
    matrixBox.style.display = "block";

    let score = 0;
    let auditHTML = '';

    for (let i = 0; i < 100; i++) {
        const qNum = i + 1;
        const studentSelection = studentAnswers[i] || "Unanswered";
        const correctKey = rawAnswers[i];
        const isCorrect = studentSelection === correctKey;

        if (isCorrect) score++;

        auditHTML += `
            <div class="audit-card ${isCorrect ? 'audit-correct' : 'audit-wrong'}">
                <strong>Question ${qNum}</strong>
                Your Answer: <b>${studentSelection}</b><br>
                Correct Answer: <b>${correctKey}</b>
            </div>
        `;
    }
    
    auditGrid.innerHTML = auditHTML;

    if (score < 33) {
        resultDiv.className = "result-box fail";
        resultDiv.innerHTML = `
            <h3>❌ Examination Status: FAILED</h3>
            <p>Total Obtained Marks: <span class="highlight-value">${score} / 100</span></p>
            <p style="margin-top:8px; font-weight:600;">The theory result is below the minimum required threshold of 33 marks. Therefore, passing is technically not possible..</p>
        `;
    } else {
        let dynamicPracticalRequirement = (50 - (score * 0.6)) / 0.4;
        let requiredPracticalScore = Math.ceil(dynamicPracticalRequirement);

        if (requiredPracticalScore < 33) {
            requiredPracticalScore = 33; 
        }

        if (requiredPracticalScore > 100) {
            resultDiv.className = "result-box fail";
            resultDiv.innerHTML = `
                <h3>⚠️ Core Aggregate Unobtainable</h3>
                <p>Total Obtained Marks: <span class="highlight-value">${score} / 100</span></p>
                <p>Required Practical Mark Index: <span class="highlight-value" style="color: #b91c1c !important;">${requiredPracticalScore} Marks</span></p>
                <p style="margin-top: 6px;">Your base aggregate ratio index cannot clear the overall total 50% target requirements even with an absolute maximum score of 100 in your practical portion.</p>
            `;
        } else {
            resultDiv.className = "result-box info";
            resultDiv.innerHTML = `
                <h3>🎉 Evaluation Metrics Calculated</h3>
                <p>Total Obtained Marks: <span class="highlight-value">${score} / 100</span></p>
                <hr style="border:0; border-top:1px solid #bfdbfe; margin:12px 0;">
                <p>To clear the remaining structural validation benchmarks, you need:</p>
                <p>Required Practical Score to Pass: <span class="highlight-value" style="color: #1e40af !important;">${requiredPracticalScore} Marks</span></p>
            `;
        }
    }
    
    resultDiv.scrollIntoView({ behavior: 'smooth' });
}

window.addEventListener('DOMContentLoaded', () => {
    showPage(1);
    checkPrintPermission();
});
</script>				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		<p>The post <a href="https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-2-series-23-jul-2026/">Internet of Things (M4-R5.1) Paper Solution Set-2 Series-23 (JUL 2026)</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-2-series-23-jul-2026/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Internet of Things (M4-R5.1) Paper Solution Set-2 Series-21 (JUL 2026)</title>
		<link>https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-2-series-21-jul-2026/</link>
					<comments>https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-2-series-21-jul-2026/#respond</comments>
		
		<dc:creator><![CDATA[Balmukund Maurya]]></dc:creator>
		<pubDate>Sun, 16 Aug 2026 13:31:58 +0000</pubDate>
				<category><![CDATA[O Level Paper Solution]]></category>
		<guid isPermaLink="false">https://gyanxp.com/?p=6128</guid>

					<description><![CDATA[<p>Print Answer Key 🌙 Subject Name Internet of Things Paper Code M4-R5.1 Session JUL 2026 Paper Set Set &#8211; 2 Series 21 Question Paper * Downloading and Printing is restricted for this document. Official Answer Key Q. No. Correct Options (OMR View) Bridge ← Prev Page 1 of 10 Next → Check Your Answer Key [&#8230;]</p>
<p>The post <a href="https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-2-series-21-jul-2026/">Internet of Things (M4-R5.1) Paper Solution Set-2 Series-21 (JUL 2026)</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="6128" class="elementor elementor-6128">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-b5d2e67 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="b5d2e67" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c5fd966" data-id="c5fd966" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-baf4f85 elementor-widget elementor-widget-html" data-id="baf4f85" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<div class="paper-container" id="mainContainer">
    <!-- Top Action Bar -->
    <div class="top-action-bar no-print">
        <button class="action-btn secondary-btn" id="masterPrintBtn" onclick="printAnswerKey()">
            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/><path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"/></svg>
            Print Answer Key
        </button>

        <button class="dark-toggle-btn" id="themeToggle" onclick="toggleDarkMode()" aria-label="Toggle Dark Mode">
            <span class="mode-icon">🌙</span>
        </button>
    </div>

    <!-- Paper Details Header -->
    <header class="paper-header">
        <div class="meta-item subject-item">
            <span class="meta-label">Subject Name</span>
            <span class="meta-value">Internet of Things</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Paper Code</span>
            <span class="meta-value">M4-R5.1</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Session</span>
            <span class="meta-value">JUL 2026</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Paper Set</span>
            <span class="meta-value">Set - 2</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Series</span>
            <span class="meta-value">21</span>
        </div>
    </header>

    <!-- Main Workspace Split -->
    <div class="content-layout">
        <!-- PDF Presentation Block -->
        <div class="pdf-section" id="pdfSection">
            <h3 class="section-title">Question Paper</h3>
            <div class="pdf-wrapper-container">
                <div class="pdf-wrapper">
                    <iframe src="https://drive.google.com/file/d/1bVlROBW2LfX9JNrDUDFy8f8s2862mHbN/preview" width="640" height="480" allow="autoplay" oncontextmenu="return false;"></iframe>
                </div>
                <div class="pdf-popout-shield"></div>
            </div>
            <p class="security-note">* Downloading and Printing is restricted for this document.</p>
        </div>

        <!-- Answer Grid Console Block -->
        <div class="answer-section" id="printableArea">
            <h3 class="section-title no-print">Official Answer Key</h3>
            
            <div class="search-box no-print">
                <input type="number" id="qSearch" placeholder="Jump to Question No. (e.g., 45)" min="1" max="100" oninput="searchQuestion()">
            </div>

            <div class="table-responsive" id="tableContainer">
                <table class="answer-table">
                    <thead>
                        <tr>
                            <th>Q. No.</th>
                            <th>Correct Options (OMR View)</th>
                            <th class="no-print">Bridge</th>
                        </tr>
                    </thead>
                    <tbody id="answer-body">
                        <!-- Loaded dynamically via JS Matrix -->
                    </tbody>
                </table>
            </div>

            <div class="pagination-container no-print" id="pagination-controls">
                <button class="nav-btn" id="prevBtn" onclick="changePage(-1)">← Prev</button>
                <span id="pageIndicator" class="page-indicator">Page 1 of 10</span>
                <button class="nav-btn" id="nextBtn" onclick="changePage(1)">Next →</button>
            </div>
        </div>
    </div>

    <!-- Bottom Trigger Action Button -->
    <div class="check-action-wrapper no-print">
        <button class="check-key-btn" onclick="revealOMRPortal()">Check Your Answer Key</button>
    </div>

    <!-- Student Evaluation Dynamic OMR Portal Section -->
    <div id="student-omr-portal" class="student-omr-portal no-print" style="display: none;">
        <h3 class="omr-title">OMR Answer Sheet (Select options here)</h3>
        
        <!-- OMR Grid Workspace Container -->
        <div class="omr-layout-box">
            <div class="omr-column-wrapper">
                <div id="omr-sheet-grid" class="omr-columns-container">
                    <!-- Loaded dynamically via JS -->
                </div>
            </div>
        </div>

        <!-- 🌟 Left/Right Navigation Buttons Centered at the Bottom 🌟 -->
        <div class="omr-scroll-center-bottom">
            <button class="omr-scroll-btn" onclick="scrollOMR('left')">← Scroll Left</button>
            <button class="omr-scroll-btn" onclick="scrollOMR('right')">Scroll Right →</button>
        </div>
        
        <div class="btn-container-vertical">
            <button class="btn-submit" onclick="evaluateOMRSheet()">SUBMIT TEST</button>
        </div>
        
        <!-- Results Dashboard Panel -->
        <div id="result" class="result-box"></div>

        <!-- Comprehensive Audit Verification Table Grid -->
        <div id="matrix-box" class="matrix-container" style="display: none;">
            <h3>📋 Detailed Answer Audit Sheet</h3>
            <div id="audit-grid" class="audit-grid"></div>
        </div>
    </div>
</div>

<style>
/* Modern Fluid Orange Design Tokens */
:root {
    --primary-color: #1e293b;
    --accent-color: #ff6b35; 
    --accent-gradient: linear-gradient(135deg, #ff6b35, #ff9f1c);
    --bg-main: #ffffff;
    --bg-light: #f8fafc;
    --text-main: #475569;
    --text-qno: #1e293b; 
    --border-color: #cbd5e1;
    --card-shadow: 0 4px 6px -1px rgba(255, 107, 53, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    --omr-inactive: #f1f5f9;
    --omr-text: #64748b;
}

[data-theme="dark"] {
    --primary-color: #f8fafc;
    --accent-color: #ff9f1c; 
    --accent-gradient: linear-gradient(135deg, #ff9f1c, #ff6b35);
    --bg-main: #0b0f19;
    --bg-light: #111824;
    --text-main: #cbd5e1;
    --text-qno: #ffffff; 
    --border-color: #1e293b;
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    --omr-inactive: #121824;
    --omr-text: #6b7280;
}

.paper-container {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    color: var(--text-main);
    background-color: var(--bg-main);
    transition: background 0.3s ease, color 0.3s ease;
}

.top-action-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-light);
    color: var(--text-main);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}
.action-btn:hover:not(:disabled) { 
    background: var(--accent-gradient); 
    color: white; 
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(255, 107, 53, 0.2);
}
.action-btn:disabled { opacity: 0.4; cursor: not-allowed !important; background: #e2e8f0; color: #94a3b8; }

.dark-toggle-btn {
    background: var(--bg-light); border: 1px solid var(--border-color);
    width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
    color: var(--text-main); transition: all 0.2s;
}
.dark-toggle-btn:hover { border-color: var(--accent-color); }

.paper-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 15px;
    background: linear-gradient(135deg, #ff6b35, #e65c00);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
    color: #ffffff;
    align-items: center;
    box-shadow: 0 8px 20px -5px rgba(230, 92, 0, 0.25);
}
[data-theme="dark"] .paper-header {
    background: linear-gradient(135deg, #cc5200, #993d00);
}
.meta-item {
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.meta-item:last-child { border-right: none; }
.subject-item { text-align: left; padding-left: 10px; }
.meta-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    font-weight: 700;
}
.meta-value { font-size: 1.15rem; font-weight: 800; color: #ffffff !important; }

.content-layout { display: flex; gap: 30px; flex-wrap: wrap; }
.pdf-section { flex: 1.3; min-width: 350px; }
.answer-section {
    flex: 1; min-width: 340px; background: var(--bg-main); border: 1px solid var(--border-color);
    border-radius: 14px; padding: 25px; box-shadow: var(--card-shadow);
    display: flex; flex-direction: column; height: 620px;
}
.section-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 20px; color: var(--accent-color); border-bottom: 2px solid var(--accent-color); padding-bottom: 6px; display: inline-block; }

.omr-container { display: flex; gap: 8px; justify-content: center; }
.omr-circle { width: 32px; height: 32px; border-radius: 50%; background: var(--omr-inactive); color: var(--omr-text); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; border: 1px solid var(--border-color); }
.omr-circle.correct { 
    background: var(--accent-gradient) !important; 
    color: white !important; 
    border-color: transparent !important;
    box-shadow: 0 2px 6px rgba(255, 107, 53, 0.2);
}

.sync-bridge-btn { background: none; border: none; color: var(--accent-color); cursor: pointer; font-size: 0.85rem; font-weight: 700; }
.sync-bridge-btn:hover { text-decoration: underline; }

.search-box { margin-bottom: 15px; }
.search-box input { width: 100%; padding: 11px 14px; border: 1px solid var(--border-color); background: var(--bg-light); color: var(--text-main); border-radius: 8px; outline: none; box-sizing: border-box; font-weight: 500; }
.search-box input:focus { border-color: var(--accent-color); box-shadow: 0 0 0 1px var(--accent-color); }

.pdf-wrapper-container { position: relative; width: 100%; }
.pdf-wrapper { position: relative; padding-bottom: 120%; height: 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--border-color); box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.pdf-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.pdf-popout-shield { position: absolute; top: 0; right: 0; width: 55px; height: 55px; background: transparent; z-index: 999; cursor: default; }
.security-note { font-size: 0.75rem; color: #ef4444; margin-top: 6px; font-style: italic; }

.table-responsive { flex-grow: 1; border: 1px solid var(--border-color); border-radius: 10px; overflow-y: auto; background-color: var(--bg-light); }
.answer-table { width: 100%; border-collapse: collapse; text-align: center; }
.answer-table th { background-color: var(--border-color); color: var(--text-main); padding: 14px; font-weight: 700; position: sticky; top: 0; z-index: 5; font-size: 0.88rem; }
.answer-table td { padding: 12px 6px; border-bottom: 1px solid var(--border-color); background: var(--bg-main); color: var(--text-main); }
.qno-text { color: var(--text-qno) !important; font-weight: 700; transition: color 0.3s ease; }

.pagination-container { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
.nav-btn { background: var(--bg-light); color: var(--text-main); border: 1px solid var(--border-color); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
.nav-btn:hover:not(:disabled) { border-color: var(--accent-color); color: var(--accent-color); }
.nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-indicator { font-size: 0.85rem; font-weight: 700; color: var(--text-main); }

.check-action-wrapper {
    display: flex;
    justify-content: center;
    margin: 40px 0 20px 0;
}
.check-key-btn {
    background: linear-gradient(135deg, #e65100, #ff6b35);
    color: #ffffff;
    border: none;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(230, 81, 0, 0.3);
    transition: all 0.2s ease;
}
.check-key-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(230, 81, 0, 0.4);
}
.student-omr-portal {
    margin-top: 30px;
    border-top: 3px solid var(--border-color);
    padding-top: 25px;
}
.omr-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-qno);
    margin: 10px 0 15px 0;
}

.omr-layout-box {
    border: 2px solid #e65100;
    border-radius: 8px;
    padding: 12px;
    background: var(--bg-main);
    margin-bottom: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
}
.omr-column-wrapper { width: 100%; }

/* 🌟 Styling for Centered Bottom Buttons 🌟 */
.omr-scroll-center-bottom {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin: 15px 0 25px 0;
    width: 100%;
}

.omr-scroll-btn {
    background: var(--bg-light);
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: var(--card-shadow);
}
.omr-scroll-btn:hover {
    background: var(--accent-gradient);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-1px);
}

/* 10 Columns Auto Matrix Layout for Row Limit 10 */
.omr-columns-container {
    display: grid;
    grid-template-columns: repeat(10, minmax(130px, 1fr));
    gap: 1px;
    background-color: var(--border-color);
    border: 1px solid var(--border-color);
}
.omr-table-column { background-color: var(--bg-main); display: flex; flex-direction: column; }
.omr-column-header {
    display: flex; background-color: #e65100; color: #ffffff;
    font-weight: 700; font-size: 12px; padding: 6px 2px; text-align: center;
}
.header-q { width: 30%; border-right: 1px solid rgba(255, 255, 255, 0.4); }
.header-a { width: 70%; }
.omr-sheet-row { display: flex; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--border-color); background-color: var(--bg-main); }
.omr-sheet-row:hover { background-color: var(--bg-light); }
.omr-q-num { width: 30%; font-weight: 700; color: var(--text-qno); font-size: 12px; text-align: center; border-right: 1px solid var(--border-color); }
.omr-bubble-options { width: 70%; display: flex; justify-content: space-around; align-items: center; padding-left: 2px; }
.omr-interactive-bubble {
    display: flex; align-items: center; justify-content: center;
    width: 21px; height: 21px; border: 1.5px solid #e65100; border-radius: 50%;
    font-size: 10.5px; font-weight: 700; color: #e65100; cursor: pointer;
    transition: all 0.15s ease; user-select: none; background-color: transparent;
}
.omr-interactive-bubble:hover { background-color: #ffe0b2; }
.omr-interactive-bubble.selected { background-color: #e65100 !important; color: #ffffff !important; border-color: #e65100 !important; }

.btn-container-vertical { display: flex; justify-content: center; margin-top: 15px; }
.btn-submit {
    display: block; width: 100%; max-width: 240px; height: 50px;
    color: #ffffff; border: none; border-radius: 6px; font-size: 16px;
    font-weight: 700; cursor: pointer; text-align: center; background: #2e7d32;
    transition: background 0.2s ease;
}
.btn-submit:hover { background: #1b5e20; }

.result-box { margin-top: 25px; padding: 20px; border-radius: 10px; display: none; border: 1px solid transparent; }
.pass { background-color: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.fail { background-color: #fef2f2; color: #991b1b; border-color: #fee2e2; }
.info { background-color: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.highlight-value { font-size: 26px; font-weight: 800; color: var(--text-qno); display: block; margin-top: 5px; }

.matrix-container { margin-top: 30px; border-top: 2px dashed var(--border-color); padding-top: 20px; }
.matrix-container h3 { font-size: 16px; font-weight: 700; color: var(--text-qno); margin-bottom: 15px; }
.audit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.audit-card { padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); font-size: 13px; background: var(--bg-light); line-height: 1.5; }
.audit-card.audit-correct { border-color: #bbf7d0; background-color: #f0fdf4; color: #15803d;}
.audit-card.audit-wrong { border-color: #fecaca; background-color: #fef2f2; color: #b91c1c;}
.audit-card strong { display: block; font-size: 14px; margin-bottom: 4px; color: var(--text-qno); }

@media print {
    body, html { background: #ffffff !important; color: #000000 !important; overflow: visible !important; height: auto !important; }
    .paper-container { max-width: 100% !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
    .paper-header { display: grid !important; grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important; background: #f1f5f9 !important; color: #000000 !important; border: 1px solid #000000 !important; border-radius: 6px !important; padding: 12px !important; box-shadow: none !important; }
    .meta-item { border-right: 1px solid #cbd5e1 !important; }
    .meta-label { color: #475569 !important; }
    .meta-value { color: #000000 !important; font-size: 1rem !important; }
    .no-print, .pdf-section, .top-action-bar, .search-box, .pagination-container, th:last-child, td:last-child, .omr-scroll-center-bottom { display: none !important; }
    .content-layout { display: block !important; overflow: visible !important; }
    .answer-section { border: none !important; box-shadow: none !important; width: 100% !important; height: auto !important; max-height: none !important; padding: 0 !important; display: block !important; overflow: visible !important; }
    .table-responsive { overflow: visible !important; max-height: none !important; height: auto !important; border: none !important; display: block !important; }
    .answer-table { width: 100% !important; border: 1px solid #000000 !important; margin-top: 15px; table-layout: auto !important; }
    .answer-table th { background-color: #f8fafc !important; color: #000000 !important; border-bottom: 2px solid #000000 !important; position: relative !important; }
    .answer-table td { background: #ffffff !important; color: #000000 !important; padding: 8px !important; border-bottom: 1px solid #cbd5e1 !important; page-break-inside: avoid !important; break-inside: avoid !important; }
    .qno-text { color: #000000 !important; }
    .omr-circle { border: 1px solid #64748b !important; background: transparent !important; color: #000000 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .omr-circle.correct { background-color: #ff6b35 !important; background: #ff6b35 !important; color: #ffffff !important; border-color: #ff6b35 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

@media (max-width: 900px) {
    .content-layout { flex-direction: column; }
    .answer-section { height: auto; }
    .paper-header { grid-template-columns: 1fr; gap: 10px; text-align: center; }
    .subject-item { text-align: center; padding-left: 0; }
    .meta-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 8px; }
    .meta-item:last-child { border-bottom: none; padding-bottom: 0; }
}
</style>

<script>
const ALLOW_PRINT = "YES";

const rawAnswers = [
    "A", "C", "A", "A", "A", "B", "C", "A", "D", "A",
    "A", "B", "B", "A", "C", "D", "D", "B", "D", "D",
    "B", "A", "A", "C", "C", "B", "C", "D", "C", "D",
    "B", "A", "D", "C", "B", "A", "D", "D", "B", "D",
    "A", "C", "B", "B", "B", "A", "B", "D", "B", "B",
    "C", "A", "D", "A", "B", "D", "A", "C", "C", "D",
    "D", "A", "A", "D", "C", "C", "C", "C", "B", "D",
    "A", "C", "C", "A", "B", "A", "C", "C", "C", "B",
    "A", "C", "C", "D", "B", "A", "A", "D", "B", "D",
    "C", "B", "B", "D", "C", "B", "C", "D", "A", "A"
];

const answersData = Array.from({ length: 100 }, (_, i) => ({
    qNo: i + 1,
    ans: rawAnswers[i] || "A"
}));

const studentAnswers = new Array(100).fill(null);

let currentPage = 1;
const itemsPerPage = 10;

// Dynamic Smooth Left-Right Scroll Navigation Function
function scrollOMR(direction) {
    const targetWrapper = document.querySelector('.omr-layout-box');
    if (!targetWrapper) return;
    const shiftValue = direction === 'left' ? -280 : 280;
    targetWrapper.scrollBy({ left: shiftValue, behavior: 'smooth' });
}

function generateOMRHTML(questionNumber, correctAnswer) {
    const options = ["A", "B", "C", "D"];
    let omrHTML = '<div class="omr-container">';
    options.forEach(opt => {
        const isCorrect = (opt === correctAnswer) ? 'correct' : '';
        omrHTML += '<span class="omr-circle ' + isCorrect + '">' + opt + '</span>';
    });
    omrHTML += '</div>';
    return omrHTML;
}

function renderTable(pageData) {
    const tbody = document.getElementById('answer-body');
    if (!tbody) return;
    tbody.innerHTML = '';
    pageData.forEach(item => {
        const row = '<tr>' +
            '<td><strong class="qno-text">Q. ' + item.qNo + '</strong></td>' +
            '<td>' + generateOMRHTML(item.qNo, item.ans) + '</td>' +
            '<td class="no-print">' +
                '<button class="sync-bridge-btn" onclick="scrollToPDF()">🔍 View</button>' +
            '</td>' +
        '</tr>';
        tbody.insertAdjacentHTML('beforeend', row);
    });
}

function showPage(page) {
    currentPage = page;
    const start = (page - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    renderTable(answersData.slice(start, end));
    
    const paginationControls = document.getElementById('pagination-controls');
    const pageIndicator = document.getElementById('pageIndicator');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    
    if (paginationControls) paginationControls.style.display = 'flex';
    if (pageIndicator) pageIndicator.innerText = 'Page ' + currentPage + ' of 10';
    if (prevBtn) prevBtn.disabled = currentPage === 1;
    if (nextBtn) nextBtn.disabled = currentPage === 10;
}

function changePage(direction) {
    let newPage = currentPage + direction;
    if (newPage >= 1 && newPage <= 10) showPage(newPage);
}

function searchQuestion() {
    const inputVal = parseInt(document.getElementById('qSearch').value);
    if (!inputVal || inputVal < 1 || inputVal > 100) {
        showPage(1);
        return;
    }
    const filteredResult = answersData.filter(q => q.qNo === inputVal);
    renderTable(filteredResult);
    const paginationControls = document.getElementById('pagination-controls');
    if (paginationControls) paginationControls.style.display = 'none';
}

function toggleDarkMode() {
    const container = document.getElementById('mainContainer');
    const iconSpan = document.querySelector('.mode-icon');
    if (!container) return;
    if(container.getAttribute('data-theme') === 'dark') {
        container.removeAttribute('data-theme');
        if (iconSpan) iconSpan.innerText = "🌙";
    } else {
        container.setAttribute('data-theme', 'dark');
        if (iconSpan) iconSpan.innerText = "☀️";
    }
}

function scrollToPDF() {
    const pdfSection = document.getElementById('pdfSection');
    if (pdfSection) pdfSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function checkPrintPermission() {
    const printBtn = document.getElementById('masterPrintBtn');
    if (!printBtn) return;
    if (ALLOW_PRINT.trim().toUpperCase() === "YES") {
        printBtn.disabled = false;
        printBtn.style.display = "inline-flex";
    } else {
        printBtn.disabled = true;
        printBtn.style.display = "none";
    }
}

function printAnswerKey() {
    if (ALLOW_PRINT.trim().toUpperCase() !== "YES") return;
    renderTable(answersData);
    setTimeout(() => {
        window.print();
        showPage(currentPage);
    }, 150);
}

function revealOMRPortal() {
    const portal = document.getElementById('student-omr-portal');
    portal.style.display = "block";
    buildStudentOMRGrid();
    portal.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function buildStudentOMRGrid() {
    const gridContainer = document.getElementById('omr-sheet-grid');
    if (gridContainer.children.length > 0) return; 
    
    let totalQuestions = 100;
    let questionsPerColumn = 10; 
    let columnsCount = totalQuestions / questionsPerColumn; 
    let fullHTML = '';
    
    for (let col = 0; col < columnsCount; col++) {
        let columnHTML = `<div class="omr-table-column">
            <div class="omr-column-header">
                <div class="header-q">Q.N</div>
                <div class="header-a">Ans</div>
            </div>`;
            
        let startQueryIndex = col * questionsPerColumn;
        let endQueryIndex = startQueryIndex + questionsPerColumn;
        
        for (let i = startQueryIndex; i < endQueryIndex; i++) {
            const qNum = i + 1;
            columnHTML += `
                <div class="omr-sheet-row">
                    <div class="omr-q-num">${qNum}</div>
                    <div class="omr-bubble-options">
                        <div class="omr-interactive-bubble" data-q="${i}" data-val="A">A</div>
                        <div class="omr-interactive-bubble" data-q="${i}" data-val="B">B</div>
                        <div class="omr-interactive-bubble" data-q="${i}" data-val="C">C</div>
                        <div class="omr-interactive-bubble" data-q="${i}" data-val="D">D</div>
                    </div>
                </div>
            `;
        }
        columnHTML += '</div>';
        fullHTML += columnHTML;
    }
    
    gridContainer.innerHTML = fullHTML;

    gridContainer.querySelectorAll('.omr-interactive-bubble').forEach(bubble => {
        bubble.addEventListener('click', function() {
            const qIndex = parseInt(this.getAttribute('data-q'));
            const value = this.getAttribute('data-val');
            const siblings = this.parentNode.querySelectorAll('.omr-interactive-bubble');
            
            siblings.forEach(sib => sib.classList.remove('selected'));

            if (studentAnswers[qIndex] === value) {
                studentAnswers[qIndex] = null; 
            } else {
                this.classList.add('selected');
                studentAnswers[qIndex] = value;
            }
        });
    });
}

function evaluateOMRSheet() {
    let resultDiv = document.getElementById('result');
    let matrixBox = document.getElementById('matrix-box');
    let auditGrid = document.getElementById('audit-grid');
    
    resultDiv.style.display = "block";
    matrixBox.style.display = "block";

    let score = 0;
    let auditHTML = '';

    for (let i = 0; i < 100; i++) {
        const qNum = i + 1;
        const studentSelection = studentAnswers[i] || "Unanswered";
        const correctKey = rawAnswers[i];
        const isCorrect = studentSelection === correctKey;

        if (isCorrect) score++;

        auditHTML += `
            <div class="audit-card ${isCorrect ? 'audit-correct' : 'audit-wrong'}">
                <strong>Question ${qNum}</strong>
                Your Answer: <b>${studentSelection}</b><br>
                Correct Answer: <b>${correctKey}</b>
            </div>
        `;
    }
    
    auditGrid.innerHTML = auditHTML;

    if (score < 33) {
        resultDiv.className = "result-box fail";
        resultDiv.innerHTML = `
            <h3>❌ Examination Status: FAILED</h3>
            <p>Total Obtained Marks: <span class="highlight-value">${score} / 100</span></p>
            <p style="margin-top:8px; font-weight:600;">The theory result is below the minimum required threshold of 33 marks. Therefore, passing is technically not possible..</p>
        `;
    } else {
        let dynamicPracticalRequirement = (50 - (score * 0.6)) / 0.4;
        let requiredPracticalScore = Math.ceil(dynamicPracticalRequirement);

        if (requiredPracticalScore < 33) {
            requiredPracticalScore = 33; 
        }

        if (requiredPracticalScore > 100) {
            resultDiv.className = "result-box fail";
            resultDiv.innerHTML = `
                <h3>⚠️ Core Aggregate Unobtainable</h3>
                <p>Total Obtained Marks: <span class="highlight-value">${score} / 100</span></p>
                <p>Required Practical Mark Index: <span class="highlight-value" style="color: #b91c1c !important;">${requiredPracticalScore} Marks</span></p>
                <p style="margin-top: 6px;">Your base aggregate ratio index cannot clear the overall total 50% target requirements even with an absolute maximum score of 100 in your practical portion.</p>
            `;
        } else {
            resultDiv.className = "result-box info";
            resultDiv.innerHTML = `
                <h3>🎉 Evaluation Metrics Calculated</h3>
                <p>Total Obtained Marks: <span class="highlight-value">${score} / 100</span></p>
                <hr style="border:0; border-top:1px solid #bfdbfe; margin:12px 0;">
                <p>To clear the remaining structural validation benchmarks, you need:</p>
                <p>Required Practical Score to Pass: <span class="highlight-value" style="color: #1e40af !important;">${requiredPracticalScore} Marks</span></p>
            `;
        }
    }
    
    resultDiv.scrollIntoView({ behavior: 'smooth' });
}

window.addEventListener('DOMContentLoaded', () => {
    showPage(1);
    checkPrintPermission();
});
</script>				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		<p>The post <a href="https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-2-series-21-jul-2026/">Internet of Things (M4-R5.1) Paper Solution Set-2 Series-21 (JUL 2026)</a> appeared first on <a href="https://gyanxp.com">GyanXp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-2-series-21-jul-2026/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
