Skip to content

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

update style

parent 11a4245d
Show whitespace changes
Inline Side-by-side
Showing with 128 additions and 141 deletions
App.js
View file @ a0a9af4c
......@@ -141,12 +141,18 @@ class App extends React.PureComponent {
name="2"
component={Quiz}
options={({navigation}) => ({
//title: 'C Major',
title: 'Scale',
headerTitleStyle: {
fontFamily: 'Gilroy-Bold',
fontSize: 20,
lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.15,
color: '#3B3A39',
},
headerStyle: {
backgroundColor: '#E07EF9',
},
headerTintColor: '#fff',
title: '',
headerTransparent: true,
headerBackImage: () => (
<Icon
......@@ -166,12 +172,18 @@ class App extends React.PureComponent {
name="3"
component={Listen}
options={({navigation}) => ({
//title: 'C Major',
title: 'Listen Skill',
headerStyle: {
backgroundColor: '#E07EF9',
},
headerTitleStyle: {
fontFamily: 'Gilroy-Bold',
fontSize: 30,
lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.15,
color: '#3B3A39',
},
headerTintColor: '#fff',
title: '',
headerTransparent: true,
headerBackImage: () => (
<Icon
......@@ -201,7 +213,6 @@ class App extends React.PureComponent {
fontFamily: 'Gilroy-Bold',
fontSize: 20,
lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.15,
},
headerBackImage: () => (
<Image
......
screens/data.js
View file @ a0a9af4c
......@@ -2,115 +2,115 @@
const notes = [
{
name: 'C Major',
image: require('../media/img/Cmajor.png'),
image: require('../media/img/img_cmajor.png'),
},
{
name: 'D Major',
image: require('../media/img/Dmajor.png'),
image: require('../media/img/img_dmajor.png'),
},
{
name: 'E Major',
image: require('../media/img/Emajor.png'),
image: require('../media/img/img_emajor.png'),
},
{
name: 'F Sharp Major',
image: require('../media/img/Fsmajor.png'),
image: require('../media/img/img_fsharpmajor.png'),
},
{
name: 'F Major',
image: require('../media/img/Fmajor.png'),
image: require('../media/img/img_fmajor.png'),
},
{
name: 'E Flat Major',
image: require('../media/img/Eflatmajor.png'),
image: require('../media/img/img_eflatmajor.png'),
},
{
name: 'D Flat Major',
image: require('../media/img/Dflatmajor.png'),
image: require('../media/img/img_dflatmajor.png'),
},
{
name: 'G Major',
image: require('../media/img/Gmajor.png'),
image: require('../media/img/img_gmajor.png'),
},
{
name: 'A Major',
image: require('../media/img/Amajor.png'),
image: require('../media/img/img_amajor.png'),
},
{
name: 'B Major',
image: require('../media/img/Bmajor.png'),
image: require('../media/img/img_bmajor.png'),
},
{
name: 'C Sharp Major',
image: require('../media/img/Csmajor.png'),
image: require('../media/img/img_csharpmajor.png'),
},
{
name: 'B Flat Major',
image: require('../media/img/Bflatmajor.png'),
image: require('../media/img/img_bflatmajor.png'),
},
{
name: 'A Flat Major',
image: require('../media/img/Aflatmajor.png'),
image: require('../media/img/img_aflatmajor.png'),
},
{
name: 'G Flat Major',
image: require('../media/img/Gflatmajor.png'),
image: require('../media/img/img_gflatmajor.png'),
},
{
name: 'Bass Clef C Major',
image: require('../media/img/bass_cmajor.png'),
image: require('../media/img/img_bass_cmajor.png'),
},
{
name: 'Bass Clef D Major',
image: require('../media/img/bass_dmajor.png'),
image: require('../media/img/img_bass_dmajor.png'),
},
{
name: 'Bass Clef E Major',
image: require('../media/img/bass_emajor.png'),
image: require('../media/img/img_bass_emajor.png'),
},
{
name: 'Bass Clef F Sharp Major',
image: require('../media/img/bass_fsmajor.png'),
image: require('../media/img/img_bass_fsmajor.png'),
},
{
name: 'Bass Clef F Major',
image: require('../media/img/bass_fmajor.png'),
image: require('../media/img/img_bass_fmajor.png'),
},
{
name: 'Bass Clef E Flat Major',
image: require('../media/img/bass_eflat.png'),
image: require('../media/img/img_bass_eflat.png'),
},
{
name: 'Bass Clef D Flat Major',
image: require('../media/img/bass_dflat.png'),
image: require('../media/img/img_bass_dflat.png'),
},
{
name: 'Bass Clef G Major',
image: require('../media/img/bass_gmajor.png'),
image: require('../media/img/img_bass_gmajor.png'),
},
{
name: 'Bass Clef A Major',
image: require('../media/img/bass_amajor.png'),
image: require('../media/img/img_bass_amajor.png'),
},
{
name: 'Bass Clef B Major',
image: require('../media/img/bass_bmajor.png'),
image: require('../media/img/img_bass_bmajor.png'),
},
{
name: 'Bass Clef C Sharp Major',
image: require('../media/img/bass_csmajor.png'),
image: require('../media/img/img_bass_csmajor.png'),
},
{
name: 'Bass Clef B Flat Major',
image: require('../media/img/bass_bflat.png'),
image: require('../media/img/img_bass_bflat.png'),
},
{
name: 'Bass Clef A Flat Major',
image: require('../media/img/bass_aflat.png'),
image: require('../media/img/img_bass_aflat.png'),
},
{
name: 'Bass Clef G Flat Major',
image: require('../media/img/bass_gflat.png'),
image: require('../media/img/img_bass_gflat.png'),
},
];
......
screens/listening.js
View file @ a0a9af4c
......@@ -67,6 +67,16 @@ const NOTESBLACK = [{name: 'A#0', left: 0.053},
const keywordsList = [];
const corSound = require('../media/sound/correct.mp3');
const wroSound = require('../media/sound/wrong.mp3');
const correctIcon = require('../media/img/img_smile.png');
const wrongIcon = require('../media/img/img_sad.png');
const doneIcon = require('../media/img/img_achieve.png');
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 rightIcon = require('../media/img/btn_right.png');
const leftIcon = require('../media/img/btn_left.png');
const playIcon = require('../media/img/btn_play.png');
const keySound = Listennotes;
var soundN = '';
......
screens/quiz.js
View file @ a0a9af4c
......@@ -68,6 +68,17 @@ const NOTESBLACK = [
const keywordsList = [];
const corSound = require('../media/sound/correct.mp3');
const wroSound = require('../media/sound/wrong.mp3');
const correctIcon = require('../media/img/img_smile.png');
const wrongIcon = require('../media/img/img_sad.png');
const doneIcon = require('../media/img/img_achieve.png');
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');
var imageN = '';
var indexN = 0;
......@@ -720,7 +731,7 @@ class Quiz extends React.Component {
maxCount : ccc,
});
indexN = Notes.findIndex(item=> item.name === this.state.name);
// console.log(this.state.name);
console.log(this.state.name);
})
.catch((err) => {
console.log(err.message, err.code);
......@@ -730,7 +741,7 @@ class Quiz extends React.Component {
name : this.state.logbook[imageN],
maxCount : 10,
});
// console.log(this.state.name);
console.log(this.state.name);
indexN = Notes.findIndex(item=> item.name === this.state.name);
// console.log(indexN);
});
......@@ -745,6 +756,8 @@ class Quiz extends React.Component {
name : Notes[indexN].name,
maxCount : res,
});
console.log(this.state.name);
//console.log(res);
})
.catch(() => {
......@@ -756,6 +769,8 @@ class Quiz extends React.Component {
name : Notes[indexN].name,
maxCount : 5,
});
console.log(this.state.name);
});
}
} catch (error) {
......@@ -821,84 +836,35 @@ class Quiz extends React.Component {
render() {
return (
<View style={{flex: 1, backgroundColor:'#81C9C9'}}>
<StatusBar hidden />
{/* 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>
<View
style={styles.viewmodalQQ}>
<TouchableOpacity style={styles.buttonyes}
onPress={() => this.backAction()}>
<Text style={styles.textqq}>YES</Text>
<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>
<TouchableOpacity style={styles.buttonno}
onPress={() => this.setState({showQuit: false})}>
<Text style={styles.textqq}>NO</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
{/* 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>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</View>
</Modal>
{/* 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>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</View>
</Modal>
{/* 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>
</TouchableOpacity>
<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%'}}>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'left', lineHeight:20, color:'#EF476F', paddingBottom:'8%'}}>
Question 100 / 100
</Text>
<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>
</ImageBackground>
</View>
<View style={{alignItems:'center',width:Dimensions.get('window').width * 0.3, marginHorizontal:Dimensions.get('window').width * 0.04, 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>
</Modal>
<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>
<View style={{alignItems:'center',width:Dimensions.get('window').width * 0.25, marginHorizontal:Dimensions.get('window').width * 0.045, marginTop:'2.5%'}}>
<Stopwatch
secs
start={this.state.start}
......@@ -909,54 +875,51 @@ class Quiz extends React.Component {
// Options for the styling
options={{//timer
container: {
backgroundColor: 'black',
padding: 5,
borderRadius: 10,
borderColor:'white',
borderWidth:3,
width: 200,
backgroundColor: '#FFECDA',
padding: 10,
borderRadius: 8,
borderColor:'#FFECDA',
borderWidth:2,
width:Dimensions.get('window').width * 0.22,
alignItems: 'center',
},
text: {
fontSize: 25,
color: '#FFF',
textAlign: 'center',
fontSize: 16,
color: '#3B3A39',
textAlign: 'left',
paddingTop: 5,
lineHeight:20,
alignItems: 'center',
fontFamily: 'sans-serif',
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>
<View style={styles.buttonView}>
<View style={styles.submit}>
<Button
title="RESET "
color="#E07EF9"
onPress={this.removeArray}
/>
</View>
<View style={styles.submit}>
<Button title="SUBMIT" color="#E07EF9" onPress={this.onSubmit} />
</View>
</TouchableOpacity>
</View>
<Image style={styles.logo} source={Notes[indexN].image} />
</View>
<View style={{borderWidth:5, borderColor:'black'}}/>
<View style={styles.c2}>
<View style={{flexDirection: 'row', height: Dimensions.get('window').height * 0.4}}>
{NOTESWHITE.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? { width: Dimensions.get('window').width / NOTESWHITE.length,
alignItems: 'center',
backgroundColor: '#EEA1E1',
borderRightWidth: 1,
borderColor: 'black',
backgroundColor: '#FCE1FF',
borderWidth: 0.5,
borderColor: '#707070',
borderBottomWidth: 1}
: { width: Dimensions.get('window').width / NOTESWHITE.length,
borderWidth: 0.5,
borderColor: '#707070',
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1}
}
onPress={() => this.toggleKeyword(item)}
......@@ -977,7 +940,9 @@ class Quiz extends React.Component {
</TouchableHighlight>
))}
</View>
</View>
);
}
}
......
style/styleQuiz.js
View file @ a0a9af4c
......@@ -180,9 +180,6 @@ export default StyleSheet.create({
logo: {
height: config.deviceWidth * 0.22,
width: config.deviceHeight * 0.5,
borderColor: 'black',
borderWidth: 3,
borderRadius: 10,
position: 'absolute',
marginTop: config.deviceWidth * 0.11,
backgroundColor:'white',
......@@ -271,7 +268,7 @@ export default StyleSheet.create({
selectedKeywordStyle: {
width: config.deviceWidth * 0.075,
alignItems: 'center',
backgroundColor: '#EEA1E1',
backgroundColor: '#FCE1FF',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
......@@ -283,10 +280,14 @@ export default StyleSheet.create({
height: '55%',
width: '5%',
position: 'absolute',
borderWidth: 0.5,
borderColor: '#707070',
},
SbuttonB1: {
alignItems: 'center',
backgroundColor: '#92ddea',
backgroundColor: '#FCE1FF',
borderWidth: 0.5,
borderColor: '#707070',
height: '55%',
width: '5%',
position: 'absolute',
......
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