<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class IX Science Sample Paper Generator</title>
    <link href="img/logo1.jpg" rel="icon">
    <!-- Add jsPDF library -->
    <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>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --primary-dark: #3f37c9;
            --secondary: #4895ef;
            --danger: #f72585;
            --success: #4cc9f0;
            --light: #f8f9fa;
            --dark: #212529;
            --gray: #6c757d;
            --border-radius: 12px;
            --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e2e8f0 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: var(--dark);
            line-height: 1.6;
        }

        .container {
            width: 100%;
            max-width: 900px;
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            overflow: hidden;
            transition: var(--transition);
            animation: fadeIn 0.5s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .header {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
            padding: 30px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .header::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 150px;
            height: 150px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }

        .header h1 {
            font-size: 2rem;
            margin-bottom: 10px;
            font-weight: 700;
            position: relative;
            z-index: 1;
        }

        .header p {
            font-size: 1rem;
            opacity: 0.9;
            position: relative;
            z-index: 1;
        }

        .content-area {
            padding: 30px;
        }

        .hidden {
            display: none !important;
        }

        .btn {
            display: inline-block;
            padding: 12px 28px;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            margin: 10px 5px;
        }

        .btn-primary {
            background: var(--primary);
            color: white;
        }

        .btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(67, 97, 238, 0.3);
        }

        .btn-success {
            background: var(--success);
            color: white;
        }

        .btn-success:hover {
            background: #3ab0d6;
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(76, 201, 240, 0.3);
        }

        .btn-danger {
            background: var(--danger);
            color: white;
        }

        .btn-danger:hover {
            background: #d3166b;
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(247, 37, 133, 0.3);
        }

        .btn-group {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin: 20px 0;
        }

        .section-title {
            text-align: center;
            margin-bottom: 25px;
            color: var(--primary-dark);
            font-size: 1.5rem;
            position: relative;
            padding-bottom: 10px;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: var(--secondary);
            border-radius: 3px;
        }

        .checkbox-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin: 25px 0;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
        }

        .checkbox-item input {
            margin-right: 10px;
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .checkbox-item label {
            cursor: pointer;
            font-size: 0.95rem;
        }

        .generated-paper {
            padding: 30px;
        }

        .paper-header {
            text-align: center;
            margin-bottom: 30px;
            border-bottom: 2px solid var(--primary);
            padding-bottom: 20px;
        }

        .paper-header h2 {
            color: var(--primary-dark);
            margin-bottom: 5px;
            font-size: 1.8rem;
        }

        .paper-header h3 {
            color: var(--gray);
            margin-bottom: 5px;
            font-size: 1.2rem;
            font-weight: 500;
        }

        .paper-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
            font-weight: 500;
        }

        .instructions {
            margin-bottom: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: var(--border-radius);
        }

        .instructions ol {
            padding-left: 20px;
            margin-top: 10px;
        }

        .instructions li {
            margin-bottom: 8px;
        }

        .question-section {
            margin-bottom: 30px;
        }

        .section-heading {
            font-weight: 600;
            color: var(--primary-dark);
            margin-bottom: 15px;
            padding-bottom: 5px;
            border-bottom: 1px solid #eee;
        }

        .question {
            margin-bottom: 20px;
            page-break-inside: avoid;
        }

        .question-text {
            font-weight: 500;
            margin-bottom: 8px;
        }

        .option {
            margin-left: 20px;
            margin-bottom: 5px;
        }

        .action-buttons {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 40px;
        }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 1.6rem;
            }
            
            .content-area {
                padding: 20px;
            }
            
            .checkbox-container {
                grid-template-columns: 1fr;
            }
            
            .btn {
                padding: 10px 20px;
                font-size: 0.9rem;
            }
            
            .paper-header h2 {
                font-size: 1.4rem;
            }
            
            .paper-header h3 {
                font-size: 1rem;
            }
        }

        @media (max-width: 480px) {
            .header {
                padding: 20px 15px;
            }
            
            .section-title {
                font-size: 1.3rem;
            }
            
            .paper-meta {
                flex-direction: column;
                gap: 10px;
            }
            
            .action-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .btn {
                width: 100%;
                max-width: 250px;
            }
        }

        @media print {
            body {
                background: none;
                padding: 0;
            }
            
            .container {
                box-shadow: none;
                max-width: 100%;
            }
            
            .action-buttons {
                display: none;
            }
            
            .question {
                page-break-inside: avoid;
            }
        }
    </style>
    
    <style>
        /* Ensure header styling is preserved */
        .header {
            background: linear-gradient(135deg, #4361ee, #3f37c9) !important;
            color: white !important;
            padding: 30px 20px !important;
            text-align: center !important;
            position: relative !important;
            overflow: hidden !important;
            width: 100% !important;
        }
        
        .header h1, .header h2, .header h3 {
            color: white !important;
            font-weight: bold !important;
        }
        
        .temp-pdf-container {
            font-family: Arial, sans-serif;
            line-height: 1.5;
        }
        
        .temp-pdf-container * {
            max-width: 100% !important;
            background-color: white !important;
            color: black !important;
        }
        
        /* Page break control */
        .question {
            page-break-inside: avoid;
            break-inside: avoid;
        }
        
        .question-section {
            page-break-after: auto;
        }
        
        @media print {
            body {
                margin: 0 !important;
                padding: 0 !important;
                background: white !important;
            }
            .container {
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                box-shadow: none !important;
            }
            .header {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }
        }
         /* Home icon styles */
        .home-icon {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            font-size: 24px;
            cursor: pointer;
            transition: var(--transition);
            z-index: 2;
        }

        .home-icon:hover {
            transform: scale(1.1);
            color: rgba(255, 255, 255, 0.8);
        }
        @media (max-width: 480px) {
            .home-icon {
                font-size: 20px;
                top: 15px;
                left: 15px;
            }
        }

        @media print {
            .home-icon {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="container" id="startContainer">
        <div class="header">
        <!-- Home icon added here -->
            <a href="cbse-class-9-to-12-exam-paper-generator.html" class="home-icon">
                <i class="fas fa-home"></i>
            </a>
            <h1>Class IX Science</h1>
            <p>Generate Customized Sample Papers</p>
        </div>
        
        <div class="content-area">
            <div id="startScreen">
                <h2 class="section-title">Science Paper Generator</h2>
                <div class="btn-group">
                    <button class="btn btn-primary" onclick="showChapterSelection()">Start Generating</button>
                </div>
            </div>

            <div id="chapterSelection" class="hidden">
                <h2 class="section-title">Select Chapters for Science</h2>
                <form id="chapterForm">
                    <div class="checkbox-container">
                        <div class="checkbox-item">
                            <input type="checkbox" id="fullPaper" name="chapter" value="Full Paper" onchange="toggleChapters()">
                            <label for="fullPaper">Full Paper (All Chapters)</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter1" name="chapter" value="Chapter 1">
                            <label for="chapter1">1. Matter in Our Surroundings</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter2" name="chapter" value="Chapter 2">
                            <label for="chapter2">2. Is Matter Around Us Pure</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter3" name="chapter" value="Chapter 3">
                            <label for="chapter3">3. Atoms And Molecules</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter4" name="chapter" value="Chapter 4">
                            <label for="chapter4">4. Structure of the Atom</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter5" name="chapter" value="Chapter 5">
                            <label for="chapter5">5. The Fundamental Unit of Life</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter6" name="chapter" value="Chapter 6">
                            <label for="chapter6">6. Tissues</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter7" name="chapter" value="Chapter 7">
                            <label for="chapter7">7. Diversity in Living Organisms</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter8" name="chapter" value="Chapter 8">
                            <label for="chapter8">8. Motion</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter9" name="chapter" value="Chapter 9">
                            <label for="chapter9">9. Force and laws of Motion</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter10" name="chapter" value="Chapter 10">
                            <label for="chapter10">10. Gravitation</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter11" name="chapter" value="Chapter 11">
                            <label for="chapter11">11. Work and Energy</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter12" name="chapter" value="Chapter 12">
                            <label for="chapter12">12. Sound</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter13" name="chapter" value="Chapter 13">
                            <label for="chapter13">13. Why Do We Fall ILL</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter14" name="chapter" value="Chapter 14">
                            <label for="chapter14">14. Natural Resources</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter15" name="chapter" value="Chapter 15">
                            <label for="chapter15">15. Improvement in Food Resources</label>
                        </div>
                    </div>
                </form>
                <div id="message" class="hidden"></div>
                <div class="btn-group">
                    <button class="btn btn-danger" onclick="backToStart()">Back to Start</button>
                    <button class="btn btn-success" onclick="promptSchoolName()">Generate Paper</button>
                </div>
            </div>
        </div>
    </div>

    <div class="container hidden" id="generatedPaperContainer"></div>

    <script>
        // Initialize jsPDF
        const { jsPDF } = window.jspdf;
        
        let schoolName = '';
        let questionCounter = 1;
        let sessionYear = '';

        const questions = {
            science: {
                "Chapter 1": {
                    mcq: [ 
                        { question: "What is 2 + 2?", options: ["3", "4", "5", "6"], answer: "4" },
                        { question: "What is 2 + 2?", options: ["3", "4", "5", "6"], answer: "4" },
                        { question: "What is 2 + 2?", options: ["3", "4", "5", "6"], answer: "4" },
                        { question: "What is 2 + 2?", options: ["3", "4", "5", "6"], answer: "4" },
                        { question: "What is 2qw + 2?", options: ["3", "4", "5", "6"], answer: "4" }
                    ],
                    assertion: [ 
                        { statement1: "All natural numbers are positive.", statement2: "Zero is a natural number.", options: ["Both true", "Both false", "Only statement 1 is true", "Only statement 2 is true"], answer: "Both true" },
                        { statement1: "All natural numbers are positive.", statement2: "Zero is a natural number.", options: ["Both true", "Both false", "Only statement 1 is true", "Only statement 2 is true"], answer: "Both true" }
                    ],
                    twoMark: [ 
                        "Define a natural number.",
                        "Define a natural number.",
                        "Define a natural number.",
                        "Define a natural number."
                    ],
                    threeMark: [ 
                        "Explain the properties of natural numbers.",
                        "Explain the properties of natural numbers.",
                        "Explain the properties of natural numbers."
                    ],
                    fiveMark: [ 
                        "Discuss the significance of natural numbers in real life."
                    ],
                    caseStudy: [ 
                        { case: "Case Study on natural numbers", questions: ["What is the smallest natural number?", "Is zero a natural number?"] }
                    ]
                },
                "Chapter 2": {
                    mcq: [ 
                        { question: "What is 2 + 2?", options: ["3", "4", "5", "6"], answer: "4" },
                        { question: "What is 2 + 2?", options: ["3", "4", "5", "6"], answer: "4" },
                        { question: "What is 2 + 2?", options: ["3", "4", "5", "6"], answer: "4" },
                        { question: "What is 2 + 2?", options: ["3", "4", "5", "6"], answer: "4" },
                        { question: "What is 2qw + 2?", options: ["3", "4", "5", "6"], answer: "4" }
                    ],
                    assertion: [ 
                        { statement1: "All natural numbers are positive.", statement2: "Zero is a natural number.", options: ["Both true", "Both false", "Only statement 1 is true", "Only statement 2 is true"], answer: "Both true" },
                        { statement1: "All natural numbers are positive.", statement2: "Zero is a natural number.", options: ["Both true", "Both false", "Only statement 1 is true", "Only statement 2 is true"], answer: "Both true" }
                    ],
                    twoMark: [ 
                        "Define a natural number.",
                        "Define a natural number.",
                        "Define a natural number.",
                        "Define a natural number."
                    ],
                    threeMark: [ 
                        "Explain the properties of natural numbers.",
                        "Explain the properties of natural numbers.",
                        "Explain the properties of natural numbers."
                    ],
                    fiveMark: [ 
                        "Discuss the significance of natural numbers in real life."
                    ],
                    caseStudy: [ 
                        { case: "Case Study on natural numbers", questions: ["What is the smallest natural number?", "Is zero a natural number?"] }
                    ]
                },
                "Chapter 3": {
                    mcq: [ 
                        { question: "What is 2 + 2?", options: ["3", "4", "5", "6"], answer: "4" },
                        { question: "What is 2 + 2?", options: ["3", "4", "5", "6"], answer: "4" },
                        { question: "What is 2 + 2?", options: ["3", "4", "5", "6"], answer: "4" },
                        { question: "What is 2 + 2?", options: ["3", "4", "5", "6"], answer: "4" },
                        { question: "What is 2qw + 2?", options: ["3", "4", "5", "6"], answer: "4" }
                    ],
                    assertion: [ 
                        { statement1: "All natural numbers are positive.", statement2: "Zero is a natural number.", options: ["Both true", "Both false", "Only statement 1 is true", "Only statement 2 is true"], answer: "Both true" },
                        { statement1: "All natural numbers are positive.", statement2: "Zero is a natural number.", options: ["Both true", "Both false", "Only statement 1 is true", "Only statement 2 is true"], answer: "Both true" }
                    ],
                    twoMark: [ 
                        "Define a natural number.",
                        "Define a natural number.",
                        "Define a natural number.",
                        "Define a natural number."
                    ],
                    threeMark: [ 
                        "Explain the properties of natural numbers.",
                        "Explain the properties of natural numbers.",
                        "Explain the properties of natural numbers."
                    ],
                    fiveMark: [ 
                        "Discuss the significance of natural numbers in real life."
                    ],
                    caseStudy: [ 
                        { case: "Case Study on natural numbers", questions: ["What is the smallest natural number?", "Is zero a natural number?"] }
                    ]
                },
                "Chapter 4": {
                    mcq: [ 
                        { question: "What is ch2 2 + 2?", options: ["3", "4", "5", "6"], answer: "4" },
                        { question: "What is 2 + 2?ch2", options: ["3", "4", "5", "6"], answer: "4" },
                        { question: "What is 2 + 2?ch2", options: ["3", "4", "5", "6"], answer: "4" },
                        { question: "What is 2 + 2?ch2", options: ["3", "4", "5", "6"], answer: "4" },
                        { question: "What is 2qw + 2?ch2", options: ["3", "4", "5", "6"], answer: "4" }
                    ],
                    assertion: [ 
                        { statement1: "All natural numbers are positive.ch2", statement2: "Zero is a natural number.", options: ["Both true", "Both false", "Only statement 1 is true", "Only statement 2 is true"], answer: "Both true" },
                        { statement1: "All natural numbers are positive.ch2", statement2: "Zero is a natural number.", options: ["Both true", "Both false", "Only statement 1 is true", "Only statement 2 is true"], answer: "Both true" }
                    ],
                    twoMark: [ 
                        "Define a natural number.ch2",
                        "Define a natural number.",
                        "Define a natural number.",
                        "Define a natural number."
                    ],
                    threeMark: [ 
                        "Explain the properties of natural numbers.ch2"
                    ],
                    fiveMark: [ 
                        "Discuss the significance of natural numbers in real life.ch2"
                    ],
                    caseStudy: [ 
                        { case: "Case Study on natural numbersch2", questions: ["What is the smallest natural number?", "Is zero a natural number?"] }
                    ]
                }
            }
        };

        function getRandomQuestions(selectedChapters, type, count) {
            let allQuestions = [];

            if (selectedChapters.includes("Full Paper")) {
                for (let chapter in questions.science) {
                    if (questions.science[chapter][type]) {
                        allQuestions = allQuestions.concat(questions.science[chapter][type]);
                    }
                }
            } else {
                selectedChapters.forEach(chapter => {
                    if (questions.science[chapter] && questions.science[chapter][type]) {
                        allQuestions = allQuestions.concat(questions.science[chapter][type]);
                    }
                });
            }

            allQuestions = allQuestions.sort(() => Math.random() - 0.5);
            return allQuestions.slice(0, count);
        }

        function showChapterSelection() {
            document.getElementById('startScreen').classList.add('hidden');
            document.getElementById('chapterSelection').classList.remove('hidden');
        }

        function toggleChapters() {
            const fullPaperCheckbox = document.getElementById('fullPaper');
            const checkboxes = document.querySelectorAll('input[name="chapter"]:not(#fullPaper)');
            checkboxes.forEach(cb => cb.disabled = fullPaperCheckbox.checked);
        }

        function backToStart() {
            document.getElementById('generatedPaperContainer').classList.add('hidden');
            document.getElementById('startContainer').classList.remove('hidden');
            document.getElementById('chapterSelection').classList.add('hidden');
            document.getElementById('startScreen').classList.remove('hidden');
            questionCounter = 1;
        }

        function promptSchoolName() {
            schoolName = prompt("Write your school/institute name").toUpperCase();
            if (!schoolName) {
                alert("School/Institute name is required!");
            } else {
                promptSession();
            }
        }

        function promptSession() {
            sessionYear = prompt("Enter the academic session (e.g., 2023-24)").toUpperCase();
            if (!sessionYear) {
                alert("Academic session is required!");
            } else {
                generatePaper();
            }
        }

        function generatePaper() {
            document.getElementById('startContainer').classList.add('hidden');
            const generatedPaperContainer = document.getElementById('generatedPaperContainer');
            generatedPaperContainer.classList.remove('hidden');
            generatedPaperContainer.innerHTML = '';
            
            let paperContent = `
                <div class="header">
                    <h2>${schoolName}</h2>
                </div>
                <div class="content-area">
                    <div class="paper-header">
                        <h3>SCIENCE-086</h3>
                        <h3>CLASS - IX</h3>
                        <h3>Session: ${sessionYear}</h3>
                    </div>
                    <div class="paper-meta">
                        <div>Max. Marks: 80</div>
                        <div>Time Allowed: 3 hours</div>
                    </div>
                    <div class="instructions">
                        <p><strong>General Instructions:</strong></p>
                        <p>Read the following instructions carefully and follow them:</p>
                        <ol>
                            <li>All questions would be compulsory. However, an internal choice of approximately 33% would be provided. 50% marks are to be allotted to competency-based questions.</li>
                            <li>Section A would have 16 simple/complex MCQs and 04 Assertion-Reasoning type questions carrying 1 mark each.</li>
                            <li>Section B would have 6 Short Answer (SA) type questions carrying 02 marks each.</li>
                            <li>Section C would have 7 Short Answer (SA) type questions carrying 03 marks each.</li>
                            <li>Section D would have 3 Long Answer (LA) type questions carrying 05 marks each.</li>
                            <li>Section E would have 3 source based/case based/passage based/integrated units of assessment (04 marks each) with sub-parts of the values of 1/2/3 marks.</li>
                        </ol>
                    </div>
            `;

            const selectedChapters = document.getElementById('fullPaper').checked 
                ? ["Full Paper"] 
                : Array.from(document.querySelectorAll('input[name="chapter"]:checked')).map(cb => cb.value);

            // Section A - MCQs
            const mcqs = getRandomQuestions(selectedChapters, 'mcq', 16);
            paperContent += `
                <div class="question-section">
                    <h4 class="section-heading">Section A - Multiple Choice Questions (1 mark each)</h4>
                    <p>Question 1 to 16 are multiple choice questions. Only one of the choices is correct. Select and write the correct choice as well as the answer to these questions.</p>
            `;
            mcqs.forEach((q, i) => {
                paperContent += `
                    <div class="question">
                        <p class="question-text">${questionCounter++}. ${q.question}</p>
                        ${q.options.map((opt, j) => 
                            `<p class="option">${String.fromCharCode(65 + j)}. ${opt}</p>`
                        ).join('')}
                    </div>
                `;
            });

            // Section A - Assertion Reasoning
            const assertions = getRandomQuestions(selectedChapters, 'assertion', 4);
            paperContent += `
                    <h4 class="section-heading" style="margin-top: 30px;">Section A - Assertion Reasoning Questions (1 mark each)</h4>
                    <p>Question No. 17 to 20 consist of two statements – Assertion (A) and Reason (R). Answer these questions by selecting the appropriate option given below:</p>
            `;
            assertions.forEach((q, i) => {
                paperContent += `
                    <div class="question">
                        <p class="question-text">${questionCounter++}. Assertion: ${q.statement1}</p>
                        <p class="option">Reason: ${q.statement2}</p>
                        ${q.options.map((opt, j) => 
                            `<p class="option">${String.fromCharCode(65 + j)}. ${opt}</p>`
                        ).join('')}
                    </div>
                `;
            });

            // Section B - 2 marks
            const twoMarks = getRandomQuestions(selectedChapters, 'twoMark', 6);
            paperContent += `
                </div>
                <div class="question-section">
                    <h4 class="section-heading">Section B - Very Short Answer Questions (2 marks each)</h4>
                    <p>Question No. 21 to 26 are very short answer questions</p>
            `;
            twoMarks.forEach(q => {
                paperContent += `
                    <div class="question">
                        <p class="question-text">${questionCounter++}. ${q}</p>
                    </div>
                `;
            });

            // Section C - 3 marks
            const threeMarks = getRandomQuestions(selectedChapters, 'threeMark', 7);
            paperContent += `
                </div>
                <div class="question-section">
                    <h4 class="section-heading">Section C - Short Answer Questions (3 marks each)</h4>
                    <p>Question No. 27 to 33 are short answer questions</p>
            `;
            threeMarks.forEach(q => {
                paperContent += `
                    <div class="question">
                        <p class="question-text">${questionCounter++}. ${q}</p>
                    </div>
                `;
            });

            // Section D - 5 marks
            const fiveMarks = getRandomQuestions(selectedChapters, 'fiveMark', 3);
            paperContent += `
                </div>
                <div class="question-section">
                    <h4 class="section-heading">Section D - Long Answer Questions (5 marks each)</h4>
                    <p>Question No. 34 to 36 are long answer questions</p>
            `;
            fiveMarks.forEach(q => {
                paperContent += `
                    <div class="question">
                        <p class="question-text">${questionCounter++}. ${q}</p>
                    </div>
                `;
            });

            // Section E - Case Studies
            const caseStudies = getRandomQuestions(selectedChapters, 'caseStudy', 3);
            paperContent += `
                </div>
                <div class="question-section">
                    <h4 class="section-heading">Section E - Case Study Based Questions (4 marks each)</h4>
                    <p>Question No. 37 to 39 are case-based/data-based questions.</p>
            `;
            caseStudies.forEach(cs => {
                paperContent += `
                    <div class="question">
                        <p class="question-text">${questionCounter++}. ${cs.case}</p>
                        ${cs.questions.map((subQ, j) => 
                            `<p class="option">${j + 1}. ${subQ}</p>`
                        ).join('')}
                    </div>
                `;
            });

            // Add buttons below the generated paper
            paperContent += `
                    </div>
                    <div class="action-buttons">
                        <button class="btn btn-primary" onclick="downloadPDF()">Download as PDF</button>
                        <button class="btn btn-success" onclick="window.print()">Print</button>
                        <button class="btn btn-danger" onclick="backToStart()">Back to Start</button>
                    </div>
                </div>
            `;

            generatedPaperContainer.innerHTML = paperContent;
        }

        async function downloadPDF() {
            const element = document.getElementById('generatedPaperContainer');
            
            // Create a temporary div with optimized settings
            const tempDiv = document.createElement('div');
            tempDiv.style.position = 'absolute';
            tempDiv.style.left = '-9999px';
            tempDiv.style.width = '794px'; // A4 width in pixels (210mm)
            tempDiv.style.backgroundColor = 'white';
            tempDiv.style.padding = '20px';
            tempDiv.innerHTML = element.innerHTML;
            document.body.appendChild(tempDiv);

            try {
                const pdf = new jsPDF('p', 'mm', 'a4');
                const pageWidth = pdf.internal.pageSize.getWidth() - 25.4; // 0.5" margins
                const pageHeight = pdf.internal.pageSize.getHeight() - 25.4;
                
                // Split content into pages
                let position = 12.7; // Start with 0.5" top margin
                let remainingHeight = tempDiv.scrollHeight;
                let pageNum = 1;
                
                while (remainingHeight > 0) {
                    // Capture the current page section
                    const canvas = await html2canvas(tempDiv, {
                        scale: 2,
                        windowHeight: pageHeight * 3.78, // mm to px
                        windowWidth: pageWidth * 3.78,
                        y: position * 3.78, // mm to px
                        height: pageHeight * 3.78,
                        useCORS: true,
                        backgroundColor: '#ffffff',
                        logging: false
                    });

                    const imgData = canvas.toDataURL('image/jpeg', 0.92);
                    
                    // Add page to PDF
                    if (pageNum > 1) {
                        pdf.addPage('a4', 'portrait');
                    }
                    
                    pdf.addImage(imgData, 'JPEG', 12.7, 12.7, pageWidth, canvas.height * pageWidth / canvas.width);
                    
                    position += pageHeight;
                    remainingHeight -= pageHeight * 3.78; // px
                    pageNum++;
                }

                document.body.removeChild(tempDiv);
                pdf.save(`${schoolName}_Science_Paper.pdf`);
                
            } catch (error) {
                console.error('PDF generation error:', error);
                alert('Error generating PDF. Please try again.');
                document.body.removeChild(tempDiv);
            }
        }
    </script>
</body>
</html>