Merge branch 'it18257632' into 'master'

It18257632

See merge request !185

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

@@ -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",

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/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/router/router.js

@@ -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"

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/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,
+  },
 });