phonetic word screen

App/Frontend/screens/PhoneticWordsScreen.js

-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ImageBackground,
+  TouchableOpacity,
+  Image,
+  Dimensions,
+} from 'react-native';
+import { Audio } from 'expo-av';
+import * as ScreenOrientation from 'expo-screen-orientation';
+
+const PhoneticWordsScreen = () => {
+  const words = ['battle', 'kettle', 'bottle', 'rat', 'bat', 'cat'];
+  const backgroundPath = './assets/ST/st_bg.png';
+  const woodboardPath = './assets/ST/woodboard.png';
+
+  const audioFiles = {
+    battle: require('./assets/ST/content/battle.m4a'),
+    kettle: require('./assets/ST/content/kettle.m4a'),
+    bottle: require('./assets/ST/content/bottle.m4a'),
+    rat: require('./assets/ST/content/rat.m4a'),
+    bat: require('./assets/ST/content/bat.m4a'),
+    cat: require('./assets/ST/content/cat.m4a'),
+  };
+
+  useEffect(() => {
+    async function changeScreenOrientation() {
+      await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
+    }
+
+    changeScreenOrientation();
+
+    return async () => {
+      await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
+    };
+  }, []);
+
+  const playAudio = async (audio) => {
+    const { sound } = await Audio.Sound.createAsync(audio);
+    await sound.playAsync();
+
+    sound.setOnPlaybackStatusUpdate(async (status) => {
+      if (status.didJustFinish) {
+        sound.unloadAsync();
+      }
+    });
+  };
+
+  const handleBoxPress = (word) => {
+    playAudio(audioFiles[word]);
+  };
 
-export default function ScreenName() {
   return (
-    <View style={styles.container}>
-      <Text style={styles.text}>Sample screen</Text>
-    </View>
+    <ImageBackground
+      source={require(backgroundPath)}
+      style={styles.container}
+      resizeMode="cover"
+    >
+      {words.map((word, index) => (
+        <TouchableOpacity
+          key={word}
+          style={[
+            styles.box,
+            {
+              marginLeft: (index % 3) * (Dimensions.get('window').width / 3),
+              marginTop: Math.floor(index / 3) * (Dimensions.get('window').height / 2),
+            },
+          ]}
+          onPress={() => handleBoxPress(word)}
+        >
+          <ImageBackground
+            source={require(woodboardPath)}
+            style={styles.wordBackground}
+            resizeMode="cover"
+          >
+            <Text style={styles.wordText}>{word}</Text>
+          </ImageBackground>
+        </TouchableOpacity>
+      ))}
+    </ImageBackground>
   );
-}
+};
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#61A6AB',
-    alignItems: 'center',
+    backgroundColor: '#FFCE6D',
+  },
+  box: {
+    width: '33.33%',
+    height: '50%',
+    position: 'absolute',
+  },
+  wordBackground: {
+    top:35,
+    left:25,
+    width: '90%',
+    height: '80%',
     justifyContent: 'center',
+    alignItems: 'center',
   },
-  text: {
-    fontSize: 24,
-    color: 'white',
+  wordText: {
+    fontSize: 48,
+    fontWeight: 'bold',
+    color: '#FFCE6D',
+    bottom:15,
   },
 });
+
+export default PhoneticWordsScreen;

App/Frontend/screens/SpeechTherapyScreen.js

 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, ImageBackground, TouchableOpacity, Image } from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ImageBackground,
+  TouchableOpacity,
+  Image,
+  TouchableWithoutFeedback,
+} from 'react-native';
 import { Audio } from 'expo-av';
 import * as ScreenOrientation from 'expo-screen-orientation';
 
@@ -13,6 +21,19 @@ const SpeechTherapyScreen = ({ navigation }) => {
   const buttonPath = './assets/ST/next.png';
   const owlPath = './assets/ST/owl.png';
 
+  const handleScreenTouch = async () => {
+    if (sound) {
+      await sound.unloadAsync();
+    }
+    const { sound: newSound } = await Audio.Sound.createAsync(
+      require(audioPath),
+      {},
+      updatePlaybackStatus,
+    );
+    setSound(newSound);
+    await newSound.playAsync();
+  };
+
   useEffect(() => {
     async function changeScreenOrientation() {
       await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
@@ -60,37 +81,57 @@ const SpeechTherapyScreen = ({ navigation }) => {
     navigation.navigate('PhoneticWord');
   };
 
-  return (
-    <View style={styles.container}>
+  
+  const screenBackgroundPath = './assets/ST/st_bg.png';
 
-      <View style={styles.backgroundWrapper}>
+  return (
+      <View style={styles.container}>
         <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>
-        </ImageBackground>
+          source={require(screenBackgroundPath)}
+          style={styles.background}
+          resizeMode="cover"
+        />
+        <TouchableWithoutFeedback onPress={handleScreenTouch}>
+          <View style={styles.content}>
+            <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>
+              </ImageBackground>
+            </View>
+            <TouchableOpacity onPress={navigateToPhoneticWords} style={styles.button}>
+              <Image source={require(buttonPath)} style={styles.buttonImage} />
+            </TouchableOpacity>
+            <Image source={require(owlPath)} style={styles.owlImage} />
+          </View>
+        </TouchableWithoutFeedback>
       </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({
   container: {
     flex: 1,
-    backgroundColor: '#FFCE6D',
+  },
+  background: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  content: {
+    flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -112,8 +153,8 @@ const styles = StyleSheet.create({
   },
   button: {
     position: 'absolute',
-    bottom: 10,
-    right: 10,
+    bottom: 20,
+    right: 20,
   },
   buttonImage: {
     width: 50,