react-native-elearn-ui 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/module/screens/QbankScreen.js +20 -12
- package/lib/module/screens/QbankScreen.js.map +1 -1
- package/lib/module/screens/ResultScreen.js +407 -85
- package/lib/module/screens/ResultScreen.js.map +1 -1
- package/lib/typescript/src/screens/QbankScreen.d.ts +1 -0
- package/lib/typescript/src/screens/QbankScreen.d.ts.map +1 -1
- package/lib/typescript/src/screens/ResultScreen.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/screens/QbankScreen.tsx +21 -12
- package/src/screens/ResultScreen.tsx +382 -76
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
2
|
import {
|
|
3
3
|
View,
|
|
4
4
|
ScrollView,
|
|
@@ -6,6 +6,7 @@ import {
|
|
|
6
6
|
TouchableOpacity,
|
|
7
7
|
SafeAreaView,
|
|
8
8
|
StatusBar,
|
|
9
|
+
Image,
|
|
9
10
|
} from 'react-native';
|
|
10
11
|
import type { QuizResults, Question } from '../types';
|
|
11
12
|
import { useElearnConfig } from '../context/ElearnConfigContext';
|
|
@@ -24,12 +25,16 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
|
|
|
24
25
|
results,
|
|
25
26
|
questions,
|
|
26
27
|
onClose,
|
|
27
|
-
onReviewAnswers,
|
|
28
28
|
hideHeader = false,
|
|
29
29
|
}) => {
|
|
30
30
|
const { getString } = useElearnConfig();
|
|
31
31
|
const theme = useTheme();
|
|
32
32
|
|
|
33
|
+
// Selected question index for individual review
|
|
34
|
+
const [selectedReviewIndex, setSelectedReviewIndex] = useState<number | null>(null);
|
|
35
|
+
|
|
36
|
+
const optionPrefixes = ['A', 'B', 'C', 'D', 'E'];
|
|
37
|
+
|
|
33
38
|
const formatTime = (totalSeconds: number) => {
|
|
34
39
|
const mins = Math.floor(totalSeconds / 60);
|
|
35
40
|
const secs = totalSeconds % 60;
|
|
@@ -39,6 +44,190 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
|
|
|
39
44
|
return `${secs}s`;
|
|
40
45
|
};
|
|
41
46
|
|
|
47
|
+
const handlePrevReview = () => {
|
|
48
|
+
if (selectedReviewIndex !== null && selectedReviewIndex > 0) {
|
|
49
|
+
setSelectedReviewIndex(selectedReviewIndex - 1);
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
const handleNextReview = () => {
|
|
54
|
+
if (selectedReviewIndex !== null && selectedReviewIndex < questions.length - 1) {
|
|
55
|
+
setSelectedReviewIndex(selectedReviewIndex + 1);
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
// --- Sub-View: Individual Question Detail Review ---
|
|
60
|
+
if (selectedReviewIndex !== null) {
|
|
61
|
+
const currentReviewQuestion = questions[selectedReviewIndex]!;
|
|
62
|
+
const userAnswerIdx = results.userAnswers[currentReviewQuestion.id];
|
|
63
|
+
// Removed unused isCorrect variable
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
|
|
67
|
+
<StatusBar barStyle="dark-content" />
|
|
68
|
+
|
|
69
|
+
{/* Review Header */}
|
|
70
|
+
{!hideHeader && (
|
|
71
|
+
<View style={styles.header}>
|
|
72
|
+
<TouchableOpacity onPress={() => setSelectedReviewIndex(null)} style={styles.backButton}>
|
|
73
|
+
<Icon name="arrow-left" size={20} color={theme.textPrimary} />
|
|
74
|
+
</TouchableOpacity>
|
|
75
|
+
|
|
76
|
+
<Typography variant="h2" bold style={styles.headerTitle}>
|
|
77
|
+
QBank Analysis
|
|
78
|
+
</Typography>
|
|
79
|
+
|
|
80
|
+
<TouchableOpacity onPress={onClose} style={styles.closeButton}>
|
|
81
|
+
<Icon name="x-circle" size={24} color={theme.textSecondary} />
|
|
82
|
+
</TouchableOpacity>
|
|
83
|
+
</View>
|
|
84
|
+
)}
|
|
85
|
+
|
|
86
|
+
<ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
|
|
87
|
+
|
|
88
|
+
{/* Question Index Meta */}
|
|
89
|
+
<View style={styles.metaRow}>
|
|
90
|
+
<Typography variant="caption" bold color={theme.textSecondary} style={styles.questionNumLabel}>
|
|
91
|
+
QUESTION {selectedReviewIndex + 1}/{questions.length}
|
|
92
|
+
</Typography>
|
|
93
|
+
<View style={styles.metaActions}>
|
|
94
|
+
<TouchableOpacity style={styles.metaActionBtn}>
|
|
95
|
+
<Icon name="bookmark" size={18} color={theme.textSecondary} />
|
|
96
|
+
</TouchableOpacity>
|
|
97
|
+
</View>
|
|
98
|
+
</View>
|
|
99
|
+
|
|
100
|
+
{/* Question text */}
|
|
101
|
+
<Typography variant="h2" bold color={theme.textPrimary} style={styles.questionText}>
|
|
102
|
+
{currentReviewQuestion.text}
|
|
103
|
+
</Typography>
|
|
104
|
+
|
|
105
|
+
{/* Optional microscope image */}
|
|
106
|
+
{currentReviewQuestion.imageUrl && (
|
|
107
|
+
<Image
|
|
108
|
+
source={{ uri: currentReviewQuestion.imageUrl }}
|
|
109
|
+
style={styles.questionImage}
|
|
110
|
+
resizeMode="cover"
|
|
111
|
+
/>
|
|
112
|
+
)}
|
|
113
|
+
|
|
114
|
+
{/* Options list showing correctness evaluations */}
|
|
115
|
+
<View style={styles.optionsList}>
|
|
116
|
+
{currentReviewQuestion.options.map((option, idx) => {
|
|
117
|
+
const isUserSelection = userAnswerIdx === idx;
|
|
118
|
+
const isCorrectAnswer = idx === currentReviewQuestion.correctOptionIndex;
|
|
119
|
+
|
|
120
|
+
let optionBg = '#FFFFFF';
|
|
121
|
+
let optionBorder = theme.border;
|
|
122
|
+
let labelColor = theme.textPrimary;
|
|
123
|
+
let prefixColor = theme.textSecondary;
|
|
124
|
+
let statText = '';
|
|
125
|
+
|
|
126
|
+
if (isCorrectAnswer) {
|
|
127
|
+
optionBg = '#E6F4F1'; // Tinted green bg
|
|
128
|
+
optionBorder = '#10B981'; // Green border
|
|
129
|
+
labelColor = '#065F46';
|
|
130
|
+
prefixColor = '#065F46';
|
|
131
|
+
statText = isUserSelection ? 'Your Correct Answer' : 'Correct Answer';
|
|
132
|
+
} else if (isUserSelection) {
|
|
133
|
+
optionBg = '#FEF2F2'; // Tinted red bg
|
|
134
|
+
optionBorder = '#EF4444'; // Red border
|
|
135
|
+
labelColor = '#991B1B';
|
|
136
|
+
prefixColor = '#991B1B';
|
|
137
|
+
statText = 'Your Incorrect Answer';
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
return (
|
|
141
|
+
<View
|
|
142
|
+
key={idx}
|
|
143
|
+
style={[
|
|
144
|
+
styles.optionCard,
|
|
145
|
+
{
|
|
146
|
+
backgroundColor: optionBg,
|
|
147
|
+
borderColor: optionBorder,
|
|
148
|
+
},
|
|
149
|
+
]}
|
|
150
|
+
>
|
|
151
|
+
<View style={styles.optionRow}>
|
|
152
|
+
<Typography variant="body" bold color={prefixColor} style={styles.optionPrefix}>
|
|
153
|
+
{optionPrefixes[idx] || idx + 1}
|
|
154
|
+
</Typography>
|
|
155
|
+
<Typography variant="body" color={labelColor} style={styles.optionText}>
|
|
156
|
+
{option}
|
|
157
|
+
</Typography>
|
|
158
|
+
</View>
|
|
159
|
+
|
|
160
|
+
{statText !== '' && (
|
|
161
|
+
<View style={styles.statBadgeRow}>
|
|
162
|
+
<Typography variant="caption" bold color={isCorrectAnswer ? '#10B981' : '#EF4444'}>
|
|
163
|
+
{statText}
|
|
164
|
+
</Typography>
|
|
165
|
+
</View>
|
|
166
|
+
)}
|
|
167
|
+
</View>
|
|
168
|
+
);
|
|
169
|
+
})}
|
|
170
|
+
</View>
|
|
171
|
+
|
|
172
|
+
{/* Explanation info */}
|
|
173
|
+
<View style={styles.explanationSection}>
|
|
174
|
+
<Typography variant="h2" bold color={theme.textPrimary} style={styles.explanationTitle}>
|
|
175
|
+
Explanation
|
|
176
|
+
</Typography>
|
|
177
|
+
<Typography variant="body" color={theme.textSecondary} style={styles.explanationBody}>
|
|
178
|
+
{currentReviewQuestion.explanation}
|
|
179
|
+
</Typography>
|
|
180
|
+
|
|
181
|
+
<Typography variant="h3" bold color={theme.textSecondary} style={styles.rxdxId}>
|
|
182
|
+
RXDX ID: R23082
|
|
183
|
+
</Typography>
|
|
184
|
+
</View>
|
|
185
|
+
|
|
186
|
+
</ScrollView>
|
|
187
|
+
|
|
188
|
+
{/* Previous and Next Navigation Footer */}
|
|
189
|
+
<View style={styles.footerRow}>
|
|
190
|
+
{/* Previous Button */}
|
|
191
|
+
<TouchableOpacity
|
|
192
|
+
onPress={handlePrevReview}
|
|
193
|
+
disabled={selectedReviewIndex === 0}
|
|
194
|
+
style={[styles.footerActionBtn, selectedReviewIndex === 0 && { opacity: 0.4 }]}
|
|
195
|
+
>
|
|
196
|
+
<Typography variant="body" bold color={theme.textPrimary}>
|
|
197
|
+
Previous
|
|
198
|
+
</Typography>
|
|
199
|
+
</TouchableOpacity>
|
|
200
|
+
|
|
201
|
+
{/* Back to summary */}
|
|
202
|
+
<TouchableOpacity
|
|
203
|
+
onPress={() => setSelectedReviewIndex(null)}
|
|
204
|
+
style={styles.backToListBtn}
|
|
205
|
+
>
|
|
206
|
+
<Typography variant="body" bold color={theme.primary}>
|
|
207
|
+
Back to Summary
|
|
208
|
+
</Typography>
|
|
209
|
+
</TouchableOpacity>
|
|
210
|
+
|
|
211
|
+
{/* Next Button */}
|
|
212
|
+
<TouchableOpacity
|
|
213
|
+
onPress={handleNextReview}
|
|
214
|
+
disabled={selectedReviewIndex === questions.length - 1}
|
|
215
|
+
style={[
|
|
216
|
+
styles.nextActionBtn,
|
|
217
|
+
{ backgroundColor: theme.primary },
|
|
218
|
+
selectedReviewIndex === questions.length - 1 && { opacity: 0.4 }
|
|
219
|
+
]}
|
|
220
|
+
>
|
|
221
|
+
<Typography variant="body" bold color="#FFFFFF">
|
|
222
|
+
Next
|
|
223
|
+
</Typography>
|
|
224
|
+
</TouchableOpacity>
|
|
225
|
+
</View>
|
|
226
|
+
</SafeAreaView>
|
|
227
|
+
);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
// --- Main View: Quiz Performance Scorecard & Summary List ---
|
|
42
231
|
return (
|
|
43
232
|
<SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
|
|
44
233
|
<StatusBar barStyle="dark-content" />
|
|
@@ -47,8 +236,8 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
|
|
|
47
236
|
{!hideHeader && (
|
|
48
237
|
<View style={styles.header}>
|
|
49
238
|
<View style={styles.headerLeftPlaceholder} />
|
|
50
|
-
<Typography variant="h2" bold>
|
|
51
|
-
|
|
239
|
+
<Typography variant="h2" bold style={styles.headerTitleMain}>
|
|
240
|
+
QBank Analysis
|
|
52
241
|
</Typography>
|
|
53
242
|
<TouchableOpacity onPress={onClose} style={styles.closeButton}>
|
|
54
243
|
<Icon name="x-circle" size={24} color={theme.textSecondary} />
|
|
@@ -63,27 +252,27 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
|
|
|
63
252
|
<View style={styles.summaryRow}>
|
|
64
253
|
<View style={styles.summaryLeft}>
|
|
65
254
|
<Typography variant="h1" bold color={theme.textPrimary}>
|
|
66
|
-
{getString('scorecardTitle')}
|
|
255
|
+
{getString('scorecardTitle') || 'Quiz Analysis'}
|
|
67
256
|
</Typography>
|
|
68
257
|
<Typography variant="body" color={theme.textSecondary} style={styles.summarySubtitle}>
|
|
69
|
-
{getString('resultsSubtitle')}
|
|
258
|
+
{getString('resultsSubtitle') || 'Here is your QBank performance summary!'}
|
|
70
259
|
</Typography>
|
|
71
260
|
|
|
72
261
|
<View style={styles.statsContainer}>
|
|
73
262
|
<View style={styles.statBox}>
|
|
74
263
|
<Typography variant="caption" color={theme.textSecondary}>
|
|
75
|
-
{getString('correctAnswersCountLabel')}
|
|
264
|
+
{getString('correctAnswersCountLabel') || 'Correct Answers'}
|
|
76
265
|
</Typography>
|
|
77
|
-
<Typography variant="h2" bold color={theme.success}>
|
|
266
|
+
<Typography variant="h2" bold color={theme.success} style={styles.statValue}>
|
|
78
267
|
{results.correctCount} / {results.totalQuestions}
|
|
79
268
|
</Typography>
|
|
80
269
|
</View>
|
|
81
270
|
|
|
82
271
|
<View style={styles.statBox}>
|
|
83
272
|
<Typography variant="caption" color={theme.textSecondary}>
|
|
84
|
-
{getString('timeSpentLabel')}
|
|
273
|
+
{getString('timeSpentLabel') || 'Time Spent'}
|
|
85
274
|
</Typography>
|
|
86
|
-
<Typography variant="h2" bold color={theme.textPrimary}>
|
|
275
|
+
<Typography variant="h2" bold color={theme.textPrimary} style={styles.statValue}>
|
|
87
276
|
{formatTime(results.timeSpentSeconds)}
|
|
88
277
|
</Typography>
|
|
89
278
|
</View>
|
|
@@ -100,7 +289,7 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
|
|
|
100
289
|
textStyle={{ fontSize: 16 }}
|
|
101
290
|
/>
|
|
102
291
|
<Typography variant="caption" color={theme.textSecondary} style={styles.accuracyText}>
|
|
103
|
-
{getString('accuracyLabel')}
|
|
292
|
+
{getString('accuracyLabel') || 'Accuracy'}
|
|
104
293
|
</Typography>
|
|
105
294
|
</View>
|
|
106
295
|
</View>
|
|
@@ -117,58 +306,63 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
|
|
|
117
306
|
{questions.map((question, idx) => {
|
|
118
307
|
const userAnswerIdx = results.userAnswers[question.id];
|
|
119
308
|
const isCorrect = userAnswerIdx === question.correctOptionIndex;
|
|
120
|
-
const optionPrefixes = ['A', 'B', 'C', 'D', 'E'];
|
|
121
309
|
|
|
122
310
|
return (
|
|
123
|
-
<
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
311
|
+
<TouchableOpacity
|
|
312
|
+
key={question.id}
|
|
313
|
+
activeOpacity={0.8}
|
|
314
|
+
onPress={() => setSelectedReviewIndex(idx)}
|
|
315
|
+
>
|
|
316
|
+
<Card bordered style={styles.reviewCard}>
|
|
317
|
+
<View style={styles.reviewCardHeader}>
|
|
318
|
+
<View style={[styles.questionNumBadge, { backgroundColor: theme.secondary }]}>
|
|
319
|
+
<Typography variant="caption" bold color={theme.primary}>
|
|
320
|
+
Q{idx + 1}
|
|
321
|
+
</Typography>
|
|
322
|
+
</View>
|
|
323
|
+
|
|
324
|
+
<View style={styles.statusBadge}>
|
|
325
|
+
<Icon
|
|
326
|
+
name={isCorrect ? 'check-circle' : 'x-circle'}
|
|
327
|
+
size={18}
|
|
328
|
+
color={isCorrect ? theme.success : theme.danger}
|
|
329
|
+
/>
|
|
330
|
+
<Typography
|
|
331
|
+
variant="caption"
|
|
332
|
+
bold
|
|
333
|
+
color={isCorrect ? theme.success : theme.danger}
|
|
334
|
+
style={styles.statusBadgeText}
|
|
335
|
+
>
|
|
336
|
+
{isCorrect ? 'Correct' : 'Incorrect'}
|
|
337
|
+
</Typography>
|
|
338
|
+
</View>
|
|
145
339
|
</View>
|
|
146
|
-
</View>
|
|
147
|
-
|
|
148
|
-
<Typography variant="body" bold style={styles.reviewQuestionText}>
|
|
149
|
-
{question.text}
|
|
150
|
-
</Typography>
|
|
151
340
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
Your answer:{' '}
|
|
155
|
-
<Typography variant="caption" bold color={isCorrect ? theme.success : theme.danger}>
|
|
156
|
-
{userAnswerIdx !== undefined
|
|
157
|
-
? `Option ${optionPrefixes[userAnswerIdx] || userAnswerIdx + 1}`
|
|
158
|
-
: 'Skipped'}
|
|
159
|
-
</Typography>
|
|
341
|
+
<Typography variant="body" bold style={styles.reviewQuestionText}>
|
|
342
|
+
{question.text}
|
|
160
343
|
</Typography>
|
|
161
|
-
|
|
162
|
-
{
|
|
163
|
-
<Typography variant="caption" color={theme.textSecondary}
|
|
164
|
-
|
|
165
|
-
<Typography variant="caption" bold color={theme.success}>
|
|
166
|
-
|
|
344
|
+
|
|
345
|
+
<View style={styles.userSelectionContainer}>
|
|
346
|
+
<Typography variant="caption" color={theme.textSecondary}>
|
|
347
|
+
Your answer:{' '}
|
|
348
|
+
<Typography variant="caption" bold color={isCorrect ? theme.success : theme.danger}>
|
|
349
|
+
{userAnswerIdx !== undefined
|
|
350
|
+
? `Option ${optionPrefixes[userAnswerIdx] || userAnswerIdx + 1}`
|
|
351
|
+
: 'Skipped'}
|
|
167
352
|
</Typography>
|
|
168
353
|
</Typography>
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
354
|
+
|
|
355
|
+
{!isCorrect && (
|
|
356
|
+
<Typography variant="caption" color={theme.textSecondary} style={styles.correctAnswerText}>
|
|
357
|
+
Correct answer:{' '}
|
|
358
|
+
<Typography variant="caption" bold color={theme.success}>
|
|
359
|
+
Option {optionPrefixes[question.correctOptionIndex] || question.correctOptionIndex + 1}
|
|
360
|
+
</Typography>
|
|
361
|
+
</Typography>
|
|
362
|
+
)}
|
|
363
|
+
</View>
|
|
364
|
+
</Card>
|
|
365
|
+
</TouchableOpacity>
|
|
172
366
|
);
|
|
173
367
|
})}
|
|
174
368
|
</View>
|
|
@@ -177,16 +371,8 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
|
|
|
177
371
|
|
|
178
372
|
{/* Footer Controls */}
|
|
179
373
|
<View style={[styles.footer, { backgroundColor: theme.cardBackground, borderTopColor: theme.border }]}>
|
|
180
|
-
{onReviewAnswers && (
|
|
181
|
-
<Button
|
|
182
|
-
title={getString('reviewAnswersButton')}
|
|
183
|
-
onPress={onReviewAnswers}
|
|
184
|
-
variant="outline"
|
|
185
|
-
style={styles.reviewBtn}
|
|
186
|
-
/>
|
|
187
|
-
)}
|
|
188
374
|
<Button
|
|
189
|
-
title=
|
|
375
|
+
title="Back to Dashboard"
|
|
190
376
|
onPress={onClose}
|
|
191
377
|
variant="primary"
|
|
192
378
|
style={styles.homeBtn}
|
|
@@ -204,17 +390,28 @@ const styles = StyleSheet.create({
|
|
|
204
390
|
flexDirection: 'row',
|
|
205
391
|
justifyContent: 'space-between',
|
|
206
392
|
alignItems: 'center',
|
|
207
|
-
paddingHorizontal:
|
|
393
|
+
paddingHorizontal: 16,
|
|
208
394
|
paddingVertical: 12,
|
|
209
395
|
},
|
|
210
|
-
|
|
211
|
-
|
|
396
|
+
backButton: {
|
|
397
|
+
padding: 6,
|
|
212
398
|
},
|
|
213
399
|
closeButton: {
|
|
214
|
-
padding:
|
|
400
|
+
padding: 6,
|
|
401
|
+
},
|
|
402
|
+
headerTitle: {
|
|
403
|
+
fontSize: 18,
|
|
404
|
+
fontWeight: '700',
|
|
405
|
+
},
|
|
406
|
+
headerTitleMain: {
|
|
407
|
+
fontSize: 18,
|
|
408
|
+
fontWeight: '700',
|
|
409
|
+
},
|
|
410
|
+
headerLeftPlaceholder: {
|
|
411
|
+
width: 36,
|
|
215
412
|
},
|
|
216
413
|
scrollContent: {
|
|
217
|
-
paddingHorizontal:
|
|
414
|
+
paddingHorizontal: 16,
|
|
218
415
|
paddingTop: 12,
|
|
219
416
|
paddingBottom: 40,
|
|
220
417
|
},
|
|
@@ -234,6 +431,7 @@ const styles = StyleSheet.create({
|
|
|
234
431
|
summarySubtitle: {
|
|
235
432
|
marginTop: 4,
|
|
236
433
|
marginBottom: 16,
|
|
434
|
+
fontSize: 12,
|
|
237
435
|
},
|
|
238
436
|
statsContainer: {
|
|
239
437
|
flexDirection: 'row',
|
|
@@ -241,6 +439,10 @@ const styles = StyleSheet.create({
|
|
|
241
439
|
statBox: {
|
|
242
440
|
marginRight: 24,
|
|
243
441
|
},
|
|
442
|
+
statValue: {
|
|
443
|
+
fontSize: 18,
|
|
444
|
+
marginTop: 2,
|
|
445
|
+
},
|
|
244
446
|
summaryRight: {
|
|
245
447
|
alignItems: 'center',
|
|
246
448
|
justifyContent: 'center',
|
|
@@ -250,7 +452,7 @@ const styles = StyleSheet.create({
|
|
|
250
452
|
fontWeight: '600',
|
|
251
453
|
},
|
|
252
454
|
sectionHeader: {
|
|
253
|
-
marginTop:
|
|
455
|
+
marginTop: 24,
|
|
254
456
|
marginBottom: 12,
|
|
255
457
|
},
|
|
256
458
|
reviewList: {
|
|
@@ -259,6 +461,7 @@ const styles = StyleSheet.create({
|
|
|
259
461
|
reviewCard: {
|
|
260
462
|
padding: 16,
|
|
261
463
|
marginBottom: 12,
|
|
464
|
+
borderRadius: 16,
|
|
262
465
|
},
|
|
263
466
|
reviewCardHeader: {
|
|
264
467
|
flexDirection: 'row',
|
|
@@ -279,6 +482,7 @@ const styles = StyleSheet.create({
|
|
|
279
482
|
marginLeft: 6,
|
|
280
483
|
},
|
|
281
484
|
reviewQuestionText: {
|
|
485
|
+
fontSize: 14,
|
|
282
486
|
lineHeight: 20,
|
|
283
487
|
marginBottom: 10,
|
|
284
488
|
},
|
|
@@ -291,17 +495,119 @@ const styles = StyleSheet.create({
|
|
|
291
495
|
marginTop: 4,
|
|
292
496
|
},
|
|
293
497
|
footer: {
|
|
294
|
-
paddingHorizontal:
|
|
498
|
+
paddingHorizontal: 16,
|
|
295
499
|
paddingVertical: 14,
|
|
296
500
|
borderTopWidth: 1,
|
|
501
|
+
backgroundColor: '#FFFFFF',
|
|
502
|
+
},
|
|
503
|
+
homeBtn: {
|
|
504
|
+
width: '100%',
|
|
505
|
+
height: 48,
|
|
506
|
+
justifyContent: 'center',
|
|
507
|
+
alignItems: 'center',
|
|
508
|
+
borderRadius: 24, // Matches "Back to Dashboard" rounded pill button
|
|
509
|
+
},
|
|
510
|
+
// --- Detailed Review Screen Styles ---
|
|
511
|
+
metaRow: {
|
|
297
512
|
flexDirection: 'row',
|
|
298
513
|
justifyContent: 'space-between',
|
|
514
|
+
alignItems: 'center',
|
|
515
|
+
marginBottom: 12,
|
|
299
516
|
},
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
517
|
+
questionNumLabel: {
|
|
518
|
+
fontSize: 12,
|
|
519
|
+
letterSpacing: 0.8,
|
|
303
520
|
},
|
|
304
|
-
|
|
521
|
+
metaActions: {
|
|
522
|
+
flexDirection: 'row',
|
|
523
|
+
alignItems: 'center',
|
|
524
|
+
},
|
|
525
|
+
metaActionBtn: {
|
|
526
|
+
padding: 6,
|
|
527
|
+
},
|
|
528
|
+
questionText: {
|
|
529
|
+
fontSize: 16,
|
|
530
|
+
lineHeight: 22,
|
|
531
|
+
marginBottom: 14,
|
|
532
|
+
},
|
|
533
|
+
questionImage: {
|
|
534
|
+
width: '100%',
|
|
535
|
+
height: 180,
|
|
536
|
+
borderRadius: 12,
|
|
537
|
+
marginBottom: 16,
|
|
538
|
+
backgroundColor: '#F8FAFC',
|
|
539
|
+
},
|
|
540
|
+
optionsList: {
|
|
541
|
+
marginBottom: 12,
|
|
542
|
+
},
|
|
543
|
+
optionCard: {
|
|
544
|
+
borderWidth: 1,
|
|
545
|
+
borderRadius: 10,
|
|
546
|
+
padding: 12,
|
|
547
|
+
marginBottom: 10,
|
|
548
|
+
},
|
|
549
|
+
optionRow: {
|
|
550
|
+
flexDirection: 'row',
|
|
551
|
+
alignItems: 'flex-start',
|
|
552
|
+
},
|
|
553
|
+
optionPrefix: {
|
|
554
|
+
width: 24,
|
|
555
|
+
fontSize: 14,
|
|
556
|
+
fontWeight: '600',
|
|
557
|
+
},
|
|
558
|
+
optionText: {
|
|
305
559
|
flex: 1,
|
|
560
|
+
fontSize: 14,
|
|
561
|
+
lineHeight: 18,
|
|
562
|
+
},
|
|
563
|
+
statBadgeRow: {
|
|
564
|
+
marginTop: 6,
|
|
565
|
+
paddingLeft: 24,
|
|
566
|
+
},
|
|
567
|
+
explanationSection: {
|
|
568
|
+
marginTop: 14,
|
|
569
|
+
paddingTop: 14,
|
|
570
|
+
borderTopWidth: 1,
|
|
571
|
+
borderTopColor: '#E2E8F0',
|
|
572
|
+
},
|
|
573
|
+
explanationTitle: {
|
|
574
|
+
fontSize: 15,
|
|
575
|
+
marginBottom: 6,
|
|
576
|
+
},
|
|
577
|
+
explanationBody: {
|
|
578
|
+
fontSize: 13,
|
|
579
|
+
lineHeight: 18,
|
|
580
|
+
marginBottom: 16,
|
|
581
|
+
},
|
|
582
|
+
rxdxId: {
|
|
583
|
+
fontSize: 12,
|
|
584
|
+
textAlign: 'center',
|
|
585
|
+
marginTop: 12,
|
|
586
|
+
},
|
|
587
|
+
footerRow: {
|
|
588
|
+
flexDirection: 'row',
|
|
589
|
+
alignItems: 'center',
|
|
590
|
+
paddingHorizontal: 16,
|
|
591
|
+
paddingVertical: 12,
|
|
592
|
+
backgroundColor: '#FFFFFF',
|
|
593
|
+
borderTopWidth: 1,
|
|
594
|
+
borderTopColor: '#E2E8F0',
|
|
595
|
+
justifyContent: 'space-between',
|
|
596
|
+
},
|
|
597
|
+
footerActionBtn: {
|
|
598
|
+
paddingVertical: 8,
|
|
599
|
+
paddingHorizontal: 12,
|
|
600
|
+
},
|
|
601
|
+
backToListBtn: {
|
|
602
|
+
paddingVertical: 8,
|
|
603
|
+
paddingHorizontal: 12,
|
|
604
|
+
},
|
|
605
|
+
nextActionBtn: {
|
|
606
|
+
paddingHorizontal: 24,
|
|
607
|
+
paddingVertical: 10,
|
|
608
|
+
borderRadius: 8,
|
|
609
|
+
minWidth: 80,
|
|
610
|
+
justifyContent: 'center',
|
|
611
|
+
alignItems: 'center',
|
|
306
612
|
},
|
|
307
613
|
});
|