react-native-elearn-ui 0.1.0

package/src/screens/QuestionScreen.tsx

@@ -0,0 +1,402 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  SafeAreaView,
+  StatusBar,
+  Image,
+} from 'react-native';
+import type { Question, QuizResults } from '../types';
+import { useElearnConfig } from '../context/ElearnConfigContext';
+import { useTheme } from '../context/ThemeContext';
+import { Typography, Card, Button, Icon, ProgressBar } from '../components';
+
+interface QuestionScreenProps {
+  quizId: string;
+  questions: Question[];
+  title: string;
+  onClose: () => void;
+}
+
+export const QuestionScreen: React.FC<QuestionScreenProps> = ({
+  quizId,
+  questions,
+  title,
+  onClose,
+}) => {
+  const { callbacks, getString } = useElearnConfig();
+  const theme = useTheme();
+
+  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 [seconds, setSeconds] = useState(0);
+
+  // Timer effect
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setSeconds((prev) => prev + 1);
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  if (!questions || questions.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 = questions[currentIndex]!;
+  const optionPrefixes = ['A', 'B', 'C', 'D', 'E', 'F'];
+
+  const formatTime = (totalSeconds: number) => {
+    const mins = Math.floor(totalSeconds / 60);
+    const secs = totalSeconds % 60;
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  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 < questions.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 = questions.length - correctCount;
+      const accuracy = Math.round((correctCount / questions.length) * 100);
+
+      const results: QuizResults = {
+        quizId,
+        totalQuestions: questions.length,
+        correctCount,
+        wrongCount,
+        skippedCount: 0,
+        accuracy,
+        timeSpentSeconds: totalTimeSeconds,
+        userAnswers,
+      };
+
+      callbacks.onFinishQuiz?.(quizId, results);
+    }
+  };
+
+  const progress = (currentIndex + 1) / questions.length;
+
+  return (
+    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
+      <StatusBar barStyle="dark-content" />
+
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+          <Icon name="x-circle" size={24} color={theme.textSecondary} />
+        </TouchableOpacity>
+        
+        <View style={styles.headerCenter}>
+          <Typography variant="h3" bold numberOfLines={1}>
+            {title}
+          </Typography>
+        </View>
+
+        <View style={styles.timerRow}>
+          <Icon name="clock" size={16} color={theme.textSecondary} />
+          <Typography variant="caption" bold color={theme.textSecondary} style={styles.timerText}>
+            {formatTime(seconds)}
+          </Typography>
+        </View>
+      </View>
+
+      {/* Progress Bar */}
+      <ProgressBar progress={progress} height={4} style={styles.progressTracker} />
+
+      <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+        
+        {/* Question Info */}
+        <View style={styles.questionMeta}>
+          <Typography variant="caption" color={theme.primary} bold>
+            {getString('questionLabel').toUpperCase()} {currentIndex + 1} OF {questions.length}
+          </Typography>
+        </View>
+
+        {/* Question Text */}
+        <Typography variant="h2" bold style={styles.questionText}>
+          {currentQuestion.text}
+        </Typography>
+
+        {/* Optional Diagram Image */}
+        {currentQuestion.imageUrl && (
+          <Image
+            source={{ uri: currentQuestion.imageUrl }}
+            style={styles.questionImage}
+            resizeMode="contain"
+          />
+        )}
+
+        {/* Options List */}
+        <View style={styles.optionsList}>
+          {currentQuestion.options.map((option, idx) => {
+            const isSelected = selectedOption === idx;
+            const isCorrectAnswer = idx === currentQuestion.correctOptionIndex;
+            
+            let optionBg = theme.cardBackground;
+            let optionBorder = theme.border;
+            let showFeedbackIcon: 'check' | 'cross' | null = null;
+
+            if (isAnswered) {
+              if (isCorrectAnswer) {
+                // Highlight correct answer in green
+                optionBg = 'rgba(16, 185, 129, 0.08)';
+                optionBorder = theme.success;
+                showFeedbackIcon = 'check';
+              } else if (isSelected) {
+                // Highlight selected incorrect answer in red
+                optionBg = 'rgba(239, 68, 68, 0.08)';
+                optionBorder = theme.danger;
+                showFeedbackIcon = 'cross';
+              }
+            } else if (isSelected) {
+              // Active highlight before submission
+              optionBg = theme.secondary;
+              optionBorder = 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}>
+                  <View
+                    style={[
+                      styles.prefixCircle,
+                      {
+                        backgroundColor: isSelected ? theme.primary : theme.secondary,
+                      },
+                      isAnswered && isCorrectAnswer && { backgroundColor: theme.success },
+                      isAnswered && isSelected && !isCorrectAnswer && { backgroundColor: theme.danger },
+                    ]}
+                  >
+                    <Typography
+                      variant="caption"
+                      bold
+                      color={
+                        isSelected || (isAnswered && isCorrectAnswer)
+                          ? theme.textInverse
+                          : theme.primary
+                      }
+                    >
+                      {optionPrefixes[idx] || idx + 1}
+                    </Typography>
+                  </View>
+                  
+                  <Typography
+                    variant="body"
+                    color={theme.textPrimary}
+                    style={styles.optionText}
+                  >
+                    {option}
+                  </Typography>
+
+                  {isAnswered && showFeedbackIcon && (
+                    <View style={styles.feedbackIcon}>
+                      <Icon
+                        name={showFeedbackIcon === 'check' ? 'check-circle' : 'x-circle'}
+                        size={20}
+                        color={showFeedbackIcon === 'check' ? theme.success : theme.danger}
+                      />
+                    </View>
+                  )}
+                </View>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+
+        {/* Explanation Card (Appears after answer selection) */}
+        {isAnswered && (
+          <Card bordered style={styles.explanationCard}>
+            <View style={styles.explanationHeader}>
+              <Icon name="info" size={20} color={theme.primary} />
+              <Typography variant="h3" bold color={theme.primary} style={styles.explanationTitle}>
+                {getString('explanationLabel')}
+              </Typography>
+            </View>
+            <Typography variant="body" color={theme.textPrimary} style={styles.explanationBody}>
+              {currentQuestion.explanation}
+            </Typography>
+          </Card>
+        )}
+
+      </ScrollView>
+
+      {/* Next/Submit Button Panel */}
+      {isAnswered && (
+        <View style={[styles.footer, { backgroundColor: theme.cardBackground, borderTopColor: theme.border }]}>
+          <Button
+            title={
+              currentIndex === questions.length - 1
+                ? getString('submitButtonLabel')
+                : getString('nextButtonLabel')
+            }
+            onPress={handleNext}
+            variant="primary"
+            style={styles.nextButton}
+          />
+        </View>
+      )}
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  closeButton: {
+    padding: 4,
+  },
+  headerCenter: {
+    flex: 1,
+    alignItems: 'center',
+    marginHorizontal: 12,
+  },
+  timerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 12,
+    backgroundColor: '#F1F5F9',
+  },
+  timerText: {
+    marginLeft: 6,
+  },
+  progressTracker: {
+    borderRadius: 0,
+  },
+  scrollContent: {
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    paddingBottom: 40,
+  },
+  questionMeta: {
+    marginBottom: 8,
+  },
+  questionText: {
+    fontSize: 18,
+    lineHeight: 24,
+    marginBottom: 16,
+  },
+  questionImage: {
+    width: '100%',
+    height: 180,
+    borderRadius: 12,
+    marginBottom: 20,
+    backgroundColor: '#F8FAFC',
+  },
+  optionsList: {
+    marginBottom: 20,
+  },
+  optionCard: {
+    borderWidth: 1.5,
+    borderRadius: 14,
+    padding: 14,
+    marginBottom: 12,
+  },
+  optionRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  prefixCircle: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
+  },
+  optionText: {
+    flex: 1,
+    lineHeight: 20,
+  },
+  feedbackIcon: {
+    marginLeft: 8,
+  },
+  explanationCard: {
+    padding: 20,
+    borderRadius: 16,
+    marginTop: 12,
+    borderWidth: 1,
+    borderStyle: 'dashed',
+  },
+  explanationHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  explanationTitle: {
+    marginLeft: 8,
+  },
+  explanationBody: {
+    lineHeight: 20,
+  },
+  footer: {
+    paddingHorizontal: 20,
+    paddingVertical: 14,
+    borderTopWidth: 1,
+  },
+  nextButton: {
+    width: '100%',
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 24,
+  },
+  errorButton: {
+    marginTop: 16,
+  },
+});

package/src/screens/QuizStartScreen.tsx

@@ -0,0 +1,215 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  SafeAreaView,
+  StatusBar,
+} from 'react-native';
+import type { Topic, Course } from '../types';
+import { useElearnConfig } from '../context/ElearnConfigContext';
+import { useTheme } from '../context/ThemeContext';
+import { Typography, Card, Button, Icon } from '../components';
+
+interface QuizStartScreenProps {
+  course: Course;
+  topic: Topic;
+  onBack: () => void;
+}
+
+export const QuizStartScreen: React.FC<QuizStartScreenProps> = ({
+  course,
+  topic,
+  onBack,
+}) => {
+  const { callbacks, getString } = useElearnConfig();
+  const theme = useTheme();
+
+  const handleStart = () => {
+    if (callbacks.onStartQuiz && topic.questions) {
+      callbacks.onStartQuiz(topic.id, topic.questions, topic.title);
+    }
+  };
+
+  const infoItems = [
+    'Immediate explanation display',
+    'Interactive choice evaluation',
+    'Self-paced learning structure',
+    'Detailed performance scorecard',
+  ];
+
+  return (
+    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
+      <StatusBar barStyle="dark-content" />
+
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity
+          onPress={onBack}
+          style={[styles.backButton, { borderColor: theme.border }]}
+        >
+          <Icon name="arrow-left" size={20} color={theme.textPrimary} />
+        </TouchableOpacity>
+        <Typography variant="h3" bold style={styles.headerTitle} numberOfLines={1}>
+          {course.title}
+        </Typography>
+        <View style={styles.headerRightPlaceholder} />
+      </View>
+
+      <View style={styles.container}>
+        <View style={styles.content}>
+          
+          {/* Main Info Card */}
+          <Card bordered style={styles.mainCard}>
+            <View style={[styles.badge, { backgroundColor: theme.secondary }]}>
+              <Typography variant="caption" color={theme.primary} bold>
+                {course.title.toUpperCase()}
+              </Typography>
+            </View>
+            <Typography variant="h1" bold style={styles.title}>
+              {topic.title}
+            </Typography>
+            <Typography variant="body" color={theme.textSecondary} style={styles.desc}>
+              Practice questions to master this topic. Dynamic evaluation will track your correctness and accuracy instantly.
+            </Typography>
+            
+            <View style={styles.questionsStatsRow}>
+              <Icon name="book-open" size={20} color={theme.primary} />
+              <Typography variant="body" bold style={styles.statsText}>
+                {topic.totalQuestions} Questions Available
+              </Typography>
+            </View>
+          </Card>
+
+          {/* Guidelines / Info Section */}
+          <View style={styles.infoSection}>
+            <Typography variant="h2" bold style={styles.infoTitle}>
+              {getString('topicsAndItemsLabel')}
+            </Typography>
+            
+            <View style={styles.guidelinesList}>
+              {infoItems.map((item, idx) => (
+                <View key={idx} style={styles.infoItemRow}>
+                  <View style={styles.bulletContainer}>
+                    <Icon name="check-circle" size={18} color={theme.primary} />
+                  </View>
+                  <Typography variant="body" color={theme.textSecondary} style={styles.infoItemText}>
+                    {item}
+                  </Typography>
+                </View>
+              ))}
+            </View>
+          </View>
+          
+        </View>
+
+        {/* Footer Launch Button */}
+        <View style={[styles.footer, { backgroundColor: theme.cardBackground, borderTopColor: theme.border }]}>
+          <Button
+            title={getString('startQuizButton')}
+            onPress={handleStart}
+            variant="primary"
+            style={styles.startButton}
+            disabled={!topic.questions || topic.questions.length === 0}
+          />
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+  },
+  backButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    borderWidth: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  headerTitle: {
+    flex: 1,
+    textAlign: 'center',
+    marginHorizontal: 12,
+  },
+  headerRightPlaceholder: {
+    width: 40,
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 20,
+    paddingTop: 12,
+  },
+  mainCard: {
+    padding: 24,
+    borderRadius: 20,
+  },
+  badge: {
+    alignSelf: 'flex-start',
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 8,
+    marginBottom: 12,
+  },
+  title: {
+    fontSize: 22,
+    lineHeight: 28,
+    marginBottom: 8,
+  },
+  desc: {
+    lineHeight: 20,
+    marginBottom: 16,
+  },
+  questionsStatsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  statsText: {
+    marginLeft: 8,
+  },
+  infoSection: {
+    marginTop: 28,
+  },
+  infoTitle: {
+    marginBottom: 16,
+  },
+  guidelinesList: {
+    marginTop: 4,
+  },
+  infoItemRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginBottom: 14,
+  },
+  bulletContainer: {
+    marginTop: 1,
+  },
+  infoItemText: {
+    marginLeft: 12,
+    flex: 1,
+    lineHeight: 18,
+  },
+  footer: {
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    borderTopWidth: 1,
+  },
+  startButton: {
+    width: '100%',
+  },
+});