Spaces:

ProCreations
/

learn-ai

Running

App Files Files Community

ProCreations commited on 16 days ago

Commit

f0f0ff2

verified ·

1 Parent(s): b048355

Update index.html

Browse files

Files changed (1) hide show

index.html +1439 -18

index.html CHANGED Viewed

@@ -1,19 +1,1440 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<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%);
+}
+* {
+  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;
+  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;
+  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;
+  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);
+}
+.flashcard-front p {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.4;
+}
+.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;
+}
+.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);
+  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;
+}
+.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;
+}
+.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;
+}
+.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>