react-native-elearn-ui 0.1.5 → 0.1.7

package/src/screens/ResultScreen.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   View,
   ScrollView,
@@ -6,6 +6,7 @@ import {
   TouchableOpacity,
   SafeAreaView,
   StatusBar,
+  Image,
 } from 'react-native';
 import type { QuizResults, Question } from '../types';
 import { useElearnConfig } from '../context/ElearnConfigContext';
@@ -24,12 +25,16 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
   results,
   questions,
   onClose,
-  onReviewAnswers,
   hideHeader = false,
 }) => {
   const { getString } = useElearnConfig();
   const theme = useTheme();
 
+  // 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;
@@ -39,6 +44,190 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
     return `${secs}s`;
   };
 
+  const handlePrevReview = () => {
+    if (selectedReviewIndex !== null && selectedReviewIndex > 0) {
+      setSelectedReviewIndex(selectedReviewIndex - 1);
+    }
+  };
+
+  const handleNextReview = () => {
+    if (selectedReviewIndex !== null && selectedReviewIndex < questions.length - 1) {
+      setSelectedReviewIndex(selectedReviewIndex + 1);
+    }
+  };
+
+  // --- Sub-View: Individual Question Detail Review ---
+  if (selectedReviewIndex !== null) {
+    const currentReviewQuestion = questions[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}/{questions.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 === questions.length - 1}
+            style={[
+              styles.nextActionBtn,
+              { backgroundColor: theme.primary },
+              selectedReviewIndex === questions.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" />
@@ -47,8 +236,8 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
       {!hideHeader && (
         <View style={styles.header}>
           <View style={styles.headerLeftPlaceholder} />
-          <Typography variant="h2" bold>
-            {getString('resultsTitle')}
+          <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} />
@@ -63,27 +252,27 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
           <View style={styles.summaryRow}>
             <View style={styles.summaryLeft}>
               <Typography variant="h1" bold color={theme.textPrimary}>
-                {getString('scorecardTitle')}
+                {getString('scorecardTitle') || 'Quiz Analysis'}
               </Typography>
               <Typography variant="body" color={theme.textSecondary} style={styles.summarySubtitle}>
-                {getString('resultsSubtitle')}
+                {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')}
+                    {getString('correctAnswersCountLabel') || 'Correct Answers'}
                   </Typography>
-                  <Typography variant="h2" bold color={theme.success}>
+                  <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')}
+                    {getString('timeSpentLabel') || 'Time Spent'}
                   </Typography>
-                  <Typography variant="h2" bold color={theme.textPrimary}>
+                  <Typography variant="h2" bold color={theme.textPrimary} style={styles.statValue}>
                     {formatTime(results.timeSpentSeconds)}
                   </Typography>
                 </View>
@@ -100,7 +289,7 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
                 textStyle={{ fontSize: 16 }}
               />
               <Typography variant="caption" color={theme.textSecondary} style={styles.accuracyText}>
-                {getString('accuracyLabel')}
+                {getString('accuracyLabel') || 'Accuracy'}
               </Typography>
             </View>
           </View>
@@ -117,58 +306,63 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
           {questions.map((question, idx) => {
             const userAnswerIdx = results.userAnswers[question.id];
             const isCorrect = userAnswerIdx === question.correctOptionIndex;
-            const optionPrefixes = ['A', 'B', 'C', 'D', 'E'];
 
             return (
-              <Card key={question.id} 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>
+              <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>
-                </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 variant="body" bold style={styles.reviewQuestionText}>
+                    {question.text}
                   </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}
+
+                  <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>
-                  )}
-                </View>
-              </Card>
+                    
+                    {!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>
@@ -177,16 +371,8 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
 
       {/* Footer Controls */}
       <View style={[styles.footer, { backgroundColor: theme.cardBackground, borderTopColor: theme.border }]}>
-        {onReviewAnswers && (
-          <Button
-            title={getString('reviewAnswersButton')}
-            onPress={onReviewAnswers}
-            variant="outline"
-            style={styles.reviewBtn}
-          />
-        )}
         <Button
-          title={getString('goHomeButton')}
+          title="Back to Dashboard"
           onPress={onClose}
           variant="primary"
           style={styles.homeBtn}
@@ -204,17 +390,28 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingHorizontal: 20,
+    paddingHorizontal: 16,
     paddingVertical: 12,
   },
-  headerLeftPlaceholder: {
-    width: 40,
+  backButton: {
+    padding: 6,
   },
   closeButton: {
-    padding: 4,
+    padding: 6,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
+  headerTitleMain: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
+  headerLeftPlaceholder: {
+    width: 36,
   },
   scrollContent: {
-    paddingHorizontal: 20,
+    paddingHorizontal: 16,
     paddingTop: 12,
     paddingBottom: 40,
   },
@@ -234,6 +431,7 @@ const styles = StyleSheet.create({
   summarySubtitle: {
     marginTop: 4,
     marginBottom: 16,
+    fontSize: 12,
   },
   statsContainer: {
     flexDirection: 'row',
@@ -241,6 +439,10 @@ const styles = StyleSheet.create({
   statBox: {
     marginRight: 24,
   },
+  statValue: {
+    fontSize: 18,
+    marginTop: 2,
+  },
   summaryRight: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -250,7 +452,7 @@ const styles = StyleSheet.create({
     fontWeight: '600',
   },
   sectionHeader: {
-    marginTop: 28,
+    marginTop: 24,
     marginBottom: 12,
   },
   reviewList: {
@@ -259,6 +461,7 @@ const styles = StyleSheet.create({
   reviewCard: {
     padding: 16,
     marginBottom: 12,
+    borderRadius: 16,
   },
   reviewCardHeader: {
     flexDirection: 'row',
@@ -279,6 +482,7 @@ const styles = StyleSheet.create({
     marginLeft: 6,
   },
   reviewQuestionText: {
+    fontSize: 14,
     lineHeight: 20,
     marginBottom: 10,
   },
@@ -291,17 +495,119 @@ const styles = StyleSheet.create({
     marginTop: 4,
   },
   footer: {
-    paddingHorizontal: 20,
+    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,
   },
-  reviewBtn: {
-    flex: 1,
-    marginRight: 12,
+  questionNumLabel: {
+    fontSize: 12,
+    letterSpacing: 0.8,
   },
-  homeBtn: {
+  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',
   },
 });