🎯 Application Math Learning pour Aram Spécifications Techniques - Spring Boot + Vue.js 📋 VUE D'ENSEMBLE Nom de l'application MathQuest Kids - Plateforme d'apprentissage mathématique personnalisée Objectifs Personnaliser l'apprentissage selon les difficultés d'Aram Gamifier les exercices de mathématiques Suivre les progrès en temps réel Motiver par un système de récompenses 🏗 ARCHITECTURE TECHNIQUE Backend - Spring Boot 3.2 Frontend - Vue.js 3 + TypeScript math-learning-backend/ ├── src/main/java/com/mathquest/ │ ├── MathLearningApplication.java │ ├── config/ │ │ ├── SecurityConfig.java │ │ └── WebConfig.java │ ├── controller/ │ │ ├── UserController.java │ │ ├── ExerciseController.java │ │ ├── ProgressController.java │ │ └── RewardController.java │ ├── service/ │ │ ├── UserService.java │ │ ├── ExerciseService.java │ │ ├── ProgressService.java │ │ └── AIAdaptationService.java │ ├── repository/ │ │ ├── UserRepository.java │ │ ├── ExerciseRepository.java │ │ └── ProgressRepository.java │ └── model/ │ ├── User.java │ ├── Exercise.java │ ├── Progress.java │ └── Reward.java ├── src/main/resources/ │ ├── application.yml │ └── data.sql └── pom.xml 🎮 FONCTIONNALITÉS PRINCIPALES 1. DASHBOARD PERSONNALISÉ Vue : Dashboard.vue Avatar d'Aram avec niveau de progression Objectifs du jour Statistiques motivantes (streak, score total) Accès rapide aux exercices adaptés 2. EXERCICES INTERACTIFS math-learning-frontend/ ├── src/ │ ├── components/ │ │ ├── exercises/ │ │ │ ├── SubtractionExercise.vue │ │ │ ├── LogicExercise.vue │ │ │ └── TimedChallenge.vue │ │ ├── progress/ │ │ │ ├── ProgressChart.vue │ │ │ └── WeeklyReport.vue │ │ ├── rewards/ │ │ │ ├── BadgeSystem.vue │ │ │ └── AvatarCustomizer.vue │ │ └── common/ │ │ ├── GameLayout.vue │ │ └── LoadingSpinner.vue │ ├── views/ │ │ ├── Dashboard.vue │ │ ├── ExerciseView.vue │ │ ├── ProgressView.vue │ │ └── RewardsView.vue │ ├── stores/ │ │ ├── user.ts │ │ ├── exercises.ts │ │ └── progress.ts │ ├── services/ │ │ └── api.ts │ └── router/ │ └── index.ts ├── package.json └── vite.config.ts A. Module Soustractions Composant : SubtractionExercise.vue Niveau 1 : Manipulation visuelle d'objets (drag & drop) Niveau 2 : Droite numérique interactive Niveau 3 : Mode "compléments" avec indices Niveau 4 : Calcul posé avec aide contextuelle B. Module Logique Composant : LogicExercise.vue Suites numériques avec animations Patterns visuels colorés Puzzles adaptatifs Mini-jeux de logique C. Défis Chronométrés Composant : TimedChallenge.vue Tests de 10 minutes comme spécifiés Mode "entraînement" vs "évaluation" Feedback immédiat Système de scores 3. SUIVI DES PROGRÈS Composant : ProgressChart.vue Graphiques de progression par domaine Comparaison avec objectifs Historique des performances Identification automatique des difficultés 4. SYSTÈME DE RÉCOMPENSES Composant : BadgeSystem.vue Badges par compétence (Expert Soustraction, Maître Logique) Système d'étoiles quotidiennes Avatar personnalisable Certificats imprimables 💾 MODÈLE DE DONNÉES User Entity Exercise Entity java @Entity public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; // "Aram" private Integer age; // 7 private Double currentLevel; // 46.5 private Integer streak; // jours consécutifs private LocalDate lastActivity; @OneToMany(mappedBy = "user") private List<Progress> progressList; @OneToMany(mappedBy = "user") private List<Reward> rewards; } java Progress Entity 🔧 APIs REST Exercise Controller @Entity public class Exercise { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Enumerated(EnumType.STRING) private ExerciseType type; // SUBTRACTION, LOGIC, TIMED @Enumerated(EnumType.STRING) private DifficultyLevel difficulty; // EASY, MEDIUM, HARD private String question; private String correctAnswer; private List<String> hints; private Integer timeLimit; // en secondes private Integer points; } java @Entity public class Progress { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @ManyToOne private User user; @ManyToOne private Exercise exercise; private Boolean isCorrect; private Integer timeSpent; // en secondes private LocalDateTime completedAt; private Integer hintsUsed; private Double scoreEarned; } Progress Controller java @RestController @RequestMapping("/api/exercises") public class ExerciseController { @GetMapping("/adapted/{userId}") public ResponseEntity<List<Exercise>> getAdaptedExercises( @PathVariable Long userId) { // Retourne exercices adaptés au niveau d'Aram } @PostMapping("/submit") public ResponseEntity<ExerciseResult> submitAnswer( @RequestBody ExerciseSubmission submission) { // Évalue la réponse et met à jour les progrès } @GetMapping("/subtraction/level/{level}") public ResponseEntity<List<Exercise>> getSubtractionByLevel( @PathVariable Integer level) { // Exercices soustractions par niveau de difficulté } } java @RestController @RequestMapping("/api/progress") public class ProgressController { @GetMapping("/user/{userId}/weekly") public ResponseEntity<WeeklyReport> getWeeklyProgress( @PathVariable Long userId) { // Rapport hebdomadaire pour Aram } @GetMapping("/user/{userId}/strengths-weaknesses") public ResponseEntity<SkillAnalysis> analyzeSkills( @PathVariable Long userId) { // Analyse des points forts/faibles } } 🎨 INTERFACE UTILISATEUR Thème Visuel Couleurs principales : Bleu ( #3498db ), Vert ( #27ae60 ), Orange ( #f39c12 ) Mascotte : Robot mathématique "MathBot" Style : Interface ludique avec animations douces Responsive : Tablette et desktop Composants Vue.js Clés Dashboard Component Subtraction Exercise Component typescript <template> <div class="dashboard"> <UserAvatar :user="currentUser" /> <DailyGoals :goals="todayGoals" /> <ProgressRing :percentage="overallProgress" /> <QuickActions :available-exercises="adaptedExercises" /> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue' import { useUserStore } from '@/stores/user' const userStore = useUserStore() const currentUser = ref(userStore.getCurrentUser()) const todayGoals = ref([]) const overallProgress = ref(0) onMounted(async () => { await loadDashboardData() }) </script> typescript 🚀 FONCTIONNALITÉS AVANCÉES 1. IA d'Adaptation Service : AIAdaptationService.java Analyse les erreurs récurrentes d'Aram Adapte automatiquement la difficulté Propose des exercices personnalisés Prédit les domaines à risque 2. Gamification Avancée Système XP : Points d'expérience par domaine Quêtes hebdomadaires : Objectifs motivants Classement virtuel : Progression vs objectifs personnels Événements spéciaux : Défis thématiques 3. Analytics pour Parents Dashboard parental avec insights <template> <div class="subtraction-exercise"> <div class="level-indicator">Niveau {{ currentLevel }}</div> <!-- Niveau 1: Objets visuels --> <div v-if="currentLevel === 1" class="visual-objects"> <DragDropObjects :initial-count="exercise.firstNumber" :to-remove="exercise.secondNumber" @answer ="handleAnswer" /> </div> <!-- Niveau 2: Droite numérique --> <div v-if="currentLevel === 2" class="number-line"> <InteractiveNumberLine :start="exercise.firstNumber" :steps="exercise.secondNumber" @answer ="handleAnswer" /> </div> <ProgressBar :current="currentExercise" :total="totalExercises" /> <HintButton @click="showHint" :hints-left="hintsRemaining" /> </div> </template> Rapports de progression détaillés Alertes sur difficultés persistantes Suggestions d'activités hors-ligne 4. Mode Hors-ligne Synchronisation des données Exercices téléchargeables Progression sauvegardée localement 📊 MÉTRIQUES ET KPIs Métriques Techniques Temps de réponse API < 200ms Disponibilité 99.9% Temps de chargement page < 2s Métriques Pédagogiques Taux de réussite par exercice Temps moyen par niveau Progression hebdomadaire Engagement quotidien 🔒 SÉCURITÉ ET CONFORMITÉ Sécurité Authentification JWT Chiffrement des données personnelles Validation côté serveur Protection CSRF Conformité RGPD Consentement parental Droit à l'effacement Portabilité des données Minimisation des données collectées 🚢 DÉPLOIEMENT Infrastructure Backend : Docker + Kubernetes Frontend : Nginx + CDN Base de données : PostgreSQL Cache : Redis pour les sessions CI/CD Pipeline 📱 ROADMAP Phase 1 (2 mois) - MVP ✅ Exercices soustractions 4 niveaux ✅ Module logique de base ✅ Système de progression ✅ Dashboard utilisateur yaml # .github/workflows/deploy.yml name: Deploy MathQuest on: push: branches: [main] jobs: test-and-deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Test Backend run: ./mvnw test - name: Test Frontend run: npm run test - name: Build and Deploy run: | docker build -t mathquest-backend . docker build -t mathquest-frontend ./frontend kubectl apply -f k8s/ Phase 2 (1 mois) - Gamification 🎮 Système de récompenses complet 🤖 IA d'adaptation basique 📊 Analytics détaillées Interface parents Phase 3 (1 mois) - Optimisation 📱 Version mobile native 🌐 Mode multi-utilisateurs 🎯 Exercices avancés 🔍 ML pour prédiction difficultés 💰 ESTIMATION COÛTS Développement Backend Spring Boot : 40h de développement Frontend Vue.js : 60h de développement Intégration & Tests : 20h Déploiement : 10h Infrastructure mensuelle Serveur cloud : ~50€/mois Base de données : ~30€/mois CDN & Storage : ~20€/mois Total MVP : ~130h de développement + 100€/mois infrastructure Cette application transformera l'apprentissage d'Aram en une expérience interactive et motivante, avec un suivi précis de ses progrès en soustractions et logique ! - Initial Deployment
c353171 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MathQuest Kids - Learning Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.5s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .exercise-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .tooltip { | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .has-tooltip:hover .tooltip { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-indigo-600 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-robot text-2xl text-yellow-300"></i> | |
| <h1 class="text-xl md:text-2xl font-bold">MathQuest Kids</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="hidden md:flex items-center space-x-2 bg-indigo-700 px-3 py-1 rounded-full"> | |
| <span class="text-sm">Day Streak</span> | |
| <span class="font-bold">5</span> | |
| <i class="fas fa-fire text-yellow-300"></i> | |
| </div> | |
| <button class="p-2 rounded-full bg-indigo-700 hover:bg-indigo-800 transition"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column - User Profile --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-white rounded-xl shadow-md p-6 sticky top-6"> | |
| <!-- User Profile --> | |
| <div class="flex flex-col items-center"> | |
| <div class="relative mb-4"> | |
| <div class="w-24 h-24 md:w-32 md:h-32 rounded-full bg-indigo-100 flex items-center justify-center overflow-hidden border-4 border-yellow-300"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/1864/1864593.png" alt="Aram's Avatar" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-yellow-400 text-xs font-bold px-2 py-1 rounded-full whitespace-nowrap"> | |
| Level 7 | |
| </div> | |
| </div> | |
| <h2 class="text-xl font-bold text-gray-800">Aram</h2> | |
| <p class="text-gray-600 mb-4">Math Explorer</p> | |
| <!-- Progress Ring --> | |
| <div class="relative w-32 h-32 mb-6"> | |
| <svg class="w-full h-full" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#e6e6e6" | |
| stroke-width="3" | |
| /> | |
| <path | |
| class="progress-ring__circle" | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#4f46e5" | |
| stroke-width="3" | |
| stroke-dasharray="75, 100" | |
| /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center flex-col"> | |
| <span class="text-2xl font-bold text-gray-800">75%</span> | |
| <span class="text-xs text-gray-500">Weekly Goal</span> | |
| </div> | |
| </div> | |
| <!-- Stats --> | |
| <div class="w-full grid grid-cols-3 gap-2 text-center"> | |
| <div class="bg-indigo-50 p-2 rounded-lg"> | |
| <div class="text-indigo-600 font-bold">1280</div> | |
| <div class="text-xs text-gray-500">Points</div> | |
| </div> | |
| <div class="bg-green-50 p-2 rounded-lg"> | |
| <div class="text-green-600 font-bold">12</div> | |
| <div class="text-xs text-gray-500">Badges</div> | |
| </div> | |
| <div class="bg-yellow-50 p-2 rounded-lg"> | |
| <div class="text-yellow-600 font-bold">5</div> | |
| <div class="text-xs text-gray-500">Streak</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Daily Goals --> | |
| <div class="mt-8"> | |
| <h3 class="font-bold text-gray-800 mb-3 flex items-center"> | |
| <i class="fas fa-bullseye mr-2 text-indigo-500"></i> | |
| Today's Goals | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <input type="checkbox" id="goal1" checked class="mr-2 rounded text-indigo-600"> | |
| <label for="goal1" class="text-sm">Complete 5 subtraction exercises</label> | |
| </li> | |
| <li class="flex items-center"> | |
| <input type="checkbox" id="goal2" class="mr-2 rounded text-indigo-600"> | |
| <label for="goal2" class="text-sm">Solve 3 logic puzzles</label> | |
| </li> | |
| <li class="flex items-center"> | |
| <input type="checkbox" id="goal3" class="mr-2 rounded text-indigo-600"> | |
| <label for="goal3" class="text-sm">10 minutes timed challenge</label> | |
| </li> | |
| </ul> | |
| <div class="mt-3 bg-blue-50 text-blue-800 text-xs p-2 rounded"> | |
| <i class="fas fa-info-circle mr-1"></i> | |
| Complete all goals to earn 50 bonus points! | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Middle Column - Exercises --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Welcome Banner --> | |
| <div class="bg-gradient-to-r from-indigo-500 to-blue-600 rounded-xl shadow-md p-6 text-white relative overflow-hidden"> | |
| <div class="relative z-10"> | |
| <h2 class="text-xl md:text-2xl font-bold mb-2">Hello, Aram!</h2> | |
| <p class="mb-4">Ready for today's math adventure?</p> | |
| <button class="bg-yellow-400 hover:bg-yellow-300 text-indigo-800 font-bold px-4 py-2 rounded-lg transition flex items-center"> | |
| <i class="fas fa-play mr-2"></i> | |
| Continue Learning | |
| </button> | |
| </div> | |
| <div class="absolute right-0 bottom-0 opacity-80 floating"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/4712/4712139.png" alt="Math Robot" class="h-32"> | |
| </div> | |
| </div> | |
| <!-- Recommended Exercises --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-gray-800 text-lg flex items-center"> | |
| <i class="fas fa-star mr-2 text-yellow-500"></i> | |
| Recommended For You | |
| </h3> | |
| <a href="#" class="text-sm text-indigo-600 hover:underline">See all</a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- Exercise Card 1 --> | |
| <div class="exercise-card bg-indigo-50 border border-indigo-100 rounded-lg p-4 transition cursor-pointer hover:border-indigo-200"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <span class="inline-block bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full mb-1">Subtraction</span> | |
| <h4 class="font-bold text-gray-800">Visual Subtraction</h4> | |
| </div> | |
| <div class="flex items-center text-yellow-500"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1 text-xs font-bold">4.8</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">Drag and drop objects to solve subtraction problems</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span>5-10 min</span> | |
| </div> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold px-3 py-1 rounded transition"> | |
| Start | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Exercise Card 2 --> | |
| <div class="exercise-card bg-green-50 border border-green-100 rounded-lg p-4 transition cursor-pointer hover:border-green-200"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full mb-1">Logic</span> | |
| <h4 class="font-bold text-gray-800">Number Patterns</h4> | |
| </div> | |
| <div class="flex items-center text-yellow-500"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1 text-xs font-bold">4.5</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">Find the missing number in colorful patterns</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span>5-15 min</span> | |
| </div> | |
| <button class="bg-green-600 hover:bg-green-700 text-white text-xs font-bold px-3 py-1 rounded transition"> | |
| Start | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Exercise Card 3 --> | |
| <div class="exercise-card bg-yellow-50 border border-yellow-100 rounded-lg p-4 transition cursor-pointer hover:border-yellow-200"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <span class="inline-block bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full mb-1">Challenge</span> | |
| <h4 class="font-bold text-gray-800">10-Minute Speed Test</h4> | |
| </div> | |
| <div class="flex items-center text-yellow-500"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1 text-xs font-bold">4.2</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">Solve as many problems as you can in 10 minutes!</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-trophy mr-1"></i> | |
| <span>High Score: 15</span> | |
| </div> | |
| <button class="bg-yellow-500 hover:bg-yellow-600 text-white text-xs font-bold px-3 py-1 rounded transition"> | |
| Try Again | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Exercise Card 4 --> | |
| <div class="exercise-card bg-purple-50 border border-purple-100 rounded-lg p-4 transition cursor-pointer hover:border-purple-200"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full mb-1">Subtraction</span> | |
| <h4 class="font-bold text-gray-800">Number Line Practice</h4> | |
| </div> | |
| <div class="flex items-center text-yellow-500"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1 text-xs font-bold">4.7</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">Use the interactive number line to solve problems</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-medal mr-1"></i> | |
| <span>New Level!</span> | |
| </div> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white text-xs font-bold px-3 py-1 rounded transition"> | |
| Unlock | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Progress Section --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-gray-800 text-lg flex items-center"> | |
| <i class="fas fa-chart-line mr-2 text-blue-500"></i> | |
| Your Progress | |
| </h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded">Week</button> | |
| <button class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">Month</button> | |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded">Year</button> | |
| </div> | |
| </div> | |
| <!-- Progress Chart --> | |
| <div class="h-64 mb-4"> | |
| <canvas id="progressChart"></canvas> | |
| </div> | |
| <!-- Skill Breakdown --> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-3">Skill Breakdown</h4> | |
| <div class="space-y-3"> | |
| <!-- Subtraction Skill --> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="font-medium">Subtraction</span> | |
| <span>75% Mastery</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 75%"></div> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1"> | |
| <span class="text-green-600 font-bold">+5%</span> from last week | |
| </div> | |
| </div> | |
| <!-- Logic Skill --> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="font-medium">Logic & Patterns</span> | |
| <span>60% Mastery</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 60%"></div> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1"> | |
| <span class="text-green-600 font-bold">+8%</span> from last week | |
| </div> | |
| </div> | |
| <!-- Speed Skill --> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="font-medium">Speed & Accuracy</span> | |
| <span>45% Mastery</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1"> | |
| <span class="text-green-600 font-bold">+12%</span> from last week | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Badges --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h3 class="font-bold text-gray-800 text-lg mb-4 flex items-center"> | |
| <i class="fas fa-award mr-2 text-yellow-500"></i> | |
| Recent Badges | |
| </h3> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <!-- Badge 1 --> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="relative has-tooltip"> | |
| <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-2 border-2 border-blue-300"> | |
| <i class="fas fa-subscript text-2xl text-blue-600"></i> | |
| </div> | |
| <div class="tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap mb-2"> | |
| Subtraction Master | |
| </div> | |
| </div> | |
| <span class="text-xs font-medium">Level 2</span> | |
| </div> | |
| <!-- Badge 2 --> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="relative has-tooltip"> | |
| <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-2 border-2 border-green-300"> | |
| <i class="fas fa-brain text-2xl text-green-600"></i> | |
| </div> | |
| <div class="tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap mb-2"> | |
| Pattern Finder | |
| </div> | |
| </div> | |
| <span class="text-xs font-medium">Level 1</span> | |
| </div> | |
| <!-- Badge 3 --> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="relative has-tooltip"> | |
| <div class="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center mb-2 border-2 border-yellow-300"> | |
| <i class="fas fa-bolt text-2xl text-yellow-600"></i> | |
| </div> | |
| <div class="tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap mb-2"> | |
| Speedster | |
| </div> | |
| </div> | |
| <span class="text-xs font-medium">New!</span> | |
| </div> | |
| <!-- Badge 4 --> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="relative has-tooltip"> | |
| <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-2 border-2 border-purple-300"> | |
| <i class="fas fa-calendar-check text-2xl text-purple-600"></i> | |
| </div> | |
| <div class="tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap mb-2"> | |
| 5-Day Streak | |
| </div> | |
| </div> | |
| <span class="text-xs font-medium">Today</span> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <button class="text-indigo-600 hover:text-indigo-800 font-medium text-sm flex items-center justify-center mx-auto"> | |
| View All Badges | |
| <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-white border-t border-gray-200 py-4"> | |
| <div class="container mx-auto px-4 text-center text-gray-500 text-sm"> | |
| <p>© 2023 MathQuest Kids. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // Initialize progress chart | |
| const ctx = document.getElementById('progressChart').getContext('2d'); | |
| const progressChart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'This Week'], | |
| datasets: [ | |
| { | |
| label: 'Subtraction', | |
| data: [45, 60, 65, 70, 75], | |
| borderColor: '#4f46e5', | |
| backgroundColor: 'rgba(79, 70, 229, 0.05)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Logic', | |
| data: [30, 40, 50, 52, 60], | |
| borderColor: '#10b981', | |
| backgroundColor: 'rgba(16, 185, 129, 0.05)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Speed', | |
| data: [20, 25, 33, 40, 45], | |
| borderColor: '#f59e0b', | |
| backgroundColor: 'rgba(245, 158, 11, 0.05)', | |
| tension: 0.3, | |
| fill: true | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false, | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| max: 100, | |
| ticks: { | |
| callback: function(value) { | |
| return value + '%'; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Tooltip functionality | |
| document.querySelectorAll('.has-tooltip').forEach(el => { | |
| el.addEventListener('mouseenter', function() { | |
| const tooltip = this.querySelector('.tooltip'); | |
| tooltip.style.visibility = 'visible'; | |
| tooltip.style.opacity = '1'; | |
| }); | |
| el.addEventListener('mouseleave', function() { | |
| const tooltip = this.querySelector('.tooltip'); | |
| tooltip.style.visibility = 'hidden'; | |
| tooltip.style.opacity = '0'; | |
| }); | |
| }); | |
| // Exercise card hover effects | |
| document.querySelectorAll('.exercise-card').forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-5px)'; | |
| this.style.boxShadow = '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.transform = ''; | |
| this.style.boxShadow = ''; | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=aramka/aram" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |