changes

API/app.py

@@ -228,18 +228,31 @@ def reading_result(userId):
     return make_response(body)
 
 
-# @app.route("/result", methods=['GET'])
-# def reading_result():
-#     req = request.get_json()
-#     userId = req['userId']
-#     result = get_reading_result(userId)
-#     response = {
-#         "data": result,
-#         "message": "Success",
-#         "status": 200
-#     }
-#     body = jsonify(response)
-#     return make_response(body)
+# Predict route
+@app.route("/predictPronounce/<FPFN>", methods=["POST"])
+def predict_pronounce(FPFN):
+    assert FPFN == request.view_args['FPFN']
+    data = request.get_json()
+    print((f"{data}"))
+
+    try:
+
+        audioFile ="temp/no.wav"
+
+        result = predictData(audioFile, FPFN)
+
+        response = {
+            "data": result,
+            "message": "Success",
+            "status": 200
+        }
+        # resp = make_response(response)
+        # resp.headers['Access-Control-Allow-Origin'] = '*'
+        # resp.headers['Content-Type'] = 'application/json'
+        body = jsonify(response)
+        return make_response(body)
+    except ValueError:
+        print(ValueError)
 
 
 if __name__ == "__main__":

API/model/readModel.py

 from API.db.dbConnection import *
 from flask import jsonify
 from API.util.util import getUUID
+from API.service.reading import pronounce_spotting_service
 
 
 def get_reading_result(userId):
-    qry = 'SELECT userId,word,triedCount,level FROM reading WHERE userId = "{}"'.format(userId)
+    qry = 'SELECT word,triedCount,level FROM reading WHERE userId = "{}"'.format(userId)
     return get_data(qry)
 
 
@@ -31,3 +32,30 @@ def update_session_status(token):
 def get_completed_levels_by_user(userId):
     qry = 'SELECT status FROM readingSession  WHERE userId = "{}"'.format(userId)
     return get_data(qry)
+
+
+def predictData(audioFile, name):
+
+    # print(f"{name}")
+
+    # path = "test/green.wav"
+
+    # print(f"{path}")
+
+    new_predict_file_name = name.split(".")
+    FPFN = new_predict_file_name[0]
+
+    # invoke keyword spotting service
+    #kss = pronounce_spotting_service()
+
+    # make a prediction
+    # predicted_keyword = kss.predict(audioFile)
+
+    # remove the audio file
+    # os.remove(file_name)
+
+    # send back the predicted keyword in json format
+    data = {"Predicted Keyword": FPFN}
+
+    print(f"data: {data}")
+    return data

API/service/reading/pronounce_spotting_service.py

+import tensorflow.keras as keras
+import numpy as np
+import librosa
+
+MODEL_PATH = "model.h5"
+NUM_SAMPLES_TO_CONSIDER = 22050 # 1 sec
+
+class _Keyword_Spotting_Service:
+
+    model = None
+    _mappings = [
+
+        "no",
+        "go",
+        "he",
+        "dog",
+        "bird",
+        "fish",
+    ]
+    _instance = None
+
+    def predict(self, file_path):
+
+        # extract MFCCs
+        MFCCs = self.preprocess(file_path) # (# segment, # coefficients)
+
+        # convert 2d MFCCs array into 4d array -> (# samples, # segment, # coefficients, # channels)
+        MFCCs = MFCCs[np.newaxis, ..., np.newaxis]
+
+        # make prediction
+        predictions = self.model.predict(MFCCs)
+        predicted_index = np.argmax(predictions)
+        predicted_keyword = self._mappings[predicted_index]
+
+        # return predicted_keyword
+
+        new_file_path = file_path.split("/")
+
+        new_file_paths = new_file_path[1].split(".")
+
+        print(f"1-{predicted_keyword}")
+        print(f"2-{new_file_paths[0]}")
+
+        if predicted_keyword == new_file_paths[0]:
+            return predicted_keyword
+        else:
+            return "No Prediction"
+
+    def preprocess(self, file_path, n_mfcc=13, n_fft=2048, hop_length=512):
+
+        # load audio file
+        signal, sr = librosa.load(file_path)
+
+        # ensure consistency in the audio file length
+        if len(signal) > NUM_SAMPLES_TO_CONSIDER:
+            signal = signal[:NUM_SAMPLES_TO_CONSIDER]
+
+        # extract MFCCs
+        MFCCs = librosa.feature.mfcc(signal, n_mfcc=n_mfcc, n_fft=n_fft, hop_length=hop_length)
+
+        return MFCCs.T
+
+def Keyword_Spotting_service():
+
+    # ensure that we only have 1 instance of KSS
+    if _Keyword_Spotting_Service._instance is None:
+        _Keyword_Spotting_Service._instance = _Keyword_Spotting_Service()
+        _Keyword_Spotting_Service.model = keras.models.load_model(MODEL_PATH)
+
+    return _Keyword_Spotting_Service._instance
+
+if __name__ == "__main__":
+    kss = Keyword_Spotting_service()
+
+    keyword1 = kss.predict("temp/bird.wav")
+    # keyword2 = kss.predict("test/blu7.wav")
+
+    print(f"Predicted Keywords: {keyword1}")
+    # print(f"Predicted Keywords: {keyword2}")
\ No newline at end of file

backend/IT18257632/pronounce_spotting_service.py

@@ -10,15 +10,12 @@ class _Keyword_Spotting_Service:
     model = None
     _mappings = [
 
-        "go",
         "no",
-        "yes",
-        "wow",
+        "go",
+        "he",
         "dog",
-        "bed",
         "bird",
-        "left",
-        "eight"
+        "fish",
     ]
     _instance = None
 

frontend/package-lock.json

@@ -3968,6 +3968,7 @@
       "peerDependencies": {
         "react-native": ">=0.59"
       }
+<<<<<<< HEAD
     },
     "node_modules/@react-native-picker/picker": {
       "version": "2.4.1",
@@ -3977,6 +3978,8 @@
         "react": "16 || 17",
         "react-native": ">=0.57"
       }
+=======
+>>>>>>> a7a9d5d3add78ba5f3c20db3f2d330f56f73a488
     },
     "node_modules/@react-native-voice/voice": {
       "version": "3.2.3",
@@ -18352,12 +18355,15 @@
       "resolved": "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-7.1.12.tgz",
       "integrity": "sha512-fkCRkOgzfdD0sr8JTasDgm716l8bJPkCNjXIyllG8K+UyixVa68lroQmgW9pewE5G5p43I9MWPtGZR/kVowBzg==",
       "requires": {}
+<<<<<<< HEAD
     },
     "@react-native-picker/picker": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.4.1.tgz",
       "integrity": "sha512-1XWy3IQgwr7MWd30KdY1iUh2gQZD+JiotN1ifj/ptFUYKon/0UFwngKQaWCO/CP/FdLl20/huSSLwKedYrdMMA==",
       "requires": {}
+=======
+>>>>>>> a7a9d5d3add78ba5f3c20db3f2d330f56f73a488
     },
     "@react-native-voice/voice": {
       "version": "3.2.3",

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

 export const ImagePaths = {
   roundOne: require('../image/round1.jpeg'),
   roundTwo: require('../image/round2.png'),
-  summery: require('../image/ReadHeaderImg4.webp'),
+  summery2: require('../image/ReadHeaderImg4.webp'),
+  summery: require('../image/ReadHeaderImg45.jpg'),
   robot1: require('../image/robot1.png'),
   robot2: require('../image/activity-2-rob.png'),
   backgroundBasic: require('../image/activity-2-backg.jpeg'),
+  backgroundAdvanced: require('../image/backgroundAdvanced.jpeg'),
+  backgroundAdvancedDog: require('../image/dogbb.jpg'),
+  backgroundAdvancedBird: require('../image/birdb.jpg'),
+  backgroundAdvancedFish: require('../image/fishbb.jpg'),
   resultBackground: require('../image/rersultBacground.jpeg'),
   no: require('../image/no.png'),
   go: require('../image/go.png'),
@@ -12,6 +17,14 @@ export const ImagePaths = {
   bird: require('../image/bird.png'),
   dog: require('../image/dog.png'),
   fish: require('../image/fish.png'),
+  bird1: require('../image/bird1.png'),
+  dog1: require('../image/dog1.png'),
+  fish1: require('../image/fish1.png'),
+  retry: require('../image/retry.png'),
+  wrong: require('../image/wrong.png'),
+  correct: require('../image/correct.png'),
+  chart: require('../image/chart.png'),
+  record: require('../image/record.png'),
 };
 
 export const DummyReadResult = {

frontend/src/component/memory/MainButton.js

@@ -4,7 +4,7 @@ import Colors from '../../constants/Colors'
 
 const MainButton = (props) => {
     return(
-        <TouchableOpacity onPress={props.onPress}>
+        <TouchableOpacity disabled={props.disabled} onPress={props.onPress}>
             <View style={{...styles.button, ...props.styles}}>
                 <Text style={styles.buttonText}>{props.children}</Text>
             </View>

frontend/src/component/reading/ReadModal.js

@@ -15,7 +15,7 @@ import {useNavigation} from '@react-navigation/native';
 import {ImagePaths} from '../../assets/read/data/ReadData';
 
 export default function ReadModal(props) {
-  const {caption, validity, visibility, path} = props;
+  const {caption, validity, visibility, path,imagePath} = props;
 
   const navigation = useNavigation();
 
@@ -34,15 +34,15 @@ export default function ReadModal(props) {
     >
       <View style={styles.centeredView2}>
         <View style={styles.modalView2}>
-          <Image style={styles.alert2} source={ImagePaths.robot1}></Image>
+          <Image style={styles.alert2} source={ImagePaths.bird1}></Image>
 
-          <Text style={styles.headStyle2}>{ caption}</Text>
+          <Text style={styles.headStyle2}>{caption}</Text>
           <Text style={styles.head2Style2}>{validity}</Text>
           <TouchableOpacity
             style={[styles.buttonClose2]}
             onPress={() => navigation.navigate(path)}>
             <Image
-              source={ImagePaths.robot1}
+              source={ImagePaths.correct}
               resizeMode="contain"
               style={{width: 100, height: 70, marginBottom: -10}}
             />
@@ -174,7 +174,7 @@ const styles = StyleSheet.create({
     marginBottom: 20,
   },
   alert2: {
-    backgroundColor: 'white',
+    // backgroundColor: 'rgba(0, 181, 0, 0.45)',
     borderRadius: 50,
     width: 100,
     height: 100,

frontend/src/component/reading/ReadModalFailed.js

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

frontend/src/component/reading/TableList.js

@@ -35,7 +35,7 @@ export default function TableList() {
     Client.get('result/' + userId)
       .then(response => {
         setTableData({
-          tableHead: ['Date', 'Word', 'Count', 'Level'],
+          tableHead: ['Word', 'Count', 'Level'],
           data: response.data.data,
         });
       })
@@ -54,14 +54,14 @@ export default function TableList() {
         <Table borderStyle={{borderWidth: 3, borderColor: '#fff'}}>
           <Row
             data={tableData.tableHead}
-            flexArr={[1, 1.5, 1, 1]}
+            flexArr={[ 1, 1, 1.5]}
             style={styles.head}
             textStyle={styles.text}
           />
           <TableWrapper style={styles.wrapper}>
             <Rows
               data={tableData.data}
-              flexArr={[1, 1.5, 1, 1]}
+              flexArr={[1, 1, 1.5]}
               style={styles.row}
               textStyle={styles.text}
             />
@@ -75,7 +75,7 @@ export default function TableList() {
 const styles = StyleSheet.create({
   container: {
     flex: 0,
-    paddingTop: 70,
+    paddingTop: 40,
     paddingLeft: 60,
     paddingRight: 60,
     marginTop: 0,

frontend/src/constants/endpoint.js

-export default api = 'http://192.168.8.170:5000'
\ No newline at end of file
+export default api = 'http://192.168.8.100:5000'
\ No newline at end of file

frontend/src/screen/Home.js

@@ -72,7 +72,8 @@ const styles = StyleSheet.create({
 
     imageContainer:{
         flexDirection: "row",
-        marginTop: 70,
+    marginTop: 70,
+        
     },
     imageView: {
         width: 180,

frontend/src/screen/Read.js

@@ -121,7 +121,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     padding: 20,
-    backgroundColor: '#ffff',
+    backgroundColor: 'rgba(216, 216, 216, 0.22)',
   },
   imageContainer: {
     flexDirection: 'row',

frontend/src/screen/memory/GameLevel.js

@@ -2,10 +2,26 @@ import { Center, Column, Row } from 'native-base';
 import React, {useState} from 'react';
 import {Text, View, StyleSheet, Button, ScrollView, Image,ImageBackground, TouchableOpacity, Modal, Alert, Pressable} from 'react-native';
 import MainButton from '../../component/memory/MainButton';
+import { useDispatch, useSelector } from 'react-redux'; 
+import { Icon } from 'react-native-elements';
 
 const GameLevel = ({navigation}) => {
     const [modalVisible, setModalVisible] = useState(false);
     const [mediumModalVisible, setMediumModalVisible] = useState(false);
+
+    const status = useSelector(state=>state.memory.is_passed.status);
+    const level = useSelector(state=>state.memory.is_passed.level);
+
+    console.log(status);
+    console.log(level);
+
+    React.useEffect(() => {
+      const unsubscribe = navigation.addListener('focus', () => {
+
+      });
+      return unsubscribe;
+    }, [navigation]);
+
     return (
         <ScrollView>
       <Modal
@@ -81,15 +97,15 @@ const GameLevel = ({navigation}) => {
                     </View>
             </View>
             <View style={styles.screen} >
-                <MainButton styles={styles.elementryBtn} onPress={() => setModalVisible(true)}>
-                    Elementry 
+                <MainButton disabled={false} styles={styles.elementryBtn} onPress={() => setModalVisible(true)}>
+                <Icon name="unlock-alt" type="font-awesome" size={36} color="white" />     Elementry 
                 </MainButton>
-                <MainButton styles={styles.mediumBtn} onPress={()=>{setMediumModalVisible(true)}}>
+                <MainButton disabled={!status ? true : false} styles={styles.mediumBtn} onPress={()=>{setMediumModalVisible(true)}}>
                 {/* navigation.navigate('MediumLevelStart') */}
-                    Medium
+                <Icon name={ status ? 'unlock-alt' : 'lock'} type="font-awesome" size={36} color="white" />     Medium
                 </MainButton>
-                <MainButton styles={styles.advanceBtn} onPress={()=>{navigation.navigate('AdvanceLevelStart')}}>
-                    Advance
+                <MainButton disabled={true} styles={styles.advanceBtn} onPress={()=>{navigation.navigate('AdvanceLevelStart')}}>
+                <Icon name="lock" type="font-awesome" size={36} color="white" />     Advance
                 </MainButton>
             </View>
         </ScrollView>

frontend/src/screen/memory/GameOverScreen.js

@@ -60,9 +60,9 @@ const GameOverScreen = ({navigation}) => {
         .catch(err=>console.log(err));
     }
 
-    if(data>=3.0){
+    if(data>=2.9){
         disorderLevel = 'High';
-    }else if (data>=1.5) {
+    }else if (data>=1.99) {
         disorderLevel = 'Medium';
     } else {
         disorderLevel = 'low';
@@ -88,6 +88,7 @@ const GameOverScreen = ({navigation}) => {
 
     if(!loading){
         insertData();
+        dispatch(memoryActions.levelPassed({level: disorderLevel, status: true}));
         resultText=(
         // <Text style={styles.resultText}>
         //     <Text>Child's disorder level is </Text> <Text style={styles.highlight}>{disorderLevel}</Text>

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

@@ -9,10 +9,10 @@ import Countdown from '../../../constants/Countdown';
 
 const GameScreenOne = ({navigation}) => {
 
-    // useEffect(()=>{
-    //     const backHandler = BackHandler.addEventListener('hardwareBackPress', () => true)
-    //     return () => backHandler.remove()
-    // },[]);
+    useEffect(()=>{
+        const backHandler = BackHandler.addEventListener('hardwareBackPress', () => true)
+        return () => backHandler.remove()
+    },[]);
 
     const dispatch = useDispatch();
 

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

@@ -19,6 +19,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import {Authorize} from '../../auth/AuthenticateUser';
 import Client from '../../client/Client';
 import ReadModal from '../../../component/reading/ReadModal';
+import ReadModalFailed from '../../../component/reading/ReadModalFailed';
 
 export default function ReadActivityBird() {
   const navigation = useNavigation();
@@ -63,7 +64,26 @@ export default function ReadActivityBird() {
   };
 
   const onSpeechResultsHandler = e => {
-    console.log('result handler =>> ', e);
+    const result = e.value;
+    if (result.includes('bird')) {
+      AsyncStorage.getItem('userId')
+        .then(userId => {
+          const data = {
+            word: 'Bird',
+            userId: userId,
+            level: 'Advance',
+            triedCount: count,
+          };
+          getToken(data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    } else {
+      setCount(count + 1);
+      setModalVisible3(true);
+      startRecording();
+    }
   };
 
   const onSpeechError = e => {
@@ -118,20 +138,15 @@ export default function ReadActivityBird() {
           validity="Pronunciation."
           visible="true"
           path="ReadActivityFish"
+          imagePath={ImagePaths.bird1}
         />
       )}
 
-      {modalVisible3 && (
-        <ReadModal
-          caption="Misronunciation"
-          validity="Please Try Again."
-          visible="true"
-        />
-      )}
+      {modalVisible3 && <ReadModalFailed visible="true" />}
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}
-          source={ImagePaths.backgroundBasic}>
+          source={ImagePaths.backgroundAdvancedBird}>
           <View style={styles.imageContainer}>
             <View style={styles.imageView}>
               <View style={styles.robo}>
@@ -148,12 +163,7 @@ export default function ReadActivityBird() {
           </View>
           <View style={styles.horizontalView}>
             <TouchableHighlight onPress={startRecording}>
-              <Image
-                style={styles.imageButton}
-                source={{
-                  uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
-                }}
-              />
+              <Image style={styles.imageButton} source={ImagePaths.record} />
             </TouchableHighlight>
           </View>
         </ImageBackground>
@@ -216,7 +226,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     color: '#00008B',
     borderRadius: 10,
-    backgroundColor: 'rgba(2, 202, 106, 0.17)',
+    backgroundColor: 'rgba(2, 202, 106, 0.99)',
     textAlign: 'center',
     fontWeight: 'bold',
   },
@@ -227,18 +237,17 @@ const styles = StyleSheet.create({
     color: '#000000',
   },
   imageButton: {
-    width: 50,
-    height: 50,
+    width: 100,
+    height: 100,
   },
   horizontalView: {
-    backgroundColor: 'rgba(23, 0, 245, 0.17)',
-    borderRadius: 50,
+    // backgroundColor: 'rgba(23, 0, 245, 0.1)',
     flexDirection: 'row',
     position: 'absolute',
     bottom: 0,
     flexDirection: 'row',
-    marginBottom: 140,
-    marginLeft: 50,
-    padding: 7,
+    marginBottom: 80,
+    marginLeft: 135,
+    padding: 0,
   },
 });

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

@@ -19,6 +19,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import {Authorize} from '../../auth/AuthenticateUser';
 import Client from '../../client/Client';
 import ReadModal from '../../../component/reading/ReadModal';
+import ReadModalFailed from '../../../component/reading/ReadModalFailed';
 
 export default function ReadActivityDog() {
   const navigation = useNavigation();
@@ -63,7 +64,26 @@ export default function ReadActivityDog() {
   };
 
   const onSpeechResultsHandler = e => {
-    console.log('result handler =>> ', e);
+    const result = e.value;
+    if (result.includes('dog')) {
+      AsyncStorage.getItem('userId')
+        .then(userId => {
+          const data = {
+            word: 'Dog',
+            userId: userId,
+            level: 'Advance',
+            triedCount: count,
+          };
+          getToken(data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    } else {
+      setCount(count + 1);
+      setModalVisible3(true);
+      startRecording();
+    }
   };
 
   const onSpeechError = e => {
@@ -118,20 +138,15 @@ export default function ReadActivityDog() {
           validity="Pronunciation."
           visible="true"
           path="ReadActivityBird"
+          imagePath={ImagePaths.dog1}
         />
       )}
 
-      {modalVisible3 && (
-        <ReadModal
-          caption="Misronunciation"
-          validity="Please Try Again."
-          visible="true"
-        />
-      )}
+      {modalVisible3 && <ReadModalFailed visible="true" />}
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}
-          source={ImagePaths.backgroundBasic}>
+          source={ImagePaths.backgroundAdvancedDog}>
           <View style={styles.imageContainer}>
             <View style={styles.imageView}>
               <View style={styles.robo}>
@@ -148,12 +163,7 @@ export default function ReadActivityDog() {
           </View>
           <View style={styles.horizontalView}>
             <TouchableHighlight onPress={startRecording}>
-              <Image
-                style={styles.imageButton}
-                source={{
-                  uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
-                }}
-              />
+              <Image style={styles.imageButton} source={ImagePaths.record} />
             </TouchableHighlight>
           </View>
         </ImageBackground>
@@ -165,7 +175,7 @@ export default function ReadActivityDog() {
 const styles = StyleSheet.create({
   imageContainer: {
     flexDirection: 'row',
-    marginTop: 70,
+    marginTop: 80,
   },
   imageView: {
     width: 180,
@@ -216,7 +226,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     color: '#00008B',
     borderRadius: 10,
-    backgroundColor: 'rgba(2, 202, 106, 0.17)',
+    backgroundColor: 'rgba(2, 202, 106, 0.99)',
     textAlign: 'center',
     fontWeight: 'bold',
   },
@@ -227,18 +237,17 @@ const styles = StyleSheet.create({
     color: '#000000',
   },
   imageButton: {
-    width: 50,
-    height: 50,
+    width: 100,
+    height: 100,
   },
   horizontalView: {
-    backgroundColor: 'rgba(23, 0, 245, 0.17)',
-    borderRadius: 50,
+    // backgroundColor: 'rgba(23, 0, 245, 0.1)',
     flexDirection: 'row',
     position: 'absolute',
     bottom: 0,
     flexDirection: 'row',
-    marginBottom: 140,
-    marginLeft: 50,
-    padding: 7,
+    marginBottom: 80,
+    marginLeft: 135,
+    padding: 0,
   },
 });

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

@@ -19,6 +19,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import {Authorize} from '../../auth/AuthenticateUser';
 import Client from '../../client/Client';
 import ReadModal from '../../../component/reading/ReadModal';
+import ReadModalFailed from '../../../component/reading/ReadModalFailed';
 
 export default function ReadActivityFish() {
   const navigation = useNavigation();
@@ -76,7 +77,26 @@ export default function ReadActivityFish() {
   };
 
   const onSpeechStartHandler = e => {
-    console.log('start handler =>> ', e);
+    const result = e.value;
+    if (result.includes('fish')) {
+      AsyncStorage.getItem('userId')
+        .then(userId => {
+          const data = {
+            word: 'Fish',
+            userId: userId,
+            level: 'Advance',
+            triedCount: count,
+          };
+          getToken(data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    } else {
+      setCount(count + 1);
+      setModalVisible3(true);
+      startRecording();
+    }
   };
 
   const onSpeechResultsHandler = e => {
@@ -135,20 +155,15 @@ export default function ReadActivityFish() {
           validity="Advanced Level Completed."
           visible="true"
           path="Read"
+          imagePath={ImagePaths.fish1}
         />
       )}
 
-      {modalVisible3 && (
-        <ReadModal
-          caption="Misronunciation"
-          validity="Please Try Again."
-          visible="true"
-        />
-      )}
+      {modalVisible3 && <ReadModalFailed visible="true" />}
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}
-          source={ImagePaths.backgroundBasic}>
+          source={ImagePaths.backgroundAdvancedFish}>
           <View style={styles.imageContainer}>
             <View style={styles.imageView}>
               <View style={styles.robo}>
@@ -165,12 +180,7 @@ export default function ReadActivityFish() {
           </View>
           <View style={styles.horizontalView}>
             <TouchableHighlight onPress={startRecording}>
-              <Image
-                style={styles.imageButton}
-                source={{
-                  uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
-                }}
-              />
+              <Image style={styles.imageButton} source={ImagePaths.record} />
             </TouchableHighlight>
           </View>
         </ImageBackground>
@@ -233,7 +243,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     color: '#00008B',
     borderRadius: 10,
-    backgroundColor: 'rgba(2, 202, 106, 0.17)',
+    backgroundColor: 'rgba(2, 202, 106, 0.99)',
     textAlign: 'center',
     fontWeight: 'bold',
   },
@@ -244,18 +254,17 @@ const styles = StyleSheet.create({
     color: '#000000',
   },
   imageButton: {
-    width: 50,
-    height: 50,
+    width: 100,
+    height: 100,
   },
   horizontalView: {
-    backgroundColor: 'rgba(23, 0, 245, 0.17)',
-    borderRadius: 50,
+    // backgroundColor: 'rgba(23, 0, 245, 0.1)',
     flexDirection: 'row',
     position: 'absolute',
     bottom: 0,
     flexDirection: 'row',
-    marginBottom: 140,
-    marginLeft: 50,
-    padding: 7,
+    marginBottom: 80,
+    marginLeft: 135,
+    padding: 0,
   },
 });

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

@@ -19,6 +19,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import {Authorize} from '../../auth/AuthenticateUser';
 import Client from '../../client/Client';
 import ReadModal from '../../../component/reading/ReadModal';
+import ReadModalFailed from '../../../component/reading/ReadModalFailed';
 
 export default function ReadActivityGo() {
   const navigation = useNavigation();
@@ -63,7 +64,26 @@ export default function ReadActivityGo() {
   };
 
   const onSpeechResultsHandler = e => {
-    console.log('result handler =>> ', e);
+    const result = e.value;
+    if (result.includes('go')) {
+      AsyncStorage.getItem('userId')
+        .then(userId => {
+          const data = {
+            word: 'Go',
+            userId: userId,
+            level: 'Basic',
+            triedCount: count,
+          };
+          getToken(data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    } else {
+      setCount(count + 1);
+      setModalVisible3(true);
+      startRecording();
+    }
   };
 
   const onSpeechError = e => {
@@ -121,13 +141,7 @@ export default function ReadActivityGo() {
         />
       )}
 
-      {modalVisible3 && (
-        <ReadModal
-          caption="Misronunciation"
-          validity="Please Try Again."
-          visible="true"
-        />
-      )}
+      {modalVisible3 && <ReadModalFailed visible="true" />}
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}
@@ -148,12 +162,7 @@ export default function ReadActivityGo() {
           </View>
           <View style={styles.horizontalView}>
             <TouchableHighlight onPress={startRecording}>
-              <Image
-                style={styles.imageButton}
-                source={{
-                  uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
-                }}
-              />
+              <Image style={styles.imageButton} source={ImagePaths.record} />
             </TouchableHighlight>
           </View>
         </ImageBackground>
@@ -227,11 +236,11 @@ const styles = StyleSheet.create({
     color: '#000000',
   },
   imageButton: {
-    width: 50,
-    height: 50,
+    width: 80,
+    height: 80,
   },
   horizontalView: {
-    backgroundColor: 'rgba(23, 0, 245, 0.17)',
+    // backgroundColor: 'rgba(23, 0, 245, 0.17)',
     borderRadius: 50,
     flexDirection: 'row',
     position: 'absolute',

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

@@ -19,6 +19,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import {Authorize} from '../../auth/AuthenticateUser';
 import Client from '../../client/Client';
 import ReadModal from '../../../component/reading/ReadModal';
+import ReadModalFailed from '../../../component/reading/ReadModalFailed';
 
 export default function ReadActivityHe() {
   const navigation = useNavigation();
@@ -50,7 +51,8 @@ export default function ReadActivityHe() {
       },
     })
       .then(res => {
-        updateReadingSession(readingSession);
+        setModalVisible2(true);
+        // updateReadingSession(readingSession);
       })
       .catch(error => {
         console.log(error);
@@ -80,7 +82,26 @@ export default function ReadActivityHe() {
   };
 
   const onSpeechResultsHandler = e => {
-    console.log('result handler =>> ', e);
+    const result = e.value;
+    if (result.includes('He')) {
+      AsyncStorage.getItem('userId')
+        .then(userId => {
+          const data = {
+            word: 'He',
+            userId: userId,
+            level: 'Basic',
+            triedCount: count,
+          };
+          getToken(data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    } else {
+      setCount(count + 1);
+      setModalVisible3(true);
+      startRecording();
+    }
   };
 
   const onSpeechError = e => {
@@ -138,14 +159,7 @@ export default function ReadActivityHe() {
         />
       )}
 
-      {modalVisible3 && (
-        <ReadModal
-          caption="Misronunciation"
-          validity="Please Try Again."
-          visible="true"
-          // path="ReadActivityGo"
-        />
-      )}
+      {modalVisible3 && <ReadModalFailed visible="true" />}
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}
@@ -166,12 +180,7 @@ export default function ReadActivityHe() {
           </View>
           <View style={styles.horizontalView}>
             <TouchableHighlight onPress={startRecording}>
-              <Image
-                style={styles.imageButton}
-                source={{
-                  uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
-                }}
-              />
+              <Image style={styles.imageButton} source={ImagePaths.record} />
             </TouchableHighlight>
           </View>
         </ImageBackground>
@@ -245,11 +254,11 @@ const styles = StyleSheet.create({
     color: '#000000',
   },
   imageButton: {
-    width: 50,
-    height: 50,
+    width: 80,
+    height: 80,
   },
   horizontalView: {
-    backgroundColor: 'rgba(23, 0, 245, 0.17)',
+    // backgroundColor: 'rgba(23, 0, 245, 0.17)',
     borderRadius: 50,
     flexDirection: 'row',
     position: 'absolute',

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

@@ -21,6 +21,7 @@ import AudioRecord from 'react-native-audio-record';
 import CountDown from 'react-native-countdown-component';
 import Client from '../../client/Client';
 import ReadModal from '../../../component/reading/ReadModal';
+import ReadModalFailed from '../../../component/reading/ReadModalFailed';
 
 export default function ReadActivityNo() {
   const navigation = useNavigation();
@@ -30,6 +31,19 @@ export default function ReadActivityNo() {
   const [modalVisible2, setModalVisible2] = useState(false);
   const [modalVisible3, setModalVisible3] = useState(false);
 
+  React.useEffect(() => {
+    // StatusBar.setHidden(true);
+    //
+    audioInit();
+
+    const unsubscribe = navigation.addListener('focus', () => {
+      Orientation.unlockAllOrientations();
+      Orientation.lockToPortrait();
+    });
+
+    return unsubscribe;
+  }, [navigation]);
+
   useEffect(() => {
     Voice.onSpeechStart = onSpeechStartHandler;
     Voice.onSpeechResults = onSpeechResultsHandler;
@@ -40,6 +54,70 @@ export default function ReadActivityNo() {
     };
   }, []);
 
+  function audioInit() {
+    // console.log('audioInit');
+    const colorAudio = {
+      sampleRate: 16000,
+      channels: 1,
+      bitsPerSample: 16,
+      wavFile: 'color.wav', // thise wave file name
+    };
+
+    AudioRecord.init(colorAudio);
+  }
+
+  async function audioStart() {
+    // console.log('audioStart');
+    // checkPermission();
+    AudioRecord.start();
+    setTimeout(() => {
+      audioStop();
+    }, 2000);
+  }
+
+  async function audioStop() {
+    // console.log('audioStop');
+
+    let audioFile = await AudioRecord.stop();
+    // console.log('userFile', audioFile);
+
+    sendAudio(audioFile);
+  }
+
+  function sendAudio(audioFile) {
+    var obj = {
+      uri: `file:${audioFile}`,
+      type: 'audio/wav',
+      name: secondColor[0] + '.wav',
+    };
+
+    var data = JSON.stringify(obj);
+    // console.log(data);
+
+    Client.post('predict', data, {
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    })
+      .then(response => {
+        // setNames(response.data);
+        console.log('Success part : ', response.data);
+      })
+      .catch(function (error) {
+        if (error.response) {
+          console.log('Error data : ', error.response.data);
+          console.log('Error status : ', error.response.status);
+          console.log('Error headers : ', error.response.headers);
+        } else if (error.request) {
+          console.log('Error request : ', error.request);
+        } else {
+          console.log('Error message : ', error.message);
+        }
+        console.log('Error else part : ', error.config);
+      });
+  }
+
   const sendRedingData = (data, readingSession) => {
     Client.post('reading/' + readingSession, JSON.stringify(data), {
       headers: {
@@ -49,6 +127,8 @@ export default function ReadActivityNo() {
     })
       .then(res => {
         setModalVisible2(true);
+        startAudio();
+
         // navigation.navigate('ReadActivityGo');
       })
       .catch(error => {
@@ -56,18 +136,59 @@ export default function ReadActivityNo() {
       });
   };
 
+  function startAudio() {
+    const datas = {
+      userId: 1,
+      token: 'f53af164ca2511ecbdc562bc611c4f50',
+    };
+    Client.post('reading/no' , JSON.stringify(datas), {
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    })
+      .then(res => {
+        setModalVisible2(true);
+
+        // navigation.navigate('ReadActivityGo');
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  }
+
   const onSpeechStartHandler = e => {
     console.log('start handler =>> ', e);
   };
 
   const onSpeechResultsHandler = e => {
-    console.log('result handler =>> ', e);
+    const result = e.value;
+    if (result.includes('no')) {
+      AsyncStorage.getItem('userId')
+        .then(userId => {
+          const data = {
+            word: 'No',
+            userId: userId,
+            level: 'Basic',
+            triedCount: count,
+          };
+          getToken(data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    } else {
+      setCount(count + 1);
+      setModalVisible3(true);
+      startRecording();
+    }
+    console.log('count', count);
   };
 
   const onSpeechError = e => {
     console.log('onSpeechError: ', e);
     const result = DummyReadResult.value;
-    if (result.includes('hello')) {
+    if (result.includes('helloddd')) {
       AsyncStorage.getItem('userId')
         .then(userId => {
           const data = {
@@ -84,11 +205,9 @@ export default function ReadActivityNo() {
     } else {
       setCount(count + 1);
       setModalVisible3(true);
-      Voice.start('en-US');
+      console.log(count);
+      startRecording();
     }
-    console.log('count', count);
-
-    console.log('count', count);
   };
 
   const getToken = data => {
@@ -120,14 +239,7 @@ export default function ReadActivityNo() {
         />
       )}
 
-      {modalVisible3 && (
-        <ReadModal
-          caption="Misronunciation"
-          validity="Please Try Again."
-          visible="true"
-          path="ReadActivityGo"
-        />
-      )}
+      {modalVisible3 && <ReadModalFailed visible="true" />}
 
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
@@ -149,12 +261,7 @@ export default function ReadActivityNo() {
           </View>
           <View style={styles.horizontalView}>
             <TouchableHighlight onPress={startRecording}>
-              <Image
-                style={styles.imageButton}
-                source={{
-                  uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
-                }}
-              />
+              <Image style={styles.imageButton} source={ImagePaths.record} />
             </TouchableHighlight>
           </View>
         </ImageBackground>
@@ -228,11 +335,11 @@ const styles = StyleSheet.create({
     color: '#000000',
   },
   imageButton: {
-    width: 50,
-    height: 50,
+    width: 80,
+    height: 80,
   },
   horizontalView: {
-    backgroundColor: 'rgba(23, 0, 245, 0.17)',
+    // backgroundColor: 'rgba(23, 0, 245, 0.17)',
     borderRadius: 50,
     flexDirection: 'row',
     position: 'absolute',
@@ -243,156 +350,4 @@ const styles = StyleSheet.create({
     padding: 7,
   },
 
-  centeredView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: -90,
-    marginLeft: -100,
-  },
-  modalView: {
-    marginRight: 20,
-    backgroundColor: '#00000000',
-    borderRadius: 20,
-    padding: 35,
-    alignItems: 'center',
-  },
-  button: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2,
-  },
-
-  centeredView2: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: 22,
-  },
-  modalView2: {
-    marginTop: -10,
-    margin: 20,
-    backgroundColor: '#FFFFFFEF',
-    borderRadius: 20,
-    padding: 35,
-    borderWidth: 5,
-    borderColor: '#red',
-    alignItems: 'center',
-    shadowColor: 'red',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  button2: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2,
-  },
-  buttonOpen2: {
-    backgroundColor: '#F194FF',
-  },
-  buttonClose2: {
-    // backgroundColor: "#1DCE92",
-  },
-  textStyle2: {
-    color: 'white',
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  modalText2: {
-    marginBottom: 15,
-    textAlign: 'center',
-  },
-  headStyle2: {
-    color: 'black',
-    fontWeight: 'bold',
-    textAlign: 'center',
-    fontSize: 30,
-    marginBottom: 5,
-  },
-  head2Style2: {
-    color: 'black',
-    fontWeight: 'bold',
-    textAlign: 'center',
-    fontSize: 30,
-    marginBottom: 20,
-  },
-  alert2: {
-    backgroundColor: 'white',
-    borderRadius: 50,
-    width: 100,
-    height: 100,
-    marginBottom: 20,
-    marginTop: -80,
-  },
-
-  centeredView3: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: -20,
-  },
-  modalView3: {
-    margin: 20,
-    backgroundColor: '#FFFFFF',
-    borderRadius: 20,
-    padding: 20,
-    borderWidth: 5,
-    borderColor: '#red',
-    alignItems: 'center',
-    shadowColor: 'red',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  button3: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2,
-  },
-  buttonOpen3: {
-    backgroundColor: '#F194FF',
-  },
-  buttonClose3: {
-    backgroundColor: 'red',
-  },
-  textStyle3: {
-    color: 'white',
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  headStyle3: {
-    color: 'black',
-    fontWeight: 'bold',
-    textAlign: 'center',
-    fontSize: 30,
-    marginBottom: 5,
-  },
-  head2Style3: {
-    color: 'black',
-    fontWeight: 'bold',
-    textAlign: 'center',
-    fontSize: 30,
-    marginBottom: 20,
-  },
-  modalText3: {
-    marginBottom: 15,
-    textAlign: 'center',
-  },
-  alert3: {
-    backgroundColor: 'white',
-    borderRadius: 50,
-    width: 100,
-    height: 100,
-    marginBottom: 20,
-    marginTop: -65,
-  },
 });

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

@@ -61,9 +61,13 @@ export default function ReadResults() {
         <ImageBackground
           style={styles.image}
           source={ImagePaths.resultBackground}>
+          <View style={styles.textBody}>
+            <Text style={styles.text}>Your Results</Text>
+          </View>
           <View style={styles.imageContainer}>
-            {/* <View style={styles.imageView}> */}
-              <TableList />
+            {/* <View > */}
+
+            <TableList />
             {/* </View> */}
           </View>
         </ImageBackground>
@@ -90,6 +94,24 @@ const styles = StyleSheet.create({
   },
   imageContainer: {
     flexDirection: 'row',
-    marginTop: 70,
+    marginTop: 1,
+  },
+  textBody: {
+    marginTop: 10,
+    marginLeft: 90,
+    // backgroundColor: '#00008B',
+    width: 220,
+    borderRadius: 50,
+    padding: 5,
+  },
+  text: {
+    fontSize: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: 'black',
+    borderRadius: 10,
+    backgroundColor: 'rgba(2, 202, 106, 0.17)',
+    textAlign: 'center',
+    fontWeight: 'bold',
   },
 });

frontend/src/store/actions/memory.js

@@ -2,6 +2,7 @@ export const SET_ANSWERS = 'SET_ANSWERS';
 export const SET_TIME = 'SET_TIME';
 export const CLEAR_DATA = 'CLEAR_DATA';
 export const SET_GAME_LEVEL = 'SET_GAME_LEVEL';
+export const PASS = 'PASS';
 
 export const setGameLevel = (level) => {
     return {type: SET_GAME_LEVEL, level: level}
@@ -17,4 +18,8 @@ export const setTime = (time) => {
 
 export const clearData = () => {
     return {type: CLEAR_DATA}
+}
+
+export const levelPassed = (status) => {
+    return {type: PASS, status: status}
 }
\ No newline at end of file

frontend/src/store/reducers/memory.js

-import { CLEAR_DATA, SET_ANSWERS, SET_GAME_LEVEL, SET_TIME } from "../actions/memory";
+import { CLEAR_DATA, SET_ANSWERS, SET_GAME_LEVEL, SET_TIME, PASS } from "../actions/memory";
 
 const initialState = {
     gameLevel: null,
     memoryData: {},
-    screenTime: {}
+    screenTime: {},
+    is_passed: {
+        level: null,
+        status: false
+    }
 }
 
 const memoryReducer = (state=initialState, action) => {
@@ -44,6 +48,19 @@ const memoryReducer = (state=initialState, action) => {
                 gameLevel: null
             }
 
+        case PASS:
+
+            const levelPassed = action.level;
+            const PassedStatus = action.status;
+
+            return{
+                ...state,
+                is_passed: {
+                    level: levelPassed,
+                    status: PassedStatus
+                }
+            }
+
         default: 
             return state
     }