Skip to content

E
EmidWife-New
Commit 828c667b authored by Malsha Jayakody's avatar Malsha Jayakody
Browse files
Options

changes in UI

parent 37f2f0b4
Hide whitespace changes
Inline Side-by-side
Showing with 729 additions and 423 deletions
src/constants/imgs.js
View file @ 828c667b
......@@ -64,4 +64,6 @@ export default {
game_img_44: require('../assets/games/game02Backgroundnew.jpeg'),
game_img_45: require('../assets/games/game02Backgroundnew02.jpeg'),
home_page: require('../assets/home_page.png'),
well_being: require('../assets/games/wellBeing.jpg'),
motherWithMidWife: require('../assets/games/motherAndMidWife.jpg'),
};
src/constants/routes.js
View file @ 828c667b
......@@ -83,6 +83,6 @@ export default {
Game02ProgressLevel04: 'Game02ProgressLevel04',
Game02ProgressLevel05: 'Game02ProgressLevel05',
Game02ProgressLevel06: 'Game02ProgressLevel06',
MentalWellBeingTypes: 'MentalWellBeingTypes',
};
src/navigations/GameNavigator.js
View file @ 828c667b
......@@ -41,6 +41,7 @@ import Game02ProgressLevel03 from '../screens/home/game/game02/progress/Level03'
import Game02ProgressLevel04 from '../screens/home/game/game02/progress/Level04';
import Game02ProgressLevel05 from '../screens/home/game/game02/progress/Level05';
import Game02ProgressLevel06 from '../screens/home/game/game02/progress/Level06';
import MentalWellBeingTypes from '../screens/home/game/MentalWellBeingTypes';
const Stack = createStackNavigator();
function GameNavigator() {
......@@ -113,6 +114,10 @@ function GameNavigator() {
name={ROUTES.MainDetailsFormInSinhala}
component={MainDetailsFormInSinhala}
/>
<Stack.Screen
name={ROUTES.MentalWellBeingTypes}
component={MentalWellBeingTypes}
/>
<Stack.Screen name={ROUTES.GameLevelPage} component={GameLevelPage} />
<Stack.Screen name={ROUTES.Level01} component={Level01} />
<Stack.Screen name={ROUTES.Level02} component={Level02} />
......
src/screens/home/game/MainDetailsForm.js
View file @ 828c667b
......@@ -17,6 +17,27 @@ const MainDetailsForm = ({navigation}) => {
const [age, setAge] = useState('');
const [previousChildBirthExperiences, setPreviousChildBirthExperiences] =
useState('');
const [ageError, setAgeError] = useState('');
const [childBirthError, setChildBirthError] = useState('');
const handleValidation = () => {
let valid = true;
if (age.trim() === '') {
setAgeError('Age is required');
valid = false;
} else {
setAgeError('');
}
if (previousChildBirthExperiences.trim() === '') {
setChildBirthError('Number of previous child births is required');
valid = false;
} else {
setChildBirthError('');
}
return valid;
};
const maritalStatusOptions = [
{
......@@ -62,9 +83,28 @@ const MainDetailsForm = ({navigation}) => {
setFamilyBackground(key);
};
const handleNext = () => {
if (handleValidation()) {
navigation.navigate(ROUTES.GAME_QUIZ_IN_ENGLISH, {
formData: {
age: age,
marital_status_divorced: maritalStatus === 'divorced' ? 1 : 0,
marital_status_married: maritalStatus === 'married' ? 1 : 0,
marital_status_single: maritalStatus === 'single' ? 1 : 0,
family_background_bad: familyBackground === 'bad' ? 1 : 0,
family_background_good: familyBackground === 'good' ? 1 : 0,
family_background_normal: familyBackground === 'normal' ? 1 : 0,
previous_child_birth_experiences: previousChildBirthExperiences,
},
});
}
};
return (
<>
<ScrollView style={styles.container}>
<ScrollView
style={styles.scrollContainer}
contentContainerStyle={styles.contentContainer}>
<LinearGradient
style={{
flex: 1,
......@@ -84,7 +124,7 @@ const MainDetailsForm = ({navigation}) => {
color: COLORS.black,
fontSize: 20,
fontWeight: 'bold',
marginTop: 40,
marginTop: 20,
marginBottom: 40,
justifyContent: 'center',
alignItems: 'center',
......@@ -99,7 +139,7 @@ const MainDetailsForm = ({navigation}) => {
style={{
fontSize: 15,
fontWeight: 'bold',
marginTop: 20,
marginTop: 1,
marginBottom: 20,
color: COLORS.black,
}}>
......@@ -123,10 +163,16 @@ const MainDetailsForm = ({navigation}) => {
color: COLORS.black,
elevation: 17,
}}
onChangeText={text => setAge(text)} // Use setAge for the age field
onChangeText={text => {
setAge(text);
if (text.trim() !== '') {
setAgeError('');
}
}}
keyboardType="numeric" // Set keyboardType appropriately
value={age}
/>
{!!ageError && <Text style={styles.errorText}>{ageError}</Text>}
</View>
<View style={{marginTop: 15}}>
<Text
......@@ -165,7 +211,8 @@ const MainDetailsForm = ({navigation}) => {
marginBottom: 20,
color: COLORS.black,
}}>
Current Situation of Family Background:
Current Situation of Family Background (Financial / Economic/
Partner's Supportness):
</Text>
<View style={styles.radioContainer}>
{familyBackgroundOptions.map(item => (
......@@ -213,41 +260,63 @@ const MainDetailsForm = ({navigation}) => {
elevation: 17,
}}
keyboardType="number-pad"
onChangeText={text => setPreviousChildBirthExperiences(text)} // Use setAge for the age field // Set keyboardType appropriately
onChangeText={text => {
setPreviousChildBirthExperiences(text);
if (text.trim() !== '') {
setChildBirthError('');
}
}}
value={previousChildBirthExperiences}
/>
{!!childBirthError && (
<Text style={styles.errorText}>{childBirthError}</Text>
)}
</View>
<View style={{marginTop: 15}}>
<Text
semi
style={{
fontSize: 15,
fontWeight: 'bold',
marginTop: 20,
marginBottom: 20,
color: COLORS.black,
}}>
Experience of Previous Child Birth:
</Text>
<TextInput
style={{
backgroundColor: '#ffffff',
borderRadius: 15,
height: 48,
marginBottom: 10,
marginTop: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 8,
},
shadowOpacity: 0.46,
shadowRadius: 11.14,
fontSize: 13,
color: COLORS.black,
elevation: 17,
}}
/>
</View>
<View style={{marginTop: 55}}>
<TouchableOpacity
style={{
backgroundColor: COLORS.pastal_blue,
height: 50,
marginBottom: 20,
marginBottom: 50,
justifyContent: 'center',
alignItems: 'center',
elevation: 10,
borderRadius: 14,
width: '100%',
}}
onPress={() =>
navigation.navigate(ROUTES.GAME_QUIZ_IN_ENGLISH, {
formData: {
age: age,
marital_status_divorced:
maritalStatus === 'divorced' ? 1 : 0,
marital_status_married:
maritalStatus === 'married' ? 1 : 0,
marital_status_single: maritalStatus === 'single' ? 1 : 0,
family_background_bad: familyBackground === 'bad' ? 1 : 0,
family_background_good:
familyBackground === 'good' ? 1 : 0,
family_background_normal:
familyBackground === 'normal' ? 1 : 0,
previous_child_birth_experiences:
previousChildBirthExperiences,
},
})
}>
onPress={handleNext}>
<Text
bold
medium
......@@ -269,6 +338,12 @@ const MainDetailsForm = ({navigation}) => {
};
const styles = StyleSheet.create({
scrollContainer: {
flexGrow: 1,
},
contentContainer: {
paddingBottom: 40, // Adds padding at the bottom
},
brandViewText: {
color: '#FFFFFF',
fontSize: 40,
......@@ -278,8 +353,6 @@ const styles = StyleSheet.create({
flex: 1,
height: 860,
backgroundColor: COLORS.purple,
// borderTopStartRadius: 30,
// borderTopEndRadius: 30,
},
radioContainer: {
flexDirection: 'row',
......@@ -314,6 +387,9 @@ const styles = StyleSheet.create({
container: {
flex: 1,
},
errorText: {
color: 'red',
},
});
export default MainDetailsForm;
src/screens/home/game/MainDetailsFormInSinhala.js
View file @ 828c667b
......@@ -17,6 +17,27 @@ const MainDetailsFormInSinhala = ({navigation}) => {
const [age, setAge] = useState('');
const [previousChildBirthExperiences, setPreviousChildBirthExperiences] =
useState('');
const [ageError, setAgeError] = useState('');
const [childBirthError, setChildBirthError] = useState('');
const handleValidation = () => {
let valid = true;
if (age.trim() === '') {
setAgeError('වයස අනිවාර්ය වේ');
valid = false;
} else {
setAgeError('');
}
if (previousChildBirthExperiences.trim() === '') {
setChildBirthError('පෙර දරු උපත් සංඛ්‍යාව අනිවාර්ය වේ.');
valid = false;
} else {
setChildBirthError('');
}
return valid;
};
const maritalStatusOptions = [
{
......@@ -62,9 +83,28 @@ const MainDetailsFormInSinhala = ({navigation}) => {
setFamilyBackground(key);
};
const handleNext = () => {
if (handleValidation()) {
navigation.navigate(ROUTES.GAME_QUIZ_IN_SINHALA, {
formData: {
age: age,
marital_status_divorced: maritalStatus === 'divorced' ? 1 : 0,
marital_status_married: maritalStatus === 'married' ? 1 : 0,
marital_status_single: maritalStatus === 'single' ? 1 : 0,
family_background_bad: familyBackground === 'bad' ? 1 : 0,
family_background_good: familyBackground === 'good' ? 1 : 0,
family_background_normal: familyBackground === 'normal' ? 1 : 0,
previous_child_birth_experiences: previousChildBirthExperiences,
},
});
}
};
return (
<>
<ScrollView style={styles.container}>
<ScrollView
style={styles.scrollContainer}
contentContainerStyle={styles.contentContainer}>
<LinearGradient
style={{
flex: 1,
......@@ -123,11 +163,17 @@ const MainDetailsFormInSinhala = ({navigation}) => {
color: COLORS.black,
elevation: 17,
}}
onChangeText={text => setAge(text)} // Use setAge for the age field
onChangeText={text => {
setAge(text);
if (text.trim() !== '') {
setAgeError('');
}
}}
keyboardType="numeric" // Set keyboardType appropriately
value={age}
required
/>
{!!ageError && <Text style={styles.errorText}>{ageError}</Text>}
</View>
<View style={{marginTop: 15}}>
<Text
......@@ -166,7 +212,8 @@ const MainDetailsFormInSinhala = ({navigation}) => {
marginBottom: 20,
color: COLORS.black,
}}>
වත්මන් පවුල් පසුබිම් තත්ත්වය:
වත්මන් පවුල් පසුබිම් තත්ත්වය (මූල්‍යමය / ආර්ථිකමය / හවුල්කරුගේ
සහාය):
</Text>
<View style={styles.radioContainer}>
{familyBackgroundOptions.map(item => (
......@@ -214,41 +261,66 @@ const MainDetailsFormInSinhala = ({navigation}) => {
elevation: 17,
}}
keyboardType="number-pad"
onChangeText={text => setPreviousChildBirthExperiences(text)} // Use setAge for the age field // Set keyboardType appropriately
onChangeText={text => {
setPreviousChildBirthExperiences(text);
if (text.trim() !== '') {
setChildBirthError('');
}
}}
value={previousChildBirthExperiences}
/>
{!!childBirthError && (
<Text style={styles.errorText}>{childBirthError}</Text>
)}
</View>
<View style={{marginTop: 15}}>
<Text
semi
style={{
fontSize: 15,
fontWeight: 'bold',
marginTop: 20,
marginBottom: 20,
color: COLORS.black,
}}>
පෙර දරු උපත පිළිබඳ අත්දැකීම්:
</Text>
<TextInput
style={{
backgroundColor: '#ffffff',
borderRadius: 15,
height: 48,
marginBottom: 10,
marginTop: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 8,
},
shadowOpacity: 0.46,
shadowRadius: 11.14,
fontSize: 13,
color: COLORS.black,
elevation: 17,
}}
// keyboardType="number-pad"
// onChangeText={text => setPreviousChildBirthExperiences(text)} // Use setAge for the age field // Set keyboardType appropriately
// value={previousChildBirthExperiences}
/>
</View>
<View style={{marginTop: 35}}>
<TouchableOpacity
style={{
backgroundColor: COLORS.pastal_blue,
height: 50,
marginBottom: 10,
marginBottom: 50,
justifyContent: 'center',
alignItems: 'center',
elevation: 10,
borderRadius: 14,
width: '100%',
}}
onPress={() =>
navigation.navigate(ROUTES.GAME_QUIZ_IN_SINHALA, {
formData: {
age: age,
marital_status_divorced:
maritalStatus === 'divorced' ? 1 : 0,
marital_status_married:
maritalStatus === 'married' ? 1 : 0,
marital_status_single: maritalStatus === 'single' ? 1 : 0,
family_background_bad: familyBackground === 'bad' ? 1 : 0,
family_background_good:
familyBackground === 'good' ? 1 : 0,
family_background_normal:
familyBackground === 'normal' ? 1 : 0,
previous_child_birth_experiences:
previousChildBirthExperiences,
},
})
}>
onPress={handleNext}>
<Text
bold
medium
......@@ -269,6 +341,12 @@ const MainDetailsFormInSinhala = ({navigation}) => {
};
const styles = StyleSheet.create({
scrollContainer: {
flexGrow: 1,
},
contentContainer: {
paddingBottom: 40, // Adds padding at the bottom
},
brandViewText: {
color: '#FFFFFF',
fontSize: 40,
......@@ -312,6 +390,9 @@ const styles = StyleSheet.create({
container: {
flex: 1,
},
errorText: {
color: 'red',
},
});
export default MainDetailsFormInSinhala;
src/screens/home/game/MentalWellBeingTypes.js 0 → 100644
View file @ 828c667b
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {
ImageBackground,
Text,
View,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import {COLORS, IMGS, ROUTES} from '../../../constants';
const MentalWellBeingTypes = ({navigation, route}) => {
const {predictedGameLevel} = route.params;
return (
<>
<View style={styles.bottomView}>
<View style={{padding: 25}}>
<View style={{marginTop: 40}}>
<TouchableOpacity
style={{
backgroundColor: '#260B8C',
height: 400,
marginBottom: 20,
alignItems: 'center',
marginHorizontal: 10,
borderRadius: 24,
width: 350,
}}>
<View style={styles.container}>
<View style={styles.imageContainer}>
<ImageBackground
source={IMGS.well_being}
style={styles.backgroundImage}
resizeMode="cover"></ImageBackground>
</View>
<View style={styles.box}></View>
<Text
bold
medium
style={{
color: 'black',
fontSize: 16,
marginTop: -50,
// marginLeft: 20,
fontWeight: 'bold',
textAlign: 'center',
}}>
Playing games can contribute to making you happy, perhaps even
without therapy.
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => {
navigation.navigate(ROUTES.GameLevelPage, {
predictedGameLevel,
});
}}>
<Text bold medium center style={styles.buttonText}>
Check Your Gaming Level
</Text>
</TouchableOpacity>
</View>
</View>
</View>
</>
);
};
const styles = StyleSheet.create({
brandViewText: {
color: '#FFFFFF',
fontSize: 40,
},
bottomView: {
flex: 1.5,
backgroundColor: COLORS.blue,
},
backgroundImage: {
flex: 1,
width: 350,
height: 400,
borderRadius: 50,
},
imageContainer: {
borderRadius: 24,
overflow: 'hidden',
width: '100%',
height: '100%',
},
box: {
backgroundColor: 'white',
height: 70,
marginTop: -38,
opacity: 0.5,
},
button: {
backgroundColor: COLORS.dark,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 14,
width: 350,
height: 50,
marginTop: 190,
},
buttonText: {
color: 'white',
fontWeight: 'bold',
fontSize: 17,
},
});
export default MentalWellBeingTypes;
src/screens/home/game/QuestionsInEnglish.js
View file @ 828c667b
......@@ -6,6 +6,7 @@ import {
TouchableOpacity,
Text,
ActivityIndicator,
ScrollView,
} from 'react-native';
import axios from 'axios';
import {useNavigation} from '@react-navigation/native';
......@@ -94,40 +95,20 @@ const QuestionInEnglishPage = ({navigation, route}) => {
<ActivityIndicator size={150} color={COLORS.dark_purple} />
</View>
) : (
<LinearGradient
style={{
flex: 1,
width: '100%',
height: '100%',
}}
colors={[COLORS.white, '#FDCEDF']}>
{questions
.slice(questionIndex, questionIndex + 2)
.map((question, index) => (
<View style={{padding: 18, marginTop: 42}} key={question._id}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Text
style={{
color: COLORS.pastal_blue,
fontSize: 22,
fontWeight: 'bold',
}}>
Question {questionIndex + index + 1}
</Text>
</View>
<View
style={{
backgroundColor: 'white',
borderColor: COLORS.pink,
borderWidth: 3,
borderRadius: 17,
marginTop: 5,
padding: 12,
}}>
<ScrollView
style={styles.scrollContainer}
contentContainerStyle={styles.contentContainer}>
<LinearGradient
style={{
flex: 1,
width: '100%',
height: '100%',
}}
colors={[COLORS.white, '#FDCEDF']}>
{questions
.slice(questionIndex, questionIndex + 2)
.map((question, index) => (
<View style={{padding: 18, marginTop: 42}} key={question._id}>
<View
style={{
justifyContent: 'center',
......@@ -135,154 +116,178 @@ const QuestionInEnglishPage = ({navigation, route}) => {
}}>
<Text
style={{
color: 'black',
fontSize: 15,
color: COLORS.pastal_blue,
fontSize: 22,
fontWeight: 'bold',
marginTop: 10,
}}>
{question.question}
Question {questionIndex + index + 1}
</Text>
</View>
<View
style={{
marginTop: 10,
gap: 3,
marginBottom: 5,
color: 'black',
marginRight: 25,
backgroundColor: 'white',
borderColor: COLORS.pink,
borderWidth: 3,
borderRadius: 17,
marginTop: 5,
padding: 12,
}}>
<RadioButton
label={questions[questionIndex + index].answers[0]}
selected={
selectedAnswerIndices[questionIndex + index] === 0
}
onPress={() =>
setSelectedAnswer(0, questionIndex + index)
}
value={3}
/>
<RadioButton
label={questions[questionIndex + index].answers[1]}
selected={
selectedAnswerIndices[questionIndex + index] === 1
}
onPress={() =>
setSelectedAnswer(1, questionIndex + index)
}
value={2}
/>
<RadioButton
label={questions[questionIndex + index].answers[2]}
selected={
selectedAnswerIndices[questionIndex + index] === 2
}
onPress={() =>
setSelectedAnswer(2, questionIndex + index)
}
value={1}
/>
<RadioButton
textColor="black"
label={questions[questionIndex + index].answers[3]}
selected={
selectedAnswerIndices[questionIndex + index] === 3
}
onPress={() =>
setSelectedAnswer(3, questionIndex + index)
}
value={0}
/>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Text
style={{
color: 'black',
fontSize: 15,
fontWeight: 'bold',
marginTop: 10,
}}>
{question.question}
</Text>
</View>
<View
style={{
marginTop: 10,
gap: 3,
marginBottom: 5,
color: 'black',
marginRight: 25,
}}>
<RadioButton
label={questions[questionIndex + index].answers[0]}
selected={
selectedAnswerIndices[questionIndex + index] === 0
}
onPress={() =>
setSelectedAnswer(0, questionIndex + index)
}
value={3}
/>
<RadioButton
label={questions[questionIndex + index].answers[1]}
selected={
selectedAnswerIndices[questionIndex + index] === 1
}
onPress={() =>
setSelectedAnswer(1, questionIndex + index)
}
value={2}
/>
<RadioButton
label={questions[questionIndex + index].answers[2]}
selected={
selectedAnswerIndices[questionIndex + index] === 2
}
onPress={() =>
setSelectedAnswer(2, questionIndex + index)
}
value={1}
/>
<RadioButton
textColor="black"
label={questions[questionIndex + index].answers[3]}
selected={
selectedAnswerIndices[questionIndex + index] === 3
}
onPress={() =>
setSelectedAnswer(3, questionIndex + index)
}
value={0}
/>
</View>
</View>
</View>
</View>
))}
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 50,
marginBottom: 30,
}}>
{!isOnFirstQuestions && (
<TouchableOpacity
style={{
backgroundColor: COLORS.pastal_blue,
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 20,
borderRadius: 16,
width: 140,
elevation: 10,
}}
onPress={handlePrevious}>
<Text
bold
medium
center
))}
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 50,
marginBottom: 100,
}}>
{!isOnFirstQuestions && (
<TouchableOpacity
style={{
color: 'white',
fontSize: 20,
fontWeight: 'bold',
}}>
Back
</Text>
</TouchableOpacity>
)}
{!isOnLastQuestions && (
<TouchableOpacity
style={{
backgroundColor: COLORS.pastal_blue,
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: isOnFirstQuestions ? 240 : 20,
borderRadius: 16,
width: 140,
elevation: 10,
}}
onPress={handleNext}>
<Text
bold
medium
center
backgroundColor: COLORS.pastal_blue,
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 20,
borderRadius: 16,
width: 140,
elevation: 10,
}}
onPress={handlePrevious}>
<Text
bold
medium
center
style={{
color: 'white',
fontSize: 20,
fontWeight: 'bold',
}}>
Back
</Text>
</TouchableOpacity>
)}
{!isOnLastQuestions && (
<TouchableOpacity
style={{
color: 'white',
fontWeight: 'bold',
fontSize: 20,
}}>
Next
</Text>
</TouchableOpacity>
)}
{isOnLastQuestions && (
<TouchableOpacity
style={{
backgroundColor: '#DE3163',
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 20,
borderRadius: 16,
width: 150,
elevation: 10,
}}
onPress={handleNavigationToQuizScore}>
<Text
bold
medium
center
backgroundColor: COLORS.pastal_blue,
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: isOnFirstQuestions ? 240 : 20,
borderRadius: 16,
width: 140,
elevation: 10,
}}
onPress={handleNext}>
<Text
bold
medium
center
style={{
color: 'white',
fontWeight: 'bold',
fontSize: 20,
}}>
Next
</Text>
</TouchableOpacity>
)}
{isOnLastQuestions && (
<TouchableOpacity
style={{
color: 'white',
fontSize: 20,
fontWeight: 'bold',
}}>
Submit
</Text>
</TouchableOpacity>
)}
</View>
</LinearGradient>
backgroundColor: '#DE3163',
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 20,
borderRadius: 16,
width: 150,
elevation: 10,
}}
onPress={handleNavigationToQuizScore}>
<Text
bold
medium
center
style={{
color: 'white',
fontSize: 20,
fontWeight: 'bold',
}}>
Submit
</Text>
</TouchableOpacity>
)}
</View>
</LinearGradient>
</ScrollView>
)}
</>
);
......@@ -303,4 +308,10 @@ const styles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'center',
},
scrollContainer: {
flexGrow: 1,
},
contentContainer: {
paddingBottom: 40, // Adds padding at the bottom
},
});
src/screens/home/game/QuestionsInShinhala.js
View file @ 828c667b
......@@ -6,6 +6,7 @@ import {
TouchableOpacity,
Text,
ActivityIndicator,
ScrollView,
} from 'react-native';
import axios from 'axios';
import {useNavigation} from '@react-navigation/native';
......@@ -91,40 +92,20 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
<ActivityIndicator size={150} color={COLORS.dark_purple} />
</View>
) : (
<LinearGradient
style={{
flex: 1,
width: '100%',
height: '100%',
}}
colors={[COLORS.white, '#FDCEDF']}>
{questions
.slice(questionIndex, questionIndex + 2)
.map((question, index) => (
<View style={{padding: 18, marginTop: 42}} key={question._id}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Text
style={{
color: COLORS.pastal_blue,
fontSize: 22,
fontWeight: 'bold',
}}>
ප්‍රශ්නය {questionIndex + index + 1}
</Text>
</View>
<View
style={{
backgroundColor: 'white',
borderColor: COLORS.pink,
borderWidth: 3,
borderRadius: 17,
marginTop: 5,
padding: 12,
}}>
<ScrollView
style={styles.scrollContainer}
contentContainerStyle={styles.contentContainer}>
<LinearGradient
style={{
flex: 1,
width: '100%',
height: '100%',
}}
colors={[COLORS.white, '#FDCEDF']}>
{questions
.slice(questionIndex, questionIndex + 2)
.map((question, index) => (
<View style={{padding: 18, marginTop: 42}} key={question._id}>
<View
style={{
justifyContent: 'center',
......@@ -132,154 +113,178 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
}}>
<Text
style={{
color: 'black',
fontSize: 15,
color: COLORS.pastal_blue,
fontSize: 22,
fontWeight: 'bold',
marginTop: 10,
}}>
{question.question}
ප්‍රශ්නය {questionIndex + index + 1}
</Text>
</View>
<View
style={{
marginTop: 1,
gap: 3,
marginBottom: 1,
color: 'black',
marginRight: 25,
backgroundColor: 'white',
borderColor: COLORS.pink,
borderWidth: 3,
borderRadius: 17,
marginTop: 5,
padding: 12,
}}>
<RadioButton
label={questions[questionIndex + index].answers[0]}
selected={
selectedAnswerIndices[questionIndex + index] === 0
}
onPress={() =>
setSelectedAnswer(0, questionIndex + index)
}
value={3}
/>
<RadioButton
label={questions[questionIndex + index].answers[1]}
selected={
selectedAnswerIndices[questionIndex + index] === 1
}
onPress={() =>
setSelectedAnswer(1, questionIndex + index)
}
value={2}
/>
<RadioButton
label={questions[questionIndex + index].answers[2]}
selected={
selectedAnswerIndices[questionIndex + index] === 2
}
onPress={() =>
setSelectedAnswer(2, questionIndex + index)
}
value={1}
/>
<RadioButton
textColor="black"
label={questions[questionIndex + index].answers[3]}
selected={
selectedAnswerIndices[questionIndex + index] === 3
}
onPress={() =>
setSelectedAnswer(3, questionIndex + index)
}
value={0}
/>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Text
style={{
color: 'black',
fontSize: 15,
fontWeight: 'bold',
marginTop: 10,
}}>
{question.question}
</Text>
</View>
<View
style={{
marginTop: 1,
gap: 3,
marginBottom: 1,
color: 'black',
marginRight: 25,
}}>
<RadioButton
label={questions[questionIndex + index].answers[0]}
selected={
selectedAnswerIndices[questionIndex + index] === 0
}
onPress={() =>
setSelectedAnswer(0, questionIndex + index)
}
value={3}
/>
<RadioButton
label={questions[questionIndex + index].answers[1]}
selected={
selectedAnswerIndices[questionIndex + index] === 1
}
onPress={() =>
setSelectedAnswer(1, questionIndex + index)
}
value={2}
/>
<RadioButton
label={questions[questionIndex + index].answers[2]}
selected={
selectedAnswerIndices[questionIndex + index] === 2
}
onPress={() =>
setSelectedAnswer(2, questionIndex + index)
}
value={1}
/>
<RadioButton
textColor="black"
label={questions[questionIndex + index].answers[3]}
selected={
selectedAnswerIndices[questionIndex + index] === 3
}
onPress={() =>
setSelectedAnswer(3, questionIndex + index)
}
value={0}
/>
</View>
</View>
</View>
</View>
))}
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 50,
marginBottom: 30,
}}>
{!isOnFirstQuestions && (
<TouchableOpacity
style={{
backgroundColor: COLORS.pastal_blue,
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 20,
borderRadius: 16,
width: 140,
elevation: 10,
}}
onPress={handlePrevious}>
<Text
bold
medium
center
))}
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 50,
marginBottom: 100,
}}>
{!isOnFirstQuestions && (
<TouchableOpacity
style={{
color: 'white',
fontSize: 20,
fontWeight: 'bold',
}}>
ආපසු
</Text>
</TouchableOpacity>
)}
{!isOnLastQuestions && (
<TouchableOpacity
style={{
backgroundColor: COLORS.pastal_blue,
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: isOnFirstQuestions ? 240 : 20,
borderRadius: 16,
width: 140,
elevation: 10,
}}
onPress={handleNext}>
<Text
bold
medium
center
backgroundColor: COLORS.pastal_blue,
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 20,
borderRadius: 16,
width: 140,
elevation: 10,
}}
onPress={handlePrevious}>
<Text
bold
medium
center
style={{
color: 'white',
fontSize: 20,
fontWeight: 'bold',
}}>
ආපසු
</Text>
</TouchableOpacity>
)}
{!isOnLastQuestions && (
<TouchableOpacity
style={{
color: 'white',
fontSize: 20,
fontWeight: 'bold',
}}>
ඊළඟ
</Text>
</TouchableOpacity>
)}
{isOnLastQuestions && (
<TouchableOpacity
style={{
backgroundColor: '#DE3163',
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 20,
borderRadius: 16,
width: 150,
elevation: 10,
}}
onPress={handleNavigationToQuizScore}>
<Text
bold
medium
center
backgroundColor: COLORS.pastal_blue,
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: isOnFirstQuestions ? 240 : 20,
borderRadius: 16,
width: 140,
elevation: 10,
}}
onPress={handleNext}>
<Text
bold
medium
center
style={{
color: 'white',
fontSize: 20,
fontWeight: 'bold',
}}>
ඊළඟ
</Text>
</TouchableOpacity>
)}
{isOnLastQuestions && (
<TouchableOpacity
style={{
color: 'white',
fontSize: 20,
fontWeight: 'bold',
}}>
ස්ථිර කරන්න
</Text>
</TouchableOpacity>
)}
</View>
</LinearGradient>
backgroundColor: '#DE3163',
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 20,
borderRadius: 16,
width: 150,
elevation: 10,
}}
onPress={handleNavigationToQuizScore}>
<Text
bold
medium
center
style={{
color: 'white',
fontSize: 20,
fontWeight: 'bold',
}}>
ස්ථිර කරන්න
</Text>
</TouchableOpacity>
)}
</View>
</LinearGradient>
</ScrollView>
)}
</>
);
......@@ -302,4 +307,10 @@ const styles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'center',
},
scrollContainer: {
flexGrow: 1,
},
contentContainer: {
paddingBottom: 40, // Adds padding at the bottom
},
});
src/screens/home/game/QuizOptions.js
View file @ 828c667b
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable react/self-closing-comp */
import React from 'react';
import {Text, Image, View, StyleSheet, TouchableOpacity} from 'react-native';
import {COLORS, ROUTES} from '../../../constants';
import {
Text,
ImageBackground,
View,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import {COLORS, ROUTES, IMGS} from '../../../constants';
const QuizOptionsPage = ({navigation}) => {
return (
......@@ -12,13 +19,10 @@ const QuizOptionsPage = ({navigation}) => {
justifyContent: 'center',
alignItems: 'center',
}}>
<Image
source={{
uri: 'https://www.cdc.gov/reproductivehealth/features/maternal-depression/images/feature-maternal-health-depression-2021.png?_=20351',
}}
style={{width: 450, height: 400}}
resizeMode="contain"
/>
<ImageBackground
source={IMGS.motherWithMidWife}
style={styles.backgroundImage}
resizeMode="cover"></ImageBackground>
</View>
<View style={styles.bottomView}>
<View style={{padding: 25}}>
......@@ -32,7 +36,7 @@ const QuizOptionsPage = ({navigation}) => {
color: COLORS.navyBlue,
fontSize: 22,
fontWeight: 'bold',
marginBottom: 25,
marginBottom: 20,
fontFamily: 'monospace',
textAlign: 'center',
}}>
......@@ -55,16 +59,6 @@ const QuizOptionsPage = ({navigation}) => {
}}>
Try with Us & Have a fun
</Text>
<Text
style={{
color: 'black',
fontSize: 18,
fontWeight: 'bold',
fontFamily: 'monospace',
textAlign: 'center',
}}>
Play Games & Enjoy your time
</Text>
</View>
<View
style={{
......@@ -76,7 +70,7 @@ const QuizOptionsPage = ({navigation}) => {
color: 'black',
fontSize: 16,
fontWeight: 'bold',
marginTop: 30,
marginTop: 20,
textAlign: 'center',
fontFamily: 'monospace',
}}>
......@@ -93,7 +87,7 @@ const QuizOptionsPage = ({navigation}) => {
color: 'black',
fontSize: 16,
fontWeight: 'bold',
marginTop: 40,
marginTop: 30,
textAlign: 'center',
fontFamily: 'monospace',
}}>
......@@ -160,6 +154,12 @@ const styles = StyleSheet.create({
flex: 2,
backgroundColor: '#FFC0D9',
},
backgroundImage: {
flex: 1,
width: 350,
height: 400,
borderRadius: 50,
},
});
export default QuizOptionsPage;
src/screens/home/game/QuizScore.js
View file @ 828c667b
......@@ -64,7 +64,7 @@ const QuizScoreDisplayPage = ({route, navigation}) => {
response.data.prediction.match(/\d+/)[0],
10,
);
navigation.navigate(ROUTES.GameLevelPage, {predictedGameLevel});
navigation.navigate(ROUTES.MentalWellBeingTypes, {predictedGameLevel});
} else {
console.error('API call failed with response:', response.data);
}
......@@ -85,7 +85,7 @@ const QuizScoreDisplayPage = ({route, navigation}) => {
style={styles.backgroundImage}
resizeMode="cover">
<View style={styles.container}>
<Text style={styles.mainText}>Your Depression Level</Text>
<Text style={styles.mainText}>Your Mental Well-Being</Text>
<View style={styles.mainCircle}>
<View style={styles.circle}>
<Text style={styles.scoreText}>
......@@ -98,7 +98,7 @@ const QuizScoreDisplayPage = ({route, navigation}) => {
style={styles.button}
onPress={handleChooseGamePress}>
<Text bold medium center style={styles.buttonText}>
Check Your Gaming Level
Let's Improve Mental Well-Being
</Text>
</TouchableOpacity>
</View>
......@@ -155,7 +155,7 @@ const styles = StyleSheet.create({
marginBottom: 30,
fontWeight: 'bold',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
display: 'flex',
marginTop: 22,
},
......@@ -173,6 +173,7 @@ const styles = StyleSheet.create({
},
buttonText: {
color: 'white',
fontWeight: 'bold',
fontSize: 17,
},
bottomContainer: {
......
src/screens/home/game/WelcomeGame.js
View file @ 828c667b
......@@ -16,7 +16,7 @@ const WelcomePageGame = ({navigation}) => {
<Image
source={IMGS.game_img_1}
style={{
height: 360,
height: 340,
width: 190,
borderRadius: 20,
position: 'absolute',
......@@ -35,7 +35,7 @@ const WelcomePageGame = ({navigation}) => {
style={{
paddingHorizontal: 22,
position: 'absolute',
top: 410,
top: 390,
width: '100%',
}}>
<Text
......@@ -80,7 +80,7 @@ const WelcomePageGame = ({navigation}) => {
backgroundColor: COLORS.purple_new,
borderColor: COLORS.purple_new,
height: 50,
marginBottom: 50,
marginBottom: 70,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 14,
......@@ -92,7 +92,11 @@ const WelcomePageGame = ({navigation}) => {
<Text
medium
center
style={{color: 'white', fontSize: 24, fontWeight: 'bold'}}>
style={{
color: 'white',
fontSize: 24,
fontWeight: 'bold',
}}>
Let Us Help You
</Text>
</TouchableOpacity>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment