<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class IX Social 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 Social Science</h1>
            <p>Generate Customized Sample Papers</p>
        </div>
        
        <div class="content-area">
            <div id="startScreen">
                <h2 class="section-title">Social 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 Social 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. The French Revolution</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter2" name="chapter" value="Chapter 2">
                            <label for="chapter2">2. Socialism in Europe and the Russian Revolution</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter3" name="chapter" value="Chapter 3">
                            <label for="chapter3">3. Nazism and the Rise of Hitler</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter4" name="chapter" value="Chapter 4">
                            <label for="chapter4">4. Forest, Society and Colonialism</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter5" name="chapter" value="Chapter 5">
                            <label for="chapter5">5. Pastoralists in the Modern World</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter6" name="chapter" value="Chapter 6">
                            <label for="chapter6">6. India - Size and Location</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter7" name="chapter" value="Chapter 7">
                            <label for="chapter7">7. Physical Features of India</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter8" name="chapter" value="Chapter 8">
                            <label for="chapter8">8. Drainage</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter9" name="chapter" value="Chapter 9">
                            <label for="chapter9">9. Climate</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter10" name="chapter" value="Chapter 10">
                            <label for="chapter10">10. Natural Vegetation and Wildlife</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter11" name="chapter" value="Chapter 11">
                            <label for="chapter11">11. Population</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter12" name="chapter" value="Chapter 12">
                            <label for="chapter12">12. What is Democracy? Why Democracy?</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter13" name="chapter" value="Chapter 13">
                            <label for="chapter13">13. Constitutional Design</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter14" name="chapter" value="Chapter 14">
                            <label for="chapter14">14. Electoral Politics</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter15" name="chapter" value="Chapter 15">
                            <label for="chapter15">15. Working of Institutions</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter16" name="chapter" value="Chapter 16">
                            <label for="chapter16">16. Democratic Rights</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter17" name="chapter" value="Chapter 17">
                            <label for="chapter17">17. The Story of Village Palampur</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter18" name="chapter" value="Chapter 18">
                            <label for="chapter18">18. People as Resource</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter19" name="chapter" value="Chapter 19">
                            <label for="chapter19">19. Poverty as a Challenge</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chapter20" name="chapter" value="Chapter 20">
                            <label for="chapter20">20. Food Security in India</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 = {
            socialScience: {
                "Chapter 1": {
                    mcq: [ 
                        { question: "What was the main cause of the French Revolution?", options: ["Economic crisis", "Religious conflict", "Foreign invasion", "Natural disaster"], answer: "Economic crisis" },
                        { question: "When did the French Revolution begin?", options: ["1776", "1789", "1799", "1812"], answer: "1789" }
                    ],
                    twoMark: [ 
                        "Name two philosophers who inspired the French Revolution.",
                        "What was the Tennis Court Oath?"
                    ],
                    threeMark: [ 
                        "Explain the significance of the storming of the Bastille.",
                        "Describe the role of women in the French Revolution."
                    ],
                    fiveMark: [ 
                        "Discuss the impact of the French Revolution on Europe.",
                        "Analyze the causes and consequences of the French Revolution."
                    ],
                    caseStudy: [ 
                        { case: "Case Study on the Reign of Terror", questions: ["What was the Reign of Terror?", "Who was Maximilien Robespierre?"] }
                    ],
                    map: [ 
                        { map: "Map of France during the Revolution", questions: ["Identify Paris on the map.", "Locate the region where the Bastille was situated."] }
                    ]
                },
                "Chapter 2": {
                    mcq: [ 
                        { question: "Who led the Bolshevik Revolution?", options: ["Vladimir Lenin", "Joseph Stalin", "Leon Trotsky", "Karl Marx"], answer: "Vladimir Lenin" },
                        { question: "When did the Russian Revolution occur?", options: ["1905", "1917", "1922", "1939"], answer: "1917" }
                    ],
                    twoMark: [ 
                        "What were the main ideas of socialism?",
                        "Name two socialist thinkers."
                    ],
                    threeMark: [ 
                        "Explain the causes of the Russian Revolution.",
                        "Describe the events of Bloody Sunday."
                    ],
                    fiveMark: [ 
                        "Compare and contrast the February and October Revolutions.",
                        "Discuss the impact of the Russian Revolution on world politics."
                    ],
                    caseStudy: [ 
                        { case: "Case Study on the New Economic Policy", questions: ["What was the NEP?", "Why was it introduced?"] }
                    ],
                    map: [ 
                        { map: "Map of Russia in 1917", questions: ["Identify Petrograd on the map.", "Locate the Winter Palace."] }
                    ]
                },
                "Chapter 3": {
                    mcq: [ 
                        { question: "When did Hitler become Chancellor of Germany?", options: ["1923", "1929", "1933", "1939"], answer: "1933" },
                        { question: "What was the name of Hitler's autobiography?", options: ["Mein Kampf", "Mein Leben", "Mein Reich", "Mein Deutschland"], answer: "Mein Kampf" }
                    ],
                    twoMark: [ 
                        "What was the Enabling Act?",
                        "Name two features of Nazi ideology."
                    ],
                    threeMark: [ 
                        "Explain the Nazi propaganda methods.",
                        "Describe the Nazi policy towards Jews."
                    ],
                    fiveMark: [ 
                        "Analyze the reasons for Hitler's rise to power.",
                        "Discuss the impact of Nazi rule on Germany."
                    ],
                    caseStudy: [ 
                        { case: "Case Study on the Holocaust", questions: ["What was the Holocaust?", "How many Jews were killed?"] }
                    ],
                    map: [ 
                        { map: "Map of Nazi Germany", questions: ["Identify Berlin on the map.", "Locate the concentration camp at Auschwitz."] }
                    ]
                },
                "Chapter 4": {
                    mcq: [ 
                        { question: "What was the main forest policy of the British in India?", options: ["Scientific forestry", "Community forestry", "Agroforestry", "Urban forestry"], answer: "Scientific forestry" },
                        { question: "Which act restricted tribal movements in forests?", options: ["Forest Act 1865", "Forest Act 1878", "Forest Act 1927", "Wildlife Act 1972"], answer: "Forest Act 1878" }
                    ],
                    twoMark: [ 
                        "Name two tribal revolts against forest laws.",
                        "What was shifting cultivation?"
                    ],
                    threeMark: [ 
                        "Explain the impact of colonial forest policies on tribal life.",
                        "Describe the relationship between forests and industries."
                    ],
                    fiveMark: [ 
                        "Discuss how colonial control over forests affected the environment.",
                        "Analyze the resistance movements against colonial forest policies."
                    ],
                    caseStudy: [ 
                        { case: "Case Study on the Bastar Rebellion", questions: ["Where did the Bastar Rebellion occur?", "What were its main causes?"] }
                    ],
                    map: [ 
                        { map: "Map of Indian forest regions", questions: ["Identify Bastar on the map.", "Locate the Sundarbans forest."] }
                    ]
                }
            }
        };

        function getRandomQuestions(selectedChapters, type, count) {
            let allQuestions = [];

            if (selectedChapters.includes("Full Paper")) {
                for (let chapter in questions.socialScience) {
                    if (questions.socialScience[chapter][type]) {
                        allQuestions = allQuestions.concat(questions.socialScience[chapter][type]);
                    }
                }
            } else {
                selectedChapters.forEach(chapter => {
                    if (questions.socialScience[chapter] && questions.socialScience[chapter][type]) {
                        allQuestions = allQuestions.concat(questions.socialScience[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>SOCIAL SCIENCE-087</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>The question paper comprises Six Sections – A, B, C, D, E and F. There are 37 questions in the Question paper. All questions are compulsory.</li>
                            <li>Section A – From questions 1 to 20 are MCQs of 1 mark each.</li>
                            <li>Section B – Question no. 21 to 24 are Very Short Answer Type Questions, carrying 2 marks each. Answer to each question should not exceed 40 words.</li>
                            <li>Section C contains Q.25 to Q.29 are Short Answer Type Questions, carrying 3 marks each. Answer to each question should not exceed 60 words.</li>
                            <li>Section D – Question no. 30 to 33 are long answer type questions, carrying 5 marks each. Answer to each question should not exceed 120 words.</li>
                            <li>Section E - Questions no from 34 to 36 are case based questions with three sub questions and are of 4 marks each. Answer to each question should not exceed 100 words.</li>
                            <li>Section F – Question no. 37 is map based, carrying 5 marks with two parts, 37a from History (2 marks) and 37b from Geography (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 (20 questions)
            const mcqs = getRandomQuestions(selectedChapters, 'mcq', 20);
            paperContent += `
                <div class="question-section">
                    <h4 class="section-heading">Section A - Multiple Choice Questions (1 mark each)</h4>
                    <p>Question 1 to 20 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 B - Very Short Answer (4 questions)
            const twoMarks = getRandomQuestions(selectedChapters, 'twoMark', 4);
            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 24 are very short answer questions. Answer to each question should not exceed 40 words.</p>
            `;
            twoMarks.forEach(q => {
                paperContent += `
                    <div class="question">
                        <p class="question-text">${questionCounter++}. ${q}</p>
                    </div>
                `;
            });

            // Section C - Short Answer (5 questions)
            const threeMarks = getRandomQuestions(selectedChapters, 'threeMark', 5);
            paperContent += `
                </div>
                <div class="question-section">
                    <h4 class="section-heading">Section C - Short Answer Questions (3 marks each)</h4>
                    <p>Question No. 25 to 29 are short answer questions. Answer to each question should not exceed 60 words.</p>
            `;
            threeMarks.forEach(q => {
                paperContent += `
                    <div class="question">
                        <p class="question-text">${questionCounter++}. ${q}</p>
                    </div>
                `;
            });

            // Section D - Long Answer (4 questions)
            const fiveMarks = getRandomQuestions(selectedChapters, 'fiveMark', 4);
            paperContent += `
                </div>
                <div class="question-section">
                    <h4 class="section-heading">Section D - Long Answer Questions (5 marks each)</h4>
                    <p>Question No. 30 to 33 are long answer questions. Answer to each question should not exceed 120 words.</p>
            `;
            fiveMarks.forEach(q => {
                paperContent += `
                    <div class="question">
                        <p class="question-text">${questionCounter++}. ${q}</p>
                    </div>
                `;
            });

            // Section E - Case Studies (3 questions)
            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. 34 to 36 are case-based questions with three sub questions each. Answer to each question should not exceed 100 words.</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>
                `;
            });

            // Section F - Map Skill (1 question)
            const mapQuestions = getRandomQuestions(selectedChapters, 'map', 1);
            paperContent += `
                </div>
                <div class="question-section">
                    <h4 class="section-heading">Section F - Map Skill Based Question (5 marks)</h4>
                    <p>Question No. 37 is map based, carrying 5 marks with two parts, 37a from History (2 marks) and 37b from Geography (3 marks).</p>
            `;
            mapQuestions.forEach(mapQ => {
                paperContent += `
                    <div class="question">
                        <p class="question-text">${questionCounter++}. ${mapQ.map}</p>
                        ${mapQ.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}_Social_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>