container.innerHTML = filtered.map(prob => ` <div class="problem-card" data-id="$prob.id"> <div class="card-header"> <span class="chapter-tag">📖 $prob.chapterName</span> <span class="difficulty diff-$prob.difficulty">$prob.difficulty === 'easy' ? '🎯 Easy' : prob.difficulty === 'medium' ? '⚡ Medium' : '🔥 Advanced'</span> </div> <div class="problem-text">❓ $prob.text</div> <div class="mechanism-hint" style="display: none;">💡 $prob.hint</div> <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 0.4rem;"> <button class="btn-hint">🧪 Show mechanism hint</button> <span class="ref">📘 MS Chouhan style</span> </div> </div> `).join(''); attachHintListeners();

.btn-hint:hover background: #e6f0ea; border-color: #2b7a4b;

// toggle hint mechanism (inline) function attachHintListeners() document.querySelectorAll('.btn-hint').forEach(btn => // remove existing listener to avoid duplicates (simple approach) const newBtn = btn.cloneNode(true); btn.parentNode.replaceChild(newBtn, btn); newBtn.addEventListener('click', (e) => ); );

.mechanism-hint background: #f8fafc; padding: 0.75rem; border-radius: 18px; font-size: 0.85rem; color: #1f4e6e; border-left: 3px solid #3b9b6e; margin: 0.8rem 0; display: none; transition: 0.1s;

<script> // ---------- DATASET: typical MS Chouhan style problems with mechanisms ---------- const problemsDB = [ id: 1, chapter: "goc", chapterName: "General Organic Chemistry (GOC)", difficulty: "medium", text: "Arrange the following in increasing order of stability: carbocation (CH₃)₃C⁺ , (CH₃)₂CH⁺ , CH₃CH₂⁺ , CH₃⁺", hint: "Hyperconjugation & inductive effect: more alkyl groups → more stable. Order: methyl < ethyl < isopropyl < tert-butyl." , id: 2, chapter: "goc", chapterName: "General Organic Chemistry (GOC)", difficulty: "easy", text: "Which is more basic: aniline or cyclohexylamine? Explain.", hint: "Aniline lone pair delocalized into benzene ring → less available. Cyclohexylamine is more basic." , id: 3, chapter: "hydrocarbons", chapterName: "Hydrocarbons (Alkane, Alkene, Alkyne)", difficulty: "advanced", text: "Ozonolysis of an alkene gives propanone and ethanal. Identify the alkene.", hint: "Ozonolysis cleaves double bond. Propanone = (CH₃)₂C=O, ethanal = CH₃CHO. Alkene: 2-methylbut-2-ene." , id: 4, chapter: "haloalkanes", chapterName: "Haloalkanes & Haloarenes", difficulty: "medium", text: "Predict the major product of SN1 reaction: (CH₃)₃C-Br + H₂O → ?", hint: "SN1 with water gives tert-butyl alcohol via carbocation intermediate. Product: (CH₃)₃C–OH." , id: 5, chapter: "haloalkanes", chapterName: "Haloalkanes & Haloarenes", difficulty: "advanced", text: "Why does aryl halides not undergo SN2? Give mechanism reasoning.", hint: "Due to partial double bond character (resonance) and sp² hybridized carbon, backside attack is impossible. Also very poor leaving group under SN2." , id: 6, chapter: "alcohols", chapterName: "Alcohols, Phenols & Ethers", difficulty: "medium", text: "Dehydration of 2-methylcyclohexanol gives major product? (Saytzeff rule)", hint: "More substituted alkene: 1-methylcyclohexene is major (Saytzeff product)." , id: 7, chapter: "carbonyl", chapterName: "Aldehydes, Ketones & Acids", difficulty: "advanced", text: "Which is more reactive towards nucleophilic addition: formaldehyde or acetaldehyde? Why?", hint: "Formaldehyde (HCHO) has least steric hindrance and strongest electrophilic carbon. More reactive." , id: 8, chapter: "carbonyl", chapterName: "Aldehydes, Ketones & Acids", difficulty: "easy", text: "Write product of Aldol condensation of acetaldehyde.", hint: "Two molecules of CH₃CHO → β-hydroxybutyraldehyde then crotonaldehyde (α,β-unsaturated aldehyde) upon dehydration." , id: 9, chapter: "amines", chapterName: "Amines & Diazonium", difficulty: "medium", text: "Arrange in increasing basic strength: aniline, p-toluidine, p-nitroaniline.", hint: "p-NO₂ is electron-withdrawing → least basic. p-CH₃ donates electron → most basic among these. Order: p-nitroaniline < aniline < p-toluidine." , id: 10, chapter: "biomolecules", chapterName: "Biomolecules & Practical", difficulty: "easy", text: "Sucrose is non-reducing sugar. Why?", hint: "Both anomeric carbons (glucose & fructose) are involved in glycosidic bond, no free –CHO or –OH hemiacetal." , id: 11, chapter: "goc", chapterName: "General Organic Chemistry (GOC)", difficulty: "advanced", text: "Which is more acidic: phenol or ethanol? Explain resonance.", hint: "Phenoxide ion stabilized by resonance with ring, ethanol conjugate base less stable. Phenol > ethanol in acidity." , id: 12, chapter: "hydrocarbons", chapterName: "Hydrocarbons (Alkane, Alkene, Alkyne)", difficulty: "medium", text: "Product of anti addition of Br₂ to cyclohexene.", hint: "Trans-dibromocyclohexane (bromonium ion mechanism → anti addition)." , id: 13, chapter: "haloalkanes", chapterName: "Haloalkanes & Haloarenes", difficulty: "advanced", text: "Explain why SN2 reaction is faster in polar aprotic solvents (like DMSO).", hint: "Polar aprotic solvents do not solvate nucleophile much, increasing nucleophile's reactivity. Protic solvents hydrogen-bond with nucleophile." , id: 14, chapter: "carbonyl", chapterName: "Aldehydes, Ketones & Acids", difficulty: "advanced", text: "Benzaldehyde does NOT give Fehling's test but gives Tollens'. Reason?", hint: "Benzaldehyde is aromatic aldehyde: reduces Tollens' (Ag mirror) but not Fehling’s due to lower redox potential & enolization difficulty." , id: 15, chapter: "amines", chapterName: "Amines & Diazonium", difficulty: "medium", text: "Diazonium coupling with phenol gives which azo dye?", hint: "Electrophilic substitution at para position relative to OH group → p-hydroxyazobenzene." ];

// event listeners chapterFilter.addEventListener('change', updateFilters); difficultyFilter.addEventListener('change', updateFilters); searchInput.addEventListener('input', updateFilters); resetBtn.addEventListener('click', resetAllFilters);

let currentFilters = chapter: 'all', difficulty: 'all', search: '' ;

.reset-btn:hover background: #e2e8f0;