Skip to content

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

updating ...

parent 368e1766
Hide whitespace changes
Inline Side-by-side
Showing with 1576 additions and 887 deletions
App.js
View file @ 7dc85d5e
......@@ -5,6 +5,7 @@ import {createStackNavigator} from '@react-navigation/stack';
import {Icon} from 'react-native-elements';
import Settings from './screens/settings';
import Listen from './screens/listening';
import LogBook from './screens/logbook';
import Home from './screens/home';
import Quiz from './screens/quiz';
......@@ -72,6 +73,31 @@ class App extends React.PureComponent {
/>
<Stack.Screen
name="3"
component={Listen}
options={({navigation}) => ({
//title: 'C Major',
headerStyle: {
backgroundColor: '#E07EF9',
},
headerTintColor: '#fff',
title: '',
headerTransparent: true,
headerBackImage: () => (
<Icon
name="chevron-left"
type="font-awesome"
size={26}
color="black"
onPress={() => {
navigation.navigate('1');
Orientation.lockToPortrait();
}}
/>
),
})}
/>
<Stack.Screen
name="4"
component={LogBook}
options={{
title: 'Records',
......@@ -87,7 +113,7 @@ class App extends React.PureComponent {
}}
/>
<Stack.Screen
name="4"
name="5"
component={Settings}
options={{
title: 'Settings ',
......
android/app/build.gradle
View file @ 7dc85d5e
......@@ -207,6 +207,19 @@ dependencies {
} else {
implementation jscFlavor
}
// If your app supports Android versions before Ice Cream Sandwich (API level 14)
implementation 'com.facebook.fresco:animated-base-support:1.3.0'
// For animated GIF support
implementation 'com.facebook.fresco:animated-gif:2.0.0'
// For WebP support, including animated WebP
implementation 'com.facebook.fresco:animated-webp:2.1.0'
implementation 'com.facebook.fresco:webpsupport:2.0.0'
// For WebP support, without animations
implementation 'com.facebook.fresco:webpsupport:2.0.0'
}
// Run this once to be able to run the application with BUCK
......
screens/home.js
View file @ 7dc85d5e
/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {
SafeAreaView,
......@@ -7,61 +6,80 @@ import {
Text,
View,
TouchableOpacity,
StyleSheet,
ScrollView,
Image,
BackHandler,
} from 'react-native';
import {Icon} from 'react-native-elements';
//import {Icon} from 'react-native-elements';
import Orientation from 'react-native-orientation';
import styles from '../style/styleHome';
const exitApp = () => BackHandler.exitApp();
class Home extends React.PureComponent {
async componentDidMount() {
async componentDidMount() {
Orientation.lockToPortrait();
BackHandler.addEventListener('hardwareBackPress', exitApp);
// Orientation.lockAsync(Orientation.OrientationLock.PORTRAIT_UP);
// Orientation.lockAsync(Orientation.OrientationLock.PORTRAIT_UP);
}
componentWillUnmount() {
Orientation.lockToPortrait();
BackHandler.removeEventListener('hardwareBackPress', exitApp);
Orientation.lockToPortrait();
BackHandler.removeEventListener('hardwareBackPress', exitApp);
// Orientation.lockAsync(Orientation.OrientationLock.PORTRAIT_UP);
}
render() {
return (
<View style={styles.container}>
<ImageBackground
source={require('../img/background.jpg')}
style={{
width: '100%',
height: '100%',
}}>
style={styles.imagebackground}>
<SafeAreaView>
<ScrollView>
<View style={{marginTop: '15%', marginBottom: '5%'}}>
<View style={styles.viewmenu}>
<TouchableOpacity
style={styles.menu}
onPress={() => {
this.props.navigation.navigate('2',{c: 0, w: 0, t: 0, cc : 1});
this.props.navigation.navigate('2', {
c: 0,
w: 0,
t: 0,
cc: 1,
});
}}>
<Image style={{height:150, width:250}} source={require('../img/1piano.png')} />
<Text style={{fontSize:20}}>{'\n'}Piano</Text>
<Image
style={styles.image1}
source={require('../img/1piano.png')}
/>
<Text style={styles.textmenu}>{'\n'}Scale</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.menu}
onPress={() => this.props.navigation.navigate('3')}>
<Icon size={150} name="clipboard" type="font-awesome" />
<Text style={{fontSize:20}}>{'\n'}Records</Text>
<Image
style={styles.image2}
source={require('../img/listening.png')}
/>
<Text style={styles.textmenu}>{'\n'}Listen Skill</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.menu}
onPress={() => this.props.navigation.navigate('4')}>
<Image style={{height:150, width:150}} source={require('../img/settings.png')} />
<Text style={{fontSize:20}}>{'\n'}Settings</Text>
<Image
style={styles.image2}
source={require('../img/records.png')}
/>
<Text style={styles.textmenu}>{'\n'}Records</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.menu}
onPress={() => this.props.navigation.navigate('5')}>
<Image
style={styles.image2}
source={require('../img/settings.png')}
/>
<Text style={styles.textmenu}>{'\n'}Settings</Text>
</TouchableOpacity>
</View>
</ScrollView>
......@@ -73,23 +91,3 @@ class Home extends React.PureComponent {
}
export default Home;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
menu: {
marginBottom: '2%',
alignItems: 'center',
justifyContent: 'center',
padding: '10%',
marginLeft: '3%',
marginRight: '3%',
borderRadius: 10,
borderWidth: 5,
borderColor: 'black',
backgroundColor: 'white',
},
});
screens/listenData.js 0 → 100644
View file @ 7dc85d5e
/* eslint-disable prettier/prettier */
const listennotes = [
{name: 'A0', url: require('../sound/white/w__a.mp3')},
{name: 'B0', url: require('../sound/white/w__b.mp3')},
{name: 'C1', url: require('../sound/white/w_c.mp3')},
{name: 'D1', url: require('../sound/white/w_d.mp3')},
{name: 'E1', url: require('../sound/white/w_e.mp3')},
{name: 'F1', url: require('../sound/white/w_f.mp3')},
{name: 'G1', url: require('../sound/white/w_g.mp3')},
{name: 'A1', url: require('../sound/white/w_a.mp3')},
{name: 'B1', url: require('../sound/white/w_b.mp3')},
{name: 'C2', url: require('../sound/white/w_cc.mp3')},
{name: 'D2', url: require('../sound/white/w_dd.mp3')},
{name: 'E2', url: require('../sound/white/w_ee.mp3')},
{name: 'F2', url: require('../sound/white/w_ff.mp3')},
{name: 'G2', url: require('../sound/white/w_gg.mp3')},
{name: 'A2', url: require('../sound/white/w_aa.mp3')},
{name: 'B2', url: require('../sound/white/w_bb.mp3')},
{name: 'C3', url: require('../sound/white/w_ccc.mp3')},
{name: 'D3', url: require('../sound/white/w_ddd.mp3')},
{name: 'E3', url: require('../sound/white/w_eee.mp3')},
{name: 'F3', url: require('../sound/white/w_fff.mp3')},
{name: 'G3', url: require('../sound/white/w_ggg.mp3')},
{name: 'A3', url: require('../sound/white/w_aaa.mp3')},
{name: 'B3', url: require('../sound/white/w_bbb.mp3')},
{name: 'C4', url: require('../sound/white/w_cccc.mp3')},
{name: 'D4', url: require('../sound/white/w_dddd.mp3')},
{name: 'E4', url: require('../sound/white/w_eeee.mp3')},
{name: 'F4', url: require('../sound/white/w_ffff.mp3')},
{name: 'G4', url: require('../sound/white/w_gggg.mp3')},
{name: 'A4', url: require('../sound/white/w_aaaa.mp3')},
{name: 'B4', url: require('../sound/white/w_bbbb.mp3')},
{name: 'C5', url: require('../sound/white/w_ccccc.mp3')},
{name: 'D5', url: require('../sound/white/w_ddddd.mp3')},
{name: 'E5', url: require('../sound/white/w_eeeee.mp3')},
{name: 'F5', url: require('../sound/white/w_fffff.mp3')},
{name: 'G5', url: require('../sound/white/w_ggggg.mp3')},
{name: 'A5', url: require('../sound/white/w_aaaaa.mp3')},
{name: 'B5', url: require('../sound/white/w_bbbbb.mp3')},
{name: 'C6', url: require('../sound/white/w_cccccc.mp3')},
{name: 'D6', url: require('../sound/white/w_dddddd.mp3')},
{name: 'E6', url: require('../sound/white/w_eeeeee.mp3')},
{name: 'F6', url: require('../sound/white/w_ffffff.mp3')},
{name: 'G6', url: require('../sound/white/w_gggggg.mp3')},
{name: 'A6', url: require('../sound/white/w_aaaaaa.mp3')},
{name: 'B6', url: require('../sound/white/w_bbbbbb.mp3')},
{name: 'C7', url: require('../sound/white/w_ccccccc.mp3')},
{name: 'D7', url: require('../sound/white/w_ddddddd.mp3')},
{name: 'E7', url: require('../sound/white/w_eeeeeee.mp3')},
{name: 'F7', url: require('../sound/white/w_fffffff.mp3')},
{name: 'G7', url: require('../sound/white/w_ggggggg.mp3')},
{name: 'A7', url: require('../sound/white/w_aaaaaaa.mp3')},
{name: 'B7', url: require('../sound/white/w_bbbbbbb.mp3')},
{name: 'C8', url: require('../sound/white/w_cccccccc.mp3')},
{name: 'A#0', url: require('../sound/black/b__a.mp3')},
{name: 'C#1', url: require('../sound/black/b_c.mp3')},
{name: 'D#1', url: require('../sound/black/b_d.mp3')},
{name: 'F#1', url: require('../sound/black/b_f.mp3')},
{name: 'G#1', url: require('../sound/black/b_g.mp3')},
{name: 'A#1', url: require('../sound/black/b_a.mp3')},
{name: 'C#2', url: require('../sound/black/b_cc.mp3')},
{name: 'D#2', url: require('../sound/black/b_dd.mp3')},
{name: 'F#2', url: require('../sound/black/b_ff.mp3')},
{name: 'G#2', url: require('../sound/black/b_gg.mp3')},
{name: 'A#2', url: require('../sound/black/b_aa.mp3')},
{name: 'C#3', url: require('../sound/black/b_ccc.mp3')},
{name: 'D#3', url: require('../sound/black/b_ddd.mp3')},
{name: 'F#3', url: require('../sound/black/b_fff.mp3')},
{name: 'G#3', url: require('../sound/black/b_ggg.mp3')},
{name: 'A#3', url: require('../sound/black/b_aaa.mp3')},
{name: 'C#4', url: require('../sound/black/b_cccc.mp3')},
{name: 'D#4', url: require('../sound/black/b_dddd.mp3')},
{name: 'F#4', url: require('../sound/black/b_ffff.mp3')},
{name: 'G#4', url: require('../sound/black/b_gggg.mp3')},
{name: 'A#4', url: require('../sound/black/b_aaaa.mp3')},
{name: 'C#5', url: require('../sound/black/b_ccccc.mp3')},
{name: 'D#5', url: require('../sound/black/b_ddddd.mp3')},
{name: 'F#5', url: require('../sound/black/b_fffff.mp3')},
{name: 'G#5', url: require('../sound/black/b_ggggg.mp3')},
{name: 'A#5', url: require('../sound/black/b_aaaaa.mp3')},
{name: 'C#6', url: require('../sound/black/b_cccccc.mp3')},
{name: 'D#6', url: require('../sound/black/b_dddddd.mp3')},
{name: 'F#6', url: require('../sound/black/b_ffffff.mp3')},
{name: 'G#6', url: require('../sound/black/b_gggggg.mp3')},
{name: 'A#6', url: require('../sound/black/b_aaaaaa.mp3')},
{name: 'C#7', url: require('../sound/black/b_ccccccc.mp3')},
{name: 'D#7', url: require('../sound/black/b_ddddddd.mp3')},
{name: 'F#7', url: require('../sound/black/b_fffffff.mp3')},
{name: 'G#7', url: require('../sound/black/b_ggggggg.mp3')},
{name: 'A#7', url: require('../sound/black/b_aaaaaaa.mp3')},
];
export default listennotes;
screens/listening.js 0 → 100644
View file @ 7dc85d5e
/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
/* eslint-disable prettier/prettier */
import React from 'react';
import {
ImageBackground,
Text,
View,
StatusBar,
TouchableHighlight,
Button,
//Image,
//Alert,
Modal,
TouchableOpacity,
Dimensions,
BackHandler,
ScrollView,
StyleSheet,
} from 'react-native';
import {Stopwatch} from 'react-native-stopwatch-timer';
import Orientation from 'react-native-orientation';
//import * as RNFS from 'react-native-fs';
import Listennotes from './listenData';
//import OtherClass from './saveRecords';
import Sound from 'react-native-sound';
//import moment from 'moment';
//import AsyncStorage from '@react-native-async-storage/async-storage';
const config = {
deviceWidth: Dimensions.get('window').height,
deviceHeight: Dimensions.get('window').width,
};
//const date = moment().utcOffset('+08:00').format('D MMM');
//const time = moment().utcOffset('+08:00').format('h:mm a');
//const day = moment().utcOffset('+08:00').format('ddd');
const NOTESWHITE = [{name: 'A0'},{name: 'B0'},
{name: 'C1'},{name: 'D1'},{name: 'E1'},{name: 'F1'},{name: 'G1'},{name: 'A1'},{name: 'B1'},
{name: 'C2'},{name: 'D2'},{name: 'E2'},{name: 'F2'},{name: 'G2'},{name: 'A2'},{name: 'B2'},
{name: 'C3'},{name: 'D3'},{name: 'E3'},{name: 'F3'},{name: 'G3'},{name: 'A3'},{name: 'B3'},
{name: 'C4'},{name: 'D4'},{name: 'E4'},{name: 'F4'},{name: 'G4'},{name: 'A4'},{name: 'B4'},
{name: 'C5'},{name: 'D5'},{name: 'E5'},{name: 'F5'},{name: 'G5'},{name: 'A5'},{name: 'B5'},
{name: 'C6'},{name: 'D6'},{name: 'E6'},{name: 'F6'},{name: 'G6'},{name: 'A6'},{name: 'B6'},
{name: 'C7'},{name: 'D7'},{name: 'E7'},{name: 'F7'},{name: 'G7'},{name: 'A7'},{name: 'B7'},
{name: 'C8'},
];
const NOTESBLACK = [{name: 'A#0', left: 0.046},
{name: 'C#1',left: 0.195},{name: 'D#1',left: 0.27},{name: 'F#1',left: 0.42},{name: 'G#1',left: 0.496},{name: 'A#1',left: 0.57},
{name: 'C#2',left: 0.72},{name: 'D#2',left: 0.795},{name: 'F#2',left: 0.945},{name: 'G#2',left: 1.02},{name: 'A#2',left: 1.095},
{name: 'C#3',left: 1.245},{name: 'D#3',left: 1.32},{name: 'F#3',left: 1.47},{name: 'G#3',left: 1.545},{name: 'A#3',left: 1.62},
{name: 'C#4',left: 1.77},{name: 'D#4',left: 1.845},{name: 'F#4',left: 1.995},{name: 'G#4',left: 2.07},{name: 'A#4',left: 2.145},
{name: 'C#5',left: 2.295},{name: 'D#5',left: 2.37},{name: 'F#5',left: 2.52},{name: 'G#5',left: 2.595},{name: 'A#5',left: 2.67},
{name: 'C#6',left: 2.82},{name: 'D#6',left: 2.899},{name: 'F#6',left: 3.045},{name: 'G#6',left: 3.12},{name: 'A#6',left: 3.197},
{name: 'C#7',left: 3.345},{name: 'D#7',left: 3.42},{name: 'F#7',left: 3.57},{name: 'G#7',left: 3.645},{name: 'A#7',left: 3.72},
];
const keywordsList = [];
const corSound = require('../sound/correct.mp3');
const wroSound = require('../sound/wrong.mp3');
const keySound = Listennotes;
var soundN = '';
var indexS = 0;
var stime = 0;
//var records = [];
class Listen extends React.Component {
constructor(props) {
super(props);
Sound.setCategory('Playback'); // true = mixWithOthers
this.state = {
logbook: [],
index:0,
correct: 0,
wrong: 0,
keywordsList: '',
count: 1,
name : '',
start : true,
showC : false,
showW : false,
showDone : false,
showQuit : false,
maxCount : 5,
records: [],
};
}
toggleKeyword = (keyword) => {
console.log(keyword);
//indexS = Listennotes.findIndex(item=> item.name === keyword);
console.log(Listennotes[soundN].name);
if (keyword === Listennotes[soundN].name) {
this.correctAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
}
else {
this.setState({correct : this.state.correct + 1, count:this.state.count + 1, showC: true});
this.randomSound();
}
} else {
this.wrongAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
}
else {
this.setState({showW: true});
this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1});
this.randomSound();
}
}
};
homeExit = async () => {
this.setState({showQuit: true});
};
playButton = () => {
console.log('play');
console.log(soundN);
console.log(Listennotes[soundN]);
this.setState({name : Listennotes[soundN].name});
var playSound = new Sound(keySound[soundN].url, (error) => {
if (error) {
console.log('failed to load the sound', error);
return;
}
// loaded successfully
playSound.play((success) => {
if (success) {
// console.log('successfully finished playing');
} else {
// console.log('playback failed due to audio decoding errors');
playSound.release();
}
});
});
};
replayButton = () => {
console.log('replay');
console.log(soundN);
var playSound = new Sound(keySound[soundN].url, (error) => {
if (error) {
console.log('failed to load the sound', error);
return;
}
// loaded successfully
playSound.play((success) => {
if (success) {
// console.log('successfully finished playing');
} else {
// console.log('playback failed due to audio decoding errors');
playSound.release();
}
});
});
};
reset = () => {
this.setState({count:1});
};
backAction = () => {
this.setState({showDone: false, showQuit: false});
this.props.navigation.navigate('1');
Orientation.lockToPortrait();
};
correctAlert = () => {
var corrSound = new Sound(corSound, (error) => {
if (error) {
console.log('failed to load the sound', error);
return;
}
// loaded successfully
corrSound.play((success) => {
if (success) {
// console.log('successfully finished playing');
} else {
// console.log('playback failed due to audio decoding errors');
corrSound.release();
}
});
});
};
wrongAlert = () => {
var wrongSound = new Sound(wroSound, (error) => {
if (error) {
console.log('failed to load the sound', error);
return;
}
// loaded successfully
wrongSound.play((success) => {
if (success) {
// console.log('successfully finished playing');
} else {
// console.log('playback failed due to audio decoding errors');
wrongSound.release();
}
});
});
};
randomSound = () =>{
soundN = Math.floor(Math.random() * keySound.length);
};
componentDidMount() {
//this.removeArray();
BackHandler.addEventListener('hardwareBackPress', this.homeExit);
Orientation.lockToLandscape();
this.randomSound();
this.reset();
}
componentWillUnmount() {
//this.removeArray();
BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
//clearInterval(this.interval);
// Orientation.lockToLandscape();
}
';';
render() {
return (
<View style={styles.container}>
<ImageBackground
source={require('../img/background.jpg')}
style={{
width: '100%',
height: '100%',
}}>
<Modal transparent={true} visible={this.state.showQuit} animationType="slide">
<View style={{backgroundColor: '#000000aa', flex: 1}}>
<View
style={{
marginLeft: Dimensions.get('window').width * 0.35,
width : Dimensions.get('window').width * 0.4,
height : Dimensions.get('window').height * 0.4,
marginTop : Dimensions.get('window').height * 0.25,
alignItems: 'center',
backgroundColor:'white',
borderRadius: 10,
borderColor: 'black',
borderWidth: 5,
}}>
<Text style={{fontSize: 25,textAlign: 'center', marginTop: 5, color:'black'}}>Quit?</Text>
<View
style={{
alignItems: 'center',
flexDirection: 'row',
marginTop:15,
}}>
<TouchableOpacity style={{
backgroundColor: 'white',
padding: 15,
borderRadius: 10,
marginTop:10,
marginBottom:10,
borderTopColor:'black',
borderRightColor:'black',
borderWidth: 3,
marginRight:5,
}}
onPress={() => this.backAction()}>
<Text style={{color: 'black'}}>YES</Text>
</TouchableOpacity>
<TouchableOpacity style={{
backgroundColor: 'white',
paddingLeft: 18,
paddingRight: 18,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 10,
marginTop:10,
marginBottom:10,
borderWidth: 3,
borderTopColor:'black',
marginLeft:5,
}}
onPress={() => this.setState({showQuit: false})}>
<Text style={{color: 'black'}}>NO</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
<Modal transparent={true} visible={this.state.showC} animationType="slide">
<View style={{backgroundColor: '#000000aa', flex: 1}}>
<View
style={{
marginLeft: Dimensions.get('window').width * 0.25,
width : Dimensions.get('window').width * 0.4,
alignItems: 'center',
}}>
<ImageBackground
source={require('../img/correctAlert.png')}
style={{
width: '130%',
height: '95%',
}}>
<Text style={{fontSize: 25,textAlign: 'center', marginTop:Dimensions.get('window').height * 0.43, marginLeft:120, color:'white'}}>Correct</Text>
<View
style={{
alignItems: 'center',
marginLeft:120,
}}>
<TouchableOpacity style={{
backgroundColor: 'white',
borderColor: 'black',
padding: 15,
borderRadius: 5,
marginTop:10,
marginBottom:10,
}}
onPress={() => this.setState({showC: false})}>
<Text style={{color: 'black'}}>OK</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</View>
</Modal>
<Modal transparent={true} visible={this.state.showW} animationType="slide">
<View style={{backgroundColor: '#000000aa', flex: 1}}>
<View
style={{
marginLeft: Dimensions.get('window').width * 0.25,
width : Dimensions.get('window').width * 0.4,
alignItems: 'center',
}}>
<ImageBackground
source={require('../img/wrongAlert.png')}
style={{
width: '130%',
height: '95%',
}}>
<Text style={{fontSize: 25,fontFamily: 'sans-serif', textAlign: 'center', marginTop:Dimensions.get('window').height * 0.43, marginLeft:120, color:'white'}}>Wrong</Text>
<Text style={{fontSize: 15,fontFamily: 'sans-serif', textAlign: 'center', marginLeft:120, color:'white'}}>Answer: {this.state.name}</Text>
<View
style={{
alignItems: 'center',
marginLeft:120,
}}>
<TouchableOpacity style={{
backgroundColor: 'white',
borderColor: 'black',
padding: 15,
borderRadius: 5,
marginTop:10,
marginBottom:10,
}}
onPress={() => this.setState({showW: false})}>
<Text style={{color: 'black',fontFamily: 'sans-serif'}}>OK</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</View>
</Modal>
<Modal transparent={true} visible={this.state.showDone} animationType="slide">
<View style={{backgroundColor: '#000000aa', flex: 1}}>
<View
style={{
marginLeft: Dimensions.get('window').width * 0.3,
width : Dimensions.get('window').width * 0.4,
alignItems: 'center',
}}>
<ImageBackground
source={require('../img/doneAlert.png')}
style={{
width: '120%',
height: '98%',
}}>
<Text style={{fontSize: 25,fontFamily: 'sans-serif', textAlign: 'center', marginTop:Dimensions.get('window').height * 0.42, marginLeft:65, color:'white'}}>Well Done</Text>
<Text style={{fontSize: 15, fontFamily: 'sans-serif', marginLeft:65, textAlign: 'center', color: 'green'}}>Correct : {this.state.correct}</Text>
<Text style={{fontSize: 15, fontFamily: 'sans-serif', marginLeft:65, textAlign: 'center', color:'red'}}>Wrong: {this.state.wrong}</Text>
<View
style={{
alignItems: 'center',
marginLeft:70,
}}>
<TouchableOpacity style={{
backgroundColor: 'white',
borderColor: 'black',
padding: 15,
borderRadius: 5,
marginTop:5,
marginBottom:10,
}}
onPress={() => this.backAction()}>
<Text style={{color: 'black', fontFamily: 'sans-serif'}}>OK</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</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>
<Stopwatch
secs
start={this.state.start}
getTime={(tt) => {
//console.log(tt);
stime = tt;
}}
options={{ 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',
},
}}
// Options for the styling
/>
</View>
<View>
<View style={styles.submit}>
<Button
title=" PLAY "
color="#E07EF9"
onPress={this.playButton}
/>
</View>
</View>
</View>
<View style={{borderWidth:5, borderColor:'black'}}/>
<ScrollView
horizontal={true}
style={{
flexDirection: 'row',
}}
showsHorizontalScrollIndicator={false}>
{NOTESWHITE.map((item,id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? styles.selectedKeywordStyle
: styles.buttonStyle
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight>
))}
{NOTESBLACK.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? [styles.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [styles.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</ScrollView>
</ImageBackground>
</View>
);
}
}
export default Listen;
const styles = StyleSheet.create({
c1: {
height: '55%',
alignItems: 'center',
borderColor: 'black',
marginTop:5,
},
cc1: {
flexDirection: 'row',
marginLeft: 5,
},
t: {
fontSize: 25,
fontFamily: 'sans-serif',
},
c2: {
flexDirection: 'row',
height: '35%',
},
t1: {
color: 'black',
paddingTop: 120,
},
button: {
flex: 7,
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
b1: {
marginBottom: 25,
width: 200,
height: 50,
borderRadius: 15,
alignItems: 'center',
backgroundColor: 'purple',
},
buttonText: {
textAlign: 'center',
paddingTop: 15,
color: 'white',
fontSize: 15,
fontFamily: 'sans-serif',
},
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',
},
correct: {
width: 100,
textAlign: 'center',
paddingTop: 15,
color: 'white',
height: 60,
borderRadius: 10,
alignItems: 'center',
fontSize: 25,
marginRight: 10,
backgroundColor:'green',
borderColor:'white',
borderWidth: 2,
fontFamily: 'sans-serif',
},
wrong: {
width: 100,
height: 60,
borderRadius: 10,
borderColor:'white',
alignItems: 'center',
textAlign: 'center',
paddingTop: 15,
color: 'white',
fontSize: 25,
marginRight: 10,
backgroundColor:'red',
borderWidth: 2,
fontFamily: 'sans-serif',
},
timer: {
width: 65,
height: 60,
borderRadius: 10,
borderColor:'white',
alignItems: 'center',
textAlign: 'center',
paddingTop: 16,
color: 'white',
fontSize: 25,
backgroundColor:'black',
borderWidth: 2,
fontFamily: 'sans-serif',
},
submit: {
width: '40%',
marginTop: config.deviceWidth * 0.055,
borderColor:'white',
borderWidth: 2,
borderRadius: 5,
},
viewMain: {
width: '20%',
alignContent: 'flex-end',
marginLeft: 180,
marginTop: '173%',
position: 'absolute',
},
container: {
flex: 1,
},
textStyle: {
fontSize: 16,
padding: 8,
paddingTop:100,
textAlign: 'center',
fontFamily: 'sans-serif',
},
textStyleB: {
fontSize: 16,
padding: 8,
paddingTop:5,
textAlign: 'center',
color:'white',
fontFamily: 'sans-serif',
},
buttonView: {
flexDirection: 'column',
marginLeft: config.deviceHeight * 1.0,
},
buttonStyle: {
width: config.deviceWidth * 0.075,
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
selectedKeywordStyle: {
width: config.deviceWidth * 0.075,
alignItems: 'center',
backgroundColor: '#EEA1E1',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
buttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
width: '1.5%',
position: 'absolute',
},
SbuttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
marginLeft: config.deviceWidth * 0.048,
width: '1.5%',
position: 'absolute',
},
});
screens/logbook.js
View file @ 7dc85d5e
/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {
SafeAreaView,
ImageBackground,
Text,
View,
//TouchableOpacity,
StyleSheet,
ScrollView,
// Alert,
BackHandler,
BackHandler,
} from 'react-native';
import styles from '../style/styleLogbook';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Orientation from 'react-native-orientation';
......@@ -23,20 +20,18 @@ class LogBook extends React.PureComponent {
};
}
displayData = async () => {
try {
const value = await AsyncStorage.getItem('@storage_key');
// console.log(JSON.parse(value));
if (value !== null) {
// We have data!!
// console.log(JSON.parse(value));
this.setState({ logbook: JSON.parse(value)});
console.log(this.state.logbook);
}
} catch (error) {
// Error retrieving data
}
} catch (error) {
// Error retrieving data
}
};
componentDidMount() {
......@@ -45,7 +40,7 @@ class LogBook extends React.PureComponent {
this.displayData();
}
homeExit = async () => {
homeExit = async () => {
this.props.navigation.navigate('1');
BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
//Orientation.lockToPortrait();
......@@ -56,42 +51,29 @@ class LogBook extends React.PureComponent {
<View style={styles.container}>
<ImageBackground
source={require('../img/background.jpg')}
style={{
width: '100%',
height: '100%',
}}>
style={styles.imagebackground}>
<SafeAreaView>
<ScrollView
style={{
marginTop: 50,
}}>
style={styles.scroll}>
{this.state.logbook && this.state.logbook.map((item, id) => (
<View
key ={id}
style={{
flexDirection: 'row',
paddingLeft: 15,
paddingRight: 15,
paddingBottom:10,
paddingTop:5,
backgroundColor: 'white',
borderBottomWidth:1,
}}>
<View style={{alignItems: 'center',marginRight:8}}>
style={styles.view1}>
<View style={styles.datedays}>
<View>
<Text style={{color:'black', fontSize: 40,textAlign: 'center'}}>{(item.date !== undefined) ? item.date.split(' ')[0].trim() : ''}</Text>
<Text style={{color:'black', fontSize: 15, textAlign: 'center'}}>{(item.date !== undefined) ? item.date.split(' ')[1].trim() : ''}</Text>
<Text style={styles.textdate1}>{(item.date !== undefined) ? item.date.split(' ')[0].trim() : ''}</Text>
<Text style={styles.textdate2}>{(item.date !== undefined) ? item.date.split(' ')[1].trim() : ''}</Text>
</View>
<View>
<Text style={{color:'black', fontSize: 15, textAlign: 'center'}}>{item.day}</Text>
<Text style={styles.textday}>{item.day}</Text>
</View>
</View>
<View style={{borderWidth:1, borderColor : 'gray'}}/>
<View style={{flexDirection: 'column',marginLeft:5,marginTop:10}}>
<Text style={{color:'green', fontSize: 15}}>Correct:{item.correct}</Text>
<Text style={{color:'red', fontSize: 15}}>Wrong: {item.wrong}</Text>
<Text style={{color:'black', fontSize: 15}}>Timer: {item.timer}</Text>
<Text style={{color:'black', fontSize: 15}}>Time: {item.time}</Text>
<View style={styles.border}/>
<View style={styles.details}>
<Text style={styles.textcorrect}>Correct:{item.correct}</Text>
<Text style={styles.textwrong}>Wrong: {item.wrong}</Text>
<Text style={styles.texttime}>Timer: {item.timer}</Text>
<Text style={styles.texttime}>Time: {item.time}</Text>
</View>
</View>
)).reverse()}
......@@ -104,23 +86,4 @@ class LogBook extends React.PureComponent {
}
export default LogBook;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#9001f5',
},
menu: {
marginTop: '3%',
marginBottom: '2%',
alignItems: 'center',
justifyContent: 'center',
padding: '15%',
marginLeft: '5%',
marginRight: '5%',
borderRadius: 10,
borderWidth: 2,
borderColor: 'white',
},
});
screens/notesData.js 0 → 100644
View file @ 7dc85d5e
/* eslint-disable prettier/prettier */
const notesData = [
'C Major',
'D Major',
'E Major',
'F Sharp Major',
'F Major',
'E Flat Major',
'D Flat Major',
'G Major',
'A Major',
'B Major',
'C Sharp Major',
'B Flat Major',
'A Flat Major',
'G Flat Major',
'Bass Clef C Major',
'Bass Clef D Major',
'Bass Clef E Major',
'Bass Clef F Sharp Major',
'Bass Clef F Major',
'Bass Clef E Flat Major',
'Bass Clef D Flat Major',
'Bass Clef G Major',
'Bass Clef A Major',
'Bass Clef B Major',
'Bass Clef C Sharp Major',
'Bass Clef B Flat Major',
'Bass Clef A Flat Major',
'Bass Clef G Flat Major',
];
export default notesData;
screens/quiz.js
View file @ 7dc85d5e
......@@ -11,26 +11,24 @@ import {
TouchableHighlight,
Button,
Image,
Alert,
// Alert,
Modal,
TouchableOpacity,
Dimensions,
BackHandler,
} from 'react-native';
import {Stopwatch} from 'react-native-stopwatch-timer';
import Orientation from 'react-native-orientation';
import * as RNFS from 'react-native-fs';
import Notes from './data';
import styles from '../style/style';
//import OtherClass from './saveRecords';
import styles from '../style/styleQuiz';
import config from '../style/config';
import Sound from 'react-native-sound';
import moment from 'moment';
import AsyncStorage from '@react-native-async-storage/async-storage';
const date = moment().utcOffset('+08:00').format('D MMM');
const time = moment().utcOffset('+08:00').format('h:mm a');
const day = moment().utcOffset('+08:00').format('ddd');
//const path = RNFS.DocumentDirectoryPath + '/settings.txt';
const path1 = RNFS.DocumentDirectoryPath + '/counter.txt';
const NOTESWHITE = [
{name: 'C1', url: require('../sound/c.mp3')},
......@@ -48,26 +46,29 @@ const NOTESWHITE = [
{name: 'A2', url: require('../sound/aa.mp3')},
{name: 'B2', url: require('../sound/bb.mp3')},
];
const NOTESCC = [{name: 'C#1', url: require('../sound/c_c.mp3')}];
const NOTESDD = [{name: 'D#1', url: require('../sound/d_d.mp3')}];
const NOTESFF = [{name: 'F#1', url: require('../sound/f_f.mp3')}];
const NOTESGG = [{name: 'G#1', url: require('../sound/g_g.mp3')}];
const NOTESAA = [{name: 'A#1', url: require('../sound/a_a.mp3')}];
const NOTESCC1 = [{name: 'C#2', url: require('../sound/c_cc.mp3')}];
const NOTESDD1 = [{name: 'D#2', url: require('../sound/d_dd.mp3')}];
const NOTESFF1 = [{name: 'F#2', url: require('../sound/f_ff.mp3')}];
const NOTESGG1 = [{name: 'G#2', url: require('../sound/g_gg.mp3')}];
const NOTESAA1 = [{name: 'A#2', url: require('../sound/a_aa.mp3')}];
const NOTESBLACK = [
{name: 'C#1', url: require('../sound/c_c.mp3'), left:0.048},
{name: 'D#1', url: require('../sound/d_d.mp3'),left:0.123},
{name: 'D#1', url: require('../sound/d_d.mp3'),left:0.275},
{name: 'F#1', url: require('../sound/f_f.mp3'),left:0.348},
{name: 'G#1', url: require('../sound/g_g.mp3'), left:0.423},
{name: 'A#1', url: require('../sound/a_a.mp3'), left:0.575},
{name: 'C#2', url: require('../sound/c_cc.mp3'), left:0.65},
{name: 'D#2', url: require('../sound/d_dd.mp3'), left:0.798},
{name: 'F#2', url: require('../sound/f_ff.mp3'), left:0.872},
{name: 'G#2', url: require('../sound/g_gg.mp3'), left:0.95},
{name: 'A#2', url: require('../sound/a_aa.mp3'), left:0.575},
];
const keywordsList = [];
const corSound = require('../sound/correct.mp3');
const wroSound = require('../sound/wrong.mp3');
var imageN = '';
var indexN = 0;
var stime = 0;
//var records = [];
class Quiz extends React.Component {
constructor(props) {
constructor(props) {
super(props);
Sound.setCategory('Playback'); // true = mixWithOthers
this.state = {
......@@ -88,7 +89,7 @@ class Quiz extends React.Component {
};
}
toggleKeyword = (keyword) => {
toggleKeyword = (keyword) => {
var sound = new Sound(keyword.url, (error) => {
if (error) {
console.log('failed to load the sound', error);
......@@ -117,7 +118,7 @@ class Quiz extends React.Component {
this.setState({keywordsList: list});
};
onSubmit = () => {
onSubmit = () => {
if (this.state.name.includes('C Major') || this.state.name.includes('Bass Clef C Major')) {
this.ansCMajor();
}
......@@ -168,6 +169,7 @@ class Quiz extends React.Component {
ansCMajor = ()=> {
if (keywordsList.toString() === 'C1,D1,E1,F1,G1,A1,B1,C2'){
this.correctAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
......@@ -181,6 +183,7 @@ class Quiz extends React.Component {
this.displayData();
}
} else {
this.wrongAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
......@@ -189,16 +192,16 @@ class Quiz extends React.Component {
// this.backAction();
}
else {
this.setState({showW: true});
keywordsList.splice(0, keywordsList.length);
this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1});
this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1, showW: true});
this.displayData();
}
}
};
ansDMajor = () => {
ansDMajor = () => {
if (keywordsList.toString() === 'D1,E1,F#1,G1,A1,B1,C#2,D2') {
this.correctAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
......@@ -212,6 +215,7 @@ class Quiz extends React.Component {
this.displayData();
}
} else {
this.wrongAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
......@@ -230,6 +234,7 @@ class Quiz extends React.Component {
ansEMajor = () => {
if (keywordsList.toString() === 'E1,F#1,G#1,A1,B1,C#2,D#2,E2') {
this.correctAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
......@@ -243,6 +248,7 @@ class Quiz extends React.Component {
this.displayData();
}
} else {
this.wrongAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
......@@ -261,6 +267,7 @@ class Quiz extends React.Component {
ansFsMajor = () => {
if (keywordsList.toString() === 'F#1,G#1,A#1,B1,C#2,D#2,F2,F#2') {
this.correctAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
......@@ -274,6 +281,7 @@ class Quiz extends React.Component {
this.displayData();
}
} else {
this.wrongAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
......@@ -292,6 +300,7 @@ class Quiz extends React.Component {
ansFMajor = () => {
if (keywordsList.toString() === 'F1,G1,A1,A#1,C2,D2,E2,F2') {
this.correctAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
......@@ -305,6 +314,7 @@ class Quiz extends React.Component {
this.displayData();
}
} else {
this.wrongAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
......@@ -323,6 +333,7 @@ class Quiz extends React.Component {
ansEbMajor = () => {
if (keywordsList.toString() === 'D#1,F1,G1,G#1,A#1,C2,D2,D#2') {
this.correctAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
......@@ -336,6 +347,7 @@ class Quiz extends React.Component {
this.displayData();
}
} else {
this.wrongAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
......@@ -354,6 +366,7 @@ class Quiz extends React.Component {
ansDbMajor = () => {
if (keywordsList.toString() === 'C#1,D#1,F1,F#1,G#1,A#1,C2,C#2') {
this.correctAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
......@@ -367,6 +380,7 @@ class Quiz extends React.Component {
this.displayData();
}
} else {
this.wrongAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
......@@ -385,6 +399,7 @@ class Quiz extends React.Component {
ansGMajor = () => {
if (keywordsList.toString() === 'G1,A1,B1,C2,D2,E2,F#2,G2') {
this.correctAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
......@@ -398,6 +413,7 @@ class Quiz extends React.Component {
this.displayData();
}
} else {
this.wrongAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
......@@ -416,6 +432,7 @@ class Quiz extends React.Component {
ansAMajor = () => {
if (keywordsList.toString() === 'A1,B1,C#2,D2,E2,F#2,G#2,A2') {
this.correctAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
......@@ -429,6 +446,7 @@ class Quiz extends React.Component {
this.displayData();
}
} else {
this.wrongAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
......@@ -447,6 +465,7 @@ class Quiz extends React.Component {
ansBMajor = () => {
if (keywordsList.toString() === 'B1,C#2,D#2,E2,F#2,G#2,A#2,B2') {
this.correctAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
......@@ -460,6 +479,7 @@ class Quiz extends React.Component {
this.displayData();
}
} else {
this.wrongAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
......@@ -478,6 +498,7 @@ class Quiz extends React.Component {
ansCsMajor = () => {
if (keywordsList.toString() === 'C#1,D#1,F1,F#1,G#1,A#1,C2,C#2') {
this.correctAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
......@@ -491,6 +512,7 @@ class Quiz extends React.Component {
this.displayData();
}
} else {
this.wrongAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
......@@ -509,6 +531,7 @@ class Quiz extends React.Component {
ansBbMajor = () => {
if (keywordsList.toString() === 'A#1,C2,D2,D#2,F2,G2,A2,A#2') {
this.correctAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
......@@ -522,6 +545,7 @@ class Quiz extends React.Component {
this.displayData();
}
} else {
this.wrongAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
......@@ -540,6 +564,7 @@ class Quiz extends React.Component {
ansAbMajor = () => {
if (keywordsList.toString() === 'G#1,A#1,C2,C#2,D#2,F2,G2,G#2') {
this.correctAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
......@@ -553,6 +578,7 @@ class Quiz extends React.Component {
this.displayData();
}
} else {
this.wrongAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
......@@ -571,6 +597,7 @@ class Quiz extends React.Component {
ansGbMajor = () => {
if (keywordsList.toString() === 'F#1,G#1,A#1,B1,C#2,D#2,F2,F#2') {
this.correctAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
......@@ -584,6 +611,7 @@ class Quiz extends React.Component {
this.displayData();
}
} else {
this.wrongAlert();
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
......@@ -611,6 +639,42 @@ class Quiz extends React.Component {
Orientation.lockToPortrait();
};
correctAlert = () => {
var corrSound = new Sound(corSound, (error) => {
if (error) {
console.log('failed to load the sound', error);
return;
}
// loaded successfully
corrSound.play((success) => {
if (success) {
// console.log('successfully finished playing');
} else {
// console.log('playback failed due to audio decoding errors');
corrSound.release();
}
});
});
};
wrongAlert = () => {
var wrongSound = new Sound(wroSound, (error) => {
if (error) {
console.log('failed to load the sound', error);
return;
}
// loaded successfully
wrongSound.play((success) => {
if (success) {
// console.log('successfully finished playing');
} else {
// console.log('playback failed due to audio decoding errors');
wrongSound.release();
}
});
});
};
componentDidMount() {
//this.removeArray();
BackHandler.addEventListener('hardwareBackPress', this.homeExit);
......@@ -746,130 +810,41 @@ this.setState({records: []});
};
render() {
const {
selectedKeywordStyle,
buttonStyle,
textStyle,
buttonB1,
buttonB2,
buttonB3,
buttonB4,
buttonB5,
SbuttonB1,
SbuttonB2,
SbuttonB3,
SbuttonB4,
SbuttonB5,
buttonB11,
buttonB21,
buttonB31,
buttonB41,
buttonB51,
SbuttonB11,
SbuttonB21,
SbuttonB31,
SbuttonB41,
SbuttonB51,
} = styles;
return (
<View style={styles.container}>
<ImageBackground
source={require('../img/background.jpg')}
style={{
width: '100%',
height: '100%',
}}>
style={styles.imagebackground}>
<Modal transparent={true} visible={this.state.showQuit} animationType="slide">
<View style={{backgroundColor: '#000000aa', flex: 1}}>
<View
style={{
marginLeft: Dimensions.get('window').width * 0.35,
width : Dimensions.get('window').width * 0.4,
height : Dimensions.get('window').height * 0.4,
marginTop : Dimensions.get('window').height * 0.25,
alignItems: 'center',
backgroundColor:'white',
borderRadius: 10,
borderColor: 'black',
borderWidth: 5,
}}>
<Text style={{fontSize: 25,textAlign: 'center', marginTop: 5, color:'black'}}>Quit?</Text>
{/* 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={{
alignItems: 'center',
flexDirection: 'row',
marginTop:15,
}}>
<TouchableOpacity style={{
backgroundColor: 'white',
padding: 15,
borderRadius: 10,
marginTop:10,
marginBottom:10,
borderTopColor:'black',
borderRightColor:'black',
borderWidth: 3,
marginRight:5,
}}
style={styles.viewmodalQQ}>
<TouchableOpacity style={styles.buttonyes}
onPress={() => this.backAction()}>
<Text style={{color: 'black'}}>YES</Text>
<Text style={styles.textqq}>YES</Text>
</TouchableOpacity>
<TouchableOpacity style={{
backgroundColor: 'white',
paddingLeft: 18,
paddingRight: 18,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 10,
marginTop:10,
marginBottom:10,
borderWidth: 3,
borderTopColor:'black',
marginLeft:5,
}}
<TouchableOpacity style={styles.buttonno}
onPress={() => this.setState({showQuit: false})}>
<Text style={{color: 'black'}}>NO</Text>
<Text style={styles.textqq}>NO</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
{/* Modal Correct*/}
<Modal transparent={true} visible={this.state.showC} animationType="slide">
<View style={{backgroundColor: '#000000aa', flex: 1}}>
<View
style={{
marginLeft: Dimensions.get('window').width * 0.25,
width : Dimensions.get('window').width * 0.4,
alignItems: 'center',
}}>
<ImageBackground
source={require('../img/correctAlert.png')}
style={{
width: '130%',
height: '95%',
}}>
<Text style={{fontSize: 25,textAlign: 'center', marginTop:Dimensions.get('window').height * 0.43, marginLeft:120, color:'white'}}>Correct</Text>
<View
style={{
alignItems: 'center',
marginLeft:120,
}}>
<TouchableOpacity style={{
backgroundColor: 'white',
borderColor: 'black',
padding: 15,
borderRadius: 5,
marginTop:10,
marginBottom:10,
}}
onPress={() => this.setState({showC: false})}>
<Text style={{color: 'black'}}>OK</Text>
<View style={styles.modalbackground}>
<View style={styles.viewmodalCW}>
<ImageBackground source={require('../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>
......@@ -877,36 +852,15 @@ this.setState({records: []});
</View>
</Modal>
{/* Modal Wrong*/}
<Modal transparent={true} visible={this.state.showW} animationType="slide">
<View style={{backgroundColor: '#000000aa', flex: 1}}>
<View
style={{
marginLeft: Dimensions.get('window').width * 0.25,
width : Dimensions.get('window').width * 0.4,
alignItems: 'center',
}}>
<ImageBackground
source={require('../img/wrongAlert.png')}
style={{
width: '130%',
height: '95%',
}}>
<Text style={{fontSize: 25,textAlign: 'center', marginTop:Dimensions.get('window').height * 0.43, marginLeft:120, color:'white'}}>Wrong</Text>
<View
style={{
alignItems: 'center',
marginLeft:120,
}}>
<TouchableOpacity style={{
backgroundColor: 'white',
borderColor: 'black',
padding: 15,
borderRadius: 5,
marginTop:10,
marginBottom:10,
}}
onPress={() => this.setState({showW: false})}>
<Text style={{color: 'black'}}>OK</Text>
<View style={styles.modalbackground}>
<View style={styles.viewmodalCW}>
<ImageBackground source={require('../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>
......@@ -914,38 +868,18 @@ this.setState({records: []});
</View>
</Modal>
<Modal transparent={true} visible={this.state.showDone} animationType="slide">
<View style={{backgroundColor: '#000000aa', flex: 1}}>
<View
style={{
marginLeft: Dimensions.get('window').width * 0.3,
width : Dimensions.get('window').width * 0.4,
alignItems: 'center',
}}>
<ImageBackground
source={require('../img/doneAlert.png')}
style={{
width: '120%',
height: '98%',
}}>
<Text style={{fontSize: 25,textAlign: 'center', marginTop:Dimensions.get('window').height * 0.42, marginLeft:65, color:'white'}}>Well Done</Text>
<Text style={{fontSize: 15, marginLeft:65, textAlign: 'center', color: 'green'}}>Correct : {this.state.correct}</Text>
<Text style={{fontSize: 15, marginLeft:65, textAlign: 'center', color:'red'}}>Wrong: {this.state.wrong}</Text>
{/* Modal Done*/}
<Modal transparent={true} visible={this.state.showDone} animationType="slide">
<View style={styles.modalbackground}>
<View style={styles.viewmodalD}>
<ImageBackground source={require('../img/doneAlert.png')} style={styles.imagedone}>
<Text style={{fontSize: 25,fontFamily: 'sans-serif', textAlign: 'center', marginTop:Dimensions.get('window').height * 0.42, marginLeft:65, color:'white'}}>Well Done</Text>
<Text style={{fontSize: 15, fontFamily: 'sans-serif', marginLeft:65, textAlign: 'center', color: 'green'}}>Correct : {this.state.correct}</Text>
<Text style={{fontSize: 15, fontFamily: 'sans-serif', marginLeft:65, textAlign: 'center', color:'red'}}>Wrong: {this.state.wrong}</Text>
<View
style={{
alignItems: 'center',
marginLeft:70,
}}>
<TouchableOpacity style={{
backgroundColor: 'white',
borderColor: 'black',
padding: 15,
borderRadius: 5,
marginTop:5,
marginBottom:10,
}}
onPress={() => this.backAction()}>
<Text style={{color: 'black'}}>OK</Text>
style={styles.viewmodalDD}>
<TouchableOpacity style={styles.buttonc} onPress={() => this.backAction()}>
<Text style={styles.buttonok}>OK</Text>
</TouchableOpacity>
</View>
</ImageBackground>
......@@ -980,6 +914,7 @@ this.setState({records: []});
textAlign: 'center',
paddingTop: 5,
alignItems: 'center',
fontFamily: 'sans-serif',
},
}}
// Options for the styling
......@@ -1005,132 +940,24 @@ this.setState({records: []});
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? selectedKeywordStyle
: buttonStyle
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? SbuttonB1
: buttonB1
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? SbuttonB2
: buttonB2
? styles.selectedKeywordStyle
: styles.buttonStyle
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
<Text style={styles.textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? SbuttonB3
: buttonB3
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? SbuttonB4
: buttonB4
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? SbuttonB5
: buttonB5
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? SbuttonB11
: buttonB11
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? SbuttonB21
: buttonB21
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? SbuttonB31
: buttonB31
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? SbuttonB41
: buttonB41
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA1.map((item, id) => (
<TouchableHighlight
{NOTESBLACK.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? SbuttonB51
: buttonB51
? [styles.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [styles.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
<Text style={styles.textStyle}> </Text>
</TouchableHighlight>
))}
</View>
......
screens/settings.js
View file @ 7dc85d5e
/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React from 'react';
import {
SafeAreaView,
ImageBackground,
Text,
View,
//TouchableOpacity,
StyleSheet,
Image,
ScrollView,
Dimensions,
// TextInput,
BackHandler,
Pressable,
BackHandler,
Pressable,
} from 'react-native';
import styles from '../style/styleSettings';
import Orientation from 'react-native-orientation';
import Notes from './data';
import * as RNFS from 'react-native-fs';
import NumericInput from 'react-native-numeric-input';
import AsyncStorage from '@react-native-async-storage/async-storage';
//var path = RNFS.DocumentDirectoryPath + '/settings.txt';
import notesData from './notesData';
var path1 = RNFS.DocumentDirectoryPath + '/counter.txt';
const config = {
deviceWidth: Dimensions.get('window').width,
deviceHeight: Dimensions.get('window').height,
};
var counter = 0;
/* eslint-disable prettier/prettier */
const notes = [
'C Major',
'D Major','E Major',
'F Sharp Major',
'F Major',
'E Flat Major',
'D Flat Major',
'G Major',
'A Major',
'B Major',
'C Sharp Major',
'B Flat Major',
'A Flat Major',
'G Flat Major',
'Bass Clef C Major',
'Bass Clef D Major',
'Bass Clef E Major',
'Bass Clef F Sharp Major',
'Bass Clef F Major',
'Bass Clef E Flat Major',
'Bass Clef D Flat Major',
'Bass Clef G Major',
'Bass Clef A Major',
'Bass Clef B Major',
'Bass Clef C Sharp Major',
'Bass Clef B Flat Major',
'Bass Clef A Flat Major',
'Bass Clef G Flat Major',
];
var notes = notesData;
export default class Settings extends React.Component {
constructor(props) {
constructor(props) {
super(props);
this.state = {
value: 0,
listN : [],
};
}
toggleKeyword = (keyword) => {
// console.log(notes.indexOf(keyword));
let list = notes;
......@@ -92,7 +56,7 @@ export default class Settings extends React.Component {
// console.log(notes);
};
saveData = async () => {
saveData = async () => {
AsyncStorage.setItem('@notes_key', JSON.stringify(this.state.listN), (err)=> {
if (err){
console.log('an error');
......@@ -104,7 +68,7 @@ export default class Settings extends React.Component {
});
};
saveData = async () => {
saveData = async () => {
AsyncStorage.setItem('@notes_key', JSON.stringify(this.state.listN), (err)=> {
if (err){
console.log('an error');
......@@ -128,8 +92,7 @@ export default class Settings extends React.Component {
}
};
saveData1 = async () => {
saveData1 = async () => {
RNFS.writeFile(path1,JSON.stringify(counter),'utf8',)
.then((success) => {
//console.log(JSON.stringify(counter));
......@@ -139,7 +102,7 @@ export default class Settings extends React.Component {
});
};
displayData1 = async () => {
displayData1 = async () => {
RNFS.readFile(path1, 'ascii')
.then((res) => {
console.log(JSON.stringify(res));
......@@ -149,7 +112,7 @@ export default class Settings extends React.Component {
});
};
componentWillUnmount() {
componentWillUnmount() {
Orientation.lockToPortrait();
BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
// Orientation.lockAsync(Orientation.OrientationLock.PORTRAIT_UP);
......@@ -165,26 +128,25 @@ export default class Settings extends React.Component {
RNFS.unlink(path1).then(res => {
console.log('delete');
RNFS.scanFile(path1);
})
.catch(err => {
console.log(err.message, err.code);
});
})
.catch(err => {
console.log(err.message, err.code);
});
}
onChange(number, type) {
onChange(number, type) {
//console.log(number, type); // 1, + or -
counter = number;
if (counter > 0) {
this.saveData1(counter);
console.log(number);
this.displayData1();
}
}
}
homeExit = async () => {
homeExit = async () => {
this.props.navigation.navigate('1');
//Orientation.lockToPortrait();
//Orientation.lockToPortrait();
};
render() {
......@@ -192,15 +154,10 @@ export default class Settings extends React.Component {
<View style={styles.container}>
<ImageBackground
source={require('../img/background.jpg')}
style={{
width: '100%',
height: '100%',
}}>
style={styles.imagebackground}>
<SafeAreaView>
<View style={{alignItems:'center',marginTop: '15%', marginLeft: config.deviceWidth * 0.08,
marginRight: config.deviceWidth * 0.1, flexDirection: 'row',
flexWrap: 'wrap'}}>
<Text style={{fontSize: 16,marginRight:9}}>No. of Questions : </Text>
<View style={styles.view1}>
<Text style={styles.textques}>No. of Questions : </Text>
<NumericInput
value={this.state.value}
minValue={0}
......@@ -218,16 +175,9 @@ export default class Settings extends React.Component {
rightButtonBackgroundColor="black"
leftButtonBackgroundColor="black"/>
</View>
<ScrollView style={{marginTop: '5%'}}>
<ScrollView style={styles.scroll}>
<View
style={{
flexDirection: 'row',
flexWrap: 'wrap',
width: config.deviceWidth,
marginLeft: config.deviceWidth * 0.08,
marginRight: config.deviceWidth * 0.1,
marginBottom: config.deviceHeight * 0.12,
}}>
style={styles.view2}>
{Notes.map((item, id) => (
<View key={id}>
<Pressable
......@@ -240,12 +190,8 @@ export default class Settings extends React.Component {
key={id}>
<Image
source={item.image}
style={{
width: 100,
height: 100,
}}
/>
<Text style={{textAlign: 'center', paddingBottom: 10}}>
style={styles.image}/>
<Text style={styles.textname}>
{item.name}
</Text>
</Pressable>
......@@ -259,38 +205,3 @@ export default class Settings extends React.Component {
);
}
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
},
buttonStyle: {
flex: 1,
width: config.deviceWidth * 0.4,
alignItems: 'center',
borderWidth: 3,
borderColor: 'white',
borderRadius: 10,
backgroundColor: 'rgba(52, 52, 52, 0.0)',
opacity:0.4,
padding: 10,
marginRight: config.deviceWidth * 0.03,
marginBottom: config.deviceHeight * 0.03,
},
selectedKeywordStyle: {
flex: 1,
width: config.deviceWidth * 0.4,
alignItems: 'center',
borderWidth: 3,
borderColor: 'black',
backgroundColor: 'white',
// backgroundColor: 'rgba(0,0,0,0)',
borderRadius: 10,
marginRight: config.deviceWidth * 0.03,
marginBottom: config.deviceHeight * 0.03,
padding: 10,
},
});
sound/wrong.mp3 0 → 100644
View file @ 7dc85d5e
File added
style/style.js deleted 100644 → 0
View file @ 368e1766
/* eslint-disable prettier/prettier */
import {StyleSheet} from 'react-native';
import config from '../config';
export default StyleSheet.create({
c1: {
height: '70%',
alignItems: 'center',
borderColor: 'black',
marginTop:5,
},
cc1: {
flexDirection: 'row',
marginLeft: 5,
},
t: {
fontSize: 25,
},
c2: {
flexDirection: 'row',
height: '35%',
},
t1: {
color: 'black',
paddingTop: 120,
},
button: {
flex: 7,
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
b1: {
marginBottom: 25,
width: 200,
height: 50,
borderRadius: 15,
alignItems: 'center',
backgroundColor: 'purple',
},
buttonText: {
textAlign: 'center',
paddingTop: 15,
color: 'white',
fontSize: 15,
},
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',
},
correct: {
width: 100,
textAlign: 'center',
paddingTop: 15,
color: 'white',
height: 60,
borderRadius: 10,
alignItems: 'center',
fontSize: 25,
marginRight: 10,
backgroundColor:'green',
borderColor:'white',
borderWidth: 2,
},
wrong: {
width: 100,
height: 60,
borderRadius: 10,
borderColor:'white',
alignItems: 'center',
textAlign: 'center',
paddingTop: 15,
color: 'white',
fontSize: 25,
marginRight: 10,
backgroundColor:'red',
borderWidth: 2,
},
timer: {
width: 65,
height: 60,
borderRadius: 10,
borderColor:'white',
alignItems: 'center',
textAlign: 'center',
paddingTop: 16,
color: 'white',
fontSize: 25,
backgroundColor:'black',
borderWidth: 2,
},
submit: {
width: '40%',
marginTop: config.deviceWidth * 0.055,
borderColor:'white',
borderWidth: 2,
borderRadius: 5,
},
viewMain: {
width: '20%',
alignContent: 'flex-end',
marginLeft: 180,
marginTop: '173%',
position: 'absolute',
},
container: {
flex: 1,
},
textStyle: {
fontSize: 16,
padding: 8,
textAlign: 'center',
},
buttonView: {
flexDirection: 'column',
marginLeft: config.deviceHeight * 1.0,
},
buttonStyle: {
width: config.deviceWidth * 0.075,
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
selectedKeywordStyle: {
width: config.deviceWidth * 0.075,
alignItems: 'center',
backgroundColor: '#EEA1E1',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
buttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
marginLeft: config.deviceWidth * 0.048,
width: '5%',
position: 'absolute',
},
buttonB2: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
width: '5%',
marginLeft: config.deviceWidth * 0.123,
position: 'absolute',
},
buttonB3: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
width: '5%',
marginLeft: config.deviceWidth * 0.275,
position: 'absolute',
},
buttonB4: {
alignItems: 'center',
backgroundColor: 'black',
width: '5%',
height: '55%',
marginLeft: config.deviceWidth * 0.348,
position: 'absolute',
},
buttonB5: {
alignItems: 'center',
backgroundColor: 'black',
width: '5%',
height: '55%',
marginBottom: 10,
marginLeft: config.deviceWidth * 0.423,
position: 'absolute',
},
SbuttonB1: {
alignItems: 'center',
backgroundColor: '#92ddea',
height: '55%',
marginLeft: config.deviceWidth * 0.048,
width: '5%',
position: 'absolute',
},
SbuttonB2: {
alignItems: 'center',
backgroundColor: '#92ddea',
height: '55%',
width: '5%',
marginLeft: config.deviceWidth * 0.123,
position: 'absolute',
},
SbuttonB3: {
alignItems: 'center',
backgroundColor: '#92ddea',
height: '55%',
width: '5%',
marginLeft: config.deviceWidth * 0.275,
position: 'absolute',
},
SbuttonB4: {
alignItems: 'center',
backgroundColor: '#92ddea',
width: '5%',
height: '55%',
marginLeft: config.deviceWidth * 0.348,
position: 'absolute',
},
SbuttonB5: {
alignItems: 'center',
backgroundColor: '#92ddea',
width: '5%',
height: '55%',
marginLeft: config.deviceWidth * 0.423,
position: 'absolute',
},
buttonB11: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
marginLeft: config.deviceWidth * 0.575,
width: '5%',
position: 'absolute',
},
buttonB21: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
marginLeft: config.deviceWidth * 0.65,
width: '5%',
position: 'absolute',
},
buttonB31: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
marginLeft: config.deviceWidth * 0.798,
width: '5%',
position: 'absolute',
},
buttonB41: {
alignItems: 'center',
backgroundColor: 'black',
width: '5%',
height: '55%',
marginLeft: config.deviceWidth * 0.872,
position: 'absolute',
},
buttonB51: {
alignItems: 'center',
backgroundColor: 'black',
width: '5%',
height: '55%',
marginBottom: 10,
marginLeft: config.deviceWidth * 0.95,
position: 'absolute',
},
SbuttonB11: {
alignItems: 'center',
backgroundColor: '#92ddea',
height: '55%',
marginLeft: config.deviceWidth * 0.575,
width: '5%',
position: 'absolute',
},
SbuttonB21: {
alignItems: 'center',
backgroundColor: '#92ddea',
height: '55%',
marginLeft: config.deviceWidth * 0.65,
width: '5%',
position: 'absolute',
},
SbuttonB31: {
alignItems: 'center',
backgroundColor: '#92ddea',
height: '55%',
marginLeft: config.deviceWidth * 0.798,
width: '5%',
position: 'absolute',
},
SbuttonB41: {
alignItems: 'center',
backgroundColor: '#92ddea',
width: '5%',
height: '55%',
marginLeft: config.deviceWidth * 0.872,
position: 'absolute',
},
SbuttonB51: {
alignItems: 'center',
backgroundColor: '#92ddea',
width: '5%',
height: '55%',
marginLeft: config.deviceWidth * 0.95,
position: 'absolute',
},
boxScore: {
alignContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
padding: 50,
marginTop: '5%',
marginBottom: '5%',
borderRadius: 30,
},
buttonStyleSettings: {
flex: 1,
width: config.deviceHeight * 0.4,
alignItems: 'center',
borderWidth: 1,
borderColor: 'black',
borderRadius: 10,
backgroundColor: 'white',
padding: 10,
marginRight: config.deviceHeight * 0.03,
marginBottom: config.deviceWidth * 0.03,
},
selectedKeywordStyleSettings: {
flex: 1,
backgroundColor: 'rgba(0,0,0,0)',
width: config.deviceHeight * 0.4,
alignItems: 'center',
borderWidth: 1,
borderColor: 'black',
borderRadius: 10,
marginRight: config.deviceHeight * 0.03,
marginBottom: config.deviceWidth * 0.03,
padding: 10,
},
containerSettings: {
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
},
viewSettings: {
flexDirection: 'row',
flexWrap: 'wrap',
width: config.deviceHeight,
marginLeft: config.deviceWidth * 0.05,
marginRight: config.deviceWidth * 0.08,
},
viewInputSettings: {
alignItems:'center',
marginTop: '15%',
marginLeft: config.deviceHeight * 0.08,
marginRight: config.deviceHeight * 0.1,
flexDirection: 'row',
flexWrap: 'wrap'},
});
style/styleHome.js 0 → 100644
View file @ 7dc85d5e
/* eslint-disable prettier/prettier */
import {StyleSheet} from 'react-native';
//import config from './config';
export default StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
menu: {
marginBottom: '2%',
alignItems: 'center',
justifyContent: 'center',
padding: '10%',
marginLeft: '3%',
marginRight: '3%',
borderRadius: 10,
borderWidth: 5,
borderColor: 'black',
backgroundColor: 'white',
},
viewmenu: {
marginTop: '15%',
marginBottom: '5%',
},
textmenu:{
fontSize:20,
fontFamily: 'sans-serif',
},
imagebackground: {
width: '100%',
height: '100%',
},
image1:{
height:150,
width:250,
},
image2:{
height:150,
width:150,
},
});
style/styleLogbook.js 0 → 100644
View file @ 7dc85d5e
/* eslint-disable prettier/prettier */
import {StyleSheet} from 'react-native';
//import config from './config';
export default StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#9001f5',
},
menu: {
marginTop: '3%',
marginBottom: '2%',
alignItems: 'center',
justifyContent: 'center',
padding: '15%',
marginLeft: '5%',
marginRight: '5%',
borderRadius: 10,
borderWidth: 2,
borderColor: 'white',
},
imagebackground: {
width: '100%',
height: '100%',
},
scroll: {
marginTop: 50,
},
view1: {
flexDirection: 'row',
paddingLeft: 15,
paddingRight: 15,
paddingBottom:10,
paddingTop:5,
backgroundColor: 'white',
borderBottomWidth:1,
},
datedays: {
alignItems: 'center',
marginRight:8,
},
border: {
borderWidth:1,
borderColor : 'gray',
},
details: {
flexDirection: 'column',
marginLeft:5,
marginTop:10,
},
textdate1 : {
color:'black',
fontFamily: 'sans-serif',
fontSize: 40,
textAlign: 'center',
},
textdate2: {
color:'black',
fontFamily: 'sans-serif',
fontSize: 15,
textAlign: 'center',
},
textday: {
color:'black',
fontFamily: 'sans-serif',
fontSize: 15,
textAlign: 'center',
},
textcorrect: {
color:'green',
fontFamily: 'sans-serif',
fontSize: 15,
},
textwrong: {
color:'red',
fontFamily: 'sans-serif',
fontSize: 15,
},
texttime: {
color:'black',
fontFamily: 'sans-serif',
fontSize: 15,
},
});
style/styleQuiz.js 0 → 100644
View file @ 7dc85d5e
/* eslint-disable prettier/prettier */
import {StyleSheet, Dimensions} from 'react-native';
import config from './config';
export default StyleSheet.create({
imagebackground: {
width: '100%',
height: '100%',
},
//Modal Quit
modalbackground: {backgroundColor: '#000000aa', flex: 1},
viewmodalQ: {
marginLeft: Dimensions.get('window').width * 0.35,
width : Dimensions.get('window').width * 0.4,
height : Dimensions.get('window').height * 0.4,
marginTop : Dimensions.get('window').height * 0.25,
alignItems: 'center',
backgroundColor:'white',
borderRadius: 10,
borderColor: 'black',
borderWidth: 5,
},
textquit: {fontSize: 25,fontFamily: 'sans-serif', textAlign: 'center', marginTop: 5, color:'black'},
viewmodalQQ : {
alignItems: 'center',
flexDirection: 'row',
marginTop:15,
},
buttonyes: {
backgroundColor: 'white',
padding: 15,
borderRadius: 10,
marginTop:10,
marginBottom:10,
borderTopColor:'black',
borderRightColor:'black',
borderWidth: 3,
marginRight:5,
},
buttonno: {
backgroundColor: 'white',
paddingLeft: 18,
paddingRight: 18,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 10,
marginTop:10,
marginBottom:10,
borderWidth: 3,
borderTopColor:'black',
marginLeft:5,
},
textqq: {color: 'black',fontFamily: 'sans-serif'},
// Modal Correct and Wrong
viewmodalCW: {
marginLeft: Dimensions.get('window').width * 0.25,
width : Dimensions.get('window').width * 0.4,
alignItems: 'center',
},
imagecw: {
width: '130%',
height: '95%',
},
textcw: {fontSize: 25,fontFamily: 'sans-serif',textAlign: 'center',
marginTop:Dimensions.get('window').height * 0.43, marginLeft:120, color:'white'},
viewbutton: {alignItems: 'center',marginLeft:120,},
buttonc: {
backgroundColor: 'white',
borderColor: 'black',
padding: 15,
borderRadius: 5,
marginTop:10,
marginBottom:10,
},
buttonok: {color: 'black'},
// Modal Done
viewmodalD: {
marginLeft: Dimensions.get('window').width * 0.3,
width : Dimensions.get('window').width * 0.4,
alignItems: 'center',
},
imagedone :{
width: '120%',
height: '98%',
},
viewmodalDD: {
alignItems: 'center',
marginLeft:70,
},
c1: {
height: '70%',
alignItems: 'center',
borderColor: 'black',
marginTop:5,
},
cc1: {
flexDirection: 'row',
marginLeft: 5,
},
t: {
fontSize: 25,
fontFamily: 'sans-serif',
},
c2: {
flexDirection: 'row',
height: '35%',
},
t1: {
color: 'black',
paddingTop: 120,
},
button: {
flex: 7,
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
b1: {
marginBottom: 25,
width: 200,
height: 50,
borderRadius: 15,
alignItems: 'center',
backgroundColor: 'purple',
},
buttonText: {
textAlign: 'center',
paddingTop: 15,
color: 'white',
fontSize: 15,
fontFamily: 'sans-serif',
},
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',
},
correct: {
width: 100,
textAlign: 'center',
paddingTop: 15,
color: 'white',
height: 60,
borderRadius: 10,
alignItems: 'center',
fontSize: 25,
marginRight: 10,
backgroundColor:'green',
borderColor:'white',
borderWidth: 2,
fontFamily: 'sans-serif',
},
wrong: {
width: 100,
height: 60,
borderRadius: 10,
borderColor:'white',
alignItems: 'center',
textAlign: 'center',
paddingTop: 15,
color: 'white',
fontSize: 25,
marginRight: 10,
backgroundColor:'red',
borderWidth: 2,
fontFamily: 'sans-serif',
},
timer: {
width: 65,
height: 60,
borderRadius: 10,
borderColor:'white',
alignItems: 'center',
textAlign: 'center',
paddingTop: 16,
color: 'white',
fontSize: 25,
backgroundColor:'black',
borderWidth: 2,
fontFamily: 'sans-serif',
},
submit: {
width: '40%',
marginTop: config.deviceWidth * 0.055,
borderColor:'white',
borderWidth: 2,
borderRadius: 5,
},
viewMain: {
width: '20%',
alignContent: 'flex-end',
marginLeft: 180,
marginTop: '173%',
position: 'absolute',
},
container: {
flex: 1,
},
textStyle: {
fontSize: 16,
padding: 8,
textAlign: 'center',
fontFamily: 'sans-serif',
},
buttonView: {
flexDirection: 'column',
marginLeft: config.deviceHeight * 1.0,
},
buttonStyle: {
width: config.deviceWidth * 0.075,
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
selectedKeywordStyle: {
width: config.deviceWidth * 0.075,
alignItems: 'center',
backgroundColor: '#EEA1E1',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
buttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
marginLeft: config.deviceWidth * 0.048,
width: '5%',
position: 'absolute',
},
SbuttonB1: {
alignItems: 'center',
backgroundColor: '#92ddea',
height: '55%',
marginLeft: config.deviceWidth * 0.048,
width: '5%',
position: 'absolute',
},
buttonStyleSettings: {
flex: 1,
width: config.deviceHeight * 0.4,
alignItems: 'center',
borderWidth: 1,
borderColor: 'black',
borderRadius: 10,
backgroundColor: 'white',
padding: 10,
marginRight: config.deviceHeight * 0.03,
marginBottom: config.deviceWidth * 0.03,
},
selectedKeywordStyleSettings: {
flex: 1,
backgroundColor: 'rgba(0,0,0,0)',
width: config.deviceHeight * 0.4,
alignItems: 'center',
borderWidth: 1,
borderColor: 'black',
borderRadius: 10,
marginRight: config.deviceHeight * 0.03,
marginBottom: config.deviceWidth * 0.03,
padding: 10,
},
containerSettings: {
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
},
viewSettings: {
flexDirection: 'row',
flexWrap: 'wrap',
width: config.deviceHeight,
marginLeft: config.deviceWidth * 0.05,
marginRight: config.deviceWidth * 0.08,
},
viewInputSettings: {
alignItems:'center',
marginTop: '15%',
marginLeft: config.deviceHeight * 0.08,
marginRight: config.deviceHeight * 0.1,
flexDirection: 'row',
flexWrap: 'wrap'},
});
style/styleSettings.js 0 → 100644
View file @ 7dc85d5e
/* eslint-disable prettier/prettier */
import {StyleSheet} from 'react-native';
import config from './config';
export default StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
},
buttonStyle: {
flex: 1,
width: config.deviceWidth * 0.4,
alignItems: 'center',
borderWidth: 3,
borderColor: 'white',
borderRadius: 10,
backgroundColor: 'rgba(52, 52, 52, 0.0)',
opacity:0.4,
padding: 10,
marginRight: config.deviceWidth * 0.03,
marginBottom: config.deviceHeight * 0.03,
},
selectedKeywordStyle: {
flex: 1,
width: config.deviceWidth * 0.4,
alignItems: 'center',
borderWidth: 3,
borderColor: 'black',
backgroundColor: 'white',
borderRadius: 10,
marginRight: config.deviceWidth * 0.03,
marginBottom: config.deviceHeight * 0.03,
padding: 10,
},
imagebackground: {
width: '100%',
height: '100%',
},
view1: {
alignItems:'center',
marginTop: '15%',
marginLeft: config.deviceWidth * 0.08,
marginRight: config.deviceWidth * 0.1,
flexDirection: 'row',
flexWrap: 'wrap',
},
textques: {
fontSize: 16,
marginRight:9,
fontFamily: 'sans-serif',
},
scroll: {
marginTop: '5%',
},
view2: {
flexDirection: 'row',
flexWrap: 'wrap',
width: config.deviceWidth,
marginLeft: config.deviceWidth * 0.08,
marginRight: config.deviceWidth * 0.1,
marginBottom: config.deviceHeight * 0.12,
},
textname: {
textAlign: 'center',
fontFamily: 'sans-serif',
paddingBottom: 10,
},
image: {
width: 100,
height: 100,
},
});
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