Skip to content

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

Merge branch 'it18257632' into 'master' 

It18257632

See merge request !195
parents d9baf31b fc57ce6d
Hide whitespace changes
Inline Side-by-side
Showing with 836 additions and 311 deletions
frontend/src/component/reading/ReadModal.js
View file @ f9617c5e
......@@ -34,7 +34,7 @@ export default function ReadModal(props) {
>
<View style={styles.centeredView2}>
<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.head2Style2}>{validity}</Text>
......@@ -76,7 +76,7 @@ const styles = StyleSheet.create({
textBody: {
marginTop: 150,
marginLeft: 95,
backgroundColor: '#1DCE92',
// backgroundColor: '#1DCE92',
width: 200,
borderRadius: 50,
padding: 5,
......@@ -128,13 +128,13 @@ const styles = StyleSheet.create({
borderRadius: 20,
padding: 35,
borderWidth: 5,
borderColor: '#red',
// borderColor: '#red',
alignItems: 'center',
shadowColor: 'red',
shadowOffset: {
width: 0,
height: 2,
},
// shadowColor: 'red',
// shadowOffset: {
// width: 0,
// height: 2,
// },
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
......@@ -182,69 +182,5 @@ const styles = StyleSheet.create({
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 @ f9617c5e
......@@ -15,7 +15,7 @@ import {useNavigation} from '@react-navigation/native';
import {ImagePaths} from '../../assets/read/data/ReadData';
export default function ReadModalFailed(props) {
const {caption, validity, visibility, path} = props;
const {caption, validity, visibility, imagePath} = props;
const navigation = useNavigation();
const [modalVisible, setModalVisible] = useState(visibility);
......@@ -32,7 +32,9 @@ export default function ReadModalFailed(props) {
>
<View style={styles.centeredView3}>
<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.head2Style3}>Incorect.</Text>
......@@ -111,72 +113,6 @@ const styles = StyleSheet.create({
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: {
flex: 1,
......@@ -190,13 +126,13 @@ const styles = StyleSheet.create({
borderRadius: 20,
padding: 20,
borderWidth: 5,
borderColor: '#1DCE92',
// borderColor: '#1DCE92',
alignItems: 'center',
shadowColor: 'red',
shadowOffset: {
width: 0,
height: 2,
},
// shadowColor: 'red',
// shadowOffset: {
// width: 0,
// height: 2,
// },
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
......
frontend/src/screen/reading/advanced/ReadActivityBird.js
View file @ f9617c5e
......@@ -9,7 +9,7 @@ import {
ImageButton,
SafeAreaView,
ImageBackground,
Button,
Modal,
Image,
TouchableHighlight,
} from 'react-native';
......@@ -29,6 +29,19 @@ export default function ReadActivityBird() {
const [modalVisible2, setModalVisible2] = 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(() => {
Voice.destroy().then(Voice.removeAllListeners);
}, []);
......@@ -64,6 +77,7 @@ export default function ReadActivityBird() {
};
const onSpeechResultsHandler = e => {
setCount(count + 1);
const result = e.value;
if (result.includes('bird')) {
AsyncStorage.getItem('userId')
......@@ -71,7 +85,7 @@ export default function ReadActivityBird() {
const data = {
word: 'Bird',
userId: userId,
level: 'Advance',
level: 'Advanced',
triedCount: count,
};
getToken(data);
......@@ -80,36 +94,34 @@ export default function ReadActivityBird() {
console.log(error);
});
} else {
setCount(count + 1);
setModalVisible3(true);
startRecording();
}
};
const onSpeechError = e => {
console.log('onSpeechError: ', e);
const result = DummyReadResult.value;
if (result.includes('hello')) {
AsyncStorage.getItem('userId')
.then(userId => {
const data = {
word: 'bird',
userId: userId,
level: 1,
triedCount: count,
};
getToken(data);
})
.catch(error => {
console.log(error);
});
} else {
setCount(count + 1);
Voice.start('en-US');
}
console.log('count', count);
// console.log('onSpeechError: ', e);
// const result = DummyReadResult.value;
// if (result.includes('hello')) {
// AsyncStorage.getItem('userId')
// .then(userId => {
// const data = {
// word: 'bird',
// userId: userId,
// level: 1,
// triedCount: count,
// };
// getToken(data);
// })
// .catch(error => {
// console.log(error);
// });
// } else {
// setCount(count + 1);
// }
// console.log('count', count);
console.log('count', count);
// console.log('count', count);
};
const getToken = data => {
......@@ -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'}}>
<ImageBackground
style={styles.image}
......@@ -250,4 +291,71 @@ const styles = StyleSheet.create({
marginLeft: 135,
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 @ f9617c5e
......@@ -9,7 +9,7 @@ import {
ImageButton,
SafeAreaView,
ImageBackground,
Button,
Modal,
Image,
TouchableHighlight,
} from 'react-native';
......@@ -29,6 +29,19 @@ export default function ReadActivityDog() {
const [modalVisible2, setModalVisible2] = 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(() => {
Voice.destroy().then(Voice.removeAllListeners);
}, []);
......@@ -64,6 +77,7 @@ export default function ReadActivityDog() {
};
const onSpeechResultsHandler = e => {
setCount(count + 1);
const result = e.value;
if (result.includes('dog')) {
AsyncStorage.getItem('userId')
......@@ -71,7 +85,7 @@ export default function ReadActivityDog() {
const data = {
word: 'Dog',
userId: userId,
level: 'Advance',
level: 'Advanced',
triedCount: count,
};
getToken(data);
......@@ -80,36 +94,35 @@ export default function ReadActivityDog() {
console.log(error);
});
} else {
setCount(count + 1);
setModalVisible3(true);
startRecording();
}
};
const onSpeechError = e => {
console.log('onSpeechError: ', e);
const result = DummyReadResult.value;
if (result.includes('hello')) {
AsyncStorage.getItem('userId')
.then(userId => {
const data = {
word: 'dog',
userId: userId,
level: 1,
triedCount: count,
};
getToken(data);
})
.catch(error => {
console.log(error);
});
} else {
setCount(count + 1);
Voice.start('en-US');
}
console.log('count', count);
// console.log('onSpeechError: ', e);
// const result = DummyReadResult.value;
// if (result.includes('hello')) {
// AsyncStorage.getItem('userId')
// .then(userId => {
// const data = {
// word: 'dog',
// userId: userId,
// level: 1,
// triedCount: count,
// };
// getToken(data);
// })
// .catch(error => {
// console.log(error);
// });
// } else {
// setCount(count + 1);
// Voice.start('en-US');
// }
// console.log('count', count);
console.log('count', count);
// console.log('count', count);
};
const getToken = data => {
......@@ -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'}}>
<ImageBackground
style={styles.image}
......@@ -250,4 +294,71 @@ const styles = StyleSheet.create({
marginLeft: 135,
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 @ f9617c5e
......@@ -9,7 +9,7 @@ import {
ImageButton,
SafeAreaView,
ImageBackground,
Button,
Modal,
Image,
TouchableHighlight,
} from 'react-native';
......@@ -29,6 +29,19 @@ export default function ReadActivityFish() {
const [modalVisible2, setModalVisible2] = 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(() => {
Voice.destroy().then(Voice.removeAllListeners);
}, []);
......@@ -77,6 +90,7 @@ export default function ReadActivityFish() {
};
const onSpeechStartHandler = e => {
setCount(count + 1);
const result = e.value;
if (result.includes('fish')) {
AsyncStorage.getItem('userId')
......@@ -84,7 +98,7 @@ export default function ReadActivityFish() {
const data = {
word: 'Fish',
userId: userId,
level: 'Advance',
level: 'Advanced',
triedCount: count,
};
getToken(data);
......@@ -93,9 +107,7 @@ export default function ReadActivityFish() {
console.log(error);
});
} else {
setCount(count + 1);
setModalVisible3(true);
startRecording();
}
};
......@@ -104,29 +116,29 @@ export default function ReadActivityFish() {
};
const onSpeechError = e => {
console.log('onSpeechError: ', e);
const result = DummyReadResult.value;
if (result.includes('hello')) {
AsyncStorage.getItem('userId')
.then(userId => {
const data = {
word: 'fish',
userId: userId,
level: 1,
triedCount: count,
};
getToken(data);
})
.catch(error => {
console.log(error);
});
} else {
setCount(count + 1);
Voice.start('en-US');
}
console.log('count', count);
// console.log('onSpeechError: ', e);
// const result = DummyReadResult.value;
// if (result.includes('hello')) {
// AsyncStorage.getItem('userId')
// .then(userId => {
// const data = {
// word: 'fish',
// userId: userId,
// level: 1,
// triedCount: count,
// };
// getToken(data);
// })
// .catch(error => {
// console.log(error);
// });
// } else {
// setCount(count + 1);
// Voice.start('en-US');
// }
// console.log('count', count);
console.log('count', count);
// console.log('count', count);
};
const getToken = data => {
......@@ -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'}}>
<ImageBackground
style={styles.image}
......@@ -267,4 +309,75 @@ const styles = StyleSheet.create({
marginLeft: 135,
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 @ f9617c5e
......@@ -9,7 +9,7 @@ import {
ImageButton,
SafeAreaView,
ImageBackground,
Button,
Modal,
Image,
TouchableHighlight,
} from 'react-native';
......@@ -24,11 +24,24 @@ import ReadModalFailed from '../../../component/reading/ReadModalFailed';
export default function ReadActivityGo() {
const navigation = useNavigation();
const [count, setCount] = useState(1);
const [count, setCount] = useState(0);
const [modalVisible, setModalVisible] = useState(false);
const [modalVisible2, setModalVisible2] = 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(() => {
Voice.destroy().then(Voice.removeAllListeners);
}, []);
......@@ -64,6 +77,7 @@ export default function ReadActivityGo() {
};
const onSpeechResultsHandler = e => {
setCount(count + 1);
const result = e.value;
if (result.includes('go')) {
AsyncStorage.getItem('userId')
......@@ -80,36 +94,35 @@ export default function ReadActivityGo() {
console.log(error);
});
} else {
setCount(count + 1);
setModalVisible3(true);
startRecording();
}
};
const onSpeechError = e => {
console.log('onSpeechError: ', e);
const result = DummyReadResult.value;
if (result.includes('hello')) {
AsyncStorage.getItem('userId')
.then(userId => {
const data = {
word: 'go',
userId: userId,
level: 1,
triedCount: count,
};
getToken(data);
})
.catch(error => {
console.log(error);
});
} else {
setCount(count + 1);
Voice.start('en-US');
}
console.log('count', count);
// console.log('onSpeechError: ', e);
// const result = DummyReadResult.value;
// if (result.includes('hello')) {
// AsyncStorage.getItem('userId')
// .then(userId => {
// const data = {
// word: 'go',
// userId: userId,
// level: 1,
// triedCount: count,
// };
// getToken(data);
// })
// .catch(error => {
// console.log(error);
// });
// } else {
// setCount(count + 1);
// Voice.start('en-US');
// }
// console.log('count', count);
console.log('count', count);
// console.log('count', count);
};
const getToken = data => {
......@@ -138,10 +151,13 @@ export default function ReadActivityGo() {
validity="Pronunciation."
visible="true"
path="ReadActivityHe"
imagePath={ImagePaths.robot1}
/>
)}
{modalVisible3 && <ReadModalFailed visible="true" />}
{modalVisible3 && (
<ReadModalFailed visible="true" imagePath={ImagePaths.robot1} />
)}
<View style={{flexDirection: 'column'}}>
<ImageBackground
style={styles.image}
......@@ -153,7 +169,7 @@ export default function ReadActivityGo() {
</View>
</View>
<View style={styles.textBody}>
<Text style={styles.text}>Pronounce this Word!</Text>
<Text style={styles.text}>Pronounce This Word!</Text>
</View>
</View>
......@@ -250,4 +266,71 @@ const styles = StyleSheet.create({
marginLeft: 50,
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 @ f9617c5e
......@@ -9,7 +9,7 @@ import {
ImageButton,
SafeAreaView,
ImageBackground,
Button,
Modal,
Image,
TouchableHighlight,
} from 'react-native';
......@@ -24,11 +24,24 @@ import ReadModalFailed from '../../../component/reading/ReadModalFailed';
export default function ReadActivityHe() {
const navigation = useNavigation();
const [count, setCount] = useState(1);
const [count, setCount] = useState(0);
const [modalVisible, setModalVisible] = useState(false);
const [modalVisible2, setModalVisible2] = 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(() => {
Voice.destroy().then(Voice.removeAllListeners);
}, []);
......@@ -82,6 +95,7 @@ export default function ReadActivityHe() {
};
const onSpeechResultsHandler = e => {
setCount(count + 1);
const result = e.value;
if (result.includes('He')) {
AsyncStorage.getItem('userId')
......@@ -98,36 +112,35 @@ export default function ReadActivityHe() {
console.log(error);
});
} else {
setCount(count + 1);
setModalVisible3(true);
startRecording();
}
};
const onSpeechError = e => {
console.log('onSpeechError: ', e);
const result = DummyReadResult.value;
if (result.includes('hello')) {
AsyncStorage.getItem('userId')
.then(userId => {
const data = {
word: 'he',
userId: userId,
level: 1,
triedCount: count,
};
getToken(data);
})
.catch(error => {
console.log(error);
});
} else {
setCount(count + 1);
Voice.start('en-US');
}
console.log('count', count);
// console.log('onSpeechError: ', e);
// const result = DummyReadResult.value;
// if (result.includes('hello')) {
// AsyncStorage.getItem('userId')
// .then(userId => {
// const data = {
// word: 'he',
// userId: userId,
// level: 1,
// triedCount: count,
// };
// getToken(data);
// })
// .catch(error => {
// console.log(error);
// });
// } else {
// setCount(count + 1);
// Voice.start('en-US');
// }
// console.log('count', count);
console.log('count', count);
// console.log('count', count);
};
const getToken = data => {
......@@ -152,14 +165,45 @@ export default function ReadActivityHe() {
<SafeAreaView>
{modalVisible2 && (
<ReadModal
caption="Basic"
validity="Level Completed."
caption="Basic Level"
validity=" Completed."
visible="true"
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'}}>
<ImageBackground
style={styles.image}
......@@ -268,4 +312,71 @@ const styles = StyleSheet.create({
marginLeft: 50,
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 @ f9617c5e
......@@ -26,7 +26,7 @@ import ReadModalFailed from '../../../component/reading/ReadModalFailed';
export default function ReadActivityNo() {
const navigation = useNavigation();
const [count, setCount] = useState(1);
const [count, setCount] = useState(0);
const [modalVisible, setModalVisible] = useState(false);
const [modalVisible2, setModalVisible2] = useState(false);
const [modalVisible3, setModalVisible3] = useState(false);
......@@ -34,6 +34,7 @@ export default function ReadActivityNo() {
React.useEffect(() => {
// StatusBar.setHidden(true);
//
setModalVisible(true);
audioInit();
const unsubscribe = navigation.addListener('focus', () => {
......@@ -162,6 +163,7 @@ export default function ReadActivityNo() {
};
const onSpeechResultsHandler = e => {
setCount(count + 1);
const result = e.value;
if (result.includes('no')) {
AsyncStorage.getItem('userId')
......@@ -178,36 +180,36 @@ export default function ReadActivityNo() {
console.log(error);
});
} else {
setCount(count + 1);
setModalVisible3(true);
startRecording();
}
console.log('count', count);
};
const onSpeechError = e => {
console.log('onSpeechError: ', e);
const result = DummyReadResult.value;
if (result.includes('helloddd')) {
AsyncStorage.getItem('userId')
.then(userId => {
const data = {
word: 'no',
userId: userId,
level: 1,
triedCount: count,
};
getToken(data);
})
.catch(error => {
console.log(error);
});
} else {
setCount(count + 1);
setModalVisible3(true);
console.log(count);
startRecording();
}
// setCount(count + 1);
// console.log('onSpeechError: ', e);
// const result = DummyReadResult.value;
// if (result.includes('hello')) {
// AsyncStorage.getItem('userId')
// .then(userId => {
// const data = {
// word: 'no',
// userId: userId,
// level: 1,
// triedCount: count,
// };
// getToken(data);
// })
// .catch(error => {
// console.log(error);
// });
// } else {
// setModalVisible3(true);
// console.log(count);
// }
};
const getToken = data => {
......@@ -236,10 +238,69 @@ export default function ReadActivityNo() {
validity="Pronunciation."
visible="true"
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'}}>
<ImageBackground
......@@ -350,4 +411,70 @@ const styles = StyleSheet.create({
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