[V0_FILE]html:file="index.html" isMerged="true" Knowvia - Interactive Quiz Platform

Knowvia

Test your knowledge with our interactive quiz platform featuring multiple languages, categories, and difficulty levels.

⚙️

Quiz Settings

Customize your quiz experience

Your Name

View Leaderboard

See top performers

📚

Review Mode

Study previous questions

🌐

Multilingual Support

Available in English, Hindi, and French

⏱️

Timed Questions

15 seconds per question with bonus points

📊

Detailed Analytics

Track your performance and progress

Question 1 of 15

🎉 Quiz Complete!

points

0/15

Correct Answers

Accuracy

Avg Time

🏆 Leaderboard

Top 5 performers

📋 Review Answers

Review your quiz performance

Quiz Assistant

Hi! I'm here to help you with the quiz. Ask me for hints or assistance!

[V0_FILE]css:file="styles/main.css" isMerged="true" /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Color Palette */ --primary-color: #3b82f6; --primary-dark: #2563eb; --primary-light: #93c5fd; --secondary-color: #10b981; --accent-color: #f59e0b; --danger-color: #ef4444; --warning-color: #f59e0b; --success-color: #10b981; /* Neutral Colors */ --white: #ffffff; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* Typography */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; /* Spacing */ --spacing-1: 0.25rem; --spacing-2: 0.5rem; --spacing-3: 0.75rem; --spacing-4: 1rem; --spacing-5: 1.25rem; --spacing-6: 1.5rem; --spacing-8: 2rem; --spacing-10: 2.5rem; --spacing-12: 3rem; --spacing-16: 4rem; --spacing-20: 5rem; /* Border Radius */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Transitions */ --transition-fast: 150ms ease-in-out; --transition-normal: 300ms ease-in-out; --transition-slow: 500ms ease-in-out; } /* Dark Theme Variables */ [data-theme="dark"] { --white: #111827; --gray-50: #1f2937; --gray-100: #374151; --gray-200: #4b5563; --gray-300: #6b7280; --gray-400: #9ca3af; --gray-500: #d1d5db; --gray-600: #e5e7eb; --gray-700: #f3f4f6; --gray-800: #f9fafb; --gray-900: #ffffff; } /* Base Styles */ html { scroll-behavior: smooth; } body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: 1.6; color: var(--gray-900); background: linear-gradient(135deg, var(--gray-50) 0%, var(--primary-light) 100%); min-height: 100vh; transition: all var(--transition-normal); } /* Container */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-4); } /* Header */ .header { background: var(--white); border-bottom: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 100; transition: all var(--transition-normal); } .header-content { display: flex; align-items: center; justify-content: space-between; height: 4rem; gap: var(--spacing-4); } .logo-section { display: flex; align-items: center; gap: var(--spacing-3); } .logo { width: 2.5rem; height: 2.5rem; background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); } .logo-icon { color: var(--white); font-weight: bold; font-size: var(--font-size-lg); } .brand-name { font-size: var(--font-size-xl); font-weight: bold; color: var(--gray-900); } /* Navigation */ .nav-menu { display: flex; gap: var(--spacing-2); } .nav-btn { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-4); border: none; border-radius: var(--radius-lg); background: transparent; color: var(--gray-600); cursor: pointer; transition: all var(--transition-fast); font-size: var(--font-size-sm); } .nav-btn:hover { background: var(--gray-100); color: var(--gray-900); } .nav-btn.active { background: var(--primary-color); color: var(--white); } .nav-icon { font-size: var(--font-size-base); } /* Header Controls */ .header-controls { display: flex; align-items: center; gap: var(--spacing-3); } .theme-toggle { width: 2.5rem; height: 2.5rem; border: none; border-radius: var(--radius-full); background: var(--gray-100); color: var(--gray-600); cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; } .theme-toggle:hover { background: var(--gray-200); color: var(--gray-900); } .language-select { padding: var(--spacing-2) var(--spacing-3); border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: var(--white); color: var(--gray-900); cursor: pointer; transition: all var(--transition-fast); } .language-select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } /* Main Content */ .main-content { padding: var(--spacing-8) 0; min-height: calc(100vh - 4rem); } /* Screen Management */ .screen { display: none; animation: fadeIn 0.3s ease-in-out; } .screen.active { display: block; } /* Hero Section */ .hero-section { text-align: center; margin-bottom: var(--spacing-12); } .hero-logo { margin-bottom: var(--spacing-6); } .hero-logo-icon { width: 8rem; height: 8rem; background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); border-radius: var(--radius-3xl); display: flex; align-items: center; justify-content: center; margin: 0 auto; color: var(--white); font-size: var(--font-size-4xl); font-weight: bold; box-shadow: var(--shadow-xl); animation: pulse 2s infinite; } .hero-title { font-size: var(--font-size-5xl); font-weight: bold; color: var(--gray-900); margin-bottom: var(--spacing-4); } .hero-description { font-size: var(--font-size-xl); color: var(--gray-600); max-width: 32rem; margin: 0 auto; line-height: 1.7; } /* Quiz Setup */ .quiz-setup { display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-8); margin-bottom: var(--spacing-12); } .setup-card { background: var(--white); border-radius: var(--radius-2xl); padding: var(--spacing-8); box-shadow: var(--shadow-lg); transition: all var(--transition-normal); } .setup-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); } .card-header { text-align: center; margin-bottom: var(--spacing-8); } .card-icon { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-4); display: block; } .card-header h3 { font-size: var(--font-size-2xl); font-weight: bold; color: var(--gray-900); margin-bottom: var(--spacing-2); } .card-header p { color: var(--gray-600); } /* Form Styles */ .setup-form { display: flex; flex-direction: column; gap: var(--spacing-6); } .form-group { display: flex; flex-direction: column; gap: var(--spacing-2); } .form-group label { font-weight: 500; color: var(--gray-700); font-size: var(--font-size-sm); } .form-group input, .form-group select { padding: var(--spacing-3) var(--spacing-4); border: 1px solid var(--gray-300); border-radius: var(--radius-lg); background: var(--white); color: var(--gray-900); font-size: var(--font-size-base); transition: all var(--transition-fast); } .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .start-btn { display: flex; align-items: center; justify-content: center; gap: var(--spacing-2); padding: var(--spacing-4) var(--spacing-6); background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: var(--white); border: none; border-radius: var(--radius-lg); font-size: var(--font-size-lg); font-weight: 600; cursor: pointer; transition: all var(--transition-fast); box-shadow: var(--shadow-md); } .start-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); } .start-btn:active { transform: translateY(0); } /* Quick Actions */ .quick-actions { display: flex; flex-direction: column; gap: var(--spacing-6); } .action-card { background: var(--white); border-radius: var(--radius-xl); padding: var(--spacing-6); text-align: center; cursor: pointer; transition: all var(--transition-normal); box-shadow: var(--shadow-md); } .action-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .action-icon { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-4); } .action-card h4 { font-size: var(--font-size-lg); font-weight: 600; color: var(--gray-900); margin-bottom: var(--spacing-2); } .action-card p { color: var(--gray-600); font-size: var(--font-size-sm); } /* Features Grid */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-6); } .feature-card { background: var(--white); border-radius: var(--radius-xl); padding: var(--spacing-6); text-align: center; box-shadow: var(--shadow-md); transition: all var(--transition-normal); } .feature-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .feature-icon { font-size: var(--font-size-4xl); margin-bottom: var(--spacing-4); } .feature-card h4 { font-size: var(--font-size-lg); font-weight: 600; color: var(--gray-900); margin-bottom: var(--spacing-2); } .feature-card p { color: var(--gray-600); } /* Utility Classes */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .font-bold { font-weight: bold; } .font-semibold { font-weight: 600; } .font-medium { font-weight: 500; } .text-primary { color: var(--primary-color); } .text-secondary { color: var(--secondary-color); } .text-success { color: var(--success-color); } .text-danger { color: var(--danger-color); } .text-warning { color: var(--warning-color); } .bg-primary { background-color: var(--primary-color); } .bg-secondary { background-color: var(--secondary-color); } .bg-success { background-color: var(--success-color); } .bg-danger { background-color: var(--danger-color); } .bg-warning { background-color: var(--warning-color); } .hidden { display: none !important; } .visible { display: block !important; } /* Loading Spinner */ .loading-spinner { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); display: none; align-items: center; justify-content: center; flex-direction: column; z-index: 9999; } .spinner { width: 3rem; height: 3rem; border: 3px solid var(--gray-200); border-top: 3px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: var(--spacing-4); } .loading-spinner p { color: var(--gray-600); font-weight: 500; } [V0_FILE]css:file="styles/components.css" isMerged="true" /* Quiz Components */ /* Quiz Header */ .quiz-header { background: var(--white); border-radius: var(--radius-2xl); padding: var(--spacing-6); margin-bottom: var(--spacing-6); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-6); } .quiz-progress { flex: 1; } .progress-info { margin-bottom: var(--spacing-2); } .question-counter { font-size: var(--font-size-sm); font-weight: 500; color: var(--gray-600); } .progress-bar { width: 100%; height: 0.5rem; background: var(--gray-200); border-radius: var(--radius-full); overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); border-radius: var(--radius-full); transition: width var(--transition-normal); width: 0%; } /* Quiz Controls */ .quiz-controls { display: flex; align-items: center; gap: var(--spacing-6); } .timer-container { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-2); } .timer-circle { width: 4rem; height: 4rem; border: 4px solid var(--success-color); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; position: relative; transition: border-color var(--transition-fast); } .timer-circle.warning { border-color: var(--warning-color); } .timer-circle.danger { border-color: var(--danger-color); animation: pulse 1s infinite; } .timer-text { font-size: var(--font-size-xl); font-weight: bold; color: var(--gray-900); } .timer-bar { width: 6rem; height: 0.25rem; background: var(--gray-200); border-radius: var(--radius-full); overflow: hidden; } .timer-fill { height: 100%; background: var(--success-color); border-radius: var(--radius-full); transition: all var(--transition-fast); transform-origin: left; } .timer-fill.warning { background: var(--warning-color); } .timer-fill.danger { background: var(--danger-color); } .control-buttons { display: flex; gap: var(--spacing-2); } .control-btn { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3); border: 1px solid var(--gray-300); border-radius: var(--radius-lg); background: var(--white); color: var(--gray-700); cursor: pointer; transition: all var(--transition-fast); font-size: var(--font-size-sm); } .control-btn:hover { background: var(--gray-50); border-color: var(--gray-400); } /* Question Container */ .question-container { max-width: 4xl; margin: 0 auto; } .question-card { background: var(--white); border-radius: var(--radius-2xl); padding: var(--spacing-8); box-shadow: var(--shadow-lg); } .question-image { margin-bottom: var(--spacing-6); text-align: center; } .question-image img { max-width: 100%; height: auto; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); } .question-text { font-size: var(--font-size-2xl); font-weight: 600; color: var(--gray-900); line-height: 1.4; margin-bottom: var(--spacing-6); } /* Hint Display */ .hint-display { background: linear-gradient(135deg, #ebf8ff, #dbeafe); border: 1px solid var(--primary-light); border-radius: var(--radius-lg); padding: var(--spacing-4); margin-bottom: var(--spacing-6); animation: slideDown 0.3s ease-out; } .hint-content { display: flex; align-items: flex-start; gap: var(--spacing-2); } .hint-icon { color: var(--primary-color); font-size: var(--font-size-lg); } .hint-text { color: var(--primary-dark); } .hint-text strong { font-weight: 600; margin-bottom: var(--spacing-1); display: block; } /* Options Container */ .options-container { display: grid; gap: var(--spacing-3); } .option-btn { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-4); border: 1px solid var(--gray-300); border-radius: var(--radius-lg); background: var(--white); color: var(--gray-900); text-align: left; cursor: pointer; transition: all var(--transition-fast); font-size: var(--font-size-base); position: relative; overflow: hidden; } .option-btn:hover { background: var(--gray-50); border-color: var(--gray-400); transform: translateY(-1px); } .option-btn:disabled { cursor: not-allowed; } .option-btn.correct { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-color: var(--success-color); color: var(--success-color); } .option-btn.incorrect { background: linear-gradient(135deg, #fef2f2, #fecaca); border-color: var(--danger-color); color: var(--danger-color); } .option-btn.selected { background: linear-gradient(135deg, #ebf8ff, #dbeafe); border-color: var(--primary-color); color: var(--primary-color); } .option-label { font-weight: 600; min-width: 1.5rem; } .option-text { flex: 1; } .option-icon { margin-left: auto; font-size: var(--font-size-lg); } /* Results Components */ .results-container { max-width: 2xl; margin: 0 auto; text-align: center; } .results-header { margin-bottom: var(--spacing-8); } .results-header h2 { font-size: var(--font-size-3xl); font-weight: bold; color: var(--gray-900); margin-bottom: var(--spacing-6); } .star-rating { display: flex; justify-content: center; gap: var(--spacing-1); margin-bottom: var(--spacing-4); } .star { font-size: var(--font-size-3xl); transition: all var(--transition-normal); cursor: pointer; } .star.filled { color: #fbbf24; animation: starPop 0.5s ease-out; } .star.empty { color: var(--gray-300); } .score-display { margin-bottom: var(--spacing-8); } .final-score { font-size: 4rem; font-weight: bold; color: var(--primary-color); margin-bottom: var(--spacing-2); animation: scoreReveal 1s ease-out; } .score-display p { color: var(--gray-600); font-size: var(--font-size-lg); } /* Results Stats */ .results-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); margin-bottom: var(--spacing-8); } .stat-card { background: var(--gray-50); border-radius: var(--radius-lg); padding: var(--spacing-4); text-align: center; } .stat-value { font-size: var(--font-size-2xl); font-weight: bold; color: var(--gray-900); margin-bottom: var(--spacing-1); } .stat-label { font-size: var(--font-size-sm); color: var(--gray-600); } /* Action Buttons */ .results-actions { display: flex; justify-content: center; gap: var(--spacing-4); flex-wrap: wrap; } .action-btn { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-6); border: none; border-radius: var(--radius-lg); font-size: var(--font-size-base); font-weight: 500; cursor: pointer; transition: all var(--transition-fast); text-decoration: none; } .action-btn.primary { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: var(--white); box-shadow: var(--shadow-md); } .action-btn.primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); } .action-btn.secondary { background: var(--white); color: var(--gray-700); border: 1px solid var(--gray-300); } .action-btn.secondary:hover { background: var(--gray-50); border-color: var(--gray-400); } /* Leaderboard Components */ .screen-header { text-align: center; margin-bottom: var(--spacing-8); } .screen-header h2 { font-size: var(--font-size-3xl); font-weight: bold; color: var(--gray-900); margin-bottom: var(--spacing-2); } .screen-header p { color: var(--gray-600); font-size: var(--font-size-lg); } .leaderboard-container { max-width: 2xl; margin: 0 auto; } .leaderboard-list { background: var(--white); border-radius: var(--radius-2xl); padding: var(--spacing-6); box-shadow: var(--shadow-lg); } .leaderboard-entry { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-4); border-radius: var(--radius-lg); margin-bottom: var(--spacing-4); transition: all var(--transition-fast); } .leaderboard-entry:last-child { margin-bottom: 0; } .leaderboard-entry.rank-1 { background: linear-gradient(135deg, #fef3c7, #fde68a); border: 1px solid #f59e0b; } .leaderboard-entry.rank-2 { background: linear-gradient(135deg, #f3f4f6, #e5e7eb); border: 1px solid #9ca3af; } .leaderboard-entry.rank-3 { background: linear-gradient(135deg, #fed7aa, #fdba74); border: 1px solid #f97316; } .leaderboard-entry.rank-other { background: var(--white); border: 1px solid var(--gray-200); } .entry-left { display: flex; align-items: center; gap: var(--spacing-4); } .entry-rank { width: 2rem; height: 2rem; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: var(--font-size-sm); } .entry-rank.rank-1 { background: #f59e0b; color: var(--white); } .entry-rank.rank-2 { background: #9ca3af; color: var(--white); } .entry-rank.rank-3 { background: #f97316; color: var(--white); } .entry-rank.rank-other { background: var(--primary-color); color: var(--white); } .entry-info h4 { font-weight: 600; color: var(--gray-900); margin-bottom: var(--spacing-1); } .entry-details { font-size: var(--font-size-sm); color: var(--gray-600); margin-bottom: var(--spacing-1); } .entry-date { font-size: var(--font-size-xs); color: var(--gray-500); } .entry-score { text-align: right; } .entry-score .score-value { font-size: var(--font-size-xl); font-weight: bold; color: var(--gray-900); } .entry-score .score-label { font-size: var(--font-size-sm); color: var(--gray-600); } /* Review Components */ .review-container { max-width: 4xl; margin: 0 auto; display: flex; flex-direction: column; gap: var(--spacing-6); } .review-item { background: var(--white); border-radius: var(--radius-2xl); padding: var(--spacing-6); box-shadow: var(--shadow-lg); } .review-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-4); } .question-badge { background: var(--gray-100); color: var(--gray-700); padding: var(--spacing-1) var(--spacing-3); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: 500; } .result-badge { padding: var(--spacing-1) var(--spacing-3); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: 500; } .result-badge.correct { background: var(--success-color); color: var(--white); } .result-badge.incorrect { background: var(--danger-color); color: var(--white); } .review-question { font-size: var(--font-size-lg); font-weight: 600; color: var(--gray-900); margin-bottom: var(--spacing-4); } .review-options { display: flex; flex-direction: column; gap: var(--spacing-2); margin-bottom: var(--spacing-4); } .review-option { padding: var(--spacing-3); border-radius: var(--radius-lg); border: 1px solid var(--gray-200); display: flex; align-items: center; gap: var(--spacing-3); } .review-option.user-answer { background: linear-gradient(135deg, #fef2f2, #fecaca); border-color: var(--danger-color); } .review-option.correct-answer { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-color: var(--success-color); } .review-option-label { font-weight: 600; min-width: 1.5rem; } .review-option-text { flex: 1; } .review-option-tag { font-size: var(--font-size-sm); font-weight: 500; padding: var(--spacing-1) var(--spacing-2); border-radius: var(--radius-md); } .review-option-tag.correct { background: var(--success-color); color: var(--white); } .review-option-tag.user { background: var(--danger-color); color: var(--white); } .review-summary { background: var(--gray-50); border-radius: var(--radius-lg); padding: var(--spacing-4); display: flex; flex-direction: column; gap: var(--spacing-2); } .review-summary p { margin: 0; font-size: var(--font-size-sm); } .review-summary strong { font-weight: 600; color: var(--gray-900); } .review-actions { text-align: center; margin-top: var(--spacing-8); } /* Empty State */ .empty-state { text-align: center; padding: var(--spacing-12); color: var(--gray-500); } .empty-state-icon { font-size: var(--font-size-4xl); margin-bottom: var(--spacing-4); } .empty-state p { font-size: var(--font-size-lg); } [V0_FILE]css:file="styles/animations.css" isMerged="true" /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); max-height: 0; } to { opacity: 1; transform: translateY(0); max-height: 200px; } } @keyframes slideUp { from { opacity: 1; transform: translateY(0); max-height: 200px; } to { opacity: 0; transform: translateY(-10px); max-height: 0; } } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes bounce { 0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); } 40%, 43% { transform: translate3d(0, -30px, 0); } 70% { transform: translate3d(0, -15px, 0); } 90% { transform: translate3d(0, -4px, 0); } } @keyframes starPop { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } } @keyframes scoreReveal { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } @keyframes glow { 0%, 100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); } 50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); } } @keyframes confettiFall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } } @keyframes firework { 0% { transform: scale(0); opacity: 1; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } /* Animation Classes */ .animate-fadeIn { animation: fadeIn 0.3s ease-in-out; } .animate-slideDown { animation: slideDown 0.3s ease-out; } .animate-slideUp { animation: slideUp 0.3s ease-out; } .animate-pulse { animation: pulse 2s infinite; } .animate-spin { animation: spin 1s linear infinite; } .animate-bounce { animation: bounce 1s ease-in-out; } .animate-shake { animation: shake 0.5s ease-in-out; } .animate-glow { animation: glow 2s ease-in-out infinite; } /* Transition Classes */ .transition-all { transition: all var(--transition-normal); } .transition-fast { transition: all var(--transition-fast); } .transition-slow { transition: all var(--transition-slow); } /* Transform Classes */ .transform-hover:hover { transform: translateY(-2px); } .transform-active:active { transform: translateY(0); } .scale-hover:hover { transform: scale(1.05); } /* Opacity Classes */ .opacity-0 { opacity: 0; } .opacity-25 { opacity: 0.25; } .opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; } .opacity-100 { opacity: 1; } /* Visibility Classes */ .invisible { visibility: hidden; } .visible { visibility: visible; } [V0_FILE]css:file="styles/themes.css" isMerged="true" /* Theme Styles */ /* Ocean Blue Theme */ [data-theme="ocean"] { --primary-color: #0ea5e9; --primary-dark: #0284c7; --primary-light: #7dd3fc; --secondary-color: #06b6d4; --accent-color: #f59e0b; } [data-theme="ocean"] body { background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%); } /* Midnight Dark Theme */ [data-theme="midnight"] { --primary-color: #6366f1; --primary-dark: #4f46e5; --primary-light: #a5b4fc; --secondary-color: #8b5cf6; --accent-color: #f59e0b; --white: #0f172a; --gray-50: #1e293b; --gray-100: #334155; --gray-200: #475569; --gray-300: #64748b; --gray-400: #94a3b8; --gray-500: #cbd5e1; --gray-600: #e2e8f0; --gray-700: #f1f5f9; --gray-800: #f8fafc; --gray-900: #ffffff; } [data-theme="midnight"] body { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); } /* Forest Green Theme */ [data-theme="forest"] { --primary-color: #059669; --primary-dark: #047857; --primary-light: #6ee7b7; --secondary-color: #10b981; --accent-color: #f59e0b; } [data-theme="forest"] body { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%); } /* Sunset Orange Theme */ [data-theme="sunset"] { --primary-color: #ea580c; --primary-dark: #c2410c; --primary-light: #fdba74; --secondary-color: #f97316; --accent-color: #eab308; } [data-theme="sunset"] body { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 50%, #fed7aa 100%); } /* Purple Dream Theme */ [data-theme="purple"] { --primary-color: #9333ea; --primary-dark: #7c3aed; --primary-light: #c4b5fd; --secondary-color: #a855f7; --accent-color: #f59e0b; } [data-theme="purple"] body { background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #e9d5ff 100%); } /* Theme Toggle Animation */ .theme-toggle { position: relative; overflow: hidden; } .theme-toggle::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left var(--transition-normal); } .theme-toggle:hover::before { left: 100%; } /* Dark Mode Specific Styles */ [data-theme="dark"] .theme-toggle .theme-icon { transform: rotate(180deg); } [data-theme="dark"] .theme-toggle .theme-icon::before { content: "☀️"; } /* Theme Transition */ * { transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal); } /* High Contrast Mode */ @media (prefers-contrast: high) { :root { --gray-100: #000000; --gray-200: #333333; --gray-800: #cccccc; --gray-900: #ffffff; } } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } [V0_FILE]css:file="styles/responsive.css" isMerged="true" /* Responsive Design */ /* Mobile First Approach */ @media (max-width: 640px) { .container { padding: 0 var(--spacing-3); } .header-content { flex-wrap: wrap; gap: var(--spacing-2); } .nav-menu { order: 3; width: 100%; justify-content: center; padding-top: var(--spacing-2); border-top: 1px solid var(--gray-200); } .nav-btn { flex: 1; justify-content: center; padding: var(--spacing-2); } .nav-text { display: none; } .hero-logo-icon { width: 6rem; height: 6rem; font-size: var(--font-size-3xl); } .hero-title { font-size: var(--font-size-4xl); } .hero-description { font-size: var(--font-size-lg); padding: 0 var(--spacing-4); } .quiz-setup { grid-template-columns: 1fr; gap: var(--spacing-6); } .quick-actions { order: -1; } .features-grid { grid-template-columns: 1fr; } .quiz-header { flex-direction: column; gap: var(--spacing-4); } .quiz-controls { justify-content: center; } .control-buttons { flex-direction: column; } .question-text { font-size: var(--font-size-xl); } .results-stats { grid-template-columns: 1fr; gap: var(--spacing-3); } .results-actions { flex-direction: column; align-items: stretch; } .action-btn { justify-content: center; } .leaderboard-entry { flex-direction: column; align-items: flex-start; gap: var(--spacing-3); } .entry-left { width: 100%; } .entry-score { text-align: left; } .review-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-2); } .review-options { gap: var(--spacing-3); } .review-option { flex-direction: column; align-items: flex-start; gap: var(--spacing-2); } } /* Tablet Styles */ @media (min-width: 641px) and (max-width: 1024px) { .quiz-setup { grid-template-columns: 1fr; gap: var(--spacing-8); } .features-grid { grid-template-columns: repeat(2, 1fr); } .results-stats { grid-template-columns: repeat(3, 1fr); } .results-actions { flex-wrap: wrap; justify-content: center; } } /* Desktop Styles */ @media (min-width: 1025px) { .quiz-setup { grid-template-columns: 2fr 1fr; } .features-grid { grid-template-columns: repeat(3, 1fr); } } /* Large Desktop */ @media (min-width: 1440px) { .container { max-width: 1400px; } .hero-logo-icon { width: 10rem; height: 10rem; font-size: var(--font-size-5xl); } .hero-title { font-size: 4rem; } } /* Print Styles */ @media print { .header, .chatbot-container, .blast-container, .modal-overlay { display: none !important; } .main-content { padding: 0; } .screen { display: block !important; } .screen:not(#reviewScreen) { display: none !important; } body { background: white !important; color: black !important; } .review-item { break-inside: avoid; margin-bottom: var(--spacing-6); } } /* Accessibility Improvements */ @media (prefers-reduced-motion: reduce) { .animate-pulse, .animate-bounce, .animate-spin { animation: none; } .transition-all, .transition-fast, .transition-slow { transition: none; } } /* Focus Styles for Keyboard Navigation */ button:focus, input:focus, select:focus, .nav-btn:focus, .option-btn:focus, .action-btn:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; } /* High Contrast Mode */ @media (prefers-contrast: high) { .option-btn { border-width: 2px; } .option-btn.correct { border-color: #000000; background: #ffffff; color: #000000; } .option-btn.incorrect { border-color: #000000; background: #ffffff; color: #000000; } } [V0_FILE]javascript:file="js/translations.js" isMerged="true" // Translation System const translations = { en: { nav: { home: "Home", leaderboard: "Leaderboard", review: "Review", }, home: { title: "Knowvia", description: "Test your knowledge with our interactive quiz platform featuring multiple languages, categories, and difficulty levels.", setup: { title: "Quiz Settings", subtitle: "Customize your quiz experience", name: "Your Name", namePlaceholder: "Enter your name", category: "Category", difficulty: "Difficulty Level", start: "Start Quiz", }, actions: { leaderboard: "View Leaderboard", leaderboardDesc: "See top performers", review: "Review Mode", reviewDesc: "Study previous questions", }, }, categories: { all: "All Categories", general: "General Knowledge", science: "Science", history: "History", }, difficulty: { easy: "Easy", medium: "Medium", hard: "Hard", }, features: { multilingual: "Multilingual Support", multilingualDesc: "Available in English, Hindi, and French", timed: "Timed Questions", timedDesc: "15 seconds per question with bonus points", analytics: "Detailed Analytics", analyticsDesc: "Track your performance and progress", }, quiz: { question: "Question", of: "of", pause: "Pause", hint: "Hint", hintLabel: "Hint:", timeUp: "Time's up!", correct: "Correct!", incorrect: "Incorrect!", nextQuestion: "Next Question", finishQuiz: "Finish Quiz", }, results: { title: "Quiz Complete!", points: "points", correct: "Correct Answers", accuracy: "Accuracy", avgTime: "Avg Time", review: "Review Answers", leaderboard: "View Leaderboard", newQuiz: "Start New Quiz", }, leaderboard: { title: "Leaderboard", subtitle: "Top 5 performers", noScores: "No scores yet. Be the first!", points: "points", }, review: { title: "Review Answers", subtitle: "Review your quiz performance", backHome: "Back to Home", correct: "Correct", incorrect: "Incorrect", yourAnswer: "Your Answer:", correctAnswer: "Correct Answer:", time: "Time:", explanation: "Explanation:", }, chatbot: { title: "Quiz Assistant", welcome: "Hi! I'm here to help you with the quiz. Ask me for hints or assistance!", placeholder: "Type your message...", hintResponse: "Here's a hint for the current question:", generalHelp: "I can help you with hints, explain quiz rules, or provide encouragement!", encouragement: [ "You're doing great! Keep it up!", "Don't worry, every question is a learning opportunity!", "Take your time and think carefully!", "You've got this! Trust your instincts!", ], }, modal: { complete: "Quiz Complete!", amazing: "Amazing!", pointsEarned: "points earned!", review: "Review", leaderboard: "Leaderboard", newQuiz: "New Quiz", close: "Close", }, loading: "Loading...", errors: { nameRequired: "Please enter your name", noQuestions: "No questions available for this category/difficulty", loadError: "Failed to load quiz data", }, }, hi: { nav: { home: "होम", leaderboard: "लीडरबोर्ड", review: "समीक्षा", }, home: { title: "नॉविया", description: "हमारे इंटरैक्टिव क्विज़ प्लेटफॉर्म के साथ अपने ज्ञान का परीक्षण करें जिसमें कई भाषाएं, श्रेणियां और कठिनाई स्तर हैं।", setup: { title: "क्विज़ सेटिंग्स", subtitle: "अपने क्विज़ अनुभव को अनुकूलित करें", name: "आपका नाम", namePlaceholder: "अपना नाम दर्ज करें", category: "श्रेणी", difficulty: "कठिनाई स्तर", start: "क्विज़ शुरू करें", }, actions: { leaderboard: "लीडरबोर्ड देखें", leaderboardDesc: "शीर्ष प्रदर्शनकर्ता देखें", review: "समीक्षा मोड", reviewDesc: "पिछले प्रश्नों का अध्ययन करें", }, }, categories: { all: "सभी श्रेणियां", general: "सामान्य ज्ञान", science: "विज्ञान", history: "इतिहास", }, difficulty: { easy: "आसान", medium: "मध्यम", hard: "कठिन", }, features: { multilingual: "बहुभाषी समर्थन", multilingualDesc: "अंग्रेजी, हिंदी और फ्रेंच में उपलब्ध", timed: "समयबद्ध प्रश्न", timedDesc: "बोनस अंकों के साथ प्रति प्रश्न 15 सेकंड", analytics: "विस्तृत विश्लेषण", analyticsDesc: "अपने प्रदर्शन और प्रगति को ट्रैक करें", }, quiz: { question: "प्रश्न", of: "का", pause: "रोकें", hint: "संकेत", hintLabel: "संकेत:", timeUp: "समय समाप्त!", correct: "सही!", incorrect: "गलत!", nextQuestion: "अगला प्रश्न", finishQuiz: "क्विज़ समाप्त करें", }, results: { title: "क्विज़ पूर्ण!", points: "अंक", correct: "सही उत्तर", accuracy: "सटीकता", avgTime: "औसत समय", review: "उत्तर समीक्षा", leaderboard: "लीडरबोर्ड देखें", newQuiz: "नई क्विज़ शुरू करें", }, leaderboard: { title: "लीडरबोर्ड", subtitle: "शीर्ष 5 प्रदर्शनकर्ता", noScores: "अभी तक कोई स्कोर नहीं। पहले बनें!", points: "अंक", }, review: { title: "उत्तर समीक्षा", subtitle: "अपने क्विज़ प्रदर्शन की समीक्षा करें", backHome: "होम पर वापस", correct: "सही", incorrect: "गलत", yourAnswer: "आपका उत्तर:", correctAnswer: "सही उत्तर:", time: "समय:", explanation: "व्याख्या:", }, chatbot: { title: "क्विज़ सहायक", welcome: "नमस्ते! मैं क्विज़ में आपकी मदद के लिए यहाँ हूँ। संकेत या सहायता के लिए पूछें!", placeholder: "अपना संदेश टाइप करें...", hintResponse: "वर्तमान प्रश्न के लिए यहाँ एक संकेत है:", generalHelp: "मैं संकेत, क्विज़ नियम समझाने या प्रोत्साहन देने में मदद कर सकता हूँ!", encouragement: [ "आप बहुत अच्छा कर रहे हैं! जारी रखें!", "चिंता न करें, हर प्रश्न सीखने का अवसर है!", "अपना समय लें और सावधानी से सोचें!", "आप कर सकते हैं! अपनी सहज बुद्धि पर भरोसा करें!", ], }, modal: { complete: "क्विज़ पूर्ण!", amazing: "अद्भुत!", pointsEarned: "अंक अर्जित!", review: "समीक्षा", leaderboard: "लीडरबोर्ड", newQuiz: "नई क्विज़", close: "बंद करें", }, loading: "लोड हो रहा है...", errors: { nameRequired: "कृपया अपना नाम दर्ज करें", noQuestions: "इस श्रेणी/कठिनाई के लिए कोई प्रश्न उपलब्ध नहीं", loadError: "क्विज़ डेटा लोड करने में विफल", }, }, fr: { nav: { home: "Accueil", leaderboard: "Classement", review: "Révision", }, home: { title: "Knowvia", description: "Testez vos connaissances avec notre plateforme de quiz interactive proposant plusieurs langues, catégories et niveaux de difficulté.", setup: { title: "Paramètres du Quiz", subtitle: "Personnalisez votre expérience de quiz", name: "Votre Nom", namePlaceholder: "Entrez votre nom", category: "Catégorie", difficulty: "Niveau de Difficulté", start: "Commencer le Quiz", }, actions: { leaderboard: "Voir le Classement", leaderboardDesc: "Voir les meilleurs performeurs", review: "Mode Révision", reviewDesc: "Étudier les questions précédentes", }, }, categories: { all: "Toutes les Catégories", general: "Culture Générale", science: "Science", history: "Histoire", }, difficulty: { easy: "Facile", medium: "Moyen", hard: "Difficile", }, features: { multilingual: "Support Multilingue", multilingualDesc: "Disponible en anglais, hindi et français", timed: "Questions Chronométrées", timedDesc: "15 secondes par question avec points bonus", analytics: "Analyses Détaillées", analyticsDesc: "Suivez vos performances et progrès", }, quiz: { question: "Question", of: "sur", pause: "Pause", hint: "Indice", hintLabel: "Indice:", timeUp: "Temps écoulé!", correct: "Correct!", incorrect: "Incorrect!", nextQuestion: "Question Suivante", finishQuiz: "Terminer le Quiz", }, results: { title: "Quiz Terminé!", points: "points", correct: "Réponses Correctes", accuracy: "Précision", avgTime: "Temps Moyen", review: "Réviser les Réponses", leaderboard: "Voir le Classement", newQuiz: "Nouveau Quiz", }, leaderboard: { title: "Classement", subtitle: "Top 5 des performeurs", noScores: "Aucun score pour le moment. Soyez le premier!", points: "points", }, review: { title: "Révision des Réponses", subtitle: "Révisez votre performance au quiz", backHome: "Retour à l'Accueil", correct: "Correct", incorrect: "Incorrect", yourAnswer: "Votre Réponse:", correctAnswer: "Réponse Correcte:", time: "Temps:", explanation: "Explication:", }, chatbot: { title: "Assistant Quiz", welcome: "Salut! Je suis là pour vous aider avec le quiz. Demandez-moi des indices ou de l'aide!", placeholder: "Tapez votre message...", hintResponse: "Voici un indice pour la question actuelle:", generalHelp: "Je peux vous aider avec des indices, expliquer les règles du quiz ou vous encourager!", encouragement: [ "Vous vous débrouillez très bien! Continuez!", "Ne vous inquiétez pas, chaque question est une opportunité d'apprendre!", "Prenez votre temps et réfléchissez bien!", "Vous pouvez le faire! Faites confiance à votre instinct!", ], }, modal: { complete: "Quiz Terminé!", amazing: "Incroyable!", pointsEarned: "points gagnés!", review: "Révision", leaderboard: "Classement", newQuiz: "Nouveau Quiz", close: "Fermer", }, loading: "Chargement...", errors: { nameRequired: "Veuillez entrer votre nom", noQuestions: "Aucune question disponible pour cette catégorie/difficulté", loadError: "Échec du chargement des données du quiz", }, }, } // Translation Manager class TranslationManager { constructor() { this.currentLanguage = "en" this.translations = translations } setLanguage(language) { if (this.translations[language]) { this.currentLanguage = language this.updatePageTranslations() localStorage.setItem("knowvia-language", language) } } translate(key) { const keys = key.split(".") let translation = this.translations[this.currentLanguage] for (const k of keys) { if (translation && translation[k]) { translation = translation[k] } else { // Fallback to English translation = this.translations.en for (const fallbackKey of keys) { if (translation && translation[fallbackKey]) { translation = translation[fallbackKey] } else { return key // Return key if translation not found } } break } } return translation || key } updatePageTranslations() { const elements = document.querySelectorAll("[data-translate]") elements.forEach((element) => { const key = element.getAttribute("data-translate") const translation = this.translate(key) if (Array.isArray(translation)) { element.textContent = translation[0] // Use first item for arrays } else { element.textContent = translation } }) // Update placeholders const placeholderElements = document.querySelectorAll("[data-translate-placeholder]") placeholderElements.forEach((element) => { const key = element.getAttribute("data-translate-placeholder") element.placeholder = this.translate(key) }) // Update document title document.title = `${this.translate("home.title")} - Interactive Quiz Platform` } getCurrentLanguage() { return this.currentLanguage } getAvailableLanguages() { return Object.keys(this.translations) } } // Initialize translation manager const translationManager = new TranslationManager() // Load saved language preference const savedLanguage = localStorage.getItem("knowvia-language") if (savedLanguage && translations[savedLanguage]) { translationManager.setLanguage(savedLanguage) } [V0_FILE]javascript:file="js/questions.js" isMerged="true" // Questions Database const questionsDatabase = { general: { easy: [ { id: 1, question: { en: "What is the capital of France?", hi: "फ्रांस की राजधानी क्या है?", fr: "Quelle est la capitale de la France?", }, options: { en: ["London", "Berlin", "Paris", "Madrid"], hi: ["लंदन", "बर्लिन", "पेरिस", "मैड्रिड"], fr: ["Londres", "Berlin", "Paris", "Madrid"], }, correct: 2, explanation: { en: "Paris is the capital and largest city of France, known for the Eiffel Tower.", hi: "पेरिस फ्रांस की राजधानी और सबसे बड़ा शहर है, जो एफिल टावर के लिए प्रसिद्ध है।", fr: "Paris est la capitale et la plus grande ville de France, connue pour la Tour Eiffel.", }, hint: { en: "Think about the city famous for the Eiffel Tower and romantic atmosphere.", hi: "एफिल टावर और रोमांटिक माहौल के लिए प्रसिद्ध शहर के बारे में सोचें।", fr: "Pensez à la ville célèbre pour la Tour Eiffel et son atmosphère romantique.", }, category: "general", difficulty: "easy", image: null, }, { id: 2, question: { en: "How many continents are there?", hi: "कितने महाद्वीप हैं?", fr: "Combien y a-t-il de continents?", }, options: { en: ["5", "6", "7", "8"], hi: ["5", "6", "7", "8"], fr: ["5", "6", "7", "8"], }, correct: 2, explanation: { en: "There are 7 continents: Asia, Africa, North America, South America, Antarctica, Europe, and Australia.", hi: "7 महाद्वीप हैं: एशिया, अफ्रीका, उत्तरी अमेरिका, दक्षिण अमेरिका, अंटार्कटिका, यूरोप और ऑस्ट्रेलिया।", fr: "Il y a 7 continents: Asie, Afrique, Amérique du Nord, Amérique du Sud, Antarctique, Europe et Australie.", }, hint: { en: "Count the major landmasses on Earth - it's more than 5 but less than 10.", hi: "पृथ्वी पर प्रमुख भूभागों की गिनती करें - यह 5 से अधिक लेकिन 10 से कम है।", fr: "Comptez les principales masses terrestres sur Terre - c'est plus de 5 mais moins de 10.", }, category: "general", difficulty: "easy", image: null, }, { id: 3, question: { en: "What is the largest ocean on Earth?", hi: "पृथ्वी पर सबसे बड़ा महासागर कौन सा है?", fr: "Quel est le plus grand océan sur Terre?", }, options: { en: ["Atlantic", "Indian", "Arctic", "Pacific"], hi: ["अटलांटिक", "हिंद", "आर्कटिक", "प्रशांत"], fr: ["Atlantique", "Indien", "Arctique", "Pacifique"], }, correct: 3, explanation: { en: "The Pacific Ocean is the largest ocean, covering about one-third of Earth's surface.", hi: "प्रशांत महासागर सबसे बड़ा महासागर है, जो पृथ्वी की सतह का लगभग एक तिहाई हिस्सा कवर करता है।", fr: "L'océan Pacifique est le plus grand océan, couvrant environ un tiers de la surface de la Terre.", }, hint: { en: "This ocean's name means 'peaceful' and it borders Asia and the Americas.", hi: "इस महासागर के नाम का अर्थ 'शांतिपूर्ण' है और यह एशिया और अमेरिका की सीमा में है।", fr: "Le nom de cet océan signifie 'paisible' et il borde l'Asie et les Amériques.", }, category: "general", difficulty: "easy", image: null, }, { id: 4, question: { en: "Which planet is known as the Red Planet?", hi: "कौन सा ग्रह लाल ग्रह के नाम से जाना जाता है?", fr: "Quelle planète est connue sous le nom de Planète Rouge?", }, options: { en: ["Venus", "Mars", "Jupiter", "Saturn"], hi: ["शुक्र", "मंगल", "बृहस्पति", "शनि"], fr: ["Vénus", "Mars", "Jupiter", "Saturne"], }, correct: 1, explanation: { en: "Mars is called the Red Planet due to iron oxide (rust) on its surface.", hi: "मंगल को लाल ग्रह कहा जाता है क्योंकि इसकी सतह पर आयरन ऑक्साइड (जंग) है।", fr: "Mars est appelée la Planète Rouge en raison de l'oxyde de fer (rouille) sur sa surface.", }, hint: { en: "Named after the Roman god of war, this planet appears reddish in the night sky.", hi: "युद्ध के रोमन देवता के नाम पर रखा गया, यह ग्रह रात के आकाश में लालिमा लिए दिखता है।", fr: "Nommée d'après le dieu romain de la guerre, cette planète apparaît rougeâtre dans le ciel nocturne.", }, category: "general", difficulty: "easy", image: null, }, { id: 5, question: { en: "What is the chemical symbol for water?", hi: "पानी का रासायनिक प्रतीक क्या है?", fr: "Quel est le symbole chimique de l'eau?", }, options: { en: ["H2O", "CO2", "NaCl", "O2"], hi: ["H2O", "CO2", "NaCl", "O2"], fr: ["H2O", "CO2", "NaCl", "O2"], }, correct: 0, explanation: { en: "H2O represents water - two hydrogen atoms bonded to one oxygen atom.", hi: "H2O पानी को दर्शाता है - दो हाइड्रोजन परमाणु एक ऑक्सीजन परमाणु से जुड़े हुए।", fr: "H2O représente l'eau - deux atomes d'hydrogène liés à un atome d'oxygène.", }, hint: { en: "It contains hydrogen and oxygen - think about what you drink every day.", hi: "इसमें हाइड्रोजन और ऑक्सीजन होता है - सोचें कि आप रोज क्या पीते हैं।", fr: "Il contient de l'hydrogène et de l'oxygène - pensez à ce que vous buvez tous les jours.", }, category: "general", difficulty: "easy", image: null, }, ], medium: [ { id: 6, question: { en: "Who painted the Mona Lisa?", hi: "मोना लिसा को किसने चित्रित किया?", fr: "Qui a peint la Joconde?", }, options: { en: ["Michelangelo", "Leonardo da Vinci", "Raphael", "Donatello"], hi: ["माइकल एंजेलो", "लियोनार्डो दा विंची", "राफेल", "डोनाटेलो"], fr: ["Michel-Ange", "Léonard de Vinci", "Raphaël", "Donatello"], }, correct: 1, explanation: { en: "Leonardo da Vinci painted the Mona Lisa between 1503 and 1519.", hi: "लियोनार्डो दा विंची ने 1503 और 1519 के बीच मोना लिसा को चित्रित किया।", fr: "Léonard de Vinci a peint la Joconde entre 1503 et 1519.", }, hint: { en: "This Renaissance master was also an inventor and scientist, known for his notebooks.", hi: "यह पुनर्जागरण काल का मास्टर एक आविष्कारक और वैज्ञानिक भी था, जो अपनी नोटबुक के लिए प्रसिद्ध है।", fr: "Ce maître de la Renaissance était aussi un inventeur et scientifique, connu pour ses carnets.", }, category: "general", difficulty: "medium", image: null, }, { id: 7, question: { en: "What is the smallest country in the world?", hi: "दुनिया का सबसे छोटा देश कौन सा है?", fr: "Quel est le plus petit pays du monde?", }, options: { en: ["Monaco", "Vatican City", "San Marino", "Liechtenstein"], hi: ["मोनाको", "वेटिकन सिटी", "सैन मारिनो", "लिकटेंस्टीन"], fr: ["Monaco", "Cité du Vatican", "Saint-Marin", "Liechtenstein"], }, correct: 1, explanation: { en: "Vatican City is the smallest country with an area of just 0.17 square miles.", hi: "वेटिकन सिटी सबसे छोटा देश है जिसका क्षेत्रफल केवल 0.17 वर्ग मील है।", fr: "La Cité du Vatican est le plus petit pays avec une superficie de seulement 0,44 km².", }, hint: { en: "This country is entirely surrounded by Rome and is the spiritual center of Catholicism.", hi: "यह देश पूरी तरह से रोम से घिरा हुआ है और कैथोलिक धर्म का आध्यात्मिक केंद्र है।", fr: "Ce pays est entièrement entouré par Rome et est le centre spirituel du catholicisme.", }, category: "general", difficulty: "medium", image: null, }, { id: 8, question: { en: "Which element has the atomic number 1?", hi: "किस तत्व की परमाणु संख्या 1 है?", fr: "Quel élément a le numéro atomique 1?", }, options: { en: ["Helium", "Hydrogen", "Lithium", "Carbon"], hi: ["हीलियम", "हाइड्रोजन", "लिथियम", "कार्बन"], fr: ["Hélium", "Hydrogène", "Lithium", "Carbone"], }, correct: 1, explanation: { en: "Hydrogen has atomic number 1, making it the lightest element.", hi: "हाइड्रोजन की परमाणु संख्या 1 है, जो इसे सबसे हल्का तत्व बनाता है।", fr: "L'hydrogène a le numéro atomique 1, ce qui en fait l'élément le plus léger.", }, hint: { en: "This is the most abundant element in the universe and the simplest atom.", hi: "यह ब्रह्मांड में सबसे प्रचुर तत्व है और सबसे सरल परमाणु है।", fr: "C'est l'élément le plus abondant dans l'univers et l'atome le plus simple.", }, category: "general", difficulty: "medium", image: null, }, { id: 9, question: { en: "In which year did World War II end?", hi: "द्वितीय विश्व युद्ध किस वर्ष समाप्त हुआ?", fr: "En quelle année la Seconde Guerre mondiale s'est-elle terminée?", }, options: { en: ["1944", "1945", "1946", "1947"], hi: ["1944", "1945", "1946", "1947"], fr: ["1944", "1945", "1946", "1947"], }, correct: 1, explanation: { en: "World War II ended in 1945 with Japan's surrender in September.", hi: "द्वितीय विश्व युद्ध 1945 में जापान के सितंबर में आत्मसमर्पण के साथ समाप्त हुआ।", fr: "La Seconde Guerre mondiale s'est terminée en 1945 avec la reddition du Japon en septembre.", }, hint: { en: "The war ended in the mid-1940s, the same year the atomic bombs were dropped.", hi: "युद्ध 1940 के दशक के मध्य में समाप्त हुआ, उसी वर्ष जब परमाणु बम गिराए गए।", fr: "La guerre s'est terminée au milieu des années 1940, la même année où les bombes atomiques ont été larguées.", }, category: "general", difficulty: "medium", image: null, }, { id: 10, question: { en: "What is the largest mammal in the world?", hi: "दुनिया का सबसे बड़ा स्तनधारी कौन सा है?", fr: "Quel est le plus grand mammifère du monde?", }, options: { en: ["African Elephant", "Blue Whale", "Giraffe", "Polar Bear"], hi: ["अफ्रीकी हाथी", "नीली व्हेल", "जिराफ", "ध्रुवीय भालू"], fr: ["Éléphant d'Afrique", "Baleine bleue", "Girafe", "Ours polaire"], }, correct: 1, explanation: { en: "The blue whale is the largest mammal and animal ever known to exist.", hi: "नीली व्हेल सबसे बड़ा स्तनधारी और अब तक का सबसे बड़ा जानवर है।", fr: "La baleine bleue est le plus grand mammifère et animal jamais connu.", }, hint: { en: "This marine mammal can grow up to 100 feet long and lives in the ocean.", hi: "यह समुद्री स्तनधारी 100 फीट तक लंबा हो सकता है और समुद्र में रहता है।", fr: "Ce mammifère marin peut atteindre 30 mètres de long et vit dans l'océan.", }, category: "general", difficulty: "medium", image: null, }, ], hard: [ { id: 11, question: { en: "What is the Planck constant approximately equal to?", hi: "प्लांक स्थिरांक लगभग किसके बराबर है?", fr: "À quoi la constante de Planck est-elle approximativement égale?", }, options: { en: ["6.626 × 10⁻³⁴ J⋅s", "6.626 × 10⁻²⁷ J⋅s", "6.626 × 10⁻³¹ J⋅s", "6.626 × 10⁻²⁸ J⋅s"], hi: ["6.626 × 10⁻³⁴ J⋅s", "6.626 × 10⁻²⁷ J⋅s", "6.626 × 10⁻³¹ J⋅s", "6.626 × 10⁻²⁸ J⋅s"], fr: ["6.626 × 10⁻³⁴ J⋅s", "6.626 × 10⁻²⁷ J⋅s", "6.626 × 10⁻³¹ J⋅s", "6.626 × 10⁻²⁸ J⋅s"], }, correct: 0, explanation: { en: "The Planck constant is 6.626 × 10⁻³⁴ J⋅s, fundamental in quantum mechanics.", hi: "प्लांक स्थिरांक 6.626 × 10⁻³⁴ J⋅s है, जो क्वांटम यांत्रिकी में मौलिक है।", fr: "La constante de Planck est 6.626 × 10⁻³⁴ J⋅s, fondamentale en mécanique quantique.", }, hint: { en: "This fundamental constant relates energy to frequency in quantum mechanics.", hi: "यह मौलिक स्थिरांक क्वांटम यांत्रिकी में ऊर्जा को आवृत्ति से जोड़ता है।", fr: "Cette constante fondamentale relie l'énergie à la fréquence en mécanique quantique.", }, category: "general", difficulty: "hard", image: null, }, { id: 12, question: { en: "Who developed the theory of general relativity?", hi: "सामान्य सापेक्षता का सिद्धांत किसने विकसित किया?", fr: "Qui a développé la théorie de la relativité générale?", }, options: { en: ["Isaac Newton", "Albert Einstein", "Niels Bohr", "Max Planck"], hi: ["आइजक न्यूटन", "अल्बर्ट आइंस्टीन", "नील्स बोह्र", "मैक्स प्लांक"], fr: ["Isaac Newton", "Albert Einstein", "Niels Bohr", "Max Planck"], }, correct: 1, explanation: { en: "Albert Einstein developed general relativity, published in 1915.", hi: "अल्बर्ट आइंस्टीन ने सामान्य सापेक्षता विकसित की, जो 1915 में प्रकाशित हुई।", fr: "Albert Einstein a développé la relativité générale, publiée en 1915.", }, hint: { en: "This physicist is famous for E=mc² and won the Nobel Prize in Physics.", hi: "यह भौतिक विज्ञानी E=mc² के लिए प्रसिद्ध है और भौतिकी में नोबेल पुरस्कार जीता।", fr: "Ce physicien est célèbre pour E=mc² et a remporté le prix Nobel de physique.", }, category: "general", difficulty: "hard", image: null, }, { id: 13, question: { en: "What is the most abundant gas in Earth's atmosphere?", hi: "पृथ्वी के वायुमंडल में सबसे प्रचुर गैस कौन सी है?", fr: "Quel est le gaz le plus abondant dans l'atmosphère terrestre?", }, options: { en: ["Oxygen", "Carbon Dioxide", "Nitrogen", "Argon"], hi: ["ऑक्सीजन", "कार्बन डाइऑक्साइड", "नाइट्रोजन", "आर्गन"], fr: ["Oxygène", "Dioxyde de carbone", "Azote", "Argon"], }, correct: 2, explanation: { en: "Nitrogen makes up about 78% of Earth's atmosphere.", hi: "नाइट्रोजन पृथ्वी के वायुमंडल का लगभग 78% हिस्सा बनाता है।", fr: "L'azote constitue environ 78% de l'atmosphère terrestre.", }, hint: { en: "This gas makes up more than three-quarters of our atmosphere but we can't breathe it alone.", hi: "यह गैस हमारे वायुमंडल का तीन-चौथाई से अधिक हिस्सा बनाती है लेकिन हम इसे अकेले सांस नहीं ले सकते।", fr: "Ce gaz constitue plus des trois quarts de notre atmosphère mais nous ne pouvons pas le respirer seul.", }, category: "general", difficulty: "hard", image: null, }, { id: 14, question: { en: "Which ancient wonder was located in Alexandria?", hi: "कौन सा प्राचीन आश्चर्य अलेक्जेंड्रिया में स्थित था?", fr: "Quelle merveille antique était située à Alexandrie?", }, options: { en: ["Hanging Gardens", "Lighthouse of Alexandria", "Colossus of Rhodes", "Temple of Artemis"], hi: ["लटकते बगीचे", "अलेक्जेंड्रिया का प्रकाशस्तंभ", "रोड्स का कोलोसस", "आर्टेमिस का मंदिर"], fr: ["Jardins suspendus", "Phare d'Alexandrie", "Colosse de Rhodes", "Temple d'Artémis"], }, correct: 1, explanation: { en: "The Lighthouse of Alexandria was one of the Seven Wonders of the Ancient World.", hi: "अलेक्जेंड्रिया का प्रकाशस्तंभ प्राचीन विश्व के सात आश्चर्यों में से एक था।", fr: "Le Phare d'Alexandrie était l'une des Sept Merveilles du monde antique.", }, hint: { en: "This structure helped ships navigate safely to the ancient port city in Egypt.", hi: "यह संरचना जहाजों को मिस्र के प्राचीन बंदरगाह शहर तक सुरक्षित रूप से नेविगेट करने में मदद करती थी।", fr: "Cette structure aidait les navires à naviguer en sécurité vers l'ancienne ville portuaire d'Égypte.", }, category: "general", difficulty: "hard", image: null, }, { id: 15, question: { en: "What is the smallest unit of matter that retains element properties?", hi: "पदार्थ की सबसे छोटी इकाई कौन सी है जो तत्व के गुणों को बनाए रखती है?", fr: "Quelle est la plus petite unité de matière qui conserve les propriétés d'un élément?", }, options: { en: ["Molecule", "Atom", "Proton", "Electron"], hi: ["अणु", "परमाणु", "प्रोटॉन", "इलेक्ट्रॉन"], fr: ["Molécule", "Atome", "Proton", "Électron"], }, correct: 1, explanation: { en: "An atom is the smallest unit that retains the properties of an element.", hi: "परमाणु सबसे छोटी इकाई है जो किसी तत्व के गुणों को बनाए रखती है।", fr: "Un atome est la plus petite unité qui conserve les propriétés d'un élément.", }, hint: { en: "This basic unit of matter was once thought to be indivisible (its name means 'uncuttable').", hi: "पदार्थ की इस मूल इकाई को कभी अविभाज्य माना जाता था (इसके नाम का अर्थ 'न काटा जा सकने वाला' है)।", fr: "Cette unité de base de la matière était autrefois considérée comme indivisible (son nom signifie 'non coupable').", }, category: "general", difficulty: "hard", image: null, }, ], }, science: { easy: [ { id: 16, question: { en: "What gas do plants absorb during photosynthesis?", hi: "प्रकाश संश्लेषण के दौरान पौधे कौन सी गैस अवशोषित करते हैं?", fr: "Quel gaz les plantes absorbent-elles pendant la photosynthèse?", }, options: { en: ["Oxygen", "Carbon Dioxide", "Nitrogen", "Hydrogen"], hi: ["ऑक्सीजन", "कार्बन डाइऑक्साइड", "नाइट्रोजन", "हाइड्रोजन"], fr: ["Oxygène", "Dioxyde de carbone", "Azote", "Hydrogène"], }, correct: 1, explanation: { en: "Plants absorb carbon dioxide and convert it to glucose during photosynthesis.", hi: "पौधे कार्बन डाइऑक्साइड को अवशोषित करते हैं और प्रकाश संश्लेषण के दौरान इसे ग्लूकोज में बदलते हैं।", fr: "Les plantes absorbent le dioxyde de carbone et le convertissent en glucose pendant la photosynthèse.", }, hint: { en: "Plants take in this gas that humans and animals exhale.", hi: "पौधे उस गैस को लेते हैं जिसे मनुष्य और जानवर छोड़ते हैं।", fr: "Les plantes absorbent ce gaz que les humains et les animaux expirent.", }, category: "science", difficulty: "easy", image: null, }, ], medium: [ { id: 17, question: { en: "What is the powerhouse of the cell?", hi: "कोशिका का पावरहाउस क्या है?", fr: "Quelle est la centrale énergétique de la cellule?", }, options: { en: ["Nucleus", "Mitochondria", "Ribosome", "Endoplasmic Reticulum"], hi: ["नाभिक", "माइटोकॉन्ड्रिया", "राइबोसोम", "एंडोप्लाज्मिक रेटिकुलम"], fr: ["Noyau", "Mitochondrie", "Ribosome", "Réticulum endoplasmique"], }, correct: 1, explanation: { en: "Mitochondria produce ATP, the cell's main energy currency.", hi: "माइटोकॉन्ड्रिया ATP का उत्पादन करता है, जो कोशिका की मुख्य ऊर्जा मुद्रा है।", fr: "Les mitochondries produisent l'ATP, la principale monnaie énergétique de la cellule.", }, hint: { en: "This organelle produces energy for the cell and has its own DNA.", hi: "यह कोशिकांग कोशिका के लिए ऊर्जा का उत्पादन करता है और इसका अपना DNA होता है।", fr: "Cet organite produit de l'énergie pour la cellule et possède son propre ADN.", }, category: "science", difficulty: "medium", image: null, }, ], hard: [ { id: 18, question: { en: "What is the boundary around a black hole called?", hi: "ब्लैक होल के चारों ओर की सीमा को क्या कहते हैं?", fr: "Comment appelle-t-on la frontière autour d'un trou noir?", }, options: { en: ["Event Horizon", "Photon Sphere", "Ergosphere", "Singularity"], hi: ["घटना क्षितिज", "फोटॉन गोला", "एर्गोस्फीयर", "एकलता"], fr: ["Horizon des événements", "Sphère de photons", "Ergosphère", "Singularité"], }, correct: 0, explanation: { en: "The event horizon is the boundary beyond which nothing can escape a black hole.", hi: "घटना क्षितिज वह सीमा है जिसके पार से कुछ भी ब्लैक होल से बच नहीं सकता।", fr: "L'horizon des événements est la frontière au-delà de laquelle rien ne peut échapper à un trou noir.", }, hint: { en: "This is the point of no return around a black hole - once you cross it, you can't come back.", hi: "यह ब्लैक होल के चारों ओर वापसी की कोई संभावना नहीं का बिंदु है - एक बार इसे पार करने के बाद, आप वापस नहीं आ सकते।", fr: "C'est le point de non-retour autour d'un trou noir - une fois que vous le franchissez, vous ne pouvez plus revenir.", }, category: "science", difficulty: "hard", image: null, }, ], }, history: { easy: [ { id: 19, question: { en: "Who was the first President of the United States?", hi: "संयुक्त राज्य अमेरिका के पहले राष्ट्रपति कौन थे?", fr: "Qui était le premier président des États-Unis?", }, options: { en: ["Thomas Jefferson", "George Washington", "John Adams", "Benjamin Franklin"], hi: ["थॉमस जेफरसन", "जॉर्ज वाशिंगटन", "जॉन एडम्स", "बेंजामिन फ्रैंकलिन"], fr: ["Thomas Jefferson", "George Washington", "John Adams", "Benjamin Franklin"], }, correct: 1, explanation: { en: "George Washington was the first President of the United States, serving from 1789 to 1797.", hi: "जॉर्ज वाशिंगटन संयुक्त राज्य अमेरिका के पहले राष्ट्रपति थे, जिन्होंने 1789 से 1797 तक सेवा की।", fr: "George Washington était le premier président des États-Unis, servant de 1789 à 1797.", }, hint: { en: "This founding father is also known as the 'Father of His Country'.", hi: "इस संस्थापक पिता को 'अपने देश का पिता' भी कहा जाता है।", fr: "Ce père fondateur est aussi connu comme le 'Père de son pays'.", }, category: "history", difficulty: "easy", image: null, }, ], medium: [ { id: 20, question: { en: "In which year did the Berlin Wall fall?", hi: "बर्लिन की दीवार किस वर्ष गिरी?", fr: "En quelle année le mur de Berlin est-il tombé?", }, options: { en: ["1987", "1988", "1989", "1990"], hi: ["1987", "1988", "1989", "1990"], fr: ["1987", "1988", "1989", "1990"], }, correct: 2, explanation: { en: "The Berlin Wall fell on November 9, 1989, marking the beginning of German reunification.", hi: "बर्लिन की दीवार 9 नवंबर, 1989 को गिरी, जो जर्मन पुनर्मिलन की शुरुआत का प्रतीक थी।", fr: "Le mur de Berlin est tombé le 9 novembre 1989, marquant le début de la réunification allemande.", }, hint: { en: "This happened in the late 1980s, shortly before the end of the Cold War.", hi: "यह 1980 के दशक के अंत में हुआ, शीत युद्ध की समाप्ति से कुछ समय पहले।", fr: "Cela s'est passé à la fin des années 1980, peu avant la fin de la guerre froide.", }, category: "history", difficulty: "medium", image: null, }, ], hard: [ { id: 21, question: { en: "Which empire was ruled by Justinian I?", hi: "जस्टिनियन प्रथम द्वारा कौन सा साम्राज्य शासित था?", fr: "Quel empire était gouverné par Justinien Ier?", }, options: { en: ["Roman Empire", "Byzantine Empire", "Ottoman Empire", "Holy Roman Empire"], hi: ["रोमन साम्राज्य", "बीज़ान्टिन साम्राज्य", "ओटोमन साम्राज्य", "पवित्र रोमन साम्राज्य"], fr: ["Empire romain", "Empire byzantin", "Empire ottoman", "Saint-Empire romain"], }, correct: 1, explanation: { en: "Justinian I ruled the Byzantine Empire from 527 to 565 CE and is known for his legal code.", hi: "जस्टिनियन प्रथम ने 527 से 565 ईस्वी तक बीज़ान्टिन साम्राज्य पर शासन किया और अपने कानूनी संहिता के लिए प्रसिद्ध है।", fr: "Justinien Ier a gouverné l'Empire byzantin de 527 à 565 après J.-C. et est connu pour son code juridique.", }, hint: { en: "This was the Eastern Roman Empire, with its capital in Constantinople.", hi: "यह पूर्वी रोमन साम्राज्य था, जिसकी राजधानी कॉन्स्टेंटिनोपल में थी।", fr: "C'était l'Empire romain d'Orient, avec sa capitale à Constantinople.", }, category: "history", difficulty: "hard", image: null, }, ], }, } // Question Manager class QuestionManager { constructor() { this.database = questionsDatabase } getQuestions(category = "all", difficulty = "medium", count = 15) { let allQuestions = [] if (category === "all") { // Get questions from all categories Object.keys(this.database).forEach((cat) => { Object.keys(this.database[cat]).forEach((diff) => { allQuestions = allQuestions.concat(this.database[cat][diff]) }) }) } else { // Get questions from specific category const categoryData = this.database[category] if (categoryData) { if (categoryData[difficulty]) { allQuestions = [...categoryData[difficulty]] } // If not enough questions, add from other difficulties if (allQuestions.length < count) { Object.keys(categoryData).forEach((diff) => { if (diff !== difficulty) { allQuestions = allQuestions.concat(categoryData[diff]) } }) } } } // Shuffle and return exactly the requested count const shuffled = this.shuffleArray(allQuestions) return shuffled.slice(0, Math.min(count, shuffled.length)) } shuffleArray(array) { const shuffled = [...array] for (let i = shuffled.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)) ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]] } return shuffled } getLocalizedQuestion(question, language) { return { ...question, question: question.question[language] || question.question.en, options: question.options[language] || question.options.en, explanation: question.explanation[language] || question.explanation.en, hint: question.hint[language] || question.hint.en, } } getAvailableCategories() { return Object.keys(this.database) } getAvailableDifficulties() { return ["easy", "medium", "hard"] } } // Initialize question manager const questionManager = new QuestionManager() [V0_FILE]javascript:file="js/blast-animation.js" isMerged="true" // Blast Animation System class BlastAnimation { constructor() { this.container = document.getElementById("blastContainer") this.isActive = false } // Confetti animation for correct answers triggerConfetti() { if (this.isActive) return this.isActive = true const colors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#feca57", "#ff9ff3", "#a8e6cf", "#ffd93d"] const confettiCount = 50 for (let i = 0; i < confettiCount; i++) { setTimeout(() => { this.createConfettiPiece(colors) }, i * 20) } // Reset after animation setTimeout(() => { this.isActive = false this.clearContainer() }, 3000) } createConfettiPiece(colors) { const confetti = document.createElement("div") confetti.className = "confetti-piece" // Random properties const color = colors[Math.floor(Math.random() * colors.length)] const size = Math.random() * 8 + 4 const left = Math.random() * 100 const animationDuration = Math.random() * 2 + 2 const rotation = Math.random() * 360 confetti.style.cssText = ` position: fixed; left: ${left}vw; top: -10px; width: ${size}px; height: ${size}px; background-color: ${color}; border-radius: ${Math.random() > 0.5 ? "50%" : "0"}; pointer-events: none; z-index: 9999; animation: confettiFall ${animationDuration}s linear forwards; transform: rotate(${rotation}deg); ` this.container.appendChild(confetti) // Remove after animation setTimeout(() => { if (confetti.parentNode) { confetti.parentNode.removeChild(confetti) } }, animationDuration * 1000) } // Firework animation for quiz completion triggerFireworks() { if (this.isActive) return this.isActive = true const fireworkCount = 8 const colors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#feca57", "#ff9ff3"] for (let i = 0; i < fireworkCount; i++) { setTimeout(() => { this.createFirework(colors) }, i * 300) } setTimeout(() => { this.isActive = false this.clearContainer() }, 4000) } createFirework(colors) { const firework = document.createElement("div") const color = colors[Math.floor(Math.random() * colors.length)] const left = Math.random() * 80 + 10 const top = Math.random() * 60 + 20 firework.style.cssText = ` position: fixed; left: ${left}vw; top: ${top}vh; width: 4px; height: 4px; background-color: ${color}; border-radius: 50%; pointer-events: none; z-index: 9999; animation: firework 1s ease-out forwards; box-shadow: 0 0 10px ${color}; ` this.container.appendChild(firework) // Create explosion particles setTimeout(() => { this.createExplosion(left, top, color) }, 500) setTimeout(() => { if (firework.parentNode) { firework.parentNode.removeChild(firework) } }, 1000) } createExplosion(left, top, color) { const particleCount = 12 for (let i = 0; i < particleCount; i++) { const particle = document.createElement("div") const angle = (i / particleCount) * 2 * Math.PI const velocity = Math.random() * 100 + 50 particle.style.cssText = ` position: fixed; left: ${left}vw; top: ${top}vh; width: 3px; height: 3px; background-color: ${color}; border-radius: 50%; pointer-events: none; z-index: 9999; animation: explode 1s ease-out forwards; --dx: ${Math.cos(angle) * velocity}px; --dy: ${Math.sin(angle) * velocity}px; ` this.container.appendChild(particle) setTimeout(() => { if (particle.parentNode) { particle.parentNode.removeChild(particle) } }, 1000) } } // Star burst animation for high scores triggerStarBurst() { if (this.isActive) return this.isActive = true const starCount = 20 for (let i = 0; i < starCount; i++) { setTimeout(() => { this.createStar() }, i * 50) } setTimeout(() => { this.isActive = false this.clearContainer() }, 2500) } createStar() { const star = document.createElement("div") star.innerHTML = "⭐" const left = Math.random() * 100 const animationDuration = Math.random() * 1.5 + 1 const rotation = Math.random() * 720 star.style.cssText = ` position: fixed; left: ${left}vw; top: -50px; font-size: ${Math.random() * 20 + 15}px; pointer-events: none; z-index: 9999; animation: starFall ${animationDuration}s ease-in forwards; transform: rotate(${rotation}deg); ` this.container.appendChild(star) setTimeout(() => { if (star.parentNode) { star.parentNode.removeChild(star) } }, animationDuration * 1000) } clearContainer() { if (this.container) { this.container.innerHTML = "" } } } // Add CSS animations dynamically const style = document.createElement("style") style.textContent = ` @keyframes explode { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } } @keyframes starFall { 0% { transform: translateY(-50px) rotate(0deg) scale(0); opacity: 0; } 20% { opacity: 1; transform: translateY(0) rotate(180deg) scale(1); } 100% { transform: translateY(100vh) rotate(720deg) scale(0); opacity: 0; } } ` document.head.appendChild(style) // Initialize blast animation const blastAnimation = new BlastAnimation() [V0_FILE]javascript:file="js/chatbot.js" isFixed="true" isMerged="true" // Chatbot System class QuizChatbot { constructor() { this.isOpen = false this.currentQuestion = null this.responses = { greetings: ["hello", "hi", "hey", "good morning", "good afternoon", "good evening"], help: ["help", "assist", "support", "guide"], hint: ["hint", "clue", "tip", "suggestion"], encouragement: ["encourage", "motivate", "cheer", "support"], rules: ["rules", "how to play", "instructions", "guide"], score: ["score", "points", "rating", "performance"], } this.initializeChatbot() } initializeChatbot() { const toggle = document.getElementById("chatbotToggle") const close = document.getElementById("chatbotClose") const send = document.getElementById("chatbotSend") const input = document.getElementById("chatbotInput") if (toggle) { toggle.addEventListener("click", () => this.toggleChatbot()) } if (close) { close.addEventListener("click", () => this.closeChatbot()) } if (send) { send.addEventListener("click", () => this.sendMessage()) } if (input) { input.addEventListener("keypress", (e) => { if (e.key === "Enter") { this.sendMessage() } }) } // Add welcome message this.addBotMessage(this.translate("chatbot.welcome")) } toggleChatbot() { const window = document.getElementById("chatbotWindow") if (window) { this.isOpen = !this.isOpen window.style.display = this.isOpen ? "flex" : "none" if (this.isOpen) { document.getElementById("chatbotInput")?.focus() } } } closeChatbot() { const window = document.getElementById("chatbotWindow") if (window) { this.isOpen = false window.style.display = "none" } } sendMessage() { const input = document.getElementById("chatbotInput") if (!input || !input.value.trim()) return const message = input.value.trim() this.addUserMessage(message) input.value = "" // Process message and respond setTimeout(() => { const response = this.processMessage(message) this.addBotMessage(response) }, 500) } addUserMessage(message) { const messagesContainer = document.getElementById("chatbotMessages") if (!messagesContainer) return const messageDiv = document.createElement("div") messageDiv.className = "user-message" messageDiv.innerHTML = `

${this.escapeHtml(message)}

` messagesContainer.appendChild(messageDiv) this.scrollToBottom() } addBotMessage(message) { const messagesContainer = document.getElementById("chatbotMessages") if (!messagesContainer) return const messageDiv = document.createElement("div") messageDiv.className = "bot-message" messageDiv.innerHTML = `

${message}

` messagesContainer.appendChild(messageDiv) this.scrollToBottom() } processMessage(message) { const lowerMessage = message.toLowerCase() // Check for greetings if (this.containsAny(lowerMessage, this.responses.greetings)) { return this.getRandomResponse([ this.translate("chatbot.welcome"), "Hello! How can I help you with the quiz today?", "Hi there! Ready to test your knowledge?", "Hey! I'm here to assist you with the quiz!", ]) } // Check for hint requests if (this.containsAny(lowerMessage, this.responses.hint)) { if (this.currentQuestion && this.currentQuestion.hint) { const currentLang = this.getCurrentLanguage() const hint = this.currentQuestion.hint[currentLang] || this.currentQuestion.hint.en return `${this.translate("chatbot.hintResponse")}

${hint}` } else { return "I don't have a hint for the current question, but take your time and think carefully!" } } // Check for help requests if (this.containsAny(lowerMessage, this.responses.help)) { return this.translate("chatbot.generalHelp") } // Check for encouragement if (this.containsAny(lowerMessage, this.responses.encouragement)) { const encouragements = this.translate("chatbot.encouragement") return Array.isArray(encouragements) ? this.getRandomResponse(encouragements) : "You're doing great! Keep it up!" } // Check for rules/instructions if (this.containsAny(lowerMessage, this.responses.rules)) { return `Here are the quiz rules:
• You have 15 seconds per question
• Choose the best answer from the options
• You get bonus points for quick answers
• Use hints if you need help
• Try to get the highest score possible!` } // Check for score-related questions if (this.containsAny(lowerMessage, this.responses.score)) { return `Your score depends on:
• Correct answers (base points)
• Speed bonus (faster = more points)
• Difficulty level (harder = more points)
• Accuracy percentage

Good luck achieving a high score!` } // Default responses return this.getRandomResponse([ "I'm here to help with the quiz! Ask me for hints, rules, or encouragement.", "That's interesting! Is there anything specific about the quiz I can help you with?", "I can provide hints, explain rules, or give you encouragement. What would you like?", "Feel free to ask me about quiz rules, hints, or if you need some motivation!", ]) } containsAny(text, keywords) { return keywords.some((keyword) => text.includes(keyword)) } getRandomResponse(responses) { return responses[Math.floor(Math.random() * responses.length)] } escapeHtml(text) { const div = document.createElement("div") div.textContent = text return div.innerHTML } scrollToBottom() { const messagesContainer = document.getElementById("chatbotMessages") if (messagesContainer) { messagesContainer.scrollTop = messagesContainer.scrollHeight } } setCurrentQuestion(question) { this.currentQuestion = question } // Add quick response buttons addQuickResponses() { const quickResponses = [ { text: "💡 Hint", action: "hint" }, { text: "📋 Rules", action: "rules" }, { text: "🎯 Score Info", action: "score" }, { text: "💪 Encourage Me", action: "encouragement" }, ] const messagesContainer = document.getElementById("chatbotMessages") if (!messagesContainer) return const quickDiv = document.createElement("div") quickDiv.className = "quick-responses" quickDiv.innerHTML = `

${quickResponses .map( (response) => ``, ) .join("")}

` messagesContainer.appendChild(quickDiv) // Add event listeners to quick response buttons quickDiv.querySelectorAll(".quick-response-btn").forEach((btn) => { btn.addEventListener("click", (e) => { const action = e.target.getAttribute("data-action") const response = this.processMessage(action) this.addBotMessage(response) quickDiv.remove() // Remove quick responses after use }) }) this.scrollToBottom() } translate(key) { const translations = { "chatbot.welcome": "Welcome to the Quiz Chatbot!", "chatbot.hintResponse": "Here's a hint:", "chatbot.generalHelp": "I can help you with hints, rules, or encouragement.", "chatbot.encouragement": ["You're doing great!", "Keep it up!", "You're on the right track!"], } return translations[key] || key } getCurrentLanguage() { return "en" // Default language } } // Add chatbot styles const chatbotStyles = document.createElement("style") chatbotStyles.textContent = ` .chatbot-container { position: fixed; bottom: 20px; right: 20px; z-index: 1000; } .chatbot-toggle { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); border: none; color: white; font-size: 24px; cursor: pointer; box-shadow: var(--shadow-lg); transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; } .chatbot-toggle:hover { transform: scale(1.1); box-shadow: var(--shadow-xl); } .chatbot-window { position: absolute; bottom: 80px; right: 0; width: 350px; height: 500px; background: var(--white); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); display: none; flex-direction: column; overflow: hidden; border: 1px solid var(--gray-200); } .chatbot-header { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: white; padding: var(--spacing-4); display: flex; justify-content: space-between; align-items: center; } .chatbot-header h4 { margin: 0; font-size: var(--font-size-lg); font-weight: 600; } .chatbot-close { background: none; border: none; color: white; font-size: 20px; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color var(--transition-fast); } .chatbot-close:hover { background: rgba(255, 255, 255, 0.2); } .chatbot-messages { flex: 1; padding: var(--spacing-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--spacing-3); background: var(--gray-50); } .message-bubble { max-width: 80%; padding: var(--spacing-3); border-radius: var(--radius-lg); word-wrap: break-word; line-height: 1.4; } .bot-message { align-self: flex-start; } .bot-bubble { background: var(--white); color: var(--gray-900); border: 1px solid var(--gray-200); border-bottom-left-radius: var(--radius-sm); } .user-message { align-self: flex-end; } .user-bubble { background: var(--primary-color); color: white; border-bottom-right-radius: var(--radius-sm); } .chatbot-input { display: flex; padding: var(--spacing-4); background: var(--white); border-top: 1px solid var(--gray-200); gap: var(--spacing-2); } .chatbot-input input { flex: 1; padding: var(--spacing-2) var(--spacing-3); border: 1px solid var(--gray-300); border-radius: var(--radius-lg); outline: none; font-size: var(--font-size-sm); } .chatbot-input input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .chatbot-input button { padding: var(--spacing-2) var(--spacing-3); background: var(--primary-color); color: white; border: none; border-radius: var(--radius-lg); cursor: pointer; transition: background-color var(--transition-fast); display: flex; align-items: center; justify-content: center; } .chatbot-input button:hover { background: var(--primary-dark); } .quick-responses-container { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-top: var(--spacing-2); } .quick-response-btn { padding: var(--spacing-1) var(--spacing-2); background: var(--gray-100); border: 1px solid var(--gray-300); border-radius: var(--radius-full); font-size: var(--font-size-xs); cursor: pointer; transition: all var(--transition-fast); } .quick-response-btn:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); } @media (max-width: 640px) { .chatbot-window { width: 300px; height: 400px; } .chatbot-container { bottom: 15px; right: 15px; } } ` document.head.appendChild(chatbotStyles) // Initialize chatbot const quizChatbot = new QuizChatbot() [V0_FILE]javascript:file="js/quiz-logic.js" isFixed="true" isMerged="true" // Quiz Logic Manager class QuizLogic { constructor() { this.currentQuestionIndex = 0 this.questions = [] this.userAnswers = [] this.score = 0 this.timeRemaining = 15 this.isQuizActive = false this.timer = null this.questionStartTime = 0 this.quizSettings = { username: "", category: "all", difficulty: "medium", } this.initializeEventListeners() } initializeEventListeners() { // Quiz setup form const setupForm = document.getElementById("quizSetupForm") if (setupForm) { setupForm.addEventListener("submit", (e) => { e.preventDefault() this.startQuiz() }) } // Control buttons const pauseBtn = document.getElementById("pauseBtn") const hintBtn = document.getElementById("hintBtn") if (pauseBtn) { pauseBtn.addEventListener("click", () => this.togglePause()) } if (hintBtn) { hintBtn.addEventListener("click", () => this.showHint()) } // New quiz button const newQuizBtn = document.getElementById("newQuizBtn") if (newQuizBtn) { newQuizBtn.addEventListener("click", () => this.restartQuiz()) } } startQuiz() { // Get form data const username = document.getElementById("username")?.value.trim() const category = document.getElementById("category")?.value || "all" const difficulty = document.getElementById("difficulty")?.value || "medium" if (!username) { alert(window.translationManager.translate("errors.nameRequired")) return } // Set quiz settings this.quizSettings = { username, category, difficulty } // Get questions this.questions = window.questionManager.getQuestions(category, difficulty, 15) if (this.questions.length === 0) { alert(window.translationManager.translate("errors.noQuestions")) return } // Initialize quiz state this.currentQuestionIndex = 0 this.userAnswers = [] this.score = 0 this.isQuizActive = true // Switch to quiz screen window.uiManager.showScreen("quiz") // Start first question this.displayQuestion() this.startTimer() } displayQuestion() { const question = this.questions[this.currentQuestionIndex] if (!question) return // Localize question const currentLang = window.translationManager.getCurrentLanguage() const localizedQuestion = window.questionManager.getLocalizedQuestion(question, currentLang) // Update chatbot with current question if (window.quizChatbot) { window.quizChatbot.setCurrentQuestion(localizedQuestion) } // Update progress this.updateProgress() // Display question text const questionText = document.getElementById("questionText") if (questionText) { questionText.textContent = localizedQuestion.question } // Display question image if available const questionImage = document.getElementById("questionImage") const questionImg = document.getElementById("questionImg") if (question.image && questionImage && questionImg) { questionImg.src = question.image questionImg.alt = "Question illustration" questionImage.style.display = "block" } else if (questionImage) { questionImage.style.display = "none" } // Display options this.displayOptions(localizedQuestion) // Hide hint this.hideHint() // Reset timer display this.updateTimerDisplay() } displayOptions(question) { const container = document.getElementById("optionsContainer") if (!container) return container.innerHTML = "" question.options.forEach((option, index) => { const button = document.createElement("button") button.className = "option-btn" button.innerHTML = ` ${String.fromCharCode(65 + index)}. ${option} ` button.addEventListener("click", () => this.selectAnswer(index)) container.appendChild(button) }) } selectAnswer(selectedIndex) { if (this.userAnswers[this.currentQuestionIndex] !== undefined) return this.stopTimer() const question = this.questions[this.currentQuestionIndex] const responseTime = Date.now() - this.questionStartTime const isCorrect = selectedIndex === question.correct // Record answer this.userAnswers[this.currentQuestionIndex] = { selected: selectedIndex, correct: question.correct, responseTime: responseTime, timeRemaining: this.timeRemaining, isCorrect: isCorrect, } // Update score if (isCorrect) { const points = this.calculatePoints(responseTime) this.score += points // Trigger celebration animation window.blastAnimation.triggerConfetti() } // Update UI to show correct/incorrect this.showAnswerFeedback(selectedIndex, question.correct) // Auto-advance after delay setTimeout(() => { if (this.currentQuestionIndex < this.questions.length - 1) { this.nextQuestion() } else { this.finishQuiz() } }, 2000) } showAnswerFeedback(selectedIndex, correctIndex) { const options = document.querySelectorAll(".option-btn") options.forEach((option, index) => { option.disabled = true if (index === correctIndex) { option.classList.add("correct") option.innerHTML += '✓' } else if (index === selectedIndex) { option.classList.add("incorrect") option.innerHTML += '✗' } }) } calculatePoints(responseTime) { const basePoints = this.getBasePoints() const timeBonus = Math.max(0, Math.floor((this.timeRemaining / 15) * 50)) return basePoints + timeBonus } getBasePoints() { const multipliers = { easy: 10, medium: 15, hard: 20 } return multipliers[this.quizSettings.difficulty] || 15 } nextQuestion() { this.currentQuestionIndex++ this.displayQuestion() this.startTimer() } finishQuiz() { this.stopTimer() this.isQuizActive = false // Calculate final metrics const correctAnswers = this.userAnswers.filter((answer) => answer.isCorrect).length const accuracy = (correctAnswers / this.questions.length) * 100 const averageTime = this.userAnswers.reduce((sum, answer) => sum + answer.responseTime, 0) / this.questions.length / 1000 const results = { username: this.quizSettings.username, score: this.score, correctAnswers, totalQuestions: this.questions.length, accuracy, averageTime, category: this.quizSettings.category, difficulty: this.quizSettings.difficulty, timestamp: new Date().toISOString(), } // Save to leaderboard window.storageManager.saveScore(results) // Show results with animation this.showResults(results) } showResults(results) { // Calculate star rating const starRating = this.calculateStarRating(results.accuracy) // Show score animation modal first this.showScoreAnimation(results.score, starRating) // Then show detailed results setTimeout(() => { window.uiManager.showResults(results, starRating) }, 3000) } showScoreAnimation(score, stars) { const modal = document.getElementById("scoreModal") if (!modal) return // Update modal content const modalScore = document.getElementById("modalScore") const modalStars = document.getElementById("modalStars") if (modalScore) { modalScore.textContent = score } if (modalStars) { modalStars.innerHTML = this.generateStarHTML(stars) } // Show modal modal.style.display = "flex" // Trigger fireworks for high scores if (stars >= 4) { window.blastAnimation.triggerFireworks() } else if (stars >= 3) { window.blastAnimation.triggerStarBurst() } // Add modal event listeners this.addModalEventListeners() } addModalEventListeners() { const modal = document.getElementById("scoreModal") const closeBtn = document.getElementById("modalClose") const reviewBtn = document.getElementById("modalReview") const leaderboardBtn = document.getElementById("modalLeaderboard") const newQuizBtn = document.getElementById("modalNewQuiz") const closeModal = () => { if (modal) modal.style.display = "none" } if (closeBtn) { closeBtn.onclick = closeModal } if (reviewBtn) { reviewBtn.onclick = () => { closeModal() window.uiManager.showScreen("review") } } if (leaderboardBtn) { leaderboardBtn.onclick = () => { closeModal() window.uiManager.showScreen("leaderboard") } } if (newQuizBtn) { newQuizBtn.onclick = () => { closeModal() this.restartQuiz() } } // Close on background click if (modal) { modal.onclick = (e) => { if (e.target === modal) { closeModal() } } } } calculateStarRating(accuracy) { if (accuracy >= 90) return 5 if (accuracy >= 80) return 4 if (accuracy >= 70) return 3 if (accuracy >= 60) return 2 return 1 } generateStarHTML(rating) { let html = "" for (let i = 1; i <= 5; i++) { const filled = i <= rating ? "filled" : "empty" html += `⭐` } return html } startTimer() { this.timeRemaining = 15 this.questionStartTime = Date.now() this.updateTimerDisplay() this.timer = setInterval(() => { this.timeRemaining-- this.updateTimerDisplay() if (this.timeRemaining <= 0) { this.handleTimeUp() } }, 1000) } stopTimer() { if (this.timer) { clearInterval(this.timer) this.timer = null } } updateTimerDisplay() { const timerText = document.getElementById("timerText") const timerCircle = document.getElementById("timerCircle") const timerFill = document.getElementById("timerFill") if (timerText) { timerText.textContent = this.timeRemaining } if (timerCircle) { timerCircle.className = "timer-circle" if (this.timeRemaining <= 5) { timerCircle.classList.add("danger") } else if (this.timeRemaining <= 10) { timerCircle.classList.add("warning") } } if (timerFill) { const percentage = (this.timeRemaining / 15) * 100 timerFill.style.transform = `scaleX(${percentage / 100})` timerFill.className = "timer-fill" if (this.timeRemaining <= 5) { timerFill.classList.add("danger") } else if (this.timeRemaining <= 10) { timerFill.classList.add("warning") } } } updateProgress() { const currentQuestionSpan = document.getElementById("currentQuestion") const totalQuestionsSpan = document.getElementById("totalQuestions") const progressFill = document.getElementById("progressFill") if (currentQuestionSpan) { currentQuestionSpan.textContent = this.currentQuestionIndex + 1 } if (totalQuestionsSpan) { totalQuestionsSpan.textContent = this.questions.length } if (progressFill) { const percentage = ((this.currentQuestionIndex + 1) / this.questions.length) * 100 progressFill.style.width = `${percentage}%` } } handleTimeUp() { this.stopTimer() // Auto-select no answer this.userAnswers[this.currentQuestionIndex] = { selected: -1, correct: this.questions[this.currentQuestionIndex].correct, responseTime: 15000, timeRemaining: 0, isCorrect: false, } // Show correct answer this.showAnswerFeedback(-1, this.questions[this.currentQuestionIndex].correct) // Auto-advance setTimeout(() => { if (this.currentQuestionIndex < this.questions.length - 1) { this.nextQuestion() } else { this.finishQuiz() } }, 2000) } showHint() { const question = this.questions[this.currentQuestionIndex] if (!question || !question.hint) return const currentLang = window.translationManager.getCurrentLanguage() const hint = question.hint[currentLang] || question.hint.en const hintDisplay = document.getElementById("hintDisplay") const hintText = document.getElementById("hintText") if (hintDisplay && hintText) { hintText.textContent = hint hintDisplay.style.display = "block" hintDisplay.classList.add("animate-slideDown") } } hideHint() { const hintDisplay = document.getElementById("hintDisplay") if (hintDisplay) { hintDisplay.style.display = "none" hintDisplay.classList.remove("animate-slideDown") } } togglePause() { // Implementation for pause functionality if (this.isQuizActive) { this.stopTimer() // Show pause modal or overlay } else { this.startTimer() } } restartQuiz() { // Reset all quiz state this.currentQuestionIndex = 0 this.questions = [] this.userAnswers = [] this.score = 0 this.timeRemaining = 15 this.isQuizActive = false this.stopTimer() // Return to home screen window.uiManager.showScreen("home") } // Get current quiz data for review getQuizData() { return { questions: this.questions, userAnswers: this.userAnswers, settings: this.quizSettings, } } } // Initialize quiz logic const quizLogic = new QuizLogic() [V0_FILE]javascript:file="js/ui-manager.js" isFixed="true" isMerged="true" // UI Manager class UIManager { constructor(storageManager, translationManager, quizLogic, questionManager) { this.currentScreen = "home" this.storageManager = storageManager this.translationManager = translationManager this.quizLogic = quizLogic this.questionManager = questionManager this.initializeNavigation() } initializeNavigation() { // Navigation buttons const navButtons = document.querySelectorAll(".nav-btn") navButtons.forEach((btn) => { btn.addEventListener("click", () => { const screen = btn.getAttribute("data-screen") if (screen) { this.showScreen(screen) this.updateActiveNavButton(btn) } }) }) // Action cards const actionCards = document.querySelectorAll(".action-card") actionCards.forEach((card) => { card.addEventListener("click", () => { const screen = card.getAttribute("data-screen") if (screen) { this.showScreen(screen) } }) }) // Screen navigation buttons const screenNavButtons = document.querySelectorAll("[data-screen]") screenNavButtons.forEach((btn) => { if (!btn.classList.contains("nav-btn") && !btn.classList.contains("action-card")) { btn.addEventListener("click", () => { const screen = btn.getAttribute("data-screen") if (screen) { this.showScreen(screen) } }) } }) } showScreen(screenName) { // Hide all screens const screens = document.querySelectorAll(".screen") screens.forEach((screen) => { screen.classList.remove("active") }) // Show target screen const targetScreen = document.getElementById(`${screenName}Screen`) if (targetScreen) { targetScreen.classList.add("active") this.currentScreen = screenName } // Update navigation this.updateNavigation(screenName) // Load screen-specific content this.loadScreenContent(screenName) } updateNavigation(screenName) { const navButtons = document.querySelectorAll(".nav-btn") navButtons.forEach((btn) => { btn.classList.remove("active") if (btn.getAttribute("data-screen") === screenName) { btn.classList.add("active") } }) } updateActiveNavButton(activeBtn) { const navButtons = document.querySelectorAll(".nav-btn") navButtons.forEach((btn) => btn.classList.remove("active")) activeBtn.classList.add("active") } loadScreenContent(screenName) { switch (screenName) { case "leaderboard": this.loadLeaderboard() break case "review": this.loadReview() break case "home": this.resetQuizForm() break } } loadLeaderboard() { const container = document.getElementById("leaderboardList") if (!container) return const scores = this.storageManager.getLeaderboard() if (scores.length === 0) { container.innerHTML = `

🏆

${this.translationManager.translate("leaderboard.noScores")}

` return } container.innerHTML = scores .map((entry, index) => { const rankClass = index === 0 ? "rank-1" : index === 1 ? "rank-2" : index === 2 ? "rank-3" : "rank-other" const date = new Date(entry.timestamp).toLocaleDateString() return `

${index + 1}

${this.escapeHtml(entry.username)}

${entry.accuracy.toFixed(1)}% • ${this.translationManager.translate(`categories.${entry.category}`)} • ${this.translationManager.translate(`difficulty.${entry.difficulty}`)}

${date}

${entry.score}

${this.translationManager.translate("leaderboard.points")}

` }) .join("") } loadReview() { const container = document.getElementById("reviewContainer") if (!container) return const quizData = this.quizLogic.getQuizData() if (!quizData.questions || quizData.questions.length === 0) { container.innerHTML = `

📋

No quiz data to review. Take a quiz first!

` return } const currentLang = this.translationManager.getCurrentLanguage() container.innerHTML = quizData.questions .map((question, index) => { const userAnswer = quizData.userAnswers[index] const localizedQuestion = this.questionManager.getLocalizedQuestion(question, currentLang) const isCorrect = userAnswer?.isCorrect || false return `

${this.translationManager.translate("quiz.question")} ${index + 1} ${isCorrect ? "✓ " + this.translationManager.translate("review.correct") : "✗ " + this.translationManager.translate("review.incorrect")}

${localizedQuestion.question}

${localizedQuestion.options .map((option, optIndex) => { const isUserAnswer = optIndex === userAnswer?.selected const isCorrectAnswer = optIndex === question.correct let optionClass = "review-option" if (isCorrectAnswer) { optionClass += " correct-answer" } else if (isUserAnswer) { optionClass += " user-answer" } return `

${String.fromCharCode(65 + optIndex)}. ${option} ${isCorrectAnswer ? '' + this.translationManager.translate("review.correct") + "" : ""} ${isUserAnswer && !isCorrectAnswer ? 'Your Answer' : ""}

` }) .join("")}

${this.translationManager.translate("review.yourAnswer")} ${userAnswer?.selected >= 0 ? localizedQuestion.options[userAnswer.selected] : "No answer"}

${this.translationManager.translate("review.correctAnswer")} ${localizedQuestion.options[question.correct]}

${this.translationManager.translate("review.time")} ${((userAnswer?.responseTime || 0) / 1000).toFixed(1)}s

${localizedQuestion.explanation ? `

${this.translationManager.translate("review.explanation")} ${localizedQuestion.explanation}

` : ""}

` }) .join("") } showResults(results, starRating) { // Update results screen const finalScore = document.getElementById("finalScore") const correctAnswers = document.getElementById("correctAnswers") const accuracy = document.getElementById("accuracy") const avgTime = document.getElementById("avgTime") const starRatingElement = document.getElementById("starRating") if (finalScore) { finalScore.textContent = results.score finalScore.classList.add("animate-bounce") } if (correctAnswers) { correctAnswers.textContent = `${results.correctAnswers}/${results.totalQuestions}` } if (accuracy) { accuracy.textContent = `${results.accuracy.toFixed(1)}%` } if (avgTime) { avgTime.textContent = `${results.averageTime.toFixed(1)}s` } if (starRatingElement) { starRatingElement.innerHTML = this.generateStarRating(starRating) } // Show results screen this.showScreen("results") } generateStarRating(rating) { let html = "" for (let i = 1; i <= 5; i++) { const filled = i <= rating ? "filled" : "empty" html += `⭐` } return html } resetQuizForm() { const form = document.getElementById("quizSetupForm") if (form) { // Don't reset username, but reset other fields to defaults const category = document.getElementById("category") const difficulty = document.getElementById("difficulty") if (category) category.value = "all" if (difficulty) difficulty.value = "medium" } } showLoading() { const spinner = document.getElementById("loadingSpinner") if (spinner) { spinner.style.display = "flex" } } hideLoading() { const spinner = document.getElementById("loadingSpinner") if (spinner) { spinner.style.display = "none" } } showNotification(message, type = "info") { // Create notification element const notification = document.createElement("div") notification.className = `notification notification-${type}` notification.innerHTML = `

${message}

` // Add to page document.body.appendChild(notification) // Add close functionality const closeBtn = notification.querySelector(".notification-close") if (closeBtn) { closeBtn.addEventListener("click", () => { notification.remove() }) } // Auto-remove after 5 seconds setTimeout(() => { if (notification.parentNode) { notification.remove() } }, 5000) } escapeHtml(text) { const div = document.createElement("div") div.textContent = text return div.innerHTML } } // Add notification styles const notificationStyles = document.createElement("style") notificationStyles.textContent = ` .notification { position: fixed; top: 20px; right: 20px; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border-left: 4px solid var(--primary-color); z-index: 10000; min-width: 300px; animation: slideInRight 0.3s ease-out; } .notification-info { border-left-color: var(--primary-color); } .notification-success { border-left-color: var(--success-color); } .notification-warning { border-left-color: var(--warning-color); } .notification-error { border-left-color: var(--danger-color); } .notification-content { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-4); gap: var(--spacing-3); } .notification-message { flex: 1; color: var(--gray-900); font-size: var(--font-size-sm); } .notification-close { background: none; border: none; color: var(--gray-500); cursor: pointer; font-size: 18px; padding: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all var(--transition-fast); } .notification-close:hover { background: var(--gray-100); color: var(--gray-700); } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } ` document.head.appendChild(notificationStyles) // Initialize UI manager const storageManager = new StorageManager() // Assume StorageManager is defined elsewhere const translationManager = window.TranslationManager // Declare TranslationManager const quizLogic = window.QuizLogic // Declare QuizLogic const questionManager = window.QuestionManager // Declare QuestionManager const uiManager = new UIManager(storageManager, translationManager, quizLogic, questionManager) [V0_FILE]javascript:file="js/storage-manager.js" isFixed="true" isMerged="true" // Storage Manager for Leaderboard and Settings class StorageManager { constructor() { this.leaderboardKey = "knowvia-leaderboard" this.settingsKey = "knowvia-settings" this.progressKey = "knowvia-progress" this.uiManager = window.uiManager // Declare uiManager variable } // Leaderboard Management saveScore(scoreData) { try { const existingScores = this.getLeaderboard() const newScore = { id: Date.now(), username: scoreData.username, score: scoreData.score, accuracy: scoreData.accuracy, correctAnswers: scoreData.correctAnswers, totalQuestions: scoreData.totalQuestions, averageTime: scoreData.averageTime, category: scoreData.category, difficulty: scoreData.difficulty, timestamp: scoreData.timestamp || new Date().toISOString(), } existingScores.push(newScore) // Sort by score (descending) and keep top 5 existingScores.sort((a, b) => { if (b.score !== a.score) { return b.score - a.score } // If scores are equal, sort by accuracy if (b.accuracy !== a.accuracy) { return b.accuracy - a.accuracy } // If accuracy is equal, sort by average time (faster is better) return a.averageTime - b.averageTime }) const top5 = existingScores.slice(0, 5) localStorage.setItem(this.leaderboardKey, JSON.stringify(top5)) // Show notification for new high score this.checkForNewRecord(newScore, top5) return newScore } catch (error) { console.error("Error saving score:", error) this.uiManager.showNotification("Failed to save score", "error") return null } } getLeaderboard() { try { const scores = localStorage.getItem(this.leaderboardKey) return scores ? JSON.parse(scores) : [] } catch (error) { console.error("Error loading leaderboard:", error) return [] } } checkForNewRecord(newScore, leaderboard) { const position = leaderboard.findIndex((score) => score.id === newScore.id) if (position === 0) { this.uiManager.showNotification("🎉 New High Score! You're #1!", "success") } else if (position >= 0 && position < 3) { this.uiManager.showNotification(`🏆 Great job! You're #${position + 1} on the leaderboard!`, "success") } else if (position >= 0) { this.uiManager.showNotification(`📊 You made it to the top 5! Position #${position + 1}`, "info") } } clearLeaderboard() { try { localStorage.removeItem(this.leaderboardKey) this.uiManager.showNotification("Leaderboard cleared", "info") } catch (error) { console.error("Error clearing leaderboard:", error) this.uiManager.showNotification("Failed to clear leaderboard", "error") } } // Settings Management saveSettings(settings) { try { localStorage.setItem(this.settingsKey, JSON.stringify(settings)) } catch (error) { console.error("Error saving settings:", error) } } getSettings() { try { const settings = localStorage.getItem(this.settingsKey) return settings ? JSON.parse(settings) : this.getDefaultSettings() } catch (error) { console.error("Error loading settings:", error) return this.getDefaultSettings() } } getDefaultSettings() { return { theme: "light", language: "en", soundEnabled: true, animationsEnabled: true, autoAdvance: true, showHints: true, } } updateSetting(key, value) { const settings = this.getSettings() settings[key] = value this.saveSettings(settings) } // Progress Management (for pause/resume functionality) saveProgress(progressData) { try { const progress = { ...progressData, timestamp: new Date().toISOString(), } localStorage.setItem(this.progressKey, JSON.stringify(progress)) } catch (error) { console.error("Error saving progress:", error) } } getProgress() { try { const progress = localStorage.getItem(this.progressKey) return progress ? JSON.parse(progress) : null } catch (error) { console.error("Error loading progress:", error) return null } } clearProgress() { try { localStorage.removeItem(this.progressKey) } catch (error) { console.error("Error clearing progress:", error) } } // Statistics getStatistics() { const leaderboard = this.getLeaderboard() const allScores = this.getAllScores() // This would need to be implemented to store all scores, not just top 5 return { totalQuizzes: allScores.length, averageScore: allScores.length > 0 ? allScores.reduce((sum, score) => sum + score.score, 0) / allScores.length : 0, bestScore: leaderboard.length > 0 ? leaderboard[0].score : 0, averageAccuracy: allScores.length > 0 ? allScores.reduce((sum, score) => sum + score.accuracy, 0) / allScores.length : 0, favoriteCategory: this.getMostPlayedCategory(allScores), favoritedifficulty: this.getMostPlayedDifficulty(allScores), } } getAllScores() { // For now, return leaderboard scores // In a full implementation, you'd store all scores separately return this.getLeaderboard() } getMostPlayedCategory(scores) { if (scores.length === 0) return "general" const categoryCount = {} scores.forEach((score) => { categoryCount[score.category] = (categoryCount[score.category] || 0) + 1 }) return Object.keys(categoryCount).reduce((a, b) => (categoryCount[a] > categoryCount[b] ? a : b)) } getMostPlayedDifficulty(scores) { if (scores.length === 0) return "medium" const difficultyCount = {} scores.forEach((score) => { difficultyCount[score.difficulty] = (difficultyCount[score.difficulty] || 0) + 1 }) return Object.keys(difficultyCount).reduce((a, b) => (difficultyCount[a] > difficultyCount[b] ? a : b)) } // Export/Import functionality exportData() { try { const data = { leaderboard: this.getLeaderboard(), settings: this.getSettings(), exportDate: new Date().toISOString(), version: "1.0", } const dataStr = JSON.stringify(data, null, 2) const dataBlob = new Blob([dataStr], { type: "application/json" }) const link = document.createElement("a") link.href = URL.createObjectURL(dataBlob) link.download = `knowvia-data-${new Date().toISOString().split("T")[0]}.json` link.click() this.uiManager.showNotification("Data exported successfully", "success") } catch (error) { console.error("Error exporting data:", error) this.uiManager.showNotification("Failed to export data", "error") } } importData(file) { try { const reader = new FileReader() reader.onload = (e) => { try { const data = JSON.parse(e.target.result) if (data.leaderboard) { localStorage.setItem(this.leaderboardKey, JSON.stringify(data.leaderboard)) } if (data.settings) { localStorage.setItem(this.settingsKey, JSON.stringify(data.settings)) } this.uiManager.showNotification("Data imported successfully", "success") // Refresh current screen this.uiManager.loadScreenContent(this.uiManager.currentScreen) } catch (parseError) { console.error("Error parsing import file:", parseError) this.uiManager.showNotification("Invalid file format", "error") } } reader.readAsText(file) } catch (error) { console.error("Error importing data:", error) this.uiManager.showNotification("Failed to import data", "error") } } // Data validation validateScoreData(scoreData) { const required = ["username", "score", "accuracy", "correctAnswers", "totalQuestions", "category", "difficulty"] for (const field of required) { if (scoreData[field] === undefined || scoreData[field] === null) { return false } } // Validate data types and ranges if (typeof scoreData.score !== "number" || scoreData.score < 0) return false if (typeof scoreData.accuracy !== "number" || scoreData.accuracy < 0 || scoreData.accuracy > 100) return false if (typeof scoreData.correctAnswers !== "number" || scoreData.correctAnswers < 0) return false if (typeof scoreData.totalQuestions !== "number" || scoreData.totalQuestions <= 0) return false if (scoreData.correctAnswers > scoreData.totalQuestions) return false return true } } // Initialize storage manager const storageManager = new StorageManager() [V0_FILE]javascript:file="js/theme-manager.js" isFixed="true" isMerged="true" // Theme Manager class ThemeManager { constructor() { this.currentTheme = "light" this.availableThemes = ["light", "dark", "ocean", "midnight", "forest", "sunset", "purple"] this.initializeTheme() this.setupEventListeners() } initializeTheme() { // Load saved theme const savedTheme = window.storageManager.getSettings().theme || "light" this.setTheme(savedTheme) // Check for system preference if (savedTheme === "auto") { this.setSystemTheme() } } setupEventListeners() { const themeToggle = document.getElementById("themeToggle") if (themeToggle) { themeToggle.addEventListener("click", () => this.toggleTheme()) } // Listen for system theme changes if (window.matchMedia) { const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)") mediaQuery.addEventListener("change", () => { if (this.currentTheme === "auto") { this.setSystemTheme() } }) } // Add theme selector if it exists const themeSelector = document.getElementById("themeSelector") if (themeSelector) { themeSelector.addEventListener("change", (e) => { this.setTheme(e.target.value) }) } } setTheme(themeName) { if (!this.availableThemes.includes(themeName) && themeName !== "auto") { console.warn(`Theme "${themeName}" not found, using default`) themeName = "light" } this.currentTheme = themeName if (themeName === "auto") { this.setSystemTheme() return } // Apply theme to document document.documentElement.setAttribute("data-theme", themeName) // Update theme toggle icon this.updateThemeToggleIcon(themeName) // Save theme preference window.storageManager.updateSetting("theme", themeName) // Trigger theme change event this.dispatchThemeChangeEvent(themeName) } setSystemTheme() { const prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches const systemTheme = prefersDark ? "dark" : "light" document.documentElement.setAttribute("data-theme", systemTheme) this.updateThemeToggleIcon(systemTheme) } toggleTheme() { const nextTheme = this.currentTheme === "light" ? "dark" : "light" this.setTheme(nextTheme) } updateThemeToggleIcon(theme) { const themeToggle = document.getElementById("themeToggle") const themeIcon = themeToggle?.querySelector(".theme-icon") if (themeIcon) { const icons = { light: "🌙", dark: "☀️", ocean: "🌊", midnight: "🌃", forest: "🌲", sunset: "🌅", purple: "💜", } themeIcon.textContent = icons[theme] || "🌙" } } getCurrentTheme() { return this.currentTheme } getAvailableThemes() { return this.availableThemes } dispatchThemeChangeEvent(theme) { const event = new CustomEvent("themechange", { detail: { theme }, }) document.dispatchEvent(event) } // Theme-specific configurations getThemeConfig(theme) { const configs = { light: { name: "Light", description: "Clean and bright interface", primaryColor: "#3b82f6", backgroundColor: "#ffffff", }, dark: { name: "Dark", description: "Easy on the eyes for low-light environments", primaryColor: "#6366f1", backgroundColor: "#0f172a", }, ocean: { name: "Ocean Blue", description: "Calming blue tones inspired by the ocean", primaryColor: "#0ea5e9", backgroundColor: "#e0f2fe", }, midnight: { name: "Midnight Dark", description: "Deep dark theme with purple accents", primaryColor: "#6366f1", backgroundColor: "#0f172a", }, forest: { name: "Forest Green", description: "Natural green theme inspired by nature", primaryColor: "#059669", backgroundColor: "#ecfdf5", }, sunset: { name: "Sunset Orange", description: "Warm orange and yellow tones", primaryColor: "#ea580c", backgroundColor: "#fff7ed", }, purple: { name: "Purple Dream", description: "Rich purple theme for a premium feel", primaryColor: "#9333ea", backgroundColor: "#faf5ff", }, } return configs[theme] || configs.light } // Create theme selector UI createThemeSelector() { const selector = document.createElement("div") selector.className = "theme-selector" selector.innerHTML = `

Choose Theme

${this.availableThemes .map((theme) => { const config = this.getThemeConfig(theme) return ` ` }) .join("")}

` // Add event listeners selector.querySelectorAll(".theme-option").forEach((option) => { option.addEventListener("click", () => { const theme = option.getAttribute("data-theme") this.setTheme(theme) // Update active state selector.querySelectorAll(".theme-option").forEach((opt) => opt.classList.remove("active")) option.classList.add("active") }) }) return selector } // Apply theme-specific animations applyThemeAnimations(theme) { const body = document.body // Remove existing theme animation classes body.classList.remove("theme-transition-light", "theme-transition-dark", "theme-transition-ocean") // Add new theme animation class body.classList.add(`theme-transition-${theme}`) // Remove animation class after transition setTimeout(() => { body.classList.remove(`theme-transition-${theme}`) }, 500) } // Export theme settings exportThemeSettings() { return { currentTheme: this.currentTheme, customThemes: this.getCustomThemes(), } } // Import theme settings importThemeSettings(settings) { if (settings.currentTheme) { this.setTheme(settings.currentTheme) } if (settings.customThemes) { this.loadCustomThemes(settings.customThemes) } } // Custom theme support (for future enhancement) getCustomThemes() { try { const customThemes = localStorage.getItem("knowvia-custom-themes") return customThemes ? JSON.parse(customThemes) : {} } catch (error) { console.error("Error loading custom themes:", error) return {} } } loadCustomThemes(customThemes) { try { localStorage.setItem("knowvia-custom-themes", JSON.stringify(customThemes)) // Merge with available themes this.availableThemes = [...this.availableThemes, ...Object.keys(customThemes)] } catch (error) { console.error("Error saving custom themes:", error) } } } // Add theme selector styles const themeStyles = document.createElement("style") themeStyles.textContent = ` .theme-selector { background: var(--white); border-radius: var(--radius-2xl); padding: var(--spacing-6); box-shadow: var(--shadow-lg); max-width: 500px; margin: 0 auto; } .theme-selector h4 { margin: 0 0 var(--spacing-4) 0; font-size: var(--font-size-lg); font-weight: 600; color: var(--gray-900); text-align: center; } .theme-options { display: grid; gap: var(--spacing-3); } .theme-option { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3); border: 2px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); cursor: pointer; transition: all var(--transition-fast); text-align: left; } .theme-option:hover { border-color: var(--primary-color); transform: translateY(-1px); box-shadow: var(--shadow-md); } .theme-option.active { border-color: var(--primary-color); background: var(--primary-color); color: var(--white); } .theme-preview { width: 40px; height: 40px; border-radius: var(--radius-lg); flex-shrink: 0; } .theme-info { flex: 1; } .theme-name { font-weight: 600; margin-bottom: var(--spacing-1); } .theme-description { font-size: var(--font-size-sm); opacity: 0.8; } .theme-option.active .theme-description { opacity: 0.9; } /* Theme transition animations */ .theme-transition-light { animation: lightThemeTransition 0.5s ease-out; } .theme-transition-dark { animation: darkThemeTransition 0.5s ease-out; } .theme-transition-ocean { animation: oceanThemeTransition 0.5s ease-out; } @keyframes lightThemeTransition { 0% { filter: brightness(0.8); } 100% { filter: brightness(1); } } @keyframes darkThemeTransition { 0% { filter: brightness(1.2); } 100% { filter: brightness(1); } } @keyframes oceanThemeTransition { 0% { filter: hue-rotate(180deg); } 100% { filter: hue-rotate(0deg); } } @media (max-width: 640px) { .theme-selector { margin: var(--spacing-4); padding: var(--spacing-4); } .theme-option { flex-direction: column; text-align: center; gap: var(--spacing-2); } .theme-preview { width: 60px; height: 60px; } } ` document.head.appendChild(themeStyles) // Initialize theme manager const themeManager = new ThemeManager() // Listen for theme change events document.addEventListener("themechange", (e) => { console.log(`Theme changed to: ${e.detail.theme}`) // Update any theme-dependent components if (window.blastAnimation) { // Update animation colors based on theme window.blastAnimation.updateThemeColors(e.detail.theme) } }) [V0_FILE]javascript:file="js/app.js" isFixed="true" isQuickEdit="true" isMerged="true" // Main Application Controller class KnowviaApp { constructor() { this.isInitialized = false this.components = {} this.init() } async init() { try { // Show loading spinner this.showLoading() // Initialize core components await this.initializeComponents() // Setup global event listeners this.setupGlobalEventListeners() // Initialize translations this.initializeTranslations() // Load saved settings this.loadSettings() // Hide loading spinner this.hideLoading() // Mark as initialized this.isInitialized = true console.log("Knowvia Quiz App initialized successfully") } catch (error) { console.error("Failed to initialize app:", error) this.showError("Failed to initialize application") } } async initializeComponents() { // Initialize managers in correct order this.components.storageManager = new StorageManager() this.components.translationManager = new window.TranslationManager() this.components.questionManager = new window.QuestionManager() this.components.themeManager = new window.ThemeManager() this.components.blastAnimation = new window.BlastAnimation() this.components.chatbot = new window.QuizChatbot() // Initialize UI and Quiz logic with dependencies this.components.uiManager = new window.UIManager( this.components.storageManager, this.components.translationManager, null, // Will be set after quizLogic is created this.components.questionManager, ) this.components.quizLogic = new window.QuizLogic() // Update UI manager with quiz logic reference this.components.uiManager.quizLogic = this.components.quizLogic // Make components globally available window.storageManager = this.components.storageManager window.translationManager = this.components.translationManager window.questionManager = this.components.questionManager window.themeManager = this.components.themeManager window.blastAnimation = this.components.blastAnimation window.quizChatbot = this.components.chatbot window.uiManager = this.components.uiManager window.quizLogic = this.components.quizLogic } setupGlobalEventListeners() { // Language selector const languageSelect = document.getElementById("languageSelect") if (languageSelect) { languageSelect.addEventListener("change", (e) => { this.components.translationManager.setLanguage(e.target.value) }) } // Keyboard shortcuts document.addEventListener("keydown", (e) => { this.handleKeyboardShortcuts(e) }) // Window events window.addEventListener("beforeunload", () => { this.saveAppState() }) window.addEventListener("online", () => { this.handleOnlineStatus(true) }) window.addEventListener("offline", () => { this.handleOnlineStatus(false) }) // Visibility change (for pause/resume) document.addEventListener("visibilitychange", () => { this.handleVisibilityChange() }) } initializeTranslations() { // Set initial language from settings or browser const savedLanguage = this.components.storageManager.getSettings().language const browserLanguage = navigator.language.split("-")[0] const supportedLanguages = this.components.translationManager.getAvailableLanguages() let initialLanguage = "en" if (savedLanguage && supportedLanguages.includes(savedLanguage)) { initialLanguage = savedLanguage } else if (supportedLanguages.includes(browserLanguage)) { initialLanguage = browserLanguage } this.components.translationManager.setLanguage(initialLanguage) // Update language selector const languageSelect = document.getElementById("languageSelect") if (languageSelect) { languageSelect.value = initialLanguage } } loadSettings() { const settings = this.components.storageManager.getSettings() // Apply theme if (settings.theme) { this.components.themeManager.setTheme(settings.theme) } // Apply other settings if (settings.soundEnabled !== undefined) { this.setSoundEnabled(settings.soundEnabled) } if (settings.animationsEnabled !== undefined) { this.setAnimationsEnabled(settings.animationsEnabled) } } handleKeyboardShortcuts(e) { // Only handle shortcuts when not typing in input fields if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") { return } switch (e.key) { case "h": if (e.ctrlKey || e.metaKey) { e.preventDefault() this.components.uiManager.showScreen("home") } break case "l": if (e.ctrlKey || e.metaKey) { e.preventDefault() this.components.uiManager.showScreen("leaderboard") } break case "r": if (e.ctrlKey || e.metaKey) { e.preventDefault() this.components.uiManager.showScreen("review") } break case "t": if (e.ctrlKey || e.metaKey) { e.preventDefault() this.components.themeManager.toggleTheme() } break case "c": if (e.ctrlKey || e.metaKey) { e.preventDefault() this.components.chatbot.toggleChatbot() } break case "Escape": // Close modals or chatbot const modal = document.getElementById("scoreModal") if (modal && modal.style.display === "flex") { modal.style.display = "none" } this.components.chatbot.closeChatbot() break } } handleOnlineStatus(isOnline) { const message = isOnline ? "Connection restored" : "You are offline" const type = isOnline ? "success" : "warning" this.components.uiManager.showNotification(message, type) } handleVisibilityChange() { if (document.hidden) { // Page is hidden - pause quiz if active if (this.components.quizLogic.isQuizActive) { this.components.quizLogic.pauseQuiz() } } else { // Page is visible - resume quiz if paused if (this.components.quizLogic.isPaused) { this.components.quizLogic.resumeQuiz() } } } saveAppState() { // Save current quiz progress if active if (this.components.quizLogic.isQuizActive) { const progressData = { currentQuestionIndex: this.components.quizLogic.currentQuestionIndex, questions: this.components.quizLogic.questions, userAnswers: this.components.quizLogic.userAnswers, score: this.components.quizLogic.score, settings: this.components.quizLogic.quizSettings, timeRemaining: this.components.quizLogic.timeRemaining, } this.components.storageManager.saveProgress(progressData) } } setSoundEnabled(enabled) { // Implementation for sound settings this.components.storageManager.updateSetting("soundEnabled", enabled) } setAnimationsEnabled(enabled) { // Implementation for animation settings this.components.storageManager.updateSetting("animationsEnabled", enabled) if (enabled) { document.body.classList.remove("no-animations") } else { document.body.classList.add("no-animations") } } showLoading() { const spinner = document.getElementById("loadingSpinner") if (spinner) { spinner.style.display = "flex" } } hideLoading() { const spinner = document.getElementById("loadingSpinner") if (spinner) { spinner.style.display = "none" } } showError(message) { const errorDiv = document.createElement("div") errorDiv.className = "error-message" errorDiv.innerHTML = `

Error

${message}

` document.body.appendChild(errorDiv) } // Public API methods getComponent(name) { return this.components[name] } isReady() { return this.isInitialized } restart() { // Reset all components Object.values(this.components).forEach((component) => { if (component.reset) { component.reset() } }) // Return to home screen this.components.uiManager.showScreen("home") } } // Add global styles for no-animations class const globalStyles = document.createElement("style") globalStyles.textContent = ` .no-animations * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .error-message { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 10000; } .error-content { background: white; padding: 2rem; border-radius: 1rem; text-align: center; max-width: 400px; margin: 1rem; } .error-content h3 { color: #ef4444; margin: 0 0 1rem 0; } .error-content p { margin: 0 0 1.5rem 0; color: #374151; } .error-content button { background: #3b82f6; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 0.5rem; cursor: pointer; font-size: 1rem; } .error-content button:hover { background: #2563eb; } ` document.head.appendChild(globalStyles) // Initialize the application when DOM is loaded document.addEventListener("DOMContentLoaded", () => { window.knowviaApp = new KnowviaApp() }) // Export for global access window.KnowviaApp = KnowviaApp // Declare missing classes globally window.TranslationManager = class TranslationManager {} window.QuestionManager = class QuestionManager {} window.ThemeManager = class ThemeManager {} window.BlastAnimation = class BlastAnimation {} window.QuizChatbot = class QuizChatbot {} window.UIManager = class UIManager {} window.QuizLogic = class QuizLogic {} [V0_FILE]json:file="manifest.json" isMerged="true" { "name": "Knowvia - Interactive Quiz Platform", "short_name": "Knowvia", "description": "Test your knowledge with our interactive multilingual quiz platform", "version": "1.0.0", "manifest_version": 3, "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#3b82f6", "orientation": "portrait-primary", "scope": "/", "lang": "en", "categories": ["education", "games", "entertainment"], "icons": [ { "src": "icons/icon-72x72.png", "sizes": "72x72", "type": "image/png", "purpose": "maskable any" }, { "src": "icons/icon-96x96.png", "sizes": "96x96", "type": "image/png", "purpose": "maskable any" }, { "src": "icons/icon-128x128.png", "sizes": "128x128", "type": "image/png", "purpose": "maskable any" }, { "src": "icons/icon-144x144.png", "sizes": "144x144", "type": "image/png", "purpose": "maskable any" }, { "src": "icons/icon-152x152.png", "sizes": "152x152", "type": "image/png", "purpose": "maskable any" }, { "src": "icons/icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable any" }, { "src": "icons/icon-384x384.png", "sizes": "384x384", "type": "image/png", "purpose": "maskable any" }, { "src": "icons/icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable any" } ], "screenshots": [ { "src": "screenshots/desktop-home.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide", "label": "Knowvia Home Screen" }, { "src": "screenshots/mobile-quiz.png", "sizes": "390x844", "type": "image/png", "form_factor": "narrow", "label": "Quiz Interface" } ], "shortcuts": [ { "name": "Start Quiz", "short_name": "Quiz", "description": "Start a new quiz", "url": "/?action=start-quiz", "icons": [ { "src": "icons/shortcut-quiz.png", "sizes": "96x96" } ] }, { "name": "Leaderboard", "short_name": "Scores", "description": "View top scores", "url": "/?screen=leaderboard", "icons": [ { "src": "icons/shortcut-leaderboard.png", "sizes": "96x96" } ] } ], "related_applications": [], "prefer_related_applications": false, "edge_side_panel": { "preferred_width": 400 }, "launch_handler": { "client_mode": "navigate-existing" } } [V0_FILE]javascript:file="sw.js" isMerged="true" // Service Worker for Knowvia Quiz App const CACHE_NAME = "knowvia-v1.0.0" const STATIC_CACHE = "knowvia-static-v1" const DYNAMIC_CACHE = "knowvia-dynamic-v1" // Files to cache immediately const STATIC_FILES = [ "/", "/index.html", "/styles/main.css", "/styles/components.css", "/styles/animations.css", "/styles/themes.css", "/styles/responsive.css", "/js/translations.js", "/js/questions.js", "/js/blast-animation.js", "/js/chatbot.js", "/js/quiz-logic.js", "/js/ui-manager.js", "/js/storage-manager.js", "/js/theme-manager.js", "/js/app.js", "/manifest.json", ] // Install event - cache static files self.addEventListener("install", (event) => { console.log("Service Worker: Installing...") event.waitUntil( caches .open(STATIC_CACHE) .then((cache) => { console.log("Service Worker: Caching static files") return cache.addAll(STATIC_FILES) }) .then(() => { console.log("Service Worker: Static files cached") return self.skipWaiting() }) .catch((error) => { console.error("Service Worker: Error caching static files", error) }), ) }) // Activate event - clean up old caches self.addEventListener("activate", (event) => { console.log("Service Worker: Activating...") event.waitUntil( caches .keys() .then((cacheNames) => { return Promise.all( cacheNames.map((cacheName) => { if (cacheName !== STATIC_CACHE && cacheName !== DYNAMIC_CACHE) { console.log("Service Worker: Deleting old cache", cacheName) return caches.delete(cacheName) } }), ) }) .then(() => { console.log("Service Worker: Activated") return self.clients.claim() }), ) }) // Fetch event - serve from cache, fallback to network self.addEventListener("fetch", (event) => { const { request } = event const url = new URL(request.url) // Skip non-GET requests if (request.method !== "GET") { return } // Skip external requests if (url.origin !== location.origin) { return } event.respondWith( caches.match(request).then((cachedResponse) => { if (cachedResponse) { console.log("Service Worker: Serving from cache", request.url) return cachedResponse } // Not in cache, fetch from network return fetch(request) .then((networkResponse) => { // Don't cache non-successful responses if (!networkResponse || networkResponse.status !== 200 || networkResponse.type !== "basic") { return networkResponse } // Clone the response const responseToCache = networkResponse.clone() // Determine which cache to use const cacheToUse = STATIC_FILES.includes(url.pathname) ? STATIC_CACHE : DYNAMIC_CACHE // Add to cache caches.open(cacheToUse).then((cache) => { console.log("Service Worker: Caching new resource", request.url) cache.put(request, responseToCache) }) return networkResponse }) .catch((error) => { console.log("Service Worker: Fetch failed, serving offline page", error) // Return offline page for navigation requests if (request.destination === "document") { return caches.match("/offline.html") } // Return offline fallback for other resources return new Response("Offline", { status: 503, statusText: "Service Unavailable", }) }) }), ) }) // Background sync for quiz scores self.addEventListener("sync", (event) => { console.log("Service Worker: Background sync triggered", event.tag) if (event.tag === "sync-quiz-scores") { event.waitUntil(syncQuizScores()) } }) // Push notifications self.addEventListener("push", (event) => { console.log("Service Worker: Push notification received") const options = { body: event.data ? event.data.text() : "New quiz available!", icon: "/icons/icon-192x192.png", badge: "/icons/badge-72x72.png", vibrate: [200, 100, 200], data: { dateOfArrival: Date.now(), primaryKey: 1, }, actions: [ { action: "start-quiz", title: "Start Quiz", icon: "/icons/action-quiz.png", }, { action: "view-leaderboard", title: "Leaderboard", icon: "/icons/action-leaderboard.png", }, ], } event.waitUntil(self.registration.showNotification("Knowvia Quiz", options)) }) // Notification click handling self.addEventListener("notificationclick", (event) => { console.log("Service Worker: Notification clicked", event.action) event.notification.close() const action = event.action let url = "/" switch (action) { case "start-quiz": url = "/?action=start-quiz" break case "view-leaderboard": url = "/?screen=leaderboard" break default: url = "/" } event.waitUntil( clients.matchAll({ type: "window" }).then((clientList) => { // Check if app is already open for (const client of clientList) { if (client.url === url && "focus" in client) { return client.focus() } } // Open new window if (clients.openWindow) { return clients.openWindow(url) } }), ) }) // Periodic background sync (if supported) self.addEventListener("periodicsync", (event) => { console.log("Service Worker: Periodic sync triggered", event.tag) if (event.tag === "update-questions") { event.waitUntil(updateQuestions()) } }) // Helper functions async function syncQuizScores() { try { // Get pending scores from IndexedDB or localStorage const pendingScores = await getPendingScores() if (pendingScores.length === 0) { return } // Sync with server (if available) for (const score of pendingScores) { try { await syncScoreToServer(score) await removePendingScore(score.id) } catch (error) { console.error("Failed to sync score:", error) } } } catch (error) { console.error("Background sync failed:", error) } } async function updateQuestions() { try { // Fetch new questions from server const response = await fetch("/api/questions/latest") if (response.ok) { const newQuestions = await response.json() // Update cached questions const cache = await caches.open(DYNAMIC_CACHE) await cache.put("/api/questions", new Response(JSON.stringify(newQuestions))) console.log("Questions updated successfully") } } catch (error) { console.error("Failed to update questions:", error) } } async function getPendingScores() { // Implementation would depend on storage method return [] } async function syncScoreToServer(score) { // Implementation for server sync return fetch("/api/scores", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(score), }) } async function removePendingScore(scoreId) { // Implementation to remove synced score from pending list } // Message handling from main thread self.addEventListener("message", (event) => { console.log("Service Worker: Message received", event.data) if (event.data && event.data.type === "SKIP_WAITING") { self.skipWaiting() } if (event.data && event.data.type === "CACHE_QUIZ_DATA") { event.waitUntil(cacheQuizData(event.data.payload)) } }) async function cacheQuizData(data) { try { const cache = await caches.open(DYNAMIC_CACHE) await cache.put("/quiz-data", new Response(JSON.stringify(data))) console.log("Quiz data cached successfully") } catch (error) { console.error("Failed to cache quiz data:", error) } } // Error handling self.addEventListener("error", (event) => { console.error("Service Worker error:", event.error) }) self.addEventListener("unhandledrejection", (event) => { console.error("Service Worker unhandled rejection:", event.reason) }) [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useRef, useCallback } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" // Question Database const questionDatabase = { general: { easy: [ { id: 1, question: "What is the capital of France?", options: ["London", "Berlin", "Paris", "Madrid"], correct: 2, explanation: "Paris is the capital and largest city of France, known for the Eiffel Tower.", hint: "Think about the city famous for the Eiffel Tower and romantic atmosphere.", category: "general", difficulty: "easy", }, { id: 2, question: "How many continents are there?", options: ["5", "6", "7", "8"], correct: 2, explanation: "There are 7 continents: Asia, Africa, North America, South America, Antarctica, Europe, and Australia.", hint: "Count the major landmasses on Earth - it's more than 5 but less than 10.", category: "general", difficulty: "easy", }, { id: 3, question: "What is the largest ocean on Earth?", options: ["Atlantic", "Indian", "Arctic", "Pacific"], correct: 3, explanation: "The Pacific Ocean is the largest ocean, covering about one-third of Earth's surface.", hint: "This ocean's name means 'peaceful' and it borders Asia and the Americas.", category: "general", difficulty: "easy", }, { id: 4, question: "Which planet is known as the Red Planet?", options: ["Venus", "Mars", "Jupiter", "Saturn"], correct: 1, explanation: "Mars is called the Red Planet due to iron oxide (rust) on its surface.", hint: "Named after the Roman god of war, this planet appears reddish in the night sky.", category: "general", difficulty: "easy", }, { id: 5, question: "What is the chemical symbol for water?", options: ["H2O", "CO2", "NaCl", "O2"], correct: 0, explanation: "H2O represents water - two hydrogen atoms bonded to one oxygen atom.", hint: "It contains hydrogen and oxygen - think about what you drink every day.", category: "general", difficulty: "easy", }, ], medium: [ { id: 6, question: "Who painted the Mona Lisa?", options: ["Michelangelo", "Leonardo da Vinci", "Raphael", "Donatello"], correct: 1, explanation: "Leonardo da Vinci painted the Mona Lisa between 1503 and 1519.", hint: "This Renaissance master was also an inventor and scientist, known for his notebooks.", category: "general", difficulty: "medium", }, { id: 7, question: "What is the smallest country in the world?", options: ["Monaco", "Vatican City", "San Marino", "Liechtenstein"], correct: 1, explanation: "Vatican City is the smallest country with an area of just 0.17 square miles.", hint: "This country is entirely surrounded by Rome and is the spiritual center of Catholicism.", category: "general", difficulty: "medium", }, { id: 8, question: "Which element has the atomic number 1?", options: ["Helium", "Hydrogen", "Lithium", "Carbon"], correct: 1, explanation: "Hydrogen has atomic number 1, making it the lightest element.", hint: "This is the most abundant element in the universe and the simplest atom.", category: "general", difficulty: "medium", }, { id: 9, question: "In which year did World War II end?", options: ["1944", "1945", "1946", "1947"], correct: 1, explanation: "World War II ended in 1945 with Japan's surrender in September.", hint: "The war ended in the mid-1940s, the same year the atomic bombs were dropped.", category: "general", difficulty: "medium", }, { id: 10, question: "What is the largest mammal in the world?", options: ["African Elephant", "Blue Whale", "Giraffe", "Polar Bear"], correct: 1, explanation: "The blue whale is the largest mammal and animal ever known to exist.", hint: "This marine mammal can grow up to 100 feet long and lives in the ocean.", category: "general", difficulty: "medium", }, ], hard: [ { id: 11, question: "What is the Planck constant approximately equal to?", options: ["6.626 × 10⁻³⁴ J⋅s", "6.626 × 10⁻²⁷ J⋅s", "6.626 × 10⁻³¹ J⋅s", "6.626 × 10⁻²⁸ J⋅s"], correct: 0, explanation: "The Planck constant is 6.626 × 10⁻³⁴ J⋅s, fundamental in quantum mechanics.", hint: "This fundamental constant relates energy to frequency in quantum mechanics.", category: "general", difficulty: "hard", }, { id: 12, question: "Who developed the theory of general relativity?", options: ["Isaac Newton", "Albert Einstein", "Niels Bohr", "Max Planck"], correct: 1, explanation: "Albert Einstein developed general relativity, published in 1915.", hint: "This physicist is famous for E=mc² and won the Nobel Prize in Physics.", category: "general", difficulty: "hard", }, { id: 13, question: "What is the most abundant gas in Earth's atmosphere?", options: ["Oxygen", "Carbon Dioxide", "Nitrogen", "Argon"], correct: 2, explanation: "Nitrogen makes up about 78% of Earth's atmosphere.", hint: "This gas makes up more than three-quarters of our atmosphere but we can't breathe it alone.", category: "general", difficulty: "hard", }, { id: 14, question: "Which ancient wonder was located in Alexandria?", options: ["Hanging Gardens", "Lighthouse of Alexandria", "Colossus of Rhodes", "Temple of Artemis"], correct: 1, explanation: "The Lighthouse of Alexandria was one of the Seven Wonders of the Ancient World.", hint: "This structure helped ships navigate safely to the ancient port city in Egypt.", category: "general", difficulty: "hard", }, { id: 15, question: "What is the smallest unit of matter that retains element properties?", options: ["Molecule", "Atom", "Proton", "Electron"], correct: 1, explanation: "An atom is the smallest unit that retains the properties of an element.", hint: "This basic unit of matter was once thought to be indivisible (its name means 'uncuttable').", category: "general", difficulty: "hard", }, ], }, science: { easy: [ { id: 16, question: "What gas do plants absorb during photosynthesis?", options: ["Oxygen", "Carbon Dioxide", "Nitrogen", "Hydrogen"], correct: 1, explanation: "Plants absorb carbon dioxide and convert it to glucose during photosynthesis.", hint: "Plants take in this gas that humans and animals exhale.", category: "science", difficulty: "easy", }, ], medium: [ { id: 17, question: "What is the powerhouse of the cell?", options: ["Nucleus", "Mitochondria", "Ribosome", "Endoplasmic Reticulum"], correct: 1, explanation: "Mitochondria produce ATP, the cell's main energy currency.", hint: "This organelle produces energy for the cell and has its own DNA.", category: "science", difficulty: "medium", }, ], hard: [ { id: 18, question: "What is the boundary around a black hole called?", options: ["Event Horizon", "Photon Sphere", "Ergosphere", "Singularity"], correct: 0, explanation: "The event horizon is the boundary beyond which nothing can escape a black hole.", hint: "This is the point of no return around a black hole - once you cross it, you can't come back.", category: "science", difficulty: "hard", }, ], }, } // Utility functions function getQuestions(category: string, difficulty: string, count = 15) { let allQuestions: any[] = [] if (category === "all") { Object.keys(questionDatabase).forEach((cat) => { Object.keys(questionDatabase[cat as keyof typeof questionDatabase]).forEach((diff) => { allQuestions = allQuestions.concat( questionDatabase[cat as keyof typeof questionDatabase][ diff as keyof (typeof questionDatabase)[keyof typeof questionDatabase] ], ) }) }) } else { const categoryData = questionDatabase[category as keyof typeof questionDatabase] if (categoryData) { if (categoryData[difficulty as keyof typeof categoryData]) { allQuestions = [...categoryData[difficulty as keyof typeof categoryData]] } if (allQuestions.length < count) { Object.keys(categoryData).forEach((diff) => { if (diff !== difficulty) { allQuestions = allQuestions.concat(categoryData[diff as keyof typeof categoryData]) } }) } } } // Shuffle and return exactly the requested count const shuffled = shuffleArray(allQuestions) return shuffled.slice(0, count) } function shuffleArray(array: any[]) { const shuffled = [...array] for (let i = shuffled.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)) ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]] } return shuffled } export default function KnowviaQuiz() { // Quiz state const [currentScreen, setCurrentScreen] = useState("home") const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0) const [questions, setQuestions] = useState([]) const [userAnswers, setUserAnswers] = useState([]) const [score, setScore] = useState(0) const [timeRemaining, setTimeRemaining] = useState(15) const [username, setUsername] = useState("") const [category, setCategory] = useState("all") const [difficulty, setDifficulty] = useState("medium") const [isQuizActive, setIsQuizActive] = useState(false) const [showHint, setShowHint] = useState(false) const [currentHint, setCurrentHint] = useState("") const [showResults, setShowResults] = useState(false) const [quizResults, setQuizResults] = useState(null) const [leaderboard, setLeaderboard] = useState([]) const [showScoreAnimation, setShowScoreAnimation] = useState(false) const [starRating, setStarRating] = useState(0) // Refs const timerRef = useRef(null) const questionStartTime = useRef(0) // Timer logic const startTimer = useCallback(() => { setTimeRemaining(15) questionStartTime.current = Date.now() timerRef.current = setInterval(() => { setTimeRemaining((prev) => { if (prev <= 1) { handleTimeUp() return 0 } return prev - 1 }) }, 1000) }, []) const stopTimer = useCallback(() => { if (timerRef.current) { clearInterval(timerRef.current) timerRef.current = null } }, []) const handleTimeUp = useCallback(() => { stopTimer() // Auto-select no answer const newAnswers = [...userAnswers] newAnswers[currentQuestionIndex] = { selected: -1, correct: questions[currentQuestionIndex]?.correct, responseTime: 15000, timeRemaining: 0, } setUserAnswers(newAnswers) // Auto-advance after showing correct answer setTimeout(() => { if (currentQuestionIndex < questions.length - 1) { nextQuestion() } else { finishQuiz() } }, 2000) }, [currentQuestionIndex, questions, userAnswers]) // Quiz functions const startQuiz = () => { if (!username.trim()) { alert("Please enter your name") return } // Get exactly 15 questions const quizQuestions = getQuestions(category, difficulty, 15) if (quizQuestions.length === 0) { alert("No questions available for this category/difficulty") return } setQuestions(quizQuestions) setCurrentQuestionIndex(0) setUserAnswers([]) setScore(0) setIsQuizActive(true) setCurrentScreen("quiz") setShowHint(false) setShowResults(false) // Start timer for first question setTimeout(() => { startTimer() }, 500) } const selectAnswer = (selectedIndex: number) => { if (userAnswers[currentQuestionIndex] !== undefined) return stopTimer() const question = questions[currentQuestionIndex] const responseTime = Date.now() - questionStartTime.current // Record answer const newAnswers = [...userAnswers] newAnswers[currentQuestionIndex] = { selected: selectedIndex, correct: question.correct, responseTime: responseTime, timeRemaining: timeRemaining, } setUserAnswers(newAnswers) // Calculate score if (selectedIndex === question.correct) { const basePoints = getBasePoints(difficulty) const timeBonus = Math.floor((timeRemaining / 15) * 50) const questionScore = basePoints + timeBonus setScore((prev) => prev + questionScore) } // Auto-advance after 2 seconds setTimeout(() => { if (currentQuestionIndex < questions.length - 1) { nextQuestion() } else { finishQuiz() } }, 2000) } const nextQuestion = () => { setCurrentQuestionIndex((prev) => prev + 1) setShowHint(false) setCurrentHint("") startTimer() } const finishQuiz = () => { stopTimer() setIsQuizActive(false) // Calculate final metrics with null checks const correctAnswers = userAnswers.filter((answer) => answer && answer.selected === answer.correct).length const totalQuestions = questions.length || 1 // Prevent division by zero const accuracy = totalQuestions > 0 ? (correctAnswers / totalQuestions) * 100 : 0 const validAnswers = userAnswers.filter((answer) => answer && typeof answer.responseTime === "number") const averageTime = validAnswers.length > 0 ? validAnswers.reduce((sum, answer) => sum + answer.responseTime, 0) / validAnswers.length / 1000 : 0 const results = { username: username || "Anonymous", score: score || 0, correctAnswers, totalQuestions, accuracy: Math.max(0, Math.min(100, accuracy)), // Ensure accuracy is between 0-100 averageTime: Math.max(0, averageTime), // Ensure positive value category: category || "general", difficulty: difficulty || "medium", } // Calculate star rating with null check const stars = calculateStarRating(results.accuracy) setStarRating(stars) // Save to leaderboard saveScoreToLeaderboard(results) setQuizResults(results) // Show score animation setShowScoreAnimation(true) setTimeout(() => { setShowScoreAnimation(false) setShowResults(true) setCurrentScreen("results") }, 3000) } const getBasePoints = (diff: string) => { const multipliers = { easy: 10, medium: 15, hard: 20 } return multipliers[diff as keyof typeof multipliers] || 15 } const restartQuiz = () => { setCurrentScreen("home") setIsQuizActive(false) setShowResults(false) setQuizResults(null) setCurrentQuestionIndex(0) setQuestions([]) setUserAnswers([]) setScore(0) setShowHint(false) setCurrentHint("") stopTimer() setShowScoreAnimation(false) setStarRating(0) } const showHintForCurrentQuestion = () => { const question = questions[currentQuestionIndex] if (question && question.hint) { setCurrentHint(question.hint) setShowHint(true) } } const closeResultsModal = () => { setShowResults(false) setShowScoreAnimation(false) setCurrentScreen("home") setQuizResults(null) setStarRating(0) } // Cleanup timer on unmount useEffect(() => { return () => { if (timerRef.current) { clearInterval(timerRef.current) } } }, []) useEffect(() => { // Initialize with safe defaults setLeaderboard([]) loadLeaderboard() }, []) const currentQuestion = questions[currentQuestionIndex] const progress = questions.length > 0 ? ((currentQuestionIndex + 1) / questions.length) * 100 : 0 // Local Storage Functions const saveScoreToLeaderboard = (scoreData: any) => { try { if (!scoreData || typeof scoreData.score !== "number") { console.error("Invalid score data:", scoreData) return } const existingScores = JSON.parse(localStorage.getItem("knowvia-leaderboard") || "[]") const newScore = { id: Date.now(), username: scoreData.username || "Anonymous", score: Math.max(0, scoreData.score || 0), accuracy: Math.max(0, Math.min(100, scoreData.accuracy || 0)), category: scoreData.category || "general", difficulty: scoreData.difficulty || "medium", date: new Date().toISOString(), correctAnswers: Math.max(0, scoreData.correctAnswers || 0), totalQuestions: Math.max(1, scoreData.totalQuestions || 1), } existingScores.push(newScore) existingScores.sort((a: any, b: any) => (b.score || 0) - (a.score || 0)) const top5 = existingScores.slice(0, 5) localStorage.setItem("knowvia-leaderboard", JSON.stringify(top5)) setLeaderboard(top5) } catch (error) { console.error("Error saving to leaderboard:", error) } } const loadLeaderboard = () => { try { const scores = JSON.parse(localStorage.getItem("knowvia-leaderboard") || "[]") // Validate scores array const validScores = Array.isArray(scores) ? scores.filter((score) => score && typeof score.score === "number" && typeof score.accuracy === "number") : [] setLeaderboard(validScores) } catch (error) { console.error("Error loading leaderboard:", error) setLeaderboard([]) } } const calculateStarRating = (accuracy: number) => { if (accuracy >= 90) return 5 if (accuracy >= 80) return 4 if (accuracy >= 70) return 3 if (accuracy >= 60) return 2 return 1 } const StarRating = ({ rating }: { rating: number }) => { return (

{[1, 2, 3, 4, 5].map((star) => ( ⭐ ))}

) } // Confetti Animation Component const ConfettiAnimation = () => { useEffect(() => { const colors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#feca57", "#ff9ff3"] const confettiCount = 50 for (let i = 0; i < confettiCount; i++) { setTimeout(() => { const confetti = document.createElement("div") confetti.style.position = "fixed" confetti.style.left = Math.random() * 100 + "vw" confetti.style.top = "-10px" confetti.style.width = "10px" confetti.style.height = "10px" confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)] confetti.style.borderRadius = "50%" confetti.style.pointerEvents = "none" confetti.style.zIndex = "9999" confetti.style.animation = `fall ${2 + Math.random() * 3}s linear forwards` document.body.appendChild(confetti) setTimeout(() => { if (confetti.parentNode) { confetti.parentNode.removeChild(confetti) } }, 5000) }, i * 50) } }, []) return null } return (

{/* Header */}

Knowvia

{/* Home Screen */} {currentScreen === "home" && (

{/* Hero Section */}

Knowvia

Test your knowledge with our interactive quiz platform featuring multiple languages, categories, and difficulty levels.

{/* Quiz Settings */}

⚙️

Quiz Settings

Customize your quiz experience

Your Name setUsername(e.target.value)} placeholder="Enter your name" className="w-full" />

View Leaderboard

See top performers

📚

Review Mode

Study previous questions

{/* Features */}

🌐

Multilingual Support

Available in English, Hindi, and French

⏱️

Timed Questions

15 seconds per question with bonus points

📊

Detailed Analytics

Track your performance and progress

)} {/* Quiz Screen */} {currentScreen === "quiz" && currentQuestion && (

{/* Quiz Header */}

Question {currentQuestionIndex + 1} of {questions.length}

{timeRemaining}

{/* Question Content */}

{currentQuestion.question}

{/* Hint Display */} {showHint && currentHint && (

💡

Hint:

{currentHint}

)}

{currentQuestion.options.map((option: string, index: number) => { const userAnswer = userAnswers[currentQuestionIndex] const isSelected = userAnswer?.selected === index const isCorrect = index === currentQuestion.correct const isIncorrect = isSelected && !isCorrect const showAnswer = userAnswer !== undefined return ( ) })}

)} {/* Results Screen */} {currentScreen === "results" && quizResults && (

🎉 Quiz Complete!

{quizResults.score || 0}

points

{quizResults.correctAnswers}/{quizResults.totalQuestions}

Correct Answers

{(quizResults.accuracy || 0).toFixed(1)}%

Accuracy

{starRating}/5

Stars

)} {/* Review Screen */} {currentScreen === "review" && questions.length > 0 && (

📋 Review Answers

Review your quiz performance

{questions.map((question, index) => { const userAnswer = userAnswers[index] const isCorrect = userAnswer?.selected === userAnswer?.correct const selectedOption = userAnswer?.selected >= 0 ? question.options[userAnswer.selected] : "No answer" const correctOption = question.options[userAnswer?.correct] return (

Question {index + 1} {isCorrect ? "✓ Correct" : "✗ Incorrect"}

{question.question}

{question.options.map((option: string, optIndex: number) => { const isUserAnswer = optIndex === userAnswer?.selected const isCorrectAnswer = optIndex === userAnswer?.correct return (

{String.fromCharCode(65 + optIndex)}. {option} {isCorrectAnswer && (Correct)} {isUserAnswer && !isCorrectAnswer && ( (Your Answer) )}

) })}

Your Answer: {selectedOption}

Correct Answer: {correctOption}

Time: {((userAnswer?.responseTime || 0) / 1000).toFixed(1)}s

{question.explanation && (

Explanation: {question.explanation}

)}

) })}

)} {/* Leaderboard Screen */} {currentScreen === "leaderboard" && (

🏆 Leaderboard

Top 5 performers

{leaderboard.length === 0 ? (

No scores yet. Be the first!

) : (

{leaderboard.map((entry, index) => (

{index + 1}

{entry.username || "Anonymous"}

{(entry.accuracy || 0).toFixed(1)}% • {entry.category || "general"} •{" "} {entry.difficulty || "medium"}

{entry.date ? new Date(entry.date).toLocaleDateString() : "Unknown date"}

{entry.score || 0}

points

))}

)}

{/* Score Animation Overlay */} {showScoreAnimation && (

{ setShowScoreAnimation(false) setShowResults(true) setCurrentScreen("results") }} >

🎉

Amazing!

{score}

points earned!

)} {/* Enhanced Results Modal */}

) } [V0_FILE]typescriptreact:file="app/globals.css" isDeleted="true" isUserEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @keyframes fall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } } @keyframes bounce { 0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); } 40%, 43% { transform: translate3d(0, -30px, 0); } 70% { transform: translate3d(0, -15px, 0); } 90% { transform: translate3d(0, -4px, 0); } } .animate-bounce { animation: bounce 1s ease-in-out; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Star rating animations */ .star-rating-enter { animation: starPop 0.5s ease-out forwards; } @keyframes starPop { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } } /* Score animation */ .score-reveal { animation: scoreReveal 1s ease-out forwards; } @keyframes scoreReveal { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }