Skip to content

21_22-J 38
21_22-J 38
Commit 57142b1b authored by Lihinikaduwa D.N.R. 's avatar Lihinikaduwa D.N.R.
Browse files
Options

Created Basic Activities

parent f47c67d1
Hide whitespace changes
Inline Side-by-side
Showing with 654 additions and 0 deletions
frontend/src/screen/reading/basic/ReadActivityGo.js 0 → 100644
View file @ 57142b1b
import {useNavigation} from '@react-navigation/native';
import Orientation from 'react-native-orientation-locker';
import React, {useEffect, useState} from 'react';
import {
Text,
TouchableOpacity,
StyleSheet,
View,
ImageButton,
SafeAreaView,
ImageBackground,
Button,
Image,
TouchableHighlight,
} from 'react-native';
import Voice from '@react-native-voice/voice';
import {DummyReadResult} from '../../assets/read/data/ReadData';
export default function ReadActivityGo() {
const [pitch, setPitch] = useState('');
const [error, setError] = useState('');
const [end, setEnd] = useState('');
const [started, setStarted] = useState('');
const [results, setResults] = useState([]);
const [partialResults, setPartialResults] = useState([]);
useEffect(() => {
Voice.destroy().then(Voice.removeAllListeners);
}, []);
useEffect(() => {
Voice.onSpeechStart = onSpeechStartHandler;
Voice.onSpeechEnd = onSpeechEndHandler;
Voice.onSpeechResults = onSpeechResultsHandler;
Voice.onSpeechError = onSpeechError;
Voice.onSpeechPartialResults = onSpeechPartialResults;
Voice.onSpeechVolumeChanged = onSpeechVolumeChanged;
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);
};
const onSpeechError = e => {
console.log('onSpeechError: ', e);
setError(JSON.stringify(e.error));
const result = DummyReadResult.value;
if (result.includes('hello')) {
console.log('correct');
}
};
const onSpeechPartialResults = e => {
console.log('onSpeechPartialResults: ', e);
setPartialResults(e.value);
};
const onSpeechVolumeChanged = e => {
console.log('onSpeechVolumeChanged: ', e);
setPitch(e.value);
};
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/read/image/activity-2-backg.jpeg')}>
<View style={styles.imageContainer}>
<View style={styles.imageView}>
<View style={styles.robo}>
<Image
source={require('../../assets/read/image/activity-2-rob.png')}></Image>
</View>
</View>
<View style={styles.textBody}>
<Text style={styles.text}>Pronounce this Word!</Text>
</View>
</View>
{/* <View style={styles.textBody}>
<Text style={styles.text}>Pronounce this Word!</Text>
</View>
<View style={styles.robo}>
<Image
source={require('../../assets/read/activity-2-rob.png')}></Image>
</View> */}
<View>
<Image
style={styles.blackboard}
source={require('../../assets/read/image/backboard3.png')}></Image>
</View>
<View style={styles.horizontalView}>
<TouchableHighlight onPress={startRecording}>
<Image
style={styles.imageButton}
source={{
uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
}}
/>
</TouchableHighlight>
</View>
</ImageBackground>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
imageContainer: {
flexDirection: 'row',
marginTop: 70,
},
imageView: {
width: 180,
height: 300,
// borderWidth:1,
// borderColor: "#000",
marginHorizontal: 1,
marginVertical: 100,
},
body: {
flex: 1,
},
image: {
width: '100%',
height: '100%',
},
box: {
width: 180,
height: 180,
// borderColor: "#000000",
backgroundColor: 'blue',
marginTop: -370,
marginLeft: 455,
borderRadius: 100,
},
blackboard: {
marginTop: -320,
marginLeft: 200,
width: '50%',
height: 300,
},
robo: {
marginTop: 90,
marginLeft: 5,
width: 150,
height: 200,
},
textBody: {
marginTop: 150,
marginLeft: -30,
// backgroundColor: '#00008B',
width: 150,
borderRadius: 50,
padding: 5,
},
text: {
fontSize: 25,
justifyContent: 'center',
alignItems: 'center',
color: '#00008B',
borderRadius: 10,
backgroundColor: 'rgba(0,0,0,0.2)',
textAlign: 'center',
fontWeight: 'bold',
},
button: {
padding: 10,
marginLeft: 5,
color: '#000000',
},
imageButton: {
width: 50,
height: 50,
},
horizontalView: {
backgroundColor: 'rgba(0,0,0,0.2)',
borderRadius: 50,
flexDirection: 'row',
position: 'absolute',
bottom: 0,
flexDirection: 'row',
marginBottom: 140,
marginLeft: 50,
padding: 7,
},
});
frontend/src/screen/reading/basic/ReadActivityHe.js 0 → 100644
View file @ 57142b1b
import {useNavigation} from '@react-navigation/native';
import Orientation from 'react-native-orientation-locker';
import React, {useEffect, useState} from 'react';
import {
Text,
TouchableOpacity,
StyleSheet,
View,
ImageButton,
SafeAreaView,
ImageBackground,
Button,
Image,
TouchableHighlight,
} from 'react-native';
import Voice from '@react-native-voice/voice';
import {DummyReadResult} from '../../assets/read/data/ReadData';
export default function ReadActivityHe() {
const [pitch, setPitch] = useState('');
const [error, setError] = useState('');
const [end, setEnd] = useState('');
const [started, setStarted] = useState('');
const [results, setResults] = useState([]);
const [partialResults, setPartialResults] = useState([]);
useEffect(() => {
Voice.destroy().then(Voice.removeAllListeners);
}, []);
useEffect(() => {
Voice.onSpeechStart = onSpeechStartHandler;
Voice.onSpeechEnd = onSpeechEndHandler;
Voice.onSpeechResults = onSpeechResultsHandler;
Voice.onSpeechError = onSpeechError;
Voice.onSpeechPartialResults = onSpeechPartialResults;
Voice.onSpeechVolumeChanged = onSpeechVolumeChanged;
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);
};
const onSpeechError = e => {
console.log('onSpeechError: ', e);
setError(JSON.stringify(e.error));
const result = DummyReadResult.value;
if (result.includes('hello')) {
console.log('correct');
}
};
const onSpeechPartialResults = e => {
console.log('onSpeechPartialResults: ', e);
setPartialResults(e.value);
};
const onSpeechVolumeChanged = e => {
console.log('onSpeechVolumeChanged: ', e);
setPitch(e.value);
};
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/read/image/activity-2-backg.jpeg')}>
<View style={styles.imageContainer}>
<View style={styles.imageView}>
<View style={styles.robo}>
<Image
source={require('../../assets/read/image/activity-2-rob.png')}></Image>
</View>
</View>
<View style={styles.textBody}>
<Text style={styles.text}>Pronounce this Word!</Text>
</View>
</View>
{/* <View style={styles.textBody}>
<Text style={styles.text}>Pronounce this Word!</Text>
</View>
<View style={styles.robo}>
<Image
source={require('../../assets/read/activity-2-rob.png')}></Image>
</View> */}
<View>
<Image
style={styles.blackboard}
source={require('../../assets/read/image/backboard3.png')}></Image>
</View>
<View style={styles.horizontalView}>
<TouchableHighlight onPress={startRecording}>
<Image
style={styles.imageButton}
source={{
uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
}}
/>
</TouchableHighlight>
</View>
</ImageBackground>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
imageContainer: {
flexDirection: 'row',
marginTop: 70,
},
imageView: {
width: 180,
height: 300,
// borderWidth:1,
// borderColor: "#000",
marginHorizontal: 1,
marginVertical: 100,
},
body: {
flex: 1,
},
image: {
width: '100%',
height: '100%',
},
box: {
width: 180,
height: 180,
// borderColor: "#000000",
backgroundColor: 'blue',
marginTop: -370,
marginLeft: 455,
borderRadius: 100,
},
blackboard: {
marginTop: -320,
marginLeft: 200,
width: '50%',
height: 300,
},
robo: {
marginTop: 90,
marginLeft: 5,
width: 150,
height: 200,
},
textBody: {
marginTop: 150,
marginLeft: -30,
// backgroundColor: '#00008B',
width: 150,
borderRadius: 50,
padding: 5,
},
text: {
fontSize: 25,
justifyContent: 'center',
alignItems: 'center',
color: '#00008B',
borderRadius: 10,
backgroundColor: 'rgba(0,0,0,0.2)',
textAlign: 'center',
fontWeight: 'bold',
},
button: {
padding: 10,
marginLeft: 5,
color: '#000000',
},
imageButton: {
width: 50,
height: 50,
},
horizontalView: {
backgroundColor: 'rgba(0,0,0,0.2)',
borderRadius: 50,
flexDirection: 'row',
position: 'absolute',
bottom: 0,
flexDirection: 'row',
marginBottom: 140,
marginLeft: 50,
padding: 7,
},
});
frontend/src/screen/reading/basic/ReadActivityNo.js 0 → 100644
View file @ 57142b1b
import {useNavigation} from '@react-navigation/native';
import Orientation from 'react-native-orientation-locker';
import React, {useEffect, useState} from 'react';
import {
Text,
TouchableOpacity,
StyleSheet,
View,
ImageButton,
SafeAreaView,
ImageBackground,
Button,
Image,
TouchableHighlight,
} from 'react-native';
import Voice from '@react-native-voice/voice';
import {DummyReadResult} from '../../assets/read/data/ReadData';
export default function ReadActivityNo() {
const [pitch, setPitch] = useState('');
const [error, setError] = useState('');
const [end, setEnd] = useState('');
const [started, setStarted] = useState('');
const [results, setResults] = useState([]);
const [partialResults, setPartialResults] = useState([]);
useEffect(() => {
Voice.destroy().then(Voice.removeAllListeners);
}, []);
useEffect(() => {
Voice.onSpeechStart = onSpeechStartHandler;
Voice.onSpeechEnd = onSpeechEndHandler;
Voice.onSpeechResults = onSpeechResultsHandler;
Voice.onSpeechError = onSpeechError;
Voice.onSpeechPartialResults = onSpeechPartialResults;
Voice.onSpeechVolumeChanged = onSpeechVolumeChanged;
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);
};
const onSpeechError = e => {
console.log('onSpeechError: ', e);
setError(JSON.stringify(e.error));
const result = DummyReadResult.value;
if (result.includes('hello')) {
console.log('correct');
}
};
const onSpeechPartialResults = e => {
console.log('onSpeechPartialResults: ', e);
setPartialResults(e.value);
};
const onSpeechVolumeChanged = e => {
console.log('onSpeechVolumeChanged: ', e);
setPitch(e.value);
};
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/read/image/activity-2-backg.jpeg')}>
<View style={styles.imageContainer}>
<View style={styles.imageView}>
<View style={styles.robo}>
<Image
source={require('../../assets/read/image/activity-2-rob.png')}></Image>
</View>
</View>
<View style={styles.textBody}>
<Text style={styles.text}>Pronounce this Word!</Text>
</View>
</View>
{/* <View style={styles.textBody}>
<Text style={styles.text}>Pronounce this Word!</Text>
</View>
<View style={styles.robo}>
<Image
source={require('../../assets/read/activity-2-rob.png')}></Image>
</View> */}
<View>
<Image
style={styles.blackboard}
source={require('../../assets/read/image/backboard3.png')}></Image>
</View>
<View style={styles.horizontalView}>
<TouchableHighlight onPress={startRecording}>
<Image
style={styles.imageButton}
source={{
uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
}}
/>
</TouchableHighlight>
</View>
</ImageBackground>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
imageContainer: {
flexDirection: 'row',
marginTop: 70,
},
imageView: {
width: 180,
height: 300,
// borderWidth:1,
// borderColor: "#000",
marginHorizontal: 1,
marginVertical: 100,
},
body: {
flex: 1,
},
image: {
width: '100%',
height: '100%',
},
box: {
width: 180,
height: 180,
// borderColor: "#000000",
backgroundColor: 'blue',
marginTop: -370,
marginLeft: 455,
borderRadius: 100,
},
blackboard: {
marginTop: -320,
marginLeft: 200,
width: '50%',
height: 300,
},
robo: {
marginTop: 90,
marginLeft: 5,
width: 150,
height: 200,
},
textBody: {
marginTop: 150,
marginLeft: -30,
// backgroundColor: '#00008B',
width: 150,
borderRadius: 50,
padding: 5,
},
text: {
fontSize: 25,
justifyContent: 'center',
alignItems: 'center',
color: '#00008B',
borderRadius: 10,
backgroundColor: 'rgba(0,0,0,0.2)',
textAlign: 'center',
fontWeight: 'bold',
},
button: {
padding: 10,
marginLeft: 5,
color: '#000000',
},
imageButton: {
width: 50,
height: 50,
},
horizontalView: {
backgroundColor: 'rgba(0,0,0,0.2)',
borderRadius: 50,
flexDirection: 'row',
position: 'absolute',
bottom: 0,
flexDirection: 'row',
marginBottom: 140,
marginLeft: 50,
padding: 7,
},
});
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