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

API/app.py

@@ -3,14 +3,13 @@ from flask import Flask, render_template, request, jsonify, make_response
 from API.model.color.colorModel import save_color_session_details, sendPredictData
 from API.model.readModel import save_activity_details, save_session_details
 from API.model.userModel import getUser, saveUserSession, logoutUser
-from API.model.color.colorModel import get_color_activities1, get_color_activities2, get_color_activity_result, storeResult, save_color_session_details
+from API.model.color.colorModel import *
+from API.model.color.colorModel import *
 from flask import Flask, redirect, url_for, render_template, request, jsonify, make_response
 import random
 import os
 from API.model.readModel import *
 from API.model.userModel import *
-
-from API.model.readModel import get_reading_activities
 from API.routers.router import funtion_one
 
 # from backend.IT18218640.keyword_spotting_service import Keyword_Spotting_service
@@ -40,15 +39,20 @@ def getColorActivities2():
 
 
 # Get Color result route
-@app.route("/getColorActivitiesResult")
-def getColorActivitiesResult():
-    req = request.get_json()
-    userId = req['userId']
-    # print("data_dic")
+@app.route("/getColorActivitiesResult/<userId>", methods=['GET'])
+def getColorActivitiesResult(userId):
 
-    result = get_color_activity_result(userId)
+    assert userId == request.view_args['userId']
+    result = get_color_result(userId)
 
-    return result
+    response = {
+        "data": result,
+        "message": "Success",
+        "status": 200
+    }
+    body = jsonify(response)
+    return make_response(body)
+    # return userId
 
 
 # Predict route
@@ -73,11 +77,8 @@ def predict():
         print(ValueError)
 
 
-
-
 @app.route("/colorSession", methods=['POST'])
 def color_session():
-
     token = save_color_session_details(1)
     response = {
         "token": token,
@@ -153,9 +154,10 @@ def logout():
     return make_response(body)
 
 
-@app.route("/readingSession", methods=['POST'])
-def reading_session():
-    token = save_session_details(1)
+@app.route("/readingSession/<userId>", methods=['POST'])
+def reading_session(userId):
+    assert userId == request.view_args['userId']
+    token = save_session_details(userId, 1)
     response = {
         "token": token,
         "message": "Success",
@@ -165,11 +167,11 @@ def reading_session():
     return make_response(body)
 
 
-@app.route("/readingSession/<readingToken>", methods=['PUT'])
+@app.route("/updateSession/<readingToken>", methods=['PUT'])
 def reading_session_status_update(readingToken):
     assert readingToken == request.view_args['readingToken']
     token = readingToken
-    token = update_session_status(token)
+    update_session_status(token)
     response = {
         "message": "Success",
         "status": 200
@@ -181,14 +183,44 @@ def reading_session_status_update(readingToken):
 @app.route("/reading/<readingToken>", methods=['POST'])
 def save_reading(readingToken):
     assert readingToken == request.view_args['readingToken']
-    token = readingToken
     req = request.get_json()
     word = req['word']
     userId = req['userId']
     level = req['level']
     triedCount = req['triedCount']
-    result = save_activity_details(userId, word, token, level, triedCount)
+    result = save_activity_details(userId, word, readingToken, level, triedCount)
+    response = {
+        "message": "Success",
+        "status": 200
+    }
+    body = jsonify(response)
+    return make_response(body)
+
+
+@app.route("/level/<userId>", methods=['GET'])
+def get_completed_levels(userId):
+    assert userId == request.view_args['userId']
+    level = get_completed_levels_by_user(userId)
+    x = level[0]
+    if(len(level) >= 2):
+        y = level[1]
+    response = {
+        "level1": x[0],
+        "level2": y[0],
+        "message": "Success",
+        "status": 200
+    }
+    body = jsonify(response)
+    return make_response(body)
+
+
+@app.route("/result/<userId>", methods=['GET'])
+def reading_result(userId):
+    assert userId == request.view_args['userId']
+    result = get_reading_result(userId)
+
     response = {
+        "data": result,
         "message": "Success",
         "status": 200
     }
@@ -196,5 +228,19 @@ def save_reading(readingToken):
     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/color/colorModel.py

@@ -128,4 +128,8 @@ def sendPredictData(audioFile, name):
     data = {"Predicted Keyword": FPFN}
 
     print(f"data: {data}")
-    return jsonify(data)
\ No newline at end of file
+    return jsonify(data)
+
+def get_color_result(userId):
+    qry = 'SELECT date, time, value, result FROM coloractivityresult WHERE userId = "{}"'.format(userId)
+    return get_data(qry)
\ No newline at end of file

API/model/readModel.py

@@ -3,21 +3,9 @@ from flask import jsonify
 from API.util.util import getUUID
 
 
-def get_reading_activities():
-    data_dic = []
-    qry = 'SELECT * FROM reading'
-
-    result = get_all_data(qry)
-
-    for row in result:
-        ob = {
-            "id": row[0],
-            "round": row[1],
-        }
-
-        data_dic.append(ob)
-
-    return jsonify(data_dic)
+def get_reading_result(userId):
+    qry = 'SELECT userId,word,triedCount,level FROM reading WHERE userId = "{}"'.format(userId)
+    return get_data(qry)
 
 
 def save_activity_details(userId, word, token, level, triedCount):
@@ -27,10 +15,10 @@ def save_activity_details(userId, word, token, level, triedCount):
     return result
 
 
-def save_session_details(status):
+def save_session_details(userId, status):
     token = getUUID()
-    qry = 'INSERT INTO readingSession (id,token,status) VALUES (NULL, %s, %s)'
-    args = ( token, status)
+    qry = 'INSERT INTO readingSession (id,userId,token,status) VALUES (NULL, %s, %s, %s)'
+    args = (userId, token, status)
     insert(qry, args)
     return token
 
@@ -38,3 +26,8 @@ def save_session_details(status):
 def update_session_status(token):
     qry = 'UPDATE readingSession SET status = 0 WHERE token = "{}"'.format(token)
     return update_data(qry)
+
+
+def get_completed_levels_by_user(userId):
+    qry = 'SELECT status FROM readingSession  WHERE userId = "{}"'.format(userId)
+    return get_data(qry)

backend/IT18256888/app.py

@@ -124,5 +124,5 @@ def add_result():
 #run the flask file
 if __name__ == "__main__":
     # app.run(debug=True)
-    app.run(host='192.168.8.101')
-    # app.run(host='0.0.0.0', port=5000, debug=True)
+    # app.run(host='192.168.8.101')
+    app.run(host='0.0.0.0', port=5000)

frontend/package.json

@@ -33,9 +33,10 @@
     "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",
     "react-redux": "^7.2.6",
     "redux": "^4.1.2"
   },

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/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';
 
 const userId = 1;
 
-const CONTENT = {
-  tableHead: ['Date', 'Time', 'Name', 'Result'],
-  tableData: [
-    ['1 jan 2022', '2s', 'Red', 'Good'],
-    ['2 jan 2022', '2s', 'Green', 'Good'],
-    ['3 jan 2022', '2s', 'Black', 'Good'],
-    ['4 jan 2022', '2s', 'White', 'Good'],
-    ['5 jan 2022', '2s', 'Blue', 'Good'],
-    ['6 jan 2022', '2s', 'Yellow', 'Good'],
-
-
-  ],
-};
-
 export default function App() {
 
-  function getResult(userId) {
-
-    var data = {
-      userId: userId,
-      user: "userId",
-    }
+  const [tableData, setTableData] = useState({
+    tableHead: ['Date', 'Time', 'Name', 'Result'],
+    data: [],
+  });
 
-    data = JSON.stringify(data);
+  useEffect(() => {
+    getResult(userId);
+  }, []);
 
-    console.log(data);
+  async function getResult(userId) {
 
-    client.post('getColorActivitiesResult', data, {
+    await client.get('getColorActivitiesResult/' + userId, {
       headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json',
       },
     }).then((response) => {
-      console.log(response.data);
+      // CONTENT.tableData = response.data.data
+      setTableData({
+        tableHead: ['Date', 'Time', 'Name', 'Result'],
+        data: response.data.data,
+      });
+      // console.log(CONTENT.tableData);
+      // userId = 5
+      // console.log(CONTENT2.tableData);
     }).catch(err => {
       console.log(err);
     });
 
   }
 
-  useEffect(() => {
-    getResult(userId);
-}, []);
-
   return (
 
     <ScrollView>
       <View style={styles.container}>
-        <Table borderStyle={{ borderWidth: 3, borderColor: '#fff' }}>
+        <Table borderStyle={{ borderWidth: 5, borderColor: '#fff' }}>
           <Row
-            data={CONTENT.tableHead}
+            data={tableData.tableHead}
             flexArr={[1, 1, 1, 1]}
             style={styles.head}
-            // textStyle={styles.text}
+            textStyle={styles.text}
           />
           <TableWrapper style={styles.wrapper}>
             <Rows
-              data={CONTENT.tableData}
+              data={tableData.data}
               flexArr={[1, 1, 1, 1]}
               style={styles.row}
-              // textStyle={styles.text}
+              textStyle={styles.text}
             />
           </TableWrapper>
         </Table>
@@ -82,5 +71,5 @@ const styles = StyleSheet.create({
   wrapper: { flexDirection: 'row' },
   title: { flex: 1, },
   row: { height: 40 },
-  // text: { textAlign: 'center', fontSize: 20, color: '#fff', },
+  text: { textAlign: 'center', fontSize: 20, color: '#fff', },
 });
\ No newline at end of file

frontend/src/component/UI/HeaderButton.js

+import React from 'react';
+import {View, Text, StyleSheet, Platform} from 'react-native';
+import {HeaderButton} from 'react-navigation-header-buttons'
+import Icon from 'react-native-vector-icons/Ionicons';
+
+const CustomHeaderButton = (props) => {
+    return(
+        <HeaderButton
+            {...props}
+            IconComponent={Icon}
+            iconSize={23}
+            color={Platform.OS === 'android' ? 'white' : 'white'}
+        />
+    );
+}
+
+export default CustomHeaderButton;
\ No newline at end of file

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

@@ -13,7 +13,7 @@ import Client from '../../screen/client/Client';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 const ReadCategory = props => {
-  const {title, image, id, color, path} = props;
+  const {title, image, isDisable, path} = props;
 
   const navigation = useNavigation();
 
@@ -21,10 +21,8 @@ const ReadCategory = props => {
     AsyncStorage.getItem('readingSession')
       .then(value => {
         if (value == null) {
-          console.log('bfxcvbfvfdxv', value);
-          getReadingSession(value);
+          createReadingSession(value);
         } else {
-          console.log('bfxcvbfvfdxv');
           navigation.navigate(path);
         }
       })
@@ -33,34 +31,42 @@ const ReadCategory = props => {
       });
   };
 
-  const getReadingSession = () => {
-    Client.post('readingSession', {
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-      },
-    })
-      .then(res => {
-        console.log(res.data);
-        if (res.status == 200) {
-          console.log(res.data);
-          const token = res.data.token;
-          try {
-            AsyncStorage.setItem('readingSession', token);
-          } catch (error) {
+  const createReadingSession = () => {
+    AsyncStorage.getItem('userId')
+      .then(userId => {
+        Client.post('readingSession/' + userId, {
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+          },
+        })
+          .then(res => {
+            console.log(res.data);
+            if (res.status == 200) {
+              const token = res.data.token;
+              try {
+                AsyncStorage.setItem('readingSession', token);
+              } catch (error) {
+                console.log(error);
+              }
+              navigation.navigate(path);
+            }
+          })
+          .catch(error => {
             console.log(error);
-          }
-          navigation.navigate(path);
-        }
+          });
       })
       .catch(error => {
         console.log(error);
       });
+    
   };
 
+  
   return (
     <View style={styles.gameItem}>
       <TouchableOpacity
+        disabled={false}
         onPress={() => {
           checkReadingSession();
         }}>

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: 5,
-    average: 3,
-    hard: 3
+    medium: 5,
+    advance: 3
 }
\ No newline at end of file

frontend/src/constants/Levels.js

 export default {
     elementry: 'elementry_level',
-    level2: 'level_two',
-    level3: 'level_three'
+    medium: 'medium_level',
+    advance: 'advance_level'
 }
\ No newline at end of file

frontend/src/memory/data/medium-level.js

+import Gamedataone from '../models/gamedataone';
+
+export const SCREEN1 = [
+    new Gamedataone(1, 'q1', 0, require('../../memory/images/medium/1/bird2.jpg')),
+    new Gamedataone(2, 'q1', 0, require('../../memory/images/medium/1/bird3.jpg')),
+    new Gamedataone(3, 'q1', 0, require('../../memory/images/medium/1/bird4.jpg')),
+    new Gamedataone(4, 'q1', 0, require('../../memory/images/medium/1/bird5.jpg')),
+    new Gamedataone(5, 'q1', 0, require('../../memory/images/medium/1/bird6.jpg')),
+    new Gamedataone(6, 'q1', 1, require('../../memory/images/medium/1/bird-main.jpg')),
+    new Gamedataone(7, 'q1', 0, require('../../memory/images/medium/1/bird7.jpg')),
+    new Gamedataone(8, 'q1', 0, require('../../memory/images/medium/1/bird8.jpg')),
+];
+
+export const SCREEN2 = [
+    new Gamedataone(1, 'q2', 0, require('../../memory/images/medium/2/bike2.jpg')),
+    new Gamedataone(2, 'q2', 0, require('../../memory/images/medium/2/bike3.jpg')),
+    new Gamedataone(3, 'q2', 0, require('../../memory/images/medium/2/bike4.jpg')),
+    new Gamedataone(4, 'q2', 1, require('../../memory/images/medium/2/bike-main.jpg')),
+    new Gamedataone(5, 'q2', 0, require('../../memory/images/medium/2/bike5.jpg')),
+    new Gamedataone(6, 'q2', 0, require('../../memory/images/medium/2/bike6.jpg')),
+    new Gamedataone(7, 'q2', 0, require('../../memory/images/medium/2/bike7.jpg')),
+    new Gamedataone(8, 'q2', 0, require('../../memory/images/medium/2/bike8.jpg')),
+];
+
+export const SCREEN3 = [
+    new Gamedataone(1, 'q3', 0, require('../../memory/images/medium/3/sh2.jpg')),
+    new Gamedataone(2, 'q3', 0, require('../../memory/images/medium/3/sh3.jpg')),
+    new Gamedataone(3, 'q3', 1, require('../../memory/images/medium/3/sh-main.jpg')),
+    new Gamedataone(4, 'q3', 0, require('../../memory/images/medium/3/sh5.jpg')),
+    new Gamedataone(5, 'q3', 0, require('../../memory/images/medium/3/sh6.jpg')),
+    new Gamedataone(6, 'q3', 0, require('../../memory/images/medium/3/sh7.jpg')),
+    new Gamedataone(7, 'q3', 0, require('../../memory/images/medium/3/sh8.jpg')),
+    new Gamedataone(8, 'q3', 0, require('../../memory/images/medium/3/sh4.jpg')),
+];
+
+export const SCREEN4 = [
+    new Gamedataone(1, 'q4', 0, require('../../memory/images/medium/4/bal2.jpg')),
+    new Gamedataone(2, 'q4', 0, require('../../memory/images/medium/4/bal3.jpg')),
+    new Gamedataone(3, 'q4', 0, require('../../memory/images/medium/4/bal4.jpg')),
+    new Gamedataone(4, 'q4', 0, require('../../memory/images/medium/4/bal5.jpg')),
+    new Gamedataone(5, 'q4', 0, require('../../memory/images/medium/4/bal6.jpg')),
+    new Gamedataone(6, 'q4', 0, require('../../memory/images/medium/4/bal7.jpg')),
+    new Gamedataone(7, 'q4', 1, require('../../memory/images/medium/4/bal-main.jpg')),
+    new Gamedataone(8, 'q4', 0, require('../../memory/images/medium/4/bal8.jpg')),
+];
+
+export const SCREEN5 = [
+    new Gamedataone(1, 'q5', 0, require('../../memory/images/medium/5/an2.jpg')),
+    new Gamedataone(2, 'q5', 0, require('../../memory/images/medium/5/an3.jpg')),
+    new Gamedataone(3, 'q5', 0, require('../../memory/images/medium/5/an4.jpg')),
+    new Gamedataone(4, 'q5', 0, require('../../memory/images/medium/5/an5.jpg')),
+    new Gamedataone(5, 'q5', 0, require('../../memory/images/medium/5/an6.jpg')),
+    new Gamedataone(6, 'q5', 1, require('../../memory/images/medium/5/an-main.jpg')),
+    new Gamedataone(7, 'q5', 0, require('../../memory/images/medium/5/an7.jpg')),
+    new Gamedataone(8, 'q5', 0, require('../../memory/images/medium/5/an8.jpg')),
+];
+
+export const SCREEN6 = [
+    new Gamedataone(1, 'q6', 0, require('../../memory/images/medium/6/arrow2.jpg')),
+    new Gamedataone(2, 'q6', 0, require('../../memory/images/medium/6/arrow3.jpg')),
+    new Gamedataone(3, 'q6', 0, require('../../memory/images/medium/6/arrow4.jpg')),
+    new Gamedataone(4, 'q6', 0, require('../../memory/images/medium/6/arrow5.jpg')),
+    new Gamedataone(5, 'q6', 0, require('../../memory/images/medium/6/arrow6.jpg')),
+    new Gamedataone(6, 'q6', 1, require('../../memory/images/medium/6/arrow-main.jpg')),
+    new Gamedataone(7, 'q6', 0, require('../../memory/images/medium/6/arrow7.jpg')),
+    new Gamedataone(8, 'q6', 0, require('../../memory/images/medium/6/arrow8.jpg')),
+];
\ 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';
@@ -39,10 +39,41 @@ import GameScreenFive from '../screen/memory/elementry/GameScreenFive';
 import GameScreenFiveAll from '../screen/memory/elementry/GameScreenFiveAll';
 import GameScreenSix from '../screen/memory/elementry/GameScreenSix';
 import GameScreenSixAll from '../screen/memory/elementry/GameScreenSixAll';
+import MediumGameScreenOne from '../screen/memory/medium/MediumGameScreenOne';
+import MediumGameScreenOneAll from '../screen/memory/medium/MediumGameScreenOneAll';
+import MediumGameScreenTwo from '../screen/memory/medium/MediumGameScreenTwo';
+import MediumGameScreenTwoAll from '../screen/memory/medium/MediumGameScreenTwoAll';
+import MediumGameScreenThree from '../screen/memory/medium/MediumGameScreenThree';
+import MediumGameScreenThreeAll from '../screen/memory/medium/MediumGameScreenThreeAll';
+import MediumGameScreenFour from '../screen/memory/medium/MediumGameScreenFour';
+import MediumGameScreenFourAll from '../screen/memory/medium/MediumGameScreenFourAll';
+import MediumGameScreenFive from '../screen/memory/medium/MediumGameScreenFive';
+import MediumGameScreenFiveAll from '../screen/memory/medium/MediumGameScreenFiveAll';
+import MediumGameScreenSix from '../screen/memory/medium/MediumGameScreenSix';
+import MediumGameScreenSixAll from '../screen/memory/medium/MediumGameScreenSixAll';
+import AdvanceGameScreenOne from '../screen/memory/advance/AdvanceGameScreenOne';
+import AdvanceGameScreenOneAll from '../screen/memory/advance/AdvanceGameScreenOneAll';
+import AdvanceGameScreenTwo from '../screen/memory/advance/AdvanceGameScreenTwo';
+import AdvanceGameScreenTwoAll from '../screen/memory/advance/AdvanceGameScreenTwoAll';
+import AdvanceGameScreenThree from '../screen/memory/advance/AdvanceGameScreenThree';
+import AdvanceGameScreenThreeAll from '../screen/memory/advance/AdvanceGameScreenThreeAll';
+import AdvanceGameScreenFour from '../screen/memory/advance/AdvanceGameScreenFour';
+import AdvanceGameScreenFourAll from '../screen/memory/advance/AdvanceGameScreenFourAll';
+import AdvanceGameScreenFive from '../screen/memory/advance/AdvanceGameScreenFive';
+import AdvanceGameScreenFiveAll from '../screen/memory/advance/AdvanceGameScreenFiveAll';
+import AdvanceGameScreenSix from '../screen/memory/advance/AdvanceGameScreenSix';
+import AdvanceGameScreenSixAll from '../screen/memory/advance/AdvanceGameScreenSixAll';
 import GameOverScreen from '../screen/memory/GameOverScreen';
+import MemoryResult from '../screen/memory/MemoryResult';
+import GameLevel from '../screen/memory/GameLevel';
+import MediumLevelStart from '../screen/memory/MediumLevelStart';
+import AdvanceLevelStart from '../screen/memory/AdvanceLevelStart';
 
 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();
 
@@ -153,6 +184,21 @@ const AppRouter = () => {
           name="ReadActivityBird"
           component={ReadActivityBird}
         />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="ReadActivityFish"
+          component={ReadActivityFish}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="ReadActivityDog"
+          component={ReadActivityDog}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="ReadResults"
+          component={ReadResults}
+        />
         <Stack.Screen
           options={{headerShown: false}}
           name="ColorResult"
@@ -164,7 +210,7 @@ const AppRouter = () => {
           options={{
             title: 'Memory Games',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: Colors.primary},
+            headerStyle: {backgroundColor: '#5fcf93'}
           }}
         />
         <Stack.Screen
@@ -174,7 +220,7 @@ const AppRouter = () => {
             headerShown: true,
             title: 'Game Start',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: Colors.primary},
+            headerStyle: {backgroundColor: '#5fcf93'},
           }}
         />
         <Stack.Screen
@@ -244,9 +290,169 @@ const AppRouter = () => {
             headerShown: true,
             title: 'Game Over',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: Colors.primary},
+            headerStyle: {backgroundColor: '#5fcf93'},
           }}
         />
+        <Stack.Screen
+          name="MemoryResult"
+          component={MemoryResult}
+          options={{
+            headerShown: true,
+            title: 'Results',
+            headerTintColor: 'white',
+            headerStyle: {backgroundColor: '#5fcf93'},
+           }}
+        />
+        <Stack.Screen
+          name="GameLevel"
+          component={GameLevel}
+          options={{
+            headerShown: true,
+            title: 'Levels',
+            headerTintColor: 'white',
+            headerStyle: {backgroundColor: '#5fcf93'},
+           }}
+        />
+        <Stack.Screen
+          name="MediumLevelStart"
+          component={MediumLevelStart}
+          options={{
+            headerShown: true,
+            title: 'Medium Level',
+            headerTintColor: 'white',
+            headerStyle: {backgroundColor: '#5fcf93'},
+           }}
+        />
+        <Stack.Screen
+          name="AdvanceLevelStart"
+          component={AdvanceLevelStart}
+          options={{
+            headerShown: true,
+            title: 'Advance Level',
+            headerTintColor: 'white',
+            headerStyle: {backgroundColor: '#5fcf93'},
+           }}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="MediumGameScreenOne"
+          component={MediumGameScreenOne}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="MediumGameScreenOneAll"
+          component={MediumGameScreenOneAll}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="MediumGameScreenTwo"
+          component={MediumGameScreenTwo}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="MediumGameScreenTwoAll"
+          component={MediumGameScreenTwoAll}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="MediumGameScreenThree"
+          component={MediumGameScreenThree}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="MediumGameScreenThreeAll"
+          component={MediumGameScreenThreeAll}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="MediumGameScreenFour"
+          component={MediumGameScreenFour}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="MediumGameScreenFourAll"
+          component={MediumGameScreenFourAll}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="MediumGameScreenFive"
+          component={MediumGameScreenFive}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="MediumGameScreenFiveAll"
+          component={MediumGameScreenFiveAll}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="MediumGameScreenSix"
+          component={MediumGameScreenSix}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="MediumGameScreenSixAll"
+          component={MediumGameScreenSixAll}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="AdvanceGameScreenOne"
+          component={AdvanceGameScreenOne}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="AdvanceGameScreenOneAll"
+          component={AdvanceGameScreenOneAll}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="AdvanceGameScreenTwo"
+          component={AdvanceGameScreenTwo}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="AdvanceGameScreenTwoAll"
+          component={AdvanceGameScreenTwoAll}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="AdvanceGameScreenThree"
+          component={AdvanceGameScreenThree}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="AdvanceGameScreenThreeAll"
+          component={AdvanceGameScreenThreeAll}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="AdvanceGameScreenFour"
+          component={AdvanceGameScreenFour}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="AdvanceGameScreenFourAll"
+          component={AdvanceGameScreenFourAll}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="AdvanceGameScreenFive"
+          component={AdvanceGameScreenFive}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="AdvanceGameScreenFiveAll"
+          component={AdvanceGameScreenFiveAll}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="AdvanceGameScreenSix"
+          component={AdvanceGameScreenSix}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="AdvanceGameScreenSixAll"
+          component={AdvanceGameScreenSixAll}
+        />
         <Stack.Screen
           options={{headerShown: false}}
           name="PrimaryType"

frontend/src/screen/Home.js

@@ -12,7 +12,7 @@ export default function Home({ navigation }){
 
     React.useEffect(() => {
 
-      AsyncStorage.removeItem('colorToken');
+      // AsyncStorage.removeItem('colorToken');
 
       const unsubscribe = navigation.addListener("focus", () => {
         Orientation.unlockAllOrientations();

frontend/src/screen/Read.js

@@ -21,9 +21,12 @@ import ImageButton from '../component/ImageButton';
 import ButtonView from '../component/buttonView';
 import ReadCategory from '../component/reading/ReadCategory';
 import {ImagePaths} from '../assets/read/data/ReadData';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import Client from './client/Client';
 
 export default function Read() {
-  const [activity, setActivity] = useState([]);
+  const [level1, setLevel1] = useState(0);
+  const [level2, setLevel2] = useState(0);
 
   const navigation = useNavigation();
 
@@ -39,6 +42,34 @@ export default function Read() {
     return unsubscribe;
   }, [navigation]);
 
+  // useEffect(() => {
+  //   getCompletedLevel();
+  // }, [navigation]);
+
+  // const getCompletedLevel = () => {
+  //   AsyncStorage.getItem('userId')
+  //     .then(value => {
+  //       Client.get('level/' + value, {
+  //         headers: {
+  //           Accept: 'application/json',
+  //           'Content-Type': 'application/json',
+  //         },
+  //       })
+  //         .then(res => {
+  //           console.log(res.data);
+  //           setLevel1(res.data.level1);
+  //           setLevel2(res.data.level2);
+  //         })
+  //         .catch(error => {
+  //           console.log(error);
+  //         });
+  //     })
+  //     .catch(error => {
+  //       console.log(error);
+  //     });
+  //   console.log('getCompletedLevel', level1, level2);
+  // };
+
   return (
     <SafeAreaView>
       <ScrollView>
@@ -51,20 +82,30 @@ export default function Read() {
         </View> */}
         <TouchableOpacity style={styles.screen}>
           <ReadCategory
+            isDisable={''}
             title={'Basic'}
             image={ImagePaths.roundOne}
             path={'ReadActivityNo'}
           />
+          {/* {level1 == 0 && (
+            <> */}
           <ReadCategory
             title={'Advanced'}
             image={ImagePaths.roundTwo}
-            path={'ReadActivityBird'}
+            path={'ReadActivityDog'}
           />
+          {/* </>
+          )} */}
+
+          {/* {level2 == 0 && (
+            <> */}
           <ReadCategory
             title={'Result & Summery'}
             image={ImagePaths.summery}
-            path={'ReadActivity'}
+            path={'ReadResults'}
           />
+          {/* </>
+          )} */}
         </TouchableOpacity>
       </ScrollView>
     </SafeAreaView>

frontend/src/screen/activity/Red.js

@@ -244,7 +244,7 @@ export default function Red({ navigation }) {
 
     const startRecording = async () => {
 
-        // setModalVisible(true);
+        setModalVisible(true);
 
         try {
             await Voice.start('en-US');

frontend/src/screen/memory/AdvanceLevelStart.js

+import React from 'react';
+import {View,Text, StyleSheet, Button} from 'react-native';
+
+const AdvanceLevelStart = ({navigation}) => {
+    return(
+        <View style={styles.screen}>
+            <Text>Advance Level Start</Text>
+            <Button title='Start' onPress={()=>{navigation.navigate('AdvanceGameScreenOne')}} />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        padding: 10
+    }
+});
+
+export default AdvanceLevelStart;
\ No newline at end of file

frontend/src/screen/memory/GameLevel.js

+import { Center, Column, Row } from 'native-base';
+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 (
+        <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>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        padding: 30
+    },
+    levelContainer: {
+        maxWidth: '100%',
+        height: '60%',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingHorizontal: 30
+    },
+    levelWrapper: {
+        width: '100%',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    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/GameList.js

 import { NavigationContainer } from '@react-navigation/native';
 import { Center } from 'native-base';
-import React from 'react';
+import React, {useLayoutEffect} from 'react';
 import {View, Text, StyleSheet, FlatList, TouchableOpacity} from 'react-native';
 import CategoryItem from '../../component/memory/CategoryItem';
 import { CATEGORIES } from '../../memory/data/dummy-data';
 
+import {HeaderButtons, Item} from 'react-navigation-header-buttons';
+import HeaderButton from '../../component/UI/HeaderButton';
+
 const GameList = ({navigation}) => {
     const renderItem = (itemData) =>{
         return(
@@ -12,10 +15,27 @@ const GameList = ({navigation}) => {
                 id={itemData.item.id}
                 title={itemData.item.title}
                 image={itemData.item.url} 
-                onSelectGame={()=>{navigation.navigate("StartGameScreen")}}
+                onSelectGame={()=>{navigation.navigate("GameLevel")}}
             />
         );
     }
+
+    useLayoutEffect(()=>{
+        navigation.setOptions({
+            headerRight: ()=>(
+                <HeaderButtons
+                HeaderButtonComponent={HeaderButton}
+              >
+                <Item
+                  title='Flag'
+                  iconName='flag'
+                  onPress={()=>{navigation.navigate('MemoryResult')}}
+                />
+              </HeaderButtons>
+            )
+        });
+    },[navigation]);
+
     return(
         <View style={styles.screen}>
             <FlatList

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

+import React from 'react';
+import {Text, View, StyleSheet, Button} from 'react-native';
+
+const MediumLevelStart = ({navigation}) => {
+    return(
+        <View style={styles.screen}>
+            <Text>Medium Level</Text>
+            <Button title='Start' onPress={()=>{navigation.navigate('MediumGameScreenOne')}}/>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1
+    }
+});
+
+export default MediumLevelStart;

frontend/src/screen/memory/MemoryResult.js

+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+
+const MemoryResult = () => {
+    return(
+        <View style={styles.screen}>
+            <Text>Result Screen</Text>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        padding: 10
+    }
+});
+
+export default MemoryResult;
\ 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/advance/AdvanceGameScreenFive.js

+import React, {useState, useEffect} from 'react';
+import {View, Text, StyleSheet, Image} from 'react-native';
+import CountDown from 'react-native-countdown-component';
+import Countdown from '../../../constants/Countdown';
+
+const AdvanceGameScreenFive = ({navigation}) => {
+    
+        return(
+            <View style={styles.sreen}>
+                <Text></Text>
+                <View style={styles.imageContainer}>
+                    <Image 
+                        source={require('../../../memory/images/elementry/5/el-fish1-main.jpg')}
+                        style={styles.image}
+                    />
+                </View>
+                <CountDown
+                    size={40}
+                    until={Countdown.advance}
+                    // onFinish={() => alert('Finished')}
+                    onFinish={() => navigation.navigate('AdvanceGameScreenFiveAll')}
+                    digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
+                    digitTxtStyle={{color: '#1CC625'}}
+                    timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
+                    separatorStyle={{color: '#1CC625'}}
+                    timeToShow={['S']}
+                    timeLabels={{s: 'Seconds'}}
+                    style={styles.counter}
+                />
+                <Text style={styles.imageText}>Fish - මාළුවා</Text>
+            </View>
+        );
+    }
+    
+    const styles = StyleSheet.create({
+        sreen: {
+            flex:1,
+            padding: 10,
+            alignItems: 'center',
+        },
+        imageContainer: {
+            width: '80%',
+            height: 300,
+            borderColor: 'black',
+            borderWidth: 2,
+            overflow: 'hidden',
+            marginTop: 30,
+            borderRadius: 10,
+            shadowColor: 'black',
+            shadowOpacity: 0.26,
+            shadowOffset: {width:0, height:2},
+            shadowRadius: 10,
+            elevation: 8
+        },
+        image: {
+            width: '100%',
+            height: '100%'
+        },
+        imageText: {
+            fontSize: 24,
+            fontWeight: 'bold',
+            marginTop: 30
+        },
+        counter: {
+            marginTop: 30
+        }
+    });
+    
+    export default AdvanceGameScreenFive;
\ No newline at end of file

frontend/src/screen/memory/advance/AdvanceGameScreenFiveAll.js

+import React,{useState,useEffect} from 'react';
+import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
+import { useDispatch } from 'react-redux';
+import * as memoryActions from '../../../store/actions/memory'
+import { SCREEN5 } from '../../../memory/data/elementry-level';
+
+let gameData = SCREEN5.sort((item)=>Math.random(item.id)-0.5);
+
+const AdvanceGameScreenFiveAll = ({navigation}) => {
+
+    const shuffle = () => {
+        gameData = SCREEN5.sort((item)=>Math.random(item.id)-0.5);
+    };
+
+    if(gameData.length == 0){
+        shuffle();
+    }
+
+    const dispatch = useDispatch();
+
+    const [time, setTime] = useState(0);
+    const [timerOn, setTimeOn] = useState(true);
+
+    useEffect(()=>{
+        let interval = null;
+    
+        if(timerOn){
+          interval = setInterval(()=>{
+            setTime(prevTime=> prevTime + 20)
+          },10)
+        }else{
+          clearInterval(interval);
+        }
+    
+        return () => clearInterval(interval);
+    
+      },[timerOn]);
+
+      const renderImageItem = (itemData) => {
+        return(
+            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('AdvanceGameScreenSix')}}>
+                <Image style={styles.image}  source={itemData.item.source}/>
+            </TouchableOpacity>
+        )
+      }
+
+    return(
+        <View style={styles.screen}>
+            <FlatList
+                keyExtractor={(item, data)=>item.id}
+                data={gameData}
+                renderItem={renderImageItem}
+                numColumns={2}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        padding: 10,
+        alignItems: 'center',
+    },
+    imageItem: {
+        width: '48%',
+        height: 165,
+        margin: 5,
+        borderWidth: 1,
+        borderColor: 'black',
+        borderRadius: 10,
+        shadowColor: 'black',
+        shadowOpacity: 0.26,
+        shadowOffset: {width:0, height:2},
+        shadowRadius: 10,
+        elevation: 8,
+        overflow: 'hidden'
+    },
+    imageContainer: {
+        flexDirection: 'row',
+        width: '100%'
+    },
+    image: {
+        width: '100%',
+        height: '100%'
+    }
+
+});
+
+export default AdvanceGameScreenFiveAll;
\ No newline at end of file

frontend/src/screen/memory/advance/AdvanceGameScreenFour.js

+import React, {useState, useEffect} from 'react';
+import {View, Text, StyleSheet, Image} from 'react-native';
+import CountDown from 'react-native-countdown-component';
+import Countdown from '../../../constants/Countdown';
+
+const AdvanceGameScreenFour = ({navigation}) => {
+    
+        return(
+            <View style={styles.sreen}>
+                <Text></Text>
+                <View style={styles.imageContainer}>
+                    <Image 
+                        source={require('../../../memory/images/elementry/4/el-car1-main.jpg')}
+                        style={styles.image}
+                    />
+                </View>
+                <Text style={styles.imageText}>Car - කාරය</Text>
+                <CountDown
+                    size={40}
+                    until={Countdown.advance}
+                    // onFinish={() => alert('Finished')}
+                    onFinish={() => navigation.navigate('AdvanceGameScreenFourAll')}
+                    digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
+                    digitTxtStyle={{color: '#1CC625'}}
+                    timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
+                    separatorStyle={{color: '#1CC625'}}
+                    timeToShow={['S']}
+                    timeLabels={{s: 'Seconds'}}
+                    style={styles.counter}
+                />
+            </View>
+        );
+    }
+    
+    const styles = StyleSheet.create({
+        sreen: {
+            flex:1,
+            padding: 10,
+            alignItems: 'center',
+        },
+        imageContainer: {
+            width: '80%',
+            height: 300,
+            borderColor: 'black',
+            borderWidth: 2,
+            overflow: 'hidden',
+            marginTop: 30,
+            borderRadius: 10,
+            shadowColor: 'black',
+            shadowOpacity: 0.26,
+            shadowOffset: {width:0, height:2},
+            shadowRadius: 10,
+            elevation: 8
+        },
+        image: {
+            width: '100%',
+            height: '100%'
+        },
+        imageText: {
+            fontSize: 24,
+            fontWeight: 'bold',
+            marginTop: 30
+        },
+        counter: {
+            marginTop: 30
+        }
+    });
+    
+    export default AdvanceGameScreenFour;
\ No newline at end of file

frontend/src/screen/memory/advance/AdvanceGameScreenFourAll.js

+import React,{useState,useEffect} from 'react';
+import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
+import { useDispatch } from 'react-redux';
+import * as memoryActions from '../../../store/actions/memory'
+import { SCREEN4 } from '../../../memory/data/elementry-level';
+
+let gameData = SCREEN4.sort((item)=>Math.random(item.id)-0.5);
+
+const AdvanceGameScreenFourAll = ({navigation}) => {
+
+    const shuffle = () => {
+        gameData = SCREEN4.sort((item)=>Math.random(item.id)-0.5);
+    };
+
+    if(gameData.length == 0){
+        shuffle();
+    }
+
+    const dispatch = useDispatch();
+
+    const [time, setTime] = useState(0);
+    const [timerOn, setTimeOn] = useState(true);
+
+    useEffect(()=>{
+        let interval = null;
+    
+        if(timerOn){
+          interval = setInterval(()=>{
+            setTime(prevTime=> prevTime + 20)
+          },10)
+        }else{
+          clearInterval(interval);
+        }
+    
+        return () => clearInterval(interval);
+    
+      },[timerOn]);
+
+      const renderImageItem = (itemData) => {
+        return(
+            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('AdvanceGameScreenFive')}}>
+                <Image style={styles.image}  source={itemData.item.source}/>
+            </TouchableOpacity>
+        )
+      }
+
+    return(
+        <View style={styles.screen}>
+            <FlatList
+                keyExtractor={(item, data)=>item.id}
+                data={gameData}
+                renderItem={renderImageItem}
+                numColumns={2}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        padding: 10,
+        alignItems: 'center'
+    },
+    imageItem: {
+        width: '48%',
+        height: 165,
+        margin: 5,
+        borderWidth: 1,
+        borderColor: 'black',
+        borderRadius: 10,
+        shadowColor: 'black',
+        shadowOpacity: 0.26,
+        shadowOffset: {width:0, height:2},
+        shadowRadius: 10,
+        elevation: 8,
+        overflow: 'hidden'
+    },
+    imageContainer: {
+        flexDirection: 'row',
+        width: '100%'
+    },
+    image: {
+        width: '100%',
+        height: '100%'
+    }
+
+});
+
+export default AdvanceGameScreenFourAll;
\ No newline at end of file

frontend/src/screen/memory/advance/AdvanceGameScreenOne.js

+import React, {useState, useEffect} from 'react';
+import {View, Text, StyleSheet, Image, BackHandler} from 'react-native';
+import Header from '../../../component/memory/Header';
+import CountDown from 'react-native-countdown-component';
+import {useDispatch} from 'react-redux';
+import * as memoryActions from '../../../store/actions/memory';
+import Levels from '../../../constants/Levels';
+import Countdown from '../../../constants/Countdown';
+
+const AdvanceGameScreenOne = ({navigation}) => {
+
+    // useEffect(()=>{
+    //     const backHandler = BackHandler.addEventListener('hardwareBackPress', () => true)
+    //     return () => backHandler.remove()
+    // },[]);
+
+    const dispatch = useDispatch();
+
+    useEffect(()=>{
+        dispatch(memoryActions.setGameLevel(Levels.advance))
+    })
+
+    return(
+        <View style={styles.sreen}>
+            <Text></Text>
+            <View style={styles.imageContainer}>
+                <Image 
+                    source={require('../../../memory/images/elementry/1/elmain.jpeg')}
+                    style={styles.image}
+                />
+            </View>
+            <Text style={styles.imageText}>Pencil - පැන්සල</Text>
+            <CountDown
+                size={40}
+                until={Countdown.advance}
+                // onFinish={() => alert('Finished')}
+                onFinish={() => navigation.navigate('AdvanceGameScreenOneAll')}
+                digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
+                digitTxtStyle={{color: '#1CC625'}}
+                timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
+                separatorStyle={{color: '#1CC625'}}
+                timeToShow={['S']}
+                timeLabels={{s: 'Seconds'}}
+                style={styles.counter}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    sreen: {
+        flex:1,
+        padding: 10,
+        alignItems: 'center',
+    },
+    imageContainer: {
+        width: '80%',
+        height: 300,
+        borderColor: 'black',
+        borderWidth: 2,
+        overflow: 'hidden',
+        marginTop: 30,
+        borderRadius: 10,
+        shadowColor: 'black',
+        shadowOpacity: 0.26,
+        shadowOffset: {width:0, height:2},
+        shadowRadius: 10,
+        elevation: 8
+    },
+    image: {
+        width: '100%',
+        height: '100%'
+    },
+    imageText: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        marginTop: 30
+    },
+    counter: {
+        marginTop: 30
+    }
+});
+
+export default AdvanceGameScreenOne;
\ No newline at end of file

frontend/src/screen/memory/advance/AdvanceGameScreenOneAll.js

+import React,{useEffect, useState} from 'react';
+import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
+import {useSelector, useDispatch} from 'react-redux';
+import * as memoryActions from '../../../store/actions/memory';
+import { SCREEN1 } from '../../../memory/data/elementry-level';
+
+let gameData = SCREEN1.sort((item)=>Math.random(item.id)-0.5);
+
+const AdvanceGameScreenOneAll = ({navigation}) => {
+
+    const shuffle = () => {
+        gameData = SCREEN1.sort((item)=>Math.random(item.id)-0.5);
+    };
+
+    if(gameData.length == 0){
+        shuffle();
+    }
+
+    const dispatch = useDispatch();
+
+    const [time, setTime] = useState(0);
+    const [timerOn, setTimeOn] = useState(true);
+
+    useEffect(()=>{
+        let interval = null;
+    
+        if(timerOn){
+          interval = setInterval(()=>{
+            setTime(prevTime=> prevTime + 20)
+          },10)
+        }else{
+          clearInterval(interval);
+        }
+    
+        return () => clearInterval(interval);
+    
+      },[timerOn]);
+
+      const renderImageItem = (itemData) => {
+        return(
+            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = [];navigation.navigate('AdvanceGameScreenTwo')}}>
+                <Image style={styles.image}  source={itemData.item.source}/>
+            </TouchableOpacity>
+        )
+      }
+
+    return(
+        <View style={styles.screen}>
+            <FlatList
+                keyExtractor={(item, data)=>item.id}
+                data={gameData}
+                renderItem={renderImageItem}
+                numColumns={2}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        padding: 10,
+    },
+    imageItem: {
+        width: '48%',
+        height: 165,
+        margin: 5,
+        borderWidth: 1,
+        borderColor: 'black',
+        borderRadius: 10,
+        shadowColor: 'black',
+        shadowOpacity: 0.26,
+        shadowOffset: {width:0, height:2},
+        shadowRadius: 10,
+        elevation: 8,
+        overflow: 'hidden'
+    },
+    imageContainer: {
+        flexDirection: 'row',
+        width: '100%'
+    },
+    image: {
+        width: '100%',
+        height: '100%'
+    }
+
+});
+
+export default AdvanceGameScreenOneAll;
\ No newline at end of file

frontend/src/screen/memory/advance/AdvanceGameScreenSix.js

+import React, {useState, useEffect} from 'react';
+import {View, Text, StyleSheet, Image} from 'react-native';
+import CountDown from 'react-native-countdown-component';
+import Countdown from '../../../constants/Countdown';
+
+const AdvanceGameScreenSix = ({navigation}) => {
+    
+        return(
+            <View style={styles.sreen}>
+                <Text></Text>
+                <View style={styles.imageContainer}>
+                    <Image 
+                        source={require('../../../memory/images/elementry/6/el-kite1-main.jpg')}
+                        style={styles.image}
+                    />
+                </View>
+                <Text style={styles.imageText}>Pencil - පැන්සල</Text>
+                <CountDown
+                    size={40}
+                    until={Countdown.advance}
+                    // onFinish={() => alert('Finished')}
+                    onFinish={() => navigation.navigate('AdvanceGameScreenSixAll')}
+                    digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
+                    digitTxtStyle={{color: '#1CC625'}}
+                    timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
+                    separatorStyle={{color: '#1CC625'}}
+                    timeToShow={['S']}
+                    timeLabels={{s: 'Seconds'}}
+                    style={styles.counter}
+                />
+            </View>
+        );
+    }
+    
+    const styles = StyleSheet.create({
+        sreen: {
+            flex:1,
+            padding: 10,
+            alignItems: 'center',
+        },
+        imageContainer: {
+            width: '80%',
+            height: 300,
+            borderColor: 'black',
+            borderWidth: 2,
+            overflow: 'hidden',
+            marginTop: 30,
+            borderRadius: 10,
+            shadowColor: 'black',
+            shadowOpacity: 0.26,
+            shadowOffset: {width:0, height:2},
+            shadowRadius: 10,
+            elevation: 8
+        },
+        image: {
+            width: '100%',
+            height: '100%'
+        },
+        imageText: {
+            fontSize: 24,
+            fontWeight: 'bold',
+            marginTop: 30
+        },
+        counter: {
+            marginTop: 30
+        }
+    });
+    
+    export default AdvanceGameScreenSix;
\ No newline at end of file

frontend/src/screen/memory/advance/AdvanceGameScreenSixAll.js

+import React,{useState,useEffect} from 'react';
+import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
+import { useDispatch } from 'react-redux';
+import * as memoryActions from '../../../store/actions/memory';
+import { SCREEN6 } from '../../../memory/data/elementry-level';
+
+let gameData = SCREEN6.sort((item)=>Math.random(item.id)-0.5);
+
+const AdvanceGameScreenSixAll = ({navigation}) => {
+
+    const shuffle = () => {
+        gameData = SCREEN6.sort((item)=>Math.random(item.id)-0.5);
+    };
+
+    if(gameData.length == 0){
+        shuffle();
+    }
+
+    const dispatch = useDispatch();
+
+    const [time, setTime] = useState(0);
+    const [timerOn, setTimeOn] = useState(true);
+
+    useEffect(()=>{
+        let interval = null;
+    
+        if(timerOn){
+          interval = setInterval(()=>{
+            setTime(prevTime=> prevTime + 20)
+          },10)
+        }else{
+          clearInterval(interval);
+        }
+    
+        return () => clearInterval(interval);
+    
+      },[timerOn]);
+
+      const renderImageItem = (itemData) => {
+        return(
+            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('GameOverScreen')}}>
+                <Image style={styles.image}  source={itemData.item.source}/>
+            </TouchableOpacity>
+        )
+      }
+
+    return(
+        <View style={styles.screen}>
+            <FlatList
+                keyExtractor={(item, data)=>item.id}
+                data={gameData}
+                renderItem={renderImageItem}
+                numColumns={2}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        padding: 10,
+        alignItems: 'center'
+    },
+    imageItem: {
+        width: '48%',
+        height: 165,
+        margin: 5,
+        borderWidth: 1,
+        borderColor: 'black',
+        borderRadius: 10,
+        shadowColor: 'black',
+        shadowOpacity: 0.26,
+        shadowOffset: {width:0, height:2},
+        shadowRadius: 10,
+        elevation: 8,
+        overflow: 'hidden'
+    },
+    imageContainer: {
+        flexDirection: 'row',
+        width: '100%'
+    },
+    image: {
+        width: '100%',
+        height: '100%'
+    }
+
+});
+
+export default AdvanceGameScreenSixAll;
\ No newline at end of file

frontend/src/screen/memory/advance/AdvanceGameScreenThree.js

+import React, {useState, useEffect} from 'react';
+import {View, Text, StyleSheet, Image} from 'react-native';
+import CountDown from 'react-native-countdown-component';
+import Countdown from '../../../constants/Countdown';
+
+const AdvanceGameScreenThree = ({navigation}) => {
+    
+        return(
+            <View style={styles.sreen}>
+                <Text></Text>
+                <View style={styles.imageContainer}>
+                    <Image 
+                        source={require('../../../memory/images/elementry/3/el-flo1-main.jpg')}
+                        style={styles.image}
+                    />
+                </View>
+                <Text style={styles.imageText}>Flower - මල</Text>
+                <CountDown
+                    size={40}
+                    until={Countdown.advance}
+                    // onFinish={() => alert('Finished')}
+                    onFinish={() => navigation.navigate('AdvanceGameScreenThreeAll')}
+                    digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
+                    digitTxtStyle={{color: '#1CC625'}}
+                    timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
+                    separatorStyle={{color: '#1CC625'}}
+                    timeToShow={['S']}
+                    timeLabels={{s: 'Seconds'}}
+                    style={styles.counter}
+                />
+            </View>
+        );
+    }
+    
+    const styles = StyleSheet.create({
+        sreen: {
+            flex:1,
+            padding: 10,
+            alignItems: 'center',
+        },
+        imageContainer: {
+            width: '80%',
+            height: 300,
+            borderColor: 'black',
+            borderWidth: 2,
+            overflow: 'hidden',
+            marginTop: 30,
+            borderRadius: 10,
+            shadowColor: 'black',
+            shadowOpacity: 0.26,
+            shadowOffset: {width:0, height:2},
+            shadowRadius: 10,
+            elevation: 8
+        },
+        image: {
+            width: '100%',
+            height: '100%'
+        },
+        imageText: {
+            fontSize: 24,
+            fontWeight: 'bold',
+            marginTop: 30
+        },
+        counter: {
+            marginTop: 30
+        }
+    });
+    
+    export default AdvanceGameScreenThree;
\ No newline at end of file

frontend/src/screen/memory/advance/AdvanceGameScreenThreeAll.js

+import React,{useState,useEffect} from 'react';
+import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
+import { useDispatch } from 'react-redux'; 
+import * as memoryActions from '../../../store/actions/memory';
+import { SCREEN3 } from '../../../memory/data/elementry-level';
+
+let gameData = SCREEN3.sort((item)=>Math.random(item.id)-0.5);
+
+const AdvanceGameScreenThreeAll = ({navigation}) => {
+
+    const shuffle = () => {
+        gameData = SCREEN3.sort((item)=>Math.random(item.id)-0.5);
+    };
+
+    if(gameData.length == 0){
+        shuffle();
+    }
+
+    const dispatch = useDispatch();
+
+    const [time, setTime] = useState(0);
+    const [timerOn, setTimeOn] = useState(true);
+
+    useEffect(()=>{
+        let interval = null;
+    
+        if(timerOn){
+          interval = setInterval(()=>{
+            setTime(prevTime=> prevTime + 20)
+          },10)
+        }else{
+          clearInterval(interval);
+        }
+    
+        return () => clearInterval(interval);
+    
+      },[timerOn]);
+
+      const renderImageItem = (itemData) => {
+        return(
+            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('AdvanceGameScreenFour')}}>
+                <Image style={styles.image}  source={itemData.item.source}/>
+            </TouchableOpacity>
+        )
+      }
+
+    return(
+        <View style={styles.screen}>
+            <FlatList
+                keyExtractor={(item, data)=>item.id}
+                data={gameData}
+                renderItem={renderImageItem}
+                numColumns={2}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        padding: 10,
+        alignItems: 'center'
+    },
+    imageItem: {
+        width: '48%',
+        height: 165,
+        margin: 5,
+        borderWidth: 1,
+        borderColor: 'black',
+        borderRadius: 10,
+        shadowColor: 'black',
+        shadowOpacity: 0.26,
+        shadowOffset: {width:0, height:2},
+        shadowRadius: 10,
+        elevation: 8,
+        overflow: 'hidden'
+    },
+    imageContainer: {
+        flexDirection: 'row',
+        width: '100%'
+    },
+    image: {
+        width: '100%',
+        height: '100%'
+    }
+
+});
+
+export default AdvanceGameScreenThreeAll;
\ No newline at end of file

frontend/src/screen/memory/advance/AdvanceGameScreenTwo.js

+import React, {useState, useEffect} from 'react';
+import {View, Text, StyleSheet, Image} from 'react-native';
+import CountDown from 'react-native-countdown-component';
+import Countdown from '../../../constants/Countdown';
+
+const AdvanceGameScreenTwo = ({navigation}) => {
+    
+        return(
+            <View style={styles.sreen}>
+                <Text></Text>
+                <View style={styles.imageContainer}>
+                    <Image 
+                        source={require('../../../memory/images/elementry/2/el-ball1-main.jpg')}
+                        style={styles.image}
+                    />
+                </View>
+                <Text style={styles.imageText}>Ball - බෝලය</Text>
+                <CountDown
+                    size={40}
+                    until={Countdown.advance}
+                    // onFinish={() => alert('Finished')}
+                    onFinish={() => navigation.navigate('AdvanceGameScreenTwoAll')}
+                    digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
+                    digitTxtStyle={{color: '#1CC625'}}
+                    timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
+                    separatorStyle={{color: '#1CC625'}}
+                    timeToShow={['S']}
+                    timeLabels={{s: 'Seconds'}}
+                    style={styles.counter}
+                />
+            </View>
+        );
+    }
+    
+    const styles = StyleSheet.create({
+        sreen: {
+            flex:1,
+            padding: 10,
+            alignItems: 'center',
+        },
+        imageContainer: {
+            width: '80%',
+            height: 300,
+            borderColor: 'black',
+            borderWidth: 2,
+            overflow: 'hidden',
+            marginTop: 30,
+            borderRadius: 10,
+            shadowColor: 'black',
+            shadowOpacity: 0.26,
+            shadowOffset: {width:0, height:2},
+            shadowRadius: 10,
+            elevation: 8
+        },
+        image: {
+            width: '100%',
+            height: '100%'
+        },
+        imageText: {
+            fontSize: 24,
+            fontWeight: 'bold',
+            marginTop: 30
+        },
+        counter: {
+            marginTop: 30
+        }
+    });
+    
+    export default AdvanceGameScreenTwo;
\ No newline at end of file

frontend/src/screen/memory/advance/AdvanceGameScreenTwoAll.js

+import { NavigationContainer } from '@react-navigation/native';
+import React, {useState,useEffect} from 'react';
+import {View, Text, StyleSheet, Image, TouchableOpacity,FlatList} from 'react-native';
+import { useDispatch } from 'react-redux'; 
+import * as memoryActions from '../../../store/actions/memory'
+import { SCREEN2 } from '../../../memory/data/elementry-level';
+
+let gameData = SCREEN2.sort((item)=>Math.random(item.id)-0.5);
+
+const AdvanceGameScreenTwoAll = ({navigation}) => {
+
+    const shuffle = () => {
+        gameData = SCREEN2.sort((item)=>Math.random(item.id)-0.5);
+    };
+
+    if(gameData.length == 0){
+        shuffle();
+    }
+
+    const dispatch = useDispatch();
+
+    const [time, setTime] = useState(0);
+    const [timerOn, setTimeOn] = useState(true);
+
+    useEffect(()=>{
+        let interval = null;
+    
+        if(timerOn){
+          interval = setInterval(()=>{
+            setTime(prevTime=> prevTime + 20)
+          },10)
+        }else{
+          clearInterval(interval);
+        }
+    
+        return () => clearInterval(interval);
+    
+      },[timerOn]);
+
+      const renderImageItem = (itemData) => {
+        return(
+            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('AdvanceGameScreenThree')}}>
+                <Image style={styles.image}  source={itemData.item.source}/>
+            </TouchableOpacity>
+        )
+      }
+
+    return(
+        <View style={styles.screen}>
+            <FlatList
+                keyExtractor={(item, data)=>item.id}
+                data={gameData}
+                renderItem={renderImageItem}
+                numColumns={2}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        padding: 10,
+        alignItems: 'center',
+    },
+    imageItem: {
+        width: '48%',
+        height: 165,
+        margin: 5,
+        borderWidth: 1,
+        borderColor: 'black',
+        borderRadius: 10,
+        shadowColor: 'black',
+        shadowOpacity: 0.26,
+        shadowOffset: {width:0, height:2},
+        shadowRadius: 10,
+        elevation: 8,
+        overflow: 'hidden'
+    },
+    imageContainer: {
+        flexDirection: 'row',
+        width: '100%'
+    },
+    image: {
+        width: '100%',
+        height: '100%'
+    }
+
+});
+
+export default AdvanceGameScreenTwoAll;
\ 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

+import React, {useState, useEffect} from 'react';
+import {View, Text, StyleSheet, Image} from 'react-native';
+import CountDown from 'react-native-countdown-component';
+import Countdown from '../../../constants/Countdown';
+
+const MediumGameScreenFive = ({navigation}) => {
+    
+        return(
+            <View style={styles.sreen}>
+                <Text></Text>
+                <View style={styles.imageContainer}>
+                    <Image 
+                        source={require('../../../memory/images/medium/5/an-main.jpg')}
+                        style={styles.image}
+                    />
+                </View>
+                <Text style={styles.imageText}>Shadow of Horse</Text>
+                <CountDown
+                    size={40}
+                    until={Countdown.medium}
+                    // onFinish={() => alert('Finished')}
+                    onFinish={() => navigation.navigate('MediumGameScreenFiveAll')}
+                    digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
+                    digitTxtStyle={{color: '#1CC625'}}
+                    timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
+                    separatorStyle={{color: '#1CC625'}}
+                    timeToShow={['S']}
+                    timeLabels={{s: 'Seconds'}}
+                    style={styles.counter}
+                />
+                <Text style={styles.imageText}>Fish - මාළුවා</Text>
+            </View>
+        );
+    }
+    
+    const styles = StyleSheet.create({
+        sreen: {
+            flex:1,
+            padding: 10,
+            alignItems: 'center',
+        },
+        imageContainer: {
+            width: '80%',
+            height: 300,
+            borderColor: 'black',
+            borderWidth: 2,
+            overflow: 'hidden',
+            marginTop: 30,
+            borderRadius: 10,
+            shadowColor: 'black',
+            shadowOpacity: 0.26,
+            shadowOffset: {width:0, height:2},
+            shadowRadius: 10,
+            elevation: 8
+        },
+        image: {
+            width: '100%',
+            height: '100%'
+        },
+        imageText: {
+            fontSize: 24,
+            fontWeight: 'bold',
+            marginTop: 30
+        },
+        counter: {
+            marginTop: 30
+        }
+    });
+    
+    export default MediumGameScreenFive;
\ No newline at end of file

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

+import React,{useState,useEffect} from 'react';
+import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
+import { useDispatch } from 'react-redux';
+import * as memoryActions from '../../../store/actions/memory'
+import { SCREEN5 } from '../../../memory/data/medium-level';
+
+let gameData = SCREEN5.sort((item)=>Math.random(item.id)-0.5);
+
+const MediumGameScreenFiveAll = ({navigation}) => {
+
+    const shuffle = () => {
+        gameData = SCREEN5.sort((item)=>Math.random(item.id)-0.5);
+    };
+
+    if(gameData.length == 0){
+        shuffle();
+    }
+
+    const dispatch = useDispatch();
+
+    const [time, setTime] = useState(0);
+    const [timerOn, setTimeOn] = useState(true);
+
+    useEffect(()=>{
+        let interval = null;
+    
+        if(timerOn){
+          interval = setInterval(()=>{
+            setTime(prevTime=> prevTime + 20)
+          },10)
+        }else{
+          clearInterval(interval);
+        }
+    
+        return () => clearInterval(interval);
+    
+      },[timerOn]);
+
+      const renderImageItem = (itemData) => {
+        return(
+            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('MediumGameScreenSix')}}>
+                <Image style={styles.image}  source={itemData.item.source}/>
+            </TouchableOpacity>
+        )
+      }
+
+    return(
+        <View style={styles.screen}>
+            <FlatList
+                keyExtractor={(item, data)=>item.id}
+                data={gameData}
+                renderItem={renderImageItem}
+                numColumns={2}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        padding: 10,
+        alignItems: 'center',
+    },
+    imageItem: {
+        width: '48%',
+        height: 165,
+        margin: 5,
+        borderWidth: 1,
+        borderColor: 'black',
+        borderRadius: 10,
+        shadowColor: 'black',
+        shadowOpacity: 0.26,
+        shadowOffset: {width:0, height:2},
+        shadowRadius: 10,
+        elevation: 8,
+        overflow: 'hidden'
+    },
+    imageContainer: {
+        flexDirection: 'row',
+        width: '100%'
+    },
+    image: {
+        width: '100%',
+        height: '100%'
+    }
+
+});
+
+export default MediumGameScreenFiveAll;
\ No newline at end of file

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

+import React, {useState, useEffect} from 'react';
+import {View, Text, StyleSheet, Image} from 'react-native';
+import CountDown from 'react-native-countdown-component';
+import Countdown from '../../../constants/Countdown';
+
+const MediumGameScreenFour = ({navigation}) => {
+    
+        return(
+            <View style={styles.sreen}>
+                <Text></Text>
+                <View style={styles.imageContainer}>
+                    <Image 
+                        source={require('../../../memory/images/medium/4/bal-main.jpg')}
+                        style={styles.image}
+                    />
+                </View>
+                <Text style={styles.imageText}>A boy with a balloon</Text>
+                <CountDown
+                    size={40}
+                    until={Countdown.medium}
+                    // onFinish={() => alert('Finished')}
+                    onFinish={() => navigation.navigate('MediumGameScreenFourAll')}
+                    digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
+                    digitTxtStyle={{color: '#1CC625'}}
+                    timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
+                    separatorStyle={{color: '#1CC625'}}
+                    timeToShow={['S']}
+                    timeLabels={{s: 'Seconds'}}
+                    style={styles.counter}
+                />
+            </View>
+        );
+    }
+    
+    const styles = StyleSheet.create({
+        sreen: {
+            flex:1,
+            padding: 10,
+            alignItems: 'center',
+        },
+        imageContainer: {
+            width: '80%',
+            height: 300,
+            borderColor: 'black',
+            borderWidth: 2,
+            overflow: 'hidden',
+            marginTop: 30,
+            borderRadius: 10,
+            shadowColor: 'black',
+            shadowOpacity: 0.26,
+            shadowOffset: {width:0, height:2},
+            shadowRadius: 10,
+            elevation: 8
+        },
+        image: {
+            width: '100%',
+            height: '100%'
+        },
+        imageText: {
+            fontSize: 24,
+            fontWeight: 'bold',
+            marginTop: 30
+        },
+        counter: {
+            marginTop: 30
+        }
+    });
+    
+    export default MediumGameScreenFour;
\ No newline at end of file

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

+import React,{useState,useEffect} from 'react';
+import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
+import { useDispatch } from 'react-redux';
+import * as memoryActions from '../../../store/actions/memory'
+import { SCREEN4 } from '../../../memory/data/medium-level';
+
+let gameData = SCREEN4.sort((item)=>Math.random(item.id)-0.5);
+
+const MediumGameScreenFourAll = ({navigation}) => {
+
+    const shuffle = () => {
+        gameData = SCREEN4.sort((item)=>Math.random(item.id)-0.5);
+    };
+
+    if(gameData.length == 0){
+        shuffle();
+    }
+
+    const dispatch = useDispatch();
+
+    const [time, setTime] = useState(0);
+    const [timerOn, setTimeOn] = useState(true);
+
+    useEffect(()=>{
+        let interval = null;
+    
+        if(timerOn){
+          interval = setInterval(()=>{
+            setTime(prevTime=> prevTime + 20)
+          },10)
+        }else{
+          clearInterval(interval);
+        }
+    
+        return () => clearInterval(interval);
+    
+      },[timerOn]);
+
+      const renderImageItem = (itemData) => {
+        return(
+            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('MediumGameScreenFive')}}>
+                <Image style={styles.image}  source={itemData.item.source}/>
+            </TouchableOpacity>
+        )
+      }
+
+    return(
+        <View style={styles.screen}>
+            <FlatList
+                keyExtractor={(item, data)=>item.id}
+                data={gameData}
+                renderItem={renderImageItem}
+                numColumns={2}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        padding: 10,
+        alignItems: 'center'
+    },
+    imageItem: {
+        width: '48%',
+        height: 165,
+        margin: 5,
+        borderWidth: 1,
+        borderColor: 'black',
+        borderRadius: 10,
+        shadowColor: 'black',
+        shadowOpacity: 0.26,
+        shadowOffset: {width:0, height:2},
+        shadowRadius: 10,
+        elevation: 8,
+        overflow: 'hidden'
+    },
+    imageContainer: {
+        flexDirection: 'row',
+        width: '100%'
+    },
+    image: {
+        width: '100%',
+        height: '100%'
+    }
+
+});
+
+export default MediumGameScreenFourAll;
\ No newline at end of file

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

+import React, {useState, useEffect} from 'react';
+import {View, Text, StyleSheet, Image, BackHandler} from 'react-native';
+import Header from '../../../component/memory/Header';
+import CountDown from 'react-native-countdown-component';
+import {useDispatch} from 'react-redux';
+import * as memoryActions from '../../../store/actions/memory';
+import Levels from '../../../constants/Levels';
+import Countdown from '../../../constants/Countdown';
+
+const MediumGameScreenOne = ({navigation}) => {
+
+    // useEffect(()=>{
+    //     const backHandler = BackHandler.addEventListener('hardwareBackPress', () => true)
+    //     return () => backHandler.remove()
+    // },[]);
+
+    const dispatch = useDispatch();
+
+    useEffect(()=>{
+        dispatch(memoryActions.setGameLevel(Levels.medium))
+    })
+
+    return(
+        <View style={styles.sreen}>
+            <Text></Text>
+            <View style={styles.imageContainer}>
+                <Image 
+                    source={require('../../../memory/images/medium/1/bird-main.jpg')}
+                    style={styles.image}
+                />
+            </View>
+            <Text style={styles.imageText}>Birds</Text>
+            <CountDown
+                size={40}
+                until={Countdown.medium}
+                // onFinish={() => alert('Finished')}
+                onFinish={() => navigation.navigate('MediumGameScreenOneAll')}
+                digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
+                digitTxtStyle={{color: '#1CC625'}}
+                timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
+                separatorStyle={{color: '#1CC625'}}
+                timeToShow={['S']}
+                timeLabels={{s: 'Seconds'}}
+                style={styles.counter}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    sreen: {
+        flex:1,
+        padding: 10,
+        alignItems: 'center',
+    },
+    imageContainer: {
+        width: '80%',
+        height: 300,
+        borderColor: 'black',
+        borderWidth: 2,
+        overflow: 'hidden',
+        marginTop: 30,
+        borderRadius: 10,
+        shadowColor: 'black',
+        shadowOpacity: 0.26,
+        shadowOffset: {width:0, height:2},
+        shadowRadius: 10,
+        elevation: 8
+    },
+    image: {
+        width: '100%',
+        height: '100%'
+    },
+    imageText: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        marginTop: 30
+    },
+    counter: {
+        marginTop: 30
+    }
+});
+
+export default MediumGameScreenOne;
\ No newline at end of file

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

+import React,{useEffect, useState} from 'react';
+import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
+import {useSelector, useDispatch} from 'react-redux';
+import * as memoryActions from '../../../store/actions/memory';
+import { SCREEN1 } from '../../../memory/data/medium-level';
+
+let gameData = SCREEN1.sort((item)=>Math.random(item.id)-0.5);
+
+const MediumGameScreenOneAll = ({navigation}) => {
+
+    const shuffle = () => {
+        gameData = SCREEN1.sort((item)=>Math.random(item.id)-0.5);
+    };
+
+    if(gameData.length == 0){
+        shuffle();
+    }
+
+    const dispatch = useDispatch();
+
+    const [time, setTime] = useState(0);
+    const [timerOn, setTimeOn] = useState(true);
+
+    useEffect(()=>{
+        let interval = null;
+    
+        if(timerOn){
+          interval = setInterval(()=>{
+            setTime(prevTime=> prevTime + 20)
+          },10)
+        }else{
+          clearInterval(interval);
+        }
+    
+        return () => clearInterval(interval);
+    
+      },[timerOn]);
+
+      const renderImageItem = (itemData) => {
+        return(
+            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = [];navigation.navigate('MediumGameScreenTwo')}}>
+                <Image style={styles.image}  source={itemData.item.source}/>
+            </TouchableOpacity>
+        )
+      }
+
+    return(
+        <View style={styles.screen}>
+            <FlatList
+                keyExtractor={(item, data)=>item.id}
+                data={gameData}
+                renderItem={renderImageItem}
+                numColumns={2}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        padding: 10,
+    },
+    imageItem: {
+        width: '48%',
+        height: 165,
+        margin: 5,
+        borderWidth: 1,
+        borderColor: 'black',
+        borderRadius: 10,
+        shadowColor: 'black',
+        shadowOpacity: 0.26,
+        shadowOffset: {width:0, height:2},
+        shadowRadius: 10,
+        elevation: 8,
+        overflow: 'hidden'
+    },
+    imageContainer: {
+        flexDirection: 'row',
+        width: '100%'
+    },
+    image: {
+        width: '100%',
+        height: '100%'
+    }
+
+});
+
+export default MediumGameScreenOneAll;
\ No newline at end of file

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

+import React, {useState, useEffect} from 'react';
+import {View, Text, StyleSheet, Image} from 'react-native';
+import CountDown from 'react-native-countdown-component';
+import Countdown from '../../../constants/Countdown';
+
+const MediumGameScreenSix = ({navigation}) => {
+    
+        return(
+            <View style={styles.sreen}>
+                <Text></Text>
+                <View style={styles.imageContainer}>
+                    <Image 
+                        source={require('../../../memory/images/medium/6/arrow-main.jpg')}
+                        style={styles.image}
+                    />
+                </View>
+                <Text style={styles.imageText}>Arrow</Text>
+                <CountDown
+                    size={40}
+                    until={Countdown.medium}
+                    // onFinish={() => alert('Finished')}
+                    onFinish={() => navigation.navigate('MediumGameScreenSixAll')}
+                    digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
+                    digitTxtStyle={{color: '#1CC625'}}
+                    timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
+                    separatorStyle={{color: '#1CC625'}}
+                    timeToShow={['S']}
+                    timeLabels={{s: 'Seconds'}}
+                    style={styles.counter}
+                />
+            </View>
+        );
+    }
+    
+    const styles = StyleSheet.create({
+        sreen: {
+            flex:1,
+            padding: 10,
+            alignItems: 'center',
+        },
+        imageContainer: {
+            width: '80%',
+            height: 300,
+            borderColor: 'black',
+            borderWidth: 2,
+            overflow: 'hidden',
+            marginTop: 30,
+            borderRadius: 10,
+            shadowColor: 'black',
+            shadowOpacity: 0.26,
+            shadowOffset: {width:0, height:2},
+            shadowRadius: 10,
+            elevation: 8
+        },
+        image: {
+            width: '100%',
+            height: '100%'
+        },
+        imageText: {
+            fontSize: 24,
+            fontWeight: 'bold',
+            marginTop: 30
+        },
+        counter: {
+            marginTop: 30
+        }
+    });
+    
+    export default MediumGameScreenSix;
\ No newline at end of file

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

+import React,{useState,useEffect} from 'react';
+import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
+import { useDispatch } from 'react-redux';
+import * as memoryActions from '../../../store/actions/memory';
+import { SCREEN6 } from '../../../memory/data/medium-level';
+
+let gameData = SCREEN6.sort((item)=>Math.random(item.id)-0.5);
+
+const MediumGameScreenSixAll = ({navigation}) => {
+
+    const shuffle = () => {
+        gameData = SCREEN6.sort((item)=>Math.random(item.id)-0.5);
+    };
+
+    if(gameData.length == 0){
+        shuffle();
+    }
+
+    const dispatch = useDispatch();
+
+    const [time, setTime] = useState(0);
+    const [timerOn, setTimeOn] = useState(true);
+
+    useEffect(()=>{
+        let interval = null;
+    
+        if(timerOn){
+          interval = setInterval(()=>{
+            setTime(prevTime=> prevTime + 20)
+          },10)
+        }else{
+          clearInterval(interval);
+        }
+    
+        return () => clearInterval(interval);
+    
+      },[timerOn]);
+
+      const renderImageItem = (itemData) => {
+        return(
+            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('GameOverScreen')}}>
+                <Image style={styles.image}  source={itemData.item.source}/>
+            </TouchableOpacity>
+        )
+      }
+
+    return(
+        <View style={styles.screen}>
+            <FlatList
+                keyExtractor={(item, data)=>item.id}
+                data={gameData}
+                renderItem={renderImageItem}
+                numColumns={2}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        padding: 10,
+        alignItems: 'center'
+    },
+    imageItem: {
+        width: '48%',
+        height: 165,
+        margin: 5,
+        borderWidth: 1,
+        borderColor: 'black',
+        borderRadius: 10,
+        shadowColor: 'black',
+        shadowOpacity: 0.26,
+        shadowOffset: {width:0, height:2},
+        shadowRadius: 10,
+        elevation: 8,
+        overflow: 'hidden'
+    },
+    imageContainer: {
+        flexDirection: 'row',
+        width: '100%'
+    },
+    image: {
+        width: '100%',
+        height: '100%'
+    }
+
+});
+
+export default MediumGameScreenSixAll;
\ No newline at end of file

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

+import React, {useState, useEffect} from 'react';
+import {View, Text, StyleSheet, Image} from 'react-native';
+import CountDown from 'react-native-countdown-component';
+import Countdown from '../../../constants/Countdown';
+
+const MediumGameScreenThree = ({navigation}) => {
+    
+        return(
+            <View style={styles.sreen}>
+                <Text></Text>
+                <View style={styles.imageContainer}>
+                    <Image 
+                        source={require('../../../memory/images/medium/3/sh-main.jpg')}
+                        style={styles.image}
+                    />
+                </View>
+                <Text style={styles.imageText}>Circle and Rectangle</Text>
+                <CountDown
+                    size={40}
+                    until={Countdown.medium}
+                    // onFinish={() => alert('Finished')}
+                    onFinish={() => navigation.navigate('MediumGameScreenThreeAll')}
+                    digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
+                    digitTxtStyle={{color: '#1CC625'}}
+                    timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
+                    separatorStyle={{color: '#1CC625'}}
+                    timeToShow={['S']}
+                    timeLabels={{s: 'Seconds'}}
+                    style={styles.counter}
+                />
+            </View>
+        );
+    }
+    
+    const styles = StyleSheet.create({
+        sreen: {
+            flex:1,
+            padding: 10,
+            alignItems: 'center',
+        },
+        imageContainer: {
+            width: '80%',
+            height: 300,
+            borderColor: 'black',
+            borderWidth: 2,
+            overflow: 'hidden',
+            marginTop: 30,
+            borderRadius: 10,
+            shadowColor: 'black',
+            shadowOpacity: 0.26,
+            shadowOffset: {width:0, height:2},
+            shadowRadius: 10,
+            elevation: 8
+        },
+        image: {
+            width: '100%',
+            height: '100%'
+        },
+        imageText: {
+            fontSize: 24,
+            fontWeight: 'bold',
+            marginTop: 30
+        },
+        counter: {
+            marginTop: 30
+        }
+    });
+    
+    export default MediumGameScreenThree;
\ No newline at end of file

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

+import React,{useState,useEffect} from 'react';
+import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
+import { useDispatch } from 'react-redux'; 
+import * as memoryActions from '../../../store/actions/memory';
+import { SCREEN3 } from '../../../memory/data/medium-level';
+
+let gameData = SCREEN3.sort((item)=>Math.random(item.id)-0.5);
+
+const MediumGameScreenThreeAll = ({navigation}) => {
+
+    const shuffle = () => {
+        gameData = SCREEN3.sort((item)=>Math.random(item.id)-0.5);
+    };
+
+    if(gameData.length == 0){
+        shuffle();
+    }
+
+    const dispatch = useDispatch();
+
+    const [time, setTime] = useState(0);
+    const [timerOn, setTimeOn] = useState(true);
+
+    useEffect(()=>{
+        let interval = null;
+    
+        if(timerOn){
+          interval = setInterval(()=>{
+            setTime(prevTime=> prevTime + 20)
+          },10)
+        }else{
+          clearInterval(interval);
+        }
+    
+        return () => clearInterval(interval);
+    
+      },[timerOn]);
+
+      const renderImageItem = (itemData) => {
+        return(
+            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('MediumGameScreenFour')}}>
+                <Image style={styles.image}  source={itemData.item.source}/>
+            </TouchableOpacity>
+        )
+      }
+
+    return(
+        <View style={styles.screen}>
+            <FlatList
+                keyExtractor={(item, data)=>item.id}
+                data={gameData}
+                renderItem={renderImageItem}
+                numColumns={2}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        padding: 10,
+        alignItems: 'center'
+    },
+    imageItem: {
+        width: '48%',
+        height: 165,
+        margin: 5,
+        borderWidth: 1,
+        borderColor: 'black',
+        borderRadius: 10,
+        shadowColor: 'black',
+        shadowOpacity: 0.26,
+        shadowOffset: {width:0, height:2},
+        shadowRadius: 10,
+        elevation: 8,
+        overflow: 'hidden'
+    },
+    imageContainer: {
+        flexDirection: 'row',
+        width: '100%'
+    },
+    image: {
+        width: '100%',
+        height: '100%'
+    }
+
+});
+
+export default MediumGameScreenThreeAll;
\ No newline at end of file

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

+import React, {useState, useEffect} from 'react';
+import {View, Text, StyleSheet, Image} from 'react-native';
+import CountDown from 'react-native-countdown-component';
+import Countdown from '../../../constants/Countdown';
+
+const MediumGameScreenTwo = ({navigation}) => {
+    
+        return(
+            <View style={styles.sreen}>
+                <Text></Text>
+                <View style={styles.imageContainer}>
+                    <Image 
+                        source={require('../../../memory/images/medium/2/bike-main.jpg')}
+                        style={styles.image}
+                    />
+                </View>
+                <Text style={styles.imageText}>Boy with a bicycle</Text>
+                <CountDown
+                    size={40}
+                    until={Countdown.medium}
+                    // onFinish={() => alert('Finished')}
+                    onFinish={() => navigation.navigate('MediumGameScreenTwoAll')}
+                    digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
+                    digitTxtStyle={{color: '#1CC625'}}
+                    timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
+                    separatorStyle={{color: '#1CC625'}}
+                    timeToShow={['S']}
+                    timeLabels={{s: 'Seconds'}}
+                    style={styles.counter}
+                />
+            </View>
+        );
+    }
+    
+    const styles = StyleSheet.create({
+        sreen: {
+            flex:1,
+            padding: 10,
+            alignItems: 'center',
+        },
+        imageContainer: {
+            width: '80%',
+            height: 300,
+            borderColor: 'black',
+            borderWidth: 2,
+            overflow: 'hidden',
+            marginTop: 30,
+            borderRadius: 10,
+            shadowColor: 'black',
+            shadowOpacity: 0.26,
+            shadowOffset: {width:0, height:2},
+            shadowRadius: 10,
+            elevation: 8
+        },
+        image: {
+            width: '100%',
+            height: '100%'
+        },
+        imageText: {
+            fontSize: 24,
+            fontWeight: 'bold',
+            marginTop: 30
+        },
+        counter: {
+            marginTop: 30
+        }
+    });
+    
+    export default MediumGameScreenTwo;
\ No newline at end of file

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

+import { NavigationContainer } from '@react-navigation/native';
+import React, {useState,useEffect} from 'react';
+import {View, Text, StyleSheet, Image, TouchableOpacity,FlatList} from 'react-native';
+import { useDispatch } from 'react-redux'; 
+import * as memoryActions from '../../../store/actions/memory'
+import { SCREEN2 } from '../../../memory/data/medium-level';
+
+let gameData = SCREEN2.sort((item)=>Math.random(item.id)-0.5);
+
+const MediumGameScreenTwoAll = ({navigation}) => {
+
+    const shuffle = () => {
+        gameData = SCREEN2.sort((item)=>Math.random(item.id)-0.5);
+    };
+
+    if(gameData.length == 0){
+        shuffle();
+    }
+
+    const dispatch = useDispatch();
+
+    const [time, setTime] = useState(0);
+    const [timerOn, setTimeOn] = useState(true);
+
+    useEffect(()=>{
+        let interval = null;
+    
+        if(timerOn){
+          interval = setInterval(()=>{
+            setTime(prevTime=> prevTime + 20)
+          },10)
+        }else{
+          clearInterval(interval);
+        }
+    
+        return () => clearInterval(interval);
+    
+      },[timerOn]);
+
+      const renderImageItem = (itemData) => {
+        return(
+            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('MediumGameScreenThree')}}>
+                <Image style={styles.image}  source={itemData.item.source}/>
+            </TouchableOpacity>
+        )
+      }
+
+    return(
+        <View style={styles.screen}>
+            <FlatList
+                keyExtractor={(item, data)=>item.id}
+                data={gameData}
+                renderItem={renderImageItem}
+                numColumns={2}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        padding: 10,
+        alignItems: 'center',
+    },
+    imageItem: {
+        width: '48%',
+        height: 165,
+        margin: 5,
+        borderWidth: 1,
+        borderColor: 'black',
+        borderRadius: 10,
+        shadowColor: 'black',
+        shadowOpacity: 0.26,
+        shadowOffset: {width:0, height:2},
+        shadowRadius: 10,
+        elevation: 8,
+        overflow: 'hidden'
+    },
+    imageContainer: {
+        flexDirection: 'row',
+        width: '100%'
+    },
+    image: {
+        width: '100%',
+        height: '100%'
+    }
+
+});
+
+export default MediumGameScreenTwoAll;
\ No newline at end of file

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

@@ -15,21 +15,22 @@ import {
 } from 'react-native';
 import Voice from '@react-native-voice/voice';
 import {DummyReadResult, ImagePaths} from '../../../assets/read/data/ReadData';
-import AudioRecord from 'react-native-audio-record';
-import Client from '../../client/Client';
 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 userToken = Authorize();
   const navigation = useNavigation();
-  
-  const [readingData, setReadingData] = useState({activity: ''});
-  // let user = AsyncStorage.getItem('readingSession');
-  // useEffect(() => {
-  //   if (Authorize) {
-  //   }
-  // }, []);
+
+  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);
+  }, []);
 
   useEffect(() => {
     Voice.onSpeechStart = onSpeechStartHandler;
@@ -41,28 +42,16 @@ export default function ReadActivityBird() {
     };
   }, []);
 
-  const getToken = data => {
-    AsyncStorage.getItem('readingSession')
-      .then(readingSession => {
-      
-        sendRedingData(data, readingSession);
-      })
-      .catch(error => {
-        console.log(error);
-      });
-  };
-
   const sendRedingData = (data, readingSession) => {
-    console.log('itemValue', data);
-    Client.post('reading/'+readingSession, JSON.stringify(data), {
+    Client.post('reading/' + readingSession, JSON.stringify(data), {
       headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json',
       },
     })
       .then(res => {
-        console.log(res.data);
-        navigation.navigate('ReadActivity');
+        setModalVisible2(true);
+        // navigation.navigate('ReadActivityFish');
       })
       .catch(error => {
         console.log(error);
@@ -78,19 +67,39 @@ export default function ReadActivityBird() {
   };
 
   const onSpeechError = e => {
+    console.log('onSpeechError: ', e);
     const result = DummyReadResult.value;
-    const data = {
-      word: 'bird',
-      userId: 1,
-      level: 1,
-      triedCount: 1,
-    };
     if (result.includes('hello')) {
-      setReadingData(data);
-      console.log('data', getToken());
-      console.log('readingData:', readingData);
-      getToken(data);
+      AsyncStorage.getItem('userId')
+        .then(userId => {
+          const data = {
+            word: 'bird',
+            userId: userId,
+            level: 1,
+            triedCount: count,
+          };
+          getToken(data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    } else {
+      setCount(count + 1);
+      Voice.start('en-US');
     }
+    console.log('count', count);
+
+    console.log('count', count);
+  };
+
+  const getToken = data => {
+    AsyncStorage.getItem('readingSession')
+      .then(readingSession => {
+        sendRedingData(data, readingSession);
+      })
+      .catch(error => {
+        console.log(error);
+      });
   };
 
   const startRecording = async () => {
@@ -103,33 +112,39 @@ 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}
-          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.bird}></Image>
           </View>
           <View style={styles.horizontalView}>
             <TouchableHighlight onPress={startRecording}>
@@ -170,7 +185,6 @@ const styles = StyleSheet.create({
   box: {
     width: 180,
     height: 180,
-    // borderColor: "#000000",
     backgroundColor: 'blue',
     marginTop: -370,
     marginLeft: 455,
@@ -189,8 +203,8 @@ const styles = StyleSheet.create({
     height: 200,
   },
   textBody: {
-    marginTop: 150,
-    marginLeft: -30,
+    marginTop: 130,
+    marginLeft: -50,
     // backgroundColor: '#00008B',
     width: 150,
     borderRadius: 50,
@@ -202,7 +216,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',
   },
@@ -217,11 +231,14 @@ const styles = StyleSheet.create({
     height: 50,
   },
   horizontalView: {
+    backgroundColor: 'rgba(23, 0, 245, 0.17)',
+    borderRadius: 50,
     flexDirection: 'row',
     position: 'absolute',
     bottom: 0,
     flexDirection: 'row',
     marginBottom: 140,
     marginLeft: 50,
+    padding: 7,
   },
 });

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

+import {useNavigation} from '@react-navigation/native';
+import Orientation from 'react-native-orientation-locker';
+import React, {useEffect, useState} from 'react';
+import {
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  View,
+  ImageButton,
+  SafeAreaView,
+  ImageBackground,
+  Button,
+  Image,
+  TouchableHighlight,
+} from 'react-native';
+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 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);
+  }, []);
+
+  useEffect(() => {
+    Voice.onSpeechStart = onSpeechStartHandler;
+    Voice.onSpeechResults = onSpeechResultsHandler;
+    Voice.onSpeechError = onSpeechError;
+
+    return () => {
+      Voice.destroy().then(Voice.removeAllListeners);
+    };
+  }, []);
+
+  const sendRedingData = (data, readingSession) => {
+    Client.post('reading/' + readingSession, JSON.stringify(data), {
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    })
+      .then(res => {
+        setModalVisible2(true);
+        // navigation.navigate('ReadActivityBird');
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  };
+
+  const onSpeechStartHandler = e => {
+    console.log('start handler =>> ', e);
+  };
+
+  const onSpeechResultsHandler = e => {
+    console.log('result handler =>> ', e);
+  };
+
+  const onSpeechError = e => {
+    console.log('onSpeechError: ', e);
+    const result = DummyReadResult.value;
+    if (result.includes('hello')) {
+      AsyncStorage.getItem('userId')
+        .then(userId => {
+          const data = {
+            word: 'dog',
+            userId: userId,
+            level: 1,
+            triedCount: count,
+          };
+          getToken(data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    } else {
+      setCount(count + 1);
+      Voice.start('en-US');
+    }
+    console.log('count', count);
+
+    console.log('count', count);
+  };
+
+  const getToken = data => {
+    AsyncStorage.getItem('readingSession')
+      .then(readingSession => {
+        sendRedingData(data, readingSession);
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  };
+
+  const startRecording = async () => {
+    try {
+      await Voice.start('en-US');
+    } catch (error) {
+      console.log('error =>> ', error);
+    }
+  };
+
+  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}
+          source={ImagePaths.backgroundBasic}>
+          <View style={styles.imageContainer}>
+            <View style={styles.imageView}>
+              <View style={styles.robo}>
+                <Image source={ImagePaths.robot2}></Image>
+              </View>
+            </View>
+            <View style={styles.textBody}>
+              <Text style={styles.text}>Pronounce this Word!</Text>
+            </View>
+          </View>
+
+          <View>
+            <Image style={styles.blackboard} source={ImagePaths.dog}></Image>
+          </View>
+          <View style={styles.horizontalView}>
+            <TouchableHighlight onPress={startRecording}>
+              <Image
+                style={styles.imageButton}
+                source={{
+                  uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
+                }}
+              />
+            </TouchableHighlight>
+          </View>
+        </ImageBackground>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  imageContainer: {
+    flexDirection: 'row',
+    marginTop: 70,
+  },
+  imageView: {
+    width: 180,
+    height: 300,
+    // borderWidth:1,
+    // borderColor: "#000",
+    marginHorizontal: 1,
+    marginVertical: 100,
+  },
+  body: {
+    flex: 1,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  box: {
+    width: 180,
+    height: 180,
+    backgroundColor: 'blue',
+    marginTop: -370,
+    marginLeft: 455,
+    borderRadius: 100,
+  },
+  blackboard: {
+    marginTop: -320,
+    marginLeft: 200,
+    width: '50%',
+    height: 300,
+  },
+  robo: {
+    marginTop: 90,
+    marginLeft: 5,
+    width: 150,
+    height: 200,
+  },
+  textBody: {
+    marginTop: 130,
+    marginLeft: -50,
+    // backgroundColor: '#00008B',
+    width: 150,
+    borderRadius: 50,
+    padding: 5,
+  },
+  text: {
+    fontSize: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: '#00008B',
+    borderRadius: 10,
+    backgroundColor: 'rgba(2, 202, 106, 0.17)',
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+
+  button: {
+    padding: 10,
+    marginLeft: 5,
+    color: '#000000',
+  },
+  imageButton: {
+    width: 50,
+    height: 50,
+  },
+  horizontalView: {
+    backgroundColor: 'rgba(23, 0, 245, 0.17)',
+    borderRadius: 50,
+    flexDirection: 'row',
+    position: 'absolute',
+    bottom: 0,
+    flexDirection: 'row',
+    marginBottom: 140,
+    marginLeft: 50,
+    padding: 7,
+  },
+});

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

+import {useNavigation} from '@react-navigation/native';
+import Orientation from 'react-native-orientation-locker';
+import React, {useEffect, useState} from 'react';
+import {
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  View,
+  ImageButton,
+  SafeAreaView,
+  ImageBackground,
+  Button,
+  Image,
+  TouchableHighlight,
+} from 'react-native';
+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 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);
+  }, []);
+
+  useEffect(() => {
+    Voice.onSpeechStart = onSpeechStartHandler;
+    Voice.onSpeechResults = onSpeechResultsHandler;
+    Voice.onSpeechError = onSpeechError;
+
+    return () => {
+      Voice.destroy().then(Voice.removeAllListeners);
+    };
+  }, []);
+
+  const sendRedingData = (data, readingSession) => {
+    Client.post('reading/' + readingSession, JSON.stringify(data), {
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    })
+      .then(res => {
+        updateReadingSession(readingSession);
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  };
+
+  const updateReadingSession = readingSession => {
+    Client.put('updateSession/' + readingSession, {
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    })
+      .then(res => {
+        // AsyncStorage.removeItem('readingSession');
+        // alert('Basic Level Completed');
+        // navigation.navigate('Read');
+        setModalVisible2(true);
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  };
+
+  const onSpeechStartHandler = e => {
+    console.log('start handler =>> ', e);
+  };
+
+  const onSpeechResultsHandler = e => {
+    console.log('result handler =>> ', e);
+  };
+
+  const onSpeechError = e => {
+    console.log('onSpeechError: ', e);
+    const result = DummyReadResult.value;
+    if (result.includes('hello')) {
+      AsyncStorage.getItem('userId')
+        .then(userId => {
+          const data = {
+            word: 'fish',
+            userId: userId,
+            level: 1,
+            triedCount: count,
+          };
+          getToken(data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    } else {
+      setCount(count + 1);
+      Voice.start('en-US');
+    }
+    console.log('count', count);
+
+    console.log('count', count);
+  };
+
+  const getToken = data => {
+    AsyncStorage.getItem('readingSession')
+      .then(readingSession => {
+        sendRedingData(data, readingSession);
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  };
+
+  const startRecording = async () => {
+    try {
+      await Voice.start('en-US');
+    } catch (error) {
+      console.log('error =>> ', error);
+    }
+  };
+
+  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}
+          source={ImagePaths.backgroundBasic}>
+          <View style={styles.imageContainer}>
+            <View style={styles.imageView}>
+              <View style={styles.robo}>
+                <Image source={ImagePaths.robot2}></Image>
+              </View>
+            </View>
+            <View style={styles.textBody}>
+              <Text style={styles.text}>Pronounce this Word!</Text>
+            </View>
+          </View>
+
+          <View>
+            <Image style={styles.blackboard} source={ImagePaths.fish}></Image>
+          </View>
+          <View style={styles.horizontalView}>
+            <TouchableHighlight onPress={startRecording}>
+              <Image
+                style={styles.imageButton}
+                source={{
+                  uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
+                }}
+              />
+            </TouchableHighlight>
+          </View>
+        </ImageBackground>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  imageContainer: {
+    flexDirection: 'row',
+    marginTop: 70,
+  },
+  imageView: {
+    width: 180,
+    height: 300,
+    // borderWidth:1,
+    // borderColor: "#000",
+    marginHorizontal: 1,
+    marginVertical: 100,
+  },
+  body: {
+    flex: 1,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  box: {
+    width: 180,
+    height: 180,
+    backgroundColor: 'blue',
+    marginTop: -370,
+    marginLeft: 455,
+    borderRadius: 100,
+  },
+  blackboard: {
+    marginTop: -320,
+    marginLeft: 200,
+    width: '50%',
+    height: 300,
+  },
+  robo: {
+    marginTop: 90,
+    marginLeft: 5,
+    width: 150,
+    height: 200,
+  },
+  textBody: {
+    marginTop: 130,
+    marginLeft: -50,
+    // backgroundColor: '#00008B',
+    width: 150,
+    borderRadius: 50,
+    padding: 5,
+  },
+  text: {
+    fontSize: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: '#00008B',
+    borderRadius: 10,
+    backgroundColor: 'rgba(2, 202, 106, 0.17)',
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+
+  button: {
+    padding: 10,
+    marginLeft: 5,
+    color: '#000000',
+  },
+  imageButton: {
+    width: 50,
+    height: 50,
+  },
+  horizontalView: {
+    backgroundColor: 'rgba(23, 0, 245, 0.17)',
+    borderRadius: 50,
+    flexDirection: 'row',
+    position: 'absolute',
+    bottom: 0,
+    flexDirection: 'row',
+    marginBottom: 140,
+    marginLeft: 50,
+    padding: 7,
+  },
+});

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

@@ -15,16 +15,18 @@ import {
 } from 'react-native';
 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 Client from '../../client/Client';
+import ReadModal from '../../../component/reading/ReadModal';
 
 export default function ReadActivityGo() {
   const navigation = useNavigation();
 
-  const [pitch, setPitch] = useState('');
-  const [error, setError] = useState('');
-  const [end, setEnd] = useState('');
-  const [started, setStarted] = useState('');
-  const [results, setResults] = useState([]);
-  const [partialResults, setPartialResults] = useState([]);
+  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);
@@ -32,23 +34,32 @@ export default function ReadActivityGo() {
 
   useEffect(() => {
     Voice.onSpeechStart = onSpeechStartHandler;
-    Voice.onSpeechEnd = onSpeechEndHandler;
     Voice.onSpeechResults = onSpeechResultsHandler;
     Voice.onSpeechError = onSpeechError;
-    Voice.onSpeechPartialResults = onSpeechPartialResults;
-    Voice.onSpeechVolumeChanged = onSpeechVolumeChanged;
 
     return () => {
       Voice.destroy().then(Voice.removeAllListeners);
     };
   }, []);
 
-  const onSpeechStartHandler = e => {
-    console.log('start handler =>> ', e);
+  const sendRedingData = (data, readingSession) => {
+    Client.post('reading/' + readingSession, JSON.stringify(data), {
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    })
+      .then(res => {
+        setModalVisible2(true);
+        // navigation.navigate('ReadActivityHe');
+      })
+      .catch(error => {
+        console.log(error);
+      });
   };
 
-  const onSpeechEndHandler = e => {
-    console.log('end handler =>> ', e);
+  const onSpeechStartHandler = e => {
+    console.log('start handler =>> ', e);
   };
 
   const onSpeechResultsHandler = e => {
@@ -57,23 +68,38 @@ export default function ReadActivityGo() {
 
   const onSpeechError = e => {
     console.log('onSpeechError: ', e);
-    setError(JSON.stringify(e.error));
     const result = DummyReadResult.value;
-
     if (result.includes('hello')) {
-      console.log('correct');
-      navigation.navigate('ReadActivityHe');
+      AsyncStorage.getItem('userId')
+        .then(userId => {
+          const data = {
+            word: 'go',
+            userId: userId,
+            level: 1,
+            triedCount: count,
+          };
+          getToken(data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    } else {
+      setCount(count + 1);
+      Voice.start('en-US');
     }
-  };
+    console.log('count', count);
 
-  const onSpeechPartialResults = e => {
-    console.log('onSpeechPartialResults: ', e);
-    setPartialResults(e.value);
+    console.log('count', count);
   };
 
-  const onSpeechVolumeChanged = e => {
-    console.log('onSpeechVolumeChanged: ', e);
-    setPitch(e.value);
+  const getToken = data => {
+    AsyncStorage.getItem('readingSession')
+      .then(readingSession => {
+        sendRedingData(data, readingSession);
+      })
+      .catch(error => {
+        console.log(error);
+      });
   };
 
   const startRecording = async () => {
@@ -84,16 +110,24 @@ export default function ReadActivityGo() {
     }
   };
 
-  const stopRecording = async () => {
-    try {
-      await Voice.stop();
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
   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}
@@ -108,13 +142,6 @@ export default function ReadActivityGo() {
               <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={ImagePaths.go}></Image>

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

@@ -15,16 +15,18 @@ import {
 } from 'react-native';
 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 Client from '../../client/Client';
+import ReadModal from '../../../component/reading/ReadModal';
 
 export default function ReadActivityHe() {
   const navigation = useNavigation();
 
-  const [pitch, setPitch] = useState('');
-  const [error, setError] = useState('');
-  const [end, setEnd] = useState('');
-  const [started, setStarted] = useState('');
-  const [results, setResults] = useState([]);
-  const [partialResults, setPartialResults] = useState([]);
+  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);
@@ -32,23 +34,49 @@ export default function ReadActivityHe() {
 
   useEffect(() => {
     Voice.onSpeechStart = onSpeechStartHandler;
-    Voice.onSpeechEnd = onSpeechEndHandler;
     Voice.onSpeechResults = onSpeechResultsHandler;
     Voice.onSpeechError = onSpeechError;
-    Voice.onSpeechPartialResults = onSpeechPartialResults;
-    Voice.onSpeechVolumeChanged = onSpeechVolumeChanged;
 
     return () => {
       Voice.destroy().then(Voice.removeAllListeners);
     };
   }, []);
 
-  const onSpeechStartHandler = e => {
-    console.log('start handler =>> ', e);
+  const sendRedingData = (data, readingSession) => {
+    Client.post('reading/' + readingSession, JSON.stringify(data), {
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    })
+      .then(res => {
+        updateReadingSession(readingSession);
+      })
+      .catch(error => {
+        console.log(error);
+      });
   };
 
-  const onSpeechEndHandler = e => {
-    console.log('end handler =>> ', e);
+  const updateReadingSession = readingSession => {
+    Client.put('updateSession/' + readingSession, {
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    })
+      .then(res => {
+        // AsyncStorage.removeItem('readingSession');
+        // alert('Basic Level Completed');
+        // navigation.navigate('Read');
+        setModalVisible2(true);
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  };
+
+  const onSpeechStartHandler = e => {
+    console.log('start handler =>> ', e);
   };
 
   const onSpeechResultsHandler = e => {
@@ -57,23 +85,38 @@ export default function ReadActivityHe() {
 
   const onSpeechError = e => {
     console.log('onSpeechError: ', e);
-    setError(JSON.stringify(e.error));
     const result = DummyReadResult.value;
-
     if (result.includes('hello')) {
-      console.log('correct');
-      navigation.navigate('ReadActivityHe');
+      AsyncStorage.getItem('userId')
+        .then(userId => {
+          const data = {
+            word: 'he',
+            userId: userId,
+            level: 1,
+            triedCount: count,
+          };
+          getToken(data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    } else {
+      setCount(count + 1);
+      Voice.start('en-US');
     }
-  };
+    console.log('count', count);
 
-  const onSpeechPartialResults = e => {
-    console.log('onSpeechPartialResults: ', e);
-    setPartialResults(e.value);
+    console.log('count', count);
   };
 
-  const onSpeechVolumeChanged = e => {
-    console.log('onSpeechVolumeChanged: ', e);
-    setPitch(e.value);
+  const getToken = data => {
+    AsyncStorage.getItem('readingSession')
+      .then(readingSession => {
+        sendRedingData(data, readingSession);
+      })
+      .catch(error => {
+        console.log(error);
+      });
   };
 
   const startRecording = async () => {
@@ -84,16 +127,25 @@ export default function ReadActivityHe() {
     }
   };
 
-  const stopRecording = async () => {
-    try {
-      await Voice.stop();
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
   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,18 +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 [readingData, setReadingData] = useState({
-    word: '',
-    userId: '',
-    level: 1,
-    triedCount: 1,
-  });
   const [count, setCount] = useState(1);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [modalVisible2, setModalVisible2] = useState(false);
+  const [modalVisible3, setModalVisible3] = useState(false);
 
   useEffect(() => {
     Voice.onSpeechStart = onSpeechStartHandler;
@@ -40,16 +40,6 @@ export default function ReadActivityNo() {
     };
   }, []);
 
-  const getToken = data => {
-    AsyncStorage.getItem('readingSession')
-      .then(readingSession => {
-        sendRedingData(data, readingSession);
-      })
-      .catch(error => {
-        console.log(error);
-      });
-  };
-
   const sendRedingData = (data, readingSession) => {
     Client.post('reading/' + readingSession, JSON.stringify(data), {
       headers: {
@@ -58,9 +48,8 @@ export default function ReadActivityNo() {
       },
     })
       .then(res => {
-        console.log(res.data);
-        // AsyncStorage.removeItem('readingSession');
-        navigation.navigate('ReadActivityGo');
+        setModalVisible2(true);
+        // navigation.navigate('ReadActivityGo');
       })
       .catch(error => {
         console.log(error);
@@ -87,23 +76,31 @@ export default function ReadActivityNo() {
             level: 1,
             triedCount: count,
           };
-          console.log('correct', data);
           getToken(data);
         })
         .catch(error => {
           console.log(error);
         });
-      
     } else {
       setCount(count + 1);
+      setModalVisible3(true);
       Voice.start('en-US');
     }
-
     console.log('count', count);
 
     console.log('count', count);
   };
 
+  const getToken = data => {
+    AsyncStorage.getItem('readingSession')
+      .then(readingSession => {
+        sendRedingData(data, readingSession);
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  };
+
   const startRecording = async () => {
     try {
       await Voice.start('en-US');
@@ -114,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}
@@ -227,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

+import React, {useEffect, useState} from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Pressable,
+  ImageBackground,
+  TouchableOpacity,
+  Image,
+  ScrollView,
+  StatusBar,
+} from 'react-native';
+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/reading/TableList';
+import { ImagePaths } from '../../../assets/read/data/ReadData';
+
+export default function ReadResults() {
+  const navigation = useNavigation();
+
+  React.useEffect(() => {
+    StatusBar.setHidden(true);
+
+    // getColorResult();
+
+    const unsubscribe = navigation.addListener('focus', () => {
+      // The screen is focused
+      // Call any action
+      Orientation.unlockAllOrientations();
+      Orientation.lockToPortrait();
+    });
+
+    return unsubscribe;
+  }, [navigation]);
+
+  return (
+    // <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> */}
+          </View>
+        </ImageBackground>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  container: {
+    // backgroundColor : '#fff',
+    marginTop: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  logo: {
+    marginTop: 80,
+    width: '30%',
+    height: '30%',
+  },
+  imageContainer: {
+    flexDirection: 'row',
+    marginTop: 70,
+  },
+});