Skip to content

21_22-J 38
21_22-J 38
Commit 9b6e29ad authored by W.D.R.P. Sandeepa's avatar W.D.R.P. Sandeepa
Browse files
Options

add activity

parent c5406b93
Hide whitespace changes
Inline Side-by-side
Showing with 1514 additions and 11 deletions
frontend/src/router/router.js
View file @ 9b6e29ad
......@@ -11,6 +11,11 @@ import Splash from '../screen/splash/Splash';
import Color from '../screen/Color';
import Blue from '../screen/activity/Blue';
import Blue2 from '../screen/activity/Blue2';
import Red from '../screen/activity/Red';
import Green from '../screen/activity/Green';
import Black from '../screen/activity/Black';
import Yellow from '../screen/activity/Yellow';
import White from '../screen/activity/White';
import Read from '../screen/Read';
import ReadActivity from '../screen/reading/ReadActivity';
import ColorResult from '../screen/result/ColorResult';
......@@ -82,6 +87,31 @@ const AppRouter = () => {
name="Blue2"
component={Blue2}
/>
<Stack.Screen
options={{headerShown: false}}
name="Red"
component={Red}
/>
<Stack.Screen
options={{headerShown: false}}
name="Green"
component={Green}
/>
<Stack.Screen
options={{headerShown: false}}
name="Black"
component={Black}
/>
<Stack.Screen
options={{headerShown: false}}
name="Yellow"
component={Yellow}
/>
<Stack.Screen
options={{headerShown: false}}
name="White"
component={White}
/>
<Stack.Screen
options={{
title: 'Read Activity',
......
frontend/src/screen/activity/Black.js 0 → 100644
View file @ 9b6e29ad
import { useNavigation } from "@react-navigation/native";
import Orientation from 'react-native-orientation-locker';
import React, { useEffect, useState } from "react";
import { Text, TouchableOpacity, StyleSheet, View, Dimensions, SafeAreaView, ImageBackground, Button, Image, StatusBar } from 'react-native';
import axios from "axios";
import CountDown from 'react-native-countdown-component';
import client from "../client/Client";
import Voice from '@react-native-voice/voice';
import BackButton from "../../component/BackButton"
export default function Black() {
const navigation = useNavigation();
const backColor = "black";
React.useEffect(() => {
StatusBar.setHidden(true);
const unsubscribe = navigation.addListener("focus", () => {
Orientation.unlockAllOrientations();
Orientation.lockToLandscape();
});
return unsubscribe;
}, [navigation]);
useEffect(() => {
Voice.onSpeechStart = onSpeechStartHandler;
Voice.onSpeechEnd = onSpeechEndHandler;
Voice.onSpeechResults = onSpeechResultsHandler;
Voice.onSpeechPartialResults = onSpeechPartialResults;
// console.log(backColor);
return () => {
Voice.destroy().then(Voice.removeAllListeners);
};
}, []);
const onSpeechStartHandler = e => {
// console.log('start handler =>> ', e);
};
const onSpeechEndHandler = e => {
// console.log('end handler =>> ', e);
};
const onSpeechResultsHandler = e => {
// console.log('result handler =>> ', e);
// setTimeout(() => {
// alert("Please Pronouce Color");
// }, 3000);
const value = e.value;
if(value.includes(backColor) == true){
console.log('Your Answer is Correct');
showAlert = () => {
this.setState({
showAlert: true
});
};
}else{
console.log('Your Answer is Incorrect', value);
}
};
const onSpeechPartialResults = e => {
// console.log('onSpeechPartialResults: ', e);
// const value = e.value;
// console.log(value.length)
// setPartialResults(e.value);
};
const onFinishCD = () => {
Alert.alert('Countdown Finished...');
}
const onPressCD = () => {
Alert.alert('Countdown Component Pressed...');
}
const startRecording = async () => {
try {
await Voice.start('en-US');
} catch (error) {
console.log('error =>> ', error);
}
};
const stopRecording = async () => {
try {
await Voice.stop();
} catch (error) {
console.log(error);
}
};
return (
<SafeAreaView>
<View style={{ flexDirection: "column" }}>
<ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}>
<View>
<View style={styles.textBody}>
<Text style={styles.text}>Say the name of this color?</Text>
</View>
<Image style={styles.robo} source={require("../../assets/game/robo.png")}></Image>
</View>
<View>
<Image style={styles.blackboard} source={require("../../assets/game/blackboard.png")}></Image>
<View style={{ width: 180, height: 180, backgroundColor: backColor, marginTop: -370, marginLeft: 455, borderRadius: 100 }}>
</View>
</View>
<View style={{ marginTop: 10 }}>
<BackButton path="Color" />
</View>
<View style={{ flexDirection: "row", marginLeft: 420, marginTop: -50 }}>
<View style={{}}>
<TouchableOpacity onPress={startRecording}
style={{ width: "30%", height: "40%", borderRadius: 50 }}>
<Image source={require('../../assets/game/mic2.png')} resizeMode='contain' style={{ flex: 1, marginLeft: -190 }} />
</TouchableOpacity>
</View>
<View style={{ marginLeft: -100 }}>
<TouchableOpacity onPress={() => { }}
style={{ width: "60%", height: "40%", borderRadius: 50 }}>
<Image source={require('../../assets/game/next.png')} resizeMode='contain' style={{ flex: .9, marginLeft: -90 }} />
</TouchableOpacity>
</View>
</View>
</ImageBackground>
</View>
</SafeAreaView>
)
}
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,
}
})
\ No newline at end of file
frontend/src/screen/activity/Blue2.js
View file @ 9b6e29ad
......@@ -11,10 +11,10 @@ import Voice from '@react-native-voice/voice';
import BackButton from "../../component/BackButton"
export default function Blue2(color) {
export default function Blue2() {
const navigation = useNavigation();
const backColor = color.route.params.color;
const backColor = "blue";
React.useEffect(() => {
......
frontend/src/screen/activity/Green.js 0 → 100644
View file @ 9b6e29ad
import { useNavigation } from "@react-navigation/native";
import Orientation from 'react-native-orientation-locker';
import React, { useEffect, useState } from "react";
import { Text, TouchableOpacity, StyleSheet, View, Dimensions, SafeAreaView, ImageBackground, Button, Image, StatusBar } from 'react-native';
import axios from "axios";
import CountDown from 'react-native-countdown-component';
import client from "../client/Client";
import Voice from '@react-native-voice/voice';
import BackButton from "../../component/BackButton"
export default function Green() {
const navigation = useNavigation();
const backColor = "green";
React.useEffect(() => {
StatusBar.setHidden(true);
const unsubscribe = navigation.addListener("focus", () => {
Orientation.unlockAllOrientations();
Orientation.lockToLandscape();
});
return unsubscribe;
}, [navigation]);
useEffect(() => {
Voice.onSpeechStart = onSpeechStartHandler;
Voice.onSpeechEnd = onSpeechEndHandler;
Voice.onSpeechResults = onSpeechResultsHandler;
Voice.onSpeechPartialResults = onSpeechPartialResults;
// console.log(backColor);
return () => {
Voice.destroy().then(Voice.removeAllListeners);
};
}, []);
const onSpeechStartHandler = e => {
// console.log('start handler =>> ', e);
};
const onSpeechEndHandler = e => {
// console.log('end handler =>> ', e);
};
const onSpeechResultsHandler = e => {
// console.log('result handler =>> ', e);
// setTimeout(() => {
// alert("Please Pronouce Color");
// }, 3000);
const value = e.value;
if(value.includes(backColor) == true){
console.log('Your Answer is Correct');
showAlert = () => {
this.setState({
showAlert: true
});
};
}else{
console.log('Your Answer is Incorrect', value);
}
};
const onSpeechPartialResults = e => {
// console.log('onSpeechPartialResults: ', e);
// const value = e.value;
// console.log(value.length)
// setPartialResults(e.value);
};
const onFinishCD = () => {
Alert.alert('Countdown Finished...');
}
const onPressCD = () => {
Alert.alert('Countdown Component Pressed...');
}
const startRecording = async () => {
try {
await Voice.start('en-US');
} catch (error) {
console.log('error =>> ', error);
}
};
const stopRecording = async () => {
try {
await Voice.stop();
} catch (error) {
console.log(error);
}
};
return (
<SafeAreaView>
<View style={{ flexDirection: "column" }}>
<ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}>
<View>
<View style={styles.textBody}>
<Text style={styles.text}>Say the name of this color?</Text>
</View>
<Image style={styles.robo} source={require("../../assets/game/robo.png")}></Image>
</View>
<View>
<Image style={styles.blackboard} source={require("../../assets/game/blackboard.png")}></Image>
<View style={{ width: 180, height: 180, backgroundColor: backColor, marginTop: -370, marginLeft: 455, borderRadius: 100 }}>
</View>
</View>
<View style={{ marginTop: 10 }}>
<BackButton path="Color" />
</View>
<View style={{ flexDirection: "row", marginLeft: 420, marginTop: -50 }}>
<View style={{}}>
<TouchableOpacity onPress={startRecording}
style={{ width: "30%", height: "40%", borderRadius: 50 }}>
<Image source={require('../../assets/game/mic2.png')} resizeMode='contain' style={{ flex: 1, marginLeft: -190 }} />
</TouchableOpacity>
</View>
<View style={{ marginLeft: -100 }}>
<TouchableOpacity onPress={() => { }}
style={{ width: "60%", height: "40%", borderRadius: 50 }}>
<Image source={require('../../assets/game/next.png')} resizeMode='contain' style={{ flex: .9, marginLeft: -90 }} />
</TouchableOpacity>
</View>
</View>
</ImageBackground>
</View>
</SafeAreaView>
)
}
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,
}
})
\ No newline at end of file
frontend/src/screen/activity/PrimaryType.js
View file @ 9b6e29ad
......@@ -30,7 +30,7 @@ export default function PrimaryType(title) {
React.useEffect(() => {
getColorActivity1();
// getColorActivity1();
const unsubscribe = navigation.addListener("focus", () => {
// The screen is focused
......@@ -48,7 +48,7 @@ export default function PrimaryType(title) {
<SafeAreaView>
<ScrollView>
<View style={{marginBottom:50}}>
<View style={{ marginBottom: 50 }}>
<View>
<ImageBackground source={require("../../assets/color/background.png")}
style={styles.image}>
......@@ -57,9 +57,167 @@ export default function PrimaryType(title) {
</View>
</View>
{names.map((data, index) => {
return (<ColorActivity key={index} title={data.name} image={data.image} id={data.idcolorActivities} des={data.des} color={data.color} />)
})}
{/* {names.map((data, index) => {
return (<ColorActivity key={index} title={data.name}
image={data.image} id={data.idcolorActivities}
des={data.des} color={data.color} />)
})} */}
<TouchableOpacity onPress={() => { navigation.navigate("Red") }}
style={{
borderWidth: 5,
borderColor: "red",
marginVertical: 20,
backgroundColor: "#fff",
paddingVertical: 8,
paddingHorizontal: 15,
padding: 15,
width: 380,
marginHorizontal: 20,
borderRadius: 30,
shadowColor: "#000",
shadowOffset: {
width: 2,
height: 2
},
shadowOpacity: 0.3,
shadowRadius: 1.5,
marginBottom: 50,
}}>
<View style={[{ flexDirection: "row" }]}>
<View style={styles.cardImage}>
<Image source={require("../../assets/login/bb.jpg")}
style={{ width: 100, height: 100, borderRadius: 30 }}></Image>
</View>
<View style={{ flex: 0.6 }}>
{/* <Text style={styles.cardDescription}>{id}</Text> */}
<Text style={styles.cardTitle}>Red Color</Text>
<Text style={styles.cardLocation}>Primary Activity</Text>
<View
style={{
marginLeft: 10,
marginTop: 5,
width: 40,
height: 40,
borderRadius: 100,
backgroundColor: "red",
borderWidth: 1,
borderColor: "black",
}}>
</View>
</View>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => { navigation.navigate("Green") }}
style={{
borderWidth: 5,
borderColor: "green",
marginVertical: 20,
backgroundColor: "#fff",
paddingVertical: 8,
paddingHorizontal: 15,
padding: 15,
width: 380,
marginHorizontal: 20,
borderRadius: 30,
shadowColor: "#000",
shadowOffset: {
width: 2,
height: 2
},
shadowOpacity: 0.3,
shadowRadius: 1.5,
marginBottom: 50,
}}>
<View style={[{ flexDirection: "row" }]}>
<View style={styles.cardImage}>
<Image source={require("../../assets/login/bb.jpg")}
style={{ width: 100, height: 100, borderRadius: 30 }}></Image>
</View>
<View style={{ flex: 0.6 }}>
{/* <Text style={styles.cardDescription}>{id}</Text> */}
<Text style={styles.cardTitle}>Green Color</Text>
<Text style={styles.cardLocation}>Primary Activity</Text>
<View
style={{
marginLeft: 10,
marginTop: 5,
width: 40,
height: 40,
borderRadius: 100,
backgroundColor: "green",
borderWidth: 1,
borderColor: "black",
}}>
</View>
</View>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => { navigation.navigate("Black") }}
style={{
borderWidth: 5,
borderColor: "black",
marginVertical: 20,
backgroundColor: "#fff",
paddingVertical: 8,
paddingHorizontal: 15,
padding: 15,
width: 380,
marginHorizontal: 20,
borderRadius: 30,
shadowColor: "#000",
shadowOffset: {
width: 2,
height: 2
},
shadowOpacity: 0.3,
shadowRadius: 1.5,
marginBottom: 50,
}}>
<View style={[{ flexDirection: "row" }]}>
<View style={styles.cardImage}>
<Image source={require("../../assets/login/bb.jpg")}
style={{ width: 100, height: 100, borderRadius: 30 }}></Image>
</View>
<View style={{ flex: 0.6 }}>
<Text style={styles.cardTitle}>Black Color</Text>
<Text style={styles.cardLocation}>Primary Activity</Text>
<View
style={{
marginLeft: 10,
marginTop: 5,
width: 40,
height: 40,
borderRadius: 100,
backgroundColor: "black",
borderWidth: 1,
borderColor: "black",
}}>
</View>
</View>
</View>
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
......@@ -91,6 +249,43 @@ const styles = StyleSheet.create({
position: "absolute",
left: 50,
bottom: 50
},
card: {
marginVertical: 20,
backgroundColor: "#fff",
paddingVertical: 8,
paddingHorizontal: 15,
padding: 15,
width: 380,
marginHorizontal: 20,
borderRadius: 30,
shadowColor: "#000",
shadowOffset: {
width: 2,
height: 2
},
shadowOpacity: 0.3,
shadowRadius: 1.5,
},
cardTitle: {
fontWeight: "bold",
fontSize: 30,
marginLeft: 10,
},
cardLocation: {
fontSize: 16,
color: "#777",
marginLeft: 10,
},
cardDescription: {
fontSize: 18,
marginVertical: 8,
marginLeft: 10,
},
cardImage: {
padding: 0,
flex: 0.4
}
})
frontend/src/screen/activity/Red.js 0 → 100644
View file @ 9b6e29ad
import { useNavigation } from "@react-navigation/native";
import Orientation from 'react-native-orientation-locker';
import React, { useEffect, useState } from "react";
import { Text, TouchableOpacity, StyleSheet, View, Dimensions, SafeAreaView, ImageBackground, Button, Image, StatusBar } from 'react-native';
import axios from "axios";
import CountDown from 'react-native-countdown-component';
import client from "../client/Client";
import Voice from '@react-native-voice/voice';
import BackButton from "../../component/BackButton"
export default function Red() {
const navigation = useNavigation();
const backColor = "red";
React.useEffect(() => {
StatusBar.setHidden(true);
const unsubscribe = navigation.addListener("focus", () => {
Orientation.unlockAllOrientations();
Orientation.lockToLandscape();
});
return unsubscribe;
}, [navigation]);
useEffect(() => {
Voice.onSpeechStart = onSpeechStartHandler;
Voice.onSpeechEnd = onSpeechEndHandler;
Voice.onSpeechResults = onSpeechResultsHandler;
Voice.onSpeechPartialResults = onSpeechPartialResults;
// console.log(backColor);
return () => {
Voice.destroy().then(Voice.removeAllListeners);
};
}, []);
const onSpeechStartHandler = e => {
// console.log('start handler =>> ', e);
};
const onSpeechEndHandler = e => {
// console.log('end handler =>> ', e);
};
const onSpeechResultsHandler = e => {
// console.log('result handler =>> ', e);
// setTimeout(() => {
// alert("Please Pronouce Color");
// }, 3000);
const value = e.value;
if(value.includes(backColor) == true){
console.log('Your Answer is Correct');
showAlert = () => {
this.setState({
showAlert: true
});
};
}else{
console.log('Your Answer is Incorrect', value);
}
};
const onSpeechPartialResults = e => {
// console.log('onSpeechPartialResults: ', e);
// const value = e.value;
// console.log(value.length)
// setPartialResults(e.value);
};
const onFinishCD = () => {
Alert.alert('Countdown Finished...');
}
const onPressCD = () => {
Alert.alert('Countdown Component Pressed...');
}
const startRecording = async () => {
try {
await Voice.start('en-US');
} catch (error) {
console.log('error =>> ', error);
}
};
const stopRecording = async () => {
try {
await Voice.stop();
} catch (error) {
console.log(error);
}
};
return (
<SafeAreaView>
<View style={{ flexDirection: "column" }}>
<ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}>
<View>
<View style={styles.textBody}>
<Text style={styles.text}>Say the name of this color?</Text>
</View>
<Image style={styles.robo} source={require("../../assets/game/robo.png")}></Image>
</View>
<View>
<Image style={styles.blackboard} source={require("../../assets/game/blackboard.png")}></Image>
<View style={{ width: 180, height: 180, backgroundColor: backColor, marginTop: -370, marginLeft: 455, borderRadius: 100 }}>
</View>
</View>
<View style={{ marginTop: 10 }}>
<BackButton path="Color" />
</View>
<View style={{ flexDirection: "row", marginLeft: 420, marginTop: -50 }}>
<View style={{}}>
<TouchableOpacity onPress={startRecording}
style={{ width: "30%", height: "40%", borderRadius: 50 }}>
<Image source={require('../../assets/game/mic2.png')} resizeMode='contain' style={{ flex: 1, marginLeft: -190 }} />
</TouchableOpacity>
</View>
<View style={{ marginLeft: -100 }}>
<TouchableOpacity onPress={() => { }}
style={{ width: "60%", height: "40%", borderRadius: 50 }}>
<Image source={require('../../assets/game/next.png')} resizeMode='contain' style={{ flex: .9, marginLeft: -90 }} />
</TouchableOpacity>
</View>
</View>
</ImageBackground>
</View>
</SafeAreaView>
)
}
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,
}
})
\ No newline at end of file
frontend/src/screen/activity/SecondaryType.js
View file @ 9b6e29ad
......@@ -14,7 +14,7 @@ export default function SecondaryType(title) {
const navigation = useNavigation();
const[names, setNames] = useState([]);
const [names, setNames] = useState([]);
function getColorActivity2() {
client
......@@ -46,7 +46,7 @@ export default function SecondaryType(title) {
<SafeAreaView>
<ScrollView>
<View style={{marginBottom:50}}>
<View style={{ marginBottom: 50 }}>
<View>
<ImageBackground source={require("../../assets/color/background.png")}
style={styles.image}>
......@@ -55,9 +55,165 @@ export default function SecondaryType(title) {
</View>
</View>
{names.map((data, index) => {
{/* {names.map((data, index) => {
return (<ColorActivity key={index} title={data.name} image={data.image} id={data.idcolorActivities} des={data.des} color={data.color} />)
})}
})} */}
<TouchableOpacity onPress={() => { navigation.navigate("Yellow") }}
style={{
borderWidth: 5,
borderColor: "yellow",
marginVertical: 20,
backgroundColor: "#fff",
paddingVertical: 8,
paddingHorizontal: 15,
padding: 15,
width: 380,
marginHorizontal: 20,
borderRadius: 30,
shadowColor: "#000",
shadowOffset: {
width: 2,
height: 2
},
shadowOpacity: 0.3,
shadowRadius: 1.5,
marginBottom: 50,
}}>
<View style={[{ flexDirection: "row" }]}>
<View style={styles.cardImage}>
<Image source={require("../../assets/login/bb.jpg")}
style={{ width: 100, height: 100, borderRadius: 30 }}></Image>
</View>
<View style={{ flex: 0.6 }}>
{/* <Text style={styles.cardDescription}>{id}</Text> */}
<Text style={styles.cardTitle}>Red Color</Text>
<Text style={styles.cardLocation}>Primary Activity</Text>
<View
style={{
marginLeft: 10,
marginTop: 5,
width: 40,
height: 40,
borderRadius: 100,
backgroundColor: "yellow",
borderWidth: 1,
borderColor: "black",
}}>
</View>
</View>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => { navigation.navigate("Blue2") }}
style={{
borderWidth: 5,
borderColor: "blue",
marginVertical: 20,
backgroundColor: "#fff",
paddingVertical: 8,
paddingHorizontal: 15,
padding: 15,
width: 380,
marginHorizontal: 20,
borderRadius: 30,
shadowColor: "#000",
shadowOffset: {
width: 2,
height: 2
},
shadowOpacity: 0.3,
shadowRadius: 1.5,
marginBottom: 50,
}}>
<View style={[{ flexDirection: "row" }]}>
<View style={styles.cardImage}>
<Image source={require("../../assets/login/bb.jpg")}
style={{ width: 100, height: 100, borderRadius: 30 }}></Image>
</View>
<View style={{ flex: 0.6 }}>
{/* <Text style={styles.cardDescription}>{id}</Text> */}
<Text style={styles.cardTitle}>Red Color</Text>
<Text style={styles.cardLocation}>Primary Activity</Text>
<View
style={{
marginLeft: 10,
marginTop: 5,
width: 40,
height: 40,
borderRadius: 100,
backgroundColor: "blue",
borderWidth: 1,
borderColor: "black",
}}>
</View>
</View>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => { navigation.navigate("White") }}
style={{
borderWidth: 5,
borderColor: "white",
marginVertical: 20,
backgroundColor: "#fff",
paddingVertical: 8,
paddingHorizontal: 15,
padding: 15,
width: 380,
marginHorizontal: 20,
borderRadius: 30,
shadowColor: "#000",
shadowOffset: {
width: 2,
height: 2
},
shadowOpacity: 0.3,
shadowRadius: 1.5,
marginBottom: 50,
}}>
<View style={[{ flexDirection: "row" }]}>
<View style={styles.cardImage}>
<Image source={require("../../assets/login/bb.jpg")}
style={{ width: 100, height: 100, borderRadius: 30 }}></Image>
</View>
<View style={{ flex: 0.6 }}>
{/* <Text style={styles.cardDescription}>{id}</Text> */}
<Text style={styles.cardTitle}>Red Color</Text>
<Text style={styles.cardLocation}>Primary Activity</Text>
<View
style={{
marginLeft: 10,
marginTop: 5,
width: 40,
height: 40,
borderRadius: 100,
backgroundColor: "white",
borderWidth: 1,
borderColor: "black",
}}>
</View>
</View>
</View>
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
......@@ -89,6 +245,43 @@ const styles = StyleSheet.create({
position: "absolute",
left: 50,
bottom: 50
},
card: {
marginVertical: 20,
backgroundColor: "#fff",
paddingVertical: 8,
paddingHorizontal: 15,
padding: 15,
width: 380,
marginHorizontal: 20,
borderRadius: 30,
shadowColor: "#000",
shadowOffset: {
width: 2,
height: 2
},
shadowOpacity: 0.3,
shadowRadius: 1.5,
},
cardTitle: {
fontWeight: "bold",
fontSize: 30,
marginLeft: 10,
},
cardLocation: {
fontSize: 16,
color: "#777",
marginLeft: 10,
},
cardDescription: {
fontSize: 18,
marginVertical: 8,
marginLeft: 10,
},
cardImage: {
padding: 0,
flex: 0.4
}
})
frontend/src/screen/activity/White.js 0 → 100644
View file @ 9b6e29ad
import { useNavigation } from "@react-navigation/native";
import Orientation from 'react-native-orientation-locker';
import React, { useEffect, useState } from "react";
import { Text, TouchableOpacity, StyleSheet, View, Dimensions, SafeAreaView, ImageBackground, Button, Image, StatusBar } from 'react-native';
import axios from "axios";
import CountDown from 'react-native-countdown-component';
import client from "../client/Client";
import Voice from '@react-native-voice/voice';
import BackButton from "../../component/BackButton"
export default function White() {
const navigation = useNavigation();
const backColor = "white";
React.useEffect(() => {
StatusBar.setHidden(true);
const unsubscribe = navigation.addListener("focus", () => {
Orientation.unlockAllOrientations();
Orientation.lockToLandscape();
});
return unsubscribe;
}, [navigation]);
useEffect(() => {
Voice.onSpeechStart = onSpeechStartHandler;
Voice.onSpeechEnd = onSpeechEndHandler;
Voice.onSpeechResults = onSpeechResultsHandler;
Voice.onSpeechPartialResults = onSpeechPartialResults;
// console.log(backColor);
return () => {
Voice.destroy().then(Voice.removeAllListeners);
};
}, []);
const onSpeechStartHandler = e => {
// console.log('start handler =>> ', e);
};
const onSpeechEndHandler = e => {
// console.log('end handler =>> ', e);
};
const onSpeechResultsHandler = e => {
// console.log('result handler =>> ', e);
// setTimeout(() => {
// alert("Please Pronouce Color");
// }, 3000);
const value = e.value;
if(value.includes(backColor) == true){
console.log('Your Answer is Correct');
showAlert = () => {
this.setState({
showAlert: true
});
};
}else{
console.log('Your Answer is Incorrect', value);
}
};
const onSpeechPartialResults = e => {
// console.log('onSpeechPartialResults: ', e);
// const value = e.value;
// console.log(value.length)
// setPartialResults(e.value);
};
const onFinishCD = () => {
Alert.alert('Countdown Finished...');
}
const onPressCD = () => {
Alert.alert('Countdown Component Pressed...');
}
const startRecording = async () => {
try {
await Voice.start('en-US');
} catch (error) {
console.log('error =>> ', error);
}
};
const stopRecording = async () => {
try {
await Voice.stop();
} catch (error) {
console.log(error);
}
};
return (
<SafeAreaView>
<View style={{ flexDirection: "column" }}>
<ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}>
<View>
<View style={styles.textBody}>
<Text style={styles.text}>Say the name of this color?</Text>
</View>
<Image style={styles.robo} source={require("../../assets/game/robo.png")}></Image>
</View>
<View>
<Image style={styles.blackboard} source={require("../../assets/game/blackboard.png")}></Image>
<View style={{ width: 180, height: 180, backgroundColor: backColor, marginTop: -370, marginLeft: 455, borderRadius: 100 }}>
</View>
</View>
<View style={{ marginTop: 10 }}>
<BackButton path="Color" />
</View>
<View style={{ flexDirection: "row", marginLeft: 420, marginTop: -50 }}>
<View style={{}}>
<TouchableOpacity onPress={startRecording}
style={{ width: "30%", height: "40%", borderRadius: 50 }}>
<Image source={require('../../assets/game/mic2.png')} resizeMode='contain' style={{ flex: 1, marginLeft: -190 }} />
</TouchableOpacity>
</View>
<View style={{ marginLeft: -100 }}>
<TouchableOpacity onPress={() => { }}
style={{ width: "60%", height: "40%", borderRadius: 50 }}>
<Image source={require('../../assets/game/next.png')} resizeMode='contain' style={{ flex: .9, marginLeft: -90 }} />
</TouchableOpacity>
</View>
</View>
</ImageBackground>
</View>
</SafeAreaView>
)
}
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,
}
})
\ No newline at end of file
frontend/src/screen/activity/Yellow.js 0 → 100644
View file @ 9b6e29ad
import { useNavigation } from "@react-navigation/native";
import Orientation from 'react-native-orientation-locker';
import React, { useEffect, useState } from "react";
import { Text, TouchableOpacity, StyleSheet, View, Dimensions, SafeAreaView, ImageBackground, Button, Image, StatusBar } from 'react-native';
import axios from "axios";
import CountDown from 'react-native-countdown-component';
import client from "../client/Client";
import Voice from '@react-native-voice/voice';
import BackButton from "../../component/BackButton"
export default function Yellow() {
const navigation = useNavigation();
const backColor = "yellow";
React.useEffect(() => {
StatusBar.setHidden(true);
const unsubscribe = navigation.addListener("focus", () => {
Orientation.unlockAllOrientations();
Orientation.lockToLandscape();
});
return unsubscribe;
}, [navigation]);
useEffect(() => {
Voice.onSpeechStart = onSpeechStartHandler;
Voice.onSpeechEnd = onSpeechEndHandler;
Voice.onSpeechResults = onSpeechResultsHandler;
Voice.onSpeechPartialResults = onSpeechPartialResults;
// console.log(backColor);
return () => {
Voice.destroy().then(Voice.removeAllListeners);
};
}, []);
const onSpeechStartHandler = e => {
// console.log('start handler =>> ', e);
};
const onSpeechEndHandler = e => {
// console.log('end handler =>> ', e);
};
const onSpeechResultsHandler = e => {
// console.log('result handler =>> ', e);
// setTimeout(() => {
// alert("Please Pronouce Color");
// }, 3000);
const value = e.value;
if(value.includes(backColor) == true){
console.log('Your Answer is Correct');
showAlert = () => {
this.setState({
showAlert: true
});
};
}else{
console.log('Your Answer is Incorrect', value);
}
};
const onSpeechPartialResults = e => {
// console.log('onSpeechPartialResults: ', e);
// const value = e.value;
// console.log(value.length)
// setPartialResults(e.value);
};
const onFinishCD = () => {
Alert.alert('Countdown Finished...');
}
const onPressCD = () => {
Alert.alert('Countdown Component Pressed...');
}
const startRecording = async () => {
try {
await Voice.start('en-US');
} catch (error) {
console.log('error =>> ', error);
}
};
const stopRecording = async () => {
try {
await Voice.stop();
} catch (error) {
console.log(error);
}
};
return (
<SafeAreaView>
<View style={{ flexDirection: "column" }}>
<ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}>
<View>
<View style={styles.textBody}>
<Text style={styles.text}>Say the name of this color?</Text>
</View>
<Image style={styles.robo} source={require("../../assets/game/robo.png")}></Image>
</View>
<View>
<Image style={styles.blackboard} source={require("../../assets/game/blackboard.png")}></Image>
<View style={{ width: 180, height: 180, backgroundColor: backColor, marginTop: -370, marginLeft: 455, borderRadius: 100 }}>
</View>
</View>
<View style={{ marginTop: 10 }}>
<BackButton path="Color" />
</View>
<View style={{ flexDirection: "row", marginLeft: 420, marginTop: -50 }}>
<View style={{}}>
<TouchableOpacity onPress={startRecording}
style={{ width: "30%", height: "40%", borderRadius: 50 }}>
<Image source={require('../../assets/game/mic2.png')} resizeMode='contain' style={{ flex: 1, marginLeft: -190 }} />
</TouchableOpacity>
</View>
<View style={{ marginLeft: -100 }}>
<TouchableOpacity onPress={() => { }}
style={{ width: "60%", height: "40%", borderRadius: 50 }}>
<Image source={require('../../assets/game/next.png')} resizeMode='contain' style={{ flex: .9, marginLeft: -90 }} />
</TouchableOpacity>
</View>
</View>
</ImageBackground>
</View>
</SafeAreaView>
)
}
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,
}
})
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment