some changes

API/app.py

@@ -3,14 +3,17 @@ 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
+<<<<<<< HEAD
 from API.model.color.colorModel import *
+=======
+from API.model.color.colorModel import get_color_activities1, get_color_activities2, get_color_activity_result, \
+    storeResult, save_color_session_details
+>>>>>>> cdf409073e925ffb983057db2cfacef7030302a9
 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
@@ -73,11 +76,8 @@ def predict():
         print(ValueError)
 
 
-
-
 @app.route("/colorSession", methods=['POST'])
 def color_session():
-
     token = save_color_session_details(1)
     response = {
         "token": token,
@@ -153,9 +153,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 +166,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 +182,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
     }
@@ -197,4 +228,4 @@ def save_reading(readingToken):
 
 
 if __name__ == "__main__":
-    app.run(host='192.168.8.100')
+    app.run(host='192.168.1.101')

API/db/dbConnection.py

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

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 * 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

@@ -35,6 +35,7 @@
     "react-native-table-component": "^1.2.1",
     "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/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/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,8 +31,10 @@ const ReadCategory = props => {
       });
   };
 
-  const getReadingSession = () => {
-    Client.post('readingSession', {
+  const createReadingSession = () => {
+    AsyncStorage.getItem('userId')
+      .then(userId => {
+        Client.post('readingSession/' + userId, {
           headers: {
             Accept: 'application/json',
             'Content-Type': 'application/json',
@@ -43,7 +43,6 @@ const ReadCategory = props => {
           .then(res => {
             console.log(res.data);
             if (res.status == 200) {
-          console.log(res.data);
               const token = res.data.token;
               try {
                 AsyncStorage.setItem('readingSession', token);
@@ -56,11 +55,18 @@ const ReadCategory = props => {
           .catch(error => {
             console.log(error);
           });
+      })
+      .catch(error => {
+        console.log(error);
+      });
+    
   };
 
+  
   return (
     <View style={styles.gameItem}>
       <TouchableOpacity
+        disabled={false}
         onPress={() => {
           checkReadingSession();
         }}>

frontend/src/constants/Countdown.js

 export default {
-    elementry: 5,
-    average: 3,
-    hard: 3
+    elementry: 7,
+    medium: 5,
+    advance: 2
 }
\ 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

@@ -39,9 +39,40 @@ 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';
 
 const Stack = createNativeStackNavigator();
 
@@ -152,6 +183,16 @@ 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="ColorResult"
@@ -246,6 +287,166 @@ const AppRouter = () => {
             headerStyle: {backgroundColor: Colors.primary},
           }}
         />
+        <Stack.Screen
+          name="MemoryResult"
+          component={MemoryResult}
+          options={{
+            headerShown: true,
+            title: 'Results',
+            headerTintColor: 'white',
+            headerStyle: {backgroundColor: Colors.primary},
+          }}
+        />
+        <Stack.Screen
+          name="GameLevel"
+          component={GameLevel}
+          options={{
+            headerShown: true,
+            title: 'Levels',
+            headerTintColor: 'white',
+            headerStyle: {backgroundColor: Colors.primary},
+          }}
+        />
+        <Stack.Screen
+          name="MediumLevelStart"
+          component={MediumLevelStart}
+          options={{
+            headerShown: true,
+            title: 'Medium Level',
+            headerTintColor: 'white',
+            headerStyle: {backgroundColor: Colors.primary},
+          }}
+        />
+        <Stack.Screen
+          name="AdvanceLevelStart"
+          component={AdvanceLevelStart}
+          options={{
+            headerShown: true,
+            title: 'Advance Level',
+            headerTintColor: 'white',
+            headerStyle: {backgroundColor: Colors.primary},
+          }}
+        />
+        <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"
@@ -261,6 +462,11 @@ const AppRouter = () => {
           name="Sam"
           component={Sam}
         />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="Progress"
+          component={Progress}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );

frontend/src/screen/Home.js

@@ -53,7 +53,7 @@ export default function Home({ navigation }){
                 style={styles.image}
                 source={require('../assets/color/background.png')}
                 resizeMode="contain"></Image>
-              <ImageButton path="Progress" title="Progress Check" />
+              <ImageButton path="Progress" title="Progress" />
             </View>
             {/* <View style={styles.imageView}>
               <Image

frontend/src/screen/Progress.js

+import React, { Component } from 'react'
+import { StyleSheet, TouchableOpacity, View, Text, Pressable, SafeAreaView, ScrollView, Image, ImageBackground, Dimensions, Animated, Easing, NativeModules } from 'react-native';
+
+export default function Progress(){
+    return (
+      <View><Text>ddddddd</Text></View>
+    )
+  }

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'}
               />
+            {/* </>
+          )} */}
         </TouchableOpacity>
       </ScrollView>
     </SafeAreaView>

frontend/src/screen/client/Client.js

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

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 from 'react';
+import {Text, View, StyleSheet, Button} from 'react-native';
+
+const GameLevel = ({navigation}) => {
+    return (
+        <View style={styles.screen} >
+            <View style={styles.levelWrapper}>
+                <View style={styles.levelContainer}>
+                    <Button style={styles.btn} title='Elementry' onPress={()=>{navigation.navigate('StartGameScreen')}} />
+                    <Button style={styles.btn} title='Medium' onPress={()=>{navigation.navigate('MediumLevelStart')}} />
+                    <Button style={styles.btn} title='Advance' onPress={()=>{navigation.navigate('AdvanceLevelStart')}} />
+                </View>
+            </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'
+    },
+    btn: {
+        maxWidth: '100%',
+        height: 30
+    }
+});
+
+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/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/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/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>
+                <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}>Car - කාරය</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}>Pencil - පැන්සල</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}>Pencil - පැන්සල</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}>Flower - මල</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}>Ball - බෝලය</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,18 @@ 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';
 
 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);
+
+  useEffect(() => {
+    Voice.destroy().then(Voice.removeAllListeners);
+  }, []);
 
   useEffect(() => {
     Voice.onSpeechStart = onSpeechStartHandler;
@@ -41,28 +38,15 @@ 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');
+        navigation.navigate('ReadActivityFish');
       })
       .catch(error => {
         console.log(error);
@@ -78,19 +62,39 @@ export default function ReadActivityBird() {
   };
 
   const onSpeechError = e => {
+    console.log('onSpeechError: ', e);
     const result = DummyReadResult.value;
+    if (result.includes('hello')) {
+      AsyncStorage.getItem('userId')
+        .then(userId => {
           const data = {
             word: 'bird',
-      userId: 1,
+            userId: userId,
             level: 1,
-      triedCount: 1,
+            triedCount: count,
           };
-    if (result.includes('hello')) {
-      setReadingData(data);
-      console.log('data', getToken());
-      console.log('readingData:', readingData);
           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 () => {
@@ -106,30 +110,20 @@ export default function ReadActivityBird() {
       <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 +164,6 @@ const styles = StyleSheet.create({
   box: {
     width: 180,
     height: 180,
-    // borderColor: "#000000",
     backgroundColor: 'blue',
     marginTop: -370,
     marginLeft: 455,
@@ -189,8 +182,8 @@ const styles = StyleSheet.create({
     height: 200,
   },
   textBody: {
-    marginTop: 150,
-    marginLeft: -30,
+    marginTop: 130,
+    marginLeft: -50,
     // backgroundColor: '#00008B',
     width: 150,
     borderRadius: 50,
@@ -202,7 +195,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 +210,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';
+
+export default function ReadActivityDog() {
+  const navigation = useNavigation();
+
+  const [count, setCount] = useState(1);
+
+  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 => {
+        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>
+      <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';
+
+export default function ReadActivityFish() {
+  const navigation = useNavigation();
+
+  const [count, setCount] = useState(1);
+
+  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');
+      })
+      .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>
+      <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,14 @@ 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';
 
 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);
 
   useEffect(() => {
     Voice.destroy().then(Voice.removeAllListeners);
@@ -32,23 +30,31 @@ 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 => {
+        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 +63,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,14 +105,6 @@ export default function ReadActivityGo() {
     }
   };
 
-  const stopRecording = async () => {
-    try {
-      await Voice.stop();
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
   return (
     <SafeAreaView>
       <View style={{flexDirection: 'column'}}>
@@ -108,13 +121,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,14 @@ 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';
 
 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);
 
   useEffect(() => {
     Voice.destroy().then(Voice.removeAllListeners);
@@ -32,23 +30,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 => {
+    console.log('fuck');
+    Client.put('updateSession/' + readingSession, {
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    })
+      .then(res => {
+        // AsyncStorage.removeItem('readingSession');
+        alert('Basic Level Completed');
+        navigation.navigate('Read');
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  };
+
+  const onSpeechStartHandler = e => {
+    console.log('start handler =>> ', e);
   };
 
   const onSpeechResultsHandler = e => {
@@ -57,23 +81,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,14 +123,6 @@ export default function ReadActivityHe() {
     }
   };
 
-  const stopRecording = async () => {
-    try {
-      await Voice.stop();
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
   return (
     <SafeAreaView>
       <View style={{flexDirection: 'column'}}>

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

@@ -22,12 +22,6 @@ import Client from '../../client/Client';
 export default function ReadActivityNo() {
   const navigation = useNavigation();
 
-  const [readingData, setReadingData] = useState({
-    word: '',
-    userId: '',
-    level: 1,
-    triedCount: 1,
-  });
   const [count, setCount] = useState(1);
 
   useEffect(() => {
@@ -40,16 +34,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,8 +42,6 @@ export default function ReadActivityNo() {
       },
     })
       .then(res => {
-        console.log(res.data);
-        // AsyncStorage.removeItem('readingSession');
         navigation.navigate('ReadActivityGo');
       })
       .catch(error => {
@@ -87,23 +69,30 @@ export default function ReadActivityNo() {
             level: 1,
             triedCount: count,
           };
-          console.log('correct', data);
           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');

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/TableList';
+
+import axios from 'axios';
+import Client from '../../client/Client';
+
+const webUrel = 'http://192.168.8.100:5000/getColorActivitiesResult';
+
+export default function ReadResults() {
+  const navigation = useNavigation();
+
+  function getColorResult() {
+    Client.get('reading')
+      .then(response => {
+        // setNames(response.data);
+        console.log(response.data);
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  }
+
+  React.useEffect(() => {
+    StatusBar.setHidden(true);
+
+    // getColorResult();
+
+    const unsubscribe = navigation.addListener('focus', () => {
+      // The screen is focused
+      // Call any action
+      Orientation.unlockAllOrientations();
+      Orientation.lockToLandscape();
+    });
+
+    return unsubscribe;
+  }, [navigation]);
+
+  return (
+    <SafeAreaView style={{marginBottom: -150}}>
+      <ScrollView>
+        <View>
+          <ImageBackground
+            style={styles.image}
+            source={require('../../assets/result/21.jpg')}>
+            <View>
+              <BackButton path="Color" />
+            </View>
+            <View style={styles.container}>
+              <Image
+                style={styles.logo}
+                source={require('../../assets/result/title.png')}
+              />
+            </View>
+            <View style={{marginTop: -70}}>
+              <TableList />
+            </View>
+          </ImageBackground>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  container: {
+    // backgroundColor : '#fff',
+    marginTop: -130,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  logo: {
+    marginTop: 80,
+    width: '30%',
+    height: '30%',
+  },
+});

package-lock.json

+{
+  "name": "21_22j-38",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}