{"id":9383,"date":"2026-01-11T12:44:13","date_gmt":"2026-01-11T12:44:13","guid":{"rendered":"https:\/\/promotionexams.com\/?p=9383"},"modified":"2026-01-11T12:44:51","modified_gmt":"2026-01-11T12:44:51","slug":"flashcard-full-functional-code","status":"publish","type":"post","link":"https:\/\/promotionexams.com\/?p=9383","title":{"rendered":"FLASHCARD -FULL FUNCTIONAL CODE"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Premium Flashcards - Constitution of India | CSS Adda<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n \/* ===== ROOT VARIABLES ===== *\/\n :root {\n --primary-blue: #1e3a8a;\n --primary-blue-dark: #0d2347;\n --primary-blue-light: #2563EB;\n --primary-blue-hover: #1d4ed8;\n --accent-orange: #ff6b35;\n --accent-orange-dark: #d97706;\n --accent-orange-light: #f59e0b;\n --accent-gold: #d4a439;\n --white: #ffffff;\n --gray-50: #f8fafc;\n --gray-100: #f1f5f9;\n --gray-200: #e2e8f0;\n --gray-300: #d1d5db;\n --gray-400: #9ca3af;\n --gray-500: #64748b;\n --gray-600: #475569;\n --gray-700: #334155;\n --gray-800: #1e293b;\n --gray-900: #0f172a;\n --success: #10b981;\n --success-light: #d1fae5;\n --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);\n --shadow-md: 0 4px 20px rgba(0,0,0,0.12);\n --shadow-lg: 0 10px 40px rgba(0,0,0,0.15);\n --shadow-xl: 0 25px 50px rgba(0,0,0,0.2);\n --shadow-blue: 0 10px 40px rgba(30, 58, 138, 0.3);\n --shadow-orange: 0 10px 40px rgba(255, 107, 53, 0.3);\n --radius: 8px;\n --radius-md: 12px;\n --radius-lg: 16px;\n --radius-xl: 24px;\n --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n --sidebar-width: 280px;\n }\n\n \/* ===== RESET FOR THIS COMPONENT ===== *\/\n .flashcard-app * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n \/* ===== ANIMATIONS ===== *\/\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n }\n\n @keyframes shimmer {\n 0% { background-position: -200% center; }\n 100% { background-position: 200% center; }\n }\n\n @keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n\n \/* ===== MAIN FLASHCARD APP CONTAINER ===== *\/\n .flashcard-app {\n font-family: 'Poppins', sans-serif;\n background: var(--gray-100);\n color: var(--gray-800);\n line-height: 1.6;\n min-height: 700px;\n display: flex;\n border-radius: var(--radius-lg);\n overflow: hidden;\n box-shadow: var(--shadow-lg);\n border: 1px solid var(--gray-200);\n position: relative;\n }\n\n \/* ===== SIDEBAR ===== *\/\n .flashcard-sidebar {\n width: var(--sidebar-width);\n background: var(--white);\n display: flex;\n flex-direction: column;\n border-right: 1px solid var(--gray-200);\n flex-shrink: 0;\n }\n\n \/* Progress Section *\/\n .progress-section {\n padding: 20px;\n background: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 100%);\n }\n\n .progress-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n }\n\n .progress-title {\n color: var(--white);\n font-size: 0.85rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .progress-title i {\n color: var(--accent-orange-light);\n }\n\n .progress-stats {\n color: var(--accent-orange-light);\n font-size: 0.9rem;\n font-weight: 700;\n }\n\n .progress-bar-container {\n height: 10px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 10px;\n overflow: hidden;\n position: relative;\n }\n\n .progress-bar {\n height: 100%;\n background: linear-gradient(90deg, var(--success) 0%, #34d399 100%);\n border-radius: 10px;\n transition: width 0.5s ease;\n position: relative;\n }\n\n .progress-bar::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\n background-size: 200% 100%;\n animation: shimmer 2s infinite;\n }\n\n .progress-info {\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n font-size: 0.75rem;\n color: rgba(255, 255, 255, 0.8);\n }\n\n .progress-info span {\n display: flex;\n align-items: center;\n gap: 5px;\n }\n\n .progress-info i {\n font-size: 0.7rem;\n }\n\n \/* Topics Navigation *\/\n .topics-nav {\n flex: 1;\n overflow-y: auto;\n padding: 10px 0;\n }\n\n .topics-nav::-webkit-scrollbar {\n width: 6px;\n }\n\n .topics-nav::-webkit-scrollbar-track {\n background: var(--gray-100);\n }\n\n .topics-nav::-webkit-scrollbar-thumb {\n background: var(--gray-300);\n border-radius: 3px;\n }\n\n .topics-nav::-webkit-scrollbar-thumb:hover {\n background: var(--gray-400);\n }\n\n .nav-section-title {\n padding: 12px 20px;\n font-size: 0.7rem;\n color: var(--gray-500);\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 2px;\n }\n\n .topic-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 20px;\n color: var(--gray-700);\n cursor: pointer;\n transition: var(--transition);\n position: relative;\n border-left: 4px solid transparent;\n }\n\n .topic-item:hover {\n background: var(--gray-50);\n color: var(--primary-blue);\n border-left-color: var(--accent-orange-light);\n }\n\n .topic-item.active {\n background: linear-gradient(90deg, rgba(37, 99, 235, 0.1), transparent);\n color: var(--primary-blue);\n border-left-color: var(--accent-orange);\n }\n\n .topic-icon {\n width: 36px;\n height: 36px;\n background: var(--gray-100);\n border-radius: var(--radius);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.9rem;\n color: var(--gray-500);\n transition: var(--transition);\n }\n\n .topic-item:hover .topic-icon,\n .topic-item.active .topic-icon {\n background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-light) 100%);\n color: var(--white);\n transform: scale(1.05);\n }\n\n .topic-info {\n flex: 1;\n min-width: 0;\n }\n\n .topic-name {\n font-size: 0.82rem;\n font-weight: 600;\n line-height: 1.3;\n margin-bottom: 2px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .topic-meta {\n font-size: 0.68rem;\n color: var(--gray-500);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .topic-meta span {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .topic-progress {\n width: 32px;\n height: 32px;\n position: relative;\n }\n\n .topic-progress svg {\n transform: rotate(-90deg);\n }\n\n .topic-progress-bg {\n fill: none;\n stroke: var(--gray-200);\n stroke-width: 3;\n }\n\n .topic-progress-fill {\n fill: none;\n stroke: var(--success);\n stroke-width: 3;\n stroke-linecap: round;\n transition: stroke-dashoffset 0.5s ease;\n }\n\n .topic-progress-text {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.55rem;\n font-weight: 700;\n color: var(--gray-600);\n }\n\n \/* Sidebar Footer *\/\n .sidebar-footer {\n padding: 15px 20px;\n border-top: 1px solid var(--gray-200);\n background: var(--gray-50);\n }\n\n .reset-btn {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 10px 16px;\n background: var(--white);\n border: 1px solid var(--gray-300);\n color: var(--gray-600);\n border-radius: var(--radius);\n font-family: 'Poppins', sans-serif;\n font-size: 0.8rem;\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n }\n\n .reset-btn:hover {\n background: #fee2e2;\n border-color: #fca5a5;\n color: #dc2626;\n }\n\n \/* ===== MAIN CONTENT ===== *\/\n .flashcard-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 100%);\n min-width: 0;\n }\n\n \/* Content Header *\/\n .content-header {\n background: var(--white);\n border-bottom: 1px solid var(--gray-200);\n padding: 15px 25px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .content-title {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .content-title h3 {\n font-family: 'Plus Jakarta Sans', sans-serif;\n font-size: 1.1rem;\n font-weight: 700;\n color: var(--gray-800);\n }\n\n .topic-badge {\n background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);\n color: var(--white);\n padding: 5px 12px;\n border-radius: 50px;\n font-size: 0.7rem;\n font-weight: 700;\n }\n\n .content-actions {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .action-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n background: var(--gray-100);\n border: 1px solid var(--gray-200);\n color: var(--gray-700);\n border-radius: 50px;\n font-family: 'Poppins', sans-serif;\n font-size: 0.8rem;\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n }\n\n .action-btn:hover {\n background: var(--gray-200);\n transform: translateY(-1px);\n }\n\n .action-btn.primary {\n background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-light) 100%);\n border: none;\n color: var(--white);\n }\n\n .action-btn.primary:hover {\n box-shadow: var(--shadow-orange);\n }\n\n \/* Flashcard Area *\/\n .flashcard-area {\n flex: 1;\n padding: 30px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n overflow: hidden;\n }\n\n \/* Background Effects *\/\n .flashcard-area::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.04) 0%, transparent 50%),\n radial-gradient(circle at 70% 70%, rgba(255, 107, 53, 0.04) 0%, transparent 50%);\n animation: float 20s ease-in-out infinite;\n pointer-events: none;\n }\n\n \/* Card Navigation Info *\/\n .card-nav-info {\n display: flex;\n align-items: center;\n gap: 20px;\n margin-bottom: 25px;\n animation: fadeIn 0.5s ease;\n position: relative;\n z-index: 1;\n }\n\n .card-counter {\n display: flex;\n align-items: center;\n gap: 10px;\n background: var(--white);\n padding: 10px 22px;\n border-radius: 50px;\n border: 1px solid var(--gray-200);\n box-shadow: var(--shadow-sm);\n }\n\n .card-counter-current {\n font-family: 'Plus Jakarta Sans', sans-serif;\n font-size: 1.6rem;\n font-weight: 800;\n color: var(--accent-orange);\n }\n\n .card-counter-separator {\n color: var(--gray-300);\n font-size: 1.2rem;\n }\n\n .card-counter-total {\n font-size: 1rem;\n font-weight: 600;\n color: var(--gray-500);\n }\n\n .card-status {\n display: flex;\n gap: 8px;\n }\n\n .status-pill {\n display: flex;\n align-items: center;\n gap: 5px;\n padding: 7px 12px;\n border-radius: 50px;\n font-size: 0.72rem;\n font-weight: 600;\n }\n\n .status-pill.viewed {\n background: var(--success-light);\n color: var(--success);\n border: 1px solid rgba(16, 185, 129, 0.3);\n }\n\n .status-pill.remaining {\n background: var(--white);\n color: var(--gray-600);\n border: 1px solid var(--gray-200);\n }\n\n \/* Flashcard Container *\/\n .flashcard-container {\n perspective: 2000px;\n width: 100%;\n max-width: 600px;\n height: 380px;\n position: relative;\n z-index: 1;\n margin-bottom: 25px;\n }\n\n .flashcard {\n width: 100%;\n height: 100%;\n position: relative;\n transform-style: preserve-3d;\n transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n cursor: pointer;\n }\n\n .flashcard.flipped {\n transform: rotateY(180deg);\n }\n\n .flashcard-face {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n border-radius: var(--radius-xl);\n overflow: hidden;\n box-shadow: var(--shadow-xl);\n }\n\n \/* Front Face *\/\n .flashcard-front {\n background: var(--white);\n display: flex;\n flex-direction: column;\n border: 2px solid var(--gray-200);\n }\n\n .flashcard-front-header {\n background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);\n padding: 16px 22px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .front-badge {\n display: flex;\n align-items: center;\n gap: 8px;\n background: rgba(255, 255, 255, 0.2);\n padding: 6px 12px;\n border-radius: 50px;\n color: var(--white);\n font-size: 0.72rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n\n .front-number {\n color: var(--accent-orange-light);\n font-size: 0.8rem;\n font-weight: 700;\n }\n\n .flashcard-front-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 30px;\n position: relative;\n background: var(--white);\n }\n\n \/* Watermark - Only on cards *\/\n .watermark {\n position: absolute;\n width: 160px;\n height: 160px;\n opacity: 0.06;\n pointer-events: none;\n z-index: 0;\n }\n\n .front-question {\n font-family: 'Plus Jakarta Sans', sans-serif;\n font-size: 1.25rem;\n font-weight: 700;\n color: var(--gray-800);\n text-align: center;\n line-height: 1.5;\n position: relative;\n z-index: 1;\n }\n\n .flashcard-front-footer {\n padding: 15px 22px;\n background: var(--gray-50);\n border-top: 1px solid var(--gray-200);\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n color: var(--gray-500);\n font-size: 0.78rem;\n }\n\n .flashcard-front-footer i {\n color: var(--primary-blue);\n font-size: 1rem;\n }\n\n \/* Back Face *\/\n .flashcard-back {\n background: linear-gradient(145deg, var(--primary-blue-dark) 0%, var(--primary-blue) 100%);\n transform: rotateY(180deg);\n display: flex;\n flex-direction: column;\n border: 2px solid var(--primary-blue-dark);\n }\n\n .flashcard-back-header {\n background: rgba(0, 0, 0, 0.2);\n padding: 16px 22px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .back-badge {\n display: flex;\n align-items: center;\n gap: 8px;\n background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-light) 100%);\n padding: 6px 12px;\n border-radius: 50px;\n color: var(--white);\n font-size: 0.72rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n\n .back-number {\n color: var(--accent-orange-light);\n font-size: 0.8rem;\n font-weight: 700;\n }\n\n .flashcard-back-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 30px;\n position: relative;\n overflow-y: auto;\n }\n\n .flashcard-back-content::-webkit-scrollbar {\n width: 6px;\n }\n\n .flashcard-back-content::-webkit-scrollbar-track {\n background: rgba(255, 255, 255, 0.05);\n }\n\n .flashcard-back-content::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.2);\n border-radius: 3px;\n }\n\n .watermark-back {\n position: absolute;\n width: 160px;\n height: 160px;\n opacity: 0.08;\n pointer-events: none;\n z-index: 0;\n }\n\n .back-answer {\n font-size: 1rem;\n color: var(--white);\n text-align: center;\n line-height: 1.7;\n position: relative;\n z-index: 1;\n }\n\n .back-answer strong {\n color: var(--accent-orange-light);\n }\n\n .back-answer ul {\n text-align: left;\n margin: 12px 0;\n padding-left: 25px;\n }\n\n .back-answer li {\n margin-bottom: 8px;\n }\n\n .flashcard-back-footer {\n padding: 15px 22px;\n background: rgba(0, 0, 0, 0.2);\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n color: rgba(255, 255, 255, 0.7);\n font-size: 0.78rem;\n }\n\n .flashcard-back-footer i {\n color: var(--accent-orange-light);\n font-size: 1rem;\n }\n\n \/* Navigation Controls *\/\n .flashcard-controls {\n display: flex;\n align-items: center;\n gap: 15px;\n position: relative;\n z-index: 1;\n }\n\n .nav-btn {\n width: 50px;\n height: 50px;\n background: var(--white);\n border: 1px solid var(--gray-200);\n border-radius: 50%;\n color: var(--gray-600);\n font-size: 1.1rem;\n cursor: pointer;\n transition: var(--transition);\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: var(--shadow-sm);\n }\n\n .nav-btn:hover:not(:disabled) {\n background: var(--primary-blue);\n border-color: var(--primary-blue);\n color: var(--white);\n transform: scale(1.1);\n box-shadow: var(--shadow-blue);\n }\n\n .nav-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n }\n\n .flip-btn {\n padding: 14px 30px;\n background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-light) 100%);\n border: none;\n border-radius: 50px;\n color: var(--white);\n font-family: 'Poppins', sans-serif;\n font-size: 0.9rem;\n font-weight: 700;\n cursor: pointer;\n transition: var(--transition);\n display: flex;\n align-items: center;\n gap: 10px;\n box-shadow: var(--shadow-orange);\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n\n .flip-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 20px 50px rgba(255, 107, 53, 0.4);\n }\n\n .flip-btn i {\n transition: transform 0.3s ease;\n }\n\n .flip-btn:hover i {\n transform: rotateY(180deg);\n }\n\n \/* Keyboard Hints *\/\n .keyboard-hints {\n display: flex;\n gap: 20px;\n margin-top: 20px;\n position: relative;\n z-index: 1;\n }\n\n .hint-item {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--gray-400);\n font-size: 0.72rem;\n }\n\n .key {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 30px;\n height: 26px;\n padding: 0 8px;\n background: var(--white);\n border: 1px solid var(--gray-300);\n border-radius: 5px;\n font-size: 0.68rem;\n font-weight: 600;\n color: var(--gray-600);\n box-shadow: 0 2px 0 var(--gray-200);\n }\n\n \/* ===== COMPLETION MODAL ===== *\/\n .completion-modal {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.7);\n backdrop-filter: blur(8px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2000;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n }\n\n .completion-modal.active {\n opacity: 1;\n visibility: visible;\n }\n\n .completion-content {\n background: var(--white);\n border-radius: var(--radius-xl);\n padding: 40px;\n text-align: center;\n max-width: 420px;\n transform: scale(0.9);\n transition: transform 0.3s ease;\n box-shadow: var(--shadow-xl);\n }\n\n .completion-modal.active .completion-content {\n transform: scale(1);\n }\n\n .completion-icon {\n width: 80px;\n height: 80px;\n background: linear-gradient(135deg, var(--success) 0%, #059669 100%);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 18px;\n font-size: 2.2rem;\n color: var(--white);\n animation: pulse 1s ease-in-out infinite;\n }\n\n .completion-content h2 {\n font-family: 'Plus Jakarta Sans', sans-serif;\n font-size: 1.6rem;\n font-weight: 800;\n color: var(--gray-800);\n margin-bottom: 10px;\n }\n\n .completion-content p {\n color: var(--gray-600);\n font-size: 0.9rem;\n margin-bottom: 22px;\n line-height: 1.6;\n }\n\n .completion-stats {\n display: flex;\n justify-content: center;\n gap: 25px;\n margin-bottom: 22px;\n }\n\n .stat-item {\n text-align: center;\n }\n\n .stat-value {\n font-family: 'Plus Jakarta Sans', sans-serif;\n font-size: 2rem;\n font-weight: 800;\n color: var(--primary-blue);\n }\n\n .stat-label {\n font-size: 0.78rem;\n color: var(--gray-500);\n }\n\n .completion-actions {\n display: flex;\n gap: 10px;\n justify-content: center;\n }\n\n .completion-btn {\n padding: 12px 22px;\n border-radius: 50px;\n font-family: 'Poppins', sans-serif;\n font-size: 0.82rem;\n font-weight: 700;\n cursor: pointer;\n transition: var(--transition);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .completion-btn.primary {\n background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-light) 100%);\n border: none;\n color: var(--white);\n box-shadow: var(--shadow-orange);\n }\n\n .completion-btn.secondary {\n background: var(--white);\n border: 2px solid var(--gray-200);\n color: var(--gray-700);\n }\n\n .completion-btn:hover {\n transform: translateY(-2px);\n }\n\n \/* ===== MOBILE TOGGLE ===== *\/\n .mobile-sidebar-toggle {\n display: none;\n position: absolute;\n top: 15px;\n left: 15px;\n width: 42px;\n height: 42px;\n background: var(--white);\n border: 1px solid var(--gray-200);\n border-radius: var(--radius);\n color: var(--gray-700);\n font-size: 1.1rem;\n cursor: pointer;\n z-index: 50;\n box-shadow: var(--shadow-sm);\n }\n\n .mobile-sidebar-toggle:hover {\n background: var(--gray-100);\n }\n\n \/* Sidebar overlay for mobile *\/\n .sidebar-overlay {\n display: none;\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 40;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .sidebar-overlay.active {\n display: block;\n opacity: 1;\n }\n\n \/* ===== RESPONSIVE ===== *\/\n @media (max-width: 900px) {\n .flashcard-sidebar {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n z-index: 100;\n transform: translateX(-100%);\n transition: transform 0.3s ease;\n }\n\n .flashcard-sidebar.open {\n transform: translateX(0);\n }\n\n .mobile-sidebar-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .flashcard-main {\n margin-left: 0;\n }\n\n .content-header {\n padding-left: 70px;\n }\n\n .flashcard-container {\n max-width: 100%;\n height: 350px;\n }\n\n .front-question {\n font-size: 1.1rem;\n }\n\n .back-answer {\n font-size: 0.92rem;\n }\n }\n\n @media (max-width: 600px) {\n .flashcard-app {\n min-height: 600px;\n border-radius: var(--radius-md);\n }\n\n .flashcard-area {\n padding: 20px 15px;\n }\n\n .card-nav-info {\n flex-direction: column;\n gap: 10px;\n }\n\n .card-counter {\n padding: 8px 18px;\n }\n\n .card-counter-current {\n font-size: 1.4rem;\n }\n\n .flashcard-container {\n height: 320px;\n }\n\n .flashcard-front-header,\n .flashcard-back-header {\n padding: 12px 16px;\n }\n\n .flashcard-front-content,\n .flashcard-back-content {\n padding: 20px 16px;\n }\n\n .front-question {\n font-size: 1rem;\n }\n\n .back-answer {\n font-size: 0.88rem;\n }\n\n .watermark,\n .watermark-back {\n width: 120px;\n height: 120px;\n }\n\n .flashcard-controls {\n gap: 10px;\n }\n\n .nav-btn {\n width: 44px;\n height: 44px;\n font-size: 1rem;\n }\n\n .flip-btn {\n padding: 12px 22px;\n font-size: 0.82rem;\n }\n\n .keyboard-hints {\n display: none;\n }\n\n .content-header {\n padding: 12px 15px;\n padding-left: 60px;\n }\n\n .content-title h3 {\n font-size: 0.95rem;\n }\n\n .action-btn span {\n display: none;\n }\n\n .action-btn {\n padding: 8px 12px;\n }\n\n .card-status {\n flex-wrap: wrap;\n justify-content: center;\n }\n\n .completion-content {\n padding: 28px 20px;\n margin: 15px;\n }\n\n .completion-stats {\n gap: 18px;\n }\n\n .stat-value {\n font-size: 1.6rem;\n }\n\n .completion-actions {\n flex-direction: column;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <!-- ===== FLASHCARD APP COMPONENT ===== -->\n <!-- This entire div can be placed inside your WordPress page -->\n <div class=\"flashcard-app\" id=\"flashcardApp\">\n \n <!-- Sidebar Overlay for Mobile -->\n <div class=\"sidebar-overlay\" id=\"sidebarOverlay\"><\/div>\n\n <!-- Mobile Sidebar Toggle -->\n <button class=\"mobile-sidebar-toggle\" id=\"mobileSidebarToggle\">\n <i class=\"fas fa-bars\"><\/i>\n <\/button>\n\n <!-- ===== SIDEBAR ===== -->\n <aside class=\"flashcard-sidebar\" id=\"flashcardSidebar\">\n <!-- Progress Section -->\n <div class=\"progress-section\">\n <div class=\"progress-header\">\n <span class=\"progress-title\">\n <i class=\"fas fa-chart-line\"><\/i>\n Overall Progress\n <\/span>\n <span class=\"progress-stats\" id=\"overallProgressText\">0%<\/span>\n <\/div>\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" id=\"overallProgressBar\" style=\"width: 0%\"><\/div>\n <\/div>\n <div class=\"progress-info\">\n <span><i class=\"fas fa-check-circle\"><\/i> <span id=\"totalViewed\">0<\/span> viewed<\/span>\n <span><i class=\"fas fa-layer-group\"><\/i> <span id=\"totalCards\">0<\/span> total<\/span>\n <\/div>\n <\/div>\n\n <!-- Topics Navigation -->\n <nav class=\"topics-nav\" id=\"topicsNav\">\n <div class=\"nav-section-title\">Topics<\/div>\n <!-- Topics will be dynamically inserted here -->\n <\/nav>\n\n <!-- Sidebar Footer -->\n <div class=\"sidebar-footer\">\n <button class=\"reset-btn\" onclick=\"resetProgress()\">\n <i class=\"fas fa-redo-alt\"><\/i>\n Reset Progress\n <\/button>\n <\/div>\n <\/aside>\n\n <!-- ===== MAIN CONTENT ===== -->\n <main class=\"flashcard-main\">\n <!-- Content Header -->\n <div class=\"content-header\">\n <div class=\"content-title\">\n <h3 id=\"currentTopicTitle\">Preamble<\/h3>\n <span class=\"topic-badge\" id=\"currentTopicBadge\">12 Cards<\/span>\n <\/div>\n <div class=\"content-actions\">\n <button class=\"action-btn\" onclick=\"shuffleCards()\">\n <i class=\"fas fa-random\"><\/i>\n <span>Shuffle<\/span>\n <\/button>\n <a href=\"\/?page_id=4602\u2197\" class=\"action-btn primary\">\n <i class=\"fas fa-th-large\"><\/i>\n <span>My Prep<\/span>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- Flashcard Area -->\n <div class=\"flashcard-area\">\n <!-- Card Navigation Info -->\n <div class=\"card-nav-info\">\n <div class=\"card-counter\">\n <span class=\"card-counter-current\" id=\"currentCardNum\">1<\/span>\n <span class=\"card-counter-separator\">\/<\/span>\n <span class=\"card-counter-total\" id=\"totalCardNum\">12<\/span>\n <\/div>\n <div class=\"card-status\">\n <span class=\"status-pill viewed\">\n <i class=\"fas fa-check-circle\"><\/i>\n <span id=\"viewedCount\">0<\/span> Viewed\n <\/span>\n <span class=\"status-pill remaining\">\n <i class=\"fas fa-clock\"><\/i>\n <span id=\"remainingCount\">12<\/span> Remaining\n <\/span>\n <\/div>\n <\/div>\n\n <!-- Flashcard Container -->\n <div class=\"flashcard-container\">\n <div class=\"flashcard\" id=\"flashcard\" onclick=\"flipCard()\">\n <!-- Front Face -->\n <div class=\"flashcard-face flashcard-front\">\n <div class=\"flashcard-front-header\">\n <span class=\"front-badge\">\n <i class=\"fas fa-question-circle\"><\/i>\n Question\n <\/span>\n <span class=\"front-number\" id=\"frontCardNumber\">Card 1 of 12<\/span>\n <\/div>\n <div class=\"flashcard-front-content\">\n <img decoding=\"async\" src=\"https:\/\/cssadda.in\/wp-content\/uploads\/2024\/01\/CSS-ADDA-Logo-icon1.png\" alt=\"Watermark\" class=\"watermark\">\n <p class=\"front-question\" id=\"questionText\">\n What are the key ideals mentioned in the Preamble of the Indian Constitution?\n <\/p>\n <\/div>\n <div class=\"flashcard-front-footer\">\n <i class=\"fas fa-hand-pointer\"><\/i>\n Click or press Space to reveal answer\n <\/div>\n <\/div>\n\n <!-- Back Face -->\n <div class=\"flashcard-face flashcard-back\">\n <div class=\"flashcard-back-header\">\n <span class=\"back-badge\">\n <i class=\"fas fa-lightbulb\"><\/i>\n Answer\n <\/span>\n <span class=\"back-number\" id=\"backCardNumber\">Card 1 of 12<\/span>\n <\/div>\n <div class=\"flashcard-back-content\">\n <img decoding=\"async\" src=\"https:\/\/cssadda.in\/wp-content\/uploads\/2024\/01\/CSS-ADDA-Logo-icon1.png\" alt=\"Watermark\" class=\"watermark-back\">\n <div class=\"back-answer\" id=\"answerText\">\n The Preamble declares India as a <strong>Sovereign, Socialist, Secular, Democratic Republic<\/strong> and aims to secure:\n <ul>\n <li><strong>Justice<\/strong> - Social, Economic, and Political<\/li>\n <li><strong>Liberty<\/strong> - of thought, expression, belief, faith and worship<\/li>\n <li><strong>Equality<\/strong> - of status and opportunity<\/li>\n <li><strong>Fraternity<\/strong> - assuring dignity of the individual and unity of the Nation<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"flashcard-back-footer\">\n <i class=\"fas fa-sync-alt\"><\/i>\n Click or press Space to flip back\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Navigation Controls -->\n <div class=\"flashcard-controls\">\n <button class=\"nav-btn\" id=\"prevBtn\" onclick=\"prevCard()\" disabled>\n <i class=\"fas fa-chevron-left\"><\/i>\n <\/button>\n <button class=\"flip-btn\" onclick=\"flipCard()\">\n <i class=\"fas fa-sync-alt\"><\/i>\n Flip Card\n <\/button>\n <button class=\"nav-btn\" id=\"nextBtn\" onclick=\"nextCard()\">\n <i class=\"fas fa-chevron-right\"><\/i>\n <\/button>\n <\/div>\n\n <!-- Keyboard Hints -->\n <div class=\"keyboard-hints\">\n <div class=\"hint-item\">\n <span class=\"key\">\u2190<\/span>\n Previous\n <\/div>\n <div class=\"hint-item\">\n <span class=\"key\">Space<\/span>\n Flip\n <\/div>\n <div class=\"hint-item\">\n <span class=\"key\">\u2192<\/span>\n Next\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n <\/div>\n\n <!-- Completion Modal -->\n <div class=\"completion-modal\" id=\"completionModal\">\n <div class=\"completion-content\">\n <div class=\"completion-icon\">\n <i class=\"fas fa-trophy\"><\/i>\n <\/div>\n <h2>Topic Completed! \ud83c\udf89<\/h2>\n <p>Congratulations! You've reviewed all flashcards in this topic.<\/p>\n <div class=\"completion-stats\">\n <div class=\"stat-item\">\n <div class=\"stat-value\" id=\"completedCards\">12<\/div>\n <div class=\"stat-label\">Cards Reviewed<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\" id=\"completionPercentage\">100%<\/div>\n <div class=\"stat-label\">Progress<\/div>\n <\/div>\n <\/div>\n <div class=\"completion-actions\">\n <button class=\"completion-btn primary\" onclick=\"goToNextTopic()\">\n <i class=\"fas fa-arrow-right\"><\/i>\n Next Topic\n <\/button>\n <button class=\"completion-btn secondary\" onclick=\"closeCompletionModal()\">\n <i class=\"fas fa-redo\"><\/i>\n Review Again\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- ===== JAVASCRIPT ===== -->\n <script>\n \/\/ ===== CONFIGURATION =====\n const CONFIG = {\n courseId: 'constitution-of-india',\n courseName: 'Constitution of India',\n logoUrl: 'https:\/\/cssadda.in\/wp-content\/uploads\/2024\/01\/CSS-ADDA-Logo-icon1.png',\n myPrepUrl: '\/my-prep'\n };\n\n \/\/ ===== FLASHCARD DATA =====\n const FLASHCARD_DATA = {\n 'preamble': {\n name: 'Preamble',\n icon: 'fa-scroll',\n cards: [\n {\n question: 'What are the key ideals mentioned in the Preamble of the Indian Constitution?',\n answer: 'The Preamble declares India as a <strong>Sovereign, Socialist, Secular, Democratic Republic<\/strong> and aims to secure:<ul><li><strong>Justice<\/strong> - Social, Economic, and Political<\/li><li><strong>Liberty<\/strong> - of thought, expression, belief, faith and worship<\/li><li><strong>Equality<\/strong> - of status and opportunity<\/li><li><strong>Fraternity<\/strong> - assuring dignity of the individual and unity of the Nation<\/li><\/ul>'\n },\n {\n question: 'When was the word \"Socialist\" added to the Preamble?',\n answer: 'The word <strong>\"Socialist\"<\/strong> was added to the Preamble by the <strong>42nd Constitutional Amendment Act, 1976<\/strong>. It signifies that the state shall strive to eliminate inequality in income, status, and standards of living.'\n },\n {\n question: 'What does \"Sovereign\" mean in the context of the Indian Constitution?',\n answer: '<strong>Sovereign<\/strong> means India is neither a dependency nor a dominion of any other nation. It is an independent state with full power to conduct its own affairs both internally and externally without any external interference.'\n },\n {\n question: 'What is the significance of \"Secular\" in the Preamble?',\n answer: '<strong>Secular<\/strong> means the state has no official religion. All religions are equal and the state does not discriminate on the basis of religion. Citizens are free to profess, practice, and propagate any religion of their choice.'\n },\n {\n question: 'Who proposed the objectives that later became the Preamble?',\n answer: '<strong>Jawaharlal Nehru<\/strong> proposed the \"Objectives Resolution\" on December 13, 1946, which was adopted on January 22, 1947. This resolution later became the Preamble to the Constitution with some modifications.'\n },\n {\n question: 'Is the Preamble a part of the Constitution?',\n answer: 'Yes, as per the Supreme Court\\'s landmark judgment in <strong>Kesavananda Bharati case (1973)<\/strong>, the Preamble is a part of the Constitution. It can be amended under Article 368 but the basic structure cannot be altered.'\n },\n {\n question: 'What does \"Democratic Republic\" signify?',\n answer: '<strong>Democratic<\/strong> - Political sovereignty vests in the people who govern themselves through elected representatives.<br><br><strong>Republic<\/strong> - The head of state (President) is elected and not hereditary. There is no privileged class and all offices are open to all citizens.'\n },\n {\n question: 'When was the Constitution of India adopted?',\n answer: 'The Constitution was <strong>adopted on November 26, 1949<\/strong> by the Constituent Assembly. It <strong>came into effect on January 26, 1950<\/strong>, which is celebrated as Republic Day.'\n },\n {\n question: 'What does \"We the People\" signify in the Preamble?',\n answer: '<strong>\"We the People\"<\/strong> signifies that the Constitution derives its authority from the people of India. It emphasizes popular sovereignty - the ultimate power lies with the citizens who enacted and gave the Constitution to themselves.'\n },\n {\n question: 'Which words were added to the Preamble by the 42nd Amendment?',\n answer: 'The <strong>42nd Constitutional Amendment (1976)<\/strong> added three words:<ul><li><strong>Socialist<\/strong><\/li><li><strong>Secular<\/strong><\/li><li><strong>Integrity<\/strong> (along with unity)<\/li><\/ul>These additions reinforced the commitment to social justice, religious neutrality, and national unity.'\n },\n {\n question: 'Can the Preamble be used for interpreting the Constitution?',\n answer: 'Yes, the Preamble serves as a <strong>guiding light<\/strong> for interpretation. In case of ambiguity in any provision, the Preamble can be referred to for clarity. However, it cannot override the express provisions of the Constitution.'\n },\n {\n question: 'What is the difference between Justice - Social, Economic, and Political?',\n answer: '<strong>Social Justice:<\/strong> Equal treatment irrespective of caste, color, religion, sex<br><br><strong>Economic Justice:<\/strong> No discrimination based on wealth; equal economic opportunities<br><br><strong>Political Justice:<\/strong> Equal political rights and participation in governance regardless of social or economic status'\n }\n ]\n },\n 'fundamental-rights': {\n name: 'Fundamental Rights',\n icon: 'fa-balance-scale',\n cards: [\n {\n question: 'How many Fundamental Rights are guaranteed under Part III of the Constitution?',\n answer: 'Originally there were <strong>7 Fundamental Rights<\/strong>. After the 44th Amendment (1978), the Right to Property was deleted. Now there are <strong>6 Fundamental Rights<\/strong>:<ul><li>Right to Equality (Articles 14-18)<\/li><li>Right to Freedom (Articles 19-22)<\/li><li>Right against Exploitation (Articles 23-24)<\/li><li>Right to Freedom of Religion (Articles 25-28)<\/li><li>Cultural & Educational Rights (Articles 29-30)<\/li><li>Right to Constitutional Remedies (Article 32)<\/li><\/ul>'\n },\n {\n question: 'What is Article 14 about?',\n answer: '<strong>Article 14<\/strong> guarantees <strong>Equality before Law<\/strong> and <strong>Equal Protection of Laws<\/strong>. It prohibits discrimination and ensures that the state treats all persons equally in similar circumstances.'\n },\n {\n question: 'Which Article is called the \"Heart and Soul\" of the Constitution?',\n answer: '<strong>Article 32 (Right to Constitutional Remedies)<\/strong> was called the \"Heart and Soul\" of the Constitution by <strong>Dr. B.R. Ambedkar<\/strong>. It empowers citizens to approach the Supreme Court directly for enforcement of Fundamental Rights.'\n },\n {\n question: 'What are the six freedoms guaranteed under Article 19(1)?',\n answer: 'Article 19(1) guarantees six freedoms to citizens:<ul><li>(a) Freedom of Speech and Expression<\/li><li>(b) Freedom to Assemble Peacefully<\/li><li>(c) Freedom to Form Associations<\/li><li>(d) Freedom to Move Freely throughout India<\/li><li>(e) Freedom to Reside and Settle anywhere<\/li><li>(g) Freedom to Practice any Profession or Trade<\/li><\/ul><em>Note: Article 19(1)(f) - Right to Property was deleted by 44th Amendment<\/em>'\n },\n {\n question: 'Which Fundamental Right can never be suspended, even during Emergency?',\n answer: '<strong>Article 20<\/strong> (Protection against conviction for offences) and <strong>Article 21<\/strong> (Protection of Life and Personal Liberty) cannot be suspended even during a National Emergency as per Article 359.'\n },\n {\n question: 'What does Article 21 guarantee?',\n answer: '<strong>Article 21<\/strong> states: \"No person shall be deprived of his life or personal liberty except according to procedure established by law.\"<br><br>Through judicial interpretation, it now includes Right to:<ul><li>Live with dignity<\/li><li>Privacy<\/li><li>Clean Environment<\/li><li>Education<\/li><li>Health<\/li><li>Speedy Trial<\/li><\/ul>'\n }\n ]\n },\n 'dpsp': {\n name: 'Directive Principles',\n icon: 'fa-compass',\n cards: [\n {\n question: 'What are Directive Principles of State Policy?',\n answer: '<strong>Directive Principles of State Policy (DPSP)<\/strong> are contained in <strong>Part IV (Articles 36-51)<\/strong> of the Constitution. They are guidelines for the state to establish social and economic democracy in the country. They are <strong>non-justiciable<\/strong> (not enforceable in courts).'\n },\n {\n question: 'From which country were DPSPs borrowed?',\n answer: 'The concept of DPSPs was borrowed from the <strong>Irish Constitution<\/strong>, which in turn was influenced by the Spanish Constitution. Dr. B.R. Ambedkar described them as \"novel features\" of the Indian Constitution.'\n },\n {\n question: 'Which Article talks about Uniform Civil Code?',\n answer: '<strong>Article 44<\/strong> directs the state to endeavor to secure a <strong>Uniform Civil Code<\/strong> for all citizens throughout the territory of India. It aims to replace personal laws based on religion with a common set of laws.'\n },\n {\n question: 'What is Article 39A about?',\n answer: '<strong>Article 39A<\/strong> directs the state to provide <strong>Free Legal Aid<\/strong> to ensure justice is not denied to any citizen by reason of economic or other disabilities. It was added by the <strong>42nd Amendment (1976)<\/strong>.'\n }\n ]\n },\n 'fundamental-duties': {\n name: 'Fundamental Duties',\n icon: 'fa-flag',\n cards: [\n {\n question: 'When were Fundamental Duties added to the Constitution?',\n answer: 'Fundamental Duties were added by the <strong>42nd Constitutional Amendment Act, 1976<\/strong> on the recommendation of the <strong>Swaran Singh Committee<\/strong>. They are contained in <strong>Part IV-A, Article 51A<\/strong>.'\n },\n {\n question: 'How many Fundamental Duties are there?',\n answer: 'There are <strong>11 Fundamental Duties<\/strong>. Originally 10 duties were added in 1976. The 11th duty regarding education was added by the <strong>86th Amendment (2002)<\/strong>.'\n },\n {\n question: 'From which country was the concept of Fundamental Duties borrowed?',\n answer: 'The concept of Fundamental Duties was borrowed from the <strong>Constitution of USSR (Russia)<\/strong>. The idea was to remind citizens that while enjoying rights, they also have duties towards the nation.'\n }\n ]\n },\n 'parliament': {\n name: 'Parliament',\n icon: 'fa-university',\n cards: [\n {\n question: 'What is the composition of the Indian Parliament?',\n answer: 'Indian Parliament consists of:<ul><li><strong>President of India<\/strong><\/li><li><strong>Rajya Sabha<\/strong> (Council of States) - Upper House<\/li><li><strong>Lok Sabha<\/strong> (House of the People) - Lower House<\/li><\/ul>As per Article 79, the Parliament comprises all three.'\n },\n {\n question: 'What is the maximum strength of Lok Sabha?',\n answer: 'Maximum strength of Lok Sabha is <strong>552 members<\/strong>:<ul><li>530 from States<\/li><li>20 from Union Territories<\/li><li>2 Anglo-Indians nominated by President (abolished by 104th Amendment, 2019)<\/li><\/ul>Present strength is 543 elected members.'\n },\n {\n question: 'What is a Money Bill?',\n answer: 'A <strong>Money Bill (Article 110)<\/strong> deals with taxation, borrowing, expenditure from Consolidated Fund, etc. It can only be introduced in <strong>Lok Sabha<\/strong>. Rajya Sabha can only make recommendations within 14 days.'\n }\n ]\n },\n 'president': {\n name: 'President',\n icon: 'fa-landmark',\n cards: [\n {\n question: 'How is the President of India elected?',\n answer: 'The President is elected by an <strong>Electoral College<\/strong> consisting of:<ul><li>Elected members of both Houses of Parliament<\/li><li>Elected members of State Legislative Assemblies<\/li><li>Elected members of Delhi and Puducherry Legislative Assemblies (70th Amendment)<\/li><\/ul>Election is by proportional representation with single transferable vote.'\n },\n {\n question: 'What is the term of the President?',\n answer: 'The President holds office for <strong>5 years<\/strong> from the date of assuming office. There is no limit on re-election. The President can resign by addressing resignation to the Vice-President.'\n },\n {\n question: 'What is the Ordinance making power of President?',\n answer: 'Under <strong>Article 123<\/strong>, President can promulgate ordinances when Parliament is not in session. Features:<ul><li>Must be laid before Parliament when it reassembles<\/li><li>Ceases to operate after 6 weeks of reassembly<\/li><li>Has same force as an Act of Parliament<\/li><li>President can withdraw it any time<\/li><\/ul>'\n }\n ]\n },\n 'amendments': {\n name: 'Amendments',\n icon: 'fa-edit',\n cards: [\n {\n question: 'How can the Constitution be amended?',\n answer: 'Article 368 provides for amendment. Three methods:<ul><li><strong>Simple Majority:<\/strong> Ordinary law-making process<\/li><li><strong>Special Majority:<\/strong> 2\/3rd of members present and voting + majority of total membership<\/li><li><strong>Special Majority + State Ratification:<\/strong> Above + ratification by 1\/2 of state legislatures<\/li><\/ul>'\n },\n {\n question: 'Which amendment is known as \"Mini Constitution\"?',\n answer: 'The <strong>42nd Amendment (1976)<\/strong> is called \"Mini Constitution\" because it made the largest number of changes. Key changes:<ul><li>Added \"Socialist, Secular, Integrity\" to Preamble<\/li><li>Added Fundamental Duties<\/li><li>Reduced power of Supreme Court<\/li><li>Extended Lok Sabha term to 6 years<\/li><\/ul>'\n }\n ]\n },\n 'emergency': {\n name: 'Emergency',\n icon: 'fa-exclamation-triangle',\n cards: [\n {\n question: 'What are the three types of Emergencies?',\n answer: 'Constitution provides for 3 emergencies:<ul><li><strong>National Emergency (Article 352):<\/strong> War, external aggression, armed rebellion<\/li><li><strong>State Emergency\/President\\'s Rule (Article 356):<\/strong> Failure of constitutional machinery<\/li><li><strong>Financial Emergency (Article 360):<\/strong> Financial stability threatened<\/li><\/ul>'\n },\n {\n question: 'How many times has National Emergency been declared?',\n answer: 'National Emergency has been declared <strong>3 times<\/strong>:<ul><li><strong>1962:<\/strong> Chinese aggression<\/li><li><strong>1971:<\/strong> Indo-Pak war<\/li><li><strong>1975-77:<\/strong> Internal disturbance (most controversial)<\/li><\/ul>After 44th Amendment, \"internal disturbance\" was replaced with \"armed rebellion\".'\n }\n ]\n }\n };\n\n \/\/ ===== STATE MANAGEMENT =====\n let currentTopic = 'preamble';\n let currentCardIndex = 0;\n let isFlipped = false;\n let progress = {};\n\n \/\/ ===== INITIALIZATION =====\n document.addEventListener('DOMContentLoaded', function() {\n loadProgress();\n initializeTopicsNav();\n loadTopic(currentTopic);\n setupKeyboardControls();\n setupMobileToggle();\n updateOverallProgress();\n });\n\n \/\/ ===== PROGRESS MANAGEMENT =====\n function loadProgress() {\n const saved = localStorage.getItem(`flashcard_progress_${CONFIG.courseId}`);\n if (saved) {\n const parsed = JSON.parse(saved);\n for (const topicId in parsed) {\n progress[topicId] = {\n viewed: new Set(parsed[topicId].viewed)\n };\n }\n } else {\n for (const topicId in FLASHCARD_DATA) {\n progress[topicId] = { viewed: new Set() };\n }\n }\n }\n\n function saveProgress() {\n const toSave = {};\n for (const topicId in progress) {\n toSave[topicId] = {\n viewed: Array.from(progress[topicId].viewed)\n };\n }\n localStorage.setItem(`flashcard_progress_${CONFIG.courseId}`, JSON.stringify(toSave));\n }\n\n function markCardAsViewed(topicId, cardIndex) {\n if (!progress[topicId]) {\n progress[topicId] = { viewed: new Set() };\n }\n progress[topicId].viewed.add(cardIndex);\n saveProgress();\n updateUI();\n }\n\n function resetProgress() {\n if (confirm('Are you sure you want to reset all progress? This cannot be undone.')) {\n for (const topicId in progress) {\n progress[topicId] = { viewed: new Set() };\n }\n saveProgress();\n updateUI();\n updateOverallProgress();\n initializeTopicsNav();\n }\n }\n\n \/\/ ===== TOPICS NAVIGATION =====\n function initializeTopicsNav() {\n const nav = document.getElementById('topicsNav');\n let html = '<div class=\"nav-section-title\">Topics<\/div>';\n \n for (const topicId in FLASHCARD_DATA) {\n const topic = FLASHCARD_DATA[topicId];\n const totalCards = topic.cards.length;\n const viewedCards = progress[topicId] ? progress[topicId].viewed.size : 0;\n const progressPercent = Math.round((viewedCards \/ totalCards) * 100);\n const circumference = 2 * Math.PI * 11;\n const offset = circumference - (progressPercent \/ 100) * circumference;\n \n html += `\n <div class=\"topic-item ${topicId === currentTopic ? 'active' : ''}\" \n data-topic=\"${topicId}\" \n onclick=\"loadTopic('${topicId}')\">\n <div class=\"topic-icon\">\n <i class=\"fas ${topic.icon}\"><\/i>\n <\/div>\n <div class=\"topic-info\">\n <div class=\"topic-name\">${topic.name}<\/div>\n <div class=\"topic-meta\">\n <span><i class=\"fas fa-clone\"><\/i> ${totalCards}<\/span>\n <span><i class=\"fas fa-check\"><\/i> ${viewedCards}<\/span>\n <\/div>\n <\/div>\n <div class=\"topic-progress\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <circle class=\"topic-progress-bg\" cx=\"16\" cy=\"16\" r=\"11\"><\/circle>\n <circle class=\"topic-progress-fill\" cx=\"16\" cy=\"16\" r=\"11\" \n stroke-dasharray=\"${circumference}\" \n stroke-dashoffset=\"${offset}\"><\/circle>\n <\/svg>\n <span class=\"topic-progress-text\">${progressPercent}%<\/span>\n <\/div>\n <\/div>\n `;\n }\n \n nav.innerHTML = html;\n }\n\n \/\/ ===== TOPIC & CARD LOADING =====\n function loadTopic(topicId) {\n currentTopic = topicId;\n currentCardIndex = 0;\n isFlipped = false;\n \n document.querySelectorAll('.topic-item').forEach(item => {\n item.classList.remove('active');\n if (item.dataset.topic === topicId) {\n item.classList.add('active');\n }\n });\n \n closeMobileSidebar();\n \n const topic = FLASHCARD_DATA[topicId];\n document.getElementById('currentTopicTitle').textContent = topic.name;\n document.getElementById('currentTopicBadge').textContent = `${topic.cards.length} Cards`;\n \n document.getElementById('flashcard').classList.remove('flipped');\n \n loadCard();\n updateUI();\n }\n\n function loadCard() {\n const topic = FLASHCARD_DATA[currentTopic];\n const card = topic.cards[currentCardIndex];\n \n document.getElementById('questionText').innerHTML = card.question;\n document.getElementById('answerText').innerHTML = card.answer;\n \n const cardNumText = `Card ${currentCardIndex + 1} of ${topic.cards.length}`;\n document.getElementById('frontCardNumber').textContent = cardNumText;\n document.getElementById('backCardNumber').textContent = cardNumText;\n document.getElementById('currentCardNum').textContent = currentCardIndex + 1;\n document.getElementById('totalCardNum').textContent = topic.cards.length;\n \n const atStart = currentCardIndex === 0;\n const atEnd = currentCardIndex === topic.cards.length - 1;\n \n document.getElementById('prevBtn').disabled = atStart;\n document.getElementById('nextBtn').disabled = atEnd;\n \n markCardAsViewed(currentTopic, currentCardIndex);\n }\n\n \/\/ ===== CARD NAVIGATION =====\n function flipCard() {\n isFlipped = !isFlipped;\n document.getElementById('flashcard').classList.toggle('flipped');\n }\n\n function nextCard() {\n const topic = FLASHCARD_DATA[currentTopic];\n if (currentCardIndex < topic.cards.length - 1) {\n currentCardIndex++;\n isFlipped = false;\n document.getElementById('flashcard').classList.remove('flipped');\n loadCard();\n \n if (progress[currentTopic].viewed.size === topic.cards.length) {\n showCompletionModal();\n }\n }\n }\n\n function prevCard() {\n if (currentCardIndex > 0) {\n currentCardIndex--;\n isFlipped = false;\n document.getElementById('flashcard').classList.remove('flipped');\n loadCard();\n }\n }\n\n function shuffleCards() {\n const topic = FLASHCARD_DATA[currentTopic];\n for (let i = topic.cards.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [topic.cards[i], topic.cards[j]] = [topic.cards[j], topic.cards[i]];\n }\n currentCardIndex = 0;\n isFlipped = false;\n document.getElementById('flashcard').classList.remove('flipped');\n loadCard();\n }\n\n \/\/ ===== UI UPDATES =====\n function updateUI() {\n const topic = FLASHCARD_DATA[currentTopic];\n const totalCards = topic.cards.length;\n const viewedCards = progress[currentTopic] ? progress[currentTopic].viewed.size : 0;\n const remainingCards = totalCards - viewedCards;\n \n document.getElementById('viewedCount').textContent = viewedCards;\n document.getElementById('remainingCount').textContent = remainingCards;\n \n updateOverallProgress();\n }\n\n function updateOverallProgress() {\n let totalCards = 0;\n let totalViewed = 0;\n \n for (const topicId in FLASHCARD_DATA) {\n totalCards += FLASHCARD_DATA[topicId].cards.length;\n totalViewed += progress[topicId] ? progress[topicId].viewed.size : 0;\n }\n \n const percentage = totalCards > 0 ? Math.round((totalViewed \/ totalCards) * 100) : 0;\n \n document.getElementById('overallProgressBar').style.width = `${percentage}%`;\n document.getElementById('overallProgressText').textContent = `${percentage}%`;\n document.getElementById('totalViewed').textContent = totalViewed;\n document.getElementById('totalCards').textContent = totalCards;\n }\n\n \/\/ ===== COMPLETION MODAL =====\n function showCompletionModal() {\n const topic = FLASHCARD_DATA[currentTopic];\n document.getElementById('completedCards').textContent = topic.cards.length;\n document.getElementById('completionPercentage').textContent = '100%';\n document.getElementById('completionModal').classList.add('active');\n }\n\n function closeCompletionModal() {\n document.getElementById('completionModal').classList.remove('active');\n currentCardIndex = 0;\n loadCard();\n }\n\n function goToNextTopic() {\n const topicIds = Object.keys(FLASHCARD_DATA);\n const currentIndex = topicIds.indexOf(currentTopic);\n const nextIndex = (currentIndex + 1) % topicIds.length;\n \n closeCompletionModal();\n loadTopic(topicIds[nextIndex]);\n }\n\n \/\/ ===== KEYBOARD CONTROLS =====\n function setupKeyboardControls() {\n document.addEventListener('keydown', function(e) {\n switch(e.key) {\n case 'ArrowLeft':\n prevCard();\n break;\n case 'ArrowRight':\n nextCard();\n break;\n case ' ':\n e.preventDefault();\n flipCard();\n break;\n }\n });\n }\n\n \/\/ ===== MOBILE SIDEBAR =====\n function setupMobileToggle() {\n const toggle = document.getElementById('mobileSidebarToggle');\n const sidebar = document.getElementById('flashcardSidebar');\n const overlay = document.getElementById('sidebarOverlay');\n \n toggle.addEventListener('click', function() {\n sidebar.classList.toggle('open');\n overlay.classList.toggle('active');\n \n const icon = toggle.querySelector('i');\n if (sidebar.classList.contains('open')) {\n icon.classList.remove('fa-bars');\n icon.classList.add('fa-times');\n } else {\n icon.classList.remove('fa-times');\n icon.classList.add('fa-bars');\n }\n });\n \n overlay.addEventListener('click', closeMobileSidebar);\n }\n\n function closeMobileSidebar() {\n const sidebar = document.getElementById('flashcardSidebar');\n const overlay = document.getElementById('sidebarOverlay');\n const toggle = document.getElementById('mobileSidebarToggle');\n \n sidebar.classList.remove('open');\n overlay.classList.remove('active');\n \n const icon = toggle.querySelector('i');\n icon.classList.remove('fa-times');\n icon.classList.add('fa-bars');\n }\n <\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Premium Flashcards – Constitution of India | CSS Adda Overall Progress 0% 0 viewed 0 total Topics Reset Progress Preamble […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"disabled","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-9383","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/posts\/9383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9383"}],"version-history":[{"count":4,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/posts\/9383\/revisions"}],"predecessor-version":[{"id":9387,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/posts\/9383\/revisions\/9387"}],"wp:attachment":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=9383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=9383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}