score screen

App/Frontend/App.js

@@ -16,6 +16,7 @@ import FlipCardGameScreen from './screens/FlipCardGameScreen';
 import ContentFiltration from './screens/ContentFiltrationScreen';
 import SpeechTherapyScreen_1 from './screens/SpeechTherapy_1';
 import SpeechTherapyScreen_2 from './screens/SpeechTherapy_2';
+import ScoreScreen from './screens/ScoreScreen';
 
 const MainStack = createStackNavigator(
   {
@@ -55,7 +56,9 @@ const MainStack = createStackNavigator(
     ContentFiltration: {
       screen: ContentFiltration,
     },
-
+    ScoreScreen: {
+      screen: ScoreScreen,
+    },
   },
   {
     initialRouteName: 'Login',

App/Frontend/screens/ScoreScreen.js

+import React, { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated, Easing, ImageBackground } from 'react-native';
+import { Audio } from 'expo-av';
+import { useIsFocused } from '@react-navigation/native';
+
+const ScoreScreen = ({ navigation }) => {
+  const progressBarWidth = new Animated.Value(0);
+  const minScore = 55;
+  const maxScore = 78;
+  const isFocused = useIsFocused();
+
+  const generateRandomScore = () => {
+    return Math.floor(Math.random() * (maxScore - minScore + 1) + minScore);
+  };
+
+  const score = generateRandomScore();
+
+  const playChimeSound = async () => {
+    try {
+      const soundObject = new Audio.Sound();
+      await soundObject.loadAsync(require('./assets/ST/content/game_chime.m4a'));
+      await soundObject.playAsync();
+    } catch (error) {
+      console.log('Error playing chime sound:', error);
+    }
+  };
+
+  useEffect(() => {
+    const progressAnimation = Animated.timing(progressBarWidth, {
+      toValue: score,
+      duration: 1000,
+      easing: Easing.linear,
+      useNativeDriver: false,
+    });
+
+    progressAnimation.start();
+    playChimeSound();
+
+    if (isFocused) {
+      const timeout = setTimeout(() => {
+        if (navigation.isReady()) {
+          navigation.reset({
+            index: 0,
+            routes: [{ name: 'PhoneticWord' }],
+          });
+        }
+      }, 5000);
+
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [isFocused]);
+
+  return (
+    <View style={styles.container}>
+      <ImageBackground source={require('./assets/ST/st_bg.png')} style={styles.backgroundImage}>
+        <Text style={styles.scoreText}>{`Score: ${score}%`}</Text>
+        <View style={styles.progressBarContainer}>
+          <Animated.View
+            style={[
+              styles.progressBar,
+              { width: progressBarWidth.interpolate({ inputRange: [0, 100], outputRange: ['0%', '100%'] }) },
+            ]}
+          />
+        </View>
+      </ImageBackground>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  backgroundImage: {
+    flex: 1,
+    resizeMode: 'cover',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  scoreText: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 20,
+  },
+  progressBarContainer: {
+    width: '80%',
+    height: 20,
+    backgroundColor: '#E0E0E0',
+    borderRadius: 10,
+    overflow: 'hidden',
+  },
+  progressBar: {
+    height: '100%',
+    backgroundColor: '#4CAF50',
+  },
+});
+
+export default ScoreScreen;

App/Frontend/screens/SpeechTherapy_2.js

@@ -187,7 +187,7 @@ const SpeechTherapyScreen_2 = ({ navigation }) => {
   };
 
   const navigateToPhoneticWords = () => {
-    navigation.navigate('PhoneticWord');
+    navigation.navigate('ScoreScreen');
   };