react-native-elearn-ui 0.1.25 → 0.1.31

package/src/screens/qbank/QBankQuestionScreen.tsx

@@ -0,0 +1,448 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  StatusBar,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useTheme } from '../../context/ThemeContext';
+import { Typography, Icon, Button } from '../../components';
+import type { QBankExamData, QBankExamOption } from '../../types';
+
+interface QBankQuestionScreenProps {
+  examData: QBankExamData;
+  onFinish?: (results: Record<string, string>) => void;
+  onQuestionAttempt?: (questionId: string, selectedOptionId: string) => void;
+  onBack?: () => void;
+  onPressReport?: (questionId: string) => void;
+  onPressUsers?: (questionId: string) => void;
+  isProUser?: boolean;
+}
+
+const formatTime = (totalSeconds: number) => {
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+};
+
+export const QBankQuestionScreen: React.FC<QBankQuestionScreenProps> = ({
+  examData,
+  onFinish,
+  onQuestionAttempt,
+  onBack,
+  onPressReport,
+  onPressUsers,
+  isProUser = false,
+}) => {
+  const theme = useTheme();
+  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) {
+      onFinish?.(answers);
+      return;
+    }
+
+    const timer = setInterval(() => {
+      setTimeLeft((prev) => prev - 1);
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [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 = ((currentIndex + 1) / totalQuestions) * 100;
+
+  const renderOption = (option: QBankExamOption, index: number) => {
+    const letters = ['A', 'B', 'C', 'D', 'E', 'F'];
+    const letter = letters[index] || '';
+
+    let borderColor = '#E5E7EB'; 
+    let backgroundColor = '#FFFFFF';
+    let iconName: 'check-circle' | 'x-circle' | undefined;
+    let iconColor = theme.textSecondary;
+    let statusText = '';
+    let statusColor = '';
+
+    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={() => handleOptionPress(option.id)}
+        activeOpacity={0.7}
+      >
+        <View style={styles.optionContent}>
+          {iconName ? (
+            <Icon name={iconName} size={20} color={iconColor} />
+          ) : (
+            <View style={styles.emptyCircle} />
+          )}
+          <View style={styles.optionTextWrapper}>
+            <Typography variant="body" color={theme.textPrimary} style={styles.optionText}>
+              {letter}. {option.text}
+            </Typography>
+            {isAttempted && statusText ? (
+              <Typography variant="caption" color={statusColor} style={styles.optionStatusText}>
+                {statusText} {option.percentage !== undefined && <Typography variant="caption" color={theme.textSecondary}>[{option.percentage}%]</Typography>}
+              </Typography>
+            ) : null}
+            {!statusText && option.percentage !== undefined && isAttempted && (
+              <Typography variant="caption" color={theme.textSecondary} style={styles.optionStatusText}>
+                [{option.percentage}%]
+              </Typography>
+            )}
+          </View>
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  if (!currentQuestion) return null;
+
+  return (
+    <SafeAreaView style={[styles.container, { backgroundColor: '#FFFFFF' }]} edges={['top', 'bottom']}>
+      <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
+
+      {/* 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>
+
+      <View style={{ flex: 1, backgroundColor: '#F9FAFB' }}>
+        <ScrollView 
+          contentContainerStyle={styles.scrollContent} 
+          showsVerticalScrollIndicator={false}
+        >
+          {/* Top Bar: Question Number & Timer */}
+          <View style={styles.topBar}>
+            <Typography variant="caption" bold color={theme.textSecondary} style={styles.questionNumber}>
+              QUESTION {currentIndex + 1}/{totalQuestions}
+            </Typography>
+            {!!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}>
+            {currentQuestion.questionText}
+          </Typography>
+
+          {/* Options */}
+          <View style={styles.optionsList}>
+            {currentQuestion.options.map((option, index) => renderOption(option, index))}
+          </View>
+
+          {/* 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}>
+                {currentQuestion.explanation}
+              </Typography>
+              
+              {currentQuestion.referenceId && (
+                <View style={styles.referenceContainer}>
+                  <Typography variant="caption" color={theme.textSecondary} style={styles.referenceText}>
+                    {currentQuestion.referenceId}
+                  </Typography>
+                </View>
+              )}
+            </View>
+          )}
+        </ScrollView>
+      </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>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  headerIconBtnLeft: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  headerIconBtnRight: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  headerTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    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',
+    width: '100%',
+  },
+  progressFill: {
+    height: '100%',
+  },
+  scrollContent: {
+    padding: 20,
+    paddingBottom: 40,
+  },
+  topBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  questionNumber: {
+    fontSize: 12,
+    letterSpacing: 0.5,
+  },
+  timerWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  timerText: {
+    fontSize: 12,
+    marginLeft: 6,
+  },
+  questionText: {
+    fontSize: 16,
+    lineHeight: 24,
+    marginBottom: 24,
+  },
+  optionsList: {
+    marginBottom: 32,
+  },
+  optionContainer: {
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 16,
+    marginBottom: 12,
+    backgroundColor: '#FFFFFF',
+  },
+  optionContent: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  emptyCircle: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+  },
+  optionTextWrapper: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  optionText: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  optionStatusText: {
+    marginTop: 6,
+    fontSize: 12,
+  },
+  explanationContainer: {
+    marginTop: 16,
+  },
+  explanationTitle: {
+    fontSize: 12,
+    marginBottom: 12,
+  },
+  explanationText: {
+    fontSize: 14,
+    lineHeight: 22,
+  },
+  referenceContainer: {
+    marginTop: 24,
+    paddingTop: 16,
+    borderTopWidth: 1,
+    borderTopColor: '#F3F4F6',
+    alignItems: 'center',
+  },
+  referenceText: {
+    fontSize: 12,
+  },
+  bottomActions: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 16,
+    borderTopWidth: 1,
+    borderTopColor: '#F3F4F6',
+    backgroundColor: '#FFFFFF',
+  },
+  leftActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconAction: {
+    width: 36,
+    height: 36,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 8,
+    borderRadius: 18,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+  },
+  rightActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  prevBtn: {
+    marginRight: 20,
+  },
+  nextBtn: {
+    backgroundColor: '#10B981',
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+    height: 'auto',
+    minWidth: 80,
+  },
+  nextBtnText: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});

package/src/screens/qbank/QBankSubTopicScreen.tsx

@@ -19,6 +19,7 @@ interface QBankSubTopicScreenProps {
   onPressModule?: (moduleId: string) => void;
   onPressFilter?: (filter: string) => void;
   onPressSearch?: () => void;
+  isProUser?: boolean;
 }
 
 export const QBankSubTopicScreen: React.FC<QBankSubTopicScreenProps> = ({
@@ -28,6 +29,7 @@ export const QBankSubTopicScreen: React.FC<QBankSubTopicScreenProps> = ({
   onPressModule,
   onPressFilter,
   onPressSearch,
+  isProUser = false,
 }) => {
   const theme = useTheme();
   const [activeFilter, setActiveFilter] = useState(params.activeFilter || params.filters[0]);
@@ -191,25 +193,27 @@ export const QBankSubTopicScreen: React.FC<QBankSubTopicScreenProps> = ({
                             </Typography>
                           </View>
                         )}
-                        {moduleItem.status === 'locked' && (
-                          <View style={styles.lockedBadge}>
-                            <Icon name="lock" size={12} color="#64748B" />
+                        {moduleItem.status === 'locked' && !isProUser && (
+                          <View style={styles.proBadge}>
+                            <Typography variant="caption" bold color="#FFFFFF" style={{fontSize: 7}}>
+                              PRO
+                            </Typography>
                           </View>
                         )}
                         {moduleItem.attemptStatus === 'resume' && (
-                          <Typography variant="caption" bold color="#F59E0B" style={{fontSize: 11}}>
+                          <Typography variant="caption" bold color="#F59E0B" style={{fontSize: 9}}>
                             RESUME
                           </Typography>
                         )}
                         {moduleItem.attemptStatus === 'completed' && (
                           <View style={{ alignItems: 'flex-end' }}>
                             <View style={styles.completedBadge}>
-                              <Typography variant="caption" bold color="#FFFFFF" style={{fontSize: 8}}>
+                              <Typography variant="caption" bold color="#FFFFFF" style={{fontSize: 7}}>
                                 COMPLETED
                               </Typography>
                             </View>
                             {moduleItem.correctPercentage !== undefined && (
-                              <Typography variant="caption" bold color={theme.success} style={{fontSize: 12, marginTop: 4}}>
+                              <Typography variant="caption" bold color={theme.success} style={{fontSize: 10, marginTop: 4}}>
                                 {moduleItem.correctPercentage}% Correct
                               </Typography>
                             )}
@@ -427,13 +431,11 @@ const styles = StyleSheet.create({
     borderColor: '#10B981',
     backgroundColor: '#FFFFFF',
   },
-  lockedBadge: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    backgroundColor: '#F1F5F9',
-    justifyContent: 'center',
-    alignItems: 'center',
+  proBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+    backgroundColor: '#F59E0B',
   },
   completedBadge: {
     paddingHorizontal: 6,

package/src/types/index.ts

@@ -239,6 +239,29 @@ export interface QBankSubTopicSection {
   modules: QBankSubTopicModule[];
 }
 
+export interface QBankExamOption {
+  id: string;
+  text: string;
+  isCorrect: boolean;
+  percentage?: number; // e.g. 20 for [20%]
+}
+
+export interface QBankExamQuestion {
+  id: string;
+  questionText: string;
+  options: QBankExamOption[];
+  explanation?: string;
+  referenceId?: string;
+}
+
+export interface QBankExamData {
+  id: string;
+  title: string;
+  accessType: 'free' | 'pro';
+  timeLimitSeconds?: number;
+  questions: QBankExamQuestion[];
+}
+
 export interface QBankSubTopicParams {
   header: {
     title: string;