Exam Mode Features Update

RPSC EXAM MODE -NEW LIST FINAL.html में HINDI (2) MOCK TEST.html की तरह

Meta Heading (Subtopic):

Hide or show

और

Exam Tag Position (टैग की स्थिति):

के features function add करने है या

HINDI (2) MOCK TEST.html इससे भी advance professional यदि फिफ्थ ऑप्शन अनुतरित प्रश्न वाला ऑप्शन नहीं हो तब भी Exam Tag Position (टैग की स्थिति): काम करें

kya karna hoga

नमस्ते! हाँ, बिल्कुल। आपके RPSC EXAM MODE -NEW LIST FINAL.html (PDF/Word Generator) को HINDI (2) MOCK TEST.html से भी ज्यादा एडवांस और प्रोफेशनल बनाया जा सकता है।

आपके निर्देशानुसार, "Exam Tag Position" का लॉजिक ऑप्शन्स (Options) की संख्या पर निर्भर नहीं करेगा। चाहे प्रश्न में 4 ऑप्शन हों, 5 हों, या ऑप्शन हों ही नहीं, यह टैग हमेशा "Option के ठीक ऊपर" (Before Options) सटीक जगह पर ही रेंडर होगा।

इसे लागू करने के लिए आपको अपने मौजूदा कोड में 4 जगह बदलाव करने होंगे। यहाँ स्टेप-बाय-स्टेप कोड दिया गया है:

Step 1: UI में Dropdowns जोड़ना (HTML)

अपने कोड में <div class="grid-6"> वाले हिस्से को खोजें और उसमें यह दो नए ड्रॉपडाउन जोड़ दें (आप चाहें तो इसे grid-6 से बदलकर grid-8 कर सकते हैं ताकि सब एक लाइन में आ जाए, या इसे अलग grid-2 में रख सकते हैं)।

यहाँ से कॉपी करें:

HTML
            <!-- नए फीचर्स यहाँ जोड़े गए हैं -->
            <div class="form-group">
                <label style="color:#d35400;">🏷️ Meta Heading (Subtopic):</label>
                <select id="metaToggle" style="border-color:#d35400;">
                    <option value="show" selected>👁️ Show (दिखाएं)</option>
                    <option value="hide">🙈 Hide (छुपाएं)</option>
                </select>
            </div>
            <div class="form-group">
                <label style="color:#27ae60;">📌 Exam Tag Position:</label>
                <select id="tagPosition" style="border-color:#27ae60;">
                    <option value="top">प्रश्न के ठीक ऊपर</option>
                    <option value="above-options">Option के ठीक ऊपर</option>
                    <option value="inline-right" selected>डिफ़ॉल्ट (दाईं ओर)</option>
                </select>
            </div>

Step 2: `parseInput` फंक्शन को अपडेट करना (JavaScript)

अभी आपका कोड EXAM_TAGS और META_TYPE को एक ही वेरिएबल (tags) में मिला देता है। हमें इन्हें अलग-अलग करना होगा ताकि हम Meta को Hide/Show कर सकें और Tags की पोजीशन बदल सकें।

अपने कोड में function parseInput(rawText) के अंदर questions.push({ ... }) वाले हिस्से को इस तरह बदलें:

JavaScript
                // पुराने tags वाले लॉजिक को इससे बदलें:
                let metaType = extractText(block, 'META_TYPE');
                let examTags = extractText(block, 'EXAM_TAGS') || extractText(block, 'EXAM_ORIGIN');

                questions.push({
                    id: index + 1, qno: extractText(block, 'Q_NO') || (index + 1),
                    meta: metaType, // नया Meta डाटा
                    tags: examTags, // नया Tag डाटा
                    qEn: processImagesAndTags(qEn.trim().replace(/\n/g, '<br>')),
                    // ... (बाकी का कोड सेम रहेगा)

Step 3: Bilingual कॉलम में 'Above Options' टैग डालना (JavaScript)

यह वह एडवांस लॉजिक है जो सुनिश्चित करेगा कि 5वां ऑप्शन हो या न हो, टैग हमेशा ऑप्शन लिस्ट के ठीक ऊपर आएगा।

function buildQuestionColumnHTML(qData, langStr, isPdf) को खोजें और उसमें <ul class="options-list"> से ठीक पहले यह कोड डालें:

JavaScript
            // List I & II के कोड के ठीक बाद और <ul class="options-list"> से ठीक पहले यह डालें:
            
            const tagPos = document.getElementById('tagPosition') ? document.getElementById('tagPosition').value : 'inline-right';
            
            if (qData.tags && tagPos === 'above-options') {
                html += `<div style="display:inline-block; font-size:11px; color:#27ae60; font-weight:bold; background:#e8f8f5; padding:3px 8px; border-radius:4px; margin-top:5px; margin-bottom:5px; border:1px solid #a3e4d7;">🎯 ${qData.tags}</div>`;
            }

            html += `<ul class="options-list">`;
            // ... (बाकी का लूप सेम रहेगा)

Step 4: PDF लेआउट में Meta Hide/Show और Top/Right Tags लगाना

अंत में, function generatePDFQuestionHTML(qData, showAnswer, bilingualMode) को अपडेट करें ताकि यह UI की सेटिंग्स को पढ़ सके।

उस फंक्शन की शुरुआत को इस कोड से रिप्लेस करें:

JavaScript
        function generatePDFQuestionHTML(qData, showAnswer, bilingualMode) 
        {
            const metaToggle = document.getElementById('metaToggle') ? document.getElementById('metaToggle').value : 'show';
            const tagPos = document.getElementById('tagPosition') ? document.getElementById('tagPosition').value : 'inline-right';

            let html = `<div class="question-container"><div class="q-block">`;
            
            // 1. Meta Heading (Show/Hide) लॉजिक
            if (qData.meta && metaToggle === 'show') {
                html += `<div style="color:#d35400; font-size:13px; font-weight:bold; margin-bottom:4px; border-bottom:1px dashed #ccc; padding-bottom:2px;">■ ${qData.meta}</div>`;
            }

            // 2. Exam Tags (Top या Right) लॉजिक
            if (qData.tags && tagPos === 'top') {
                 html += `<div style="display:inline-block; font-size:11px; color:#d35400; font-weight:bold; background:#fdf2e9; padding:2px 8px; border-radius:4px; margin-bottom:6px; border:1px solid #fad7a1;">🏷️ ${qData.tags}</div>`;
            } else if (qData.tags && tagPos === 'inline-right') {
                 html += `<div class="exam-tags">${qData.tags}</div>`;
            }
            
            if (bilingualMode.startsWith('single-')) {
                let isEn = (bilingualMode === 'single-en');
                // ... (आपका पुराना कोड)

                // Single Mode के लिए Above Options लॉजिक (यहाँ भी <ul> से पहले)
                if (qData.tags && tagPos === 'above-options') {
                    html += `<div style="display:inline-block; font-size:11.5px; color:#27ae60; font-weight:bold; background:#e8f8f5; padding:3px 8px; border-radius:4px; margin-top:5px; margin-bottom:5px; border:1px solid #a3e4d7;">🎯 ${qData.tags}</div>`;
                }

                html += `<ul class="options-list">`;
                // ... (आपका पुराना कोड)

यह ज्यादा प्रोफेशनल क्यों है?

DOM आधारित पोजिशनिंग: हमने टैग को options[4] (5वें ऑप्शन) पर निर्भर करने के बजाय सीधे <ul class="options-list"> (जहाँ से ऑप्शन शुरू होते हैं) के ठीक ऊपर इंजेक्ट किया है। इससे अगर AI आउटपुट में केवल 2 ऑप्शन भी हों, तो भी टैग सटीक जगह आएगा।
इनलाइन CSS (Inline CSS): हमने PDF/Word जनरेटर के हिसाब से टैग्स में इनलाइन कलर्स (Orange फॉर Top, Green फॉर Above Options) दिए हैं, जिससे प्रिंट करते समय या Word में एक्सपोर्ट करते समय स्टाइल नहीं टूटेगा।
स्वतंत्र (Independent) डेटा हैंडलिंग: META_TYPE और EXAM_TAGS अब एक दूसरे से अलग पार्स (Parse) हो रहे हैं, जिससे आप एक को छुपाकर दूसरे को दिखा सकते हैं।

Step 4 ? kya kya

I'm having a hard time fulfilling your request. Can I help you with something else instead?

chek

Step 4: PDF लेआउट में Meta Hide/Show और Top/Right Tags ma kya लगाना tha

हाँ, बिल्कुल! Step 4 का मतलब है कि जब आप PDF जनरेट करते हैं (Print PDF बटन पर क्लिक करते हैं), तो उसमें भी Meta Heading (Hide/Show) और Exam Tag की Position वाला नया लॉजिक काम करना चाहिए।

यहाँ विस्तार से बताया गया है कि आपके दिए गए कोड ([source: 3]) में Step 4 का बदलाव कहाँ और कैसे करना है:

बदलाव कहाँ करना है?

अपने कोड में generatePDFQuestionHTML फंक्शन को खोजें। आपके वर्तमान कोड में यह ऐसा दिखता है (लगभग लाइन नंबर 375 के आसपास):

JavaScript
        // ==========================================================
        // 🖨️ PDF GENERATOR
        // ==========================================================
        function generatePDFQuestionHTML(qData, showAnswer, bilingualMode) 
        {
            const metaToggle = document.getElementById('metaToggle') ? document.getElementById('metaToggle').value : 'show';
            const tagPos = document.getElementById('tagPosition') ? document.getElementById('tagPosition').value : 'inline-right';

            let html = `<div class="question-container"><div class="q-block">`;
            
            // 1. Meta Heading (Show/Hide) लॉजिक
            if (qData.meta && metaToggle === 'show') {
                html += `<div style="color:#d35400; font-size:13px; font-weight:bold; margin-bottom:4px; border-bottom:1px dashed #ccc; padding-bottom:2px;">■ ${qData.meta}</div>`;
            }

            // 2. Exam Tags (Top या Right) लॉजिक
            if (qData.tags && tagPos === 'top') {
                 html += `<div style="display:inline-block; font-size:11px; color:#d35400; font-weight:bold; background:#fdf2e9; padding:2px 8px; border-radius:4px; margin-bottom:6px; border:1px solid #fad7a1;">🏷️ ${qData.tags}</div>`;
            } else if (qData.tags && tagPos === 'inline-right') {
                 html += `<div class="exam-tags">${qData.tags}</div>`;
            }
            let html = `<div class="question-container"><div class="q-block">`; // ⚠️ यह लाइन रिपीट हो रही है!
            if(qData.tags && qData.tags !== '') { html += `<div class="exam-tags">${qData.tags}</div>`; } // ⚠️ यह पुराना लॉजिक भी रह गया है!
            
            if (bilingualMode.startsWith('single-')) {
// ... (बाकी का कोड)

क्या गलती थी?

आपके कोड में let html = ... वाली लाइन और पुराने qData.tags का लॉजिक दो बार आ गया था, जिससे वह पुराने तरीके से ही काम कर रहा था।

सही कोड (Step 4 के लिए इसे कॉपी करें)

generatePDFQuestionHTML फंक्शन को इस पूरे नए कोड से बदल दें:

JavaScript
        // ==========================================================
        // 🖨️ PDF GENERATOR
        // ==========================================================
        function generatePDFQuestionHTML(qData, showAnswer, bilingualMode) 
        {
            const metaToggle = document.getElementById('metaToggle') ? document.getElementById('metaToggle').value : 'show';
            const tagPos = document.getElementById('tagPosition') ? document.getElementById('tagPosition').value : 'inline-right';

            let html = `<div class="question-container"><div class="q-block">`;
            
            // 1. Meta Heading (Show/Hide) लॉजिक
            if (qData.meta && metaToggle === 'show') {
                html += `<div style="color:#d35400; font-size:13px; font-weight:bold; margin-bottom:4px; border-bottom:1px dashed #ccc; padding-bottom:2px;">■ ${qData.meta}</div>`;
            }

            // 2. Exam Tags (Top या Right) लॉजिक
            if (qData.tags && tagPos === 'top') {
                 html += `<div style="display:inline-block; font-size:11px; color:#d35400; font-weight:bold; background:#fdf2e9; padding:2px 8px; border-radius:4px; margin-bottom:6px; border:1px solid #fad7a1;">🏷️ ${qData.tags}</div>`;
            } else if (qData.tags && tagPos === 'inline-right') {
                 html += `<div class="exam-tags">${qData.tags}</div>`;
            }
            
            // (यहाँ से रिपीट हो रही लाइनों को हटा दिया गया है)

            if (bilingualMode.startsWith('single-')) {
                let isEn = (bilingualMode === 'single-en');
                let textToUse = isEn ? qData.qEn : qData.qHi;
                let optsToUse = isEn ? qData.optEn : qData.optHi;
                
                // Fallback: अगर चुनी हुई भाषा मिसिंग है, तो जो उपलब्ध है उसे दिखाएं
                if (!textToUse) {
                    textToUse = qData.qEn || qData.qHi;
                    optsToUse = qData.qEn ? qData.optEn : qData.optHi;
                    isEn = !!qData.qEn;
                }
                html += `<div class="q-text"><b>${qData.qno}.</b> ${textToUse}</div>`;
                
                let l1 = isEn ? qData.listEn1 : qData.listHi1;
                let l2 = isEn ? qData.listEn2 : qData.listHi2;
                if (l1 && l2) {
                    html += `<table style="width:100%; border-collapse:collapse; margin-top:5px; margin-bottom:5px; font-size:13px; color:#000;"><tr>
                                <td style="width:50%; vertical-align:top; padding-right:10px; border-right:1px dashed #ccc;"><b>${isEn ? 'List I' : 'सूची I'}</b><br>${l1}</td>
                                <td style="width:50%; vertical-align:top; padding-left:10px;"><b>${isEn ? 'List II' : 'सूची II'}</b><br>${l2}</td>
                             </tr></table>`;
                }

                // 3. Single Mode के लिए Above Options लॉजिक
                if (qData.tags && tagPos === 'above-options') {
                    html += `<div style="display:inline-block; font-size:11px; color:#27ae60; font-weight:bold; background:#e8f8f5; padding:3px 8px; border-radius:4px; margin-top:5px; margin-bottom:5px; border:1px solid #a3e4d7;">🎯 ${qData.tags}</div>`;
                }
                
                html += `<ul class="options-list">`;
                let labels = ['1', '2', '3', '4', '5'];
                for(let i=0; i<5; i++) { if(optsToUse[i]) html += `<li>(${labels[i]}) ${optsToUse[i]}</li>`; }
                html += `</ul>`;
            } else if (bilingualMode.includes('-only-')) {
                // नया लॉजिक: केवल एक तरफ टेक्स्ट, दूसरी तरफ खाली
                let isHi = bilingualMode.includes('hi');
                let isLeft = bilingualMode.includes('left');
                let langStr = isHi ? 'HI' : 'EN';
                
                let contentHTML = buildQuestionColumnHTML(qData, langStr, true);
                let emptyHTML = ``; // खाली जगह के लिए
                
                let leftHTML = isLeft ? contentHTML : emptyHTML;
                let rightHTML = isLeft ? emptyHTML : contentHTML;
                
                html += `<div class="bilingual-container">
                            <div class="bilingual-col bilingual-col-divider">${leftHTML}</div>
                            <div class="bilingual-col">${rightHTML}</div>
                         </div>`;
            } else {
                // पुराना Bilingual लॉजिक
                let leftLang = (bilingualMode === 'hi-right') ? 'EN' : 'HI';
                let rightLang = (bilingualMode === 'hi-right') ? 'HI' : 'EN';
                
                html += `<div class="bilingual-container">
                            <div class="bilingual-col bilingual-col-divider">${buildQuestionColumnHTML(qData, leftLang, true)}</div>
                            <div class="bilingual-col">${buildQuestionColumnHTML(qData, rightLang, true)}</div>
                         </div>`;
            }

            html += `</div>`;
            if (showAnswer) { html += `<div class="ans-box"><strong>उत्तर: (${qData.ans})</strong><br><strong>व्याख्या:</strong> ${qData.exp}</div>`; }
            html += `</div>`; 
            return html;
        }

इस बदलाव से क्या होगा?

जो पुरानी लाइन (let html = ...) गलती से दो बार आ गई थी, वो हट जाएगी।
जब आप PDF जनरेट करेंगे, तो "Single Mode" में भी Exam Tag सही जगह पर (Options के ठीक ऊपर) दिखाई देगा, चाहे उसमें 4 ऑप्शन हों या 5.

Gemini is AI and can make mistakes.

Conversation with Gemini

Gemini said

Step 1: UI में Dropdowns जोड़ना (HTML)

Step 2: parseInput फंक्शन को अपडेट करना (JavaScript)

Step 3: Bilingual कॉलम में 'Above Options' टैग डालना (JavaScript)

Step 4: PDF लेआउट में Meta Hide/Show और Top/Right Tags लगाना

यह ज्यादा प्रोफेशनल क्यों है?

Gemini said

Gemini said

बदलाव कहाँ करना है?

क्या गलती थी?

सही कोड (Step 4 के लिए इसे कॉपी करें)

इस बदलाव से क्या होगा?

Step 2: `parseInput` फंक्शन को अपडेट करना (JavaScript)