




<?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>Wed, 19 Aug 2026 06:32:04 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0.4</generator>

<image>
	<url>https://i0.wp.com/gyanxp.com/wp-content/uploads/2025/02/image-1.webp?fit=32%2C22&#038;ssl=1</url>
	<title>GyanXp</title>
	<link>https://gyanxp.com/</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">184820870</site>	<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 Restricted Access University Exam Seating &#038; Attendance System Portal Invalid User ID or Password. Please try again. USER ID PASSWORD Login to System Department of Computer Science &#038; Engineering, Integral University University Exam Seating Plan &#038; Report Generator v4.3 Pro Develop by Balmukund Maurya, Integral University, Department of CSE [&#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: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !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: 8mm 10mm 8mm 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: 10px 14px;
      margin-bottom: 10px;
      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: 8px 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: 10px;
    }
    .report-table th, .report-table td {
      border: 1px solid #334155;
      padding: 3.5px 6px;
      font-size: 11.5px;
      line-height: 1.25;
    }
    .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: 12.5px;
      padding: 4px;
      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">

  <!-- 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">v4.3 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>
            <span id="groupTotalBadge" class="text-[10px] bg-slate-100 text-slate-600 px-1.5 py-0.5 rounded font-bold">0 Sections</span>
          </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>

      <!-- NEW: 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>

      <!-- 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" 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 & Detained Students List</h2>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <!-- Slot A -->
          <div class="border border-indigo-200 bg-indigo-50/40 p-3.5 rounded-xl space-y-2">
            <div class="flex justify-between items-center">
              <span class="text-xs font-bold text-indigo-900 uppercase">📁 Cohort A (e.g. 1st Sem)</span>
              <span id="badgeCountA" class="text-xs bg-indigo-200 text-indigo-900 px-2 py-0.5 rounded font-bold">0 Records</span>
            </div>
            <div>
              <label class="block text-[10px] font-semibold text-slate-600 mb-0.5">SECTION HEADER TEXT</label>
              <input id="titleA" value="FIRST YEAR/ FIRST SEMESTER" class="w-full border bg-white rounded p-1.5 text-xs 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-xs text-slate-500 file:mr-2 file:py-1 file:px-2 file:rounded file:border-0 file:text-xs file:bg-indigo-600 file:text-white" />
            </div>
          </div>

          <!-- Slot B -->
          <div class="border border-emerald-200 bg-emerald-50/40 p-3.5 rounded-xl space-y-2">
            <div class="flex justify-between items-center">
              <span class="text-xs font-bold text-emerald-900 uppercase">📁 Cohort B (e.g. 3rd Sem)</span>
              <span id="badgeCountB" class="text-xs bg-emerald-200 text-emerald-900 px-2 py-0.5 rounded font-bold">0 Records</span>
            </div>
            <div>
              <label class="block text-[10px] font-semibold text-slate-600 mb-0.5">SECTION HEADER TEXT</label>
              <input id="titleB" value="THIRD YEAR/ FIFTH SEMESTER" class="w-full border bg-white rounded p-1.5 text-xs 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-xs text-slate-500 file:mr-2 file:py-1 file:px-2 file:rounded file:border-0 file:text-xs file:bg-emerald-600 file:text-white" />
            </div>
          </div>

          <!-- Detained Students Slot -->
          <div class="border border-red-200 bg-red-50/40 p-3.5 rounded-xl space-y-2">
            <div class="flex justify-between items-center">
              <span class="text-xs font-bold text-red-900 uppercase">🚫 Detained Students File</span>
              <span id="badgeCountDetained" class="text-xs bg-red-200 text-red-900 px-2 py-0.5 rounded font-bold">0 Detained</span>
            </div>
            <div>
              <p class="text-[10px] text-slate-500 leading-tight">Upload Excel/CSV of detained students. Matched by <strong>Enrollment No</strong> and highlighted across all reports.</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-xs text-slate-500 file:mr-2 file:py-1 file:px-2 file:rounded file:border-0 file:text-xs 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 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 Attendance (Portrait)
            </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>
          </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="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");
    }

    // Auto-login check on page load if session exists
    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 allocatedRooms = [];
    let unallottedStudents = [];
    let activeFormat = 'roomWise';

    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>`;
      }

      // Update Used vs Unused Rooms List display
      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>`;
    }

    function downloadExcelTemplate(data, filename) {
      const ws = XLSX.utils.json_to_sheet(data);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      XLSX.writeFile(wb, filename);
    }

    function downloadSampleRoomsExcel() {
      const sampleRooms = [
        { "Room No": "E107", "Block": "BNLT BLOCK", "Rows": 8, "Columns": 6, "Capacity": 48, "Per Section Cap": 24 },
        { "Room No": "E108", "Block": "BNLT BLOCK", "Rows": 8, "Columns": 6, "Capacity": 48, "Per Section Cap": 24 },
        { "Room No": "E109", "Block": "BNLT BLOCK", "Rows": 8, "Columns": 6, "Capacity": 48, "Per Section Cap": 24 },
        { "Room No": "E319", "Block": "BNLT BLOCK", "Rows": 12, "Columns": 8, "Capacity": 96, "Per Section Cap": 48 },
        { "Room No": "CSE LAB 1", "Block": "B BLOCK", "Rows": 6, "Columns": 5, "Capacity": 30, "Per Section Cap": 30 }
      ];
      downloadExcelTemplate(sampleRooms, "Sample_Rooms_List.xlsx");
    }

    function downloadSampleCourseExcel(slot) {
      let sampleStudents = [];
      if (slot === 'A') {
        const namesA = ["AAISHA AFZAL", "AALI JAWAD", "AALIYA PRAWEEN", "AAMIR KHAN", "AASHIYA FATIMA", "AATIF ALI", "ABDUL HANNAN", "ABDUL AYAN KHAN", "ABDUL AZIZ", "ABDUL GHALIB"];
        sampleStudents = namesA.map((name, i) => ({
          "Roll No": "",
          "Enrollment No": `250010${1000 + i}`,
          "Student Name": name,
          "Group": i < 5 ? "CSE-A" : "CSE-B"
        }));
      } else {
        const namesB = ["AADEEL AHMAD", "AAMIR SERAJ", "AASIYA FASEEH", "ABDUL ALI", "ABDUL FATTAH", "ABDUL HANNAN", "ABDUL KALAM", "ABDUL MALIK", "ABDUL RAHMAN", "ABDUL RASHID"];
        sampleStudents = namesB.map((name, i) => ({
          "Roll No": `230101${2000 + i}`,
          "Enrollment No": `230010${1000 + i}`,
          "Student Name": name,
          "Group": i < 5 ? "CSE-A" : "CSE-B"
        }));
      }
      downloadExcelTemplate(sampleStudents, `Sample_Course_${slot}_Students.xlsx`);
    }

    function downloadSampleDetainedExcel() {
      const sampleDetained = [
        { "Roll No": "", "Enrollment No": "2500101002", "Student Name": "AALIYA PRAWEEN", "Course": "B.Tech CSE" },
        { "Roll No": "2301012004", "Enrollment No": "2300101004", "Student Name": "ABDUL FATTAH", "Course": "B.Tech CSE" }
      ];
      downloadExcelTemplate(sampleDetained, "Sample_Detained_Students.xlsx");
    }

    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 moveRoomOrder(idx, direction) {
      const targetIdx = idx + direction;
      if (targetIdx < 0 || targetIdx >= roomRoster.length) return;
      const temp = roomRoster[idx];
      roomRoster[idx] = roomRoster[targetIdx];
      roomRoster[targetIdx] = temp;
      renderRoomBadges();
      if (allocatedRooms.length > 0) {
        generateAllReports();
      }
    }

    function addCustomRoom() {
      const name = document.getElementById('rName').value.trim();
      const block = document.getElementById('rBlock').value.trim() || 'MAIN';
      const rows = parseInt(document.getElementById('rRows').value) || 8;
      const cols = parseInt(document.getElementById('rCols').value) || 6;
      if (!name) return alert("Please enter room number!");

      const cap = rows * cols;
      roomRoster.push({ name, block, rows, cols, capacity: cap, subCap: Math.floor(cap / 2) });
      document.getElementById('rName').value = "";
      renderRoomBadges();
    }

    function applyPreset(name, block, rows, cols) {
      document.getElementById('rName').value = name;
      document.getElementById('rBlock').value = block;
      document.getElementById('rRows').value = rows;
      document.getElementById('rCols').value = cols;
      refreshCapacity();
    }

    function removeRoom(idx) {
      roomRoster.splice(idx, 1);
      renderRoomBadges();
    }

    function clearAllRooms() {
      if (confirm("Are you sure you want to clear all rooms?")) {
        roomRoster = [];
        renderRoomBadges();
      }
    }

    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 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 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"]);
        const enroll = getField(item, ["enrollmentno", "enrollment", "enrollno", "enroll", "enroll_no"], `250010${1000 + idx}`);
        const name = getField(item, ["studentname", "name", "student_name"], `STUDENT ${idx+1}`);
        const group = getField(item, ["group", "section", "branch"], "CSE-A");

        return {
          rollNo: String(roll || "").trim(),
          enrollmentNo: normalizeEnroll(enroll),
          name: String(name || "").trim().toUpperCase(),
          group: String(group || "").trim()
        };
      });
    }

    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} Records`;
          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} Records`;
          updateTopDashboard();
        });
      }
    });

    document.getElementById("fileDetained").addEventListener("change", function(e) {
      if (e.target.files[0]) {
        parseUploadedFile(e.target.files[0], res => {
          detainedSet.clear();
          res.forEach(item => {
            if (item.enrollmentNo) detainedSet.add(normalizeEnroll(item.enrollmentNo));
            if (item.rollNo) detainedSet.add(normalizeEnroll(item.rollNo));
          });
          document.getElementById("badgeCountDetained").innerText = `${detainedSet.size} Detained`;
          updateTopDashboard();
          if (allocatedRooms.length > 0) renderDocument();
        });
      }
    });

    function loadSampleDataExact() {
      const rollsA = [
        "2500104119", "2500100900", "2500100094", "2500100618", "2500100827", "2500104522",
        "2500102014", "2500101839", "2500101841", "2500102059", "2500101005", "2500101109",
        "2500104347", "2500101613", "2500100936", "2500100150", "2500100532", "2500101150",
        "2500104651", "2500100101", "2500101361", "2500104739", "2500100734", "2500104023",
        "2500100221", "2500105573", "2500101104", "2500101061", "2500100488", "2500102508",
        "2500102690", "2500101017", "2500100932", "2500101506", "2500103850", "2500102034",
        "2500101636", "2500103625", "2500100060", "2500100606", "2500101514", "2500100243",
        "2500102097", "2500101503", "2500100772", "2500103955", "2500100648", "2500102362"
      ];

      const rollsB = [
        "2300103311", "2300101611", "2300100524", "2300101245", "2300100069", "2300101867",
        "2300102448", "2300100161", "2300102346", "2300101545", "2300101527", "2300100351",
        "2300101446", "2300100290", "2300102448", "2300105065", "2300101949", "2300101921",
        "2300101431", "2300100931", "2300101963", "2300100763", "2300101035", "2300104110",
        "2300103128", "2300101911", "2300101606", "2300100164", "2300102184", "2300100654",
        "2300103960", "2300104618", "2300102428", "2300104058", "2300100446", "2300100984",
        "2300103918", "2300100483", "2300100863", "2300101834", "2300100539", "2300100760",
        "2300100677", "2300101503", "2300100772", "2300103955", "2300100648", "2300102362"
      ];

      const namesA = ["AAISHA AFZAL", "AALI JAWAD", "AALIYA PRAWEEN", "AAMIR KHAN", "AASHIYA FATIMA", "AATIF ALI", "ABDUL HANNAN", "ABDUL AYAN KHAN", "ABDUL AZIZ", "ABDUL GHALIB", "ABDUL MUKIM", "ABDUL QADIR", "ABDUL RAJA", "ABDUL WAHID RAZA", "ABDULLAH MERAJ", "ABDULLAH SIDDIQUI", "ABDULLAH ZIA", "ABDUR RAHMAN KHAN", "ABID AKHTAR", "ABID KHAN", "ABU BASHAR ANSARI", "ABU SALIM", "ABUZAR KHAN", "ABUZAR NEYAZ"];
      const namesB = ["AADEEL AHMAD", "AAMIR SERAJ", "AASIYA FASEEH", "ABDUL ALI", "ABDUL FATTAH", "ABDUL HANNAN", "ABDUL KALAM", "ABDUL MALIK", "ABDUL RAHMAN", "ABDUL RASHID", "ABDUL SABOOR", "ABDULLAH ALI", "ABDULLAH AYUB", "ABDULLAH FAROOQUE", "ABDULLAH QIDWAI", "ABDURRAHEEM", "ABDUSSALAM", "ABHAY KUMAR GUPTA", "ABHINAV YADAV", "ABHISHEK SINGH", "ABHISHEK VARUN", "ABULAAS ANSARI", "ABUZER", "ADARSH TIWARI"];

      datasetA = [];
      datasetB = [];
      detainedSet.clear();

      detainedSet.add("2500100094");
      detainedSet.add("2300100161");
      detainedSet.add("2500100221");
      detainedSet.add("2300100446");

      for (let i = 0; i < 96; i++) {
        const enrollVal = i < rollsA.length ? rollsA[i] : `250010${1000 + i}`;
        datasetA.push({
          rollNo: "",
          enrollmentNo: normalizeEnroll(enrollVal),
          name: namesA[i % namesA.length] + (i >= namesA.length ? ` ${Math.floor(i/namesA.length)}` : ''),
          group: i < 48 ? (i < 23 ? "1DSAI-A" : "1DSAI-B") : "CSE-A"
        });
      }

      for (let i = 0; i < 96; i++) {
        const enrollVal = `230010${1000 + i}`;
        const rollVal = i < rollsB.length ? rollsB[i] : `230101${2000 + i}`;
        datasetB.push({
          rollNo: rollVal,
          enrollmentNo: normalizeEnroll(enrollVal),
          name: namesB[i % namesB.length] + (i >= namesB.length ? ` ${Math.floor(i/namesB.length)}` : ''),
          group: i < 48 ? (i < 26 ? "2DSAI-A" : "2DSAI-B") : "CSE-A"
        });
      }

      document.getElementById("badgeCountA").innerText = `${datasetA.length} Records`;
      document.getElementById("badgeCountB").innerText = `${datasetB.length} Records`;
      document.getElementById("badgeCountDetained").innerText = `${detainedSet.size} Detained`;
      updateTopDashboard();
      alert("Loaded datasets and 4 sample detained students.");
    }

    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();
    }

    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 => {
          const roomCohorts = [
            { title: plan.titleA, students: plan.studentsA },
            { title: plan.titleB, students: plan.studentsB }
          ];

          roomCohorts.forEach(cohort => {
            if (!cohort.students || cohort.students.length === 0) return;

            const page = document.createElement("div");
            page.className = "page-break mb-8";

            const rowsHtml = cohort.students.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">${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>
                <div class="grid grid-cols-3 gap-2 text-[11px] text-slate-900 font-bold uppercase mb-1 bg-slate-50 p-1.5 rounded border border-slate-200">
                  <div>Course Code: <span class="border-b border-dashed border-slate-400 inline-block w-24"></span></div>
                  <div>Course Name: <span class="border-b border-dashed border-slate-400 inline-block w-28"></span></div>
                  <div>Exam Date: <span class="border-b border-dashed border-slate-400 inline-block w-24"></span></div>
                </div>
                <div class="flex justify-between items-center text-[11px] text-slate-800 font-bold uppercase">
                  <span>B.Tech: <strong class="text-indigo-900 font-black">${cohort.title}</strong></span>
                  <span>Total Seated: <strong class="text-slate-950 font-black">${cohort.students.length} Candidates</strong></span>
                </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 & Signature Vertical Block -->
              <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: ________ / ${cohort.students.length}</div>
                  <div class="text-slate-700">Invigilation Duty Verification & Signatures</div>
                </div>
                <div class="space-y-1.5 pt-1">
                  <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="border-t-2 border-slate-900 w-48 pt-1 text-center font-bold">Center Superintendent</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 btnUnallotted = document.getElementById("btnViewUnallotted");

      [btnList, btnMatrix, btnAttendance, unallottedBtn = btnUnallotted].forEach(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 === 'unallotted') {
        btnUnallotted.className = "px-3 py-1.5 rounded text-xs font-bold bg-slate-900 text-white transition";
      }

      if (allocatedRooms.length > 0 || unallottedStudents.length > 0) renderDocument();
    }

    function exportToWordDoc() {
      if (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 === 'matrix') filename = "Room_Wise_Seating_Matrix.doc";
      else if (activeFormat === 'unallotted') filename = "Unallotted_Students_List.doc";

      downloadLink.href = url;
      downloadLink.download = filename;
      downloadLink.click();
      document.body.removeChild(downloadLink);
      URL.revokeObjectURL(url);
    }

    // WordPress-Safe Isolation Printing Engine
    function safePrintReport() {
      if (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 triggerPrint() {
      safePrintReport();
    }

    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>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">6264</post-id>	</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>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">6236</post-id>	</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>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">6228</post-id>	</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>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">6215</post-id>	</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>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">6202</post-id>	</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>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">6155</post-id>	</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>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">6146</post-id>	</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>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">6137</post-id>	</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>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">6128</post-id>	</item>
		<item>
		<title>Internet of Things (M4-R5.1) Paper Solution Set-1 Series-14 (JUL 2026)</title>
		<link>https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-1-series-14-jul-2026/</link>
					<comments>https://gyanxp.com/internet-of-things-m4-r5-1-paper-solution-set-1-series-14-jul-2026/#respond</comments>
		
		<dc:creator><![CDATA[Balmukund Maurya]]></dc:creator>
		<pubDate>Sun, 16 Aug 2026 13:23:57 +0000</pubDate>
				<category><![CDATA[O Level Paper Solution]]></category>
		<guid isPermaLink="false">https://gyanxp.com/?p=6119</guid>

					<description><![CDATA[<p>Print Answer Key 🌙 Subject Name Internet of Things Paper Code M4-R5.1 Session JUL 2026 Paper Set Set &#8211; 1 Series 14 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-1-series-14-jul-2026/">Internet of Things (M4-R5.1) Paper Solution Set-1 Series-14 (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="6119" class="elementor elementor-6119">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-ff11e04 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="ff11e04" 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-fb9eb15" data-id="fb9eb15" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-8d329ef elementor-widget elementor-widget-html" data-id="8d329ef" 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 - 1</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Series</span>
            <span class="meta-value">14</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/1NbmL5hVkBJ3WUEeHrKxi1IzfX0Ew_nmw/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", "C", "C", "B", "B", "D", "C", "D", "D",
    "A", "C", "C", "D", "D", "C", "D", "B", "C", "C",
    "C", "D", "A", "A", "B", "A", "A", "D", "C", "D",
    "D", "C", "D", "D", "C", "A", "C", "D", "B", "C",
    "B", "B", "C", "C", "C", "A", "B", "C", "B", "D",
    "D", "C", "B", "C", "A", "D", "D", "A", "A", "D",
    "C", "A", "B", "C", "B", "D", "C", "B", "C", "A",
    "C", "B", "B", "C", "D", "B", "A", "B", "C", "A",
    "B", "A", "C", "D", "B", "D", "D", "A", "A", "C",
    "D", "C", "A", "B", "B", "B", "A", "A", "A", "D"
];

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-1-series-14-jul-2026/">Internet of Things (M4-R5.1) Paper Solution Set-1 Series-14 (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-1-series-14-jul-2026/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">6119</post-id>	</item>
	</channel>
</rss>
