react-native-elearn-ui 0.1.5 → 0.1.7

package/src/screens/QuestionScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import {
   View,
   ScrollView,
@@ -11,7 +11,7 @@ import {
 import type { Question, QuizResults } from '../types';
 import { useElearnConfig } from '../context/ElearnConfigContext';
 import { useTheme } from '../context/ThemeContext';
-import { Typography, Card, Button, Icon, ProgressBar } from '../components';
+import { Typography, Button, Icon } from '../components';
 
 interface QuestionScreenProps {
   quizId: string;
@@ -24,11 +24,10 @@ interface QuestionScreenProps {
 export const QuestionScreen: React.FC<QuestionScreenProps> = ({
   quizId,
   questions,
-  title,
   onClose,
   hideHeader = false,
 }) => {
-  const { callbacks, getString } = useElearnConfig();
+  const { callbacks } = useElearnConfig();
   const theme = useTheme();
 
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -37,15 +36,7 @@ export const QuestionScreen: React.FC<QuestionScreenProps> = ({
   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);
-  }, []);
+  const [isPaused, setIsPaused] = useState(false);
 
   if (!questions || questions.length === 0) {
     return (
@@ -61,12 +52,6 @@ export const QuestionScreen: React.FC<QuestionScreenProps> = ({
   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
     
@@ -108,8 +93,6 @@ export const QuestionScreen: React.FC<QuestionScreenProps> = ({
     }
   };
 
-  const progress = (currentIndex + 1) / questions.length;
-
   return (
     <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
       <StatusBar barStyle="dark-content" />
@@ -117,77 +100,82 @@ export const QuestionScreen: React.FC<QuestionScreenProps> = ({
       {/* Header */}
       {!hideHeader && (
         <View style={styles.header}>
-          <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-            <Icon name="x-circle" size={24} color={theme.textSecondary} />
+          <TouchableOpacity onPress={onClose} style={styles.backButton}>
+            <Icon name="arrow-left" size={20} color={theme.textPrimary} />
           </TouchableOpacity>
           
-          <View style={styles.headerCenter}>
-            <Typography variant="h3" bold numberOfLines={1}>
-              {title}
-            </Typography>
-          </View>
+          <Typography variant="h2" bold style={styles.headerTitle}>
+            QBank
+          </Typography>
 
-          <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>
+          <TouchableOpacity style={styles.shareButton}>
+            <Icon name="share" size={20} color={theme.textPrimary} />
+          </TouchableOpacity>
         </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}
+        {/* Question Header & Pause/Bookmark Actions Row */}
+        <View style={styles.metaRow}>
+          <Typography variant="caption" bold color={theme.textSecondary} style={styles.questionNumLabel}>
+            QUESTION {currentIndex + 1}/{questions.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 style={styles.questionText}>
+        {/* Question text */}
+        <Typography variant="h2" bold color={theme.textPrimary} style={styles.questionText}>
           {currentQuestion.text}
         </Typography>
 
-        {/* Optional Diagram Image */}
+        {/* Neuron microscope image */}
         {currentQuestion.imageUrl && (
           <Image
             source={{ uri: currentQuestion.imageUrl }}
             style={styles.questionImage}
-            resizeMode="contain"
+            resizeMode="cover"
           />
         )}
 
-        {/* Options List */}
+        {/* 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 optionBg = '#FFFFFF';
             let optionBorder = theme.border;
-            let showFeedbackIcon: 'check' | 'cross' | null = null;
-
+            let labelColor = theme.textPrimary;
+            let prefixColor = theme.textSecondary;
+            let statText = '';
+            
             if (isAnswered) {
               if (isCorrectAnswer) {
-                // Highlight correct answer in green
-                optionBg = 'rgba(16, 185, 129, 0.08)';
-                optionBorder = theme.success;
-                showFeedbackIcon = 'check';
+                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) {
-                // Highlight selected incorrect answer in red
-                optionBg = 'rgba(239, 68, 68, 0.08)';
-                optionBorder = theme.danger;
-                showFeedbackIcon = 'cross';
+                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) {
-              // Active highlight before submission
               optionBg = theme.secondary;
               optionBorder = theme.primary;
+              labelColor = theme.primary;
+              prefixColor = theme.primary;
             }
 
             return (
@@ -205,47 +193,25 @@ export const QuestionScreen: React.FC<QuestionScreenProps> = ({
                 ]}
               >
                 <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>
+                  {/* Option letter label */}
+                  <Typography variant="body" bold color={prefixColor} style={styles.optionPrefix}>
+                    {optionPrefixes[idx] || idx + 1}
+                  </Typography>
                   
-                  <Typography
-                    variant="body"
-                    color={theme.textPrimary}
-                    style={styles.optionText}
-                  >
+                  {/* Option text */}
+                  <Typography variant="body" color={labelColor} 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>
+
+                {/* Option stats badge below option text */}
+                {isAnswered && statText !== '' && (
+                  <View style={styles.statBadgeRow}>
+                    <Typography variant="caption" bold color={isCorrectAnswer ? '#10B981' : '#EF4444'}>
+                      {statText}
+                    </Typography>
+                  </View>
+                )}
               </TouchableOpacity>
             );
           })}
@@ -253,34 +219,47 @@ export const QuestionScreen: React.FC<QuestionScreenProps> = ({
 
         {/* 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}>
+          <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>
-          </Card>
+            
+            <Typography variant="h3" bold color={theme.textSecondary} style={styles.rxdxId}>
+              RXDX ID: R23082
+            </Typography>
+          </View>
         )}
 
       </ScrollView>
 
-      {/* Next/Submit Button Panel */}
+      {/* Answered State Bottom Actions Bar */}
       {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 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>
@@ -298,101 +277,125 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 12,
   },
-  closeButton: {
-    padding: 4,
+  backButton: {
+    padding: 6,
   },
-  headerCenter: {
-    flex: 1,
-    alignItems: 'center',
-    marginHorizontal: 12,
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
+  shareButton: {
+    padding: 6,
+  },
+  scrollContent: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 32,
   },
-  timerRow: {
+  metaRow: {
     flexDirection: 'row',
+    justifyContent: 'space-between',
     alignItems: 'center',
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 12,
-    backgroundColor: '#F1F5F9',
-  },
-  timerText: {
-    marginLeft: 6,
+    marginBottom: 12,
   },
-  progressTracker: {
-    borderRadius: 0,
+  questionNumLabel: {
+    fontSize: 12,
+    letterSpacing: 0.8,
   },
-  scrollContent: {
-    paddingHorizontal: 20,
-    paddingTop: 16,
-    paddingBottom: 40,
+  metaActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
   },
-  questionMeta: {
-    marginBottom: 8,
+  metaActionBtn: {
+    padding: 6,
+    marginLeft: 10,
   },
   questionText: {
-    fontSize: 18,
-    lineHeight: 24,
-    marginBottom: 16,
+    fontSize: 16,
+    lineHeight: 22,
+    marginBottom: 14,
   },
   questionImage: {
     width: '100%',
     height: 180,
     borderRadius: 12,
-    marginBottom: 20,
+    marginBottom: 16,
     backgroundColor: '#F8FAFC',
   },
   optionsList: {
-    marginBottom: 20,
+    marginBottom: 12,
   },
   optionCard: {
-    borderWidth: 1.5,
-    borderRadius: 14,
-    padding: 14,
-    marginBottom: 12,
+    borderWidth: 1,
+    borderRadius: 10,
+    padding: 12,
+    marginBottom: 10,
   },
   optionRow: {
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'flex-start',
   },
-  prefixCircle: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 12,
+  optionPrefix: {
+    width: 24,
+    fontSize: 14,
+    fontWeight: '600',
   },
   optionText: {
     flex: 1,
-    lineHeight: 20,
-  },
-  feedbackIcon: {
-    marginLeft: 8,
+    fontSize: 14,
+    lineHeight: 18,
   },
-  explanationCard: {
-    padding: 20,
-    borderRadius: 16,
-    marginTop: 12,
-    borderWidth: 1,
-    borderStyle: 'dashed',
+  statBadgeRow: {
+    marginTop: 6,
+    paddingLeft: 24,
   },
-  explanationHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 10,
+  explanationSection: {
+    marginTop: 14,
+    paddingTop: 14,
+    borderTopWidth: 1,
+    borderTopColor: '#E2E8F0',
   },
   explanationTitle: {
-    marginLeft: 8,
+    fontSize: 15,
+    marginBottom: 6,
   },
   explanationBody: {
-    lineHeight: 20,
+    fontSize: 13,
+    lineHeight: 18,
+    marginBottom: 16,
   },
-  footer: {
-    paddingHorizontal: 20,
-    paddingVertical: 14,
+  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',
   },
-  nextButton: {
-    width: '100%',
+  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,