react-native-elearn-ui 0.1.28 → 0.1.32

package/src/screens/qbank/QBankQuestionScreen.tsx

@@ -9,18 +9,16 @@ import {
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useTheme } from '../../context/ThemeContext';
 import { Typography, Icon, Button } from '../../components';
-import type { QBankQuestionParams, QBankOption } from '../../types';
+import type { QBankExamData, QBankExamOption } from '../../types';
 
 interface QBankQuestionScreenProps {
-  params: QBankQuestionParams;
-  initialTimeSeconds?: number;
-  onTimeUp?: () => void;
+  examData: QBankExamData;
+  onFinish?: (results: Record<string, string>) => void;
+  onQuestionAttempt?: (questionId: string, selectedOptionId: string) => void;
   onBack?: () => void;
-  onNext?: () => void;
-  onPrev?: () => void;
-  onPressOption?: (optionId: string) => void;
-  onPressReport?: () => void;
-  onPressUsers?: () => void;
+  onPressReport?: (questionId: string) => void;
+  onPressUsers?: (questionId: string) => void;
+  isProUser?: boolean;
 }
 
 const formatTime = (totalSeconds: number) => {
@@ -30,22 +28,30 @@ const formatTime = (totalSeconds: number) => {
 };
 
 export const QBankQuestionScreen: React.FC<QBankQuestionScreenProps> = ({
-  params,
-  initialTimeSeconds = 60,
-  onTimeUp,
+  examData,
+  onFinish,
+  onQuestionAttempt,
   onBack,
-  onNext,
-  onPrev,
-  onPressOption,
   onPressReport,
   onPressUsers,
+  isProUser = false,
 }) => {
   const theme = useTheme();
-  const [timeLeft, setTimeLeft] = useState(initialTimeSeconds);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [answers, setAnswers] = useState<Record<string, string>>({});
+  const [timeLeft, setTimeLeft] = useState(examData.timeLimitSeconds || 0);
+
+  const currentQuestion = examData.questions[currentIndex];
+  const totalQuestions = examData.questions.length;
+  const isAttempted = !!currentQuestion && !!answers[currentQuestion.id];
+  const selectedOptionId = currentQuestion ? answers[currentQuestion.id] : undefined;
+  const isLastQuestion = currentIndex === totalQuestions - 1;
 
   useEffect(() => {
+    if (!examData.timeLimitSeconds) return;
+
     if (timeLeft <= 0) {
-      onTimeUp?.();
+      onFinish?.(answers);
       return;
     }
 
@@ -54,42 +60,74 @@ export const QBankQuestionScreen: React.FC<QBankQuestionScreenProps> = ({
     }, 1000);
 
     return () => clearInterval(timer);
-  }, [timeLeft, onTimeUp]);
+  }, [timeLeft, examData.timeLimitSeconds, onFinish, answers]);
+
+  const handleOptionPress = (optionId: string) => {
+    if (!currentQuestion || isAttempted) return; // Prevent changing answer in Tutor mode
+
+    setAnswers((prev) => ({
+      ...prev,
+      [currentQuestion.id]: optionId,
+    }));
+    
+    onQuestionAttempt?.(currentQuestion.id, optionId);
+  };
+
+  const handleNextOrFinish = () => {
+    if (isLastQuestion) {
+      onFinish?.(answers);
+    } else {
+      setCurrentIndex((prev) => prev + 1);
+    }
+  };
+
+  const handlePrev = () => {
+    if (currentIndex > 0) {
+      setCurrentIndex((prev) => prev - 1);
+    }
+  };
 
-  const progressPercentage = (params.questionNumber / params.totalQuestions) * 100;
+  const progressPercentage = ((currentIndex + 1) / totalQuestions) * 100;
 
-  const renderOption = (option: QBankOption, index: number) => {
+  const renderOption = (option: QBankExamOption, index: number) => {
     const letters = ['A', 'B', 'C', 'D', 'E', 'F'];
     const letter = letters[index] || '';
 
-    let borderColor = '#E5E7EB'; // Default grey
+    let borderColor = '#E5E7EB'; 
     let backgroundColor = '#FFFFFF';
     let iconName: 'check-circle' | 'x-circle' | undefined;
     let iconColor = theme.textSecondary;
     let statusText = '';
     let statusColor = '';
 
-    if (option.status === 'correct') {
-      borderColor = theme.success;
-      backgroundColor = '#F0FDF4'; // light green bg
-      iconName = 'check-circle';
-      iconColor = theme.success;
-      statusText = 'Correct';
-      statusColor = theme.success;
-    } else if (option.status === 'incorrect') {
-      borderColor = '#EF4444';
-      backgroundColor = '#FEF2F2'; // light red bg
-      iconName = 'x-circle';
-      iconColor = '#EF4444';
-      statusText = 'InCorrect'; // matching user image
-      statusColor = '#EF4444';
+    const isSelected = selectedOptionId === option.id;
+
+    if (isAttempted) {
+      if (option.isCorrect) {
+        borderColor = theme.success;
+        backgroundColor = '#F0FDF4'; 
+        iconName = 'check-circle';
+        iconColor = theme.success;
+        statusText = 'Correct';
+        statusColor = theme.success;
+      } else if (isSelected && !option.isCorrect) {
+        borderColor = '#EF4444';
+        backgroundColor = '#FEF2F2'; 
+        iconName = 'x-circle';
+        iconColor = '#EF4444';
+        statusText = 'InCorrect'; 
+        statusColor = '#EF4444';
+      }
+    } else if (isSelected) {
+      // Very brief state before it evaluates (if we ever want a delay), but here it evaluates instantly
+      borderColor = theme.primary;
     }
 
     return (
       <TouchableOpacity 
         key={option.id}
         style={[styles.optionContainer, { borderColor, backgroundColor }]}
-        onPress={() => onPressOption?.(option.id)}
+        onPress={() => handleOptionPress(option.id)}
         activeOpacity={0.7}
       >
         <View style={styles.optionContent}>
@@ -102,12 +140,12 @@ export const QBankQuestionScreen: React.FC<QBankQuestionScreenProps> = ({
             <Typography variant="body" color={theme.textPrimary} style={styles.optionText}>
               {letter}. {option.text}
             </Typography>
-            {(option.status === 'correct' || option.status === 'incorrect') && (
+            {isAttempted && statusText ? (
               <Typography variant="caption" color={statusColor} style={styles.optionStatusText}>
-                {statusText} <Typography variant="caption" color={theme.textSecondary}>[{option.percentage}%]</Typography>
+                {statusText} {option.percentage !== undefined && <Typography variant="caption" color={theme.textSecondary}>[{option.percentage}%]</Typography>}
               </Typography>
-            )}
-            {option.status === 'default' && option.percentage !== undefined && (
+            ) : null}
+            {!statusText && option.percentage !== undefined && isAttempted && (
               <Typography variant="caption" color={theme.textSecondary} style={styles.optionStatusText}>
                 [{option.percentage}%]
               </Typography>
@@ -118,27 +156,44 @@ export const QBankQuestionScreen: React.FC<QBankQuestionScreenProps> = ({
     );
   };
 
+  if (!currentQuestion) return null;
+
   return (
-    <SafeAreaView style={[styles.container, { backgroundColor: '#E5E7EB' }]} edges={['top', 'bottom']}>
+    <SafeAreaView style={[styles.container, { backgroundColor: '#FFFFFF' }]} edges={['top', 'bottom']}>
       <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
 
-      <View style={styles.card}>
-        {/* Header */}
-        <View style={styles.header}>
-          <TouchableOpacity onPress={onBack} style={styles.headerIconBtnLeft}>
-            <Icon name="chevron-left" size={24} color={theme.textPrimary} />
-          </TouchableOpacity>
-          <Typography variant="h3" color={theme.textPrimary} style={styles.headerTitle}>
-            {params.headerTitle}
-          </Typography>
-          <View style={styles.headerIconBtnRight} />
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity onPress={onBack} style={styles.headerIconBtnLeft}>
+          <Icon name="chevron-left" size={24} color={theme.textPrimary} />
+        </TouchableOpacity>
+        <Typography variant="h3" color={theme.textPrimary} style={styles.headerTitle}>
+          {examData.title}
+        </Typography>
+        <View style={styles.headerIconBtnRight}>
+           {examData.accessType === 'pro' && !isProUser && (
+             <View style={styles.proBadge}>
+               <Typography variant="caption" bold color="#FFFFFF" style={{fontSize: 8}}>
+                 PRO
+               </Typography>
+             </View>
+           )}
+           {examData.accessType === 'free' && (
+             <View style={styles.freeBadge}>
+               <Typography variant="caption" bold color={theme.success} style={{fontSize: 8}}>
+                 FREE
+               </Typography>
+             </View>
+           )}
         </View>
+      </View>
 
-        {/* Progress Bar */}
-        <View style={styles.progressTrack}>
-          <View style={[styles.progressFill, { width: `${progressPercentage}%`, backgroundColor: theme.success }]} />
-        </View>
+      {/* Progress Bar */}
+      <View style={styles.progressTrack}>
+        <View style={[styles.progressFill, { width: `${progressPercentage}%`, backgroundColor: theme.success }]} />
+      </View>
 
+      <View style={{ flex: 1, backgroundColor: '#F9FAFB' }}>
         <ScrollView 
           contentContainerStyle={styles.scrollContent} 
           showsVerticalScrollIndicator={false}
@@ -146,73 +201,75 @@ export const QBankQuestionScreen: React.FC<QBankQuestionScreenProps> = ({
           {/* Top Bar: Question Number & Timer */}
           <View style={styles.topBar}>
             <Typography variant="caption" bold color={theme.textSecondary} style={styles.questionNumber}>
-              QUESTION {params.questionNumber}/{params.totalQuestions}
+              QUESTION {currentIndex + 1}/{totalQuestions}
             </Typography>
-            <View style={styles.timerWrapper}>
-              <Icon name="clock" size={14} color={theme.textSecondary} />
-              <Typography variant="caption" color={theme.textSecondary} style={styles.timerText}>
-                {formatTime(timeLeft)}
-              </Typography>
-            </View>
+            {!!examData.timeLimitSeconds && (
+              <View style={styles.timerWrapper}>
+                <Icon name="clock" size={14} color={theme.textSecondary} />
+                <Typography variant="caption" color={theme.textSecondary} style={styles.timerText}>
+                  {formatTime(timeLeft)}
+                </Typography>
+              </View>
+            )}
           </View>
 
           {/* Question Text */}
           <Typography variant="h3" bold color={theme.textPrimary} style={styles.questionText}>
-            {params.questionText}
+            {currentQuestion.questionText}
           </Typography>
 
           {/* Options */}
           <View style={styles.optionsList}>
-            {params.options.map((option, index) => renderOption(option, index))}
+            {currentQuestion.options.map((option, index) => renderOption(option, index))}
           </View>
 
-          {/* Explanation Section */}
-          {params.explanation && (
+          {/* Explanation Section (Only shown if attempted) */}
+          {isAttempted && currentQuestion.explanation && (
             <View style={styles.explanationContainer}>
               <Typography variant="caption" bold color={theme.textPrimary} style={styles.explanationTitle}>
                 EXPLANATION
               </Typography>
               <Typography variant="body" color={theme.textSecondary} style={styles.explanationText}>
-                {params.explanation}
+                {currentQuestion.explanation}
               </Typography>
               
-              {params.referenceId && (
+              {currentQuestion.referenceId && (
                 <View style={styles.referenceContainer}>
                   <Typography variant="caption" color={theme.textSecondary} style={styles.referenceText}>
-                    {params.referenceId}
+                    {currentQuestion.referenceId}
                   </Typography>
                 </View>
               )}
             </View>
           )}
         </ScrollView>
+      </View>
 
-        {/* Bottom Actions */}
-        <View style={styles.bottomActions}>
-          <View style={styles.leftActions}>
-            <TouchableOpacity style={styles.iconAction} onPress={onPressReport}>
-              <Icon name="alert-circle" size={20} color={theme.textSecondary} />
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.iconAction} onPress={onPressUsers}>
-              <Icon name="users" size={20} color={theme.textSecondary} />
-            </TouchableOpacity>
-          </View>
-          <View style={styles.rightActions}>
-            <TouchableOpacity style={styles.prevBtn} onPress={onPrev}>
-              <Typography variant="body" bold color={theme.textPrimary}>
-                Prev
-              </Typography>
-            </TouchableOpacity>
-            <Button 
-              title="Next" 
-              onPress={onNext || (() => {})} 
-              style={styles.nextBtn} 
-              textStyle={styles.nextBtnText}
-            />
-          </View>
+      {/* Bottom Actions */}
+      <View style={styles.bottomActions}>
+        <View style={styles.leftActions}>
+          <TouchableOpacity style={styles.iconAction} onPress={() => onPressReport?.(currentQuestion.id)}>
+            <Icon name="alert-circle" size={20} color={theme.textSecondary} />
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.iconAction} onPress={() => onPressUsers?.(currentQuestion.id)}>
+            <Icon name="users" size={20} color={theme.textSecondary} />
+          </TouchableOpacity>
+        </View>
+        <View style={styles.rightActions}>
+          <TouchableOpacity style={[styles.prevBtn, currentIndex === 0 && { opacity: 0.5 }]} onPress={handlePrev} disabled={currentIndex === 0}>
+            <Typography variant="body" bold color={theme.textPrimary}>
+              Prev
+            </Typography>
+          </TouchableOpacity>
+          <Button 
+            title={isLastQuestion ? "Finish" : "Next"} 
+            onPress={handleNextOrFinish} 
+            style={styles.nextBtn} 
+            textStyle={styles.nextBtnText}
+          />
         </View>
-
       </View>
+
     </SafeAreaView>
   );
 };
@@ -220,18 +277,6 @@ export const QBankQuestionScreen: React.FC<QBankQuestionScreenProps> = ({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    padding: 16, // Gray margin around the card
-  },
-  card: {
-    flex: 1,
-    backgroundColor: '#FFFFFF',
-    borderRadius: 8,
-    overflow: 'hidden',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 4,
   },
   header: {
     flexDirection: 'row',
@@ -245,10 +290,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'flex-start',
   },
-  headerRightActions: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
   headerIconBtnRight: {
     width: 40,
     height: 40,
@@ -261,6 +302,19 @@ const styles = StyleSheet.create({
     flex: 1,
     textAlign: 'center',
   },
+  proBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+    backgroundColor: '#F59E0B',
+  },
+  freeBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: '#10B981',
+  },
   progressTrack: {
     height: 4,
     backgroundColor: '#E5E7EB',
@@ -304,6 +358,7 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     padding: 16,
     marginBottom: 12,
+    backgroundColor: '#FFFFFF',
   },
   optionContent: {
     flexDirection: 'row',