react-native-elearn-ui 0.1.11 → 0.1.13

package/src/screens/QuestionScreen.tsx

@@ -1,423 +0,0 @@
-import React, { useState } from 'react';
-import {
-  View,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-  StatusBar,
-  Image,
-} from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import type { Question, QuizResults } from '../types';
-import { useElearnConfig } from '../context/ElearnConfigContext';
-import { useTheme } from '../context/ThemeContext';
-import { Typography, Button, Icon } from '../components';
-
-interface QuestionScreenProps {
-  quizId?: string;
-  questions?: Question[];
-  title?: string;
-  topicId?: string;
-  onClose: () => void;
-  onFinishQuiz?: (quizId: string, results: QuizResults) => void;
-  hideHeader?: boolean;
-}
-
-export const QuestionScreen: React.FC<QuestionScreenProps> = ({
-  quizId,
-  questions,
-  title,
-  topicId,
-  onClose,
-  onFinishQuiz,
-  hideHeader = false,
-}) => {
-  const { config, callbacks } = useElearnConfig();
-  const theme = useTheme();
-
-  const activeTopic = topicId ? config.courses?.flatMap((c) => c.topics).find((t) => t.id === topicId) : undefined;
-  const activeQuestions = questions || activeTopic?.questions || [];
-  const activeTitle = title || activeTopic?.title || 'Quiz';
-  const activeQuizId = quizId || topicId || '';
-
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [selectedOption, setSelectedOption] = useState<number | null>(null);
-  const [isAnswered, setIsAnswered] = useState(false);
-  const [userAnswers, setUserAnswers] = useState<{ [questionId: string]: number }>({});
-  const [correctCount, setCorrectCount] = useState(0);
-  const [startTime] = useState(Date.now());
-  const [isPaused, setIsPaused] = useState(false);
-
-  if (!activeQuestions || activeQuestions.length === 0) {
-    return (
-      <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
-        <View style={styles.errorContainer}>
-          <Typography variant="h2" bold>No questions available</Typography>
-          <Button title="Go Back" onPress={onClose} style={styles.errorButton} />
-        </View>
-      </SafeAreaView>
-    );
-  }
-
-  const currentQuestion = activeQuestions[currentIndex]!;
-  const optionPrefixes = ['A', 'B', 'C', 'D', 'E', 'F'];
-
-  const handleOptionPress = (index: number) => {
-    if (isAnswered) return; // Prevent changing answer after selection
-    
-    setSelectedOption(index);
-    setIsAnswered(true);
-    
-    const updatedAnswers = { ...userAnswers, [currentQuestion.id]: index };
-    setUserAnswers(updatedAnswers);
-
-    const isCorrect = index === currentQuestion.correctOptionIndex;
-    if (isCorrect) {
-      setCorrectCount((prev) => prev + 1);
-    }
-  };
-
-  const handleNext = () => {
-    if (currentIndex < activeQuestions.length - 1) {
-      setCurrentIndex((prev) => prev + 1);
-      setSelectedOption(null);
-      setIsAnswered(false);
-    } else {
-      // Last question - finish quiz
-      const totalTimeSeconds = Math.round((Date.now() - startTime) / 1000);
-      const wrongCount = activeQuestions.length - correctCount;
-      const accuracy = Math.round((correctCount / activeQuestions.length) * 100);
-
-      const results: QuizResults = {
-        quizId: activeQuizId,
-        totalQuestions: activeQuestions.length,
-        correctCount,
-        wrongCount,
-        skippedCount: 0,
-        accuracy,
-        timeSpentSeconds: totalTimeSeconds,
-        userAnswers,
-      };
-
-      if (onFinishQuiz) {
-        onFinishQuiz(activeQuizId, results);
-      } else {
-        callbacks.onFinishQuiz?.(activeQuizId, results);
-      }
-    }
-  };
-
-  return (
-    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
-      <StatusBar barStyle="dark-content" />
-
-      {/* Header */}
-      {!hideHeader && (
-        <View style={styles.header}>
-          <TouchableOpacity onPress={onClose} style={styles.backButton}>
-            <Icon name="arrow-left" size={20} color={theme.textPrimary} />
-          </TouchableOpacity>
-          
-          <Typography variant="h2" bold style={styles.headerTitle}>
-            {activeTitle || 'QBank'}
-          </Typography>
-
-          <TouchableOpacity style={styles.shareButton}>
-            <Icon name="share" size={20} color={theme.textPrimary} />
-          </TouchableOpacity>
-        </View>
-      )}
-
-      <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
-        
-        {/* Question Header & Pause/Bookmark Actions Row */}
-        <View style={styles.metaRow}>
-          <Typography variant="caption" bold color={theme.textSecondary} style={styles.questionNumLabel}>
-            QUESTION {currentIndex + 1}/{activeQuestions.length}
-          </Typography>
-          <View style={styles.metaActions}>
-            <TouchableOpacity style={styles.metaActionBtn}>
-              <Icon name="bookmark" size={18} color={theme.textSecondary} />
-            </TouchableOpacity>
-            <TouchableOpacity onPress={() => setIsPaused(!isPaused)} style={styles.metaActionBtn}>
-              <Icon name={isPaused ? 'play' : 'pause-circle'} size={18} color={theme.textSecondary} />
-            </TouchableOpacity>
-          </View>
-        </View>
-
-        {/* Question text */}
-        <Typography variant="h2" bold color={theme.textPrimary} style={styles.questionText}>
-          {currentQuestion.text}
-        </Typography>
-
-        {/* Neuron microscope image */}
-        {currentQuestion.imageUrl && (
-          <Image
-            source={{ uri: currentQuestion.imageUrl }}
-            style={styles.questionImage}
-            resizeMode="cover"
-          />
-        )}
-
-        {/* Options list */}
-        <View style={styles.optionsList}>
-          {currentQuestion.options.map((option, idx) => {
-            const isSelected = selectedOption === idx;
-            const isCorrectAnswer = idx === currentQuestion.correctOptionIndex;
-            
-            let optionBg = '#FFFFFF';
-            let optionBorder = theme.border;
-            let labelColor = theme.textPrimary;
-            let prefixColor = theme.textSecondary;
-            let statText = '';
-            
-            if (isAnswered) {
-              if (isCorrectAnswer) {
-                optionBg = '#E6F4F1'; // Tinted green bg
-                optionBorder = '#10B981'; // Green border
-                labelColor = '#065F46';
-                prefixColor = '#065F46';
-                statText = '73% got this Correct'; // Mock stats matching mockup 5
-              } else if (isSelected) {
-                optionBg = '#FEF2F2'; // Tinted red bg
-                optionBorder = '#EF4444'; // Red border
-                labelColor = '#991B1B';
-                prefixColor = '#991B1B';
-                statText = '27% Marked Wrong'; // Mock stats matching mockup 5
-              }
-            } else if (isSelected) {
-              optionBg = theme.secondary;
-              optionBorder = theme.primary;
-              labelColor = theme.primary;
-              prefixColor = theme.primary;
-            }
-
-            return (
-              <TouchableOpacity
-                key={idx}
-                activeOpacity={0.8}
-                onPress={() => handleOptionPress(idx)}
-                disabled={isAnswered}
-                style={[
-                  styles.optionCard,
-                  {
-                    backgroundColor: optionBg,
-                    borderColor: optionBorder,
-                  },
-                ]}
-              >
-                <View style={styles.optionRow}>
-                  {/* Option letter label */}
-                  <Typography variant="body" bold color={prefixColor} style={styles.optionPrefix}>
-                    {optionPrefixes[idx] || idx + 1}
-                  </Typography>
-                  
-                  {/* Option text */}
-                  <Typography variant="body" color={labelColor} style={styles.optionText}>
-                    {option}
-                  </Typography>
-                </View>
-
-                {/* Option stats badge below option text */}
-                {isAnswered && statText !== '' && (
-                  <View style={styles.statBadgeRow}>
-                    <Typography variant="caption" bold color={isCorrectAnswer ? '#10B981' : '#EF4444'}>
-                      {statText}
-                    </Typography>
-                  </View>
-                )}
-              </TouchableOpacity>
-            );
-          })}
-        </View>
-
-        {/* Explanation Card (Appears after answer selection) */}
-        {isAnswered && (
-          <View style={styles.explanationSection}>
-            <Typography variant="h2" bold color={theme.textPrimary} style={styles.explanationTitle}>
-              Explanation
-            </Typography>
-            <Typography variant="body" color={theme.textSecondary} style={styles.explanationBody}>
-              {currentQuestion.explanation}
-            </Typography>
-            
-            <Typography variant="h3" bold color={theme.textSecondary} style={styles.rxdxId}>
-              RXDX ID: R23082
-            </Typography>
-          </View>
-        )}
-
-      </ScrollView>
-
-      {/* Answered State Bottom Actions Bar */}
-      {isAnswered && (
-        <View style={styles.footerRow}>
-          {/* Report action */}
-          <TouchableOpacity style={styles.footerActionBtn}>
-            <Icon name="alert-circle" size={18} color="#EF4444" />
-            <Typography variant="caption" bold color="#EF4444" style={styles.footerActionLabel}>
-              Report
-            </Typography>
-          </TouchableOpacity>
-
-          {/* Whatsapp action */}
-          <TouchableOpacity style={styles.footerActionBtn}>
-            <Icon name="whatsapp" size={18} color="#22C55E" />
-            <Typography variant="caption" bold color="#22C55E" style={styles.footerActionLabel}>
-              Whatsapp
-            </Typography>
-          </TouchableOpacity>
-
-          {/* Next action button */}
-          <TouchableOpacity onPress={handleNext} style={[styles.nextActionBtn, { backgroundColor: theme.primary }]}>
-            <Typography variant="body" bold color="#FFFFFF">
-              Next
-            </Typography>
-          </TouchableOpacity>
-        </View>
-      )}
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-  },
-  backButton: {
-    padding: 6,
-  },
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: '700',
-  },
-  shareButton: {
-    padding: 6,
-  },
-  scrollContent: {
-    paddingHorizontal: 16,
-    paddingTop: 8,
-    paddingBottom: 32,
-  },
-  metaRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-  questionNumLabel: {
-    fontSize: 12,
-    letterSpacing: 0.8,
-  },
-  metaActions: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  metaActionBtn: {
-    padding: 6,
-    marginLeft: 10,
-  },
-  questionText: {
-    fontSize: 16,
-    lineHeight: 22,
-    marginBottom: 14,
-  },
-  questionImage: {
-    width: '100%',
-    height: 180,
-    borderRadius: 12,
-    marginBottom: 16,
-    backgroundColor: '#F8FAFC',
-  },
-  optionsList: {
-    marginBottom: 12,
-  },
-  optionCard: {
-    borderWidth: 1,
-    borderRadius: 10,
-    padding: 12,
-    marginBottom: 10,
-  },
-  optionRow: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-  },
-  optionPrefix: {
-    width: 24,
-    fontSize: 14,
-    fontWeight: '600',
-  },
-  optionText: {
-    flex: 1,
-    fontSize: 14,
-    lineHeight: 18,
-  },
-  statBadgeRow: {
-    marginTop: 6,
-    paddingLeft: 24,
-  },
-  explanationSection: {
-    marginTop: 14,
-    paddingTop: 14,
-    borderTopWidth: 1,
-    borderTopColor: '#E2E8F0',
-  },
-  explanationTitle: {
-    fontSize: 15,
-    marginBottom: 6,
-  },
-  explanationBody: {
-    fontSize: 13,
-    lineHeight: 18,
-    marginBottom: 16,
-  },
-  rxdxId: {
-    fontSize: 12,
-    textAlign: 'center',
-    marginTop: 12,
-  },
-  footerRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    backgroundColor: '#FFFFFF',
-    borderTopWidth: 1,
-    borderTopColor: '#E2E8F0',
-    justifyContent: 'space-between',
-  },
-  footerActionBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-  },
-  footerActionLabel: {
-    marginLeft: 6,
-    fontSize: 12,
-  },
-  nextActionBtn: {
-    paddingHorizontal: 24,
-    paddingVertical: 10,
-    borderRadius: 8,
-    minWidth: 80,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  errorContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 24,
-  },
-  errorButton: {
-    marginTop: 16,
-  },
-});

package/src/screens/QuizStartScreen.tsx

@@ -1,260 +0,0 @@
-import React from 'react';
-import {
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  StatusBar,
-} from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import type { Topic, Course, Question } from '../types';
-import { useElearnConfig } from '../context/ElearnConfigContext';
-import { useTheme } from '../context/ThemeContext';
-import { Typography, Card, Button, Icon } from '../components';
-
-interface QuizStartScreenProps {
-  course?: Course;
-  courseId?: string;
-  topic?: Topic;
-  topicId?: string;
-  onBack: () => void;
-  hideHeader?: boolean;
-  onStartQuiz?: (quizId: string, questions: Question[], title: string) => void;
-}
-
-export const QuizStartScreen: React.FC<QuizStartScreenProps> = ({
-  course,
-  courseId,
-  topic,
-  topicId,
-  onBack,
-  hideHeader = false,
-  onStartQuiz,
-}) => {
-  const { config, callbacks } = useElearnConfig();
-  const theme = useTheme();
-
-  const activeCourse = course || config.courses?.find((c) => c.id === courseId);
-  const activeTopic = topic || activeCourse?.topics.find((t) => t.id === topicId) || config.courses?.flatMap((c) => c.topics).find((t) => t.id === topicId);
-
-  const handleStart = () => {
-    if (activeTopic && activeTopic.questions) {
-      if (onStartQuiz) {
-        onStartQuiz(activeTopic.id, activeTopic.questions, activeTopic.title);
-      } else {
-        callbacks.onStartQuiz?.(activeTopic.id, activeTopic.questions, activeTopic.title);
-      }
-    }
-  };
-
-  if (!activeTopic) {
-    return (
-      <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
-        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
-          <Typography variant="h2" bold style={{ marginBottom: 12 }}>Topic not found</Typography>
-          <TouchableOpacity
-            onPress={onBack}
-            style={{
-              paddingHorizontal: 20,
-              paddingVertical: 10,
-              borderRadius: 8,
-              backgroundColor: theme.primary,
-            }}
-          >
-            <Typography variant="body" bold color="#FFFFFF">Go Back</Typography>
-          </TouchableOpacity>
-        </View>
-      </SafeAreaView>
-    );
-  }
-
-  // Mock list of glance topics matching mockup 3
-  const glanceTopics = [
-    'Cerebral Cortex',
-    'Cranial Nerves',
-    'Spinal Cord Tracts',
-    'Brainstem Anatomy',
-    'Basal Ganglia',
-    'Thalamus and Hypothalamus',
-    'Visual and Auditory Pathways',
-  ];
-
-  return (
-    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
-      <StatusBar barStyle="dark-content" />
-
-      {/* Header */}
-      {!hideHeader && (
-        <View style={styles.header}>
-          <TouchableOpacity onPress={onBack} style={styles.backButton}>
-            <Icon name="arrow-left" size={20} color={theme.textPrimary} />
-          </TouchableOpacity>
-          <Typography variant="h2" bold style={styles.headerTitle}>
-            QBank
-          </Typography>
-          <TouchableOpacity style={styles.shareButton}>
-            <Icon name="share" size={20} color={theme.textPrimary} />
-          </TouchableOpacity>
-        </View>
-      )}
-
-      <View style={styles.container}>
-        <View style={styles.content}>
-          
-          {/* Section Category Title */}
-          <Typography variant="h1" bold color={theme.textPrimary} style={styles.categoryTitle}>
-            {activeTopic.category || 'Neuro Anatomy'}
-          </Typography>
-
-          {/* Main Info Box */}
-          <Card bordered style={styles.infoCard}>
-            <View style={styles.topicHeaderRow}>
-              {/* Left Circle Icon */}
-              <View style={[styles.iconCircle, { backgroundColor: 'rgba(59, 130, 246, 0.1)' }]}>
-                <Icon name="file-text" size={20} color="#3B82F6" />
-              </View>
-              {/* Right details */}
-              <View style={styles.topicHeaderDetails}>
-                <Typography variant="h2" bold color={theme.textPrimary} style={styles.topicMainTitle}>
-                  {activeTopic.title}
-                </Typography>
-                <Typography variant="caption" color={theme.textSecondary}>
-                  {activeTopic.totalQuestions} Questions
-                </Typography>
-              </View>
-            </View>
-
-            {/* Launch Button inside the card box */}
-            <Button
-              title="Start QBank"
-              onPress={handleStart}
-              variant="primary"
-              style={[styles.startButton, { backgroundColor: theme.primary }]}
-              disabled={!activeTopic.questions || activeTopic.questions.length === 0}
-            />
-          </Card>
-
-          {/* Glance Topics list */}
-          <View style={styles.glanceSection}>
-            <Typography variant="h2" bold color={theme.textPrimary} style={styles.glanceTitle}>
-              Topics at a Glance
-            </Typography>
-            <Typography variant="body" color={theme.textSecondary} style={styles.glanceSub}>
-              It's recommended that you thoroughly study these topics prior to attempting the QBank.
-            </Typography>
-
-            <View style={styles.bulletList}>
-              {glanceTopics.map((item, idx) => (
-                <View key={idx} style={styles.bulletRow}>
-                  <View style={[styles.bulletDot, { backgroundColor: theme.primary }]} />
-                  <Typography variant="body" color={theme.textPrimary} style={styles.bulletText}>
-                    {item}
-                  </Typography>
-                </View>
-              ))}
-            </View>
-          </View>
-
-        </View>
-      </View>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-  },
-  backButton: {
-    padding: 6,
-  },
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: '700',
-  },
-  shareButton: {
-    padding: 6,
-  },
-  container: {
-    flex: 1,
-  },
-  content: {
-    flex: 1,
-    paddingHorizontal: 16,
-    paddingTop: 12,
-  },
-  categoryTitle: {
-    fontSize: 22,
-    marginBottom: 16,
-  },
-  infoCard: {
-    padding: 16,
-    borderRadius: 16,
-    backgroundColor: '#FFFFFF',
-    borderWidth: 1,
-    borderColor: '#E2E8F0',
-  },
-  topicHeaderRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 16,
-  },
-  iconCircle: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 12,
-  },
-  topicHeaderDetails: {
-    flex: 1,
-  },
-  topicMainTitle: {
-    fontSize: 15,
-    lineHeight: 19,
-    marginBottom: 2,
-  },
-  startButton: {
-    width: '100%',
-    height: 46,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 10,
-  },
-  glanceSection: {
-    marginTop: 24,
-  },
-  glanceTitle: {
-    fontSize: 16,
-    marginBottom: 6,
-  },
-  glanceSub: {
-    fontSize: 13,
-    lineHeight: 18,
-    marginBottom: 16,
-  },
-  bulletList: {
-    marginTop: 4,
-  },
-  bulletRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-  bulletDot: {
-    width: 6,
-    height: 6,
-    borderRadius: 3,
-    marginRight: 12,
-  },
-  bulletText: {
-    fontSize: 14,
-  },
-});