some changes

API/app.py

@@ -215,4 +215,4 @@ def reading(readingToken):
     return make_response(body)
 
 if __name__ == "__main__":
-    app.run(host='192.168.8.100')
+    app.run(host='192.168.1.100')

API/db/dbConnection.py

@@ -12,7 +12,7 @@ def create_con():
         database="helply",
         host="127.0.0.1",
         user="root",
-        password="rp19970520"
+        password="12345678"
     )
     return db
 

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

@@ -4,6 +4,13 @@ export const ImagePaths = {
   summery: require('../image/ReadHeaderImg4.webp'),
   robot1: require('../image/robot1.png'),
   robot2: require('../image/activity-2-rob.png'),
+  backgroundBasic: require('../image/activity-2-backg.jpeg'),
+  no: require('../image/no.png'),
+  go: require('../image/go.png'),
+  he: require('../image/he.png'),
+  bird: require('../image/bird.png'),
+  dog: require('../image/dog.png'),
+  fish: require('../image/fish.png'),
 };
 
 export const DummyReadResult = {

frontend/src/router/router.js

@@ -19,6 +19,9 @@ import White from '../screen/activity/White';
 import Read from '../screen/Read';
 import ReadActivity from '../screen/reading/ReadActivity';
 import ReadActivityBird from '../screen/reading/advanced/ReadActivityBird';
+import ReadActivityNo from '../screen/reading/basic/ReadActivityNo';
+import ReadActivityGo from '../screen/reading/basic/ReadActivityGo';
+import ReadActivityHe from '../screen/reading/basic/ReadActivityHe';
 import ColorResult from '../screen/result/ColorResult';
 import PrimaryType from '../screen/activity/PrimaryType';
 import SecondaryType from '../screen/activity/SecondaryType';
@@ -129,6 +132,21 @@ const AppRouter = () => {
           name="ReadActivity"
           component={ReadActivity}
         />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="ReadActivityNo"
+          component={ReadActivityNo}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="ReadActivityGo"
+          component={ReadActivityGo}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="ReadActivityHe"
+          component={ReadActivityHe}
+        />
         <Stack.Screen
           options={{headerShown: false}}
           name="ReadActivityBird"

frontend/src/screen/Read.js

-import { useNavigation } from '@react-navigation/native';
+import {useNavigation} from '@react-navigation/native';
 import axios from 'axios';
 import Orientation from 'react-native-orientation-locker';
-import React, { useState, useEffect } from 'react';
+import React, {useState, useEffect} from 'react';
 import {
   StyleSheet,
   View,
@@ -20,7 +20,7 @@ import {
 import ImageButton from '../component/ImageButton';
 import ButtonView from '../component/buttonView';
 import ReadCategory from '../component/reading/ReadCategory';
-import { ImagePaths } from '../assets/read/data/ReadData';
+import {ImagePaths} from '../assets/read/data/ReadData';
 
 export default function Read() {
   const [activity, setActivity] = useState([]);
@@ -53,7 +53,7 @@ export default function Read() {
           <ReadCategory
             title={'Basic'}
             image={ImagePaths.roundOne}
-            path={'ReadActivity'}
+            path={'ReadActivityNo'}
           />
           <ReadCategory
             title={'Advanced'}

frontend/src/screen/client/Client.js

@@ -2,6 +2,6 @@ import axios from 'axios';
 
 // export default axios.create({ baseURL: 'http://192.168.8.102:5000/', timeout: 15000, });
 export default axios.create({
-  baseURL: 'http://192.168.8.100:5000/',
+  baseURL: 'http://192.168.1.100:5000/',
   timeout: 15000,
 });

frontend/src/screen/reading/ReadActivity.js

@@ -106,14 +106,6 @@ export default function ReadActivity() {
               <Text style={styles.text}>Pronounce this Word!</Text>
             </View>
           </View>
-          {/* <View style={styles.textBody}>
-            <Text style={styles.text}>Pronounce this Word!</Text>
-          </View>
-          <View style={styles.robo}>
-            <Image
-              source={require('../../assets/read/activity-2-rob.png')}></Image>
-          </View> */}
-
           <View>
             <Image
               style={styles.blackboard}
@@ -158,7 +150,6 @@ const styles = StyleSheet.create({
   box: {
     width: 180,
     height: 180,
-    // borderColor: "#000000",
     backgroundColor: 'blue',
     marginTop: -370,
     marginLeft: 455,
@@ -177,8 +168,8 @@ const styles = StyleSheet.create({
     height: 200,
   },
   textBody: {
-    marginTop: 150,
-    marginLeft: -30,
+    marginTop: 130,
+    marginLeft: -50,
     // backgroundColor: '#00008B',
     width: 150,
     borderRadius: 50,
@@ -190,7 +181,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     color: '#00008B',
     borderRadius: 10,
-    backgroundColor: 'rgba(0,0,0,0.2)',
+    backgroundColor: 'rgba(2, 202, 106, 0.17)',
     textAlign: 'center',
     fontWeight: 'bold',
   },
@@ -205,7 +196,7 @@ const styles = StyleSheet.create({
     height: 50,
   },
   horizontalView: {
-    backgroundColor: 'rgba(0,0,0,0.2)',
+    backgroundColor: 'rgba(23, 0, 245, 0.17)',
     borderRadius: 50,
     flexDirection: 'row',
     position: 'absolute',

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

@@ -14,9 +14,11 @@ import {
   TouchableHighlight,
 } from 'react-native';
 import Voice from '@react-native-voice/voice';
-import {DummyReadResult} from '../../assets/read/data/ReadData';
+import {DummyReadResult, ImagePaths} from '../../../assets/read/data/ReadData';
 
 export default function ReadActivityGo() {
+  const navigation = useNavigation();
+
   const [pitch, setPitch] = useState('');
   const [error, setError] = useState('');
   const [end, setEnd] = useState('');
@@ -60,6 +62,7 @@ export default function ReadActivityGo() {
 
     if (result.includes('hello')) {
       console.log('correct');
+      navigation.navigate('ReadActivityHe');
     }
   };
 
@@ -94,12 +97,11 @@ export default function ReadActivityGo() {
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}
-          source={require('../../assets/read/image/activity-2-backg.jpeg')}>
+          source={ImagePaths.backgroundBasic}>
           <View style={styles.imageContainer}>
             <View style={styles.imageView}>
               <View style={styles.robo}>
-                <Image
-                  source={require('../../assets/read/image/activity-2-rob.png')}></Image>
+                <Image source={ImagePaths.robot2}></Image>
               </View>
             </View>
             <View style={styles.textBody}>
@@ -115,9 +117,7 @@ export default function ReadActivityGo() {
           </View> */}
 
           <View>
-            <Image
-              style={styles.blackboard}
-              source={require('../../assets/read/image/backboard3.png')}></Image>
+            <Image style={styles.blackboard} source={ImagePaths.go}></Image>
           </View>
           <View style={styles.horizontalView}>
             <TouchableHighlight onPress={startRecording}>
@@ -158,7 +158,6 @@ const styles = StyleSheet.create({
   box: {
     width: 180,
     height: 180,
-    // borderColor: "#000000",
     backgroundColor: 'blue',
     marginTop: -370,
     marginLeft: 455,
@@ -177,8 +176,8 @@ const styles = StyleSheet.create({
     height: 200,
   },
   textBody: {
-    marginTop: 150,
-    marginLeft: -30,
+    marginTop: 130,
+    marginLeft: -50,
     // backgroundColor: '#00008B',
     width: 150,
     borderRadius: 50,
@@ -190,7 +189,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     color: '#00008B',
     borderRadius: 10,
-    backgroundColor: 'rgba(0,0,0,0.2)',
+    backgroundColor: 'rgba(2, 202, 106, 0.17)',
     textAlign: 'center',
     fontWeight: 'bold',
   },
@@ -205,7 +204,7 @@ const styles = StyleSheet.create({
     height: 50,
   },
   horizontalView: {
-    backgroundColor: 'rgba(0,0,0,0.2)',
+    backgroundColor: 'rgba(23, 0, 245, 0.17)',
     borderRadius: 50,
     flexDirection: 'row',
     position: 'absolute',

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

@@ -14,9 +14,11 @@ import {
   TouchableHighlight,
 } from 'react-native';
 import Voice from '@react-native-voice/voice';
-import {DummyReadResult} from '../../assets/read/data/ReadData';
+import {DummyReadResult, ImagePaths} from '../../../assets/read/data/ReadData';
 
 export default function ReadActivityHe() {
+  const navigation = useNavigation();
+
   const [pitch, setPitch] = useState('');
   const [error, setError] = useState('');
   const [end, setEnd] = useState('');
@@ -60,6 +62,7 @@ export default function ReadActivityHe() {
 
     if (result.includes('hello')) {
       console.log('correct');
+      navigation.navigate('ReadActivityHe');
     }
   };
 
@@ -94,30 +97,20 @@ export default function ReadActivityHe() {
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}
-          source={require('../../assets/read/image/activity-2-backg.jpeg')}>
+          source={ImagePaths.backgroundBasic}>
           <View style={styles.imageContainer}>
             <View style={styles.imageView}>
               <View style={styles.robo}>
-                <Image
-                  source={require('../../assets/read/image/activity-2-rob.png')}></Image>
+                <Image source={ImagePaths.robot2}></Image>
               </View>
             </View>
             <View style={styles.textBody}>
               <Text style={styles.text}>Pronounce this Word!</Text>
             </View>
           </View>
-          {/* <View style={styles.textBody}>
-            <Text style={styles.text}>Pronounce this Word!</Text>
-          </View>
-          <View style={styles.robo}>
-            <Image
-              source={require('../../assets/read/activity-2-rob.png')}></Image>
-          </View> */}
 
           <View>
-            <Image
-              style={styles.blackboard}
-              source={require('../../assets/read/image/backboard3.png')}></Image>
+            <Image style={styles.blackboard} source={ImagePaths.he}></Image>
           </View>
           <View style={styles.horizontalView}>
             <TouchableHighlight onPress={startRecording}>
@@ -158,7 +151,6 @@ const styles = StyleSheet.create({
   box: {
     width: 180,
     height: 180,
-    // borderColor: "#000000",
     backgroundColor: 'blue',
     marginTop: -370,
     marginLeft: 455,
@@ -177,8 +169,8 @@ const styles = StyleSheet.create({
     height: 200,
   },
   textBody: {
-    marginTop: 150,
-    marginLeft: -30,
+    marginTop: 130,
+    marginLeft: -50,
     // backgroundColor: '#00008B',
     width: 150,
     borderRadius: 50,
@@ -190,7 +182,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     color: '#00008B',
     borderRadius: 10,
-    backgroundColor: 'rgba(0,0,0,0.2)',
+    backgroundColor: 'rgba(2, 202, 106, 0.17)',
     textAlign: 'center',
     fontWeight: 'bold',
   },
@@ -205,7 +197,7 @@ const styles = StyleSheet.create({
     height: 50,
   },
   horizontalView: {
-    backgroundColor: 'rgba(0,0,0,0.2)',
+    backgroundColor: 'rgba(23, 0, 245, 0.17)',
     borderRadius: 50,
     flexDirection: 'row',
     position: 'absolute',

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

@@ -14,9 +14,11 @@ import {
   TouchableHighlight,
 } from 'react-native';
 import Voice from '@react-native-voice/voice';
-import {DummyReadResult} from '../../assets/read/data/ReadData';
+import {DummyReadResult, ImagePaths} from '../../../assets/read/data/ReadData';
 
 export default function ReadActivityNo() {
+  const navigation = useNavigation();
+
   const [pitch, setPitch] = useState('');
   const [error, setError] = useState('');
   const [end, setEnd] = useState('');
@@ -60,6 +62,7 @@ export default function ReadActivityNo() {
 
     if (result.includes('hello')) {
       console.log('correct');
+      navigation.navigate('ReadActivityGo');
     }
   };
 
@@ -94,30 +97,20 @@ export default function ReadActivityNo() {
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}
-          source={require('../../assets/read/image/activity-2-backg.jpeg')}>
+          source={ImagePaths.backgroundBasic}>
           <View style={styles.imageContainer}>
             <View style={styles.imageView}>
               <View style={styles.robo}>
-                <Image
-                  source={require('../../assets/read/image/activity-2-rob.png')}></Image>
+                <Image source={ImagePaths.robot2}></Image>
               </View>
             </View>
             <View style={styles.textBody}>
               <Text style={styles.text}>Pronounce this Word!</Text>
             </View>
           </View>
-          {/* <View style={styles.textBody}>
-            <Text style={styles.text}>Pronounce this Word!</Text>
-          </View>
-          <View style={styles.robo}>
-            <Image
-              source={require('../../assets/read/activity-2-rob.png')}></Image>
-          </View> */}
 
           <View>
-            <Image
-              style={styles.blackboard}
-              source={require('../../assets/read/image/backboard3.png')}></Image>
+            <Image style={styles.blackboard} source={ImagePaths.no}></Image>
           </View>
           <View style={styles.horizontalView}>
             <TouchableHighlight onPress={startRecording}>
@@ -158,7 +151,6 @@ const styles = StyleSheet.create({
   box: {
     width: 180,
     height: 180,
-    // borderColor: "#000000",
     backgroundColor: 'blue',
     marginTop: -370,
     marginLeft: 455,
@@ -177,8 +169,8 @@ const styles = StyleSheet.create({
     height: 200,
   },
   textBody: {
-    marginTop: 150,
-    marginLeft: -30,
+    marginTop: 130,
+    marginLeft: -50,
     // backgroundColor: '#00008B',
     width: 150,
     borderRadius: 50,
@@ -190,7 +182,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     color: '#00008B',
     borderRadius: 10,
-    backgroundColor: 'rgba(0,0,0,0.2)',
+    backgroundColor: 'rgba(2, 202, 106, 0.17)',
     textAlign: 'center',
     fontWeight: 'bold',
   },
@@ -205,7 +197,7 @@ const styles = StyleSheet.create({
     height: 50,
   },
   horizontalView: {
-    backgroundColor: 'rgba(0,0,0,0.2)',
+    backgroundColor: 'rgba(23, 0, 245, 0.17)',
     borderRadius: 50,
     flexDirection: 'row',
     position: 'absolute',