IMRAN ALI Dal

homeostasis

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Biology Quiz Challenge</title>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

.container {
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
            width: 100%;
            max-width: 95%;
            overflow: hidden;
            position: relative;
        }

.screen {
            padding: 20px;
            display: none;
            flex-direction: column;
            align-items: center;
            text-align: center;
            animation: fadeIn 0.8s ease;
        }

.active {
            display: flex;
        }

h1 {
            color: #2575fc;
            margin-bottom: 15px;
            font-size: 1.8rem;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
        }

h2 {
            color: #333;
            margin-bottom: 10px;
            font-size: 1.3rem;
        }

p {
            color: #555;
            margin-bottom: 15px;
            line-height: 1.5;
            font-size: 0.95rem;
        }

.welcome-screen {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            padding: 25px 20px;
        }

.welcome-screen h1 {
            color: white;
            font-size: 2.2rem;
            margin-bottom: 20px;
        }

.welcome-screen p {
            color: rgba(255, 255, 255, 0.9);
            font-size: 1rem;
            max-width: 100%;
        }

.input-group {
            margin: 15px 0;
            width: 100%;
            max-width: 350px;
        }

input {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

input:focus {
            outline: none;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            transform: translateY(-2px);
        }

.btn {
            background: linear-gradient(to right, #6a11cb, #2575fc);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 40px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            margin-top: 15px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

.btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
        }

.btn:active {
            transform: translateY(0);
        }

.btn:disabled {
            background: #cccccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

.quiz-header {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }

.timer {
            background: #ff4b5c;
            color: white;
            padding: 8px 15px;
            border-radius: 40px;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(255, 75, 92, 0.4);
            font-size: 0.9rem;
            min-width: 100px;
            text-align: center;
        }

.question-counter {
            background: #2575fc;
            color: white;
            padding: 8px 15px;
            border-radius: 40px;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(37, 117, 252, 0.4);
            font-size: 0.9rem;
            min-width: 140px;
            text-align: center;
        }

.question-container {
            width: 100%;
            text-align: left;
            margin-bottom: 20px;
        }

.question {
            font-size: 1.2rem;
            margin-bottom: 15px;
            color: #333;
            line-height: 1.4;
        }

.options {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }

@media (min-width: 600px) {
            .options {
                grid-template-columns: 1fr 1fr;
            }
        }

.option {
            background: white;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            padding: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
            display: flex;
            align-items: center;
        }

.option:hover {
            border-color: #2575fc;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

.option.selected {
            border-color: #2575fc;
            background: rgba(37, 117, 252, 0.1);
        }

.option.correct {
            border-color: #4CAF50;
            background: rgba(76, 175, 80, 0.1);
        }

.option.wrong {
            border-color: #f44336;
            background: rgba(244, 67, 54, 0.1);
        }

.option-letter {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 25px;
            height: 25px;
            background: #2575fc;
            color: white;
            border-radius: 50%;
            margin-right: 12px;
            font-weight: bold;
            font-size: 0.9rem;
        }

.navigation {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-top: 15px;
            gap: 8px;
            flex-wrap: wrap;
        }

.navigation .btn {
            flex: 1;
            min-width: 120px;
            margin-top: 0;
        }

.progress-bar {
            width: 100%;
            height: 8px;
            background: #e0e0e0;
            border-radius: 4px;
            margin: 15px 0;
            overflow: hidden;
        }

.progress {
            height: 100%;
            background: linear-gradient(to right, #6a11cb, #2575fc);
            width: 0%;
            transition: width 0.5s ease;
        }

.result-item {
            background: white;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 12px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            text-align: left;
        }

.result-correct {
            border-left: 4px solid #4CAF50;
        }

.result-wrong {
            border-left: 4px solid #f44336;
        }

.result-unattempted {
            border-left: 4px solid #ff9800;
        }

.result-question {
            font-weight: bold;
            margin-bottom: 8px;
            font-size: 1rem;
        }

.result-answers {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

.answer-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.85rem;
        }

.correct-answer {
            background: rgba(76, 175, 80, 0.2);
            color: #2e7d32;
        }

.wrong-answer {
            background: rgba(244, 67, 54, 0.2);
            color: #c62828;
        }

.my-answer {
            background: rgba(33, 150, 243, 0.2);
            color: #1565c0;
        }

.unattempted-answer {
            background: rgba(255, 152, 0, 0.2);
            color: #ef6c00;
        }

.grade {
            font-size: 3.5rem;
            font-weight: bold;
            margin: 15px 0;
            background: linear-gradient(to right, #6a11cb, #2575fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

.stats {
            display: flex;
            justify-content: space-around;
            width: 100%;
            margin: 15px 0;
            flex-wrap: wrap;
            gap: 10px;
        }

.stat {
            text-align: center;
            padding: 15px;
            border-radius: 8px;
            background: white;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            flex: 1;
            min-width: 100px;
        }

.stat-value {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 8px;
        }

.stat-correct .stat-value {
            color: #4CAF50;
        }

.stat-wrong .stat-value {
            color: #f44336;
        }

.stat-unattempted .stat-value {
            color: #ff9800;
        }

.stat-score .stat-value {
            color: #2575fc;
        }

/* 🆕 Leaderboard Styles */
        .leaderboard-section {
            background: #f0f8ff;
            border-radius: 10px;
            padding: 20px;
            margin: 25px 0;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            width: 100%;
        }

.student-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px;
            margin: 8px 0;
            background: white;
            border-radius: 8px;
            border-left: 4px solid #4CAF50;
            transition: all 0.3s ease;
        }

.student-row:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }

.rank-1 {
            border-left-color: #FFD700;
            background: linear-gradient(135deg, #fff9e6, #fff0b3);
        }

.rank-2 {
            border-left-color: #C0C0C0;
            background: linear-gradient(135deg, #f8f8f8, #e8e8e8);
        }

.rank-3 {
            border-left-color: #CD7F32;
            background: linear-gradient(135deg, #fef4eb, #ffe0c2);
        }

/* Certificate Styles - PROFESSIONAL PRINT QUALITY */
        .certificate-container {
            width: 100%;
            max-width: 800px;
            margin: 20px auto;
            background: #fff;
            border: 15px solid #8B4513;
            padding: 30px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
            position: relative;
            text-align: center;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(255,255,255,0.8) 0%, transparent 20%),
                radial-gradient(circle at 90% 80%, rgba(255,255,255,0.6) 0%, transparent 20%);
        }

.certificate-container::before {
            content: "";
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            bottom: 20px;
            border: 2px solid #D2B48C;
            pointer-events: none;
        }

.certificate-title {
            font-size: 2.5rem;
            color: #8B4513;
            margin-bottom: 10px;
            font-family: 'Times New Roman', serif;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }

.certificate-subtitle {
            font-size: 1.3rem;
            color: #8B4513;
            margin-bottom: 30px;
            font-style: italic;
            font-family: 'Times New Roman', serif;
        }

.certificate-content {
            margin: 30px 0;
            font-size: 1.1rem;
            line-height: 1.6;
            color: #333;
            font-family: 'Georgia', serif;
            text-align: center;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

.certificate-name {
            font-size: 2.2rem;
            color: #8B4513;
            margin: 20px 0;
            font-weight: bold;
            font-family: 'Brush Script MT', cursive;
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 8px;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.certificate-grade {
            font-size: 1.8rem;
            color: #8B4513;
            margin: 20px 0;
            font-weight: bold;
            font-family: 'Times New Roman', serif;
        }

.certificate-score {
            font-size: 1.4rem;
            color: #333;
            margin: 10px 0;
            font-family: 'Georgia', serif;
        }

.certificate-remarks {
            font-size: 1.2rem;
            color: #8B4513;
            margin: 25px 0;
            font-style: italic;
            font-weight: bold;
            font-family: 'Georgia', serif;
            padding: 12px;
            border-top: 2px solid #D2B48C;
            border-bottom: 2px solid #D2B48C;
        }

.certificate-date {
            margin-top: 30px;
            font-size: 1.1rem;
            color: #666;
            font-family: 'Georgia', serif;
        }

.certificate-signature {
            margin-top: 40px;
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
        }

.signature-box {
            text-align: center;
        }

.signature-line {
            border-top: 2px solid #8B4513;
            width: 200px;
            margin: 40px auto 8px auto;
        }

.signature-name {
            font-family: 'Brush Script MT', cursive;
            font-size: 1.5rem;
            color: #8B4513;
            margin-top: 5px;
        }

.signature-title {
            font-size: 0.9rem;
            color: #666;
            margin-top: 5px;
            font-family: 'Georgia', serif;
        }

/* Logo positioned in the top-right corner */
        .certificate-logo {
            position: absolute;
            top: 30px;
            right: 30px;
            width: 130px;
            height: 130px;
            border: 3px solid #8B4513;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.95);
            font-family: 'Times New Roman', serif;
            font-weight: bold;
            color: #8B4513;
            text-align: center;
            padding: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            overflow: hidden;
        }

.logo-line {
            font-size: 0.8rem;
            line-height: 1.1;
            margin: 1px 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

.logo-line.main {
            font-size: 0.95rem;
            font-weight: bolder;
            margin: 2px 0;
        }

.certificate-ribbon {
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            background: #8B4513;
            color: white;
            padding: 8px 30px;
            font-family: 'Times New Roman', serif;
            font-weight: bold;
            font-size: 1rem;
            letter-spacing: 1px;
        }

.certificate-ribbon::before,
        .certificate-ribbon::after {
            content: "";
            position: absolute;
            top: 0;
            border: 12px solid #8B4513;
        }

.certificate-ribbon::before {
            left: -24px;
            border-left-color: transparent;
        }

.certificate-ribbon::after {
            right: -24px;
            border-right-color: transparent;
        }

.website-link {
            margin-top: 15px;
            font-size: 0.9rem;
            color: #8B4513;
            font-family: 'Georgia', serif;
        }

.website-link a {
            color: #8B4513;
            text-decoration: none;
            font-weight: bold;
        }

.website-link a:hover {
            text-decoration: underline;
        }

/* Certificate Actions */
        .certificate-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }

.certificate-btn {
            background: linear-gradient(to right, #2E8B57, #3CB371);
        }

.certificate-btn:hover {
            background: linear-gradient(to right, #3CB371, #2E8B57);
        }

.print-btn {
            background: linear-gradient(to right, #8B4513, #A0522D);
        }

.print-btn:hover {
            background: linear-gradient(to right, #A0522D, #8B4513);
        }

/* Print-specific styles */
        @media print {
            body * {
                visibility: hidden;
            }
            
            .certificate-screen,
            .certificate-screen * {
                visibility: visible;
            }
            
            .certificate-screen {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                padding: 0;
                margin: 0;
                background: white;
            }
            
            .certificate-container {
                box-shadow: none;
                margin: 0;
                border: 15px solid #8B4513;
                max-width: none;
                page-break-inside: avoid;
            }
            
            .certificate-actions,
            .navigation,
            h1,
            p:not(.certificate-content) {
                display: none !important;
            }
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }

.confetti {
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: #f00;
            opacity: 0;
            pointer-events: none;
        }

@keyframes confetti-fall {
            0% {
                transform: translateY(-80px) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(800px) rotate(720deg);
                opacity: 0;
            }
        }

/* 🆕 NAVIGATION LOCK STYLES - UPDATED */
        .navigation-lock-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
            padding: 20px;
        }

.navigation-lock-overlay h2 {
            color: white;
            font-size: 2rem;
            margin-bottom: 20px;
        }

.navigation-lock-overlay p {
            color: white;
            font-size: 1.2rem;
            margin-bottom: 30px;
            max-width: 500px;
        }

.navigation-lock-overlay .btn {
            background: #ff4444;
            font-size: 1.1rem;
            padding: 15px 30px;
        }

.attempt-counter {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #ff4444;
            color: white;
            padding: 10px 15px;
            border-radius: 20px;
            font-weight: bold;
            z-index: 10000;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }

/* Mobile-specific adjustments */
        @media (max-width: 768px) {
            .container {
                max-width: 100%;
                border-radius: 10px;
            }
            
            .screen {
                padding: 15px;
            }
            
            h1 {
                font-size: 1.6rem;
            }
            
            h2 {
                font-size: 1.2rem;
            }
            
            .welcome-screen h1 {
                font-size: 1.8rem;
            }
            
            .question {
                font-size: 1.1rem;
            }
            
            .navigation {
                flex-direction: column;
            }
            
            .navigation .btn {
                width: 100%;
            }
            
            .stats {
                flex-direction: column;
            }
            
            .stat {
                min-width: 100%;
            }
            
            .grade {
                font-size: 3rem;
            }
            
            .certificate-container {
                padding: 20px;
                border-width: 10px;
                margin: 10px auto;
            }
            
            .certificate-title {
                font-size: 1.8rem;
                margin-bottom: 8px;
            }
            
            .certificate-subtitle {
                font-size: 1.1rem;
                margin-bottom: 20px;
            }
            
            .certificate-name {
                font-size: 1.6rem;
                margin: 15px 0;
                min-height: 50px;
            }
            
            .certificate-content {
                font-size: 1rem;
                margin: 20px 0;
                line-height: 1.5;
            }
            
            .certificate-grade {
                font-size: 1.4rem;
                margin: 15px 0;
            }
            
            .certificate-score {
                font-size: 1.2rem;
            }
            
            .certificate-remarks {
                font-size: 1.1rem;
                margin: 20px 0;
                padding: 10px;
            }
            
            .certificate-logo {
                width: 100px;
                height: 100px;
                font-size: 0.7rem;
                top: 20px;
                right: 20px;
                padding: 8px;
            }
            
            .logo-line {
                font-size: 0.65rem;
            }
            
            .logo-line.main {
                font-size: 0.75rem;
            }
            
            .certificate-ribbon {
                padding: 6px 20px;
                font-size: 0.9rem;
            }
            
            .signature-line {
                width: 150px;
                margin: 30px auto 5px auto;
            }
            
            .signature-name {
                font-size: 1.2rem;
            }
            
            .website-link {
                font-size: 0.8rem;
            }
            
            .certificate-actions {
                flex-direction: column;
                align-items: center;
            }
            
            .certificate-actions .btn {
                width: 100%;
                max-width: 300px;
            }

.navigation-lock-overlay h2 {
                font-size: 1.5rem;
            }
            
            .navigation-lock-overlay p {
                font-size: 1rem;
            }
        }

@media (max-width: 480px) {
            .certificate-container {
                padding: 15px;
                border-width: 8px;
            }
            
            .certificate-title {
                font-size: 1.5rem;
            }
            
            .certificate-name {
                font-size: 1.4rem;
            }
            
            .certificate-logo {
                width: 80px;
                height: 80px;
                font-size: 0.6rem;
                top: 15px;
                right: 15px;
                padding: 5px;
            }
            
            .logo-line {
                font-size: 0.55rem;
            }
            
            .logo-line.main {
                font-size: 0.65rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        
        <div class="screen welcome-screen active" id="welcome-screen">
            <h1>Biology Quiz Challenge</h1>
            <p>Test your biology knowledge with this exciting quiz! You have 45 minutes to answer 50 questions. Each correct answer gives you 2 points, but wrong answers deduct 0.5 points. Good luck!</p>
            
            <div class="input-group">
                <input type="text" id="player-name" placeholder="Enter your name" required>
            </div>
            
            <button class="btn" id="start-btn">Start Quiz</button>
        </div>

<div class="screen" id="quiz-screen">
            <div class="quiz-header">
                <div class="timer" id="timer">45:00</div>
                <div class="question-counter" id="question-counter">Question 1 of 50</div>
            </div>
            
            <div class="progress-bar">
                <div class="progress" id="progress"></div>
            </div>
            
            <div class="question-container">
                <h2 class="question" id="question">Question will appear here</h2>
                
                <div class="options" id="options">
                    
                </div>
            </div>
            
            <div class="navigation">
                <button class="btn" id="prev-btn" disabled>Previous</button>
                <button class="btn" id="next-btn">Next</button>
                <button class="btn" id="submit-btn" style="display:none">Submit Quiz</button>
            </div>
        </div>

<div class="screen" id="results-screen">
            <h1>Biology Quiz Results</h1>
            <div class="grade" id="grade">A+</div>
            <h2 id="player-greeting">Well done, Player!</h2>
            
            <div class="stats">
                <div class="stat stat-correct">
                    <div class="stat-value" id="correct-count">0</div>
                    <div>Correct Answers</div>
                </div>
                <div class="stat stat-wrong">
                    <div class="stat-value" id="wrong-count">0</div>
                    <div>Wrong Answers</div>
                </div>
                <div class="stat stat-unattempted">
                    <div class="stat-value" id="unattempted-count">0</div>
                    <div>Unattempted</div>
                </div>
                <div class="stat stat-score">
                    <div class="stat-value" id="score">0</div>
                    <div>Total Score</div>
                </div>
            </div>
            
            
            <div class="leaderboard-section">
                <h3 style="text-align: center; color: #2575fc; margin-bottom: 15px;">🏆 Class Leaderboard</h3>
                
                
                <div style="text-align: center; margin-bottom: 20px;">
                    <p style="color: #4CAF50; font-weight: bold; padding: 10px; background: #e8f5e8; border-radius: 5px;">
                        ✅ Your score has been automatically saved to the leaderboard!
                    </p>
                </div>
                
                
                <div id="leaderboard-display" style="max-height: 300px; overflow-y: auto;">
                    <div style="text-align: center; color: #666; padding: 20px;">
                        Loading leaderboard...
                    </div>
                </div>
                
                <div style="text-align: center; margin-top: 15px;">
                    <button class="btn" onclick="loadLeaderboard()" style="background: #2196F3; padding: 8px 15px; font-size: 0.9rem;">
                        🔄 Refresh Leaderboard
                    </button>
                </div>
            </div>
            
            <div id="results-container">
                
            </div>
            
            <div class="navigation">
                <button class="btn" id="view-certificate-btn">View Certificate</button>
                <button class="btn" id="restart-btn">Take Quiz Again</button>
            </div>
        </div>

<div class="screen" id="certificate-screen">
            <h1>Biology Certificate of Achievement</h1>
            <p>Congratulations on completing the Biology Quiz! Here's your professional certificate.</p>
            
            <div class="certificate-container" id="certificate">
                <div class="certificate-ribbon">OFFICIAL CERTIFICATE</div>
                <div class="certificate-logo">
                    <div class="logo-line">BIOLOGY</div>
                    <div class="logo-line main">EXCELLENCE</div>
                    <div class="logo-line">AWARD</div>
                </div>
                
                <div class="certificate-title">Certificate of Achievement</div>
                <div class="certificate-subtitle">in Biological Sciences</div>
                
                <div class="certificate-content">
                    This is to certify that
                </div>
                
                <div class="certificate-name" id="certificate-name">Player Name</div>
                
                <div class="certificate-content" id="certificate-content">
                    has successfully completed the Biology Quiz Challenge with outstanding performance
                    and demonstrated excellent knowledge in biological sciences.
                </div>
                
                <div class="certificate-grade" id="certificate-grade">Grade: A+</div>
                <div class="certificate-score" id="certificate-score">Score: 95/100</div>
                <div class="certificate-remarks" id="certificate-remarks">Excellent Performance!</div>
                
                <div class="certificate-date" id="certificate-date">Issued on: October 20, 2023</div>
                
                <div class="certificate-signature">
                    <div class="signature-box">
                        <div class="signature-line"></div>
                        <div class="signature-name">Imran Dal</div>
                        <div class="signature-title">Biology Quiz Administrator</div>
                    </div>
                </div>
                
                <div class="website-link">
                    Visit: <a href="https://imranalidal.blogspot.com" target="_blank">https://imranalidal.blogspot.com</a>
                </div>
            </div>
            
            <div class="certificate-actions">
                <button class="btn certificate-btn" id="download-pdf-btn">Download PDF Certificate</button>
                <button class="btn print-btn" id="print-certificate-btn">Print Certificate</button>
                <button class="btn" id="back-to-results-btn">Back to Results</button>
                <button class="btn" id="new-quiz-btn">Take New Quiz</button>
            </div>
        </div>
    </div>

<div id="navigation-lock-overlay" class="navigation-lock-overlay" style="display: none;">
        <h2 id="lock-title">⚠️ Navigation Restricted</h2>
        <p id="lock-message">You cannot leave the quiz during the test. All navigation is blocked until you submit your answers.</p>
        <p id="attempt-warning" style="color: #ff6b6b; font-weight: bold;"></p>
        <p id="lockout-timer" style="color: #ffcc00; font-weight: bold; font-size: 1.5rem; margin: 15px 0;"></p>
        <button class="btn" id="return-to-quiz-btn">Return to Quiz</button>
    </div>

// Portion 1: Glomerular Filtration

{
        question: "The process of urine formation begins with:",
        options: [
            "Tubular secretion",
            "Selective reabsorption",
            "Glomerular filtration",
            "Counter current mechanism"
        ],
        correct: 2
    },

{
        question: "Filtration of blood in kidneys occurs in:",
        options: [
            "Loop of Henle",
            "Glomerulus",
            "Collecting duct",
            "DCT"
        ],
        correct: 1
    },

{
        question: "Glomerular filtration is caused mainly by:",
        options: [
            "Osmotic pressure",
            "Hydrostatic pressure",
            "Diffusion",
            "Active transport"
        ],
        correct: 1
    },

{
        question: "The process of filtration in the glomerulus is also called:",
        options: [
            "Ultrafiltration",
            "Osmoregulation",
            "Secretion",
            "Diffusion"
        ],
        correct: 0
    },

{
        question: "The fluid that passes into Bowman's capsule is called:",
        options: [
            "Urine",
            "Plasma",
            "Glomerular filtrate",
            "Lymph"
        ],
        correct: 2
    },

{
        question: "Glomerular filtrate mainly contains:",
        options: [
            "Blood cells",
            "Proteins",
            "Water and small molecules",
            "Enzymes"
        ],
        correct: 2
    },

{
        question: "Which structure allows only small molecules to pass during filtration?",
        options: [
            "Loop of Henle",
            "Glomerular membrane",
            "Collecting duct",
            "Ureter"
        ],
        correct: 1
    },

{
        question: "Which of the following is NOT normally part of the glomerular filtrate?",
        options: [
            "Urea",
            "Amino acids",
            "Glucose",
            "Blood cells"
        ],
        correct: 3
    },

{
        question: "Glomerular filtration rate (GFR) is directly related to:",
        options: [
            "Body temperature",
            "Filtration pressure",
            "Urine pH",
            "Hormone secretion"
        ],
        correct: 1
    },

{
        question: "In humans, GFR is maintained relatively stable by:",
        options: [
            "ADH",
            "Autoregulation",
            "Kidney stones",
            "Bicarbonate"
        ],
        correct: 1
    },

// Portion 2: Kidney Filtration and Reabsorption

{
        question: "Average daily urine output in normal conditions is about:",
        options: [
            "0.5 L",
            "1 L",
            "2.5 L",
            "5 L"
        ],
        correct: 1
    },

{
        question: "Kidneys filter approximately how much glomerular filtrate per day?",
        options: [
            "18 L",
            "180 L",
            "1.8 L",
            "280 L"
        ],
        correct: 1
    },

{
        question: "The difference in diameter between afferent and efferent arterioles helps to:",
        options: [
            "Reduce blood pressure",
            "Maintain/increase filtration pressure",
            "Increase water absorption",
            "Decrease urine formation"
        ],
        correct: 1
    },

{
        question: "The afferent arteriole is normally:",
        options: [
            "Narrower than efferent arteriole",
            "Wider than efferent arteriole",
            "Equal in diameter",
            "Absent"
        ],
        correct: 1
    },

{
        question: "The main nitrogenous waste excreted through human urine is:",
        options: [
            "Glucose",
            "Amino acids",
            "Urea",
            "Fats"
        ],
        correct: 2
    },

{
        question: "Selective reabsorption occurs mainly in the:",
        options: [
            "Glomerulus",
            "PCT",
            "Collecting duct",
            "Ureter"
        ],
        correct: 1
    },

{
        question: "The process by which useful substances are taken back into blood from filtrate is:",
        options: [
            "Filtration",
            "Secretion",
            "Reabsorption",
            "Osmosis"
        ],
        correct: 2
    },

{
        question: "Approximately what percentage of the filtered water and solutes is reabsorbed?",
        options: [
            "10%",
            "50%",
            "99%",
            "100%"
        ],
        correct: 2
    },

{
        question: "Most filtered glucose is reabsorbed in the:",
        options: [
            "Loop of Henle",
            "DCT",
            "PCT",
            "Collecting duct"
        ],
        correct: 2
    },

{
        question: "Under normal conditions, essentially 100% of filtered glucose and amino acids are reabsorbed mainly in the:",
        options: [
            "DCT",
            "PCT",
            "Loop of Henle",
            "Collecting duct"
        ],
        correct: 1
    },

// Portion 3: Water and Sodium Reabsorption

{
        question: "Approximately what percentage of filtered water is reabsorbed in the PCT?",
        options: [
            "10%",
            "25%",
            "67%",
            "99%"
        ],
        correct: 2
    },

{
        question: "Water is reabsorbed in kidney tubules primarily by:",
        options: [
            "Active transport",
            "Osmosis",
            "Secretion",
            "Phagocytosis"
        ],
        correct: 1
    },

{
        question: "Which ion helps drive reabsorption of many negatively charged ions?",
        options: [
            "K⁺",
            "Na⁺",
            "Ca²⁺",
            "Mg²⁺"
        ],
        correct: 1
    },

{
        question: "Which hormone facilitates sodium reabsorption in the distal nephron?",
        options: [
            "ADH",
            "Aldosterone",
            "Insulin",
            "Estrogen"
        ],
        correct: 1
    },

{
        question: "Which hormone facilitates water reabsorption in the collecting ducts?",
        options: [
            "Aldosterone",
            "ADH",
            "Oxytocin",
            "Cortisol"
        ],
        correct: 1
    },

{
        question: "The main function of selective reabsorption is to:",
        options: [
            "Remove all toxins",
            "Maintain water and electrolyte balance",
            "Form glomerular filtrate",
            "Increase urine pH only"
        ],
        correct: 1
    },

{
        question: "Reabsorption of filtered glucose occurs mainly through:",
        options: [
            "Passive diffusion only",
            "Carrier-mediated active transport",
            "Osmosis",
            "Simple filtration"
        ],
        correct: 1
    },

{
        question: "Water absorption in kidney tubules is generally:",
        options: [
            "Active",
            "Passive",
            "Enzymatic",
            "Absent"
        ],
        correct: 1
    },

{
        question: "Aldosterone acts mainly on the:",
        options: [
            "PCT",
            "DCT and collecting duct",
            "Glomerulus",
            "Bowman's capsule"
        ],
        correct: 1
    },

{
        question: "ADH increases water permeability mainly in the:",
        options: [
            "PCT",
            "Late DCT and collecting duct",
            "Bowman's capsule",
            "Glomerulus"
        ],
        correct: 1
    },

// Portion 4: Tubular Secretion

{
        question: "Tubular secretion occurs particularly in the:",
        options: [
            "PCT and DCT",
            "Loop of Henle only",
            "Glomerulus",
            "Ureter only"
        ],
        correct: 0
    },

{
        question: "The process of adding substances from blood into tubular fluid is called:",
        options: [
            "Filtration",
            "Secretion",
            "Reabsorption",
            "Absorption"
        ],
        correct: 1
    },

{
        question: "Substances secreted into tubular fluid include:",
        options: [
            "Glucose and amino acids",
            "H⁺ ions and certain organic wastes/drugs",
            "Proteins only",
            "Red blood cells"
        ],
        correct: 1
    },

{
        question: "Tubular secretion can involve:",
        options: [
            "Active transport",
            "Only osmosis",
            "Only filtration",
            "Only diffusion"
        ],
        correct: 0
    },

{
        question: "Tubular secretion contributes importantly to maintenance of:",
        options: [
            "Blood pH",
            "Body temperature",
            "Heart rate",
            "Vision"
        ],
        correct: 0
    },

{
        question: "Exchange of Na⁺ reabsorption for K⁺ secretion occurs prominently in the:",
        options: [
            "PCT only",
            "DCT and collecting duct",
            "Glomerulus",
            "Ureter"
        ],
        correct: 1
    },

{
        question: "Tubular secretion occurs in:",
        options: [
            "PCT only",
            "DCT only",
            "Both PCT and DCT",
            "Ureter only"
        ],
        correct: 2
    },

{
        question: "Tubular secretion helps remove:",
        options: [
            "Useful glucose",
            "Certain drugs, H⁺ and wastes",
            "All proteins",
            "Red blood cells"
        ],
        correct: 1
    },

{
        question: "Potassium ions are secreted mainly by:",
        options: [
            "Glomerulus",
            "Distal nephron",
            "Bowman's capsule",
            "Ureter"
        ],
        correct: 1
    },

{
        question: "The main aim of tubular secretion is to:",
        options: [
            "Absorb glucose",
            "Help eliminate wastes and regulate ions/pH",
            "Filter blood",
            "Produce urine in the bladder"
        ],
        correct: 1
    },

// Portion 5: Counter-Current Mechanism

{
        question: "The counter-current mechanism is primarily associated with the:",
        options: [
            "Glomerulus",
            "Loop of Henle",
            "Bowman's capsule",
            "PCT"
        ],
        correct: 1
    },

{
        question: "Counter-current means that tubular fluids:",
        options: [
            "Move in the same direction",
            "Flow in opposite directions in adjacent limbs",
            "Do not move",
            "Move randomly"
        ],
        correct: 1
    },

{
        question: "The ascending limb of the loop of Henle is relatively:",
        options: [
            "Highly permeable to water",
            "Impermeable to water",
            "Permeable to proteins",
            "Permeable to all substances"
        ],
        correct: 1
    },

{
        question: "The descending limb of the loop of Henle is:",
        options: [
            "Impermeable to water",
            "Permeable to water",
            "Impermeable to all solutes",
            "Permeable to proteins"
        ],
        correct: 1
    },

{
        question: "The thick ascending limb actively transports:",
        options: [
            "Na⁺, K⁺ and Cl⁻",
            "Glucose",
            "Proteins",
            "Red blood cells"
        ],
        correct: 0
    },

{
        question: "The renal medulla becomes hypertonic mainly because of:",
        options: [
            "Active transport of NaCl and recycling of urea",
            "Loss of all water",
            "Glucose secretion",
            "Blood cell filtration"
        ],
        correct: 0
    },

{
        question: "Which hormone is most important for producing concentrated urine?",
        options: [
            "Oxytocin",
            "ADH",
            "Thyroxine",
            "Calcitonin"
        ],
        correct: 1
    },

{
        question: "Aldosterone is produced by the:",
        options: [
            "Renal cortex",
            "Adrenal cortex",
            "Pituitary gland",
            "Adrenal medulla"
        ],
        correct: 1
    },

{
        question: "ADH is synthesized in the hypothalamus and released from the:",
        options: [
            "Posterior pituitary",
            "Kidney",
            "Adrenal cortex",
            "Pancreas"
        ],
        correct: 0
    },

{
        question: "The major function of the counter-current mechanism is to:",
        options: [
            "Produce only dilute urine",
            "Create a medullary osmotic gradient that helps concentrate urine",
            "Stop filtration",
            "Decrease the medullary salt gradient"
        ],
        correct: 1
    }

];
        // DOM Elements - ALL YOUR ORIGINAL ELEMENTS
        const welcomeScreen = document.getElementById('welcome-screen');
        const quizScreen = document.getElementById('quiz-screen');
        const resultsScreen = document.getElementById('results-screen');
        const certificateScreen = document.getElementById('certificate-screen');
        const startBtn = document.getElementById('start-btn');
        const playerNameInput = document.getElementById('player-name');
        const timerElement = document.getElementById('timer');
        const questionCounter = document.getElementById('question-counter');
        const progressBar = document.getElementById('progress');
        const questionElement = document.getElementById('question');
        const optionsContainer = document.getElementById('options');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const submitBtn = document.getElementById('submit-btn');
        const restartBtn = document.getElementById('restart-btn');
        const viewCertificateBtn = document.getElementById('view-certificate-btn');
        const downloadPdfBtn = document.getElementById('download-pdf-btn');
        const printCertificateBtn = document.getElementById('print-certificate-btn');
        const backToResultsBtn = document.getElementById('back-to-results-btn');
        const newQuizBtn = document.getElementById('new-quiz-btn');
        const gradeElement = document.getElementById('grade');
        const playerGreeting = document.getElementById('player-greeting');
        const correctCountElement = document.getElementById('correct-count');
        const wrongCountElement = document.getElementById('wrong-count');
        const unattemptedCountElement = document.getElementById('unattempted-count');
        const scoreElement = document.getElementById('score');
        const resultsContainer = document.getElementById('results-container');
        const certificateName = document.getElementById('certificate-name');
        const certificateGrade = document.getElementById('certificate-grade');
        const certificateScore = document.getElementById('certificate-score');
        const certificateRemarks = document.getElementById('certificate-remarks');
        const certificateContent = document.getElementById('certificate-content');
        const certificateDate = document.getElementById('certificate-date');
        const certificateElement = document.getElementById('certificate');

// 🆕 NAVIGATION LOCK ELEMENTS - UPDATED
        const navigationLockOverlay = document.getElementById('navigation-lock-overlay');
        const returnToQuizBtn = document.getElementById('return-to-quiz-btn');
        const attemptWarning = document.getElementById('attempt-warning');
        const lockTitle = document.getElementById('lock-title');
        const lockMessage = document.getElementById('lock-message');
        const lockoutTimer = document.getElementById('lockout-timer');

// Quiz state - ALL YOUR ORIGINAL STATE VARIABLES
        let currentQuestion = 0;
        let userAnswers = new Array(quizQuestions.length).fill(null);
        let timeLeft = 45 * 60; // 45 minutes in seconds (UPDATED)
        let timerInterval;
        let playerName = "";
        let finalScore = 0;
        let finalGrade = "";

// 🆕 PERMANENT LEADERBOARD SETUP - YOUR ORIGINAL
        const BIN_ID = '6902fc59ae596e708f3746d3';
        const API_KEY = '$2a$10$53Ha3W/HbtjEy9ZlvJvf9OU2.YrhWCKyWdRpebTrM8QJ46XxfP5pi';

// 🆕 NAVIGATION LOCK STATE - UPDATED
        let testStarted = false;
        let navigationAttempts = 0;
        let navigationLockActive = false;
        let lockoutActive = false;
        let lockoutTimeLeft = 180; // 3 minutes in seconds
        let lockoutInterval;

// Start the quiz - YOUR ORIGINAL BUT ENHANCED
        startBtn.addEventListener('click', () => {
            if (playerNameInput.value.trim() === "") {
                alert("Please enter your name to start the quiz.");
                return;
            }
            
            playerName = playerNameInput.value.trim();
            welcomeScreen.classList.remove('active');
            quizScreen.classList.add('active');
            
            // 🆕 Start navigation protection - ADDED
            testStarted = true;
            enableNavigationLock();
            
            startTimer();
            loadQuestion();
        });

// Restart the quiz - YOUR ORIGINAL BUT ENHANCED
        restartBtn.addEventListener('click', () => {
            currentQuestion = 0;
            userAnswers = new Array(quizQuestions.length).fill(null);
            timeLeft = 45 * 60;
            
            resultsScreen.classList.remove('active');
            welcomeScreen.classList.add('active');
            
            // Reset the form
            playerNameInput.value = "";
            
            // Reset timer display
            timerElement.textContent = "45:00";
            timerElement.style.background = "#ff4b5c";
            
            // 🆕 Disable navigation lock - ADDED
            disableNavigationLock();
        });

// Navigation buttons - YOUR ORIGINAL
        prevBtn.addEventListener('click', () => {
            if (currentQuestion > 0) {
                currentQuestion--;
                loadQuestion();
            }
        });

nextBtn.addEventListener('click', () => {
            if (currentQuestion < quizQuestions.length - 1) {
                currentQuestion++;
                loadQuestion();
            } else {
                // Last question - enable submit button
                submitBtn.style.display = 'block';
                nextBtn.disabled = true;
            }
        });

// Submit button - YOUR ORIGINAL BUT ENHANCED
        submitBtn.addEventListener('click', () => {
            endQuiz();
            // 🆕 Disable navigation lock after submission - ADDED
            disableNavigationLock();
        });

// Certificate buttons - YOUR ORIGINAL BUT ENHANCED
        viewCertificateBtn.addEventListener('click', showCertificate);
        backToResultsBtn.addEventListener('click', () => {
            certificateScreen.classList.remove('active');
            resultsScreen.classList.add('active');
        });
        newQuizBtn.addEventListener('click', () => {
            currentQuestion = 0;
            userAnswers = new Array(quizQuestions.length).fill(null);
            timeLeft = 45 * 60;
            
            certificateScreen.classList.remove('active');
            welcomeScreen.classList.add('active');
            
            // Reset the form
            playerNameInput.value = "";
            
            // 🆕 Disable navigation lock - ADDED
            disableNavigationLock();
        });

// Return to quiz button - ADDED NEW
        returnToQuizBtn.addEventListener('click', () => {
            if (lockoutActive) {
                // If lockout is active, do nothing - user must wait
                return;
            }
            navigationLockOverlay.style.display = 'none';
            navigationLockActive = false;
        });

// Download PDF certificate - YOUR ORIGINAL
        downloadPdfBtn.addEventListener('click', downloadPdfCertificate);

// Print certificate - YOUR ORIGINAL
        printCertificateBtn.addEventListener('click', printCertificate);

// Load question - YOUR ORIGINAL FUNCTION
        function loadQuestion() {
            const question = quizQuestions[currentQuestion];
            
            // Update question counter and progress bar
            questionCounter.textContent = `Question ${currentQuestion + 1} of ${quizQuestions.length}`;
            progressBar.style.width = `${((currentQuestion + 1) / quizQuestions.length) * 100}%`;
            
            // Update navigation buttons
            prevBtn.disabled = currentQuestion === 0;
            nextBtn.disabled = currentQuestion === quizQuestions.length - 1;
            
            // Hide submit button until last question
            if (currentQuestion < quizQuestions.length - 1) {
                submitBtn.style.display = 'none';
            }
            
            // Set question text
            questionElement.textContent = question.question;
            
            // Clear options
            optionsContainer.innerHTML = '';
            
            // Add options
            question.options.forEach((option, index) => {
                const optionElement = document.createElement('div');
                optionElement.classList.add('option');
                
                if (userAnswers[currentQuestion] === index) {
                    optionElement.classList.add('selected');
                }
                
                optionElement.innerHTML = `
                    <span class="option-letter">${String.fromCharCode(65 + index)}</span>
                    <span class="option-text">${option}</span>
                `;
                
                optionElement.addEventListener('click', () => {
                    // Deselect all options
                    document.querySelectorAll('.option').forEach(opt => {
                        opt.classList.remove('selected');
                    });
                    
                    // Select this option
                    optionElement.classList.add('selected');
                    userAnswers[currentQuestion] = index;
                    
                    // Auto-advance to next question after selection
                    setTimeout(() => {
                        if (currentQuestion < quizQuestions.length - 1) {
                            currentQuestion++;
                            loadQuestion();
                        } else {
                            // Last question - enable submit button
                            submitBtn.style.display = 'block';
                            nextBtn.disabled = true;
                        }
                    }, 500);
                });
                
                optionsContainer.appendChild(optionElement);
            });
        }

// Timer function - YOUR ORIGINAL BUT ENHANCED
        function startTimer() {
            updateTimerDisplay();
            
            timerInterval = setInterval(() => {
                timeLeft--;
                updateTimerDisplay();
                
                if (timeLeft <= 0) {
                    clearInterval(timerInterval);
                    endQuiz();
                    // 🆕 Disable navigation lock when time ends - ADDED
                    disableNavigationLock();
                }
            }, 1000);
        }

// 🆕 COMPLETE NAVIGATION LOCK SYSTEM - UPDATED
        function enableNavigationLock() {
            if (navigationLockActive) return;
            
            navigationLockActive = true;
            navigationAttempts = 0;
            
            // Create attempt counter
            const attemptCounter = document.createElement('div');
            attemptCounter.className = 'attempt-counter';
            attemptCounter.id = 'attempt-counter';
            attemptCounter.textContent = 'Navigation Attempts: 0';
            document.body.appendChild(attemptCounter);
            
            // Prevent back button
            window.history.pushState(null, null, window.location.href);
            window.onpopstate = function(event) {
                if (testStarted) {
                    window.history.pushState(null, null, window.location.href);
                    handleNavigationAttempt();
                    return false;
                }
            };
            
            // Detect tab/app switching
            document.addEventListener('visibilitychange', function() {
                if (document.hidden && testStarted) {
                    handleNavigationAttempt();
                }
            });
            
            // Disable context menu
            document.addEventListener('contextmenu', function(e) {
                if (testStarted) {
                    e.preventDefault();
                    return false;
                }
            });
            
            // Disable keyboard shortcuts
            document.addEventListener('keydown', function(e) {
                if (testStarted) {
                    if (e.key === 'F5' || 
                        (e.ctrlKey && e.key === 'r') || 
                        (e.ctrlKey && e.shiftKey && e.key === 'r') ||
                        (e.key === 'Backspace' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA')) {
                        e.preventDefault();
                        handleNavigationAttempt();
                        return false;
                    }
                }
            });
            
            console.log('Navigation lock activated - Test started');
        }

// 🆕 AUTO-SAVE FUNCTION - YOUR ORIGINAL
        async function autoSaveToLeaderboard() {
            try {
                // Load current scores
                const response = await fetch(`https://api.jsonbin.io/v3/b/${BIN_ID}/latest`, {
                    headers: { 'X-Master-Key': API_KEY }
                });
                const data = await response.json();
                const scores = data.record.scores || [];

// Calculate percentage for leaderboard
                const percentage = (finalScore / (quizQuestions.length * 2)) * 100;
                
                // Add new score
                scores.push({
                    name: playerName,
                    score: Math.round(percentage),
                    date: new Date().toLocaleDateString()
                });

// Save back to permanent storage
                await fetch(`https://api.jsonbin.io/v3/b/${BIN_ID}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Master-Key': API_KEY
                    },
                    body: JSON.stringify({ scores: scores })
                });

console.log('✅ Score auto-saved to leaderboard!');
                
            } catch (error) {
                console.error('❌ Error auto-saving score:', error);
            }
        }

// End quiz and show results - YOUR ORIGINAL WITH AUTO-SAVE
        function endQuiz() {
            clearInterval(timerInterval);
            
            // Calculate results
            let correctCount = 0;
            let wrongCount = 0;
            let unattemptedCount = 0;
            let score = 0;
            
            quizQuestions.forEach((question, index) => {
                if (userAnswers[index] === question.correct) {
                    correctCount++;
                    score += 2;
                } else if (userAnswers[index] !== null) {
                    wrongCount++;
                    score -= 0.5;
                } else {
                    unattemptedCount++;
                }
            });
            
            // Ensure score doesn't go below 0
            score = Math.max(0, score);
            finalScore = score;
            
            // 🆕 AUTO-SAVE TO LEADERBOARD - YOUR ORIGINAL
            autoSaveToLeaderboard();
            
            // Update results screen with appropriate greeting
            const percentage = (score / (quizQuestions.length * 2)) * 100;
            
            if (percentage >= 70) {
                playerGreeting.textContent = `Excellent work, ${playerName}!`;
            } else if (percentage >= 50) {
                playerGreeting.textContent = `Good effort, ${playerName}!`;
            } else if (percentage >= 30) {
                playerGreeting.textContent = `Keep trying, ${playerName}!`;
            } else {
                playerGreeting.textContent = `Don't give up, ${playerName}! Practice makes perfect.`;
            }
            
            correctCountElement.textContent = correctCount;
            wrongCountElement.textContent = wrongCount;
            unattemptedCountElement.textContent = unattemptedCount;
            scoreElement.textContent = score.toFixed(1);
            
            // Calculate grade
            let grade;
            
            if (percentage >= 90) grade = "A+";
            else if (percentage >= 80) grade = "A";
            else if (percentage >= 70) grade = "B";
            else if (percentage >= 60) grade = "C";
            else if (percentage >= 50) grade = "D";
            else grade = "F";
            
            gradeElement.textContent = grade;
            finalGrade = grade;
            
            // Show detailed results
            resultsContainer.innerHTML = '';
            quizQuestions.forEach((question, index) => {
                const resultItem = document.createElement('div');
                
                if (userAnswers[index] === question.correct) {
                    resultItem.classList.add('result-item', 'result-correct');
                } else if (userAnswers[index] !== null) {
                    resultItem.classList.add('result-item', 'result-wrong');
                } else {
                    resultItem.classList.add('result-item', 'result-unattempted');
                }
                
                let userAnswerText = "Not Attempted";
                if (userAnswers[index] !== null) {
                    userAnswerText = question.options[userAnswers[index]];
                }
                
                const answersHtml = `
                    <div class="result-answers">
                        <span class="answer-badge correct-answer">Correct: ${question.options[question.correct]}</span>
                        ${userAnswers[index] !== null ? 
                            `<span class="answer-badge ${userAnswers[index] === question.correct ? 'correct-answer' : 'wrong-answer'}">Your Answer: ${userAnswerText}</span>` : 
                            `<span class="answer-badge unattempted-answer">Not Attempted</span>`}
                    </div>
                `;
                
                resultItem.innerHTML = `
                    <div class="result-question">${index + 1}. ${question.question}</div>
                    ${answersHtml}
                `;
                
                resultsContainer.appendChild(resultItem);
            });
            
            // Show results screen
            quizScreen.classList.remove('active');
            resultsScreen.classList.add('active');
            
            // Load leaderboard when results show
            setTimeout(loadLeaderboard, 500);
            
            // Create confetti effect only for good scores
            if (percentage >= 70) {
                createConfetti();
            }
        }

// Show certificate - YOUR ORIGINAL FUNCTION
        function showCertificate() {
            // Update certificate with user data
            certificateName.textContent = playerName;
            certificateGrade.textContent = `Grade: ${finalGrade}`;
            certificateScore.textContent = `Score: ${finalScore.toFixed(1)}/${quizQuestions.length * 2}`;
            
            // Set remarks based on grade
            const percentage = (finalScore / (quizQuestions.length * 2)) * 100;
            let remarks = "";
            
            if (percentage >= 90) {
                remarks = "Outstanding Performance! Exceptional knowledge of Biology!";
            } else if (percentage >= 80) {
                remarks = "Excellent Performance! Strong understanding of Biology concepts!";
            } else if (percentage >= 70) {
                remarks = "Very Good Performance! Good grasp of Biology fundamentals!";
            } else if (percentage >= 60) {
                remarks = "Good Performance! Solid understanding of basic Biology!";
            } else if (percentage >= 50) {
                remarks = "Satisfactory Performance! Passed the Biology quiz!";
            } else {
                remarks = "Needs Improvement. Keep studying Biology concepts!";
            }
            
            certificateRemarks.textContent = remarks;
            
            // Update certificate content based on performance
            if (percentage >= 50) {
                certificateContent.textContent = `has successfully completed the Biology Quiz Challenge and demonstrated ${percentage >= 70 ? 'excellent' : 'satisfactory'} knowledge in biological sciences.`;
            } else {
                certificateContent.textContent = `has attempted the Biology Quiz Challenge. We encourage further study of biological concepts to improve understanding.`;
            }
            
            // Set current date automatically (only in one place)
            const now = new Date();
            const options = { year: 'numeric', month: 'long', day: 'numeric' };
            certificateDate.textContent = `Issued on: ${now.toLocaleDateString('en-US', options)}`;
            
            // Show certificate screen
            resultsScreen.classList.remove('active');
            certificateScreen.classList.add('active');
        }

// Download PDF certificate - YOUR ORIGINAL FUNCTION
        function downloadPdfCertificate() {
            const { jsPDF } = window.jspdf;
            const pdf = new jsPDF('p', 'mm', 'a4');
            
            const pageWidth = pdf.internal.pageSize.getWidth();
            const pageHeight = pdf.internal.pageSize.getHeight();
            
            // Add decorative border
            pdf.setDrawColor(139, 69, 19); // #8B4513
            pdf.setLineWidth(3);
            pdf.rect(5, 5, pageWidth - 10, pageHeight - 10);
            
            // Add inner decorative border
            pdf.setDrawColor(210, 180, 140); // #D2B48C
            pdf.setLineWidth(1);
            pdf.rect(10, 10, pageWidth - 20, pageHeight - 20);
            
            // Add ribbon background
            pdf.setFillColor(139, 69, 19);
            pdf.rect(0, 15, pageWidth, 15, 'F');
            
            // Add ribbon text
            pdf.setFontSize(16);
            pdf.setFont('helvetica', 'bold');
            pdf.setTextColor(255, 255, 255);
            pdf.text('OFFICIAL CERTIFICATE', pageWidth / 2, 25, { align: 'center' });
            
            // Add decorative logo area
            pdf.setFillColor(245, 245, 220);
            pdf.circle(pageWidth - 30, 45, 15, 'F');
            pdf.setFontSize(8);
            pdf.setTextColor(139, 69, 19);
            pdf.text('BIOLOGY', pageWidth - 30, 40, { align: 'center' });
            pdf.text('EXCELLENCE', pageWidth - 30, 45, { align: 'center' });
            pdf.text('AWARD', pageWidth - 30, 50, { align: 'center' });
            
            // Add title with shadow effect
            pdf.setFontSize(28);
            pdf.setFont('times', 'bold');
            pdf.setTextColor(139, 69, 19);
            pdf.text('Certificate of Achievement', pageWidth / 2, 70, { align: 'center' });
            
            // Add subtitle
            pdf.setFontSize(16);
            pdf.setFont('times', 'italic');
            pdf.text('in Biological Sciences', pageWidth / 2, 80, { align: 'center' });
            
            // Add decorative separator
            pdf.setDrawColor(139, 69, 19);
            pdf.setLineWidth(0.5);
            pdf.line(40, 90, pageWidth - 40, 90);
            
            // Add content
            pdf.setFontSize(14);
            pdf.setFont('helvetica', 'normal');
            pdf.setTextColor(0, 0, 0);
            pdf.text('This is to certify that', pageWidth / 2, 105, { align: 'center' });
            
            // Add student name with decorative underline
            pdf.setFontSize(22);
            pdf.setFont('times', 'bold');
            pdf.setTextColor(139, 69, 19);
            pdf.text(playerName, pageWidth / 2, 125, { align: 'center' });
            
            // Add decorative underline
            pdf.setDrawColor(139, 69, 19);
            pdf.setLineWidth(1);
            pdf.line(pageWidth / 2 - 50, 130, pageWidth / 2 + 50, 130);
            
            // Add certificate content
            pdf.setFontSize(12);
            pdf.setFont('helvetica', 'normal');
            pdf.setTextColor(0, 0, 0);
            const certificateText = certificateContent.textContent;
            const splitText = pdf.splitTextToSize(certificateText, pageWidth - 60);
            pdf.text(splitText, pageWidth / 2, 150, { align: 'center' });
            
            // Add grade and score in decorative boxes
            pdf.setFillColor(245, 245, 220);
            pdf.roundedRect(pageWidth / 2 - 45, 170, 90, 25, 5, 5, 'F');
            pdf.setFontSize(16);
            pdf.setFont('helvetica', 'bold');
            pdf.setTextColor(139, 69, 19);
            pdf.text(certificateGrade.textContent, pageWidth / 2, 180, { align: 'center' });
            pdf.text(certificateScore.textContent, pageWidth / 2, 190, { align: 'center' });
            
            // Add remarks with decorative background
            pdf.setFillColor(255, 250, 240);
            pdf.roundedRect(20, 200, pageWidth - 40, 20, 3, 3, 'F');
            pdf.setFontSize(14);
            pdf.setFont('helvetica', 'bolditalic');
            const remarks = certificateRemarks.textContent;
            const splitRemarks = pdf.splitTextToSize(remarks, pageWidth - 50);
            pdf.text(splitRemarks, pageWidth / 2, 210, { align: 'center' });
            
            // Add decorative separator
            pdf.setDrawColor(210, 180, 140);
            pdf.setLineWidth(0.5);
            pdf.line(40, 225, pageWidth - 40, 225);
            
            // Add date
            pdf.setFontSize(12);
            pdf.setFont('helvetica', 'normal');
            pdf.setTextColor(0, 0, 0);
            pdf.text(certificateDate.textContent, pageWidth / 2, 240, { align: 'center' });
            
            // Add signature area
            pdf.setDrawColor(139, 69, 19);
            pdf.setLineWidth(1);
            pdf.line(pageWidth / 2 - 40, 260, pageWidth / 2 + 40, 260);
            
            pdf.setFontSize(14);
            pdf.setFont('times', 'bold');
            pdf.setTextColor(139, 69, 19);
            pdf.text('Imran Dal', pageWidth / 2, 270, { align: 'center' });
            
            pdf.setFontSize(10);
            pdf.setFont('helvetica', 'normal');
            pdf.setTextColor(0, 0, 0);
            pdf.text('Biology Quiz Administrator', pageWidth / 2, 275, { align: 'center' });
            
            // Add website
            pdf.setFontSize(10);
            pdf.setTextColor(139, 69, 19);
            pdf.textWithLink('Visit: https://imranalidal.blogspot.com', pageWidth / 2, 285, { align: 'center', url: 'https://imranalidal.blogspot.com' });
            
            // Download the PDF
            pdf.save(`Biology_Certificate_${playerName.replace(/\s+/g, '_')}.pdf`);
        }

// Print certificate - YOUR ORIGINAL FUNCTION
        function printCertificate() {
            window.print();
        }

// Create confetti effect - YOUR ORIGINAL FUNCTION
        function createConfetti() {
            const colors = ['#f94144', '#f3722c', '#f8961e', '#f9c74f', '#90be6d', '#43aa8b', '#577590'];
            const container = document.querySelector('.container');
            
            for (let i = 0; i < 80; i++) {
                const confetti = document.createElement('div');
                confetti.classList.add('confetti');
                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                confetti.style.left = Math.random() * 100 + 'vw';
                confetti.style.animation = `confetti-fall ${Math.random() * 3 + 2}s linear forwards`;
                confetti.style.animationDelay = Math.random() * 2 + 's';
                container.appendChild(confetti);
                
                // Remove confetti after animation
                setTimeout(() => {
                    if (confetti.parentNode) {
                        confetti.remove();
                    }
                }, 5000);
            }
        }

// 🆕 PERMANENT LEADERBOARD FUNCTIONS - YOUR ORIGINAL
        async function loadLeaderboard() {
            const leaderboardDisplay = document.getElementById('leaderboard-display');
            leaderboardDisplay.innerHTML = '<div style="text-align: center; color: #666; padding: 20px;">Loading leaderboard...</div>';
            
            try {
                const response = await fetch(`https://api.jsonbin.io/v3/b/${BIN_ID}/latest`, {
                    headers: { 'X-Master-Key': API_KEY }
                });
                const data = await response.json();
                const scores = data.record.scores || [];
                
                displayLeaderboard(scores);
            } catch (error) {
                leaderboardDisplay.innerHTML = '<div style="text-align: center; color: #ff0000; padding: 20px;">No scores yet! Be the first to save your score.</div>';
            }
        }

function displayLeaderboard(scores) {
            const leaderboardDisplay = document.getElementById('leaderboard-display');
            
            if (scores.length === 0) {
                leaderboardDisplay.innerHTML = '<div style="text-align: center; color: #666; padding: 20px;">No scores yet! Be the first to save your score.</div>';
                return;
            }

// Sort by score (highest first) and limit to top 10
            scores.sort((a, b) => b.score - a.score);
            const topScores = scores.slice(0, 10);
            
            let html = '';
            topScores.forEach((student, index) => {
                const rank = index + 1;
                const trophy = rank === 1 ? '🥇' : rank === 2 ? '🥈' : rank === 3 ? '🥉' : `${rank}.`;
                const rankClass = rank === 1 ? 'rank-1' : rank === 2 ? 'rank-2' : rank === 3 ? 'rank-3' : '';
                
                html += `
                    <div class="student-row ${rankClass}">
                        <div style="display: flex; align-items: center;">
                            <span style="font-size: 1.2em; margin-right: 10px; font-weight: bold;">${trophy}</span>
                            <strong>${student.name}</strong>
                        </div>
                        <div>
                            <strong style="color: #4CAF50; font-size: 1.1em;">${student.score}%</strong>
                            <small style="color: #666; margin-left: 8px;">${student.date}</small>
                        </div>
                    </div>
                `;
            });
            
            leaderboardDisplay.innerHTML = html;
        }

// Prevent text selection and copying - YOUR ORIGINAL
        document.addEventListener('contextmenu', (e) => e.preventDefault());
        document.addEventListener('copy', (e) => {
            e.preventDefault();
            alert('Copying is disabled for this quiz!');
        });
        document.addEventListener('cut', (e) => e.preventDefault());
        document.addEventListener('selectstart', (e) => e.preventDefault());
    </script>
</body>
</html>

homeostasis

Biology Quiz Challenge Biology Quiz Challenge Test ...

+ Read more »

Biology

<div class="quizzes-container">
  <div class="quizzes-header animate-pop">
    <div class="header-content">
      <span class="dna-icon">🧬</span>
      <h1>Biology Interactive Portal</h1>
      <p>Master Class XI & XII Biology with Sindh Board specialized quizzes</p>
    </div>
  </div>

<div class="quizzes-grid">
    
    <div class="quiz-category">
      <h2 class="category-title">📖 Class XI (First Year)</h2>
      <div class="quiz-cards">

<div class="quiz-card animate-slide-up" style="animation-delay: 0.1s;">
          <div class="quiz-icon">🦋</div>
          <h3>2nd Term Test</h3>
          <p class="quiz-chapter">Human Physiology</p>
          <p class="quiz-desc">Comprehensive review of XI physiology chapters.</p>
          <a class="quiz-button" href="https://imranalidal.blogspot.com/p/class-xi.html">Start Quiz</a>
        </div>

<div class="quiz-card animate-slide-up" style="animation-delay: 0.2s;">
          <div class="quiz-icon">🔬</div>
          <h3>The Cell</h3>
          <p class="quiz-chapter">Chapter 4: Cytology</p>
          <p class="quiz-desc">60 MCQs based on Sindh Board New Book.</p>
          <a class="quiz-button" href="https://imranalidal.blogspot.com/p/cell_5.html">Start Quiz</a>
        </div>

<div class="quiz-card animate-slide-up" style="animation-delay: 0.3s;">
          <div class="quiz-icon">🧪</div>
          <h3>Biomolecules</h3>
          <p class="quiz-chapter">Chapter: Biological Molecules</p>
          <p class="quiz-desc">Carbohydrates, Proteins, and Lipids fundamentals.</p>
          <a class="quiz-button" href="https://imranalidal.blogspot.com/2025/10/wwe.html">Start Quiz</a>
        </div>

<div class="quiz-card animate-slide-up" style="animation-delay: 0.4s;">
          <div class="quiz-icon">⚗️</div>
          <h3>Enzymes</h3>
          <p class="quiz-chapter">Bio-catalysis</p>
          <p class="quiz-desc">Mechanism of enzyme action and kinetics.</p>
          <a class="quiz-button" href="https://imranalidal.blogspot.com/p/enzymes.html">Start Quiz</a>
        </div>

<div class="quiz-card animate-slide-up" style="animation-delay: 0.5s;">
          <div class="quiz-icon">🐾</div>
          <h3>Animal Kingdom</h3>
          <p class="quiz-chapter">Diversity of Life</p>
          <p class="quiz-desc">Classification of Invertebrates & Vertebrates.</p>
          <a class="quiz-button" href="https://imranalidal.blogspot.com/p/animal-kingdom.html">Start Quiz</a>
        </div>
      </div>
    </div>

<div class="quiz-category">
      <h2 class="category-title">🎓 Class XII (Second Year)</h2>
      <div class="quiz-cards">

<div class="quiz-card animate-slide-up" style="animation-delay: 0.2s;">
          <div class="quiz-icon">🧠</div>
          <h3>Nervous Coordination</h3>
          <p class="quiz-chapter">Brain & Neurons</p>
          <p class="quiz-desc">CNS, PNS and Nerve Impulse conduction.</p>
          <a class="quiz-button" href="https://imranalidal.blogspot.com/p/nervous-system.html">Start Quiz</a>
        </div>

<div class="quiz-card animate-slide-up" style="animation-delay: 0.3s;">
          <div class="quiz-icon">👩‍🔬</div>
          <h3>Chemical Coordination</h3>
          <p class="quiz-chapter">Hormones</p>
          <p class="quiz-desc">Endocrine system and metabolic control.</p>
          <a class="quiz-button" href="https://imranalidal.blogspot.com/p/chemical-coorination.html">Start Quiz</a>
        </div>

<div class="quiz-card animate-slide-up" style="animation-delay: 0.4s;">
          <div class="quiz-icon">🧬</div>
          <h3>Genetics (DNA)</h3>
          <p class="quiz-chapter">Chromosome & DNA</p>
          <p class="quiz-desc">Structure of DNA, Replication and Protein Synthesis.</p>
          <a class="quiz-button" href="https://imranalidal.blogspot.com/p/chromosome-and-dna.html">Start Quiz</a>
        </div>

<div class="quiz-card animate-slide-up" style="animation-delay: 0.5s;">
          <div class="quiz-icon">💀</div>
          <h3>Support & Movement</h3>
          <p class="quiz-chapter">Locomotion</p>
          <p class="quiz-desc">Skeletal system, muscles and movement.</p>
          <a class="quiz-button" href="https://imranalidal.blogspot.com/2025/09/human-skeleton-system-class-xii.html?m=1">Start Quiz</a>
        </div>

<div class="quiz-card animate-slide-up" style="animation-delay: 0.6s;">
          <div class="quiz-icon">👶</div>
          <h3>Reproduction</h3>
          <p class="quiz-chapter">Human Development</p>
          <p class="quiz-desc">Male and Female reproductive systems.</p>
          <a class="quiz-button" href="https://imranalidal.blogspot.com/2025/09/human-reproductive-system_53.html">Start Quiz</a>
        </div>

</div>
    </div>

</div>
</div>

/* --- Animations --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes pulse-bg {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-slide-up {
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

.animate-pop {
  animation: fadeInUp 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* --- Header Styling --- */
.quizzes-header {
  text-align: center;
  margin-bottom: 60px;
  background: linear-gradient(-45deg, #4f46e5, #7c3aed, #2563eb, #06b6d4);
  background-size: 400% 400%;
  animation: pulse-bg 10s ease infinite;
  color: white;
  padding: 50px 20px;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(79, 70, 229, 0.2);
}

.dna-icon {
  display: inline-block;
  font-size: 4rem;
  animation: float 4s ease-in-out infinite;
}

/* --- Categories --- */
.category-title {
  font-size: 2rem;
  color: #1e293b;
  margin-bottom: 30px;
  padding-left: 15px;
  border-left: 6px solid #4f46e5;
}

.quiz-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-bottom: 50px;
}

/* --- Card Styling --- */
.quiz-card {
  background: white;
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  border: 1px solid #e2e8f0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.quiz-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  border-color: #4f46e5;
}

.quiz-icon {
  font-size: 3.5rem;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.quiz-card:hover .quiz-icon {
  transform: scale(1.2) rotate(5deg);
}

.quiz-card h3 {
  color: #0f172a;
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.quiz-chapter {
  color: #4f46e5;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

.quiz-desc {
  color: #64748b;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 15px 0 25px 0;
}

/* --- Button --- */
.quiz-button {
  display: block;
  background: #4f46e5;
  color: white;
  padding: 14px;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.quiz-button:hover {
  background: #4338ca;
  box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4);
  color: white;
}

/* Responsive */
@media (max-width: 768px) {
  .quizzes-header h1 { font-size: 1.8rem; }
  .quiz-card { padding: 20px; }
}
</style>

Biology

🧬 Biology Interactive Portal Master Class XI & XII Biology with Sindh Board specialized quizzes ...

+ Read more »

Chromosomes and dna

Chromosomes and dna

https://imranalidal.blogspot.com/p/chromosome-and-dna.html

+ Read more »

Cell quiz

Cell quiz

https://imranalidal.blogspot.com/p/cell_8.html

+ Read more »

27 amendment simplified

<head>

<title>ستائیسویں آئینی ترمیم کی مکمل وضاحت</title>

<style>

body {

font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;

background-color: #f9f9f9;

color: #222;

line-height: 2;

margin: 40px;

direction: rtl;

}

h1, h2, h3 {

color: #1a237e;

text-align: center;

}

p {

margin: 10px 0;

font-size: 20px;

}

table {

width: 100%;

border-collapse: collapse;

margin-top: 25px;

}

table, th, td {

border: 1px solid #777;

}

th, td {

padding: 12px;

text-align: center;

font-size: 18px;

}

th {

background-color: #e8eaf6;

}

.highlight {

background-color: #fff8e1;

padding: 12px;

border-radius: 8px;

border: 1px solid #eee;

}

</style>

</head>

<body>

<h1>ستائیسویں آئینی ترمیم کی سادہ وضاحت</h1>

<p>یہ ترمیم آئینِ پاکستان میں ایک بڑی تبدیلی ہے۔ اس کا مقصد عدلیہ، فوج، وفاق اور صوبوں کے درمیان اختیارات کی نئی تقسیم کرنا ہے۔

یہ تین بڑے حصوں پر اثر ڈالتی ہے: عدلیہ، فوجی نظام، اور صوبائی خودمختاری۔</p>

<h2>1️⃣ عدلیہ میں تبدیلی</h2>

<p><strong>کیا ہو گا:</strong> ایک نئی عدالت قائم کی جائے گی جس کا نام <strong>وفاقی آئینی عدالت</strong> ہو گا۔ یہ سپریم کورٹ سے الگ ہوگی اور صرف آئینی مقدمات سنے گی۔</p>

<p><strong>فائدہ:</strong> سپریم کورٹ کا بوجھ کم ہوگا، اور مقدمات جلد نمٹ سکیں گے۔</p>

<p><strong>نقصان:</strong> عدلیہ دو حصوں میں تقسیم ہوجائے گی اور ججوں کی آزادی پر اثر پڑ سکتا ہے۔</p>

</div>

<h2>2️⃣ فوجی نظام میں تبدیلی</h2>

<p><strong>کیا ہو گا:</strong> آرمی چیف کا نیا عہدہ <strong>چیف آف ڈیفنس فورسز</strong> رکھا جائے گا۔ چیئرمین جوائنٹ چیف آف اسٹاف کمیٹی کا عہدہ ختم ہوگا،

اور پانچ ستارہ رینک والے جنرلوں کو زندگی بھر مراعات دی جائیں گی۔</p>

<p><strong>فائدہ:</strong> فوجی کمان میں نظم اور ہم آہنگی پیدا ہوگی۔</p>

<p><strong>نقصان:</strong> ایک ہی شخص کے ہاتھ میں بہت زیادہ طاقت آجائے گی، اور فوجی اثر سیاست پر بڑھ سکتا ہے۔</p>

</div>

<h2>3️⃣ صوبوں کے اختیارات</h2>

<p><strong>کیا ہو گا:</strong> کچھ اختیارات جیسے تعلیم اور آبادی کا انتظام وفاق کے پاس آجائے گا،

اور قومی مالیاتی کمیشن میں صوبوں کے حصے میں تبدیلی ممکن ہوگی۔</p>

<p><strong>فائدہ:</strong> پورے ملک میں ایک جیسی پالیسی اور نظام تعلیم بنایا جاسکے گا۔</p>

<p><strong>نقصان:</strong> صوبوں کی خودمختاری کمزور ہوجائے گی، اور ان کے بجٹ پر دباؤ بڑھے گا۔</p>

</div>

<h2>4️⃣ الیکشن کمیشن میں تبدیلی</h2>

<p><strong>کیا ہو گا:</strong> الیکشن کمیشن کے ارکان کی تقرری کا طریقہ آسان کیا جارہا ہے تاکہ تاخیر نہ ہو۔</p>

<p><strong>فائدہ:</strong> انتخابات وقت پر ہوسکیں گے۔</p>

<p><strong>نقصان:</strong> اگر حکومت یکطرفہ تقرری کرے تو شفافیت متاثر ہوسکتی ہے۔</p>

</div>

<h2>5️⃣ مجسٹریٹ نظام</h2>

<p>ابتدائی مسودے میں مجسٹریٹس کو سزا دینے کے اختیارات دینے کی بات تھی مگر عوامی مخالفت کے بعد یہ شق نکال دی گئی۔

یعنی کوئی افسر اب شہری کو بغیر عدالتی حکم کے قید نہیں کرسکتا۔</p>

</div>

<h2>⚖️ خلاصہ</h2>

<table>

<tr>

<th>فائدہ</th>

<th>نقصان</th>

</tr>

<tr>

<td>عدلیہ</td>

<td>مقدمات جلد حل</td>

<td>آزادی متاثر</td>

</tr>

<tr>

</tr>

<tr>

<td>یکساں پالیسی</td>

<td>خودمختاری ختم</td>

</tr>

<tr>

<td>الیکشن</td>

<td>انتخابات بروقت</td>

<td>شفافیت کم</td>

</tr>

<tr>

<td>حکومت</td>

<td>تیز فیصلے</td>

<td>احتساب کمزور</td>

</tr>

</table>

<p>یہ ترمیم بظاہر ریاست کو مضبوط بنانے کے لیے پیش کی گئی ہے،

لیکن درحقیقت اس سے اختیارات مرکز اور فوج کے ہاتھ میں زیادہ مرتکز ہو جائیں گے۔</p>

<p>اگر یہ ترمیم ایمانداری سے نافذ کی گئی تو نظام میں نظم پیدا ہوگا،

مگر اگر طاقت کے ناجائز استعمال کے لیے استعمال ہوئی تو جمہوریت کمزور اور آمریت مضبوط ہوجائے گی۔</p>

<p><strong>ایک جملے میں:</strong> یہ ترمیم ریاست کو منظم بھی کرسکتی ہے اور آمریت کی راہ بھی کھول سکتی ہے —

سب کچھ نیت پر منحصر ہے۔</p>

</div>

</body>

</html>

27 amendment simplified

ستائیسویں آئینی ترمیم کی مکمل وضاحت ستائیسویں آئینی ترمیم کی سادہ وضاحت یہ ترمیم آئینِ پاکستان میں ایک بڑی تبدیلی ہے۔ ا...

+ Read more »

Animal world

<head>

<title>Parasitic Manipulation: Nature’s Real-Life Mind Control</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

body {

font-family: 'Poppins', sans-serif;

background: #f5f8fa;

margin: 0;

padding: 0;

line-height: 1.8;

color: #222;

overflow-x: hidden;

}

header {

text-align: center;

background: linear-gradient(135deg, #0099ff, #00cc99);

color: white;

padding: 70px 20px;

animation: fadeIn 1.5s ease-in;

position: relative;

}

header h1 {

font-size: 2.5rem;

margin-bottom: 10px;

}

header p {

font-size: 1.2rem;

opacity: 0.9;

}

section {

max-width: 900px;

margin: 40px auto;

background: white;

padding: 30px;

border-radius: 15px;

box-shadow: 0 4px 15px rgba(0,0,0,0.1);

animation: slideUp 1.2s ease;

}

h2 {

color: #0077cc;

margin-top: 30px;

}

h3 {

color: #00aa88;

margin-top: 25px;

}

p {

margin: 15px 0;

font-size: 1.05rem;

}

.example {

background: #f0faf9;

border-left: 4px solid #00cc99;

padding: 15px 20px;

border-radius: 10px;

margin: 20px 0;

position: relative;

}

.credit {

text-align: center;

margin: 40px 0;

font-size: 0.9rem;

color: #666;

}

/* Animations */

@keyframes fadeIn {

from {opacity: 0; transform: translateY(-30px);}

to {opacity: 1; transform: translateY(0);}

}

@keyframes slideUp {

from {opacity: 0; transform: translateY(40px);}

to {opacity: 1; transform: translateY(0);}

}

@keyframes float {

0%, 100% { transform: translateY(0); }

50% { transform: translateY(-10px); }

}

@keyframes pulse {

0% { transform: scale(1); opacity: 1; }

50% { transform: scale(1.1); opacity: 0.7; }

100% { transform: scale(1); opacity: 1; }

}

/* Floating Rat Animation */

.rat {

width: 80px;

height: 80px;

background: url('https://cdn-icons-png.flaticon.com/512/616/616408.png') no-repeat center/contain;

position: absolute;

top: -30px;

right: 40px;

animation: float 3s ease-in-out infinite;

}

.cat-eyes {

width: 60px;

height: 30px;

background: radial-gradient(ellipse at center, #00ff99 0%, #006633 100%);

border-radius: 50%;

position: absolute;

top: 10px;

right: 10px;

animation: pulse 2s infinite;

}

/* Zombie Ant Animation */

.ant {

width: 80px;

height: 80px;

background: url('https://cdn-icons-png.flaticon.com/512/616/6164082.png') no-repeat center/contain;

position: absolute;

bottom: 10px;

left: 10px;

animation: float 2.5s ease-in-out infinite;

}

.fungus {

width: 20px;

height: 60px;

background: linear-gradient(to top, #4e9a51, #a3d977);

position: absolute;

bottom: 70px;

left: 35px;

border-radius: 10px;

animation: pulse 2s infinite;

}

/* Snail Animation */

.snail {

width: 80px;

height: 80px;

background: url('https://cdn-icons-png.flaticon.com/512/1047/1047710.png') no-repeat center/contain;

position: absolute;

top: 20px;

left: 10px;

animation: float 3s infinite ease-in-out;

}

.eyestalk {

width: 10px;

height: 30px;

background: linear-gradient(45deg, #a4ff8c, #55cc55);

border-radius: 5px;

position: absolute;

top: -20px;

left: 35px;

animation: pulse 1.5s infinite;

}

</style>

</head>

<body>

<h1>Parasitic Manipulation: Nature’s Real-Life Mind Control</h1>

<p>When evolution turns creepy — discover how parasites literally hijack other animals’ minds.</p>

</header>

<h2>What Is Parasitic Manipulation?</h2>

<p>

In the vast world of zoology, few phenomena are as shocking as <strong>parasitic manipulation</strong> —

where one organism takes control of another’s behavior.

Parasites don’t just live off their hosts; they rewrite the rules of their survival.

</p>

<p>

Through chemistry and evolution, these microscopic masterminds have learned how to change brain signals,

alter instincts, and even erase fear itself.

Here are three of the most jaw-dropping examples from nature.

</p>

<h2>1. <em>Toxoplasma gondii</em> — The Fearless Rat Syndrome</h2>

<p>

<strong>Toxoplasma gondii</strong> is a single-celled parasite that completes its life cycle inside cats.

But before reaching there, it infects rats and rewires their brain.

</p>

<p>

Normally, rats fear the smell of cats — but once infected, the parasite suppresses that fear and

even makes the rat <strong>attracted</strong> to the scent of cat urine.

The rat literally walks toward its predator.

</p>

<p>

When the cat eats the infected rat, <em>T. gondii</em> enters its true home —

the cat’s intestines — where it reproduces.

Scientists have found that the parasite affects the rat’s dopamine and testosterone,

flipping natural instincts completely.

</p>

</div>

<h2>2. Zombie Ant Fungus — <em>Ophiocordyceps unilateralis</em></h2>

<p>

Deep in tropical forests, an invisible battle unfolds between ants and a deadly fungus called

<em>Ophiocordyceps unilateralis</em>.

Once its spores land on an ant, they penetrate the exoskeleton and spread throughout the body.

</p>

<p>

The fungus seizes control of the ant’s nervous system, forcing it to leave the safety of the colony

and climb up a plant to a specific height. There, it locks its jaws onto a leaf vein and dies —

while the fungus grows a long stalk right through its head to release more spores.

</p>

<p>

The accuracy of this “death grip” behavior is mind-blowing, showing how precisely a parasite

can manipulate its host’s movements.

</p>

</div>

<h2>3. <em>Leucochloridium paradoxum</em> — The Pulsating Snail Trick</h2>

<p>

<em>Leucochloridium paradoxum</em> is a flatworm that turns snails into glowing advertisements for birds.

It invades the snail’s eyestalks, filling them with brightly colored, pulsating tubes that look like

caterpillars wriggling in the light.

</p>

<p>

Birds, fooled by the movement, swoop down to eat the snail — and the parasite

finally reaches the bird’s intestines, where it reproduces.

Meanwhile, infected snails lose their instinct to hide and crawl into open, sunny areas,

making them easy prey.

</p>

</div>

<h2>How Parasites Control Behavior</h2>

<p>

These parasites manipulate hosts by releasing chemicals that affect neurotransmitters such as dopamine, serotonin,

and GABA. Some alter hormone levels, while others target the nervous system directly — like hackers invading code.

</p>

<p>

What’s truly fascinating is how evolution has shaped these strategies —

turning survival into a biochemical mind game that spans millions of years.

</p>

<h2>Final Thoughts</h2>

<p>

From fearless rats and zombie ants to hypnotized snails, parasitic manipulation is a reminder that

nature is both creative and cruel. These microscopic masterminds prove that control and intelligence

can exist even in the smallest, strangest forms of life.

</p>

<p>Written by <strong>Imran</strong> | Zoology Explained 🧬 — Where Science Meets Survival</p>

</div>

</section>

</body>

</html>

Animal world

Parasitic Manipulation: Nature’s Real-Life Mind Control Parasitic Manipulation: Nature’s Real-Life Mind Control W...

+ Read more »

IMRAN ALI Dal

Total Pageviews

Biology Quiz

homeostasis

Biology

Chromosomes and dna

Cell quiz

27 amendment simplified

Animal world

Blog Archive