container modifications

App/Frontend/App.js

@@ -8,6 +8,7 @@ import WordGenerationScreen from './screens/WordGenerationScreen';
 import SpeechTherapyScreen from './screens/SpeechTherapyScreen';
 import ProgressMapScreen from './screens/ProgressMapScreen';
 import WordGameScreen from './screens/WordGameScreen';
+import PhoneticWordScreen from './screens/PhoneticWordsScreen';
 
 const MainStack = createStackNavigator(
   {
@@ -32,6 +33,9 @@ const MainStack = createStackNavigator(
     WordGame: {
       screen: WordGameScreen,
     },
+    PhoneticWord: {
+      screen: PhoneticWordScreen,
+    },
   },
   {
     initialRouteName: 'Login',

App/Frontend/screens/PhoneticWordsScreen.js

+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function ScreenName() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Sample screen</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#61A6AB',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 24,
+    color: 'white',
+  },
+});

App/Frontend/screens/SpeechTherapyScreen.js

 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, ImageBackground, TouchableOpacity, Image } from 'react-native';
 import { Audio } from 'expo-av';
 import * as ScreenOrientation from 'expo-screen-orientation';
 
-const SpeechTherapyScreen = () => {
+const SpeechTherapyScreen = ({ navigation }) => {
   const [sound, setSound] = useState(null);
   const [progress, setProgress] = useState(0);
 
-  const text = "i go to school";
-  const audioPath = './assets/CG/content/school_sentence.m4a';
+  const text = "I go to school";
+  const audioPath = './assets/ST/content/school_sentence.m4a';
+  const backgroundPath = './assets/ST/blackboard.png';
+  const buttonPath = './assets/ST/next.png';
+  const owlPath = './assets/ST/owl.png';
 
   useEffect(() => {
     async function changeScreenOrientation() {
@@ -50,20 +53,38 @@ const SpeechTherapyScreen = () => {
 
   const getCharColor = (charIndex) => {
     const charProgress = charIndex / text.length;
-    return charProgress <= progress ? 'black' : 'white';
+    return charProgress <= progress ? '#FFCE6D' : 'white';
+  };
+
+  const navigateToPhoneticWords = () => {
+    navigation.navigate('PhoneticWord');
   };
 
   return (
     <View style={styles.container}>
-      <Text style={styles.text}>
-        {text.split('').map((char, index) => (
-          <Text key={index} style={{ color: getCharColor(index) }}>
-            {char}
+
+      <View style={styles.backgroundWrapper}>
+        <ImageBackground
+          source={require(backgroundPath)}
+          style={styles.backgroundImage}
+          resizeMode="contain"
+        >
+          <Text style={styles.text}>
+            {text.split('').map((char, index) => (
+              <Text key={index} style={{ color: getCharColor(index) }}>
+                {char}
+              </Text>
+            ))}
           </Text>
-        ))}
-      </Text>
+        </ImageBackground>
+      </View>
+      <TouchableOpacity onPress={navigateToPhoneticWords} style={styles.button}>
+        <Image source={require(buttonPath)} style={styles.buttonImage} />
+      </TouchableOpacity>
+      <Image source={require(owlPath)} style={styles.owlImage} />
     </View>
   );
+  
 };
 
 const styles = StyleSheet.create({
@@ -73,8 +94,37 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  backgroundWrapper: {
+    width: '90%',
+    height: '80%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  backgroundImage: {
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   text: {
-    fontSize: 24,
+    fontSize: 65,
+    fontWeight: 'bold',
+  },
+  button: {
+    position: 'absolute',
+    bottom: 10,
+    right: 10,
+  },
+  buttonImage: {
+    width: 50,
+    height: 50,
+  },
+  owlImage: {
+    position: 'absolute',
+    bottom: 10,
+    left: 30,
+    width: 190,
+    height: 140,
   },
 });