Merge branch 'master' of http://gitlab.sliit.lk/21_22-j-38/21_22j-38 into it18218640

API/app.py

@@ -228,5 +228,19 @@ def reading_result(userId):
     return make_response(body)
 
 
+# @app.route("/result", methods=['GET'])
+# def reading_result():
+#     req = request.get_json()
+#     userId = req['userId']
+#     result = get_reading_result(userId)
+#     response = {
+#         "data": result,
+#         "message": "Success",
+#         "status": 200
+#     }
+#     body = jsonify(response)
+#     return make_response(body)
+
+
 if __name__ == "__main__":
     app.run(host='192.168.8.100')

API/model/readModel.py

@@ -4,7 +4,7 @@ from API.util.util import getUUID
 
 
 def get_reading_result(userId):
-    qry = 'SELECT * FROM reading WHERE userId = "{}"'.format(userId)
+    qry = 'SELECT userId,word,triedCount,level FROM reading WHERE userId = "{}"'.format(userId)
     return get_data(qry)
 
 

frontend/package-lock.json

 {
   "name": "firstapp",
   "version": "0.0.1",
-  "lockfileVersion": 2,
+  "lockfileVersion": 1,
   "requires": true,
   "packages": {
     "": {
@@ -30,7 +30,7 @@
         "react-native-reanimated": "^2.2.4",
         "react-native-safe-area-context": "^3.3.2",
         "react-native-screens": "^3.9.0",
-        "react-native-table-component": "^1.2.1",
+        "react-native-table-component": "^1.2.2",
         "react-native-tts": "^4.1.0",
         "react-native-vector-icons": "^9.0.0",
         "react-navigation-header-buttons": "^9.0.1",
@@ -22513,14 +22513,6 @@
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
       "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
     },
-    "string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "requires": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
     "string-hash-64": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/string-hash-64/-/string-hash-64-1.0.3.tgz",
@@ -22600,6 +22592,14 @@
         "define-properties": "^1.1.3"
       }
     },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",

frontend/package.json

@@ -32,7 +32,7 @@
     "react-native-reanimated": "^2.2.4",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-screens": "^3.9.0",
-    "react-native-table-component": "^1.2.1",
+    "react-native-table-component": "^1.2.2",
     "react-native-tts": "^4.1.0",
     "react-native-vector-icons": "^9.0.0",
     "react-navigation-header-buttons": "^9.0.1",

frontend/src/assets/read/data/ReadData.js

@@ -5,6 +5,7 @@ export const ImagePaths = {
   robot1: require('../image/robot1.png'),
   robot2: require('../image/activity-2-rob.png'),
   backgroundBasic: require('../image/activity-2-backg.jpeg'),
+  resultBackground: require('../image/rersultBacground.jpeg'),
   no: require('../image/no.png'),
   go: require('../image/go.png'),
   he: require('../image/he.png'),

frontend/src/component/memory/Header.js

@@ -15,7 +15,7 @@ const styles = StyleSheet.create({
         width: '100%',
         height: 90,
         paddingTop: 36,
-        backgroundColor: Colors.primary,
+        backgroundColor: '#5fcf93',
         justifyContent: 'center',
         alignItems: 'center'
     },

frontend/src/component/memory/MainButton.js

+import React from 'react'
+import {StyleSheet, View, Text, TouchableOpacity} from 'react-native'
+import Colors from '../../constants/Colors'
+
+const MainButton = (props) => {
+    return(
+        <TouchableOpacity onPress={props.onPress}>
+            <View style={{...styles.button, ...props.styles}}>
+                <Text style={styles.buttonText}>{props.children}</Text>
+            </View>
+        </TouchableOpacity>
+    );
+};
+
+const styles = StyleSheet.create({
+    button: {
+        backgroundColor: Colors.primary,
+        paddingVertical: 30,
+        paddingHorizontal: 30,
+        borderRadius: 25,
+        marginBottom: 20
+    },
+    buttonText: {
+        color: 'white',
+        fontSize: 30,
+        fontWeight: 'bold',
+        textAlign: 'center'
+    }
+});
+
+export default MainButton;
\ No newline at end of file

frontend/src/component/reading/ReadModal.js

+import React from 'react';
+import {
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  View,
+  ImageButton,
+  SafeAreaView,
+  ImageBackground,
+  Modal,
+  Image,
+  TouchableHighlight,
+} from 'react-native';
+import {useNavigation} from '@react-navigation/native';
+import {ImagePaths} from '../../assets/read/data/ReadData';
+
+export default function ReadModal(props) {
+  const {caption, validity, visibility, path} = props;
+
+  const navigation = useNavigation();
+
+  const navigate = () => {
+    
+  }
+  return (
+    <Modal
+      animationType="fade"
+      transparent={true}
+      hidden={true}
+      visible={visibility}
+      //   onRequestClose={() => {
+      //     setModalVisible2(!modalVisible2);
+      //       }}
+    >
+      <View style={styles.centeredView2}>
+        <View style={styles.modalView2}>
+          <Image style={styles.alert2} source={ImagePaths.robot1}></Image>
+
+          <Text style={styles.headStyle2}>{ caption}</Text>
+          <Text style={styles.head2Style2}>{validity}</Text>
+          <TouchableOpacity
+            style={[styles.buttonClose2]}
+            onPress={() => navigation.navigate(path)}>
+            <Image
+              source={ImagePaths.robot1}
+              resizeMode="contain"
+              style={{width: 100, height: 70, marginBottom: -10}}
+            />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  body: {
+    flex: 1,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  blackboard: {
+    marginTop: -420,
+    marginLeft: 240,
+    width: '70%',
+    height: 500,
+  },
+  robo: {
+    marginTop: -70,
+    marginLeft: -5,
+    width: 150,
+    height: 200,
+  },
+  textBody: {
+    marginTop: 150,
+    marginLeft: 95,
+    backgroundColor: '#1DCE92',
+    width: 200,
+    borderRadius: 50,
+    padding: 5,
+  },
+  text: {
+    fontSize: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: 'white',
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  button: {
+    padding: 10,
+    marginRight: 50,
+    color: '#000000',
+    marginLeft: 50,
+  },
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: -90,
+    marginLeft: -100,
+  },
+  modalView: {
+    marginRight: 20,
+    backgroundColor: '#00000000',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+
+  centeredView2: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 22,
+  },
+  modalView2: {
+    marginTop: -10,
+    margin: 20,
+    backgroundColor: '#FFFFFFEF',
+    borderRadius: 20,
+    padding: 35,
+    borderWidth: 5,
+    borderColor: '#red',
+    alignItems: 'center',
+    shadowColor: 'red',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button2: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonOpen2: {
+    backgroundColor: '#F194FF',
+  },
+  buttonClose2: {
+    // backgroundColor: "#1DCE92",
+  },
+  textStyle2: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  modalText2: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+  headStyle2: {
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    fontSize: 30,
+    marginBottom: 5,
+  },
+  head2Style2: {
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    fontSize: 30,
+    marginBottom: 20,
+  },
+  alert2: {
+    backgroundColor: 'white',
+    borderRadius: 50,
+    width: 100,
+    height: 100,
+    marginBottom: 20,
+    marginTop: -80,
+  },
+
+  centeredView3: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: -20,
+  },
+  modalView3: {
+    margin: 20,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 20,
+    padding: 20,
+    borderWidth: 5,
+    borderColor: '#1DCE92',
+    alignItems: 'center',
+    shadowColor: 'red',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button3: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonOpen3: {
+    backgroundColor: '#F194FF',
+  },
+  buttonClose3: {
+    backgroundColor: '#1DCE92',
+  },
+  textStyle3: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  headStyle3: {
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    fontSize: 30,
+    marginBottom: 5,
+  },
+  head2Style3: {
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    fontSize: 30,
+    marginBottom: 20,
+  },
+  modalText3: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+  alert3: {
+    backgroundColor: 'white',
+    borderRadius: 50,
+    width: 100,
+    height: 100,
+    marginBottom: 20,
+    marginTop: -65,
+  },
+});

frontend/src/component/reading/TableList.js

+import React, {useEffect, useState} from 'react';
+import {View, StyleSheet, ScrollView} from 'react-native';
+import {
+  Table,
+  TableWrapper,
+  Row,
+  Rows,
+  Col,
+} from 'react-native-table-component';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import Client from '../../screen/client/Client';
+import {fonts} from 'react-native-elements/dist/config';
+import {color} from 'react-native-reanimated';
+
+export default function TableList() {
+  const [tableData, setTableData] = useState({
+    tableHead: [],
+    data: [],
+  });
+
+  useEffect(() => {
+    AsyncStorage.getItem('userId')
+      .then(userId => {
+        getReadResult(userId);
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  }, []);
+
+  function getReadResult(userId) {
+    const data = {
+      userId: userId,
+    };
+    Client.get('result/' + userId)
+      .then(response => {
+        setTableData({
+          tableHead: ['Date', 'Word', 'Count', 'Level'],
+          data: response.data.data,
+        });
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  }
+
+  useEffect(() => {
+    // getResult(userId);
+  }, []);
+
+  return (
+    <ScrollView>
+      <View style={styles.container}>
+        <Table borderStyle={{borderWidth: 3, borderColor: '#fff'}}>
+          <Row
+            data={tableData.tableHead}
+            flexArr={[1, 1.5, 1, 1]}
+            style={styles.head}
+            textStyle={styles.text}
+          />
+          <TableWrapper style={styles.wrapper}>
+            <Rows
+              data={tableData.data}
+              flexArr={[1, 1.5, 1, 1]}
+              style={styles.row}
+              textStyle={styles.text}
+            />
+          </TableWrapper>
+        </Table>
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 0,
+    paddingTop: 70,
+    paddingLeft: 60,
+    paddingRight: 60,
+    marginTop: 0,
+  },
+  head: {height: 60, backgroundColor: '#f1f8ff'},
+  wrapper: {
+    flexDirection: 'row',
+    backgroundColor: '#f1f8ff',
+  },
+  title: {flex: 1},
+  row: {height: 40},
+  text: {textAlign: 'center', fontSize: 20, color: 'black'},
+});

frontend/src/constants/Countdown.js

 export default {
-    elementry: 7,
+    elementry: 5,
     medium: 5,
-    advance: 2
+    advance: 3
 }
\ No newline at end of file

frontend/src/router/router.js

@@ -7,7 +7,7 @@ import Home from '../screen/Home';
 import Start from '../screen/Start';
 import Register from '../screen/auth/Register';
 import Login from '../screen/auth/Login';
-import Splash from '../screen/splash/Splash';
+import Splash from '../screen/splash/splash';
 import Color from '../screen/Color';
 import Blue from '../screen/activity/Blue';
 import Blue2 from '../screen/activity/Blue2';
@@ -73,6 +73,7 @@ import Sam from '../screen/sample/sam';
 import Progress from '../screen/Progress';
 import ReadActivityFish from '../screen/reading/advanced/ReadActivityFish';
 import ReadActivityDog from '../screen/reading/advanced/ReadActivityDog';
+import ReadResults from '../screen/reading/result/ReadResults';
 
 const Stack = createNativeStackNavigator();
 
@@ -193,6 +194,11 @@ const AppRouter = () => {
           name="ReadActivityDog"
           component={ReadActivityDog}
         />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="ReadResults"
+          component={ReadResults}
+        />
         <Stack.Screen
           options={{headerShown: false}}
           name="ColorResult"
@@ -204,7 +210,7 @@ const AppRouter = () => {
           options={{
             title: 'Memory Games',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: Colors.primary},
+            headerStyle: {backgroundColor: '#5fcf93'}
           }}
         />
         <Stack.Screen
@@ -214,7 +220,7 @@ const AppRouter = () => {
             headerShown: true,
             title: 'Game Start',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: Colors.primary},
+            headerStyle: {backgroundColor: '#5fcf93'},
           }}
         />
         <Stack.Screen
@@ -284,7 +290,7 @@ const AppRouter = () => {
             headerShown: true,
             title: 'Game Over',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: Colors.primary},
+            headerStyle: {backgroundColor: '#5fcf93'},
           }}
         />
         <Stack.Screen
@@ -294,8 +300,8 @@ const AppRouter = () => {
             headerShown: true,
             title: 'Results',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: Colors.primary},
-          }}
+            headerStyle: {backgroundColor: '#5fcf93'},
+           }}
         />
         <Stack.Screen
           name="GameLevel"
@@ -304,8 +310,8 @@ const AppRouter = () => {
             headerShown: true,
             title: 'Levels',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: Colors.primary},
-          }}
+            headerStyle: {backgroundColor: '#5fcf93'},
+           }}
         />
         <Stack.Screen
           name="MediumLevelStart"
@@ -314,8 +320,8 @@ const AppRouter = () => {
             headerShown: true,
             title: 'Medium Level',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: Colors.primary},
-          }}
+            headerStyle: {backgroundColor: '#5fcf93'},
+           }}
         />
         <Stack.Screen
           name="AdvanceLevelStart"
@@ -324,8 +330,8 @@ const AppRouter = () => {
             headerShown: true,
             title: 'Advance Level',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: Colors.primary},
-          }}
+            headerStyle: {backgroundColor: '#5fcf93'},
+           }}
         />
         <Stack.Screen
           options={{headerShown: false}}

frontend/src/screen/Read.js

@@ -89,22 +89,22 @@ export default function Read() {
           />
           {/* {level1 == 0 && (
             <> */}
-              <ReadCategory
-                title={'Advanced'}
-                image={ImagePaths.roundTwo}
-                path={'ReadActivityDog'}
-              />
-            {/* </>
+          <ReadCategory
+            title={'Advanced'}
+            image={ImagePaths.roundTwo}
+            path={'ReadActivityDog'}
+          />
+          {/* </>
           )} */}
 
           {/* {level2 == 0 && (
             <> */}
-              <ReadCategory
-                title={'Result & Summery'}
-                image={ImagePaths.summery}
-                path={'ReadActivity'}
-              />
-            {/* </>
+          <ReadCategory
+            title={'Result & Summery'}
+            image={ImagePaths.summery}
+            path={'ReadResults'}
+          />
+          {/* </>
           )} */}
         </TouchableOpacity>
       </ScrollView>

frontend/src/screen/memory/GameLevel.js

 import { Center, Column, Row } from 'native-base';
-import React from 'react';
-import {Text, View, StyleSheet, Button} from 'react-native';
+import React, {useState} from 'react';
+import {Text, View, StyleSheet, Button, ScrollView, Image,ImageBackground, TouchableOpacity, Modal, Alert, Pressable} from 'react-native';
+import MainButton from '../../component/memory/MainButton';
 
 const GameLevel = ({navigation}) => {
+    const [modalVisible, setModalVisible] = useState(false);
+    const [mediumModalVisible, setMediumModalVisible] = useState(false);
     return (
-        <View style={styles.screen} >
-            <View style={styles.levelWrapper}>
-                <View style={styles.levelContainer}>
-                    <Button style={styles.btn} title='Elementry' onPress={()=>{navigation.navigate('StartGameScreen')}} />
-                    <Button style={styles.btn} title='Medium' onPress={()=>{navigation.navigate('MediumLevelStart')}} />
-                    <Button style={styles.btn} title='Advance' onPress={()=>{navigation.navigate('AdvanceLevelStart')}} />
-                </View>
+        <ScrollView>
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={modalVisible}
+        onRequestClose={() => {
+          Alert.alert("Modal has been closed.");
+          setModalVisible(!modalVisible);
+        }}
+      >
+        <View style={styles.centeredView}>
+          <View style={styles.modalView}>
+            <Text style={styles.modalText}>Select matching images, 5 seconds will be given for each!</Text>
+            <Text style={styles.modalTextBold}>Are you ready?</Text>
+            <View style={{ flexDirection: 'row' }} >
+            <Pressable
+              style={[styles.button, styles.buttonClose]}
+              onPress={() => {setModalVisible(!modalVisible); navigation.navigate('GameScreenOne'); }}
+            >
+              <Text style={styles.textStyle}>Yes</Text>
+            </Pressable>
+            <Pressable
+              style={[styles.button, styles.buttonClose]}
+              onPress={() => {setModalVisible(!modalVisible)}}
+            >
+              <Text style={styles.textStyle}>No</Text>
+            </Pressable>
             </View>
+          </View>
         </View>
+      </Modal>
+
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={mediumModalVisible}
+        onRequestClose={() => {
+          Alert.alert("Modal has been closed.");
+          setModalVisible(!mediumModalVisible);
+        }}
+      >
+        <View style={styles.centeredView}>
+          <View style={styles.modalView}>
+          <Text style={styles.modalText}>Select matching images, 5 seconds will be given for each!</Text>
+            <Text style={styles.modalTextBold}>Are you ready?</Text>
+            <View style={{ flexDirection: 'row' }} >
+            <Pressable
+              style={[styles.button, styles.buttonClose]}
+              onPress={() => {setModalVisible(!mediumModalVisible); navigation.navigate('MediumGameScreenOne'); }}
+            >
+              <Text style={styles.textStyle}>Yes</Text>
+            </Pressable>
+            <Pressable
+              style={[styles.button, styles.buttonClose]}
+              onPress={() => {setMediumModalVisible(!mediumModalVisible)}}
+            >
+              <Text style={styles.textStyle}>No</Text>
+            </Pressable>
+            </View>
+          </View>
+        </View>
+      </Modal>
+            <View style={{ marginBottom: 20 }}>
+                    <View style={styles.gameItemRow}>
+                        <ImageBackground source={{ uri: 'https://cdn.pixabay.com/photo/2014/09/21/21/31/flowers-455591_960_720.jpg' }}
+                            style={styles.image}>
+                            {/* <Text style={styles.title}>Play Memo</Text> */}
+                            <View style={styles.titleContainer}>
+                                <Text style={styles.title} numberOfLines={1}>Play Memo</Text>
+                            </View>
+                        </ImageBackground>
+                    </View>
+            </View>
+            <View style={styles.screen} >
+                <MainButton styles={styles.elementryBtn} onPress={() => setModalVisible(true)}>
+                    Elementry 
+                </MainButton>
+                <MainButton styles={styles.mediumBtn} onPress={()=>{setMediumModalVisible(true)}}>
+                {/* navigation.navigate('MediumLevelStart') */}
+                    Medium
+                </MainButton>
+                <MainButton styles={styles.advanceBtn} onPress={()=>{navigation.navigate('AdvanceLevelStart')}}>
+                    Advance
+                </MainButton>
+            </View>
+        </ScrollView>
+        // <View style={styles.screen} >
+        //     <View style={styles.levelWrapper}>
+        //         <View style={styles.levelContainer}>
+        //             <Button style={styles.btn} title='Elementry' onPress={()=>{navigation.navigate('StartGameScreen')}} />
+        //             <Button style={styles.btn} title='Medium' onPress={()=>{navigation.navigate('MediumLevelStart')}} />
+        //             <Button style={styles.btn} title='Advance' onPress={()=>{navigation.navigate('AdvanceLevelStart')}} />
+        //         </View>
+        //     </View>
+        // </View>
     );
 }
 
@@ -34,10 +123,91 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         alignItems: 'center'
     },
-    btn: {
-        maxWidth: '100%',
-        height: 30
-    }
+    elementryBtn: {
+        backgroundColor: '#6dce99'
+    },
+    mediumBtn: {
+        backgroundColor: '#4285F4'
+    },
+    advanceBtn: {
+        backgroundColor: '#DB4437'
+    },
+    image: {
+        height: 250,
+        width: '100%',
+    },
+    title: {
+        color: 'white',
+        fontWeight: 'bold',
+        fontSize: 30,
+        textAlign: 'center',
+    },
+    titleContainer: {
+        position: 'absolute',
+        padding: 20,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        bottom: 0,
+        width: '100%'
+      },
+      bgImage: {
+        height: '100%',
+        width: '100%',
+        justifyContent: 'flex-end'
+      },
+      gameItemRow: {
+        flexDirection: 'row',
+    },
+
+    centeredView: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        marginTop: 22
+      },
+      modalView: {
+        margin: 20,
+        backgroundColor: "white",
+        borderRadius: 20,
+        padding: 35,
+        alignItems: "center",
+        shadowColor: "#000",
+        shadowOffset: {
+          width: 0,
+          height: 2
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+        elevation: 5
+      },
+      button: {
+        borderRadius: 20,
+        padding: 10,
+        elevation: 2,
+        marginHorizontal: 10
+      },
+      buttonOpen: {
+        backgroundColor: "#F194FF",
+      },
+      buttonClose: {
+        backgroundColor: "#2196F3",
+      },
+      textStyle: {
+        color: "white",
+        fontWeight: "bold",
+        textAlign: "center",
+        fontSize: 20
+      },
+      modalText: {
+        marginBottom: 15,
+        textAlign: "center",
+        fontSize: 20
+      },
+      modalTextBold: {
+        marginBottom: 15,
+        textAlign: "center",
+        fontSize: 20,
+        fontWeight: 'bold'
+      }
 });
 
 export default GameLevel;

frontend/src/screen/memory/GameOverScreen.js

@@ -61,11 +61,11 @@ const GameOverScreen = ({navigation}) => {
     }
 
     if(data>=3.0){
-        disorderLevel = 'High'
+        disorderLevel = 'High';
     }else if (data>=1.5) {
-        disorderLevel = 'Medium'
+        disorderLevel = 'Medium';
     } else {
-        disorderLevel = 'low'
+        disorderLevel = 'low';
     }
 
     const insertData = () => {
@@ -89,8 +89,11 @@ const GameOverScreen = ({navigation}) => {
     if(!loading){
         insertData();
         resultText=(
+        // <Text style={styles.resultText}>
+        //     <Text>Child's disorder level is </Text> <Text style={styles.highlight}>{disorderLevel}</Text>
+        // </Text>
         <Text style={styles.resultText}>
-            <Text>Child's disorder level is </Text> <Text style={styles.highlight}>{disorderLevel}</Text>
+            {disorderLevel == 'High' ? `Hmm...It looks like you have to keep remember more...` : disorderLevel == 'Medium' ? `Hey...nicely played! Good!` : 'Wow! You are Excellent!'}
         </Text>
         );
     }
@@ -101,16 +104,23 @@ const GameOverScreen = ({navigation}) => {
             <View style={styles.imageContainer}>
                 <Image 
                     fadeDuration={1000} 
-                    source={require('../../memory/images/assets/success.png')} 
+                    source={require('../../memory/images/assets/navo2.png')} 
                     style={styles.image} 
                 />
             </View>
-            <Button title='Play Again' onPress={()=>{navigation.navigate('GameList'); setIsLoading(false); dispatch(memoryActions.clearData());}}/>
-            <Button title='Finish' onPress={()=>{sendData()}}/>
+
             <View style={styles.resultContainer}>
                 {/* <Text style={styles.resultText}>{!loading ? `Child's disorder level is ${disorderLevel}`  : ''}</Text> */}
                 {resultText}
             </View>
+            <View style={styles.buttonContainer}>
+                <View style={styles.button}>
+                    <Button color={'#4285F4'} title='Play Again' onPress={()=>{navigation.navigate('GameList'); setIsLoading(false); dispatch(memoryActions.clearData());}}/>
+                </View>
+                <View style={styles.button}>
+                    <Button color={'#DB4437'} title='Finish' onPress={()=>{sendData()}}/>
+                </View>
+            </View>
         </View>
     );
 }
@@ -125,10 +135,10 @@ const styles = StyleSheet.create({
     imageContainer: {
         width: '80%',
         height: 300,
-        borderColor: 'black',
-        borderWidth: 2,
+        // borderColor: 'black',
+        // borderWidth: 2,
         borderRadius: 200,
-        overflow: 'hidden',
+        // overflow: 'hidden',
         marginVertical: 30
     },
     image : {
@@ -150,8 +160,19 @@ const styles = StyleSheet.create({
     },
     resultText: {
         textAlign: 'center',
-        fontSize: 18
-    }
+        fontSize: 22,
+        fontWeight: 'bold'
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        width: 300,
+        maxWidth: '80%',
+        justifyContent: 'space-between',
+        marginTop: 20
+    },
+    button: {
+        width: '40%'
+    },
 });
 
 export default GameOverScreen;
\ No newline at end of file

frontend/src/screen/memory/StartGameScreen.js

 import React from 'react';
-import {Text, View, StyleSheet, Button} from 'react-native';
+import {Text, View, StyleSheet, Button, Image, ImageBackground} from 'react-native';
 
 const StartGameScreen = ({navigation}) => {
     return(
         <View style={styles.screen}>
-            <Text>Start Game Screen</Text>
-            <Button title='Start' onPress={()=>{navigation.navigate("GameScreenOne")}}/>
+            {/* <ImageBackground source={require('../../memory/images/assets/gameback.png')} resizeMode="cover" style={styles.imageback}> */}
+                <View style={styles.imageContainer}>
+                    <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Select matching images</Text>
+                    <Image 
+                        fadeDuration={1000} 
+                        source={require('../../memory/images/assets/navo1.png')} 
+                        style={styles.image} 
+                    />
+                </View>
+                <Button title='Start' onPress={()=>{navigation.navigate("GameScreenOne")}}/>
+            {/* </ImageBackground> */}
         </View>
     );
 }
@@ -15,7 +24,28 @@ const styles = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center'
-    }
+    },
+    imageContainer: {
+        alignItems: 'center',
+        width: '80%',
+        height: 300,
+        // borderColor: 'black',
+        // borderWidth: 2,
+        borderRadius: 200,
+        // overflow: 'hidden',
+        marginVertical: 30
+    },
+    image : {
+        width: '100%',
+        height: '100%'
+    },
+    // imageback: {
+    //     flex: 1,
+    //     justifyContent: 'center',
+    //     width: '100%',
+    //     height: '100%',
+    //     padding: 20
+    // }
 });
 
 export default StartGameScreen;
\ No newline at end of file

frontend/src/screen/memory/elementry/GameScreenFive.js

@@ -27,7 +27,7 @@ const GameScreenFive = ({navigation}) => {
                     timeLabels={{s: 'Seconds'}}
                     style={styles.counter}
                 />
-                <Text style={styles.imageText}>Fish - මාළුවා</Text>
+                <Text style={styles.imageText}>Fish</Text>
             </View>
         );
     }

frontend/src/screen/memory/elementry/GameScreenFour.js

@@ -4,12 +4,6 @@ import CountDown from 'react-native-countdown-component';
 import Countdown from '../../../constants/Countdown';
 
 const GameScreenFour = ({navigation}) => {
-
-    useEffect(()=>{
-        setTimeout( () => {
-            navigation.navigate('GameScreenFourAll');
-        }, 5000 );
-    });
     
         return(
             <View style={styles.sreen}>
@@ -20,7 +14,7 @@ const GameScreenFour = ({navigation}) => {
                         style={styles.image}
                     />
                 </View>
-                <Text style={styles.imageText}>Car - කාරය</Text>
+                <Text style={styles.imageText}>Car</Text>
                 <CountDown
                     size={40}
                     until={Countdown.elementry}

frontend/src/screen/memory/elementry/GameScreenOne.js

@@ -29,7 +29,7 @@ const GameScreenOne = ({navigation}) => {
                     style={styles.image}
                 />
             </View>
-            <Text style={styles.imageText}>Pencil - පැන්සල</Text>
+            <Text style={styles.imageText}>Pencil</Text>
             <CountDown
                 size={40}
                 until={Countdown.elementry}

frontend/src/screen/memory/elementry/GameScreenSix.js

@@ -14,7 +14,7 @@ const GameScreenSix = ({navigation}) => {
                         style={styles.image}
                     />
                 </View>
-                <Text style={styles.imageText}>Pencil - පැන්සල</Text>
+                <Text style={styles.imageText}>Pencil</Text>
                 <CountDown
                     size={40}
                     until={Countdown.elementry}

frontend/src/screen/memory/elementry/GameScreenThree.js

@@ -14,7 +14,7 @@ const GameScreenThree = ({navigation}) => {
                         style={styles.image}
                     />
                 </View>
-                <Text style={styles.imageText}>Flower - මල</Text>
+                <Text style={styles.imageText}>Flower</Text>
                 <CountDown
                     size={40}
                     until={Countdown.elementry}

frontend/src/screen/memory/elementry/GameScreenTwo.js

@@ -14,7 +14,7 @@ const GameScreenTwo = ({navigation}) => {
                         style={styles.image}
                     />
                 </View>
-                <Text style={styles.imageText}>Ball - බෝලය</Text>
+                <Text style={styles.imageText}>Ball</Text>
                 <CountDown
                     size={40}
                     until={Countdown.elementry}

frontend/src/screen/memory/medium/MediumGameScreenFive.js

@@ -14,6 +14,7 @@ const MediumGameScreenFive = ({navigation}) => {
                         style={styles.image}
                     />
                 </View>
+                <Text style={styles.imageText}>Shadow of Horse</Text>
                 <CountDown
                     size={40}
                     until={Countdown.medium}

frontend/src/screen/memory/medium/MediumGameScreenFour.js

@@ -14,7 +14,7 @@ const MediumGameScreenFour = ({navigation}) => {
                         style={styles.image}
                     />
                 </View>
-                <Text style={styles.imageText}>Car - කාරය</Text>
+                <Text style={styles.imageText}>A boy with a balloon</Text>
                 <CountDown
                     size={40}
                     until={Countdown.medium}

frontend/src/screen/memory/medium/MediumGameScreenOne.js

@@ -29,7 +29,7 @@ const MediumGameScreenOne = ({navigation}) => {
                     style={styles.image}
                 />
             </View>
-            <Text style={styles.imageText}>Pencil - පැන්සල</Text>
+            <Text style={styles.imageText}>Birds</Text>
             <CountDown
                 size={40}
                 until={Countdown.medium}

frontend/src/screen/memory/medium/MediumGameScreenSix.js

@@ -14,7 +14,7 @@ const MediumGameScreenSix = ({navigation}) => {
                         style={styles.image}
                     />
                 </View>
-                <Text style={styles.imageText}>Pencil - පැන්සල</Text>
+                <Text style={styles.imageText}>Arrow</Text>
                 <CountDown
                     size={40}
                     until={Countdown.medium}

frontend/src/screen/memory/medium/MediumGameScreenThree.js

@@ -14,7 +14,7 @@ const MediumGameScreenThree = ({navigation}) => {
                         style={styles.image}
                     />
                 </View>
-                <Text style={styles.imageText}>Flower - මල</Text>
+                <Text style={styles.imageText}>Circle and Rectangle</Text>
                 <CountDown
                     size={40}
                     until={Countdown.medium}

frontend/src/screen/memory/medium/MediumGameScreenTwo.js

@@ -14,7 +14,7 @@ const MediumGameScreenTwo = ({navigation}) => {
                         style={styles.image}
                     />
                 </View>
-                <Text style={styles.imageText}>Ball - බෝලය</Text>
+                <Text style={styles.imageText}>Boy with a bicycle</Text>
                 <CountDown
                     size={40}
                     until={Countdown.medium}

frontend/src/screen/reading/advanced/ReadActivityBird.js

@@ -18,11 +18,15 @@ import {DummyReadResult, ImagePaths} from '../../../assets/read/data/ReadData';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {Authorize} from '../../auth/AuthenticateUser';
 import Client from '../../client/Client';
+import ReadModal from '../../../component/reading/ReadModal';
 
 export default function ReadActivityBird() {
   const navigation = useNavigation();
 
   const [count, setCount] = useState(1);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [modalVisible2, setModalVisible2] = useState(false);
+  const [modalVisible3, setModalVisible3] = useState(false);
 
   useEffect(() => {
     Voice.destroy().then(Voice.removeAllListeners);
@@ -46,7 +50,8 @@ export default function ReadActivityBird() {
       },
     })
       .then(res => {
-        navigation.navigate('ReadActivityFish');
+        setModalVisible2(true);
+        // navigation.navigate('ReadActivityFish');
       })
       .catch(error => {
         console.log(error);
@@ -107,6 +112,22 @@ export default function ReadActivityBird() {
 
   return (
     <SafeAreaView>
+      {modalVisible2 && (
+        <ReadModal
+          caption="Perfect"
+          validity="Pronunciation."
+          visible="true"
+          path="ReadActivityFish"
+        />
+      )}
+
+      {modalVisible3 && (
+        <ReadModal
+          caption="Misronunciation"
+          validity="Please Try Again."
+          visible="true"
+        />
+      )}
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}

frontend/src/screen/reading/advanced/ReadActivityDog.js

@@ -18,11 +18,15 @@ import {DummyReadResult, ImagePaths} from '../../../assets/read/data/ReadData';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {Authorize} from '../../auth/AuthenticateUser';
 import Client from '../../client/Client';
+import ReadModal from '../../../component/reading/ReadModal';
 
 export default function ReadActivityDog() {
   const navigation = useNavigation();
 
   const [count, setCount] = useState(1);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [modalVisible2, setModalVisible2] = useState(false);
+  const [modalVisible3, setModalVisible3] = useState(false);
 
   useEffect(() => {
     Voice.destroy().then(Voice.removeAllListeners);
@@ -46,7 +50,8 @@ export default function ReadActivityDog() {
       },
     })
       .then(res => {
-        navigation.navigate('ReadActivityBird');
+        setModalVisible2(true);
+        // navigation.navigate('ReadActivityBird');
       })
       .catch(error => {
         console.log(error);
@@ -107,6 +112,22 @@ export default function ReadActivityDog() {
 
   return (
     <SafeAreaView>
+      {modalVisible2 && (
+        <ReadModal
+          caption="Perfect"
+          validity="Pronunciation."
+          visible="true"
+          path="ReadActivityBird"
+        />
+      )}
+
+      {modalVisible3 && (
+        <ReadModal
+          caption="Misronunciation"
+          validity="Please Try Again."
+          visible="true"
+        />
+      )}
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}

frontend/src/screen/reading/advanced/ReadActivityFish.js

@@ -18,11 +18,15 @@ import {DummyReadResult, ImagePaths} from '../../../assets/read/data/ReadData';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {Authorize} from '../../auth/AuthenticateUser';
 import Client from '../../client/Client';
+import ReadModal from '../../../component/reading/ReadModal';
 
 export default function ReadActivityFish() {
   const navigation = useNavigation();
 
   const [count, setCount] = useState(1);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [modalVisible2, setModalVisible2] = useState(false);
+  const [modalVisible3, setModalVisible3] = useState(false);
 
   useEffect(() => {
     Voice.destroy().then(Voice.removeAllListeners);
@@ -62,8 +66,9 @@ export default function ReadActivityFish() {
     })
       .then(res => {
         // AsyncStorage.removeItem('readingSession');
-        alert('Basic Level Completed');
-        navigation.navigate('Read');
+        // alert('Basic Level Completed');
+        // navigation.navigate('Read');
+        setModalVisible2(true);
       })
       .catch(error => {
         console.log(error);
@@ -124,6 +129,22 @@ export default function ReadActivityFish() {
 
   return (
     <SafeAreaView>
+      {modalVisible2 && (
+        <ReadModal
+          caption="Perfect"
+          validity="Advanced Level Completed."
+          visible="true"
+          path="Read"
+        />
+      )}
+
+      {modalVisible3 && (
+        <ReadModal
+          caption="Misronunciation"
+          validity="Please Try Again."
+          visible="true"
+        />
+      )}
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}

frontend/src/screen/reading/basic/ReadActivityGo.js

@@ -18,11 +18,15 @@ import {DummyReadResult, ImagePaths} from '../../../assets/read/data/ReadData';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {Authorize} from '../../auth/AuthenticateUser';
 import Client from '../../client/Client';
+import ReadModal from '../../../component/reading/ReadModal';
 
 export default function ReadActivityGo() {
   const navigation = useNavigation();
 
   const [count, setCount] = useState(1);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [modalVisible2, setModalVisible2] = useState(false);
+  const [modalVisible3, setModalVisible3] = useState(false);
 
   useEffect(() => {
     Voice.destroy().then(Voice.removeAllListeners);
@@ -46,7 +50,8 @@ export default function ReadActivityGo() {
       },
     })
       .then(res => {
-        navigation.navigate('ReadActivityHe');
+        setModalVisible2(true);
+        // navigation.navigate('ReadActivityHe');
       })
       .catch(error => {
         console.log(error);
@@ -107,6 +112,22 @@ export default function ReadActivityGo() {
 
   return (
     <SafeAreaView>
+      {modalVisible2 && (
+        <ReadModal
+          caption="Perfect"
+          validity="Pronunciation."
+          visible="true"
+          path="ReadActivityHe"
+        />
+      )}
+
+      {modalVisible3 && (
+        <ReadModal
+          caption="Misronunciation"
+          validity="Please Try Again."
+          visible="true"
+        />
+      )}
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}

frontend/src/screen/reading/basic/ReadActivityHe.js

@@ -18,11 +18,15 @@ import {DummyReadResult, ImagePaths} from '../../../assets/read/data/ReadData';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {Authorize} from '../../auth/AuthenticateUser';
 import Client from '../../client/Client';
+import ReadModal from '../../../component/reading/ReadModal';
 
 export default function ReadActivityHe() {
   const navigation = useNavigation();
 
   const [count, setCount] = useState(1);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [modalVisible2, setModalVisible2] = useState(false);
+  const [modalVisible3, setModalVisible3] = useState(false);
 
   useEffect(() => {
     Voice.destroy().then(Voice.removeAllListeners);
@@ -54,7 +58,6 @@ export default function ReadActivityHe() {
   };
 
   const updateReadingSession = readingSession => {
-    console.log('fuck');
     Client.put('updateSession/' + readingSession, {
       headers: {
         Accept: 'application/json',
@@ -63,8 +66,9 @@ export default function ReadActivityHe() {
     })
       .then(res => {
         // AsyncStorage.removeItem('readingSession');
-        alert('Basic Level Completed');
-        navigation.navigate('Read');
+        // alert('Basic Level Completed');
+        // navigation.navigate('Read');
+        setModalVisible2(true);
       })
       .catch(error => {
         console.log(error);
@@ -125,6 +129,23 @@ export default function ReadActivityHe() {
 
   return (
     <SafeAreaView>
+      {modalVisible2 && (
+        <ReadModal
+          caption="Basic"
+          validity="Level Completed."
+          visible="true"
+          path="Read"
+        />
+      )}
+
+      {modalVisible3 && (
+        <ReadModal
+          caption="Misronunciation"
+          validity="Please Try Again."
+          visible="true"
+          // path="ReadActivityGo"
+        />
+      )}
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}

frontend/src/screen/reading/basic/ReadActivityNo.js

@@ -9,7 +9,7 @@ import {
   ImageButton,
   SafeAreaView,
   ImageBackground,
-  Button,
+  Modal,
   Image,
   TouchableHighlight,
 } from 'react-native';
@@ -17,12 +17,18 @@ import Voice from '@react-native-voice/voice';
 import {DummyReadResult, ImagePaths} from '../../../assets/read/data/ReadData';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {Authorize} from '../../auth/AuthenticateUser';
+import AudioRecord from 'react-native-audio-record';
+import CountDown from 'react-native-countdown-component';
 import Client from '../../client/Client';
+import ReadModal from '../../../component/reading/ReadModal';
 
 export default function ReadActivityNo() {
   const navigation = useNavigation();
 
   const [count, setCount] = useState(1);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [modalVisible2, setModalVisible2] = useState(false);
+  const [modalVisible3, setModalVisible3] = useState(false);
 
   useEffect(() => {
     Voice.onSpeechStart = onSpeechStartHandler;
@@ -42,7 +48,8 @@ export default function ReadActivityNo() {
       },
     })
       .then(res => {
-        navigation.navigate('ReadActivityGo');
+        setModalVisible2(true);
+        // navigation.navigate('ReadActivityGo');
       })
       .catch(error => {
         console.log(error);
@@ -76,6 +83,7 @@ export default function ReadActivityNo() {
         });
     } else {
       setCount(count + 1);
+      setModalVisible3(true);
       Voice.start('en-US');
     }
     console.log('count', count);
@@ -103,6 +111,24 @@ export default function ReadActivityNo() {
 
   return (
     <SafeAreaView>
+      {modalVisible2 && (
+        <ReadModal
+          caption="Perfect"
+          validity="Pronunciation."
+          visible="true"
+          path="ReadActivityGo"
+        />
+      )}
+
+      {modalVisible3 && (
+        <ReadModal
+          caption="Misronunciation"
+          validity="Please Try Again."
+          visible="true"
+          path="ReadActivityGo"
+        />
+      )}
+
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}
@@ -216,4 +242,157 @@ const styles = StyleSheet.create({
     marginLeft: 50,
     padding: 7,
   },
+
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: -90,
+    marginLeft: -100,
+  },
+  modalView: {
+    marginRight: 20,
+    backgroundColor: '#00000000',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+
+  centeredView2: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 22,
+  },
+  modalView2: {
+    marginTop: -10,
+    margin: 20,
+    backgroundColor: '#FFFFFFEF',
+    borderRadius: 20,
+    padding: 35,
+    borderWidth: 5,
+    borderColor: '#red',
+    alignItems: 'center',
+    shadowColor: 'red',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button2: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonOpen2: {
+    backgroundColor: '#F194FF',
+  },
+  buttonClose2: {
+    // backgroundColor: "#1DCE92",
+  },
+  textStyle2: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  modalText2: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+  headStyle2: {
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    fontSize: 30,
+    marginBottom: 5,
+  },
+  head2Style2: {
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    fontSize: 30,
+    marginBottom: 20,
+  },
+  alert2: {
+    backgroundColor: 'white',
+    borderRadius: 50,
+    width: 100,
+    height: 100,
+    marginBottom: 20,
+    marginTop: -80,
+  },
+
+  centeredView3: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: -20,
+  },
+  modalView3: {
+    margin: 20,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 20,
+    padding: 20,
+    borderWidth: 5,
+    borderColor: '#red',
+    alignItems: 'center',
+    shadowColor: 'red',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button3: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonOpen3: {
+    backgroundColor: '#F194FF',
+  },
+  buttonClose3: {
+    backgroundColor: 'red',
+  },
+  textStyle3: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  headStyle3: {
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    fontSize: 30,
+    marginBottom: 5,
+  },
+  head2Style3: {
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    fontSize: 30,
+    marginBottom: 20,
+  },
+  modalText3: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+  alert3: {
+    backgroundColor: 'white',
+    borderRadius: 50,
+    width: 100,
+    height: 100,
+    marginBottom: 20,
+    marginTop: -65,
+  },
 });

frontend/src/screen/reading/result/ReadResults.js

@@ -14,28 +14,14 @@ import {SafeAreaView} from 'react-native-safe-area-context';
 
 import Orientation from 'react-native-orientation-locker';
 import {useNavigation} from '@react-navigation/native';
-import BackButton from '../../component/BackButton';
-import TableList from '../../component/TableList';
+import BackButton from '../../../component/BackButton';
 
-import axios from 'axios';
-import Client from '../../client/Client';
-
-const webUrel = 'http://192.168.8.100:5000/getColorActivitiesResult';
+import TableList from '../../../component/reading/TableList';
+import { ImagePaths } from '../../../assets/read/data/ReadData';
 
 export default function ReadResults() {
   const navigation = useNavigation();
 
-  function getColorResult() {
-    Client.get('reading')
-      .then(response => {
-        // setNames(response.data);
-        console.log(response.data);
-      })
-      .catch(err => {
-        console.log(err);
-      });
-  }
-
   React.useEffect(() => {
     StatusBar.setHidden(true);
 
@@ -45,34 +31,43 @@ export default function ReadResults() {
       // The screen is focused
       // Call any action
       Orientation.unlockAllOrientations();
-      Orientation.lockToLandscape();
+      Orientation.lockToPortrait();
     });
 
     return unsubscribe;
   }, [navigation]);
 
   return (
-    <SafeAreaView style={{marginBottom: -150}}>
-      <ScrollView>
-        <View>
-          <ImageBackground
-            style={styles.image}
-            source={require('../../assets/result/21.jpg')}>
-            <View>
-              <BackButton path="Color" />
-            </View>
-            <View style={styles.container}>
-              <Image
-                style={styles.logo}
-                source={require('../../assets/result/title.png')}
-              />
-            </View>
-            <View style={{marginTop: -70}}>
+    // <SafeAreaView>
+    //   <ScrollView>
+    //     <View style={{flexDirection: 'column'}}>
+    //       <ImageBackground
+    //         style={styles.image}
+    //         source={ImagePaths.backgroundBasic}>
+    //         {/* <View><BackButton path="Color" /></View> */}
+    //         {/* <View style={styles.container}>
+    //           <Image
+    //             style={styles.logo}
+    //             source={require('../../../assets/result/title.png')}
+    //           />
+    //         </View> */}
+    //         <View style={styles.imageContainer}>{/* <TableList /> */}</View>
+    //       </ImageBackground>
+    //     </View>
+    //   </ScrollView>
+    // </SafeAreaView>
+    <SafeAreaView>
+      <View style={{flexDirection: 'column'}}>
+        <ImageBackground
+          style={styles.image}
+          source={ImagePaths.resultBackground}>
+          <View style={styles.imageContainer}>
+            {/* <View style={styles.imageView}> */}
               <TableList />
-            </View>
-          </ImageBackground>
-        </View>
-      </ScrollView>
+            {/* </View> */}
+          </View>
+        </ImageBackground>
+      </View>
     </SafeAreaView>
   );
 }
@@ -84,7 +79,7 @@ const styles = StyleSheet.create({
   },
   container: {
     // backgroundColor : '#fff',
-    marginTop: -130,
+    marginTop: 30,
     justifyContent: 'center',
     alignItems: 'center',
   },
@@ -93,4 +88,8 @@ const styles = StyleSheet.create({
     width: '30%',
     height: '30%',
   },
+  imageContainer: {
+    flexDirection: 'row',
+    marginTop: 70,
+  },
 });