<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UP TET Paper-II (बाल विकास एवं शिक्षाशास्त्र) दैनिक अभ्यास जनरेटर</title>
    <link href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='50' font-size='50' text-anchor='middle' dy='.3em' fill='%234361ee'%3E📚%3C/text%3E%3C/svg%3E" rel="icon">
    <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: #2b5c8f;
            --primary-dark: #1e3e62;
            --secondary: #4a9eff;
            --danger: #e63946;
            --success: #2a9d8f;
            --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, #f0f4f8 0%, #d9e2ec 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: 950px; 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: 1.8rem; 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); }
        .btn-success { background: var(--success); color: white; }
        .btn-success:hover { background: #21867a; transform: translateY(-2px); }
        .btn-danger { background: var(--danger); color: white; }
        .btn-danger:hover { background: #c1121f; transform: translateY(-2px); }
        .btn-level { background: var(--light); color: var(--dark); border: 2px solid var(--gray); font-size: 1.2rem; padding: 15px 30px; width: 200px; }
        .btn-level:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }
        .btn-level.selected { background: var(--primary); color: white; border-color: var(--primary); }
        .btn-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0; }
        .level-buttons { display: flex; justify-content: center; gap: 20px; margin: 30px 0; flex-wrap: wrap; }
        .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(320px, 1fr)); gap: 15px; margin: 25px 0; max-height: 450px; overflow-y: auto; padding: 10px; border: 1px solid #eee; border-radius: 12px; background: #fff; }
        .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.9rem; font-weight: 500; }
        .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; }
        .answer-sheet { margin-top: 40px; padding: 20px; background: #f8f9fa; border-radius: var(--border-radius); }
        .answer-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
        .answer-table th, .answer-table td { border: 1px solid #ddd; padding: 8px; text-align: center; }
        .answer-table th { background-color: var(--primary); color: white; }
        .streak-container { display: flex; justify-content: center; align-items: center; margin: 20px 0; gap: 15px; flex-wrap: wrap; }
        .streak-counter { background: var(--success); color: white; padding: 10px 20px; border-radius: 50px; font-weight: bold; }
        .date-display { font-size: 1.1rem; font-weight: 600; color: var(--primary-dark); }
        .progress-container { margin: 20px 0; background: #f8f9fa; padding: 20px; border-radius: var(--border-radius); }
        .progress-bar { height: 10px; background: #e9ecef; border-radius: 5px; overflow: hidden; margin-top: 10px; }
        .progress-fill { height: 100%; background: var(--success); border-radius: 5px; transition: width 0.5s ease; }
        .problem-of-day { background: linear-gradient(135deg, #fff5f5, #fff0f6); border-left: 4px solid var(--danger); padding: 20px; margin: 20px 0; border-radius: var(--border-radius); }
        .daily-summary { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px; margin: 20px 0; }
        .summary-card { flex: 1; min-width: 120px; background: white; padding: 15px; border-radius: var(--border-radius); box-shadow: 0 4px 10px rgba(0,0,0,0.05); text-align: center; }
        .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); }
        .instructions { margin-bottom: 30px; padding: 20px; background: #eef2fa; border-radius: var(--border-radius); }
        .instructions ol { padding-left: 20px; margin-top: 10px; }
        @media (max-width: 768px) { .header h1 { font-size: 1.4rem; } .btn-level { width: 160px; font-size: 1rem; } .checkbox-container { grid-template-columns: 1fr; } }
        @media print { .action-buttons, .streak-container, .progress-container, .problem-of-day, .daily-summary, .home-icon { display: none; } }
        .text-center { text-align: center; }
    </style>
    
     <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4930137336556867"
     crossorigin="anonymous"></script>

<!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-KMZ9RJ62EY"></script>
     <script>
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

         gtag('config', 'G-KMZ9RJ62EY');
       </script>
</head>
<body>
<div class="container" id="startContainer">
    <div class="header">
        <a href="up-tet-exam-paper2-daily-practice-problem-generator.html" class="home-icon" ><i class="fas fa-home"></i></a>
        <h1>UP TET (Paper-II) बाल विकास एवं शिक्षाशास्त्र</h1>
        <p>दैनिक अभ्यास समस्या जनरेटर (हिंदी/संस्कृत माध्यम)</p>
    </div>
    <div class="content-area">
        <div id="startScreen">
            <h2 class="section-title">बाल विकास, शिक्षण विधियाँ एवं समावेशी शिक्षा</h2>
            <div class="streak-container">
                <div class="streak-counter"><i class="fas fa-fire"></i> लगातार: <span id="streakDays">0</span> दिन</div>
                <div class="date-display" id="currentDate"></div>
            </div>
            <div class="progress-container">
                <h3>आपकी प्रगति</h3>
                <div class="progress-bar"><div class="progress-fill" id="progressFill" style="width: 0%"></div></div>
                <p id="progressText">0% पूर्ण</p>
            </div>
            <div class="btn-group">
                <button class="btn btn-primary" id="problemOfDayBtn">दिन की विशेष समस्या</button>
                <button class="btn btn-success" id="customPracticeBtn">विषयवार कस्टम अभ्यास</button>
            </div>
        </div>
        <div id="subjectSelection" class="hidden">
            <h2 class="section-title">पेपर-II: बाल विकास एवं शिक्षाशास्त्र</h2>
            <div class="btn-group"><button class="btn btn-primary" id="selectPedagogyBtn">बाल विकास, अधिगम सिद्धान्त, शिक्षण विधियाँ एवं समावेशी शिक्षा</button></div>
        </div>
        <div id="topicSelection" class="hidden">
            <h2 class="section-title">अध्यायों का चयन करें (नवीनतम UP TET पाठ्यक्रम)</h2>
            <form id="topicForm">
                <div class="checkbox-container" id="topicsContainer"></div>
            </form>
            <div class="btn-group">
                <button class="btn btn-danger" id="backToStartBtn">प्रारंभ पृष्ठ</button>
                <button class="btn btn-success" id="generateAssignmentBtn">अभ्यास सेट जनरेट करें</button>
            </div>
        </div>
        <div id="levelSelection" class="hidden">
            <h2 class="section-title">कठिनाई स्तर चुनें (UP TET परीक्षा स्तर)</h2>
            <p class="text-center">अपनी तैयारी अनुसार स्तर चुनें:</p>
            <div class="level-buttons">
                <button class="btn btn-level" id="level1Btn">स्तर 1<br><small>आधारभूत अवधारणाएँ</small></button>
                <button class="btn btn-level" id="level2Btn">स्तर 2<br><small>मध्यम (शिक्षक पात्रता परीक्षा स्तर)</small></button>
                <button class="btn btn-level" id="level3Btn">स्तर 3<br><small>उन्नत (समालोचनात्मक चिंतन)</small></button>
            </div>
            <div class="btn-group">
                <button class="btn btn-danger" id="backToTopicsBtn">विषय चयन पर वापस</button>
                <button class="btn btn-success" id="generateFinalBtn">प्रश्न जेनरेट करें</button>
            </div>
        </div>
    </div>
</div>
<div class="container hidden" id="generatedPaperContainer"></div>

<script>
    const { jsPDF } = window.jspdf;
    const startContainer = document.getElementById('startContainer');
    const startScreen = document.getElementById('startScreen');
    const subjectSelection = document.getElementById('subjectSelection');
    const topicSelection = document.getElementById('topicSelection');
    const levelSelection = document.getElementById('levelSelection');
    const generatedPaperContainer = document.getElementById('generatedPaperContainer');
    
    const problemOfDayBtn = document.getElementById('problemOfDayBtn');
    const customPracticeBtn = document.getElementById('customPracticeBtn');
    const selectPedagogyBtn = document.getElementById('selectPedagogyBtn');
    const backToStartBtn = document.getElementById('backToStartBtn');
    const generateAssignmentBtn = document.getElementById('generateAssignmentBtn');
    const backToTopicsBtn = document.getElementById('backToTopicsBtn');
    const generateFinalBtn = document.getElementById('generateFinalBtn');
    const level1Btn = document.getElementById('level1Btn');
    const level2Btn = document.getElementById('level2Btn');
    const level3Btn = document.getElementById('level3Btn');
    const homeIcon = document.getElementById('homeIcon');
    
    const streakDays = document.getElementById('streakDays');
    const currentDate = document.getElementById('currentDate');
    const progressFill = document.getElementById('progressFill');
    const progressText = document.getElementById('progressText');
    
    // ======================== बाल विकास एवं शिक्षाशास्त्र - अध्यायवार प्रश्न डेटाबेस (समृद्ध) ========================
    const questions = {
        // 1. बाल विकास एवं शिक्षण विधियाँ (उपखंड)
        "बाल विकास का अर्थ, आवश्यकता एवं क्षेत्र": {
            level1: [{ question: "बाल विकास का तात्पर्य है:", options: ["बालक का शारीरिक परिवर्तन", "बालक में गुणात्मक एवं परिमाणात्मक परिवर्तन", "केवल मानसिक विकास", "केवल सामाजिक विकास"], answer: "B" },
            { question: "बाल विकास का सर्वाधिक प्रभावित करने वाला कारक है:", options: ["वंशानुक्रम", "वातावरण", "वंशानुक्रम और वातावरण दोनों", "पोषण"], answer: "C" }],
            level2: [{ question: "पियाजे के अनुसार बाल विकास में सबसे महत्वपूर्ण अवस्था कौन-सी है?", options: ["संवेदी-गामक अवस्था", "पूर्व-संक्रियात्मक", "मूर्त-संक्रियात्मक", "औपचारिक संक्रियात्मक"], answer: "A" }],
            level3: [{ question: "वायगोत्स्की के सिद्धांत के अनुसार 'समीपस्थ विकास क्षेत्र' (ZPD) का अर्थ है:", options: ["बालक का वर्तमान विकास स्तर", "सहायता से प्राप्त करने योग्य क्षमता", "अर्जित ज्ञान की मात्रा", "आनुवंशिक सीमाएँ"], answer: "B" }]
        },
        "बाल विकास की अवस्थाएँ, शारीरिक, मानसिक, संवेगात्मक, भाषा एवं सृजनात्मकता": {
            level1: [{ question: "भाषा विकास के सन्दर्भ में 'एक-शब्द वाक्य' चरण किस आयु में होता है?", options: ["6-8 माह", "9-12 माह", "12-18 माह", "2-3 वर्ष"], answer: "C" },
            { question: "सृजनात्मकता का विकास सबसे अधिक किससे होता है?", options: ["रटने से", "अनुकरण से", "मुक्त एवं कल्पनाशील वातावरण", "कठोर अनुशासन से"], answer: "C" }],
            level2: [{ question: "संवेगात्मक विकास में 'व्याकुलता' की अवस्था किस काल में अधिक होती है?", options: ["शैशवावस्था", "बाल्यावस्था", "किशोरावस्था", "प्रौढ़ावस्था"], answer: "C" }],
            level3: [{ question: "लॉरेंस कोहलबर्ग के अनुसार नैतिक विकास का उच्चतम स्तर है:", options: ["पूर्व-पारम्परिक", "पारम्परिक", "उत्तर-पारम्परिक", "सामाजिक व्यवस्था"], answer: "C" }]
        },
        // अधिगम (सीखने) का अर्थ, सिद्धान्त
        "अधिगम सिद्धान्त (थार्नडाइक, पैवलव, स्किनर, कोहलर, पियाजे, वायगोत्स्की)": {
            level1: [{ question: "थार्नडाइक के सीखने के किस नियम को 'प्रभाव का नियम' कहा जाता है?", options: ["तत्परता का नियम", "अभ्यास का नियम", "प्रभाव का नियम", "बहु-प्रतिक्रिया का नियम"], answer: "C" },
            { question: "स्किनर का क्रिया-प्रसूत अनुबंधन सिद्धांत किस पर आधारित है?", options: ["उद्दीपक-अनुक्रिया", "पुरस्कार एवं दण्ड", "अंतर्दृष्टि", "अनुकरण"], answer: "B" }],
            level2: [{ question: "कोहलर के सूझ (अंतर्दृष्टि) सिद्धांत का प्रयोग किस पर किया गया?", options: ["चूहे", "कुत्ते", "वानर", "बिल्ली"], answer: "C" }],
            level3: [{ question: "वायगोत्स्की के सिद्धांत के अनुसार 'मचान (scaffolding)' का अर्थ है:", options: ["शिक्षक द्वारा अस्थायी सहायता", "परीक्षा हेतु तैयारी", "पाठ्य पुस्तक", "पाठ योजना"], answer: "A" }]
        },
        "शिक्षण एवं शिक्षण विधाएँ, सूक्ष्म शिक्षण": {
            level1: [{ question: "शिक्षण का सबसे महत्वपूर्ण उद्देश्य क्या है?", options: ["परीक्षा में सफलता", "अधिगम को सार्थक बनाना", "अनुशासन स्थापित करना", "पाठ्यपुस्तक समाप्त करना"], answer: "B" }],
            level2: [{ question: "सूक्ष्म शिक्षण में किस कौशल पर सर्वाधिक ध्यान दिया जाता है?", options: ["प्रश्न कौशल", "व्याख्या कौशल", "प्रस्तावना कौशल", "पुनर्बलन कौशल"], answer: "D" }],
            level3: [{ question: "रचनावादी शिक्षण दृष्टिकोण में शिक्षक की भूमिका होती है:", options: ["सूचना का स्रोत", "मार्गदर्शक एवं सुगमकर्ता", "नियंत्रक", "परीक्षक"], answer: "B" }]
        },
        "समावेशी शिक्षा, निर्देशन एवं परामर्श": {
            level1: [{ question: "समावेशी शिक्षा का अर्थ है:", options: ["सभी बच्चों को एक साथ शिक्षा", "केवल दिव्यांग बच्चों के लिए शिक्षा", "प्रतिभाशाली बच्चों के लिए अलग कक्षा", "निजी स्कूलों में शिक्षा"], answer: "A" }],
            level2: [{ question: "दृष्टिबाधित बच्चों के लिए कौन सी शिक्षण विधि सर्वाधिक उपयुक्त है?", options: ["ब्रेल लिपि", "सांकेतिक भाषा", "ऑडियो पुस्तकें", "उपरोक्त सभी"], answer: "D" }],
            level3: [{ question: "UP में मण्डलीय मनोविज्ञान केन्द्र का मुख्य उद्देश्य क्या है?", options: ["शिक्षक प्रशिक्षण", "बालकों का मार्गदर्शन एवं परामर्श", "पाठ्यक्रम निर्माण", "परीक्षा आयोजन"], answer: "B" }]
        },
        "अधिगम, अध्ययन और अध्यापन (बालक की सोच, असफलता के कारण, प्रेरणा)": {
            level1: [{ question: "बालक विद्यालय में असफल क्यों हो जाते हैं? प्रमुख कारण:", options: ["अनुचित शिक्षण विधियाँ", "अभिप्रेरणा की कमी", "वैयक्तिक भिन्नता की अनदेखी", "उपरोक्त सभी"], answer: "D" }],
            level2: [{ question: "अधिगम में प्रेरणा (Motivation) का क्या योगदान है?", options: ["लक्ष्य प्राप्ति हेतु ऊर्जा प्रदान करना", "समय बर्बाद करना", "तनाव बढ़ाना", "केवल बाह्य पुरस्कार"], answer: "A" }],
            level3: [{ question: "बालक को 'वैज्ञानिक अन्वेषक' की तरह सीखने के लिए आवश्यक है:", options: ["प्रयोगात्मक अवसर", "खुला वातावरण", "जिज्ञासा को प्रोत्साहन", "उपरोक्त सभी"], answer: "D" }]
        },
        "निर्देशन एवं परामर्श में सहयोगी संस्थाएँ (मनोविज्ञानशाला, प्रयागराज, डाइट आदि)": {
            level1: [{ question: "जिला स्तर पर शिक्षकों को विशेष शिक्षा हेतु प्रशिक्षित कौन करता है?", options: ["DIET (मेंटर)", "प्राथमिक विद्यालय", "नगर निगम", "पुलिस विभाग"], answer: "A" }],
            level2: [{ question: "प्रयागराज स्थित 'मनोविज्ञानशाला' किस क्षेत्र में प्रसिद्ध है?", options: ["बाल मनोविज्ञान शोध", "खेल मनोविज्ञान", "अपराध मनोविज्ञान", "उद्योग मनोविज्ञान"], answer: "A" }],
            level3: [{ question: "समावेशी शिक्षा हेतु सामुदायिक सहयोग समितियों का मुख्य कार्य क्या है?", options: ["धन एकत्र करना", "जागरूकता एवं संसाधन जुटाना", "परीक्षा लेना", "अनुशासन देना"], answer: "B" }]
        }
    };
    
    // पूर्ण अध्याय सूची (नए पाठ्यक्रम अनुसार)
    const finalTopicList = Object.keys(questions);
    let selectedTopics = [];
    let selectedLevel = null;
    let practiceType = null; // 'custom' or 'daily'
    let userProgress = { streak: 0, lastPracticeDate: null, totalProblemsSolved: 0, topicsCompleted: 0, totalTopics: finalTopicList.length };
    
    function loadUserProgress() {
        const saved = localStorage.getItem('upTetPedagogyProgress');
        if (saved) userProgress = JSON.parse(saved);
        const today = new Date().toDateString();
        if (userProgress.lastPracticeDate !== today) {
            const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1);
            if (userProgress.lastPracticeDate === yesterday.toDateString()) userProgress.streak++;
            else userProgress.streak = 1;
            userProgress.lastPracticeDate = today;
            saveUserProgress();
        }
        updateUI();
    }
    function saveUserProgress() { localStorage.setItem('upTetPedagogyProgress', JSON.stringify(userProgress)); }
    function updateUI() {
        streakDays.textContent = userProgress.streak;
        const today = new Date();
        currentDate.textContent = today.toLocaleDateString('hi-IN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
        const percent = Math.round((userProgress.topicsCompleted / userProgress.totalTopics) * 100);
        progressFill.style.width = `${percent}%`;
        progressText.textContent = `${percent}% पूर्ण`;
    }
    
    function getRandomQuestions(topicsArray, level, count) {
        let allQs = [];
        topicsArray.forEach(topic => {
            if (questions[topic] && questions[topic][`level${level}`]) {
                allQs = allQs.concat(questions[topic][`level${level}`]);
            }
        });
        if(allQs.length === 0) return [];
        allQs = allQs.sort(() => Math.random() - 0.5);
        return allQs.slice(0, count);
    }
    
    function renderTopics() {
        const container = document.getElementById('topicsContainer');
        container.innerHTML = `<div class="checkbox-item"><input type="checkbox" id="fullSyllabus" value="full"><label for="fullSyllabus"><strong>📖 संपूर्ण पाठ्यक्रम (सभी अध्याय)</strong></label></div>`;
        finalTopicList.forEach(topic => {
            container.innerHTML += `<div class="checkbox-item"><input type="checkbox" id="topic_${topic.replace(/\s/g, '')}" name="topic" value="${topic}"><label for="topic_${topic.replace(/\s/g, '')}">📌 ${topic}</label></div>`;
        });
        document.getElementById('fullSyllabus')?.addEventListener('change', (e) => {
            document.querySelectorAll('input[name="topic"]').forEach(cb => cb.disabled = e.target.checked);
        });
    }
    
    customPracticeBtn.addEventListener('click', () => { practiceType = 'custom'; startScreen.classList.add('hidden'); subjectSelection.classList.remove('hidden'); });
    selectPedagogyBtn.addEventListener('click', () => { renderTopics(); subjectSelection.classList.add('hidden'); topicSelection.classList.remove('hidden'); });
    backToStartBtn.addEventListener('click', () => { topicSelection.classList.add('hidden'); startContainer.classList.remove('hidden'); startScreen.classList.remove('hidden'); updateUI(); });
    
    generateAssignmentBtn.addEventListener('click', () => {
        const full = document.getElementById('fullSyllabus')?.checked;
        if (full) selectedTopics = [...finalTopicList];
        else {
            selectedTopics = Array.from(document.querySelectorAll('input[name="topic"]:checked')).map(cb => cb.value);
        }
        if (selectedTopics.length === 0) { alert("कृपया कम से कम एक अध्याय चुनें या संपूर्ण पाठ्यक्रम चुनें!"); return; }
        topicSelection.classList.add('hidden');
        levelSelection.classList.remove('hidden');
    });
    backToTopicsBtn.addEventListener('click', () => { levelSelection.classList.add('hidden'); topicSelection.classList.remove('hidden'); });
    
    [level1Btn, level2Btn, level3Btn].forEach((btn, idx) => { btn.addEventListener('click', () => {
        [level1Btn, level2Btn, level3Btn].forEach(b => b.classList.remove('selected'));
        btn.classList.add('selected'); selectedLevel = idx+1;
    });});
    
    generateFinalBtn.addEventListener('click', () => {
        if (!selectedLevel) { alert("कृपया कठिनाई स्तर चुनें!"); return; }
        generateAssignment();
    });
    
    function generateAssignment() {
        startContainer.classList.add('hidden');
        levelSelection.classList.add('hidden');
        generatedPaperContainer.classList.remove('hidden');
        const topicNames = selectedTopics.join(", ");
        const mcqs = getRandomQuestions(selectedTopics, selectedLevel, 10);
        if(mcqs.length === 0) {
            alert("चयनित अध्याय/स्तर के लिए पर्याप्त प्रश्न नहीं हैं, कृपया अन्य स्तर या अध्याय चुनें।");
            backToStart();
            return;
        }
        let paperContent = `
            <div class="header">
                <h2>UP TET (Paper-II) बाल विकास एवं शिक्षाशास्त्र अभ्यास सेट</h2>
                <h3>${selectedTopics.length === finalTopicList.length ? "संपूर्ण पाठ्यक्रम (बाल विकास, अधिगम सिद्धान्त, समावेशी शिक्षा)" : topicNames.substring(0, 70)}</h3>
                <p>स्तर ${selectedLevel} - ${selectedLevel === 1 ? "आधारभूत" : selectedLevel === 2 ? "मध्यम (TET स्तर)" : "उन्नत (समालोचनात्मक)"}</p>
            </div>
            <div class="content-area">
                <div class="instructions"><p><strong>निर्देश:</strong></p><ol><li>इस सेट में 10 बहुविकल्पीय प्रश्न हैं।</li><li>प्रत्येक प्रश्न के चार विकल्प हैं, केवल एक सही है।</li><li>अभ्यास 20 मिनट में पूरा करें।</li><li>उत्तर कुंजी से स्वयं मूल्यांकन करें।</li><li>प्रत्येक प्रश्न UP TET परीक्षा पैटर्न पर आधारित है।</li></ol></div>
                <div class="question-section"><div class="section-heading" style="font-size:1.3rem; font-weight:bold; margin-bottom:20px;">📝 अभ्यास प्रश्न</div>`;
        let qNum = 1;
        mcqs.forEach(mcq => {
            paperContent += `<div class="question"><div class="question-text">${qNum}. ${mcq.question}</div>
            <div class="option">(A) ${mcq.options[0]}</div><div class="option">(B) ${mcq.options[1]}</div>
            <div class="option">(C) ${mcq.options[2]}</div><div class="option">(D) ${mcq.options[3]}</div></div>`;
            qNum++;
        });
        paperContent += `</div><div class="answer-sheet"><h3 class="section-title">🔑 उत्तर कुंजी (सही उत्तर)</h3>
        <table class="answer-table"><thead><tr><th>प्रश्न सं.</th><th>उत्तर</th><th>प्रश्न सं.</th><th>उत्तर</th></tr></thead><tbody>`;
        for (let i = 0; i < mcqs.length; i += 2) {
            paperContent += `<tr><td>${i+1}</td><td>${mcqs[i].answer}</td>`;
            if (i+1 < mcqs.length) paperContent += `<td>${i+2}</td><td>${mcqs[i+1].answer}</td>`;
            else paperContent += `<td></td><td></td>`;
            paperContent += `</tr>`;
        }
        paperContent += `</tbody></table></div>
        <div class="action-buttons"><button class="btn btn-success" id="markCompleteBtn"><i class="fas fa-check-circle"></i> अभ्यास पूर्ण चिह्नित करें</button>
        <button class="btn btn-primary" id="printBtn"><i class="fas fa-print"></i> प्रिंट/PDF</button>
        <button class="btn btn-danger" id="newAssignmentBtn"><i class="fas fa-arrow-left"></i> नया अभ्यास</button></div></div>`;
        generatedPaperContainer.innerHTML = paperContent;
        document.getElementById('markCompleteBtn')?.addEventListener('click', markPracticeComplete);
        document.getElementById('printBtn')?.addEventListener('click', () => window.print());
        document.getElementById('newAssignmentBtn')?.addEventListener('click', backToStart);
    }
    
    function markPracticeComplete() {
        userProgress.totalProblemsSolved += 10;
        let completedCount = 0;
        if (selectedTopics.length > 0 && !(selectedTopics.length === finalTopicList.length)) {
            selectedTopics.forEach(t => { if (finalTopicList.includes(t)) completedCount++; });
            userProgress.topicsCompleted = Math.max(userProgress.topicsCompleted, completedCount);
        } else if (selectedTopics.length === finalTopicList.length) userProgress.topicsCompleted = userProgress.totalTopics;
        saveUserProgress(); updateUI();
        alert("🎉 शानदार! आपका अभ्यास सत्र पूर्ण हुआ। प्रगति सहेजी गई। UP TET की तैयारी निरंतर जारी रखें!");
        backToStart();
    }
    
    function generateProblemOfDay() {
        const randomTopic = finalTopicList[Math.floor(Math.random() * finalTopicList.length)];
        const randomLevel = Math.floor(Math.random() * 3) + 1;
        selectedTopics = [randomTopic];
        selectedLevel = randomLevel;
        startContainer.classList.add('hidden');
        generatedPaperContainer.classList.remove('hidden');
        const mcqs = getRandomQuestions(selectedTopics, selectedLevel, 1);
        if(mcqs.length === 0) { backToStart(); alert("तकनीकी समस्या, पुनः प्रयास करें"); return; }
        let paperContent = `
            <div class="header"><h2>UP TET बाल विकास एवं शिक्षाशास्त्र</h2><h3>✨ दिन की विशेष समस्या ✨</h3><p>${randomTopic} • स्तर ${randomLevel}</p></div>
            <div class="content-area"><div class="problem-of-day"><h3><i class="fas fa-star-of-life"></i> आज की TET चैलेंज</h3><p>अपनी लगातार बनाए रखने के लिए इस समस्या को हल करें और शिक्षक बनने की ओर एक कदम बढ़ाएँ!</p></div>
            <div class="daily-summary"><div class="summary-card"><h4>🔥 लगातार</h4><p>${userProgress.streak} दिन</p></div>
            <div class="summary-card"><h4>📊 कुल हल प्रश्न</h4><p>${userProgress.totalProblemsSolved}</p></div>
            <div class="summary-card"><h4>📚 अध्याय प्रगति</h4><p>${Math.round((userProgress.topicsCompleted / userProgress.totalTopics) * 100)}%</p></div></div>
            <div class="instructions"><p><strong>विशेष निर्देश:</strong></p><ol><li>प्रश्न TET स्तर पर आधारित है।</li><li>5 मिनट में हल करें।</li><li>व्याख्या पढ़कर अवधारणा स्पष्ट करें।</li></ol></div>
            <div class="question-section"><div class="section-heading">🎯 दिन का प्रश्न</div>`;
        mcqs.forEach(mcq => {
            paperContent += `<div class="question"><div class="question-text">${mcq.question}</div>
            <div class="option">(A) ${mcq.options[0]}</div><div class="option">(B) ${mcq.options[1]}</div>
            <div class="option">(C) ${mcq.options[2]}</div><div class="option">(D) ${mcq.options[3]}</div></div>`;
        });
        paperContent += `</div><div class="answer-sheet"><h3 class="section-title">📖 समाधान एवं व्याख्या</h3>
        <p><strong>सही उत्तर:</strong> ${mcqs[0].answer}</p><p><strong>व्याख्या:</strong> यह प्रश्न ${randomTopic} के महत्वपूर्ण पहलू पर आधारित है। UP TET परीक्षा में इस प्रकार के प्रश्न अक्सर पूछे जाते हैं।</p></div>
        <div class="action-buttons"><button class="btn btn-success" id="markCompleteBtn"><i class="fas fa-check"></i> पूर्ण चिह्नित करें</button>
        <button class="btn btn-primary" id="printBtn"><i class="fas fa-print"></i> प्रिंट करें</button>
        <button class="btn btn-danger" id="newAssignmentBtn"><i class="fas fa-home"></i> होम पेज</button></div></div>`;
        generatedPaperContainer.innerHTML = paperContent;
        document.getElementById('markCompleteBtn')?.addEventListener('click', () => { userProgress.totalProblemsSolved++; saveUserProgress(); updateUI(); alert("बधाई हो! आज की समस्या हल की। कल नई समस्या के लिए वापस आएं।"); backToStart(); });
        document.getElementById('printBtn')?.addEventListener('click', () => window.print());
        document.getElementById('newAssignmentBtn')?.addEventListener('click', backToStart);
    }
    
    function backToStart() {
        generatedPaperContainer.classList.add('hidden');
        startContainer.classList.remove('hidden');
        topicSelection.classList.add('hidden');
        levelSelection.classList.add('hidden');
        subjectSelection.classList.add('hidden');
        startScreen.classList.remove('hidden');
        updateUI();
        selectedTopics = [];
        selectedLevel = null;
    }
    
    problemOfDayBtn.addEventListener('click', generateProblemOfDay);
    homeIcon.addEventListener('click', (e) => { e.preventDefault(); backToStart(); });
    document.addEventListener('DOMContentLoaded', () => { loadUserProgress(); });
</script>
</body>
</html>