Skip to content

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

restyling

parent a0a9af4c
Hide whitespace changes
Inline Side-by-side
Showing with 737 additions and 302 deletions
App.js
View file @ 581d1a12
......@@ -173,16 +173,16 @@ class App extends React.PureComponent {
component={Listen}
options={({navigation}) => ({
title: 'Listen Skill',
headerStyle: {
backgroundColor: '#E07EF9',
},
headerTitleStyle: {
fontFamily: 'Gilroy-Bold',
fontSize: 30,
fontSize: 20,
lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.15,
color: '#3B3A39',
},
headerStyle: {
backgroundColor: '#E07EF9',
},
headerTintColor: '#fff',
headerTransparent: true,
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 @@
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/preset-flow": "^7.13.13",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
......
screens/listening.js
View file @ 581d1a12
......@@ -429,306 +429,464 @@ class Listen extends React.Component {
};
render() {
const movingMargin = this.anim.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [0, 290, 1],
});
showQuit (){
if (this.state.showQuit === true){
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 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}/>
{/* Modal Quit the Scale*/}
<Modal transparent={true} visible={this.state.showQuit} animationType="slide">
<View style={styles.modalbackground}>
<View style={styles.viewmodalQ}>
<Text style={styles.textquit}>Quit?</Text>
<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={styles.viewmodalQQ}>
<TouchableOpacity style={styles.buttonyes}
onPress={() => this.backAction()}>
<Text style={styles.textqq}>YES</Text>
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={styles.buttonno}
onPress={() => this.setState({showQuit: false})}>
<Text style={styles.textqq}>NO</Text>
<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;
}
}
{/* Modal Correct*/}
<Modal transparent={true} visible={this.state.showC} animationType="slide">
<View style={styles.modalbackground}>
<View style={styles.viewmodalCW}>
<ImageBackground source={require('../media/img/correctAlert.png')} style={styles.imagecw}>
<Text style={styles.textcw}>Correct</Text>
<View style={styles.viewbutton}>
<TouchableOpacity style={styles.buttonc} onPress={() => this.setState({showC: false})}>
<Text style={styles.buttonok}>OK</Text>
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>
</ImageBackground>
</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>
{/* Modal Wrong*/}
<Modal transparent={true} visible={this.state.showW} animationType="slide">
<View style={styles.modalbackground}>
<View style={styles.viewmodalCW}>
<ImageBackground source={require('../media/img/wrongAlert.png')} style={styles.imagecw}>
<Text style={styles.textcw}>Wrong</Text>
<View style={styles.viewbutton}>
<TouchableOpacity style={styles.buttonc} onPress={() => this.setState({showW: false})}>
<Text style={styles.buttonok}>OK</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>
</ImageBackground>
</View>
</View>
</Modal>
);
}
else {
return null;
}
}
{/* Modal Done*/}
<Modal transparent={true} visible={this.state.showDone} animationType="slide">
<View style={styles.modalbackground}>
<View style={styles.viewmodalD}>
<ImageBackground source={require('../media/img/doneAlert.png')} style={styles.imagedone}>
<Text style={styles.textwelldone}>Well Done</Text>
<Text style={styles.modaltextcorrect}>Correct : {this.state.correct}</Text>
<Text style={styles.modaltextwrong}>Wrong: {this.state.wrong}</Text>
<View
style={styles.viewmodalDD}>
<TouchableOpacity style={styles.buttonc} onPress={() => this.backAction()}>
<Text style={styles.buttonok}>OK</Text>
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>
</ImageBackground>
</View>
</View>
</Modal>
);
}
else {
return null;
}
}
<StatusBar hidden />
<View style={styles.c1}>
<View style={styles.cc1}>
<Text style={styles.wrong}>{this.state.wrong}</Text>
<Text style={styles.correct}>{this.state.correct} / {this.state.maxCount}</Text>
<Stopwatch
secs
start={this.state.start}
getTime={(tt) => {
//console.log(tt);
stime = tt;
}}
// Options for the styling
options={{//timer
container: {
backgroundColor: 'black',
padding: 5,
borderRadius: 10,
borderColor:'white',
borderWidth:3,
width: 200,
alignItems: 'center',
},
text: {
fontSize: 25,
color: '#FFF',
textAlign: 'center',
paddingTop: 5,
alignItems: 'center',
fontFamily: 'sans-serif',
}}}/>
render() {
return (
<View style={{flex: 1, backgroundColor:'#81C9C9'}}>
<StatusBar hidden />
{this.showQuit()}
{this.showCorrect()}
{this.showWrong()}
{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>
<View>
<View style={styles.submit}>
<Button
title=" PLAY "
color="#E07EF9"
onPress={this.playButton}
/>
</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>
<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
secs
start={this.state.start}
getTime={(tt) => {
//console.log(tt);
stime = tt;
}}
// Options for the styling
options={{//timer
container: {
backgroundColor: '#FFECDA',
padding: 10,
borderRadius: 8,
borderColor:'#FFECDA',
borderWidth:2,
width:Dimensions.get('window').width * 0.22,
alignItems: 'center',
},
text: {
fontSize: 16,
color: '#3B3A39',
textAlign: 'left',
paddingTop: 5,
lineHeight:20,
alignItems: 'center',
fontFamily: 'Gilroy-Bold',
}}}/>
<Image style={{height:'27%', width:'13%', position: 'absolute', left:25, top:15}} source={timerIcon}/>
</View>
</View>
<ScrollView style={style.container}
horizontal={true}
scrollEnabled={true}
showsHorizontalScrollIndicator={false}
ref={(scroller) => {this.scroller = scroller;}}>
<View style={style.screen}>
<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>
<TouchableOpacity onPress={this.scrollToB} style={{marginRight:config.deviceHeight * 0.8,width: '25%'}}>
<Text style={style.scrollButtonText}>Next {'>>'}</Text>
</TouchableOpacity>
</View>
<View style={style.screenA}>
{NOTESWHITE.slice(0, 13).map((item,id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? style.selectedKeywordStyle
: style.buttonStyle
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight>
))}
{NOTESBLACK.slice(0,8).map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</View>
</View>
horizontal={true}
scrollEnabled={true}
showsHorizontalScrollIndicator={false}
ref={(scroller) => {this.scroller = scroller;}}>
<View style={style.screen}>
<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>
<TouchableOpacity onPress={this.scrollToB} style={{marginRight:config.deviceHeight * 0.8,width: '25%'}}>
<Text style={style.scrollButtonText}>Next {'>>'}</Text>
</TouchableOpacity>
</View>
<View style={style.screenA}>
{NOTESWHITE.slice(0, 13).map((item,id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? style.selectedKeywordStyle
: style.buttonStyle
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight>
))}
{NOTESBLACK.slice(0,8).map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</View>
</View>
<View style={style.screen}>
<View style={{backgroundColor:'white',flexDirection:'row', width: Dimensions.get('screen').width}}>
<TouchableOpacity onPress={this.scrollToStart} style={{width: '25%'}}>
<Text style={style.scrollButtonText}> {'<<'}Back</Text>
</TouchableOpacity>
<Text style={{marginVertical:10,marginHorizontal:30,fontFamily:'Gilroy-Light', textAlign: 'center'}}>2 of 4 pages</Text>
<TouchableOpacity onPress={this.scrollToC} style={{marginRight:config.deviceHeight * 0.8,width: '25%'}}>
<Text style={style.scrollButtonText}>Next {'>>'}</Text>
</TouchableOpacity>
</View>
<View style={style.screenB}>
{NOTESWHITE.slice(13, 26).map((item,id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? style.selectedKeywordStyle
: style.buttonStyle
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight>
))}
{NOTESBLACK.slice(8,18).map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</View>
</View>
<View style={style.screen}>
<View style={{backgroundColor:'white',flexDirection:'row', width: Dimensions.get('screen').width}}>
<TouchableOpacity onPress={this.scrollToStart} style={{width: '25%'}}>
<Text style={style.scrollButtonText}> {'<<'}Back</Text>
</TouchableOpacity>
<Text style={{marginVertical:10,marginHorizontal:30,fontFamily:'Gilroy-Light', textAlign: 'center'}}>2 of 4 pages</Text>
<TouchableOpacity onPress={this.scrollToC} style={{marginRight:config.deviceHeight * 0.8,width: '25%'}}>
<Text style={style.scrollButtonText}>Next {'>>'}</Text>
</TouchableOpacity>
</View>
<View style={style.screenB}>
{NOTESWHITE.slice(13, 26).map((item,id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? style.selectedKeywordStyle
: style.buttonStyle
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight>
))}
{NOTESBLACK.slice(8,18).map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</View>
</View>
<View style={style.screen}>
<View style={{backgroundColor:'white',flexDirection:'row', width: Dimensions.get('screen').width}}>
<TouchableOpacity onPress={this.scrollToB} style={{width: '25%'}}>
<Text style={style.scrollButtonText}>{'<<'}Back</Text>
</TouchableOpacity>
<Text style={{marginVertical:10,marginHorizontal:30,fontFamily:'Gilroy-Light', textAlign: 'center'}}>3 of 4 pages</Text>
<TouchableOpacity onPress={this.scrollToD} style={{marginRight:config.deviceHeight * 0.8, width: '25%'}}>
<Text style={style.scrollButtonText}>Next{'>>'}</Text>
</TouchableOpacity>
</View>
<View style={style.screenC}>
{NOTESWHITE.slice(26, 39).map((item,id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? style.selectedKeywordStyle
: style.buttonStyle
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight>
))}
{NOTESBLACK.slice(18, 27).map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</View>
</View>
<View style={style.screen}>
<View style={{backgroundColor:'white',flexDirection:'row', width: Dimensions.get('screen').width}}>
<TouchableOpacity onPress={this.scrollToC} style={{width: '25%'}}>
<Text style={style.scrollButtonText}>{'<<'}Back</Text>
</TouchableOpacity>
<Text style={{marginVertical:10,marginHorizontal:30,fontFamily:'Gilroy-Light', textAlign: 'center'}}>4 of 4 pages</Text>
</View>
<View style={style.screenC}>
{NOTESWHITE.slice(39, 52).map((item,id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? style.selectedKeywordStyle
: style.buttonStyle
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight>
))}
{NOTESBLACK.slice(27, 36).map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</View>
</View>
</ScrollView>
</View>
);
}
}
<View style={{backgroundColor:'white',flexDirection:'row', width: Dimensions.get('screen').width}}>
<TouchableOpacity onPress={this.scrollToB} style={{width: '25%'}}>
<Text style={style.scrollButtonText}>{'<<'}Back</Text>
</TouchableOpacity>
<Text style={{marginVertical:10,marginHorizontal:30,fontFamily:'Gilroy-Light', textAlign: 'center'}}>3 of 4 pages</Text>
<TouchableOpacity onPress={this.scrollToD} style={{marginRight:config.deviceHeight * 0.8, width: '25%'}}>
<Text style={style.scrollButtonText}>Next{'>>'}</Text>
</TouchableOpacity>
</View>
<View style={style.screenC}>
{NOTESWHITE.slice(26, 39).map((item,id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? style.selectedKeywordStyle
: style.buttonStyle
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight>
))}
{NOTESBLACK.slice(18, 27).map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</View>
</View>
<View style={style.screen}>
<View style={{backgroundColor:'white',flexDirection:'row', width: Dimensions.get('screen').width}}>
<TouchableOpacity onPress={this.scrollToC} style={{width: '25%'}}>
<Text style={style.scrollButtonText}>{'<<'}Back</Text>
</TouchableOpacity>
<Text style={{marginVertical:10,marginHorizontal:30,fontFamily:'Gilroy-Light', textAlign: 'center'}}>4 of 4 pages</Text>
</View>
<View style={style.screenC}>
{NOTESWHITE.slice(39, 52).map((item,id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? style.selectedKeywordStyle
: style.buttonStyle
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight>
))}
{NOTESBLACK.slice(27, 36).map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</View>
</View>
</ScrollView>
</View>
);
}
}
export default Listen;
const style = StyleSheet.create({
......@@ -740,22 +898,16 @@ const style = StyleSheet.create({
width: Dimensions.get('window').height,
},
screenA: {
borderTopColor:'black',
borderTopWidth:8,
width: Dimensions.get('window').height,
backgroundColor: '#F7CAC9',
flexDirection: 'row',
},
screenB: {
borderTopColor:'black',
borderTopWidth:8,
width: Dimensions.get('window').height,
backgroundColor: '#92A8D1',
flexDirection: 'row',
},
screenC: {
borderTopColor:'black',
borderTopWidth:8,
width: Dimensions.get('window').height,
backgroundColor: '#88B04B',
flexDirection: 'row',
......
screens/quiz.js
View file @ 581d1a12
......@@ -75,8 +75,6 @@ const quitIcon = require('../media/img/img_qiut.png');
const wroIcon = require('../media/img/icon_wrong.png');
const corIcon = require('../media/img/icon_check.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 undo2 = require('../media/img/btn_reset_orange.png');
......@@ -103,6 +101,8 @@ class Quiz extends React.Component {
showQuit : false,
maxCount : 5,
records: [],
click: false,
keyCount: 8,
};
}
......@@ -128,12 +128,21 @@ class Quiz extends React.Component {
let index = -1;
if ((index = keywordsList.indexOf(keyword.name)) !== -1) {
list.splice(index, 1);
this.setState({keyCount: this.state.keyCount + 1});
// console.log(list);
} else {
list.push(keyword.name);
this.setState({keyCount: this.state.keyCount - 1});
// console.log(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 = () => {
......@@ -183,6 +192,7 @@ class Quiz extends React.Component {
console.log('error');
console.log(this.state.name);
}
this.setState({keyCount: 8});
};
ansCMajor = ()=> {
......@@ -830,27 +840,301 @@ class Quiz extends React.Component {
this.setState({
correct: this.state.correct,
wrong: this.state.wrong,
keyCount:8,
});
};
render() {
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}}>
clickSubmitButton (){
if (this.state.click === false){
return (
<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} >
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'center', lineHeight:20, color:'#848484', paddingVertical:Dimensions.get('window').height * 0.035}}>
Submit
</Text>
</TouchableOpacity>
</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={{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%'}}>
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>
</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%'}}>
......@@ -858,11 +1142,16 @@ class Quiz extends React.Component {
</Text>
</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}/>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#3B3A39'}}>
Remaining key(s) to select: 7
</Text>
<View style={{flexDirection: 'row'}}>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#3B3A39'}}>
Remaining key(s) to select:
</Text>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#3D9090', paddingLeft:'3%'}}>
{this.state.keyCount}
</Text>
</View>
</View>
<View style={{alignItems:'center',width:Dimensions.get('window').width * 0.25, marginHorizontal:Dimensions.get('window').width * 0.045, marginTop:'2.5%'}}>
<Stopwatch
......@@ -893,14 +1182,7 @@ class Quiz extends React.Component {
fontFamily: 'Gilroy-Bold',
}}}/>
<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} >
<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>
{this.clickResetButton()}
</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