Skip to content

P
pianoApp
Commit 581d1a12 authored by norhalimah's avatar norhalimah
Browse files
Options

restyling

parent a0a9af4c
Show whitespace changes
Inline Side-by-side
Showing with 560 additions and 125 deletions
App.js
View file @ 581d1a12
...@@ -173,16 +173,16 @@ class App extends React.PureComponent { ...@@ -173,16 +173,16 @@ class App extends React.PureComponent {
component={Listen} component={Listen}
options={({navigation}) => ({ options={({navigation}) => ({
title: 'Listen Skill', title: 'Listen Skill',
headerStyle: {
backgroundColor: '#E07EF9',
},
headerTitleStyle: { headerTitleStyle: {
fontFamily: 'Gilroy-Bold', fontFamily: 'Gilroy-Bold',
fontSize: 30, fontSize: 20,
lineHeight: 25, lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.15, marginHorizontal: Dimensions.get('window').width * 0.15,
color: '#3B3A39', color: '#3B3A39',
}, },
headerStyle: {
backgroundColor: '#E07EF9',
},
headerTintColor: '#fff', headerTintColor: '#fff',
headerTransparent: true, headerTransparent: true,
headerBackImage: () => ( headerBackImage: () => (
......
package-lock.json 0 → 100644
View file @ 581d1a12
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ 581d1a12
...@@ -50,6 +50,7 @@ ...@@ -50,6 +50,7 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.9", "@babel/core": "^7.12.9",
"@babel/preset-flow": "^7.13.13",
"@babel/runtime": "^7.12.5", "@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0", "@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3", "babel-jest": "^26.6.3",
......
screens/listening.js
View file @ 581d1a12
...@@ -429,109 +429,274 @@ class Listen extends React.Component { ...@@ -429,109 +429,274 @@ class Listen extends React.Component {
}; };
render() { showQuit (){
const movingMargin = this.anim.interpolate({ if (this.state.showQuit === true){
inputRange: [0, 0.5, 1],
outputRange: [0, 290, 1],
});
return ( return (
<View style={[styles.container, {backgroundColor:'#81C9C9'}]}>
{/* Play Sound */}
<Modal transparent={true} visible={this.state.showMusic} animationType="slide">
<View style={styles.modalbackground}>
<View style={{flexDirection: 'row',justifyContent: 'space-between'}}>
<TouchableOpacity style={{backgroundColor:'#BDBDBD',width:'100%', height:'55%'}}><Text/></TouchableOpacity>
<Animated.Image
style={{
width: this.state.progressStatus + '%',
height: '55%',
backgroundColor: '#3CBA54', position: 'absolute'}} />
</View>
<View style={{alignItems:'center', alignContent:'center', marginTop : Dimensions.get('window').width * 0.15}}>
<Image style={{height:100, width:100,backgroundColor:'white',
borderRadius: 10,
borderColor: 'black',
borderWidth: 5}} source={require('../media/img/hear.gif')}/>
</View>
</View>
</Modal>
{/* Modal Quit the Scale*/}
<Modal transparent={true} visible={this.state.showQuit} animationType="slide"> <Modal transparent={true} visible={this.state.showQuit} animationType="slide">
<View style={styles.modalbackground}> <View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}>
<View style={styles.viewmodalQ}> <View style={{ marginHorizontal: Dimensions.get('window').width * 0.28,
<Text style={styles.textquit}>Quit?</Text> width : Dimensions.get('window').width * 0.45,
height : Dimensions.get('window').height * 0.6,
marginTop : Dimensions.get('window').width * 0.13,
alignItems: 'center',
backgroundColor:'#FFFBF0',
borderRadius: 16}}>
<Image style={{height:'40%', width:'30%', position:'absolute', left:110, top: -45 }} source={quitIcon}/>
<Text style={{ fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:30,
color:'#3B3A39',
paddingTop:Dimensions.get('window').height * 0.17}}>Quit Scale?</Text>
<View <View
style={styles.viewmodalQQ}> style={{ alignItems: 'center',
<TouchableOpacity style={styles.buttonyes} flexDirection: 'row',
onPress={() => this.backAction()}> marginTop:20, justifyContent: 'center'}}>
<Text style={styles.textqq}>YES</Text> <TouchableOpacity style={{ backgroundColor: '#FFFFFF',
</TouchableOpacity> padding: 15,
<TouchableOpacity style={styles.buttonno} borderRadius: 8,
marginTop:10,
marginBottom:10,
borderColor:'#81C9C9',
borderWidth: 1,
marginRight:8}}
onPress={() => this.setState({showQuit: false})}> onPress={() => this.setState({showQuit: false})}>
<Text style={styles.textqq}>NO</Text> <Text style={{ color: '#81C9C9',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.04}}>NO</Text>
</TouchableOpacity>
<TouchableOpacity style={{ backgroundColor: 'white',
paddingLeft: 18,
paddingRight: 18,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
borderWidth: 1,
borderColor:'#81C9C9',
marginLeft:8}}
onPress={() => this.backAction()}>
<Text style={{color: '#81C9C9',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.03}}>YES</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
</View> </View>
</Modal> </Modal>
);
}
else {
return null;
}
}
{/* Modal Correct*/} showCorrect(){
if (this.state.showC === true){
return (
<Modal transparent={true} visible={this.state.showC} animationType="slide"> <Modal transparent={true} visible={this.state.showC} animationType="slide">
<View style={styles.modalbackground}> <View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}>
<View style={styles.viewmodalCW}> <View style={{ marginHorizontal: Dimensions.get('window').width * 0.28,
<ImageBackground source={require('../media/img/correctAlert.png')} style={styles.imagecw}> width : Dimensions.get('window').width * 0.45,
<Text style={styles.textcw}>Correct</Text> height : Dimensions.get('window').height * 0.6,
<View style={styles.viewbutton}> marginTop : Dimensions.get('window').width * 0.13,
<TouchableOpacity style={styles.buttonc} onPress={() => this.setState({showC: false})}> alignItems: 'center',
<Text style={styles.buttonok}>OK</Text> backgroundColor:'#FFFBF0',
borderRadius: 16}}>
<Image style={{height:'40%', width:'30%', position:'absolute', left:110, top: -45 }} source={correctIcon}/>
<Text style={{ fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3B3A39',
paddingTop:Dimensions.get('window').height * 0.17}}>Scale Result</Text>
<Text style={{ fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:30,
color:'#14A76C',
paddingTop:Dimensions.get('window').height * 0.02}}>Correct</Text>
<TouchableOpacity style={{ backgroundColor: '#81C9C9',
width : Dimensions.get('window').width * 0.3,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
marginLeft:8}}
onPress={() => this.setState({showC: false})}>
<Text style={{color: '#FFFFFF',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.12}}>OK</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</ImageBackground>
</View>
</View> </View>
</Modal> </Modal>
);
}
else {
return null;
}
}
{/* Modal Wrong*/} showWrong(){
if (this.state.showW === true){
return (
<Modal transparent={true} visible={this.state.showW} animationType="slide"> <Modal transparent={true} visible={this.state.showW} animationType="slide">
<View style={styles.modalbackground}> <View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}>
<View style={styles.viewmodalCW}> <View style={{ marginHorizontal: Dimensions.get('window').width * 0.28,
<ImageBackground source={require('../media/img/wrongAlert.png')} style={styles.imagecw}> width : Dimensions.get('window').width * 0.45,
<Text style={styles.textcw}>Wrong</Text> height : Dimensions.get('window').height * 0.6,
<View style={styles.viewbutton}> marginTop : Dimensions.get('window').width * 0.13,
<TouchableOpacity style={styles.buttonc} onPress={() => this.setState({showW: false})}> alignItems: 'center',
<Text style={styles.buttonok}>OK</Text> backgroundColor:'#FFFBF0',
borderRadius: 16}}>
<Image style={{height:'40%', width:'30%', position:'absolute', left:110, top: -45 }} source={wrongIcon}/>
<Text style={{ fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3B3A39',
paddingTop:Dimensions.get('window').height * 0.17}}>Scale Result</Text>
<Text style={{ fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:30,
color:'#D11427',
paddingTop:Dimensions.get('window').height * 0.02}}>Wrong</Text>
<TouchableOpacity style={{ backgroundColor: '#81C9C9',
width : Dimensions.get('window').width * 0.3,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
marginLeft:8}}
onPress={() => this.setState({showW: false})}>
<Text style={{color: '#FFFFFF',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.12}}>OK</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</ImageBackground>
</View>
</View> </View>
</Modal> </Modal>
);
}
else {
return null;
}
}
{/* Modal Done*/} showDone(){
if (this.state.showDone === true){
return (
<Modal transparent={true} visible={this.state.showDone} animationType="slide"> <Modal transparent={true} visible={this.state.showDone} animationType="slide">
<View style={styles.modalbackground}> <View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}>
<View style={styles.viewmodalD}> <View style={{ marginHorizontal: Dimensions.get('window').width * 0.28,
<ImageBackground source={require('../media/img/doneAlert.png')} style={styles.imagedone}> width : Dimensions.get('window').width * 0.42,
<Text style={styles.textwelldone}>Well Done</Text> height : Dimensions.get('window').height * 0.73,
<Text style={styles.modaltextcorrect}>Correct : {this.state.correct}</Text> marginTop : Dimensions.get('window').width * 0.07,
<Text style={styles.modaltextwrong}>Wrong: {this.state.wrong}</Text> alignItems: 'center',
<View backgroundColor:'#FFFBF0',
style={styles.viewmodalDD}> borderRadius: 16}}>
<TouchableOpacity style={styles.buttonc} onPress={() => this.backAction()}> <Image style={{height:'40%', width:'30%', position:'absolute', left:110, top: -45 }} source={doneIcon}/>
<Text style={styles.buttonok}>OK</Text>
<Text style={{ fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3B3A39',
paddingTop:Dimensions.get('window').height * 0.17}}>Well Done !</Text>
<View style={{borderRadius:16, borderColor:'#E7E7E7', borderWidth:1, backgroundColor:'#FFFBF0', marginTop:'2%', marginLeft:'2%', width:Dimensions.get('window').width * 0.33, marginBottom:'1.5%'}}>
<Text style={{ fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3D9090',
paddingHorizontal:Dimensions.get('window').width * 0.06,
paddingTop:Dimensions.get('window').height * 0.02}}>Scale Result : </Text>
<View style={{flexDirection: 'row', paddingHorizontal:Dimensions.get('window').width * 0.07, paddingVertical:Dimensions.get('window').height * 0.02}}>
<Image style={{height:'65%', width:'14%',marginTop:'3%'}} source={corIcon}/>
<Text style={{color:'#14A76C', fontSize:24, fontFamily:'Gilroy-Bold', textAlign:'left', lineHeight:30, paddingHorizontal:'10%'}}>{this.state.correct}</Text>
<Image style={{height:'65%', width:'14%',marginTop:'3%'}} source={wroIcon}/>
<Text style={{color:'#F94C4C', fontSize:24, fontFamily:'Gilroy-Bold', textAlign:'left', lineHeight:30, paddingHorizontal:'10%'}}>{this.state.wrong}</Text>
</View>
</View>
<TouchableOpacity style={{ backgroundColor: '#81C9C9',
width : Dimensions.get('window').width * 0.33,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
marginLeft:5}}
onPress={() => this.backAction()}>
<Text style={{color: '#FFFFFF',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.14}}>OK</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</ImageBackground>
</View>
</View> </View>
</Modal> </Modal>
);
}
else {
return null;
}
}
render() {
return (
<View style={{flex: 1, backgroundColor:'#81C9C9'}}>
<StatusBar hidden /> <StatusBar hidden />
<View style={styles.c1}> {this.showQuit()}
<View style={styles.cc1}> {this.showCorrect()}
<Text style={styles.wrong}>{this.state.wrong}</Text> {this.showWrong()}
<Text style={styles.correct}>{this.state.correct} / {this.state.maxCount}</Text> {this.showDone()}
<TouchableOpacity style={{backgroundColor:'#E7E7E7', borderColor:'#E7E7E7', borderWidth:1, borderRadius:8, width:Dimensions.get('window').width * 0.22, marginHorizontal:Dimensions.get('window').width * 0.725, marginTop:Dimensions.get('window').height * 0.03}} onPress={this.onSubmit} >
<View style={{flexDirection: 'row'}}>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#848484', paddingVertical:Dimensions.get('window').height * 0.04, paddingHorizontal:Dimensions.get('window').width * 0.035}}>
Attempt 0 / 2
</Text>
</View>
</TouchableOpacity>
<View style={{backgroundColor:'#FFFBF0',flexDirection: 'row', width:Dimensions.get('window').width, height:Dimensions.get('window').height * 0.3, borderTopLeftRadius:8, borderTopRightRadius:8, marginTop:Dimensions.get('window').height * 0.05}}>
<View style={{width:Dimensions.get('window').width * 0.25, marginHorizontal:Dimensions.get('window').width * 0.032, marginTop:'3%', marginBottom:'2%'}}>
<View style={{flexDirection:'row'}}>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'left', lineHeight:20, color:'#EF476F', paddingBottom:'4%'}}>
Question {this.state.correct + this.state.wrong}
</Text>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'left', lineHeight:20, color:'#3B3A39', paddingBottom:'4%', paddingLeft:'2%'}}>
/ {this.state.maxCount}
</Text>
</View>
<View style={{flexDirection:'row'}}>
<Image style={{height:'65%', width:'12%',marginTop:'3%'}} source={corIcon}/>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:24, textAlign:'left', lineHeight:30, color:'#14A76C', paddingHorizontal:'8%'}}>
{this.state.correct}
</Text>
</View>
</View>
<View style={{alignItems:'center',width:Dimensions.get('window').width * 0.32, marginHorizontal:Dimensions.get('window').width * 0.015, marginTop:'2%'}}>
<TouchableOpacity style={{ backgroundColor: '#81C9C9',
width : Dimensions.get('window').width * 0.33,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
}}
onPress={() => this.backAction()}>
<Text style={{color: '#FFFFFF',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.13}}>PLAY</Text>
</TouchableOpacity>
</View>
<View style={{alignItems:'center',width:Dimensions.get('window').width * 0.25, marginHorizontal:Dimensions.get('window').width * 0.045, marginTop:'4%'}}>
<Stopwatch <Stopwatch
secs secs
start={this.state.start} start={this.state.start}
...@@ -542,31 +707,24 @@ class Listen extends React.Component { ...@@ -542,31 +707,24 @@ class Listen extends React.Component {
// Options for the styling // Options for the styling
options={{//timer options={{//timer
container: { container: {
backgroundColor: 'black', backgroundColor: '#FFECDA',
padding: 5, padding: 10,
borderRadius: 10, borderRadius: 8,
borderColor:'white', borderColor:'#FFECDA',
borderWidth:3, borderWidth:2,
width: 200, width:Dimensions.get('window').width * 0.22,
alignItems: 'center', alignItems: 'center',
}, },
text: { text: {
fontSize: 25, fontSize: 16,
color: '#FFF', color: '#3B3A39',
textAlign: 'center', textAlign: 'left',
paddingTop: 5, paddingTop: 5,
lineHeight:20,
alignItems: 'center', alignItems: 'center',
fontFamily: 'sans-serif', fontFamily: 'Gilroy-Bold',
}}}/> }}}/>
</View> <Image style={{height:'27%', width:'13%', position: 'absolute', left:25, top:15}} source={timerIcon}/>
<View>
<View style={styles.submit}>
<Button
title=" PLAY "
color="#E07EF9"
onPress={this.playButton}
/>
</View>
</View> </View>
</View> </View>
<ScrollView style={style.container} <ScrollView style={style.container}
...@@ -578,7 +736,7 @@ class Listen extends React.Component { ...@@ -578,7 +736,7 @@ class Listen extends React.Component {
<View style={style.screen}> <View style={style.screen}>
<View style={{backgroundColor:'white',flexDirection:'row', width: Dimensions.get('screen').width}}> <View style={{backgroundColor:'white',flexDirection:'row', width: Dimensions.get('screen').width}}>
<Text style={{marginVertical:10, marginHorizontal:30,fontFamily:'Gilroy-Light', textAlign: 'center'}}>1 of 4 pages</Text> <Text style={{marginVertical:10, marginHorizontal:30,fontFamily:'Gilroy-Light', textAlign: 'center'}}>1 of 4 pages</Text>
<TouchableOpacity onPress={this.scrollToB} style={{marginRight:config.deviceHeight * 0.8,width: '25%'}}> <TouchableOpacity onPress={this.scrollToB} style={{marginRight:config.deviceHeight * 0.8,width: '25%'}}>
<Text style={style.scrollButtonText}>Next {'>>'}</Text> <Text style={style.scrollButtonText}>Next {'>>'}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
...@@ -722,13 +880,13 @@ class Listen extends React.Component { ...@@ -722,13 +880,13 @@ class Listen extends React.Component {
))} ))}
</View> </View>
</View> </View>
</ScrollView> </ScrollView>
</View> </View>
); );
} }
} }
export default Listen; export default Listen;
const style = StyleSheet.create({ const style = StyleSheet.create({
...@@ -740,22 +898,16 @@ const style = StyleSheet.create({ ...@@ -740,22 +898,16 @@ const style = StyleSheet.create({
width: Dimensions.get('window').height, width: Dimensions.get('window').height,
}, },
screenA: { screenA: {
borderTopColor:'black',
borderTopWidth:8,
width: Dimensions.get('window').height, width: Dimensions.get('window').height,
backgroundColor: '#F7CAC9', backgroundColor: '#F7CAC9',
flexDirection: 'row', flexDirection: 'row',
}, },
screenB: { screenB: {
borderTopColor:'black',
borderTopWidth:8,
width: Dimensions.get('window').height, width: Dimensions.get('window').height,
backgroundColor: '#92A8D1', backgroundColor: '#92A8D1',
flexDirection: 'row', flexDirection: 'row',
}, },
screenC: { screenC: {
borderTopColor:'black',
borderTopWidth:8,
width: Dimensions.get('window').height, width: Dimensions.get('window').height,
backgroundColor: '#88B04B', backgroundColor: '#88B04B',
flexDirection: 'row', flexDirection: 'row',
......
screens/quiz.js
View file @ 581d1a12
...@@ -75,8 +75,6 @@ const quitIcon = require('../media/img/img_qiut.png'); ...@@ -75,8 +75,6 @@ const quitIcon = require('../media/img/img_qiut.png');
const wroIcon = require('../media/img/icon_wrong.png'); const wroIcon = require('../media/img/icon_wrong.png');
const corIcon = require('../media/img/icon_check.png'); const corIcon = require('../media/img/icon_check.png');
const timerIcon = require('../media/img/icon_timer.png'); const timerIcon = require('../media/img/icon_timer.png');
const resetIcon1 = require('../media/img/btn_reset_grey.png');
const resetIcon2 = require('../media/img/btn_reset_orange.png');
const undo1 = require('../media/img/btn_reset_grey.png'); const undo1 = require('../media/img/btn_reset_grey.png');
const undo2 = require('../media/img/btn_reset_orange.png'); const undo2 = require('../media/img/btn_reset_orange.png');
...@@ -103,6 +101,8 @@ class Quiz extends React.Component { ...@@ -103,6 +101,8 @@ class Quiz extends React.Component {
showQuit : false, showQuit : false,
maxCount : 5, maxCount : 5,
records: [], records: [],
click: false,
keyCount: 8,
}; };
} }
...@@ -128,12 +128,21 @@ class Quiz extends React.Component { ...@@ -128,12 +128,21 @@ class Quiz extends React.Component {
let index = -1; let index = -1;
if ((index = keywordsList.indexOf(keyword.name)) !== -1) { if ((index = keywordsList.indexOf(keyword.name)) !== -1) {
list.splice(index, 1); list.splice(index, 1);
this.setState({keyCount: this.state.keyCount + 1});
// console.log(list); // console.log(list);
} else { } else {
list.push(keyword.name); list.push(keyword.name);
this.setState({keyCount: this.state.keyCount - 1});
// console.log(list); // console.log(list);
} }
this.setState({keywordsList: list}); this.setState({keywordsList: list});
if (this.state.keywordsList.length === 0 ){
this.setState({click: false});
}
if (this.state.keywordsList.length > 0 ) {
this.setState({click: true});
}
}; };
onSubmit = () => { onSubmit = () => {
...@@ -183,6 +192,7 @@ class Quiz extends React.Component { ...@@ -183,6 +192,7 @@ class Quiz extends React.Component {
console.log('error'); console.log('error');
console.log(this.state.name); console.log(this.state.name);
} }
this.setState({keyCount: 8});
}; };
ansCMajor = ()=> { ansCMajor = ()=> {
...@@ -830,14 +840,13 @@ class Quiz extends React.Component { ...@@ -830,14 +840,13 @@ class Quiz extends React.Component {
this.setState({ this.setState({
correct: this.state.correct, correct: this.state.correct,
wrong: this.state.wrong, wrong: this.state.wrong,
keyCount:8,
}); });
}; };
render() { clickSubmitButton (){
if (this.state.click === false){
return ( return (
<View style={{flex: 1, backgroundColor:'#81C9C9'}}>
<StatusBar hidden />
<View style={{flexDirection: 'row', width:Dimensions.get('window').width, marginBottom:Dimensions.get('window').height * 0.05}}> <View style={{flexDirection: 'row', width:Dimensions.get('window').width, marginBottom:Dimensions.get('window').height * 0.05}}>
<TouchableOpacity style={{backgroundColor:'#E7E7E7', borderRadius:8, width:Dimensions.get('window').width * 0.22, marginHorizontal:Dimensions.get('window').width * 0.75, marginTop:'3%'}} onPress={this.onSubmit} > <TouchableOpacity style={{backgroundColor:'#E7E7E7', borderRadius:8, width:Dimensions.get('window').width * 0.22, marginHorizontal:Dimensions.get('window').width * 0.75, marginTop:'3%'}} onPress={this.onSubmit} >
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'center', lineHeight:20, color:'#848484', paddingVertical:Dimensions.get('window').height * 0.035}}> <Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'center', lineHeight:20, color:'#848484', paddingVertical:Dimensions.get('window').height * 0.035}}>
...@@ -845,12 +854,287 @@ class Quiz extends React.Component { ...@@ -845,12 +854,287 @@ class Quiz extends React.Component {
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
);
}
else {
return (
<View style={{flexDirection: 'row', width:Dimensions.get('window').width, marginBottom:Dimensions.get('window').height * 0.05}}>
<TouchableOpacity style={{backgroundColor:'#EF476F', borderRadius:8, width:Dimensions.get('window').width * 0.22, marginHorizontal:Dimensions.get('window').width * 0.75, marginTop:'3%'}} onPress={this.onSubmit} >
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'center', lineHeight:20, color:'#FFFBF0', paddingVertical:Dimensions.get('window').height * 0.035}}>
Submit
</Text>
</TouchableOpacity>
</View>
);
}
}
clickResetButton (){
if (this.state.click === false){
return (
<TouchableOpacity style={{backgroundColor:'#E7E7E7', borderColor:'#E7E7E7', borderWidth:1, borderRadius:8, width:Dimensions.get('window').width * 0.22, marginHorizontal:Dimensions.get('window').width * 0.72, marginTop:Dimensions.get('window').height * 0.03}} onPress={this.onSubmit} >
<View style={{flexDirection: 'row'}}>
<Image style={{height:'45%', width:'12%',marginTop:'8%', marginHorizontal:'8%'}} source={undo1}/>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#848484', paddingVertical:Dimensions.get('window').height * 0.04}}>
Undo All Key
</Text>
</View>
</TouchableOpacity>
);
}
else {
return (
<TouchableOpacity style={{backgroundColor:'#FFFBF0', borderColor:'#FC8121', borderWidth:1, borderRadius:8, width:Dimensions.get('window').width * 0.22, marginHorizontal:Dimensions.get('window').width * 0.72, marginTop:Dimensions.get('window').height * 0.03}} onPress={this.onSubmit} >
<View style={{flexDirection: 'row'}}>
<Image style={{height:'45%', width:'12%',marginTop:'8%', marginHorizontal:'8%'}} source={undo2}/>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#FC8121', paddingVertical:Dimensions.get('window').height * 0.04}}>
Undo All Key
</Text>
</View>
</TouchableOpacity>
);
}
}
showQuit (){
if (this.state.showQuit === true){
return (
<Modal transparent={true} visible={this.state.showQuit} animationType="slide">
<View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}>
<View style={{ marginHorizontal: Dimensions.get('window').width * 0.28,
width : Dimensions.get('window').width * 0.45,
height : Dimensions.get('window').height * 0.6,
marginTop : Dimensions.get('window').width * 0.13,
alignItems: 'center',
backgroundColor:'#FFFBF0',
borderRadius: 16}}>
<Image style={{height:'40%', width:'30%', position:'absolute', left:110, top: -45 }} source={quitIcon}/>
<Text style={{ fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:30,
color:'#3B3A39',
paddingTop:Dimensions.get('window').height * 0.17}}>Quit Scale?</Text>
<View
style={{ alignItems: 'center',
flexDirection: 'row',
marginTop:20, justifyContent: 'center'}}>
<TouchableOpacity style={{ backgroundColor: '#FFFFFF',
padding: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
borderColor:'#81C9C9',
borderWidth: 1,
marginRight:8}}
onPress={() => this.setState({showQuit: false})}>
<Text style={{ color: '#81C9C9',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.04}}>NO</Text>
</TouchableOpacity>
<TouchableOpacity style={{ backgroundColor: 'white',
paddingLeft: 18,
paddingRight: 18,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
borderWidth: 1,
borderColor:'#81C9C9',
marginLeft:8}}
onPress={() => this.backAction()}>
<Text style={{color: '#81C9C9',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.03}}>YES</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
);
}
else {
return null;
}
}
showCorrect(){
if (this.state.showC === true){
return (
<Modal transparent={true} visible={this.state.showC} animationType="slide">
<View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}>
<View style={{ marginHorizontal: Dimensions.get('window').width * 0.28,
width : Dimensions.get('window').width * 0.45,
height : Dimensions.get('window').height * 0.6,
marginTop : Dimensions.get('window').width * 0.13,
alignItems: 'center',
backgroundColor:'#FFFBF0',
borderRadius: 16}}>
<Image style={{height:'40%', width:'30%', position:'absolute', left:110, top: -45 }} source={correctIcon}/>
<Text style={{ fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3B3A39',
paddingTop:Dimensions.get('window').height * 0.17}}>Scale Result</Text>
<Text style={{ fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:30,
color:'#14A76C',
paddingTop:Dimensions.get('window').height * 0.02}}>Correct</Text>
<TouchableOpacity style={{ backgroundColor: '#81C9C9',
width : Dimensions.get('window').width * 0.3,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
marginLeft:8}}
onPress={() => this.setState({showC: false})}>
<Text style={{color: '#FFFFFF',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.12}}>OK</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
);
}
else {
return null;
}
}
showWrong(){
if (this.state.showW === true){
return (
<Modal transparent={true} visible={this.state.showW} animationType="slide">
<View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}>
<View style={{ marginHorizontal: Dimensions.get('window').width * 0.28,
width : Dimensions.get('window').width * 0.45,
height : Dimensions.get('window').height * 0.6,
marginTop : Dimensions.get('window').width * 0.13,
alignItems: 'center',
backgroundColor:'#FFFBF0',
borderRadius: 16}}>
<Image style={{height:'40%', width:'30%', position:'absolute', left:110, top: -45 }} source={wrongIcon}/>
<Text style={{ fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3B3A39',
paddingTop:Dimensions.get('window').height * 0.17}}>Scale Result</Text>
<Text style={{ fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:30,
color:'#D11427',
paddingTop:Dimensions.get('window').height * 0.02}}>Wrong</Text>
<TouchableOpacity style={{ backgroundColor: '#81C9C9',
width : Dimensions.get('window').width * 0.3,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
marginLeft:8}}
onPress={() => this.setState({showW: false})}>
<Text style={{color: '#FFFFFF',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.12}}>OK</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
);
}
else {
return null;
}
}
showDone(){
if (this.state.showDone === true){
return (
<Modal transparent={true} visible={this.state.showDone} animationType="slide">
<View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}>
<View style={{ marginHorizontal: Dimensions.get('window').width * 0.28,
width : Dimensions.get('window').width * 0.42,
height : Dimensions.get('window').height * 0.73,
marginTop : Dimensions.get('window').width * 0.07,
alignItems: 'center',
backgroundColor:'#FFFBF0',
borderRadius: 16}}>
<Image style={{height:'40%', width:'30%', position:'absolute', left:110, top: -45 }} source={doneIcon}/>
<Text style={{ fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3B3A39',
paddingTop:Dimensions.get('window').height * 0.17}}>Well Done !</Text>
<View style={{borderRadius:16, borderColor:'#E7E7E7', borderWidth:1, backgroundColor:'#FFFBF0', marginTop:'2%', marginLeft:'2%', width:Dimensions.get('window').width * 0.33, marginBottom:'1.5%'}}>
<Text style={{ fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3D9090',
paddingHorizontal:Dimensions.get('window').width * 0.06,
paddingTop:Dimensions.get('window').height * 0.02}}>Scale Result : </Text>
<View style={{flexDirection: 'row', paddingHorizontal:Dimensions.get('window').width * 0.07, paddingVertical:Dimensions.get('window').height * 0.02}}>
<Image style={{height:'65%', width:'14%',marginTop:'3%'}} source={corIcon}/>
<Text style={{color:'#14A76C', fontSize:24, fontFamily:'Gilroy-Bold', textAlign:'left', lineHeight:30, paddingHorizontal:'10%'}}>{this.state.correct}</Text>
<Image style={{height:'65%', width:'14%',marginTop:'3%'}} source={wroIcon}/>
<Text style={{color:'#F94C4C', fontSize:24, fontFamily:'Gilroy-Bold', textAlign:'left', lineHeight:30, paddingHorizontal:'10%'}}>{this.state.wrong}</Text>
</View>
</View>
<TouchableOpacity style={{ backgroundColor: '#81C9C9',
width : Dimensions.get('window').width * 0.33,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
marginLeft:5}}
onPress={() => this.backAction()}>
<Text style={{color: '#FFFFFF',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.14}}>OK</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
);
}
else {
return null;
}
}
render() {
return (
<View style={{flex: 1, backgroundColor:'#81C9C9'}}>
<StatusBar hidden />
{this.showQuit()}
{this.showCorrect()}
{this.showWrong()}
{this.showDone()}
{this.clickSubmitButton()}
<View style={{backgroundColor:'#FFFBF0',flexDirection: 'row', width:Dimensions.get('window').width, height:Dimensions.get('window').height * 0.4, borderTopLeftRadius:8, borderTopRightRadius:8}}> <View style={{backgroundColor:'#FFFBF0',flexDirection: 'row', width:Dimensions.get('window').width, height:Dimensions.get('window').height * 0.4, borderTopLeftRadius:8, borderTopRightRadius:8}}>
<View style={{width:Dimensions.get('window').width * 0.25, marginHorizontal:Dimensions.get('window').width * 0.03, marginTop:'8%', marginBottom:'2%'}}> <View style={{width:Dimensions.get('window').width * 0.25, marginHorizontal:Dimensions.get('window').width * 0.03, marginTop:'6%', marginBottom:'2%'}}>
<View style={{flexDirection:'row'}}>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'left', lineHeight:20, color:'#EF476F', paddingBottom:'8%'}}> <Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'left', lineHeight:20, color:'#EF476F', paddingBottom:'8%'}}>
Question 100 / 100 Question {this.state.correct + this.state.wrong}
</Text>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'left', lineHeight:20, color:'#3B3A39', paddingBottom:'8%', paddingLeft:'2%'}}>
/ {this.state.maxCount}
</Text> </Text>
</View>
<View style={{flexDirection:'row'}}> <View style={{flexDirection:'row'}}>
<Image style={{height:'65%', width:'12%',marginTop:'3%'}} source={corIcon}/> <Image style={{height:'65%', width:'12%',marginTop:'3%'}} source={corIcon}/>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:24, textAlign:'left', lineHeight:30, color:'#14A76C', paddingHorizontal:'8%'}}> <Text style={{fontFamily:'Gilroy-Bold', fontSize:24, textAlign:'left', lineHeight:30, color:'#14A76C', paddingHorizontal:'8%'}}>
...@@ -858,11 +1142,16 @@ class Quiz extends React.Component { ...@@ -858,11 +1142,16 @@ class Quiz extends React.Component {
</Text> </Text>
</View> </View>
</View> </View>
<View style={{alignItems:'center',width:Dimensions.get('window').width * 0.3, marginHorizontal:Dimensions.get('window').width * 0.04, marginTop:'2%'}}> <View style={{alignItems:'center',width:Dimensions.get('window').width * 0.32, marginHorizontal:Dimensions.get('window').width * 0.03, marginTop:'2%'}}>
<Image style={{height:Dimensions.get('window').height * 0.27, width:Dimensions.get('window').width * 0.18}} source={Notes[indexN].image}/> <Image style={{height:Dimensions.get('window').height * 0.27, width:Dimensions.get('window').width * 0.18}} source={Notes[indexN].image}/>
<View style={{flexDirection: 'row'}}>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#3B3A39'}}> <Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#3B3A39'}}>
Remaining key(s) to select: 7 Remaining key(s) to select:
</Text> </Text>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#3D9090', paddingLeft:'3%'}}>
{this.state.keyCount}
</Text>
</View>
</View> </View>
<View style={{alignItems:'center',width:Dimensions.get('window').width * 0.25, marginHorizontal:Dimensions.get('window').width * 0.045, marginTop:'2.5%'}}> <View style={{alignItems:'center',width:Dimensions.get('window').width * 0.25, marginHorizontal:Dimensions.get('window').width * 0.045, marginTop:'2.5%'}}>
<Stopwatch <Stopwatch
...@@ -893,14 +1182,7 @@ class Quiz extends React.Component { ...@@ -893,14 +1182,7 @@ class Quiz extends React.Component {
fontFamily: 'Gilroy-Bold', fontFamily: 'Gilroy-Bold',
}}}/> }}}/>
<Image style={{height:'18%', width:'13%', position: 'absolute', left:25, top:15}} source={timerIcon}/> <Image style={{height:'18%', width:'13%', position: 'absolute', left:25, top:15}} source={timerIcon}/>
<TouchableOpacity style={{backgroundColor:'#E7E7E7', borderColor:'#E7E7E7', borderWidth:1, borderRadius:8, width:Dimensions.get('window').width * 0.22, marginHorizontal:Dimensions.get('window').width * 0.72, marginTop:'3%'}} onPress={this.onSubmit} > {this.clickResetButton()}
<View style={{flexDirection: 'row'}}>
<Image style={{height:'40%', width:'12%',marginTop:'9%', marginHorizontal:'8%'}} source={undo1}/>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#848484', paddingTop:'8%', paddingBottom:'8%'}}>
Undo All Key
</Text>
</View>
</TouchableOpacity>
</View> </View>
</View> </View>
......
yarn.lock
View file @ 581d1a12
This source diff could not be displayed because it is too large. You can view the blob instead.
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