<!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 (Language-II – English) Daily Practice Generator</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='%231f6390'%3EEN%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: #1f6390;
            --primary-dark: #0e4a6e;
            --secondary: #2c7da0;
            --danger: #c44536;
            --success: #2a9d8f;
            --light: #f4f9ff;
            --dark: #1e2a3e;
            --gray: #5e6b7c;
            --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', 'Poppins', 'Arial', sans-serif; }
        body { background: linear-gradient(135deg, #e0f0ff 0%, #cfe3f5 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: -30px; right: -30px; font-size: 120px; opacity: 0.1; }
        .header h1 { font-size: 1.6rem; 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: #1e7a6e; transform: translateY(-2px); }
        .btn-danger { background: var(--danger); color: white; }
        .btn-danger:hover { background: #a13326; 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: #fffaf5; }
        .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; font-size: 1rem; }
        .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: #eef4fc; border-radius: var(--border-radius); border-left: 5px solid var(--secondary); }
        .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 (Language-II – English)</h1>
        <p>Daily Practice Problem Generator | Grammar, Pedagogy & Comprehension</p>
    </div>
    <div class="content-area">
        <div id="startScreen">
            <h2 class="section-title">English Language: Grammar, Pedagogy & Comprehension</h2>
            <div class="streak-container">
                <div class="streak-counter"><i class="fas fa-fire"></i> Streak: <span id="streakDays">0</span> days</div>
                <div class="date-display" id="currentDate"></div>
            </div>
            <div class="progress-container">
                <h3>Your Progress (UP TET English)</h3>
                <div class="progress-bar"><div class="progress-fill" id="progressFill" style="width: 0%"></div></div>
                <p id="progressText">0% Completed</p>
            </div>
            <div class="btn-group">
                <button class="btn btn-primary" id="problemOfDayBtn">✨ Problem of the Day</button>
                <button class="btn btn-success" id="customPracticeBtn">📚 Custom Practice (Topic-wise)</button>
            </div>
        </div>
        <div id="subjectSelection" class="hidden">
            <h2 class="section-title">Select Subject (Language-II)</h2>
            <div class="btn-group"><button class="btn btn-primary" id="selectEnglishBtn">English Grammar, Pedagogy & Comprehension</button></div>
        </div>
        <div id="topicSelection" class="hidden">
            <h2 class="section-title">Select Topics (Chapter-wise as per UP TET Syllabus)</h2>
            <form id="topicForm">
                <div class="checkbox-container" id="topicsContainer"></div>
            </form>
            <div class="btn-group">
                <button class="btn btn-danger" id="backToStartBtn">Back to Home</button>
                <button class="btn btn-success" id="generateAssignmentBtn">Generate Practice Set</button>
            </div>
        </div>
        <div id="levelSelection" class="hidden">
            <h2 class="section-title">Choose Difficulty Level (TET Standard)</h2>
            <p class="text-center">Select level based on your preparation:</p>
            <div class="level-buttons">
                <button class="btn btn-level" id="level1Btn">Level 1<br><small>Basic Grammar</small></button>
                <button class="btn btn-level" id="level2Btn">Level 2<br><small>Intermediate (TET Level)</small></button>
                <button class="btn btn-level" id="level3Btn">Level 3<br><small>Advanced (Critical & Pedagogy)</small></button>
            </div>
            <div class="btn-group">
                <button class="btn btn-danger" id="backToTopicsBtn">Back to Topics</button>
                <button class="btn btn-success" id="generateFinalBtn">Generate Questions</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 selectEnglishBtn = document.getElementById('selectEnglishBtn');
    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');
    
    // ======================== ENGLISH LANGUAGE (LANGUAGE-II) - DATABASE (AS PER SYLLABUS) ========================
    const questions = {
        "Unseen Passage (Comprehension)": {
            level1: [{ question: "Read the unseen passage: 'Water is essential for life.' The main idea of the passage is:", options: ["Importance of water", "Water pollution", "Rain cycle", "Ocean depth"], answer: "A" }],
            level2: [{ question: "In an unseen passage, to find the synonym of a word, you should:", options: ["Guess randomly", "Read context clues", "Skip the passage", "Memorize dictionary"], answer: "B" }]
        },
        "Nouns and its Kinds": {
            level1: [{ question: "'Team' is an example of:", options: ["Proper Noun", "Common Noun", "Collective Noun", "Abstract Noun"], answer: "C" }],
            level2: [{ question: "'Honesty is the best policy' – 'Honesty' is a:", options: ["Proper Noun", "Collective Noun", "Abstract Noun", "Material Noun"], answer: "C" }]
        },
        "Pronoun and its Kinds": {
            level1: [{ question: "Choose the correct pronoun: 'She is taller than ___'", options: ["I", "me", "my", "mine"], answer: "B" }],
            level2: [{ question: "Which is a reflexive pronoun?", options: ["They", "Himself", "Who", "Which"], answer: "B" }]
        },
        "Verb and its Kinds": {
            level1: [{ question: "Identify the verb: 'The child sleeps peacefully.'", options: ["child", "sleeps", "peacefully", "the"], answer: "B" }],
            level2: [{ question: "Which is a transitive verb?", options: ["She runs fast", "He kicked the ball", "They sleep", "I laugh"], answer: "B" }]
        },
        "Adjective & Degrees": {
            level1: [{ question: "Superlative degree of 'good' is:", options: ["Better", "Best", "Gooder", "Most good"], answer: "B" }],
            level2: [{ question: "Which sentence has an adjective of quantity?", options: ["Red rose", "Some milk", "Tall building", "Happy child"], answer: "B" }]
        },
        "Adverb and its Kinds": {
            level1: [{ question: "Identify adverb: 'She sings beautifully.'", options: ["She", "sings", "beautifully", "none"], answer: "C" }],
            level2: [{ question: "Which is an adverb of time?", options: ["Now", "Here", "Slowly", "Very"], answer: "A" }]
        },
        "Preposition & Kinds, Conjunction, Interjection": {
            level1: [{ question: "Fill preposition: 'He is good ___ Mathematics.'", options: ["in", "at", "on", "for"], answer: "B" }],
            level2: [{ question: "Which conjunction shows contrast?", options: ["and", "but", "so", "because"], answer: "B" }],
            level3: [{ question: "Identify interjection: 'Hurrah! We won the match.'", options: ["Hurrah", "won", "match", "we"], answer: "A" }]
        },
        "Singular-Plural, Subject-Predicate, Gender": {
            level1: [{ question: "Plural of 'child' is:", options: ["childs", "children", "childes", "child's"], answer: "B" }],
            level2: [{ question: "Identify predicate: 'The sun rises in the east.'", options: ["The sun", "rises in the east", "sun rises", "east"], answer: "B" }]
        },
        "Negative & Interrogative Sentences": {
            level1: [{ question: "Change to negative: 'She likes coffee.'", options: ["She does not like coffee", "She like not coffee", "She don't like", "Not like coffee"], answer: "A" }],
            level2: [{ question: "Interrogative of 'They are playing' is:", options: ["Are they playing?", "They are playing?", "Playing they?", "Do they playing?"], answer: "A" }]
        },
        "Punctuations, Suffix & Root words": {
            level1: [{ question: "Correct punctuation: 'Where are you going'", options: ["Where are you going.", "Where are you going?", "Where are you going!", "Where are you going,"], answer: "B" }],
            level2: [{ question: "Suffix in 'happiness' is:", options: ["hap", "ness", "happy", "ppiness"], answer: "B" }]
        },
        "Phrasal Verbs, Narration, Voice": {
            level1: [{ question: "Meaning of 'look after' is:", options: ["see", "care for", "ignore", "search"], answer: "B" }],
            level2: [{ question: "Change to passive: 'Ram wrote a letter.'", options: ["A letter was written by Ram", "A letter wrote Ram", "Ram was written letter", "Letter is written"], answer: "A" }],
            level3: [{ question: "Direct to Indirect: He said, 'I am happy.'", options: ["He said that he was happy", "He said I am happy", "He told happy", "He says happy"], answer: "A" }]
        },
        "Antonyms, Synonyms, Homophones": {
            level1: [{ question: "Synonym of 'Big' is:", options: ["Small", "Large", "Tiny", "Narrow"], answer: "B" }],
            level2: [{ question: "Antonym of 'Victory' is:", options: ["Win", "Success", "Defeat", "Triumph"], answer: "C" }],
            level3: [{ question: "Homophone of 'see' is:", options: ["sea", "saw", "seem", "c"], answer: "A" }]
        },
        "Silent Letters, Use of Somebody/Nobody": {
            level1: [{ question: "Which word has a silent letter?", options: ["Knee", "Dog", "Cat", "Run"], answer: "A" }],
            level2: [{ question: "Complete: 'There is ____ in the room.' (no person)", options: ["somebody", "anybody", "nobody", "everybody"], answer: "C" }]
        },
        "Pedagogy of English Language": {
            level1: [{ question: "Language acquisition refers to:", options: ["Learning grammar rules", "Natural subconscious process", "Memorizing words", "Translation method"], answer: "B" }],
            level2: [{ question: "Which is a language skill?", options: ["Listening", "Walking", "Eating", "Drawing"], answer: "A" }],
            level3: [{ question: "Diagnostic teaching aims at:", options: ["Identifying learning difficulties", "Final exam preparation", "Homework correction", "Group discussion"], answer: "A" }]
        },
        "Role of Grammar, Language Skills, Assessment": {
            level1: [{ question: "Grammar helps in:", options: ["Correct sentence formation", "Drawing pictures", "Singing songs", "Physical exercise"], answer: "A" }],
            level2: [{ question: "Which is not a sub-skill of reading?", options: ["Skimming", "Scanning", "Drafting", "Intensive reading"], answer: "C" }],
            level3: [{ question: "Continuous and Comprehensive Evaluation (CCE) focuses on:", options: ["Only exams", "Holistic development", "Only homework", "Attendance"], answer: "B" }]
        },
        "Parts of Speech & Use of Request": {
            level1: [{ question: "'Wow! What a beautiful picture' – 'Wow' is:", options: ["Noun", "Verb", "Interjection", "Adverb"], answer: "C" }],
            level2: [{ question: "Polite request: '____ you please help me?'", options: ["Could", "Will", "Shall", "Must"], answer: "A" }]
        }
    };
    
    const finalTopicList = Object.keys(questions);
    let selectedTopics = [];
    let selectedLevel = null;
    let userProgress = { streak: 0, lastPracticeDate: null, totalProblemsSolved: 0, topicsCompleted: 0, totalTopics: finalTopicList.length };
    
    function loadUserProgress() {
        const saved = localStorage.getItem('upTetEnglishProgress');
        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('upTetEnglishProgress', JSON.stringify(userProgress)); }
    function updateUI() {
        streakDays.textContent = userProgress.streak;
        const today = new Date();
        currentDate.textContent = today.toLocaleDateString('en-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}% Completed`;
    }
    
    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>📖 Full Syllabus (All English Topics)</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', () => { startScreen.classList.add('hidden'); subjectSelection.classList.remove('hidden'); });
    selectEnglishBtn.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("Please select at least one topic or choose Full Syllabus!"); 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("Please choose difficulty level!"); 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("No questions available for selected topics/level. Choose different level or topics."); backToStart(); return; }
        let paperContent = `
            <div class="header">
                <h2>UP TET Paper-II (Language-II – English)</h2>
                <h3>${selectedTopics.length === finalTopicList.length ? "Complete Syllabus (Grammar + Pedagogy)" : topicNames.substring(0, 70)}</h3>
                <p>Level ${selectedLevel} - ${selectedLevel === 1 ? "Basic" : selectedLevel === 2 ? "Intermediate (TET Standard)" : "Advanced (Critical & Pedagogy)"}</p>
            </div>
            <div class="content-area">
                <div class="instructions"><p><strong>Instructions:</strong></p><ol><li>This set contains 10 multiple choice questions (MCQs) on English grammar, pedagogy & comprehension.</li><li>Each question has four options, only one is correct.</li><li>Complete the practice in 20 minutes.</li><li>Check your answers with the answer key.</li><li>Designed as per UP TET Paper-II (Language-II) pattern.</li></ol></div>
                <div class="question-section"><div class="section-heading" style="font-size:1.3rem; font-weight:bold; margin-bottom:20px;">✍️ English Practice Questions</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">🔑 Answer Key</h3>
        <table class="answer-table"><thead><tr><th>Q. No.</th><th>Answer</th><th>Q. No.</th><th>Answer</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> Mark as Complete</button>
        <button class="btn btn-primary" id="printBtn"><i class="fas fa-print"></i> Print / PDF</button>
        <button class="btn btn-danger" id="newAssignmentBtn"><i class="fas fa-plus-circle"></i> New Practice</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("Excellent! Practice session marked complete. Your progress has been saved. Keep preparing for UP TET English!");
        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("Try again, no question for this topic today."); return; }
        let paperContent = `
            <div class="header"><h2>UP TET English (Language-II)</h2><h3>✨ Problem of the Day ✨</h3><p>${randomTopic} • Level ${randomLevel}</p></div>
            <div class="content-area"><div class="problem-of-day"><h3><i class="fas fa-star-of-life"></i> Today's TET Challenge</h3><p>Sharpen your English grammar & pedagogy skills daily!</p></div>
            <div class="daily-summary"><div class="summary-card"><h4>🔥 Current Streak</h4><p>${userProgress.streak} days</p></div>
            <div class="summary-card"><h4>📚 Problems Solved</h4><p>${userProgress.totalProblemsSolved}</p></div>
            <div class="summary-card"><h4>📊 Topic Progress</h4><p>${Math.round((userProgress.topicsCompleted / userProgress.totalTopics) * 100)}%</p></div></div>
            <div class="instructions"><p><strong>Special Instruction:</strong></p><ol><li>Question based on TET pattern.</li><li>Solve within 5 minutes.</li><li>Check answer with explanation.</li><li>Return tomorrow for a new problem.</li></ol></div>
            <div class="question-section"><div class="section-heading">🎯 Today's Question</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">📖 Solution & Explanation</h3>
        <p><strong>Correct Answer:</strong> ${mcqs[0].answer}</p><p><strong>Explanation:</strong> This question is based on '${randomTopic}' which is an important area for UP TET English Paper-II.</p></div>
        <div class="action-buttons"><button class="btn btn-success" id="markCompleteBtn"><i class="fas fa-check"></i> Mark Complete</button>
        <button class="btn btn-primary" id="printBtn"><i class="fas fa-print"></i> Print</button>
        <button class="btn btn-danger" id="newAssignmentBtn"><i class="fas fa-home"></i> Home</button></div></div>`;
        generatedPaperContainer.innerHTML = paperContent;
        document.getElementById('markCompleteBtn')?.addEventListener('click', () => { userProgress.totalProblemsSolved++; saveUserProgress(); updateUI(); alert("Great! Problem solved. Keep up your streak!"); 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>