Math Adventures and Visual Learning

// components/MathAdventureGame.tsx
import React, { useState, useEffect, useCallback } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Animated,
  Dimensions,
  Alert,
} from 'react-native';
import Svg, { Circle, Line, Text as SvgText, Path, Rect } from 'react-native-svg';
import { LinearGradient } from 'expo-linear-gradient';

interface MathProblem {
  id: string;
  type: 'arithmetic' | 'geometry' | 'algebra' | 'fractions';
  question: string;
  visualization: any;
  answer: number | string;
  options?: string[];
  difficulty: 1 | 2 | 3 | 4 | 5;
  hint?: string;
}

interface GameProgress {
  level: number;
  score: number;
  streak: number;
  totalProblems: number;
  correctAnswers: number;
  skillPoints: { [key: string]: number };
}

export const MathAdventureGame: React.FC = () => {
  const [currentProblem, setCurrentProblem] = useState<MathProblem | null>(null);
  const [userAnswer, setUserAnswer] = useState<string>('');
  const [progress, setProgress] = useState<GameProgress>({
    level: 1,
    score: 0,
    streak: 0,
    totalProblems: 0,
    correctAnswers: 0,
    skillPoints: { arithmetic: 0, geometry: 0, algebra: 0, fractions: 0 },
  });
  const [showHint, setShowHint] = useState(false);
  const [gameState, setGameState] = useState<'playing' | 'victory' | 'thinking'>('playing');
  const [animationValue] = useState(new Animated.Value(0));

  useEffect(() => {
    generateNewProblem();
  }, []);

  const generateNewProblem = useCallback(() => {
    const problemTypes = ['arithmetic', 'geometry', 'algebra', 'fractions'] as const;
    const randomType = problemTypes[Math.floor(Math.random() * problemTypes.length)];\n    const difficulty = Math.min(5, Math.max(1, progress.level));\n    \n    let newProblem: MathProblem;\n    \n    switch (randomType) {\n      case 'arithmetic':\n        newProblem = generateArithmeticProblem(difficulty);\n        break;\n      case 'geometry':\n        newProblem = generateGeometryProblem(difficulty);\n        break;\n      case 'algebra':\n        newProblem = generateAlgebraProblem(difficulty);\n        break;\n      case 'fractions':\n        newProblem = generateFractionsProblem(difficulty);\n        break;\n    }\n    \n    setCurrentProblem(newProblem);\n    setUserAnswer('');\n    setShowHint(false);\n    setGameState('playing');\n    \n    // Animate problem entry\n    animateIn();\n  }, [progress.level]);\n\n  const generateArithmeticProblem = (difficulty: number): MathProblem => {\n    const operations = ['+', '-', '×', '÷'];\n    const maxNumber = difficulty * 20;\n    \n    let num1 = Math.floor(Math.random() * maxNumber) + 1;\n    let num2 = Math.floor(Math.random() * maxNumber) + 1;\n    const operation = operations[Math.floor(Math.random() * operations.length)];\n    \n    // Ensure division results in whole numbers\n    if (operation === '÷') {\n      num1 = num2 * (Math.floor(Math.random() * 10) + 1);\n    }\n    \n    let answer: number;\n    let question: string;\n    \n    switch (operation) {\n      case '+':\n        answer = num1 + num2;\n        question = `${num1} + ${num2} = ?`;\n        break;\n      case '-':\n        if (num1 < num2) [num1, num2] = [num2, num1]; // Ensure positive result\n        answer = num1 - num2;\n        question = `${num1} - ${num2} = ?`;\n        break;\n      case '×':\n        answer = num1 * num2;\n        question = `${num1} × ${num2} = ?`;\n        break;\n      case '÷':\n        answer = num1 / num2;\n        question = `${num1} ÷ ${num2} = ?`;\n        break;\n      default:\n        answer = num1 + num2;\n        question = `${num1} + ${num2} = ?`;\n    }\n    \n    return {\n      id: Date.now().toString(),\n      type: 'arithmetic',\n      question,\n      answer,\n      difficulty,\n      visualization: {\n        type: 'number_line',\n        num1,\n        num2,\n        operation,\n      },\n      hint: `Try breaking down the problem into smaller steps!`,\n    };\n  };\n\n  const generateGeometryProblem = (difficulty: number): MathProblem => {\n    const shapes = ['circle', 'rectangle', 'triangle'];\n    const shape = shapes[Math.floor(Math.random() * shapes.length)];\n    \n    let answer: number;\n    let question: string;\n    let visualization: any;\n    \n    switch (shape) {\n      case 'circle':\n        const radius = Math.floor(Math.random() * 10) + 3;\n        answer = Math.round(Math.PI * radius * radius * 100) / 100;\n        question = `Find the area of a circle with radius ${radius}`;\n        visualization = {\n          type: 'circle',\n          radius,\n          showFormula: true,\n        };\n        break;\n      case 'rectangle':\n        const width = Math.floor(Math.random() * 10) + 2;\n        const height = Math.floor(Math.random() * 10) + 2;\n        answer = width * height;\n        question = `Find the area of a rectangle with width ${width} and height ${height}`;\n        visualization = {\n          type: 'rectangle',\n          width,\n          height,\n        };\n        break;\n      default: // triangle\n        const base = Math.floor(Math.random() * 10) + 3;\n        const triangleHeight = Math.floor(Math.random() * 10) + 3;\n        answer = Math.round((base * triangleHeight / 2) * 100) / 100;\n        question = `Find the area of a triangle with base ${base} and height ${triangleHeight}`;\n        visualization = {\n          type: 'triangle',\n          base,\n          height: triangleHeight,\n        };\n    }\n    \n    return {\n      id: Date.now().toString(),\n      type: 'geometry',\n      question,\n      answer,\n      difficulty,\n      visualization,\n      hint: `Remember the formula: ${shape === 'circle' ? 'π × r²' : shape === 'rectangle' ? 'width × height' : '½ × base × height'}`,\n    };\n  };\n\n  const generateAlgebraProblem = (difficulty: number): MathProblem => {\n    const x = Math.floor(Math.random() * 20) + 1;\n    const coefficient = Math.floor(Math.random() * 5) + 2;\n    const constant = Math.floor(Math.random() * 30) + 1;\n    \n    const result = coefficient * x + constant;\n    \n    return {\n      id: Date.now().toString(),\n      type: 'algebra',\n      question: `Solve for x: ${coefficient}x + ${constant} = ${result}`,\n      answer: x,\n      difficulty,\n      visualization: {\n        type: 'equation',\n        coefficient,\n        constant,\n        result,\n      },\n      hint: `Subtract ${constant} from both sides, then divide by ${coefficient}`,\n    };\n  };\n\n  const generateFractionsProblem = (difficulty: number): MathProblem => {\n    const numerator1 = Math.floor(Math.random() * 8) + 1;\n    const denominator1 = Math.floor(Math.random() * 8) + 2;\n    const numerator2 = Math.floor(Math.random() * 8) + 1;\n    const denominator2 = Math.floor(Math.random() * 8) + 2;\n    \n    const operations = ['+', '-'];\n    const operation = operations[Math.floor(Math.random() * operations.length)];\n    \n    // Find common denominator\n    const commonDenom = denominator1 * denominator2;\n    const num1Converted = numerator1 * denominator2;\n    const num2Converted = numerator2 * denominator1;\n    \n    const resultNumerator = operation === '+' \n      ? num1Converted + num2Converted\n      : num1Converted - num2Converted;\n    \n    // Simplify fraction\n    const gcd = (a: number, b: number): number => b === 0 ? a : gcd(b, a % b);\n    const commonFactor = gcd(Math.abs(resultNumerator), commonDenom);\n    const simplifiedNum = resultNumerator / commonFactor;\n    const simplifiedDenom = commonDenom / commonFactor;\n    \n    return {\n      id: Date.now().toString(),\n      type: 'fractions',\n      question: `${numerator1}/${denominator1} ${operation} ${numerator2}/${denominator2} = ?`,\n      answer: simplifiedDenom === 1 ? simplifiedNum.toString() : `${simplifiedNum}/${simplifiedDenom}`,\n      difficulty,\n      visualization: {\n        type: 'fractions',\n        fraction1: { numerator: numerator1, denominator: denominator1 },\n        fraction2: { numerator: numerator2, denominator: denominator2 },\n        operation,\n      },\n      hint: `Find a common denominator first: ${commonDenom}`,\n    };\n  };\n\n  const checkAnswer = useCallback(() => {\n    if (!currentProblem || !userAnswer.trim()) return;\n    \n    setGameState('thinking');\n    \n    setTimeout(() => {\n      const isCorrect = userAnswer.trim().toLowerCase() === currentProblem.answer.toString().toLowerCase();\n      \n      setProgress(prev => {\n        const newProgress = {\n          ...prev,\n          totalProblems: prev.totalProblems + 1,\n          correctAnswers: prev.correctAnswers + (isCorrect ? 1 : 0),\n          streak: isCorrect ? prev.streak + 1 : 0,\n          score: prev.score + (isCorrect ? currentProblem.difficulty * 10 * (prev.streak + 1) : 0),\n          skillPoints: {\n            ...prev.skillPoints,\n            [currentProblem.type]: prev.skillPoints[currentProblem.type] + (isCorrect ? 1 : 0),\n          },\n        };\n        \n        // Level up logic\n        const newLevel = Math.floor(newProgress.score / 500) + 1;\n        if (newLevel > prev.level) {\n          Alert.alert('Level Up!', `Welcome to Level ${newLevel}! 🎉`);\n          newProgress.level = newLevel;\n        }\n        \n        return newProgress;\n      });\n      \n      if (isCorrect) {\n        setGameState('victory');\n        Alert.alert(\n          'Correct! 🎉', \n          `Great job! You earned ${currentProblem.difficulty * 10 * progress.streak} points!`,\n          [{ text: 'Next Problem', onPress: generateNewProblem }]\n        );\n      } else {\n        Alert.alert(\n          'Try Again! 💪', \n          `The correct answer was ${currentProblem.answer}. Keep practicing!`,\n          [{ text: 'Next Problem', onPress: generateNewProblem }]\n        );\n      }\n    }, 1000);\n  }, [currentProblem, userAnswer, progress.streak]);\n\n  const animateIn = () => {\n    animationValue.setValue(0);\n    Animated.spring(animationValue, {\n      toValue: 1,\n      tension: 50,\n      friction: 8,\n      useNativeDriver: true,\n    }).start();\n  };\n\n  const renderVisualization = () => {\n    if (!currentProblem?.visualization) return null;\n    \n    const { visualization } = currentProblem;\n    \n    switch (visualization.type) {\n      case 'circle':\n        return (\n          <Svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\">\n            <Circle\n              cx=\"100\"\n              cy=\"100\"\n              r={visualization.radius * 5}\n              fill=\"rgba(74, 144, 226, 0.3)\"\n              stroke=\"#4A90E2\"\n              strokeWidth=\"3\"\n            />\n            <SvgText\n              x=\"100\"\n              y=\"105\"\n              fontSize=\"14\"\n              textAnchor=\"middle\"\n              fill=\"#2C3E50\"\n            >\n              r = {visualization.radius}\n            </SvgText>\n            {visualization.showFormula && (\n              <SvgText\n                x=\"100\"\n                y=\"180\"\n                fontSize=\"12\"\n                textAnchor=\"middle\"\n                fill=\"#7F8C8D\"\n              >\n                Area = π × r²\n              </SvgText>\n            )}\n          </Svg>\n        );\n      \n      case 'rectangle':\n        return (\n          <Svg width=\"200\" height=\"150\" viewBox=\"0 0 200 150\">\n            <Rect\n              x=\"50\"\n              y=\"25\"\n              width={visualization.width * 10}\n              height={visualization.height * 8}\n              fill=\"rgba(46, 204, 113, 0.3)\"\n              stroke=\"#2ECC71\"\n              strokeWidth=\"3\"\n            />\n            <SvgText\n              x={50 + (visualization.width * 10) / 2}\n              y=\"20\"\n              fontSize=\"12\"\n              textAnchor=\"middle\"\n              fill=\"#2C3E50\"\n            >\n              {visualization.width}\n            </SvgText>\n            <SvgText\n              x=\"40\"\n              y={25 + (visualization.height * 8) / 2}\n              fontSize=\"12\"\n              textAnchor=\"middle\"\n              fill=\"#2C3E50\"\n            >\n              {visualization.height}\n            </SvgText>\n          </Svg>\n        );\n      \n      default:\n        return null;\n    }\n  };\n\n  if (!currentProblem) {\n    return (\n      <View style={styles.loadingContainer}>\n        <Text style={styles.loadingText}>Generating math problem...</Text>\n      </View>\n    );\n  }\n\n  return (\n    <LinearGradient\n      colors={['#667eea', '#764ba2']}\n      style={styles.container}\n    >\n      {/* Header */}\n      <View style={styles.header}>\n        <View style={styles.statContainer}>\n          <Text style={styles.statValue}>{progress.level}</Text>\n          <Text style={styles.statLabel}>Level</Text>\n        </View>\n        <View style={styles.statContainer}>\n          <Text style={styles.statValue}>{progress.score}</Text>\n          <Text style={styles.statLabel}>Score</Text>\n        </View>\n        <View style={styles.statContainer}>\n          <Text style={styles.statValue}>{progress.streak}</Text>\n          <Text style={styles.statLabel}>Streak</Text>\n        </View>\n      </View>\n\n      {/* Progress Bar */}\n      <View style={styles.progressBarContainer}>\n        <View style={styles.progressBar}>\n          <View \n            style={[\n              styles.progressFill,\n              { width: `${Math.min(100, (progress.score % 500) / 5)}%` }\n            ]}\n          />\n        </View>\n        <Text style={styles.progressText}>\n          {500 - (progress.score % 500)} XP to next level\n        </Text>\n      </View>\n\n      {/* Problem Card */}\n      <Animated.View\n        style={[\n          styles.problemCard,\n          {\n            transform: [{\n              scale: animationValue.interpolate({\n                inputRange: [0, 1],\n                outputRange: [0.8, 1],\n              })\n            }],\n            opacity: animationValue,\n          }\n        ]}\n      >\n        <Text style={styles.problemType}>\n          {currentProblem.type.toUpperCase()} • Level {currentProblem.difficulty}\n        </Text>\n        \n        <Text style={styles.questionText}>{currentProblem.question}</Text>\n        \n        {/* Visualization */}\n        <View style={styles.visualizationContainer}>\n          {renderVisualization()}\n        </View>\n        \n        {/* Answer Input */}\n        <View style={styles.answerContainer}>\n          <TouchableOpacity\n            style={styles.answerInput}\n            onPress={() => {\n              // In a real app, you'd show a number keypad\n              Alert.prompt(\n                'Your Answer',\n                'Enter your answer:',\n                [{ text: 'Cancel' }, { text: 'Submit', onPress: (text) => setUserAnswer(text || '') }],\n                'plain-text'\n              );\n            }}\n          >\n            <Text style={styles.answerText}>\n              {userAnswer || 'Tap to enter answer'}\n            </Text>\n          </TouchableOpacity>\n        </View>\n        \n        {/* Action Buttons */}\n        <View style={styles.buttonContainer}>\n          <TouchableOpacity\n            style={styles.hintButton}\n            onPress={() => setShowHint(!showHint)}\n          >\n            <Text style={styles.buttonText}>💡 Hint</Text>\n          </TouchableOpacity>\n          \n          <TouchableOpacity\n            style={styles.submitButton}\n            onPress={checkAnswer}\n            disabled={!userAnswer.trim() || gameState === 'thinking'}\n          >\n            <Text style={styles.buttonText}>\n              {gameState === 'thinking' ? '🤔 Checking...' : '✓ Submit'}\n            </Text>\n          </TouchableOpacity>\n        </View>\n        \n        {/* Hint */}\n        {showHint && currentProblem.hint && (\n          <View style={styles.hintContainer}>\n            <Text style={styles.hintText}>💡 {currentProblem.hint}</Text>\n          </View>\n        )}\n      </Animated.View>\n\n      {/* Skill Progress */}\n      <View style={styles.skillsContainer}>\n        {Object.entries(progress.skillPoints).map(([skill, points]) => (\n          <View key={skill} style={styles.skillItem}>\n            <Text style={styles.skillName}>{skill}</Text>\n            <Text style={styles.skillPoints}>{points}</Text>\n          </View>\n        ))}\n      </View>\n    </LinearGradient>\n  );\n};\n\nconst { width } = Dimensions.get('window');\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 20,\n  },\n  loadingContainer: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  loadingText: {\n    color: 'white',\n    fontSize: 18,\n  },\n  header: {\n    flexDirection: 'row',\n    justifyContent: 'space-around',\n    marginTop: 40,\n    marginBottom: 20,\n  },\n  statContainer: {\n    alignItems: 'center',\n  },\n  statValue: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    color: 'white',\n  },\n  statLabel: {\n    fontSize: 14,\n    color: 'rgba(255, 255, 255, 0.8)',\n  },\n  progressBarContainer: {\n    marginBottom: 20,\n  },\n  progressBar: {\n    height: 8,\n    backgroundColor: 'rgba(255, 255, 255, 0.3)',\n    borderRadius: 4,\n    overflow: 'hidden',\n  },\n  progressFill: {\n    height: '100%',\n    backgroundColor: '#FFD700',\n    borderRadius: 4,\n  },\n  progressText: {\n    color: 'rgba(255, 255, 255, 0.8)',\n    textAlign: 'center',\n    marginTop: 8,\n    fontSize: 12,\n  },\n  problemCard: {\n    backgroundColor: 'white',\n    borderRadius: 20,\n    padding: 25,\n    marginBottom: 20,\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 4 },\n    shadowOpacity: 0.3,\n    shadowRadius: 8,\n    elevation: 8,\n  },\n  problemType: {\n    fontSize: 12,\n    color: '#666',\n    textAlign: 'center',\n    marginBottom: 15,\n    letterSpacing: 1,\n  },\n  questionText: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    color: '#2C3E50',\n    textAlign: 'center',\n    marginBottom: 20,\n  },\n  visualizationContainer: {\n    alignItems: 'center',\n    marginBottom: 20,\n  },\n  answerContainer: {\n    marginBottom: 20,\n  },\n  answerInput: {\n    backgroundColor: '#F8F9FA',\n    padding: 15,\n    borderRadius: 12,\n    borderWidth: 2,\n    borderColor: '#E9ECEF',\n  },\n  answerText: {\n    fontSize: 18,\n    textAlign: 'center',\n    color: '#495057',\n  },\n  buttonContainer: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n  hintButton: {\n    backgroundColor: '#FFC107',\n    paddingHorizontal: 20,\n    paddingVertical: 12,\n    borderRadius: 12,\n    flex: 0.45,\n  },\n  submitButton: {\n    backgroundColor: '#28A745',\n    paddingHorizontal: 20,\n    paddingVertical: 12,\n    borderRadius: 12,\n    flex: 0.45,\n  },\n  buttonText: {\n    color: 'white',\n    fontWeight: 'bold',\n    textAlign: 'center',\n    fontSize: 16,\n  },\n  hintContainer: {\n    backgroundColor: '#FFF3CD',\n    padding: 15,\n    borderRadius: 12,\n    marginTop: 15,\n    borderLeftWidth: 4,\n    borderLeftColor: '#FFC107',\n  },\n  hintText: {\n    color: '#856404',\n    fontSize: 14,\n  },\n  skillsContainer: {\n    flexDirection: 'row',\n    justifyContent: 'space-around',\n    backgroundColor: 'rgba(255, 255, 255, 0.1)',\n    borderRadius: 15,\n    padding: 15,\n  },\n  skillItem: {\n    alignItems: 'center',\n  },\n  skillName: {\n    color: 'white',\n    fontSize: 12,\n    textTransform: 'capitalize',\n  },\n  skillPoints: {\n    color: '#FFD700',\n    fontSize: 16,\n    fontWeight: 'bold',\n  },\n});\n\nexport default MathAdventureGame;\n```\n\n## 📊 Interactive Charts and Visualizations\n\n### Dynamic Chart Component\n\n```typescript\n// components/MathChart.tsx\nimport React, { useState, useEffect } from 'react';\nimport { View, Text, StyleSheet, Dimensions, TouchableOpacity } from 'react-native';\nimport Svg, { Line, Circle, Path, Text as SvgText, G, Rect } from 'react-native-svg';\n\ninterface DataPoint {\n  x: number;\n  y: number;\n  label?: string;\n}\n\ninterface MathChartProps {\n  data: DataPoint[];\n  type: 'line' | 'bar' | 'scatter' | 'function';\n  title: string;\n  equation?: string;\n  interactive?: boolean;\n  onPointSelect?: (point: DataPoint) => void;\n}\n\nexport const MathChart: React.FC<MathChartProps> = ({\n  data,\n  type,\n  title,\n  equation,\n  interactive = false,\n  onPointSelect,\n}) => {\n  const [selectedPoint, setSelectedPoint] = useState<DataPoint | null>(null);\n  const [chartBounds, setChartBounds] = useState({\n    minX: 0,\n    maxX: 10,\n    minY: 0,\n    maxY: 10,\n  });\n\n  const chartWidth = Dimensions.get('window').width - 40;\n  const chartHeight = 250;\n  const padding = 40;\n\n  useEffect(() => {\n    if (data.length === 0) return;\n    \n    const bounds = {\n      minX: Math.min(...data.map(d => d.x)) - 1,\n      maxX: Math.max(...data.map(d => d.x)) + 1,\n      minY: Math.min(...data.map(d => d.y)) - 1,\n      maxY: Math.max(...data.map(d => d.y)) + 1,\n    };\n    \n    setChartBounds(bounds);\n  }, [data]);\n\n  const scaleX = (x: number) => {\n    return padding + ((x - chartBounds.minX) / (chartBounds.maxX - chartBounds.minX)) * (chartWidth - 2 * padding);\n  };\n\n  const scaleY = (y: number) => {\n    return chartHeight - padding - ((y - chartBounds.minY) / (chartBounds.maxY - chartBounds.minY)) * (chartHeight - 2 * padding);\n  };\n\n  const renderAxes = () => {\n    const xAxisY = scaleY(0);\n    const yAxisX = scaleX(0);\n    \n    return (\n      <G>\n        {/* X-axis */}\n        <Line\n          x1={padding}\n          y1={xAxisY}\n          x2={chartWidth - padding}\n          y2={xAxisY}\n          stroke=\"#666\"\n          strokeWidth=\"2\"\n        />\n        \n        {/* Y-axis */}\n        <Line\n          x1={yAxisX}\n          y1={padding}\n          x2={yAxisX}\n          y2={chartHeight - padding}\n          stroke=\"#666\"\n          strokeWidth=\"2\"\n        />\n        \n        {/* Grid lines and labels */}\n        {Array.from({ length: 11 }, (_, i) => {\n          const x = chartBounds.minX + (i / 10) * (chartBounds.maxX - chartBounds.minX);\n          const screenX = scaleX(x);\n          \n          return (\n            <G key={`x-grid-${i}`}>\n              <Line\n                x1={screenX}\n                y1={padding}\n                x2={screenX}\n                y2={chartHeight - padding}\n                stroke=\"#ddd\"\n                strokeWidth=\"1\"\n                strokeDasharray=\"2,2\"\n              />\n              <SvgText\n                x={screenX}\n                y={chartHeight - 20}\n                fontSize=\"10\"\n                textAnchor=\"middle\"\n                fill=\"#666\"\n              >\n                {Math.round(x)}\n              </SvgText>\n            </G>\n          );\n        })}\n        \n        {Array.from({ length: 11 }, (_, i) => {\n          const y = chartBounds.minY + (i / 10) * (chartBounds.maxY - chartBounds.minY);\n          const screenY = scaleY(y);\n          \n          return (\n            <G key={`y-grid-${i}`}>\n              <Line\n                x1={padding}\n                y1={screenY}\n                x2={chartWidth - padding}\n                y2={screenY}\n                stroke=\"#ddd\"\n                strokeWidth=\"1\"\n                strokeDasharray=\"2,2\"\n              />\n              <SvgText\n                x={25}\n                y={screenY + 4}\n                fontSize=\"10\"\n                textAnchor=\"middle\"\n                fill=\"#666\"\n              >\n                {Math.round(y)}\n              </SvgText>\n            </G>\n          );\n        })}\n      </G>\n    );\n  };\n\n  const renderLineChart = () => {\n    if (data.length < 2) return null;\n    \n    const pathData = data.map((point, index) => {\n      const x = scaleX(point.x);\n      const y = scaleY(point.y);\n      return `${index === 0 ? 'M' : 'L'} ${x} ${y}`;\n    }).join(' ');\n    \n    return (\n      <G>\n        <Path\n          d={pathData}\n          fill=\"none\"\n          stroke=\"#4A90E2\"\n          strokeWidth=\"3\"\n        />\n        \n        {data.map((point, index) => (\n          <Circle\n            key={index}\n            cx={scaleX(point.x)}\n            cy={scaleY(point.y)}\n            r=\"4\"\n            fill=\"#4A90E2\"\n            onPress={() => {\n              setSelectedPoint(point);\n              onPointSelect?.(point);\n            }}\n          />\n        ))}\n      </G>\n    );\n  };\n\n  const renderBarChart = () => {\n    const barWidth = (chartWidth - 2 * padding) / data.length * 0.6;\n    \n    return (\n      <G>\n        {data.map((point, index) => {\n          const x = scaleX(point.x) - barWidth / 2;\n          const y = scaleY(point.y);\n          const height = scaleY(0) - y;\n          \n          return (\n            <Rect\n              key={index}\n              x={x}\n              y={y}\n              width={barWidth}\n              height={height}\n              fill=\"#2ECC71\"\n              onPress={() => {\n                setSelectedPoint(point);\n                onPointSelect?.(point);\n              }}\n            />\n          );\n        })}\n      </G>\n    );\n  };\n\n  const renderScatterPlot = () => {\n    return (\n      <G>\n        {data.map((point, index) => (\n          <Circle\n            key={index}\n            cx={scaleX(point.x)}\n            cy={scaleY(point.y)}\n            r=\"6\"\n            fill=\"#E74C3C\"\n            opacity=\"0.7\"\n            onPress={() => {\n              setSelectedPoint(point);\n              onPointSelect?.(point);\n            }}\n          />\n        ))}\n      </G>\n    );\n  };\n\n  const renderChart = () => {\n    switch (type) {\n      case 'line':\n        return renderLineChart();\n      case 'bar':\n        return renderBarChart();\n      case 'scatter':\n        return renderScatterPlot();\n      default:\n        return renderLineChart();\n    }\n  };\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.title}>{title}</Text>\n      \n      {equation && (\n        <Text style={styles.equation}>{equation}</Text>\n      )}\n      \n      <Svg width={chartWidth} height={chartHeight}>\n        {renderAxes()}\n        {renderChart()}\n        \n        {selectedPoint && (\n          <G>\n            <Circle\n              cx={scaleX(selectedPoint.x)}\n              cy={scaleY(selectedPoint.y)}\n              r=\"8\"\n              fill=\"none\"\n              stroke=\"#FFD700\"\n              strokeWidth=\"3\"\n            />\n            <SvgText\n              x={scaleX(selectedPoint.x)}\n              y={scaleY(selectedPoint.y) - 15}\n              fontSize=\"12\"\n              textAnchor=\"middle\"\n              fill=\"#2C3E50\"\n              fontWeight=\"bold\"\n            >\n              ({selectedPoint.x}, {selectedPoint.y})\n            </SvgText>\n          </G>\n        )}\n      </Svg>\n      \n      {selectedPoint && (\n        <View style={styles.pointInfo}>\n          <Text style={styles.pointInfoText}>\n            Selected Point: ({selectedPoint.x}, {selectedPoint.y})\n            {selectedPoint.label && ` - ${selectedPoint.label}`}\n          </Text>\n        </View>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    backgroundColor: 'white',\n    borderRadius: 15,\n    padding: 20,\n    margin: 10,\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.1,\n    shadowRadius: 4,\n    elevation: 3,\n  },\n  title: {\n    fontSize: 18,\n    fontWeight: 'bold',\n    color: '#2C3E50',\n    textAlign: 'center',\n    marginBottom: 10,\n  },\n  equation: {\n    fontSize: 16,\n    color: '#7F8C8D',\n    textAlign: 'center',\n    marginBottom: 15,\n    fontStyle: 'italic',\n  },\n  pointInfo: {\n    backgroundColor: '#F8F9FA',\n    padding: 10,\n    borderRadius: 8,\n    marginTop: 10,\n  },\n  pointInfoText: {\n    fontSize: 14,\n    color: '#495057',\n    textAlign: 'center',\n  },\n});\n\nexport default MathChart;\n```\n\n## 🤖 AI-Powered Math Content Generation\n\n### Intelligent Problem Generator\n\n```typescript\n// services/MathAI.ts\nimport OpenAI from 'openai';\n\ninterface StudentProfile {\n  grade: number;\n  strengths: string[];\n  weaknesses: string[];\n  interests: string[];\n  learningStyle: 'visual' | 'auditory' | 'kinesthetic';\n  recentPerformance: Array<{\n    topic: string;\n    accuracy: number;\n    timeSpent: number;\n  }>;\n}\n\nclass MathAI {\n  private openai: OpenAI;\n\n  constructor(apiKey: string) {\n    this.openai = new OpenAI({ apiKey });\n  }\n\n  async generatePersonalizedProblems(\n    profile: StudentProfile,\n    topic: string,\n    difficulty: number,\n    count: number = 5\n  ) {\n    const prompt = `\n      Generate ${count} math problems for a grade ${profile.grade} student.\n      Topic: ${topic}\n      Difficulty: ${difficulty}/5\n      Student strengths: ${profile.strengths.join(', ')}\n      Student weaknesses: ${profile.weaknesses.join(', ')}\n      Student interests: ${profile.interests.join(', ')}\n      Learning style: ${profile.learningStyle}\n      \n      Create problems that:\n      1. Match the student's level and interests\n      2. Address weak areas while building on strengths\n      3. Include real-world applications\n      4. Provide step-by-step solutions\n      \n      Return as JSON array with: question, answer, steps, visualization_hint, real_world_context\n    `;\n\n    try {\n      const response = await this.openai.chat.completions.create({\n        model: 'gpt-4',\n        messages: [{ role: 'user', content: prompt }],\n        temperature: 0.7,\n      });\n\n      return JSON.parse(response.choices[0].message.content || '[]');\n    } catch (error) {\n      console.error('Problem generation error:', error);\n      return [];\n    }\n  }\n\n  async explainSolution(\n    problem: string,\n    studentAnswer: string,\n    correctAnswer: string\n  ) {\n    const prompt = `\n      Problem: ${problem}\n      Student's answer: ${studentAnswer}\n      Correct answer: ${correctAnswer}\n      \n      Provide:\n      1. Whether the student's answer is correct\n      2. If incorrect, explain the mistake clearly\n      3. Step-by-step solution\n      4. Tips to avoid similar mistakes\n      5. Encouragement and next steps\n      \n      Use simple language appropriate for the grade level.\n    `;\n\n    try {\n      const response = await this.openai.chat.completions.create({\n        model: 'gpt-3.5-turbo',\n        messages: [{ role: 'user', content: prompt }],\n        temperature: 0.3,\n      });\n\n      return response.choices[0].message.content;\n    } catch (error) {\n      console.error('Solution explanation error:', error);\n      return 'Great attempt! Keep practicing to improve.';\n    }\n  }\n\n  async generateVisualExplanation(\n    concept: string,\n    studentLevel: number\n  ) {\n    const prompt = `\n      Create a visual explanation for the math concept: ${concept}\n      Student level: Grade ${studentLevel}\n      \n      Describe:\n      1. Simple analogies and real-world examples\n      2. Visual representations (shapes, diagrams)\n      3. Step-by-step breakdown\n      4. Interactive elements that could help understanding\n      5. Common misconceptions to address\n      \n      Make it engaging and age-appropriate.\n    `;\n\n    try {\n      const response = await this.openai.chat.completions.create({\n        model: 'gpt-4',\n        messages: [{ role: 'user', content: prompt }],\n        temperature: 0.8,\n      });\n\n      return response.choices[0].message.content;\n    } catch (error) {\n      console.error('Visual explanation error:', error);\n      return 'This concept can be understood through practice and examples.';\n    }\n  }\n\n  async adaptDifficulty(\n    currentProblems: Array<{\n      difficulty: number;\n      timeSpent: number;\n      correct: boolean;\n    }>\n  ): Promise<number> {\n    const recentAccuracy = currentProblems.slice(-10).reduce(\n      (acc, p) => acc + (p.correct ? 1 : 0), 0\n    ) / Math.min(10, currentProblems.length);\n    \n    const avgTimeSpent = currentProblems.slice(-5).reduce(\n      (acc, p) => acc + p.timeSpent, 0\n    ) / Math.min(5, currentProblems.length);\n    \n    // Adaptive algorithm\n    let newDifficulty = currentProblems[currentProblems.length - 1]?.difficulty || 3;\n    \n    if (recentAccuracy > 0.8 && avgTimeSpent < 30) {\n      newDifficulty = Math.min(5, newDifficulty + 1);\n    } else if (recentAccuracy < 0.4 || avgTimeSpent > 120) {\n      newDifficulty = Math.max(1, newDifficulty - 1);\n    }\n    \n    return newDifficulty;\n  }\n}\n\nexport default MathAI;\n```\n\n## 📚 Progress Tracking and Analytics\n\n### Learning Analytics Dashboard\n\n```typescript\n// components/MathAnalytics.tsx\nimport React, { useState, useEffect } from 'react';\nimport {\n  View,\n  Text,\n  ScrollView,\n  StyleSheet,\n  Dimensions,\n} from 'react-native';\nimport { LineChart, BarChart, PieChart } from 'react-native-chart-kit';\n\ninterface LearningAnalytics {\n  totalProblems: number;\n  correctAnswers: number;\n  timeSpent: number; // minutes\n  topicProgress: { [topic: string]: { correct: number; total: number } };\n  difficultyProgress: { [difficulty: string]: number };\n  dailyActivity: Array<{ date: string; problems: number; accuracy: number }>;\n  learningSpeed: number; // problems per minute\n  strengths: string[];\n  improvementAreas: string[];\n}\n\nexport const MathAnalytics: React.FC<{\n  analytics: LearningAnalytics;\n}> = ({ analytics }) => {\n  const screenWidth = Dimensions.get('window').width;\n  \n  const accuracyData = {\n    labels: analytics.dailyActivity.slice(-7).map(d => \n      new Date(d.date).toLocaleDateString('en', { weekday: 'short' })\n    ),\n    datasets: [\n      {\n        data: analytics.dailyActivity.slice(-7).map(d => d.accuracy * 100),\n        color: (opacity = 1) => `rgba(74, 144, 226, ${opacity})`,\n        strokeWidth: 3,\n      },\n    ],\n  };\n  \n  const topicData = {\n    labels: Object.keys(analytics.topicProgress),\n    datasets: [\n      {\n        data: Object.values(analytics.topicProgress).map(t => \n          t.total > 0 ? (t.correct / t.total) * 100 : 0\n        ),\n        color: (opacity = 1) => `rgba(46, 204, 113, ${opacity})`,\n      },\n    ],\n  };\n  \n  const difficultyData = Object.entries(analytics.difficultyProgress).map(\n    ([difficulty, count], index) => ({\n      name: `Level ${difficulty}`,\n      count,\n      color: [`#FF6B6B`, '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'][index],\n      legendFontColor: '#7F7F7F',\n      legendFontSize: 12,\n    })\n  );\n  \n  return (\n    <ScrollView style={styles.container}>\n      <Text style={styles.title}>📊 Your Math Journey</Text>\n      \n      {/* Overall Stats */}\n      <View style={styles.statsContainer}>\n        <View style={styles.statBox}>\n          <Text style={styles.statNumber}>\n            {Math.round((analytics.correctAnswers / analytics.totalProblems) * 100)}%\n          </Text>\n          <Text style={styles.statLabel}>Overall Accuracy</Text>\n        </View>\n        \n        <View style={styles.statBox}>\n          <Text style={styles.statNumber}>{analytics.totalProblems}</Text>\n          <Text style={styles.statLabel}>Problems Solved</Text>\n        </View>\n        \n        <View style={styles.statBox}>\n          <Text style={styles.statNumber}>{Math.round(analytics.timeSpent)}</Text>\n          <Text style={styles.statLabel}>Minutes Practiced</Text>\n        </View>\n      </View>\n      \n      {/* Accuracy Trend */}\n      <View style={styles.chartContainer}>\n        <Text style={styles.chartTitle}>📈 Weekly Accuracy Trend</Text>\n        <LineChart\n          data={accuracyData}\n          width={screenWidth - 40}\n          height={200}\n          chartConfig={{\n            backgroundColor: '#ffffff',\n            backgroundGradientFrom: '#ffffff',\n            backgroundGradientTo: '#f8f9fa',\n            decimalPlaces: 0,\n            color: (opacity = 1) => `rgba(74, 144, 226, ${opacity})`,\n            labelColor: (opacity = 1) => `rgba(44, 62, 80, ${opacity})`,\n            style: { borderRadius: 16 },\n            propsForDots: {\n              r: '6',\n              strokeWidth: '2',\n              stroke: '#4A90E2',\n            },\n          }}\n          bezier\n          style={styles.chart}\n        />\n      </View>\n      \n      {/* Topic Performance */}\n      <View style={styles.chartContainer}>\n        <Text style={styles.chartTitle}>📚 Topic Mastery</Text>\n        <BarChart\n          data={topicData}\n          width={screenWidth - 40}\n          height={200}\n          yAxisLabel=\"\"\n          yAxisSuffix=\"%\"\n          chartConfig={{\n            backgroundColor: '#ffffff',\n            backgroundGradientFrom: '#ffffff',\n            backgroundGradientTo: '#f8f9fa',\n            decimalPlaces: 0,\n            color: (opacity = 1) => `rgba(46, 204, 113, ${opacity})`,\n            labelColor: (opacity = 1) => `rgba(44, 62, 80, ${opacity})`,\n            style: { borderRadius: 16 },\n          }}\n          style={styles.chart}\n        />\n      </View>\n      \n      {/* Difficulty Distribution */}\n      <View style={styles.chartContainer}>\n        <Text style={styles.chartTitle}>🎯 Difficulty Levels Practiced</Text>\n        <PieChart\n          data={difficultyData}\n          width={screenWidth - 40}\n          height={200}\n          chartConfig={{\n            color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,\n          }}\n          accessor=\"count\"\n          backgroundColor=\"transparent\"\n          paddingLeft=\"15\"\n          absolute\n          style={styles.chart}\n        />\n      </View>\n      \n      {/* Strengths and Areas for Improvement */}\n      <View style={styles.insightsContainer}>\n        <View style={styles.insightBox}>\n          <Text style={styles.insightTitle}>💪 Your Strengths</Text>\n          {analytics.strengths.map((strength, index) => (\n            <Text key={index} style={styles.insightItem}>• {strength}</Text>\n          ))}\n        </View>\n        \n        <View style={styles.insightBox}>\n          <Text style={styles.insightTitle}>🎯 Focus Areas</Text>\n          {analytics.improvementAreas.map((area, index) => (\n            <Text key={index} style={styles.insightItem}>• {area}</Text>\n          ))}\n        </View>\n      </View>\n    </ScrollView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#F8F9FA',\n    padding: 20,\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    color: '#2C3E50',\n    textAlign: 'center',\n    marginBottom: 20,\n  },\n  statsContainer: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginBottom: 30,\n  },\n  statBox: {\n    backgroundColor: 'white',\n    borderRadius: 15,\n    padding: 20,\n    alignItems: 'center',\n    flex: 0.3,\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.1,\n    shadowRadius: 4,\n    elevation: 3,\n  },\n  statNumber: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    color: '#4A90E2',\n    marginBottom: 5,\n  },\n  statLabel: {\n    fontSize: 12,\n    color: '#7F8C8D',\n    textAlign: 'center',\n  },\n  chartContainer: {\n    backgroundColor: 'white',\n    borderRadius: 15,\n    padding: 15,\n    marginBottom: 20,\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.1,\n    shadowRadius: 4,\n    elevation: 3,\n  },\n  chartTitle: {\n    fontSize: 16,\n    fontWeight: 'bold',\n    color: '#2C3E50',\n    marginBottom: 10,\n  },\n  chart: {\n    borderRadius: 16,\n  },\n  insightsContainer: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginBottom: 20,\n  },\n  insightBox: {\n    backgroundColor: 'white',\n    borderRadius: 15,\n    padding: 20,\n    flex: 0.48,\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.1,\n    shadowRadius: 4,\n    elevation: 3,\n  },\n  insightTitle: {\n    fontSize: 16,\n    fontWeight: 'bold',\n    color: '#2C3E50',\n    marginBottom: 10,\n  },\n  insightItem: {\n    fontSize: 14,\n    color: '#495057',\n    marginBottom: 5,\n  },\n});\n\nexport default MathAnalytics;\n```\n\n## 📝 Summary\n\nIn this lesson, you learned:\n- How to create interactive math games with visual problem-solving\n- Building dynamic charts and mathematical visualizations\n- Implementing AI-powered personalized math content generation\n- Creating adaptive difficulty systems and progress tracking\n- Designing engaging educational experiences that make math fun\n- Understanding the educational technology market and opportunities\n\n## 🤖 Practice with AI\n\nCode with AI: Try building these educational features.\n\n**Prompts to try:**\n- *\"Create a geometry puzzle game where users build shapes to solve problems\"*\n- *\"Build a graphing calculator with step-by-step equation solving\"*\n- *\"Design a math story problem generator that creates personalized word problems\"*\n- *\"Implement a virtual math manipulatives app with blocks, fractions, and algebra tiles\"*\n- *\"Create a collaborative math game where students can work together on problems\"*\n\nEducational apps have incredible impact potential and strong business models - combine learning science with engaging gameplay to help students succeed!"