Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>AI Basics Learning Hub - Interactive Learning Platform</title> | |
| <style> | |
| /* ============ CSS Variables & Reset ============ */ | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary: #8b5cf6; | |
| --accent: #14b8a6; | |
| --success: #10b981; | |
| --error: #ef4444; | |
| --warning: #f59e0b; | |
| --text-primary: #1f2937; | |
| --text-secondary: #6b7280; | |
| --bg-primary: #ffffff; | |
| --bg-secondary: #f9fafb; | |
| --bg-tertiary: #f3f4f6; | |
| --border: #e5e7eb; | |
| --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); | |
| --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --radius: 12px; | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* Dark mode variables */ | |
| body.dark-mode { | |
| --text-primary: #f9fafb; | |
| --text-secondary: #d1d5db; | |
| --bg-primary: #111827; | |
| --bg-secondary: #1f2937; | |
| --bg-tertiary: #374151; | |
| --border: #4b5563; | |
| --gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); | |
| } | |
| /* Ensure all text elements use the color variables */ | |
| h1, h2, h3, h4, h5, h6, p, span, div, label, button { | |
| color: var(--text-primary); | |
| } | |
| /* Override specific elements that need secondary text color */ | |
| .subtitle, .card-counter, .task-badge { | |
| color: var(--text-secondary) ; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| /* ============ Base Styles ============ */ | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| transition: var(--transition); | |
| overflow-x: hidden; | |
| } | |
| /* Animated background pattern */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-image: | |
| radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at 40% 20%, rgba(20, 184, 166, 0.1) 0%, transparent 50%); | |
| z-index: -1; | |
| animation: backgroundShift 20s ease-in-out infinite; | |
| } | |
| @keyframes backgroundShift { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 25% { transform: translate(-20px, -20px) scale(1.1); } | |
| 50% { transform: translate(20px, -10px) scale(0.95); } | |
| 75% { transform: translate(-10px, 20px) scale(1.05); } | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| /* ============ Header Styles ============ */ | |
| header { | |
| text-align: center; | |
| margin-bottom: 40px; | |
| padding: 40px 30px; | |
| background: var(--bg-primary); | |
| border-radius: 24px; | |
| box-shadow: var(--shadow-lg); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| header::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| right: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: var(--gradient); | |
| opacity: 0.05; | |
| transform: rotate(45deg); | |
| animation: headerGradient 15s ease-in-out infinite; | |
| } | |
| @keyframes headerGradient { | |
| 0%, 100% { transform: rotate(45deg) translateY(0); } | |
| 50% { transform: rotate(45deg) translateY(-20px); } | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| font-weight: 800; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 10px; | |
| position: relative; | |
| } | |
| .subtitle { | |
| font-size: 1.1rem; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| /* ============ Navigation Tabs ============ */ | |
| .main-tabs { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 15px; | |
| margin: 30px 0; | |
| padding: 20px; | |
| background: var(--bg-primary); | |
| border-radius: 16px; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .main-tab { | |
| padding: 12px 24px; | |
| border: 2px solid transparent; | |
| border-radius: 12px; | |
| background: var(--bg-tertiary); | |
| cursor: pointer; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| color: var(--text-primary); | |
| transition: var(--transition); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .main-tab::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| background: var(--gradient); | |
| border-radius: 50%; | |
| transform: translate(-50%, -50%); | |
| transition: width 0.6s, height 0.6s; | |
| } | |
| .main-tab:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .main-tab.active { | |
| color: white; | |
| background: var(--gradient); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| /* Dark mode toggle */ | |
| .dark-toggle { | |
| margin-left: auto; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 8px 16px; | |
| background: var(--bg-tertiary); | |
| border-radius: 50px; | |
| cursor: pointer; | |
| color: var(--text-primary); | |
| transition: var(--transition); | |
| } | |
| .dark-toggle:hover { | |
| background: var(--bg-secondary); | |
| } | |
| .toggle-switch { | |
| position: relative; | |
| width: 50px; | |
| height: 26px; | |
| } | |
| .toggle-switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: var(--border); | |
| transition: 0.4s; | |
| border-radius: 26px; | |
| } | |
| .slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 18px; | |
| width: 18px; | |
| left: 4px; | |
| bottom: 4px; | |
| background: white; | |
| transition: 0.4s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .slider { | |
| background: var(--primary); | |
| } | |
| input:checked + .slider:before { | |
| transform: translateX(24px); | |
| } | |
| /* ============ Section Management ============ */ | |
| .section { | |
| display: none; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: opacity 0.3s, transform 0.3s; | |
| } | |
| .section.active { | |
| display: block; | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* ============ Flashcards Section ============ */ | |
| .category-tabs { | |
| display: flex; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| margin-bottom: 30px; | |
| padding: 20px; | |
| background: var(--bg-primary); | |
| border-radius: 16px; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .category-tab { | |
| padding: 10px 20px; | |
| background: var(--bg-tertiary); | |
| border: 2px solid transparent; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| .category-tab:hover { | |
| transform: translateY(-2px); | |
| border-color: var(--primary); | |
| } | |
| .category-tab.active { | |
| background: var(--primary); | |
| color: white; | |
| box-shadow: var(--shadow-md); | |
| } | |
| /* Progress indicator */ | |
| .progress-container { | |
| margin-bottom: 25px; | |
| background: var(--bg-primary); | |
| padding: 20px; | |
| border-radius: 16px; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .progress { | |
| height: 8px; | |
| background: var(--bg-tertiary); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| margin-bottom: 15px; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| background: var(--gradient); | |
| border-radius: 10px; | |
| transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .progress-bar::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| background: linear-gradient( | |
| 90deg, | |
| transparent, | |
| rgba(255, 255, 255, 0.3), | |
| transparent | |
| ); | |
| animation: shimmer 2s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| .card-counter { | |
| text-align: center; | |
| font-weight: 600; | |
| font-size: 1.1rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Flashcard styles */ | |
| .flashcard-container { | |
| perspective: 1000px; | |
| height: 400px; | |
| margin-bottom: 30px; | |
| } | |
| .flashcard { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| cursor: pointer; | |
| transform-style: preserve-3d; | |
| transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .flashcard.flipped { | |
| transform: rotateY(180deg); | |
| } | |
| .flashcard-front, | |
| .flashcard-back { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| backface-visibility: hidden; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 40px; | |
| border-radius: 20px; | |
| box-shadow: var(--shadow-xl); | |
| text-align: center; | |
| } | |
| .flashcard-front { | |
| background: var(--bg-primary); | |
| border: 3px solid var(--border); | |
| color: var(--text-primary); | |
| } | |
| .flashcard-front p { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| line-height: 1.4; | |
| color: var(--text-primary); | |
| } | |
| .flashcard-back { | |
| background: var(--gradient); | |
| color: white; | |
| transform: rotateY(180deg); | |
| } | |
| .flashcard-back p { | |
| font-size: 1.2rem; | |
| line-height: 1.6; | |
| font-weight: 500; | |
| } | |
| /* Controls */ | |
| .controls { | |
| display: flex; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| gap: 15px; | |
| margin: 20px 0; | |
| } | |
| button { | |
| padding: 12px 28px; | |
| border: none; | |
| background: var(--primary); | |
| color: white; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| transition: var(--transition); | |
| box-shadow: var(--shadow-md); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| background: rgba(255, 255, 255, 0.2); | |
| border-radius: 50%; | |
| transform: translate(-50%, -50%); | |
| transition: width 0.6s, height 0.6s; | |
| } | |
| button:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| button:hover::before { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| button:active { | |
| transform: translateY(0); | |
| } | |
| button:disabled { | |
| background: var(--text-secondary); | |
| cursor: not-allowed; | |
| transform: none; | |
| box-shadow: none; | |
| opacity: 0.6; | |
| } | |
| /* ============ Playground Section ============ */ | |
| .play-task { | |
| margin-bottom: 30px; | |
| padding: 30px; | |
| background: var(--bg-primary); | |
| border-radius: 20px; | |
| box-shadow: var(--shadow-lg); | |
| border: 1px solid var(--border); | |
| } | |
| .play-task h3 { | |
| font-size: 1.4rem; | |
| margin-bottom: 15px; | |
| color: var(--primary); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .task-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 4px 12px; | |
| background: var(--bg-tertiary); | |
| border-radius: 20px; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| } | |
| .play-task p { | |
| margin-bottom: 20px; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| } | |
| .play-task code { | |
| background: var(--bg-tertiary); | |
| padding: 2px 8px; | |
| border-radius: 6px; | |
| font-family: 'Consolas', 'Monaco', monospace; | |
| font-size: 0.95rem; | |
| color: var(--primary); | |
| } | |
| .code-editor { | |
| position: relative; | |
| margin-bottom: 20px; | |
| } | |
| .code-editor textarea { | |
| width: 100%; | |
| min-height: 200px; | |
| padding: 20px; | |
| border: 2px solid var(--border); | |
| border-radius: 12px; | |
| font-family: 'Consolas', 'Monaco', monospace; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| resize: vertical; | |
| transition: var(--transition); | |
| } | |
| .code-editor textarea:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); | |
| } | |
| body.dark-mode .code-editor textarea { | |
| background: var(--bg-tertiary); | |
| } | |
| .play-output { | |
| margin-top: 20px; | |
| padding: 15px 20px; | |
| border-radius: 10px; | |
| font-family: monospace; | |
| font-size: 1rem; | |
| line-height: 1.5; | |
| white-space: pre-wrap; | |
| transition: var(--transition); | |
| } | |
| .play-success { | |
| background: rgba(16, 185, 129, 0.1); | |
| color: var(--success); | |
| border: 2px solid var(--success); | |
| } | |
| .play-error { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: var(--error); | |
| border: 2px solid var(--error); | |
| } | |
| /* ============ Test Section ============ */ | |
| .quiz-card { | |
| background: var(--bg-primary); | |
| padding: 35px; | |
| border-radius: 20px; | |
| box-shadow: var(--shadow-lg); | |
| border: 1px solid var(--border); | |
| margin-bottom: 30px; | |
| } | |
| .quiz-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 20px; | |
| color: var(--primary); | |
| } | |
| .quiz-card p { | |
| font-size: 1.1rem; | |
| margin-bottom: 25px; | |
| line-height: 1.6; | |
| color: var(--text-primary); | |
| } | |
| .quiz-option { | |
| display: block; | |
| margin: 10px 0; | |
| padding: 15px 20px; | |
| border: 2px solid var(--border); | |
| border-radius: 12px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| font-weight: 500; | |
| } | |
| .quiz-option:hover { | |
| border-color: var(--primary); | |
| transform: translateX(5px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .quiz-option.selected { | |
| background: var(--primary); | |
| color: white; | |
| border-color: var(--primary); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .quiz-score { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-top: 30px; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* ============ Help Section ============ */ | |
| .help-button { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| background: var(--gradient); | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| box-shadow: var(--shadow-xl); | |
| font-size: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: var(--transition); | |
| z-index: 1000; | |
| } | |
| .help-button:hover { | |
| transform: scale(1.1); | |
| } | |
| .help-modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.5); | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 2000; | |
| backdrop-filter: blur(5px); | |
| } | |
| .help-modal.active { | |
| display: flex; | |
| } | |
| .help-content { | |
| background: var(--bg-primary); | |
| padding: 40px; | |
| border-radius: 20px; | |
| max-width: 600px; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| box-shadow: var(--shadow-xl); | |
| position: relative; | |
| animation: modalSlideIn 0.3s ease; | |
| } | |
| @keyframes modalSlideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-50px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .help-content h2 { | |
| margin-bottom: 20px; | |
| color: var(--primary); | |
| } | |
| .help-content h3 { | |
| margin-top: 20px; | |
| margin-bottom: 10px; | |
| color: var(--primary); | |
| } | |
| .help-content p { | |
| margin-bottom: 15px; | |
| line-height: 1.6; | |
| color: var(--text-primary); | |
| } | |
| .close-help { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| background: none; | |
| border: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| color: var(--text-secondary); | |
| padding: 5px; | |
| } | |
| /* ============ Footer ============ */ | |
| footer { | |
| text-align: center; | |
| margin-top: 60px; | |
| padding: 30px; | |
| background: var(--bg-primary); | |
| border-radius: 20px; | |
| box-shadow: var(--shadow-md); | |
| } | |
| footer p { | |
| color: var(--text-secondary); | |
| font-size: 1rem; | |
| } | |
| footer a { | |
| color: var(--primary); | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: var(--transition); | |
| } | |
| footer a:hover { | |
| text-decoration: underline; | |
| } | |
| /* ============ Responsive Design ============ */ | |
| @media (max-width: 768px) { | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| .main-tabs { | |
| padding: 15px; | |
| } | |
| .flashcard-container { | |
| height: 350px; | |
| } | |
| .flashcard-front p { | |
| font-size: 1.2rem; | |
| } | |
| .flashcard-back p { | |
| font-size: 1rem; | |
| } | |
| .play-task { | |
| padding: 20px; | |
| } | |
| .quiz-card { | |
| padding: 25px; | |
| } | |
| .help-content { | |
| padding: 30px; | |
| margin: 20px; | |
| } | |
| } | |
| /* ============ Loading Animation ============ */ | |
| .loading { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid var(--border); | |
| border-radius: 50%; | |
| border-top-color: var(--primary); | |
| animation: spin 1s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* ============ Tooltips ============ */ | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| cursor: help; | |
| color: var(--text-secondary); | |
| } | |
| .tooltip .tooltiptext { | |
| visibility: hidden; | |
| width: 200px; | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| text-align: center; | |
| border-radius: 8px; | |
| padding: 10px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -100px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| box-shadow: var(--shadow-lg); | |
| font-size: 0.9rem; | |
| border: 1px solid var(--border); | |
| } | |
| .tooltip:hover .tooltiptext { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Header Section --> | |
| <header> | |
| <h1>AI Basics Learning Hub</h1> | |
| <p class="subtitle">Master AI fundamentals through interactive flashcards, hands-on coding, and comprehensive testing</p> | |
| </header> | |
| <!-- Navigation --> | |
| <nav class="main-tabs"> | |
| <button class="main-tab active" data-section="flashcards">📚 Flashcards</button> | |
| <button class="main-tab" data-section="playground">💻 Playground</button> | |
| <button class="main-tab" data-section="test">📝 Test</button> | |
| <label class="dark-toggle"> | |
| <span>🌙 Dark Mode</span> | |
| <div class="toggle-switch"> | |
| <input type="checkbox" id="darkToggle"/> | |
| <span class="slider"></span> | |
| </div> | |
| </label> | |
| </nav> | |
| <!-- Flashcards Section --> | |
| <section id="flashcards" class="section active"> | |
| <div class="category-tabs"> | |
| <div class="category-tab active" data-category="core">Core Concepts</div> | |
| <div class="category-tab" data-category="terms">Key Terms</div> | |
| <div class="category-tab" data-category="applications">AI Applications</div> | |
| <div class="category-tab" data-category="ethics">Ethics & Challenges</div> | |
| </div> | |
| <div class="progress-container"> | |
| <div class="progress"> | |
| <div class="progress-bar" style="width: 0%"></div> | |
| </div> | |
| <div class="card-counter">Card 1 of 10</div> | |
| </div> | |
| <div class="flashcard-container"> | |
| <div class="flashcard"> | |
| <div class="flashcard-front"> | |
| <p></p> | |
| </div> | |
| <div class="flashcard-back"> | |
| <p></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="controls"> | |
| <button id="prev" disabled>← Previous</button> | |
| <button id="flip">🔄 Flip Card</button> | |
| <button id="next">Next →</button> | |
| <button id="shuffle">🔀 Shuffle</button> | |
| </div> | |
| </section> | |
| <!-- Playground Section --> | |
| <section id="playground" class="section"></section> | |
| <!-- Test Section --> | |
| <section id="test" class="section"></section> | |
| <!-- Footer --> | |
| <footer> | |
| <p>🚀 Enhance your AI knowledge • Created with ❤️ • More resources at <a href="https://huggingface.co/ProCreations" target="_blank">ProCreations on Hugging Face</a></p> | |
| </footer> | |
| </div> | |
| <!-- Help Button & Modal --> | |
| <button class="help-button" onclick="toggleHelp()">?</button> | |
| <div class="help-modal" id="helpModal" onclick="closeHelpOnClick(event)"> | |
| <div class="help-content"> | |
| <button class="close-help" onclick="toggleHelp()">✕</button> | |
| <h2>📖 How to Use This Learning Hub</h2> | |
| <h3>📚 Flashcards</h3> | |
| <p>Study AI concepts with interactive flashcards. Click on a card or use the "Flip" button to reveal the answer. Navigate through cards using Previous/Next buttons, and shuffle for random practice.</p> | |
| <h3>💻 Playground</h3> | |
| <p>Practice coding with AI-related exercises. Write your solution in the code editor and click "Run" to test it. Each task includes clear instructions and automatic validation.</p> | |
| <h3>📝 Test</h3> | |
| <p>Assess your knowledge with multiple-choice questions. Select your answer and submit to move to the next question. Your score is displayed at the end.</p> | |
| <h3>🌙 Dark Mode</h3> | |
| <p>Toggle dark mode for comfortable studying in low-light environments. Your preference is saved automatically.</p> | |
| <h3>💡 Tips</h3> | |
| <p>• Review flashcards regularly for better retention<br> | |
| • Try solving playground tasks without looking at solutions<br> | |
| • Take the test multiple times to track your progress<br> | |
| • Use keyboard shortcuts: Space to flip cards, arrow keys to navigate</p> | |
| </div> | |
| </div> | |
| <script> | |
| /** | |
| * AI Basics Learning Hub - Enhanced Version | |
| * Interactive learning platform for AI fundamentals | |
| * Features: Flashcards, Coding Playground, Quiz System | |
| */ | |
| // ==================== Flashcards Data ==================== | |
| const flashcards = { | |
| core: [ | |
| {q: "What is Artificial Intelligence (AI)?", a: "A field of computer science focused on creating systems that perform tasks that typically require human intelligence."}, | |
| {q: "What's the difference between Narrow AI and General AI?", a: "Narrow AI is specialised for specific tasks (like chess or image recognition), while General AI would match human intelligence broadly across all domains."}, | |
| {q: "What is Machine Learning?", a: "A subset of AI where systems learn patterns from data rather than following explicit programming instructions."}, | |
| {q: "What is Deep Learning?", a: "A subset of ML using multi-layer neural networks to learn hierarchical representations of data automatically."}, | |
| {q: "What are Neural Networks?", a: "Collections of interconnected nodes (neurons) inspired by biological brains that learn to recognize patterns through training."}, | |
| {q: "What is Gradient Descent?", a: "An optimization algorithm that iteratively adjusts model parameters to minimize a loss function by following the steepest descent."}, | |
| {q: "What is a Loss Function?", a: "A mathematical function that measures how far a model's predictions deviate from the actual target values."}, | |
| {q: "What is Backpropagation?", a: "An algorithm that efficiently computes gradients of the loss with respect to each weight in a neural network using the chain rule."}, | |
| {q: "What is a Dataset?", a: "A structured collection of data examples used to train, validate, or test machine learning models."}, | |
| {q: "What is Feature Engineering?", a: "The process of selecting, transforming, and creating input variables to improve model performance."} | |
| ], | |
| terms: [ | |
| {q: "What is Supervised Learning?", a: "Learning from labeled data where the model learns to map inputs to known outputs (e.g., classification, regression)."}, | |
| {q: "What is Unsupervised Learning?", a: "Finding hidden patterns in unlabeled data without predefined outputs (e.g., clustering, dimensionality reduction)."}, | |
| {q: "What is Reinforcement Learning?", a: "Learning through interaction with an environment, receiving rewards or penalties for actions taken."}, | |
| {q: "What are Training, Validation, and Test Sets?", a: "Data splits: Training for learning patterns, Validation for tuning hyperparameters, Test for final unbiased evaluation."}, | |
| {q: "What is Overfitting?", a: "When a model memorizes training data too well, performing poorly on new, unseen data due to high variance."}, | |
| {q: "What is Underfitting?", a: "When a model is too simple to capture underlying patterns, resulting in poor performance due to high bias."}, | |
| {q: "What is Regularization?", a: "Techniques that constrain model complexity to prevent overfitting (e.g., L1/L2 penalties, dropout, early stopping)."}, | |
| {q: "What is a Hyperparameter?", a: "Configuration values set before training that control the learning process (e.g., learning rate, batch size)."}, | |
| {q: "What is a Confusion Matrix?", a: "A table showing classification results: true positives, true negatives, false positives, and false negatives."}, | |
| {q: "What are Precision and Recall?", a: "Classification metrics: Precision = TP/(TP+FP) measures accuracy of positive predictions; Recall = TP/(TP+FN) measures coverage of actual positives."} | |
| ], | |
| applications: [ | |
| {q: "What is Natural Language Processing (NLP)?", a: "AI techniques for understanding, interpreting, and generating human language in text or speech form."}, | |
| {q: "What is Computer Vision?", a: "AI field that enables computers to derive meaningful information from visual inputs like images and videos."}, | |
| {q: "What are Large Language Models (LLMs)?", a: "Massive neural networks trained on vast text data to understand and generate human-like text (e.g., GPT, Claude)."}, | |
| {q: "What are Generative AI systems?", a: "Models that create new content (text, images, audio, video) by learning patterns from training data."}, | |
| {q: "What is Transfer Learning?", a: "Reusing a pre-trained model's learned features as a starting point for a related task, saving time and data."}, | |
| {q: "What is Speech Recognition?", a: "Converting spoken language into text using AI models trained on audio-text pairs."}, | |
| {q: "What is Robotics?", a: "Field combining AI, sensors, and mechanical systems to create machines that can perceive and act autonomously."}, | |
| {q: "What is a Recommendation System?", a: "Algorithms that predict user preferences and suggest relevant items based on past behavior and similarities."}, | |
| {q: "What is Autonomous Driving?", a: "Using AI for perception, planning, and control to enable vehicles to navigate without human input."}, | |
| {q: "What is Fraud Detection?", a: "AI systems that identify unusual patterns or anomalies in transactions to prevent fraudulent activities."} | |
| ], | |
| ethics: [ | |
| {q: "What is Bias in AI?", a: "Systematic errors or unfair prejudices in AI systems arising from biased training data or algorithm design."}, | |
| {q: "What is Explainable AI (XAI)?", a: "Making AI decision-making processes transparent and understandable to humans for trust and accountability."}, | |
| {q: "What is the AI Alignment Problem?", a: "The challenge of ensuring AI systems pursue goals that align with human values and intentions."}, | |
| {q: "What are AI Hallucinations?", a: "When AI models generate plausible-sounding but factually incorrect or nonsensical information."}, | |
| {q: "What is Prompt Engineering?", a: "The art of crafting effective inputs to guide AI models toward desired outputs and behaviors."}, | |
| {q: "What is Data Privacy in AI?", a: "Protecting personal information used in AI systems through techniques like anonymization and secure processing."}, | |
| {q: "What is Fairness in AI?", a: "Ensuring AI systems don't discriminate against individuals or groups based on protected characteristics."}, | |
| {q: "What are Deepfakes?", a: "AI-generated synthetic media where a person's likeness is convincingly replaced or manipulated in images/videos."}, | |
| {q: "What is AI Governance?", a: "Frameworks, policies, and regulations for responsible development and deployment of AI systems."}, | |
| {q: "What is Model Transparency?", a: "The degree to which an AI model's inner workings and decision processes can be understood and audited."} | |
| ] | |
| }; | |
| // ==================== DOM Elements ==================== | |
| const categoryTabs = document.querySelectorAll('.category-tab'); | |
| const flashcardEl = document.querySelector('.flashcard'); | |
| const frontEl = document.querySelector('.flashcard-front p'); | |
| const backEl = document.querySelector('.flashcard-back p'); | |
| const prevBtn = document.getElementById('prev'); | |
| const nextBtn = document.getElementById('next'); | |
| const flipBtn = document.getElementById('flip'); | |
| const shuffleBtn = document.getElementById('shuffle'); | |
| const progressBar = document.querySelector('.progress-bar'); | |
| const cardCounter = document.querySelector('.card-counter'); | |
| // ==================== State Management ==================== | |
| let currentCategory = 'core'; | |
| let currentCardIndex = 0; | |
| let isFlipped = false; | |
| // Load saved progress | |
| function loadSavedProgress() { | |
| const saved = localStorage.getItem(`${currentCategory}-index`); | |
| if (saved !== null) { | |
| currentCardIndex = Math.min(parseInt(saved), flashcards[currentCategory].length - 1); | |
| } | |
| } | |
| // ==================== Flashcard Functions ==================== | |
| function updateCard() { | |
| const cards = flashcards[currentCategory]; | |
| const card = cards[currentCardIndex]; | |
| // Update card content | |
| frontEl.textContent = card.q; | |
| backEl.textContent = card.a; | |
| // Update progress | |
| const progress = ((currentCardIndex + 1) / cards.length) * 100; | |
| progressBar.style.width = `${progress}%`; | |
| cardCounter.textContent = `Card ${currentCardIndex + 1} of ${cards.length}`; | |
| // Update button states | |
| prevBtn.disabled = currentCardIndex === 0; | |
| nextBtn.disabled = currentCardIndex === cards.length - 1; | |
| // Save progress | |
| localStorage.setItem(`${currentCategory}-index`, currentCardIndex); | |
| } | |
| function toggleFlip() { | |
| isFlipped = !isFlipped; | |
| flashcardEl.classList.toggle('flipped'); | |
| } | |
| function prevCard() { | |
| if (currentCardIndex > 0) { | |
| currentCardIndex--; | |
| resetCard(); | |
| } | |
| } | |
| function nextCard() { | |
| if (currentCardIndex < flashcards[currentCategory].length - 1) { | |
| currentCardIndex++; | |
| resetCard(); | |
| } | |
| } | |
| function shuffleCards() { | |
| flashcards[currentCategory] = flashcards[currentCategory].sort(() => Math.random() - 0.5); | |
| currentCardIndex = 0; | |
| resetCard(); | |
| } | |
| function resetCard() { | |
| isFlipped = false; | |
| flashcardEl.classList.remove('flipped'); | |
| updateCard(); | |
| } | |
| // ==================== Event Listeners ==================== | |
| flashcardEl.addEventListener('click', toggleFlip); | |
| flipBtn.addEventListener('click', toggleFlip); | |
| prevBtn.addEventListener('click', prevCard); | |
| nextBtn.addEventListener('click', nextCard); | |
| shuffleBtn.addEventListener('click', shuffleCards); | |
| // Category switching | |
| categoryTabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| categoryTabs.forEach(t => t.classList.remove('active')); | |
| tab.classList.add('active'); | |
| currentCategory = tab.dataset.category; | |
| currentCardIndex = 0; | |
| isFlipped = false; | |
| flashcardEl.classList.remove('flipped'); | |
| loadSavedProgress(); | |
| updateCard(); | |
| }); | |
| }); | |
| // Keyboard navigation | |
| document.addEventListener('keydown', (e) => { | |
| if (document.getElementById('flashcards').classList.contains('active')) { | |
| switch(e.key) { | |
| case ' ': | |
| e.preventDefault(); | |
| toggleFlip(); | |
| break; | |
| case 'ArrowLeft': | |
| prevCard(); | |
| break; | |
| case 'ArrowRight': | |
| nextCard(); | |
| break; | |
| } | |
| } | |
| }); | |
| // ==================== Dark Mode ==================== | |
| const darkToggle = document.getElementById('darkToggle'); | |
| darkToggle.addEventListener('change', (e) => { | |
| document.body.classList.toggle('dark-mode', e.target.checked); | |
| localStorage.setItem('dark-mode', e.target.checked); | |
| }); | |
| // Load dark mode preference | |
| if (localStorage.getItem('dark-mode') === 'true') { | |
| darkToggle.checked = true; | |
| document.body.classList.add('dark-mode'); | |
| } | |
| // ==================== Navigation ==================== | |
| const mainTabs = document.querySelectorAll('.main-tab'); | |
| mainTabs.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| mainTabs.forEach(b => b.classList.remove('active')); | |
| btn.classList.add('active'); | |
| document.querySelectorAll('.section').forEach(s => { | |
| s.classList.remove('active'); | |
| }); | |
| const targetSection = document.getElementById(btn.dataset.section); | |
| setTimeout(() => { | |
| targetSection.classList.add('active'); | |
| }, 10); | |
| }); | |
| }); | |
| // ==================== Playground Section ==================== | |
| const playgroundSection = document.getElementById('playground'); | |
| const tasks = [ | |
| { | |
| title: 'Sum of Two Numbers', | |
| desc: 'Write a function <code>add(a, b)</code> that returns the sum of two numbers.', | |
| hint: 'Use the + operator to add the numbers', | |
| test: code => { | |
| try { | |
| const func = new Function(code + '; return add(2, 3);'); | |
| return func() === 5; | |
| } catch (e) { | |
| throw e; | |
| } | |
| } | |
| }, | |
| { | |
| title: 'Even Number Checker', | |
| desc: 'Write a function <code>isEven(n)</code> that returns <code>true</code> if a number is even, <code>false</code> otherwise.', | |
| hint: 'Use the modulo operator (%) to check divisibility by 2', | |
| test: code => { | |
| try { | |
| const func = new Function(code + '; return isEven(4) && !isEven(5) && isEven(0);'); | |
| return func(); | |
| } catch (e) { | |
| throw e; | |
| } | |
| } | |
| }, | |
| { | |
| title: 'String Reversal', | |
| desc: 'Write a function <code>reverseString(s)</code> that returns the reversed version of a string.', | |
| hint: 'You can split the string into an array, reverse it, and join it back', | |
| test: code => { | |
| try { | |
| const func = new Function(code + '; return reverseString("hello") === "olleh" && reverseString("AI") === "IA";'); | |
| return func(); | |
| } catch (e) { | |
| throw e; | |
| } | |
| } | |
| }, | |
| { | |
| title: 'Find Maximum in Array', | |
| desc: 'Write a function <code>maxArray(arr)</code> that returns the largest number in an array.', | |
| hint: 'Use Math.max() with the spread operator or iterate through the array', | |
| test: code => { | |
| try { | |
| const func = new Function(code + '; return maxArray([1, 8, 3, 7]) === 8 && maxArray([-5, -1, -10]) === -1;'); | |
| return func(); | |
| } catch (e) { | |
| throw e; | |
| } | |
| } | |
| }, | |
| { | |
| title: 'Factorial Calculator', | |
| desc: 'Write a function <code>factorial(n)</code> that returns the factorial of n (n!).', | |
| hint: 'Remember: 5! = 5 × 4 × 3 × 2 × 1 = 120', | |
| test: code => { | |
| try { | |
| const func = new Function(code + '; return factorial(5) === 120 && factorial(0) === 1 && factorial(3) === 6;'); | |
| return func(); | |
| } catch (e) { | |
| throw e; | |
| } | |
| } | |
| } | |
| ]; | |
| let taskIndex = 0; | |
| function renderTask() { | |
| const task = tasks[taskIndex]; | |
| playgroundSection.innerHTML = ` | |
| <div class="play-task"> | |
| <h3> | |
| <span class="task-badge">Task ${taskIndex + 1}/${tasks.length}</span> | |
| ${task.title} | |
| </h3> | |
| <p>${task.desc}</p> | |
| <div class="tooltip"> | |
| 💡 <span class="tooltiptext">${task.hint}</span> | |
| </div> | |
| <div class="code-editor"> | |
| <textarea id="codeArea" spellcheck="false" placeholder="// Write your solution here | |
| function functionName(parameters) { | |
| // Your code | |
| }"></textarea> | |
| </div> | |
| <button id="runCode">▶ Run Code</button> | |
| <div id="output" class="play-output" style="display: none;"></div> | |
| <div class="controls" style="margin-top: 20px;"> | |
| <button id="prevTask" ${taskIndex === 0 ? 'disabled' : ''}>← Previous</button> | |
| <button id="nextTask" ${taskIndex === tasks.length - 1 ? 'disabled' : ''}>Next →</button> | |
| </div> | |
| </div> | |
| `; | |
| // Add event listeners | |
| document.getElementById('runCode').onclick = runCode; | |
| document.getElementById('prevTask').onclick = () => { | |
| taskIndex--; | |
| renderTask(); | |
| }; | |
| document.getElementById('nextTask').onclick = () => { | |
| taskIndex++; | |
| renderTask(); | |
| }; | |
| // Load saved code if exists | |
| const savedCode = localStorage.getItem(`task-${taskIndex}-code`); | |
| if (savedCode) { | |
| document.getElementById('codeArea').value = savedCode; | |
| } | |
| } | |
| function runCode() { | |
| const code = document.getElementById('codeArea').value; | |
| const output = document.getElementById('output'); | |
| const task = tasks[taskIndex]; | |
| // Save code | |
| localStorage.setItem(`task-${taskIndex}-code`, code); | |
| try { | |
| const passed = task.test(code); | |
| output.textContent = passed ? '✅ Excellent! All tests passed!' : '❌ Not quite right. Check your solution and try again.'; | |
| output.className = 'play-output ' + (passed ? 'play-success' : 'play-error'); | |
| output.style.display = 'block'; | |
| // Mark task as completed if passed | |
| if (passed) { | |
| localStorage.setItem(`task-${taskIndex}-completed`, 'true'); | |
| } | |
| } catch (err) { | |
| output.textContent = `⚠️ Error: ${err.message}`; | |
| output.className = 'play-output play-error'; | |
| output.style.display = 'block'; | |
| } | |
| } | |
| // ==================== Test Section ==================== | |
| const testSection = document.getElementById('test'); | |
| const quizQuestions = [ | |
| { | |
| q: 'Which algorithm is commonly used to minimize a loss function in neural networks?', | |
| opts: ['K-means clustering', 'Gradient Descent', 'Apriori algorithm', 'Breadth-first search'], | |
| ans: 1, | |
| explanation: 'Gradient Descent iteratively adjusts parameters to minimize the loss function.' | |
| }, | |
| { | |
| q: 'Overfitting is primarily an example of which type of error?', | |
| opts: ['High bias', 'High variance', 'Syntax error', 'Runtime error'], | |
| ans: 1, | |
| explanation: 'Overfitting occurs when a model has high variance, fitting too closely to training data.' | |
| }, | |
| { | |
| q: 'Which field of AI focuses on understanding and processing images?', | |
| opts: ['Natural Language Processing', 'Speech Recognition', 'Computer Vision', 'Game Theory'], | |
| ans: 2, | |
| explanation: 'Computer Vision deals with extracting information from visual inputs.' | |
| }, | |
| { | |
| q: 'In classification metrics, which metric is calculated as TP/(TP+FP)?', | |
| opts: ['Recall', 'Accuracy', 'F1-Score', 'Precision'], | |
| ans: 3, | |
| explanation: 'Precision measures the accuracy of positive predictions.' | |
| }, | |
| { | |
| q: 'What does XAI stand for in the context of AI?', | |
| opts: ['eXternal AI', 'Explainable AI', 'Extreme AI', 'Experimental AI'], | |
| ans: 1, | |
| explanation: 'Explainable AI focuses on making AI decisions transparent and understandable.' | |
| }, | |
| { | |
| q: 'Transfer learning is particularly useful when:', | |
| opts: ['Data is abundant', 'Training from scratch is costly', 'Models are tiny', 'Labels are perfect'], | |
| ans: 1, | |
| explanation: 'Transfer learning saves time and resources by reusing pre-trained models.' | |
| }, | |
| { | |
| q: 'The AI alignment problem primarily concerns:', | |
| opts: ['Model efficiency', 'Matching AI goals with human values', 'Hardware scaling', 'Syntax errors'], | |
| ans: 1, | |
| explanation: 'AI alignment ensures AI systems pursue goals aligned with human values.' | |
| }, | |
| { | |
| q: 'Which learning paradigm uses rewards and penalties?', | |
| opts: ['Supervised Learning', 'Unsupervised Learning', 'Reinforcement Learning', 'Self-supervised Learning'], | |
| ans: 2, | |
| explanation: 'Reinforcement Learning uses rewards and penalties to guide learning.' | |
| }, | |
| { | |
| q: 'Bias in AI systems often originates from:', | |
| opts: ['Noisy sensors', 'Biased training data', 'GPU memory limitations', 'Slow CPUs'], | |
| ans: 1, | |
| explanation: 'Biased training data is a primary source of bias in AI systems.' | |
| }, | |
| { | |
| q: 'In the context of AI, LLM stands for:', | |
| opts: ['Large Logic Model', 'Long-Lived Model', 'Large Language Model', 'Layered Learning Method'], | |
| ans: 2, | |
| explanation: 'Large Language Models are trained on vast text data for language tasks.' | |
| } | |
| ]; | |
| let quizIndex = 0; | |
| let score = 0; | |
| function renderQuiz() { | |
| if (quizIndex >= quizQuestions.length) { | |
| testSection.innerHTML = ` | |
| <div class="quiz-card"> | |
| <h3>🎉 Test Complete!</h3> | |
| <p class="quiz-score">You scored ${score} out of ${quizQuestions.length}</p> | |
| <p style="text-align: center; margin-top: 20px;"> | |
| ${score >= 8 ? '🌟 Excellent work!' : score >= 6 ? '👍 Good job!' : '📚 Keep studying!'} | |
| </p> | |
| <div style="text-align: center; margin-top: 30px;"> | |
| <button onclick="restartQuiz()">🔄 Retake Test</button> | |
| </div> | |
| </div> | |
| `; | |
| return; | |
| } | |
| const q = quizQuestions[quizIndex]; | |
| let optionsHTML = ''; | |
| q.opts.forEach((opt, i) => { | |
| optionsHTML += ` | |
| <label class="quiz-option"> | |
| <input type="radio" name="opt" value="${i}" style="display: none;"> | |
| ${opt} | |
| </label> | |
| `; | |
| }); | |
| testSection.innerHTML = ` | |
| <div class="quiz-card"> | |
| <h3>Question ${quizIndex + 1} of ${quizQuestions.length}</h3> | |
| <p>${q.q}</p> | |
| ${optionsHTML} | |
| <div style="text-align: center; margin-top: 25px;"> | |
| <button id="submitAns">Submit Answer</button> | |
| </div> | |
| </div> | |
| `; | |
| // Add event listeners | |
| document.querySelectorAll('.quiz-option').forEach(label => { | |
| label.addEventListener('click', () => { | |
| document.querySelectorAll('.quiz-option').forEach(o => o.classList.remove('selected')); | |
| label.classList.add('selected'); | |
| label.querySelector('input').checked = true; | |
| }); | |
| }); | |
| document.getElementById('submitAns').onclick = () => { | |
| const selected = document.querySelector('input[name="opt"]:checked'); | |
| if (!selected) { | |
| alert('Please select an answer!'); | |
| return; | |
| } | |
| const answer = parseInt(selected.value); | |
| if (answer === q.ans) { | |
| score++; | |
| } | |
| quizIndex++; | |
| renderQuiz(); | |
| }; | |
| } | |
| function restartQuiz() { | |
| quizIndex = 0; | |
| score = 0; | |
| renderQuiz(); | |
| } | |
| // ==================== Help System ==================== | |
| function toggleHelp() { | |
| document.getElementById('helpModal').classList.toggle('active'); | |
| } | |
| function closeHelpOnClick(event) { | |
| if (event.target.id === 'helpModal') { | |
| toggleHelp(); | |
| } | |
| } | |
| // ==================== Initialize ==================== | |
| loadSavedProgress(); | |
| updateCard(); | |
| renderTask(); | |
| renderQuiz(); | |
| // Add smooth section transitions | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const activeSection = document.querySelector('.section.active'); | |
| if (activeSection) { | |
| setTimeout(() => { | |
| activeSection.style.opacity = '1'; | |
| activeSection.style.transform = 'translateY(0)'; | |
| }, 100); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |