Skip to content

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

add new modal

parent 2a11c65c
Hide whitespace changes
Inline Side-by-side
Showing with 836 additions and 311 deletions
frontend/src/component/reading/ReadModal.js
View file @ 274a444d
...@@ -34,7 +34,7 @@ export default function ReadModal(props) { ...@@ -34,7 +34,7 @@ export default function ReadModal(props) {
> >
<View style={styles.centeredView2}> <View style={styles.centeredView2}>
<View style={styles.modalView2}> <View style={styles.modalView2}>
<Image style={styles.alert2} source={ImagePaths.bird1}></Image> <Image style={styles.alert2} source={imagePath}></Image>
<Text style={styles.headStyle2}>{caption}</Text> <Text style={styles.headStyle2}>{caption}</Text>
<Text style={styles.head2Style2}>{validity}</Text> <Text style={styles.head2Style2}>{validity}</Text>
...@@ -76,7 +76,7 @@ const styles = StyleSheet.create({ ...@@ -76,7 +76,7 @@ const styles = StyleSheet.create({
textBody: { textBody: {
marginTop: 150, marginTop: 150,
marginLeft: 95, marginLeft: 95,
backgroundColor: '#1DCE92', // backgroundColor: '#1DCE92',
width: 200, width: 200,
borderRadius: 50, borderRadius: 50,
padding: 5, padding: 5,
...@@ -128,13 +128,13 @@ const styles = StyleSheet.create({ ...@@ -128,13 +128,13 @@ const styles = StyleSheet.create({
borderRadius: 20, borderRadius: 20,
padding: 35, padding: 35,
borderWidth: 5, borderWidth: 5,
borderColor: '#red', // borderColor: '#red',
alignItems: 'center', alignItems: 'center',
shadowColor: 'red', // shadowColor: 'red',
shadowOffset: { // shadowOffset: {
width: 0, // width: 0,
height: 2, // height: 2,
}, // },
shadowOpacity: 0.25, shadowOpacity: 0.25,
shadowRadius: 4, shadowRadius: 4,
elevation: 5, elevation: 5,
...@@ -182,69 +182,5 @@ const styles = StyleSheet.create({ ...@@ -182,69 +182,5 @@ const styles = StyleSheet.create({
marginTop: -80, marginTop: -80,
}, },
centeredView3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: -20,
},
modalView3: {
margin: 20,
backgroundColor: '#FFFFFF',
borderRadius: 20,
padding: 20,
borderWidth: 5,
borderColor: '#1DCE92',
alignItems: 'center',
shadowColor: 'red',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
button3: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
buttonOpen3: {
backgroundColor: '#F194FF',
},
buttonClose3: {
backgroundColor: '#1DCE92',
},
textStyle3: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
headStyle3: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 5,
},
head2Style3: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 20,
},
modalText3: {
marginBottom: 15,
textAlign: 'center',
},
alert3: {
backgroundColor: 'white',
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -65,
},
}); });
frontend/src/component/reading/ReadModalFailed.js
View file @ 274a444d
...@@ -15,7 +15,7 @@ import {useNavigation} from '@react-navigation/native'; ...@@ -15,7 +15,7 @@ import {useNavigation} from '@react-navigation/native';
import {ImagePaths} from '../../assets/read/data/ReadData'; import {ImagePaths} from '../../assets/read/data/ReadData';
export default function ReadModalFailed(props) { export default function ReadModalFailed(props) {
const {caption, validity, visibility, path} = props; const {caption, validity, visibility, imagePath} = props;
const navigation = useNavigation(); const navigation = useNavigation();
const [modalVisible, setModalVisible] = useState(visibility); const [modalVisible, setModalVisible] = useState(visibility);
...@@ -32,7 +32,9 @@ export default function ReadModalFailed(props) { ...@@ -32,7 +32,9 @@ export default function ReadModalFailed(props) {
> >
<View style={styles.centeredView3}> <View style={styles.centeredView3}>
<View style={styles.modalView3}> <View style={styles.modalView3}>
<Image style={styles.alert3} source={ImagePaths.robot1}></Image> <Image
style={styles.alert3}
source={imagePath}></Image>
<Text style={styles.headStyle3}>Your answer is</Text> <Text style={styles.headStyle3}>Your answer is</Text>
<Text style={styles.head2Style3}>Incorect.</Text> <Text style={styles.head2Style3}>Incorect.</Text>
...@@ -111,72 +113,6 @@ const styles = StyleSheet.create({ ...@@ -111,72 +113,6 @@ const styles = StyleSheet.create({
elevation: 2, elevation: 2,
}, },
centeredView2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 22,
},
modalView2: {
marginTop: -10,
margin: 20,
backgroundColor: '#FFFFFFEF',
borderRadius: 20,
padding: 35,
borderWidth: 5,
borderColor: '#red',
alignItems: 'center',
shadowColor: 'red',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
button2: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
buttonOpen2: {
backgroundColor: '#F194FF',
},
buttonClose2: {
// backgroundColor: "#1DCE92",
},
textStyle2: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
modalText2: {
marginBottom: 15,
textAlign: 'center',
},
headStyle2: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 5,
},
head2Style2: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 20,
},
alert2: {
backgroundColor: 'white',
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -80,
},
centeredView3: { centeredView3: {
flex: 1, flex: 1,
...@@ -190,13 +126,13 @@ const styles = StyleSheet.create({ ...@@ -190,13 +126,13 @@ const styles = StyleSheet.create({
borderRadius: 20, borderRadius: 20,
padding: 20, padding: 20,
borderWidth: 5, borderWidth: 5,
borderColor: '#1DCE92', // borderColor: '#1DCE92',
alignItems: 'center', alignItems: 'center',
shadowColor: 'red', // shadowColor: 'red',
shadowOffset: { // shadowOffset: {
width: 0, // width: 0,
height: 2, // height: 2,
}, // },
shadowOpacity: 0.25, shadowOpacity: 0.25,
shadowRadius: 4, shadowRadius: 4,
elevation: 5, elevation: 5,
......
frontend/src/screen/reading/advanced/ReadActivityBird.js
View file @ 274a444d
...@@ -9,7 +9,7 @@ import { ...@@ -9,7 +9,7 @@ import {
ImageButton, ImageButton,
SafeAreaView, SafeAreaView,
ImageBackground, ImageBackground,
Button, Modal,
Image, Image,
TouchableHighlight, TouchableHighlight,
} from 'react-native'; } from 'react-native';
...@@ -29,6 +29,19 @@ export default function ReadActivityBird() { ...@@ -29,6 +29,19 @@ export default function ReadActivityBird() {
const [modalVisible2, setModalVisible2] = useState(false); const [modalVisible2, setModalVisible2] = useState(false);
const [modalVisible3, setModalVisible3] = useState(false); const [modalVisible3, setModalVisible3] = useState(false);
React.useEffect(() => {
// StatusBar.setHidden(true);
//
setModalVisible(true);
const unsubscribe = navigation.addListener('focus', () => {
Orientation.unlockAllOrientations();
Orientation.lockToPortrait();
});
return unsubscribe;
}, [navigation]);
useEffect(() => { useEffect(() => {
Voice.destroy().then(Voice.removeAllListeners); Voice.destroy().then(Voice.removeAllListeners);
}, []); }, []);
...@@ -64,6 +77,7 @@ export default function ReadActivityBird() { ...@@ -64,6 +77,7 @@ export default function ReadActivityBird() {
}; };
const onSpeechResultsHandler = e => { const onSpeechResultsHandler = e => {
setCount(count + 1);
const result = e.value; const result = e.value;
if (result.includes('bird')) { if (result.includes('bird')) {
AsyncStorage.getItem('userId') AsyncStorage.getItem('userId')
...@@ -71,7 +85,7 @@ export default function ReadActivityBird() { ...@@ -71,7 +85,7 @@ export default function ReadActivityBird() {
const data = { const data = {
word: 'Bird', word: 'Bird',
userId: userId, userId: userId,
level: 'Advance', level: 'Advanced',
triedCount: count, triedCount: count,
}; };
getToken(data); getToken(data);
...@@ -80,36 +94,34 @@ export default function ReadActivityBird() { ...@@ -80,36 +94,34 @@ export default function ReadActivityBird() {
console.log(error); console.log(error);
}); });
} else { } else {
setCount(count + 1);
setModalVisible3(true); setModalVisible3(true);
startRecording();
} }
}; };
const onSpeechError = e => { const onSpeechError = e => {
console.log('onSpeechError: ', e); // console.log('onSpeechError: ', e);
const result = DummyReadResult.value; // const result = DummyReadResult.value;
if (result.includes('hello')) { // if (result.includes('hello')) {
AsyncStorage.getItem('userId') // AsyncStorage.getItem('userId')
.then(userId => { // .then(userId => {
const data = { // const data = {
word: 'bird', // word: 'bird',
userId: userId, // userId: userId,
level: 1, // level: 1,
triedCount: count, // triedCount: count,
}; // };
getToken(data); // getToken(data);
}) // })
.catch(error => { // .catch(error => {
console.log(error); // console.log(error);
}); // });
} else { // } else {
setCount(count + 1); // setCount(count + 1);
Voice.start('en-US'); // }
} // console.log('count', count);
console.log('count', count);
console.log('count', count); // console.log('count', count);
}; };
const getToken = data => { const getToken = data => {
...@@ -142,7 +154,36 @@ export default function ReadActivityBird() { ...@@ -142,7 +154,36 @@ export default function ReadActivityBird() {
/> />
)} )}
{modalVisible3 && <ReadModalFailed visible="true" />} {modalVisible3 && (
<ReadModalFailed visible="true" imagePath={ImagePaths.bird1} />
)}
{modalVisible && (
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={true}
// onRequestClose={() => {
// setModalVisible2(!modalVisible2);
// }}
>
<View style={styles.centeredView2}>
<View style={styles.modalView2}>
<Text style={styles.headStyle2}>Press The Button</Text>
<Text style={styles.head2Style2}>And Pronounce</Text>
<TouchableOpacity
style={[styles.buttonClose2]}
onPress={() => setModalVisible(false)}>
<Image
source={ImagePaths.correct}
resizeMode="contain"
style={{width: 100, height: 70, marginBottom: -10}}
/>
</TouchableOpacity>
</View>
</View>
</Modal>
)}
<View style={{flexDirection: 'column'}}> <View style={{flexDirection: 'column'}}>
<ImageBackground <ImageBackground
style={styles.image} style={styles.image}
...@@ -250,4 +291,71 @@ const styles = StyleSheet.create({ ...@@ -250,4 +291,71 @@ const styles = StyleSheet.create({
marginLeft: 135, marginLeft: 135,
padding: 0, padding: 0,
}, },
centeredView2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 22,
},
modalView2: {
marginTop: -10,
margin: 20,
backgroundColor: '#FFFFFFEF',
borderRadius: 20,
padding: 35,
borderWidth: 5,
// borderColor: '#red',
alignItems: 'center',
// shadowColor: 'red',
// shadowOffset: {
// width: 0,
// height: 2,
// },
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
button2: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
buttonOpen2: {
backgroundColor: '#F194FF',
},
buttonClose2: {
// backgroundColor: "#1DCE92",
},
textStyle2: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
modalText2: {
marginBottom: 15,
textAlign: 'center',
},
headStyle2: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 5,
},
head2Style2: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 20,
},
alert2: {
// backgroundColor: 'rgba(0, 181, 0, 0.45)',
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -80,
},
}); });
frontend/src/screen/reading/advanced/ReadActivityDog.js
View file @ 274a444d
...@@ -9,7 +9,7 @@ import { ...@@ -9,7 +9,7 @@ import {
ImageButton, ImageButton,
SafeAreaView, SafeAreaView,
ImageBackground, ImageBackground,
Button, Modal,
Image, Image,
TouchableHighlight, TouchableHighlight,
} from 'react-native'; } from 'react-native';
...@@ -29,6 +29,19 @@ export default function ReadActivityDog() { ...@@ -29,6 +29,19 @@ export default function ReadActivityDog() {
const [modalVisible2, setModalVisible2] = useState(false); const [modalVisible2, setModalVisible2] = useState(false);
const [modalVisible3, setModalVisible3] = useState(false); const [modalVisible3, setModalVisible3] = useState(false);
React.useEffect(() => {
// StatusBar.setHidden(true);
//
setModalVisible(true);
const unsubscribe = navigation.addListener('focus', () => {
Orientation.unlockAllOrientations();
Orientation.lockToPortrait();
});
return unsubscribe;
}, [navigation]);
useEffect(() => { useEffect(() => {
Voice.destroy().then(Voice.removeAllListeners); Voice.destroy().then(Voice.removeAllListeners);
}, []); }, []);
...@@ -64,6 +77,7 @@ export default function ReadActivityDog() { ...@@ -64,6 +77,7 @@ export default function ReadActivityDog() {
}; };
const onSpeechResultsHandler = e => { const onSpeechResultsHandler = e => {
setCount(count + 1);
const result = e.value; const result = e.value;
if (result.includes('dog')) { if (result.includes('dog')) {
AsyncStorage.getItem('userId') AsyncStorage.getItem('userId')
...@@ -71,7 +85,7 @@ export default function ReadActivityDog() { ...@@ -71,7 +85,7 @@ export default function ReadActivityDog() {
const data = { const data = {
word: 'Dog', word: 'Dog',
userId: userId, userId: userId,
level: 'Advance', level: 'Advanced',
triedCount: count, triedCount: count,
}; };
getToken(data); getToken(data);
...@@ -80,36 +94,35 @@ export default function ReadActivityDog() { ...@@ -80,36 +94,35 @@ export default function ReadActivityDog() {
console.log(error); console.log(error);
}); });
} else { } else {
setCount(count + 1);
setModalVisible3(true); setModalVisible3(true);
startRecording();
} }
}; };
const onSpeechError = e => { const onSpeechError = e => {
console.log('onSpeechError: ', e); // console.log('onSpeechError: ', e);
const result = DummyReadResult.value; // const result = DummyReadResult.value;
if (result.includes('hello')) { // if (result.includes('hello')) {
AsyncStorage.getItem('userId') // AsyncStorage.getItem('userId')
.then(userId => { // .then(userId => {
const data = { // const data = {
word: 'dog', // word: 'dog',
userId: userId, // userId: userId,
level: 1, // level: 1,
triedCount: count, // triedCount: count,
}; // };
getToken(data); // getToken(data);
}) // })
.catch(error => { // .catch(error => {
console.log(error); // console.log(error);
}); // });
} else { // } else {
setCount(count + 1); // setCount(count + 1);
Voice.start('en-US'); // Voice.start('en-US');
} // }
console.log('count', count); // console.log('count', count);
console.log('count', count); // console.log('count', count);
}; };
const getToken = data => { const getToken = data => {
...@@ -142,7 +155,38 @@ export default function ReadActivityDog() { ...@@ -142,7 +155,38 @@ export default function ReadActivityDog() {
/> />
)} )}
{modalVisible3 && <ReadModalFailed visible="true" />} {modalVisible3 && (
<ReadModalFailed visible="true" imagePath={ImagePaths.bird1} />
)}
{modalVisible && (
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={true}
// onRequestClose={() => {
// setModalVisible2(!modalVisible2);
// }}
>
<View style={styles.centeredView2}>
<View style={styles.modalView2}>
<Text style={styles.headStyle2}>Press The Button</Text>
<Text style={styles.head2Style2}>And Pronounce</Text>
<TouchableOpacity
style={[styles.buttonClose2]}
onPress={() => setModalVisible(false)}>
<Image
source={ImagePaths.correct}
resizeMode="contain"
style={{width: 100, height: 70, marginBottom: -10}}
/>
</TouchableOpacity>
</View>
</View>
</Modal>
)}
<View style={{flexDirection: 'column'}}> <View style={{flexDirection: 'column'}}>
<ImageBackground <ImageBackground
style={styles.image} style={styles.image}
...@@ -250,4 +294,71 @@ const styles = StyleSheet.create({ ...@@ -250,4 +294,71 @@ const styles = StyleSheet.create({
marginLeft: 135, marginLeft: 135,
padding: 0, padding: 0,
}, },
centeredView2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 22,
},
modalView2: {
marginTop: -10,
margin: 20,
backgroundColor: '#FFFFFFEF',
borderRadius: 20,
padding: 35,
borderWidth: 5,
// borderColor: '#red',
alignItems: 'center',
// shadowColor: 'red',
// shadowOffset: {
// width: 0,
// height: 2,
// },
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
button2: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
buttonOpen2: {
backgroundColor: '#F194FF',
},
buttonClose2: {
// backgroundColor: "#1DCE92",
},
textStyle2: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
modalText2: {
marginBottom: 15,
textAlign: 'center',
},
headStyle2: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 5,
},
head2Style2: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 20,
},
alert2: {
// backgroundColor: 'rgba(0, 181, 0, 0.45)',
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -80,
},
}); });
frontend/src/screen/reading/advanced/ReadActivityFish.js
View file @ 274a444d
...@@ -9,7 +9,7 @@ import { ...@@ -9,7 +9,7 @@ import {
ImageButton, ImageButton,
SafeAreaView, SafeAreaView,
ImageBackground, ImageBackground,
Button, Modal,
Image, Image,
TouchableHighlight, TouchableHighlight,
} from 'react-native'; } from 'react-native';
...@@ -29,6 +29,19 @@ export default function ReadActivityFish() { ...@@ -29,6 +29,19 @@ export default function ReadActivityFish() {
const [modalVisible2, setModalVisible2] = useState(false); const [modalVisible2, setModalVisible2] = useState(false);
const [modalVisible3, setModalVisible3] = useState(false); const [modalVisible3, setModalVisible3] = useState(false);
React.useEffect(() => {
// StatusBar.setHidden(true);
//
setModalVisible(true);
const unsubscribe = navigation.addListener('focus', () => {
Orientation.unlockAllOrientations();
Orientation.lockToPortrait();
});
return unsubscribe;
}, [navigation]);
useEffect(() => { useEffect(() => {
Voice.destroy().then(Voice.removeAllListeners); Voice.destroy().then(Voice.removeAllListeners);
}, []); }, []);
...@@ -77,6 +90,7 @@ export default function ReadActivityFish() { ...@@ -77,6 +90,7 @@ export default function ReadActivityFish() {
}; };
const onSpeechStartHandler = e => { const onSpeechStartHandler = e => {
setCount(count + 1);
const result = e.value; const result = e.value;
if (result.includes('fish')) { if (result.includes('fish')) {
AsyncStorage.getItem('userId') AsyncStorage.getItem('userId')
...@@ -84,7 +98,7 @@ export default function ReadActivityFish() { ...@@ -84,7 +98,7 @@ export default function ReadActivityFish() {
const data = { const data = {
word: 'Fish', word: 'Fish',
userId: userId, userId: userId,
level: 'Advance', level: 'Advanced',
triedCount: count, triedCount: count,
}; };
getToken(data); getToken(data);
...@@ -93,9 +107,7 @@ export default function ReadActivityFish() { ...@@ -93,9 +107,7 @@ export default function ReadActivityFish() {
console.log(error); console.log(error);
}); });
} else { } else {
setCount(count + 1);
setModalVisible3(true); setModalVisible3(true);
startRecording();
} }
}; };
...@@ -104,29 +116,29 @@ export default function ReadActivityFish() { ...@@ -104,29 +116,29 @@ export default function ReadActivityFish() {
}; };
const onSpeechError = e => { const onSpeechError = e => {
console.log('onSpeechError: ', e); // console.log('onSpeechError: ', e);
const result = DummyReadResult.value; // const result = DummyReadResult.value;
if (result.includes('hello')) { // if (result.includes('hello')) {
AsyncStorage.getItem('userId') // AsyncStorage.getItem('userId')
.then(userId => { // .then(userId => {
const data = { // const data = {
word: 'fish', // word: 'fish',
userId: userId, // userId: userId,
level: 1, // level: 1,
triedCount: count, // triedCount: count,
}; // };
getToken(data); // getToken(data);
}) // })
.catch(error => { // .catch(error => {
console.log(error); // console.log(error);
}); // });
} else { // } else {
setCount(count + 1); // setCount(count + 1);
Voice.start('en-US'); // Voice.start('en-US');
} // }
console.log('count', count); // console.log('count', count);
console.log('count', count); // console.log('count', count);
}; };
const getToken = data => { const getToken = data => {
...@@ -159,7 +171,37 @@ export default function ReadActivityFish() { ...@@ -159,7 +171,37 @@ export default function ReadActivityFish() {
/> />
)} )}
{modalVisible3 && <ReadModalFailed visible="true" />} {modalVisible3 && (
<ReadModalFailed visible="true" imagePath={ImagePaths.bird1} />
)}
{modalVisible && (
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={true}
// onRequestClose={() => {
// setModalVisible2(!modalVisible2);
// }}
>
<View style={styles.centeredView2}>
<View style={styles.modalView2}>
<Text style={styles.headStyle2}>Press The Button</Text>
<Text style={styles.head2Style2}>And Pronounce</Text>
<TouchableOpacity
style={[styles.buttonClose2]}
onPress={() => setModalVisible(false)}>
<Image
source={ImagePaths.correct}
resizeMode="contain"
style={{width: 100, height: 70, marginBottom: -10}}
/>
</TouchableOpacity>
</View>
</View>
</Modal>
)}
<View style={{flexDirection: 'column'}}> <View style={{flexDirection: 'column'}}>
<ImageBackground <ImageBackground
style={styles.image} style={styles.image}
...@@ -267,4 +309,75 @@ const styles = StyleSheet.create({ ...@@ -267,4 +309,75 @@ const styles = StyleSheet.create({
marginLeft: 135, marginLeft: 135,
padding: 0, padding: 0,
}, },
//////////
centeredView2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 22,
},
modalView2: {
marginTop: -10,
margin: 20,
backgroundColor: '#FFFFFFEF',
borderRadius: 20,
padding: 35,
borderWidth: 5,
// borderColor: '#red',
alignItems: 'center',
// shadowColor: 'red',
// shadowOffset: {
// width: 0,
// height: 2,
// },
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
button2: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
buttonOpen2: {
backgroundColor: '#F194FF',
},
buttonClose2: {
// backgroundColor: "#1DCE92",
},
textStyle2: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
modalText2: {
marginBottom: 15,
textAlign: 'center',
},
headStyle2: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 5,
},
head2Style2: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 20,
},
alert2: {
// backgroundColor: 'rgba(0, 181, 0, 0.45)',
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -80,
},
}); });
frontend/src/screen/reading/basic/ReadActivityGo.js
View file @ 274a444d
...@@ -9,7 +9,7 @@ import { ...@@ -9,7 +9,7 @@ import {
ImageButton, ImageButton,
SafeAreaView, SafeAreaView,
ImageBackground, ImageBackground,
Button, Modal,
Image, Image,
TouchableHighlight, TouchableHighlight,
} from 'react-native'; } from 'react-native';
...@@ -24,11 +24,24 @@ import ReadModalFailed from '../../../component/reading/ReadModalFailed'; ...@@ -24,11 +24,24 @@ import ReadModalFailed from '../../../component/reading/ReadModalFailed';
export default function ReadActivityGo() { export default function ReadActivityGo() {
const navigation = useNavigation(); const navigation = useNavigation();
const [count, setCount] = useState(1); const [count, setCount] = useState(0);
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
const [modalVisible2, setModalVisible2] = useState(false); const [modalVisible2, setModalVisible2] = useState(false);
const [modalVisible3, setModalVisible3] = useState(false); const [modalVisible3, setModalVisible3] = useState(false);
React.useEffect(() => {
// StatusBar.setHidden(true);
//
setModalVisible(true);
const unsubscribe = navigation.addListener('focus', () => {
Orientation.unlockAllOrientations();
Orientation.lockToPortrait();
});
return unsubscribe;
}, [navigation]);
useEffect(() => { useEffect(() => {
Voice.destroy().then(Voice.removeAllListeners); Voice.destroy().then(Voice.removeAllListeners);
}, []); }, []);
...@@ -64,6 +77,7 @@ export default function ReadActivityGo() { ...@@ -64,6 +77,7 @@ export default function ReadActivityGo() {
}; };
const onSpeechResultsHandler = e => { const onSpeechResultsHandler = e => {
setCount(count + 1);
const result = e.value; const result = e.value;
if (result.includes('go')) { if (result.includes('go')) {
AsyncStorage.getItem('userId') AsyncStorage.getItem('userId')
...@@ -80,36 +94,35 @@ export default function ReadActivityGo() { ...@@ -80,36 +94,35 @@ export default function ReadActivityGo() {
console.log(error); console.log(error);
}); });
} else { } else {
setCount(count + 1);
setModalVisible3(true); setModalVisible3(true);
startRecording();
} }
}; };
const onSpeechError = e => { const onSpeechError = e => {
console.log('onSpeechError: ', e); // console.log('onSpeechError: ', e);
const result = DummyReadResult.value; // const result = DummyReadResult.value;
if (result.includes('hello')) { // if (result.includes('hello')) {
AsyncStorage.getItem('userId') // AsyncStorage.getItem('userId')
.then(userId => { // .then(userId => {
const data = { // const data = {
word: 'go', // word: 'go',
userId: userId, // userId: userId,
level: 1, // level: 1,
triedCount: count, // triedCount: count,
}; // };
getToken(data); // getToken(data);
}) // })
.catch(error => { // .catch(error => {
console.log(error); // console.log(error);
}); // });
} else { // } else {
setCount(count + 1); // setCount(count + 1);
Voice.start('en-US'); // Voice.start('en-US');
} // }
console.log('count', count); // console.log('count', count);
console.log('count', count); // console.log('count', count);
}; };
const getToken = data => { const getToken = data => {
...@@ -138,10 +151,13 @@ export default function ReadActivityGo() { ...@@ -138,10 +151,13 @@ export default function ReadActivityGo() {
validity="Pronunciation." validity="Pronunciation."
visible="true" visible="true"
path="ReadActivityHe" path="ReadActivityHe"
imagePath={ImagePaths.robot1}
/> />
)} )}
{modalVisible3 && <ReadModalFailed visible="true" />} {modalVisible3 && (
<ReadModalFailed visible="true" imagePath={ImagePaths.robot1} />
)}
<View style={{flexDirection: 'column'}}> <View style={{flexDirection: 'column'}}>
<ImageBackground <ImageBackground
style={styles.image} style={styles.image}
...@@ -153,7 +169,7 @@ export default function ReadActivityGo() { ...@@ -153,7 +169,7 @@ export default function ReadActivityGo() {
</View> </View>
</View> </View>
<View style={styles.textBody}> <View style={styles.textBody}>
<Text style={styles.text}>Pronounce this Word!</Text> <Text style={styles.text}>Pronounce This Word!</Text>
</View> </View>
</View> </View>
...@@ -250,4 +266,71 @@ const styles = StyleSheet.create({ ...@@ -250,4 +266,71 @@ const styles = StyleSheet.create({
marginLeft: 50, marginLeft: 50,
padding: 7, padding: 7,
}, },
centeredView2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 22,
},
modalView2: {
marginTop: -10,
margin: 20,
backgroundColor: '#FFFFFFEF',
borderRadius: 20,
padding: 35,
borderWidth: 5,
// borderColor: '#red',
alignItems: 'center',
// shadowColor: 'red',
// shadowOffset: {
// width: 0,
// height: 2,
// },
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
button2: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
buttonOpen2: {
backgroundColor: '#F194FF',
},
buttonClose2: {
// backgroundColor: "#1DCE92",
},
textStyle2: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
modalText2: {
marginBottom: 15,
textAlign: 'center',
},
headStyle2: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 5,
},
head2Style2: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 20,
},
alert2: {
// backgroundColor: 'rgba(0, 181, 0, 0.45)',
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -80,
},
}); });
frontend/src/screen/reading/basic/ReadActivityHe.js
View file @ 274a444d
...@@ -9,7 +9,7 @@ import { ...@@ -9,7 +9,7 @@ import {
ImageButton, ImageButton,
SafeAreaView, SafeAreaView,
ImageBackground, ImageBackground,
Button, Modal,
Image, Image,
TouchableHighlight, TouchableHighlight,
} from 'react-native'; } from 'react-native';
...@@ -24,11 +24,24 @@ import ReadModalFailed from '../../../component/reading/ReadModalFailed'; ...@@ -24,11 +24,24 @@ import ReadModalFailed from '../../../component/reading/ReadModalFailed';
export default function ReadActivityHe() { export default function ReadActivityHe() {
const navigation = useNavigation(); const navigation = useNavigation();
const [count, setCount] = useState(1); const [count, setCount] = useState(0);
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
const [modalVisible2, setModalVisible2] = useState(false); const [modalVisible2, setModalVisible2] = useState(false);
const [modalVisible3, setModalVisible3] = useState(false); const [modalVisible3, setModalVisible3] = useState(false);
React.useEffect(() => {
// StatusBar.setHidden(true);
//
setModalVisible(true);
const unsubscribe = navigation.addListener('focus', () => {
Orientation.unlockAllOrientations();
Orientation.lockToPortrait();
});
return unsubscribe;
}, [navigation]);
useEffect(() => { useEffect(() => {
Voice.destroy().then(Voice.removeAllListeners); Voice.destroy().then(Voice.removeAllListeners);
}, []); }, []);
...@@ -82,6 +95,7 @@ export default function ReadActivityHe() { ...@@ -82,6 +95,7 @@ export default function ReadActivityHe() {
}; };
const onSpeechResultsHandler = e => { const onSpeechResultsHandler = e => {
setCount(count + 1);
const result = e.value; const result = e.value;
if (result.includes('He')) { if (result.includes('He')) {
AsyncStorage.getItem('userId') AsyncStorage.getItem('userId')
...@@ -98,36 +112,35 @@ export default function ReadActivityHe() { ...@@ -98,36 +112,35 @@ export default function ReadActivityHe() {
console.log(error); console.log(error);
}); });
} else { } else {
setCount(count + 1);
setModalVisible3(true); setModalVisible3(true);
startRecording();
} }
}; };
const onSpeechError = e => { const onSpeechError = e => {
console.log('onSpeechError: ', e); // console.log('onSpeechError: ', e);
const result = DummyReadResult.value; // const result = DummyReadResult.value;
if (result.includes('hello')) { // if (result.includes('hello')) {
AsyncStorage.getItem('userId') // AsyncStorage.getItem('userId')
.then(userId => { // .then(userId => {
const data = { // const data = {
word: 'he', // word: 'he',
userId: userId, // userId: userId,
level: 1, // level: 1,
triedCount: count, // triedCount: count,
}; // };
getToken(data); // getToken(data);
}) // })
.catch(error => { // .catch(error => {
console.log(error); // console.log(error);
}); // });
} else { // } else {
setCount(count + 1); // setCount(count + 1);
Voice.start('en-US'); // Voice.start('en-US');
} // }
console.log('count', count); // console.log('count', count);
console.log('count', count); // console.log('count', count);
}; };
const getToken = data => { const getToken = data => {
...@@ -152,14 +165,45 @@ export default function ReadActivityHe() { ...@@ -152,14 +165,45 @@ export default function ReadActivityHe() {
<SafeAreaView> <SafeAreaView>
{modalVisible2 && ( {modalVisible2 && (
<ReadModal <ReadModal
caption="Basic" caption="Basic Level"
validity="Level Completed." validity=" Completed."
visible="true" visible="true"
path="Read" path="Read"
imagePath={ImagePaths.robot1}
/> />
)} )}
{modalVisible3 && <ReadModalFailed visible="true" />} {modalVisible3 && (
<ReadModalFailed visible="true" imagePath={ImagePaths.robot1} />
)}
{modalVisible && (
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={true}
// onRequestClose={() => {
// setModalVisible2(!modalVisible2);
// }}
>
<View style={styles.centeredView2}>
<View style={styles.modalView2}>
<Text style={styles.headStyle2}>Press The Button</Text>
<Text style={styles.head2Style2}>And Pronounce</Text>
<TouchableOpacity
style={[styles.buttonClose2]}
onPress={() => setModalVisible(false)}>
<Image
source={ImagePaths.correct}
resizeMode="contain"
style={{width: 100, height: 70, marginBottom: -10}}
/>
</TouchableOpacity>
</View>
</View>
</Modal>
)}
<View style={{flexDirection: 'column'}}> <View style={{flexDirection: 'column'}}>
<ImageBackground <ImageBackground
style={styles.image} style={styles.image}
...@@ -268,4 +312,71 @@ const styles = StyleSheet.create({ ...@@ -268,4 +312,71 @@ const styles = StyleSheet.create({
marginLeft: 50, marginLeft: 50,
padding: 7, padding: 7,
}, },
centeredView2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 22,
},
modalView2: {
marginTop: -10,
margin: 20,
backgroundColor: '#FFFFFFEF',
borderRadius: 20,
padding: 35,
borderWidth: 5,
// borderColor: '#red',
alignItems: 'center',
// shadowColor: 'red',
// shadowOffset: {
// width: 0,
// height: 2,
// },
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
button2: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
buttonOpen2: {
backgroundColor: '#F194FF',
},
buttonClose2: {
// backgroundColor: "#1DCE92",
},
textStyle2: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
modalText2: {
marginBottom: 15,
textAlign: 'center',
},
headStyle2: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 5,
},
head2Style2: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 20,
},
alert2: {
// backgroundColor: 'rgba(0, 181, 0, 0.45)',
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -80,
},
}); });
frontend/src/screen/reading/basic/ReadActivityNo.js
View file @ 274a444d
...@@ -26,7 +26,7 @@ import ReadModalFailed from '../../../component/reading/ReadModalFailed'; ...@@ -26,7 +26,7 @@ import ReadModalFailed from '../../../component/reading/ReadModalFailed';
export default function ReadActivityNo() { export default function ReadActivityNo() {
const navigation = useNavigation(); const navigation = useNavigation();
const [count, setCount] = useState(1); const [count, setCount] = useState(0);
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
const [modalVisible2, setModalVisible2] = useState(false); const [modalVisible2, setModalVisible2] = useState(false);
const [modalVisible3, setModalVisible3] = useState(false); const [modalVisible3, setModalVisible3] = useState(false);
...@@ -34,6 +34,7 @@ export default function ReadActivityNo() { ...@@ -34,6 +34,7 @@ export default function ReadActivityNo() {
React.useEffect(() => { React.useEffect(() => {
// StatusBar.setHidden(true); // StatusBar.setHidden(true);
// //
setModalVisible(true);
audioInit(); audioInit();
const unsubscribe = navigation.addListener('focus', () => { const unsubscribe = navigation.addListener('focus', () => {
...@@ -162,6 +163,7 @@ export default function ReadActivityNo() { ...@@ -162,6 +163,7 @@ export default function ReadActivityNo() {
}; };
const onSpeechResultsHandler = e => { const onSpeechResultsHandler = e => {
setCount(count + 1);
const result = e.value; const result = e.value;
if (result.includes('no')) { if (result.includes('no')) {
AsyncStorage.getItem('userId') AsyncStorage.getItem('userId')
...@@ -178,36 +180,36 @@ export default function ReadActivityNo() { ...@@ -178,36 +180,36 @@ export default function ReadActivityNo() {
console.log(error); console.log(error);
}); });
} else { } else {
setCount(count + 1);
setModalVisible3(true); setModalVisible3(true);
startRecording();
} }
console.log('count', count); console.log('count', count);
}; };
const onSpeechError = e => { const onSpeechError = e => {
console.log('onSpeechError: ', e); // setCount(count + 1);
const result = DummyReadResult.value; // console.log('onSpeechError: ', e);
if (result.includes('helloddd')) { // const result = DummyReadResult.value;
AsyncStorage.getItem('userId') // if (result.includes('hello')) {
.then(userId => { // AsyncStorage.getItem('userId')
const data = { // .then(userId => {
word: 'no', // const data = {
userId: userId, // word: 'no',
level: 1, // userId: userId,
triedCount: count, // level: 1,
}; // triedCount: count,
getToken(data); // };
}) // getToken(data);
.catch(error => { // })
console.log(error); // .catch(error => {
}); // console.log(error);
} else { // });
setCount(count + 1); // } else {
setModalVisible3(true);
console.log(count); // setModalVisible3(true);
startRecording(); // console.log(count);
}
// }
}; };
const getToken = data => { const getToken = data => {
...@@ -236,10 +238,69 @@ export default function ReadActivityNo() { ...@@ -236,10 +238,69 @@ export default function ReadActivityNo() {
validity="Pronunciation." validity="Pronunciation."
visible="true" visible="true"
path="ReadActivityGo" path="ReadActivityGo"
imagePath={ImagePaths.robot1}
/> />
)} )}
{modalVisible3 && <ReadModalFailed visible="true" />} {modalVisible3 && (
<ReadModalFailed visible="true" imagePath={ImagePaths.robot1} />
)}
{modalVisible && (
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={true}
// onRequestClose={() => {
// setModalVisible2(!modalVisible2);
// }}
>
<View style={styles.centeredView2}>
<View style={styles.modalView2}>
<Text style={styles.headStyle2}>Press The Button</Text>
<Text style={styles.head2Style2}>And Pronounce</Text>
<TouchableOpacity
style={[styles.buttonClose2]}
onPress={() => setModalVisible(false)}>
<Image
source={ImagePaths.correct}
resizeMode="contain"
style={{width: 100, height: 70, marginBottom: -10}}
/>
</TouchableOpacity>
</View>
</View>
</Modal>
)}
{modalVisible && (
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={true}
// onRequestClose={() => {
// setModalVisible2(!modalVisible2);
// }}
>
<View style={styles.centeredView2}>
<View style={styles.modalView2}>
<Text style={styles.headStyle2}>Press The Button</Text>
<Text style={styles.head2Style2}>And Pronounce</Text>
<TouchableOpacity
style={[styles.buttonClose2]}
onPress={() => setModalVisible(false)}>
<Image
source={ImagePaths.correct}
resizeMode="contain"
style={{width: 100, height: 70, marginBottom: -10}}
/>
</TouchableOpacity>
</View>
</View>
</Modal>
)}
<View style={{flexDirection: 'column'}}> <View style={{flexDirection: 'column'}}>
<ImageBackground <ImageBackground
...@@ -350,4 +411,70 @@ const styles = StyleSheet.create({ ...@@ -350,4 +411,70 @@ const styles = StyleSheet.create({
padding: 7, padding: 7,
}, },
centeredView2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 22,
},
modalView2: {
marginTop: -10,
margin: 20,
backgroundColor: '#FFFFFFEF',
borderRadius: 20,
padding: 35,
borderWidth: 5,
// borderColor: '#red',
alignItems: 'center',
// shadowColor: 'red',
// shadowOffset: {
// width: 0,
// height: 2,
// },
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
button2: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
buttonOpen2: {
backgroundColor: '#F194FF',
},
buttonClose2: {
// backgroundColor: "#1DCE92",
},
textStyle2: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
modalText2: {
marginBottom: 15,
textAlign: 'center',
},
headStyle2: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 5,
},
head2Style2: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 20,
},
alert2: {
// backgroundColor: 'rgba(0, 181, 0, 0.45)',
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -80,
},
}); });
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