Skip to content

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

Merge branch 'it18218640' into 'master' 

add activity

See merge request !149
parents ae3906b0 9b6e29ad
Hide whitespace changes
Inline Side-by-side
Showing with 1514 additions and 11 deletions
frontend/src/router/router.js
View file @ 9e962933
......@@ -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 @ 9e962933
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 @ 9e962933
......@@ -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 @ 9e962933
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 @ 9e962933
......@@ -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 @ 9e962933
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 @ 9e962933
......@@ -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 @ 9e962933
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 @ 9e962933
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