react-native-elearn-ui 0.1.11 → 0.1.13

package/src/screens/ResultScreen.tsx

@@ -1,618 +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 { QuizResults, Question } from '../types';
-import { useElearnConfig } from '../context/ElearnConfigContext';
-import { useTheme } from '../context/ThemeContext';
-import { Typography, Card, CircularProgress, Button, Icon } from '../components';
-
-interface ResultScreenProps {
-  results: QuizResults;
-  questions?: Question[];
-  topicId?: string;
-  onClose: () => void;
-  onReviewAnswers?: () => void;
-  hideHeader?: boolean;
-}
-
-export const ResultScreen: React.FC<ResultScreenProps> = ({
-  results,
-  questions,
-  topicId,
-  onClose,
-  hideHeader = false,
-}) => {
-  const { config, getString } = useElearnConfig();
-  const theme = useTheme();
-
-  const activeTopic = topicId ? config.courses?.flatMap((c) => c.topics).find((t) => t.id === topicId) : undefined;
-  const activeQuestions = questions || activeTopic?.questions || [];
-
-  // Selected question index for individual review
-  const [selectedReviewIndex, setSelectedReviewIndex] = useState<number | null>(null);
-
-  const optionPrefixes = ['A', 'B', 'C', 'D', 'E'];
-
-  const formatTime = (totalSeconds: number) => {
-    const mins = Math.floor(totalSeconds / 60);
-    const secs = totalSeconds % 60;
-    if (mins > 0) {
-      return `${mins}m ${secs}s`;
-    }
-    return `${secs}s`;
-  };
-
-  const handlePrevReview = () => {
-    if (selectedReviewIndex !== null && selectedReviewIndex > 0) {
-      setSelectedReviewIndex(selectedReviewIndex - 1);
-    }
-  };
-
-  const handleNextReview = () => {
-    if (selectedReviewIndex !== null && selectedReviewIndex < activeQuestions.length - 1) {
-      setSelectedReviewIndex(selectedReviewIndex + 1);
-    }
-  };
-
-  // --- Sub-View: Individual Question Detail Review ---
-  if (selectedReviewIndex !== null) {
-    const currentReviewQuestion = activeQuestions[selectedReviewIndex]!;
-    const userAnswerIdx = results.userAnswers[currentReviewQuestion.id];
-    // Removed unused isCorrect variable
-
-    return (
-      <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
-        <StatusBar barStyle="dark-content" />
-
-        {/* Review Header */}
-        {!hideHeader && (
-          <View style={styles.header}>
-            <TouchableOpacity onPress={() => setSelectedReviewIndex(null)} style={styles.backButton}>
-              <Icon name="arrow-left" size={20} color={theme.textPrimary} />
-            </TouchableOpacity>
-            
-            <Typography variant="h2" bold style={styles.headerTitle}>
-              QBank Analysis
-            </Typography>
-
-            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-              <Icon name="x-circle" size={24} color={theme.textSecondary} />
-            </TouchableOpacity>
-          </View>
-        )}
-
-        <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
-          
-          {/* Question Index Meta */}
-          <View style={styles.metaRow}>
-            <Typography variant="caption" bold color={theme.textSecondary} style={styles.questionNumLabel}>
-              QUESTION {selectedReviewIndex + 1}/{activeQuestions.length}
-            </Typography>
-            <View style={styles.metaActions}>
-              <TouchableOpacity style={styles.metaActionBtn}>
-                <Icon name="bookmark" size={18} color={theme.textSecondary} />
-              </TouchableOpacity>
-            </View>
-          </View>
-
-          {/* Question text */}
-          <Typography variant="h2" bold color={theme.textPrimary} style={styles.questionText}>
-            {currentReviewQuestion.text}
-          </Typography>
-
-          {/* Optional microscope image */}
-          {currentReviewQuestion.imageUrl && (
-            <Image
-              source={{ uri: currentReviewQuestion.imageUrl }}
-              style={styles.questionImage}
-              resizeMode="cover"
-            />
-          )}
-
-          {/* Options list showing correctness evaluations */}
-          <View style={styles.optionsList}>
-            {currentReviewQuestion.options.map((option, idx) => {
-              const isUserSelection = userAnswerIdx === idx;
-              const isCorrectAnswer = idx === currentReviewQuestion.correctOptionIndex;
-              
-              let optionBg = '#FFFFFF';
-              let optionBorder = theme.border;
-              let labelColor = theme.textPrimary;
-              let prefixColor = theme.textSecondary;
-              let statText = '';
-              
-              if (isCorrectAnswer) {
-                optionBg = '#E6F4F1'; // Tinted green bg
-                optionBorder = '#10B981'; // Green border
-                labelColor = '#065F46';
-                prefixColor = '#065F46';
-                statText = isUserSelection ? 'Your Correct Answer' : 'Correct Answer';
-              } else if (isUserSelection) {
-                optionBg = '#FEF2F2'; // Tinted red bg
-                optionBorder = '#EF4444'; // Red border
-                labelColor = '#991B1B';
-                prefixColor = '#991B1B';
-                statText = 'Your Incorrect Answer';
-              }
-
-              return (
-                <View
-                  key={idx}
-                  style={[
-                    styles.optionCard,
-                    {
-                      backgroundColor: optionBg,
-                      borderColor: optionBorder,
-                    },
-                  ]}
-                >
-                  <View style={styles.optionRow}>
-                    <Typography variant="body" bold color={prefixColor} style={styles.optionPrefix}>
-                      {optionPrefixes[idx] || idx + 1}
-                    </Typography>
-                    <Typography variant="body" color={labelColor} style={styles.optionText}>
-                      {option}
-                    </Typography>
-                  </View>
-
-                  {statText !== '' && (
-                    <View style={styles.statBadgeRow}>
-                      <Typography variant="caption" bold color={isCorrectAnswer ? '#10B981' : '#EF4444'}>
-                        {statText}
-                      </Typography>
-                    </View>
-                  )}
-                </View>
-              );
-            })}
-          </View>
-
-          {/* Explanation info */}
-          <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}>
-              {currentReviewQuestion.explanation}
-            </Typography>
-            
-            <Typography variant="h3" bold color={theme.textSecondary} style={styles.rxdxId}>
-              RXDX ID: R23082
-            </Typography>
-          </View>
-
-        </ScrollView>
-
-        {/* Previous and Next Navigation Footer */}
-        <View style={styles.footerRow}>
-          {/* Previous Button */}
-          <TouchableOpacity
-            onPress={handlePrevReview}
-            disabled={selectedReviewIndex === 0}
-            style={[styles.footerActionBtn, selectedReviewIndex === 0 && { opacity: 0.4 }]}
-          >
-            <Typography variant="body" bold color={theme.textPrimary}>
-              Previous
-            </Typography>
-          </TouchableOpacity>
-
-          {/* Back to summary */}
-          <TouchableOpacity
-            onPress={() => setSelectedReviewIndex(null)}
-            style={styles.backToListBtn}
-          >
-            <Typography variant="body" bold color={theme.primary}>
-              Back to Summary
-            </Typography>
-          </TouchableOpacity>
-
-          {/* Next Button */}
-          <TouchableOpacity
-            onPress={handleNextReview}
-            disabled={selectedReviewIndex === activeQuestions.length - 1}
-            style={[
-              styles.nextActionBtn,
-              { backgroundColor: theme.primary },
-              selectedReviewIndex === activeQuestions.length - 1 && { opacity: 0.4 }
-            ]}
-          >
-            <Typography variant="body" bold color="#FFFFFF">
-              Next
-            </Typography>
-          </TouchableOpacity>
-        </View>
-      </SafeAreaView>
-    );
-  }
-
-  // --- Main View: Quiz Performance Scorecard & Summary List ---
-  return (
-    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
-      <StatusBar barStyle="dark-content" />
-
-      {/* Header */}
-      {!hideHeader && (
-        <View style={styles.header}>
-          <View style={styles.headerLeftPlaceholder} />
-          <Typography variant="h2" bold style={styles.headerTitleMain}>
-            QBank Analysis
-          </Typography>
-          <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-            <Icon name="x-circle" size={24} color={theme.textSecondary} />
-          </TouchableOpacity>
-        </View>
-      )}
-
-      <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
-        
-        {/* Scorecard Summary */}
-        <Card bordered style={styles.summaryCard}>
-          <View style={styles.summaryRow}>
-            <View style={styles.summaryLeft}>
-              <Typography variant="h1" bold color={theme.textPrimary}>
-                {getString('scorecardTitle') || 'Quiz Analysis'}
-              </Typography>
-              <Typography variant="body" color={theme.textSecondary} style={styles.summarySubtitle}>
-                {getString('resultsSubtitle') || 'Here is your QBank performance summary!'}
-              </Typography>
-              
-              <View style={styles.statsContainer}>
-                <View style={styles.statBox}>
-                  <Typography variant="caption" color={theme.textSecondary}>
-                    {getString('correctAnswersCountLabel') || 'Correct Answers'}
-                  </Typography>
-                  <Typography variant="h2" bold color={theme.success} style={styles.statValue}>
-                    {results.correctCount} / {results.totalQuestions}
-                  </Typography>
-                </View>
-                
-                <View style={styles.statBox}>
-                  <Typography variant="caption" color={theme.textSecondary}>
-                    {getString('timeSpentLabel') || 'Time Spent'}
-                  </Typography>
-                  <Typography variant="h2" bold color={theme.textPrimary} style={styles.statValue}>
-                    {formatTime(results.timeSpentSeconds)}
-                  </Typography>
-                </View>
-              </View>
-            </View>
-
-            <View style={styles.summaryRight}>
-              <CircularProgress
-                progress={results.accuracy / 100}
-                size={84}
-                strokeWidth={8}
-                color={results.accuracy >= 60 ? theme.success : theme.warning}
-                backgroundColor={theme.secondary}
-                textStyle={{ fontSize: 16 }}
-              />
-              <Typography variant="caption" color={theme.textSecondary} style={styles.accuracyText}>
-                {getString('accuracyLabel') || 'Accuracy'}
-              </Typography>
-            </View>
-          </View>
-        </Card>
-
-        {/* Detailed Question Review List */}
-        <View style={styles.sectionHeader}>
-          <Typography variant="h2" bold>
-            Questions Summary
-          </Typography>
-        </View>
-
-        <View style={styles.reviewList}>
-          {activeQuestions.map((question, idx) => {
-            const userAnswerIdx = results.userAnswers[question.id];
-            const isCorrect = userAnswerIdx === question.correctOptionIndex;
-
-            return (
-              <TouchableOpacity
-                key={question.id}
-                activeOpacity={0.8}
-                onPress={() => setSelectedReviewIndex(idx)}
-              >
-                <Card bordered style={styles.reviewCard}>
-                  <View style={styles.reviewCardHeader}>
-                    <View style={[styles.questionNumBadge, { backgroundColor: theme.secondary }]}>
-                      <Typography variant="caption" bold color={theme.primary}>
-                        Q{idx + 1}
-                      </Typography>
-                    </View>
-                    
-                    <View style={styles.statusBadge}>
-                      <Icon
-                        name={isCorrect ? 'check-circle' : 'x-circle'}
-                        size={18}
-                        color={isCorrect ? theme.success : theme.danger}
-                      />
-                      <Typography
-                        variant="caption"
-                        bold
-                        color={isCorrect ? theme.success : theme.danger}
-                        style={styles.statusBadgeText}
-                      >
-                        {isCorrect ? 'Correct' : 'Incorrect'}
-                      </Typography>
-                    </View>
-                  </View>
-
-                  <Typography variant="body" bold style={styles.reviewQuestionText}>
-                    {question.text}
-                  </Typography>
-
-                  <View style={styles.userSelectionContainer}>
-                    <Typography variant="caption" color={theme.textSecondary}>
-                      Your answer:{' '}
-                      <Typography variant="caption" bold color={isCorrect ? theme.success : theme.danger}>
-                        {userAnswerIdx !== undefined
-                          ? `Option ${optionPrefixes[userAnswerIdx] || userAnswerIdx + 1}`
-                          : 'Skipped'}
-                      </Typography>
-                    </Typography>
-                    
-                    {!isCorrect && (
-                      <Typography variant="caption" color={theme.textSecondary} style={styles.correctAnswerText}>
-                        Correct answer:{' '}
-                        <Typography variant="caption" bold color={theme.success}>
-                          Option {optionPrefixes[question.correctOptionIndex] || question.correctOptionIndex + 1}
-                        </Typography>
-                      </Typography>
-                    )}
-                  </View>
-                </Card>
-              </TouchableOpacity>
-            );
-          })}
-        </View>
-
-      </ScrollView>
-
-      {/* Footer Controls */}
-      <View style={[styles.footer, { backgroundColor: theme.cardBackground, borderTopColor: theme.border }]}>
-        <Button
-          title="Back to Dashboard"
-          onPress={onClose}
-          variant="primary"
-          style={styles.homeBtn}
-        />
-      </View>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-  },
-  backButton: {
-    padding: 6,
-  },
-  closeButton: {
-    padding: 6,
-  },
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: '700',
-  },
-  headerTitleMain: {
-    fontSize: 18,
-    fontWeight: '700',
-  },
-  headerLeftPlaceholder: {
-    width: 36,
-  },
-  scrollContent: {
-    paddingHorizontal: 16,
-    paddingTop: 12,
-    paddingBottom: 40,
-  },
-  summaryCard: {
-    padding: 20,
-    borderRadius: 20,
-  },
-  summaryRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  summaryLeft: {
-    flex: 1,
-    paddingRight: 16,
-  },
-  summarySubtitle: {
-    marginTop: 4,
-    marginBottom: 16,
-    fontSize: 12,
-  },
-  statsContainer: {
-    flexDirection: 'row',
-  },
-  statBox: {
-    marginRight: 24,
-  },
-  statValue: {
-    fontSize: 18,
-    marginTop: 2,
-  },
-  summaryRight: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  accuracyText: {
-    marginTop: 8,
-    fontWeight: '600',
-  },
-  sectionHeader: {
-    marginTop: 24,
-    marginBottom: 12,
-  },
-  reviewList: {
-    marginTop: 4,
-  },
-  reviewCard: {
-    padding: 16,
-    marginBottom: 12,
-    borderRadius: 16,
-  },
-  reviewCardHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  questionNumBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 8,
-  },
-  statusBadge: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  statusBadgeText: {
-    marginLeft: 6,
-  },
-  reviewQuestionText: {
-    fontSize: 14,
-    lineHeight: 20,
-    marginBottom: 10,
-  },
-  userSelectionContainer: {
-    backgroundColor: '#F8FAFC',
-    padding: 10,
-    borderRadius: 8,
-  },
-  correctAnswerText: {
-    marginTop: 4,
-  },
-  footer: {
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    borderTopWidth: 1,
-    backgroundColor: '#FFFFFF',
-  },
-  homeBtn: {
-    width: '100%',
-    height: 48,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 24, // Matches "Back to Dashboard" rounded pill button
-  },
-  // --- Detailed Review Screen Styles ---
-  metaRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-  questionNumLabel: {
-    fontSize: 12,
-    letterSpacing: 0.8,
-  },
-  metaActions: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  metaActionBtn: {
-    padding: 6,
-  },
-  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: {
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-  },
-  backToListBtn: {
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-  },
-  nextActionBtn: {
-    paddingHorizontal: 24,
-    paddingVertical: 10,
-    borderRadius: 8,
-    minWidth: 80,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});