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) {
>
<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 @ 274a444d
......@@ -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 @ 274a444d
......@@ -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 @ 274a444d
......@@ -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 @ 274a444d
......@@ -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 @ 274a444d
......@@ -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 @ 274a444d
......@@ -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 @ 274a444d
......@@ -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