Skip to content

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

update...

parent 5dce36bd
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 4574 additions and 123 deletions
App.js
View file @ ff265d54
This diff is collapsed.
screens/data.js 0 → 100644
View file @ ff265d54
/* eslint-disable prettier/prettier */
const notes = [
{
name: 'C Major',
image: require('../img/Cmajor.png'),
},
{
name: 'D Major',
image: require('../img/Dmajor.png'),
},
{
name: 'E Major',
image: require('../img/Emajor.png'),
},
{
name: 'F Sharp Major',
image: require('../img/Fsmajor.png'),
},
{
name: 'F Major',
image: require('../img/Fmajor.png'),
},
{
name: 'E Flat Major',
image: require('../img/Eflatmajor.png'),
},
{
name: 'D Flat Major',
image: require('../img/Dflatmajor.png'),
},
{
name: 'G Major',
image: require('../img/Gmajor.png'),
},
{
name: 'A Major',
image: require('../img/Amajor.png'),
},
{
name: 'B Major',
image: require('../img/Bmajor.png'),
},
{
name: 'C Sharp Major',
image: require('../img/Csmajor.png'),
},
{
name: 'B Flat Major',
image: require('../img/Bflatmajor.png'),
},
{
name: 'A Flat Major',
image: require('../img/Aflatmajor.png'),
},
{
name: 'G Flat Major',
image: require('../img/Gflatmajor.png'),
},
{
name: 'Bass Clef C Major',
image: require('../img/bass_cmajor.png'),
},
{
name: 'Bass Clef D Major',
image: require('../img/bass_dmajor.png'),
},
{
name: 'Bass Clef E Major',
image: require('../img/bass_emajor.png'),
},
{
name: 'Bass Clef F Sharp Major',
image: require('../img/bass_fsmajor.png'),
},
{
name: 'Bass Clef F Major',
image: require('../img/bass_fmajor.png'),
},
{
name: 'Bass Clef E Flat Major',
image: require('../img/bass_eflat.png'),
},
{
name: 'Bass Clef D Flat Major',
image: require('../img/bass_dflat.png'),
},
{
name: 'Bass Clef G Major',
image: require('../img/bass_gmajor.png'),
},
{
name: 'Bass Clef A Major',
image: require('../img/bass_amajor.png'),
},
{
name: 'Bass Clef B Major',
image: require('../img/bass_bmajor.png'),
},
{
name: 'Bass Clef C Sharp Major',
image: require('../img/bass_cc.png'),
},
{
name: 'Bass Clef B Flat Major',
image: require('../img/bass_bflat.png'),
},
{
name: 'Bass Clef A Flat Major',
image: require('../img/bass_aflat.png'),
},
{
name: 'Bass Clef G Flat Major',
image: require('../img/bass_gflat.png'),
},
];
export default notes;
screens/home.js
View file @ ff265d54
...@@ -40,16 +40,16 @@ class Home extends React.PureComponent { ...@@ -40,16 +40,16 @@ class Home extends React.PureComponent {
style={styles.menu} style={styles.menu}
onPress={() => { onPress={() => {
this.props.navigation.navigate('q1'); this.props.navigation.navigate('q1');
Orientation.lockToPortrait(); //Orientation.lockToLandscape();
}}> }}>
<Icon raised name="trophy" type="font-awesome" /> <Icon raised name="trophy" type="font-awesome" />
<Text>Quiz Time</Text> <Text>Piano</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={styles.menu} style={styles.menu}
onPress={() => this.props.navigation.navigate('3')}> onPress={() => this.props.navigation.navigate('3')}>
<Icon raised name="clipboard" type="font-awesome" /> <Icon raised name="clipboard" type="font-awesome" />
<Text>My Record</Text> <Text>Records</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={styles.menu} style={styles.menu}
...@@ -85,5 +85,6 @@ const styles = StyleSheet.create({ ...@@ -85,5 +85,6 @@ const styles = StyleSheet.create({
borderRadius: 10, borderRadius: 10,
borderWidth: 2, borderWidth: 2,
borderColor: 'white', borderColor: 'white',
backgroundColor: 'white',
}, },
}); });
screens/logbook.js
View file @ ff265d54
...@@ -6,10 +6,10 @@ import { ...@@ -6,10 +6,10 @@ import {
ImageBackground, ImageBackground,
Text, Text,
View, View,
TouchableOpacity, //TouchableOpacity,
StyleSheet, StyleSheet,
ScrollView, ScrollView,
Alert, // Alert,
} from 'react-native'; } from 'react-native';
//import {Icon} from 'react-native-elements'; //import {Icon} from 'react-native-elements';
//import AsyncStorage from '@react-native-async-storage/async-storage'; //import AsyncStorage from '@react-native-async-storage/async-storage';
...@@ -17,24 +17,27 @@ import Orientation from 'react-native-orientation'; ...@@ -17,24 +17,27 @@ import Orientation from 'react-native-orientation';
//import AsyncStorage from '@react-native-async-storage/async-storage'; //import AsyncStorage from '@react-native-async-storage/async-storage';
import * as RNFS from 'react-native-fs'; import * as RNFS from 'react-native-fs';
var path = RNFS.DocumentDirectoryPath + '/test.js'; var path = RNFS.DocumentDirectoryPath + '/test.txt';
//var counter = 0;
class LogBook extends React.PureComponent { class LogBook extends React.PureComponent {
constructor(props: Object) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
logbook: '', logbook: [],
correct: [],
}; };
} }
displayData = async () => { displayData = async () => {
RNFS.readFile(path, 'ascii') RNFS.readFile(path, 'ascii')
.then((res) => { .then((res) => {
this.setState({ this.setState({
logbook: res, logbook: res.split('\n'),
}); });
//var l = this.state.logbook.length;
console.log(this.state.logbook); console.log(res);
// Alert.alert(res); // console.log(this.state.logbook);
// console.log(l);
}) })
.catch((err) => { .catch((err) => {
console.log(err.message, err.code); console.log(err.message, err.code);
...@@ -55,9 +58,45 @@ class LogBook extends React.PureComponent { ...@@ -55,9 +58,45 @@ class LogBook extends React.PureComponent {
height: '100%', height: '100%',
}}> }}>
<SafeAreaView> <SafeAreaView>
<View style={{marginTop: 100, marginLeft: 20}}> <ScrollView
<Text>{this.state.logbook}</Text> style={{
</View> marginTop: 50,
marginLeft: 5,
marginRight: 5,
}}>
{this.state.logbook.map((item, id) => (
<View
key={id}
style={{
flexDirection: 'row',
marginBottom: 10,
padding: 15,
borderWidth: 2,
borderColor: 'black',
backgroundColor: 'white',
borderRadius: 10,
}}>
<Text
style={{
textAlign: 'justify',
marginRight: 10,
fontSize: 40,
}}>
{id + 1}
</Text>
<Text
style={{
marginRight: 5,
fontSize: 40,
borderWidth: 1,
borderColor: 'purple',
}}>
{}
</Text>
<Text>{item.split(',').join('\n')}</Text>
</View>
))}
</ScrollView>
</SafeAreaView> </SafeAreaView>
</ImageBackground> </ImageBackground>
</View> </View>
......
screens/quiz1.js
View file @ ff265d54
...@@ -132,6 +132,7 @@ export default class Quiz1 extends Component { ...@@ -132,6 +132,7 @@ export default class Quiz1 extends Component {
componentWillUnmount() { componentWillUnmount() {
clearInterval(this.interval); clearInterval(this.interval);
// Orientation.lockToLandscape();
} }
';'; ';';
......
screens/quiz14.js
View file @ ff265d54
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
/* eslint-disable react/no-did-mount-set-state */ /* eslint-disable react/no-did-mount-set-state */
/* eslint-disable prettier/prettier */ /* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */ /* eslint-disable no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */ /* eslint-disable prettier/prettier */
import React, {Component} from 'react'; import React, {Component} from 'react';
import { import {
...@@ -23,7 +23,7 @@ import Orientation from 'react-native-orientation'; ...@@ -23,7 +23,7 @@ import Orientation from 'react-native-orientation';
var date = moment().utcOffset('+08:00').format('D MMM YYYY'); var date = moment().utcOffset('+08:00').format('D MMM YYYY');
var time = moment().utcOffset('+08:00').format(' h:mm a'); var time = moment().utcOffset('+08:00').format(' h:mm a');
var path = RNFS.DocumentDirectoryPath + '/test.js'; var path = RNFS.DocumentDirectoryPath + '/test.txt';
const NOTESWHITE = [ const NOTESWHITE = [
'C1', 'C1',
...@@ -54,7 +54,7 @@ const NOTESAA1 = ['Bb2']; ...@@ -54,7 +54,7 @@ const NOTESAA1 = ['Bb2'];
const keywordsList = []; const keywordsList = [];
export default class Quiz14 extends Component { export default class Quiz14 extends Component {
constructor(props: Object) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
timer: 0, timer: 0,
...@@ -103,54 +103,55 @@ export default class Quiz14 extends Component { ...@@ -103,54 +103,55 @@ export default class Quiz14 extends Component {
timer: 0, timer: 0,
}); });
clearInterval(this._interval); clearInterval(this._interval);
this.saveData(this.state.correct + 2, this.state.wrong, this.state.timer); // this.saveData(this.state.correct + 2, this.state.wrong, this.state.timer);
this.displayData(); //this.displayData();
Alert.alert('Correct!');
keywordsList.splice(0, keywordsList.length); keywordsList.splice(0, keywordsList.length);
this.props.navigation.navigate('1', { this.props.navigation.navigate('q15', {
c: this.state.correct + 2, c: this.state.correct + 2,
w: this.state.wrong, w: this.state.wrong,
}); });
Orientation.lockToPortrait(); /* Orientation.lockToPortrait();
Alert.alert( Alert.alert(
'Well Done', 'Well Done',
'Correct: ' + 'Correct: ' +
(this.state.correct + 2) + (this.state.correct + 2) +
'\n Wrong: ' + '\nWrong: ' +
this.state.wrong + this.state.wrong +
'\n', '\n',
); ); */
} else { } else {
console.log('wrong'); console.log('wrong');
this.setState({ this.setState({
timer: 0, timer: 0,
}); });
clearInterval(this._interval); clearInterval(this._interval);
this.saveData(this.state.correct, this.state.wrong + 1, this.state.timer); // this.saveData(this.state.correct, this.state.wrong + 1, this.state.timer);
this.displayData(); //this.displayData();
keywordsList.splice(0, keywordsList.length); keywordsList.splice(0, keywordsList.length);
this.props.navigation.navigate('1', { Alert.alert('Wrong!');
this.props.navigation.navigate('q15', {
c: this.state.correct, c: this.state.correct,
w: this.state.wrong + 1, w: this.state.wrong + 1,
}); });
Orientation.lockToPortrait(); // Orientation.lockToPortrait();
Alert.alert( /* Alert.alert(
'Well Done', 'Well Done',
'Correct: ' + 'Correct: ' +
this.state.correct + this.state.correct +
'\n Wrong: ' + '\nWrong: ' +
(this.state.wrong + 1) + (this.state.wrong + 1) +
'\n', '\n',
); ); */
} }
}; };
saveData = async (correct, wrong, timer) => { saveData = async (correct, wrong, timer) => {
let obj = { let obj = {
c: correct, correct: correct,
w: wrong, wrong: wrong,
tm: timer, date: date,
d: date, time: time,
t: time,
}; };
if (await RNFS.exists(path)) { if (await RNFS.exists(path)) {
console.log('BLAH EXISTS'); console.log('BLAH EXISTS');
...@@ -249,7 +250,7 @@ export default class Quiz14 extends Component { ...@@ -249,7 +250,7 @@ export default class Quiz14 extends Component {
/> />
</View> </View>
<View style={styles.submit}> <View style={styles.submit}>
<Button title="FINISH" color="#E07EF9" onPress={this.onSubmit} /> <Button title="SUBMIT" color="#E07EF9" onPress={this.onSubmit} />
</View> </View>
</View> </View>
<Image <Image
......
screens/quiz15.js 0 → 100644
View file @ ff265d54
/* eslint-disable prettier/prettier */
/* eslint-disable react/no-did-mount-set-state */
/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
Text,
View,
TouchableHighlight,
ImageBackground,
Image,
Button,
Alert,
StatusBar,
} from 'react-native';
import Orientation from 'react-native-orientation';
import styles from '../style/style';
import config from '../config';
//import ImmersiveMode from 'react-native-immersive-mode';
const NOTESWHITE = [
'C1',
'D1',
'E1',
'F1',
'G1',
'A1',
'B1',
'C2',
'D2',
'E2',
'F2',
'G2',
'A2',
'B2',
];
const NOTESCC = ['C#1'];
const NOTESDD = ['D#1'];
const NOTESFF = ['F#1'];
const NOTESGG = ['G#1'];
const NOTESAA = ['A#1'];
const NOTESCC1 = ['C#2'];
const NOTESDD1 = ['D#2'];
const NOTESFF1 = ['F#2'];
const NOTESGG1 = ['G#2'];
const NOTESAA1 = ['A#2'];
const keywordsList = [];
export default class Quiz15 extends Component {
constructor(props: Object) {
super(props);
this.state = {
timer: 0,
correct: 0,
wrong: 0,
keywordsList: '',
};
}
toggleKeyword = (keyword) => {
let list = keywordsList;
let index = -1;
if ((index = keywordsList.indexOf(keyword)) !== -1) {
list.splice(index, 1);
console.log(list);
} else {
list.push(keyword);
console.log(list);
}
this.setState({keywordsList: list});
};
//reset
removeArray = () => {
keywordsList.splice(0, keywordsList.length);
console.log(keywordsList);
this.setState({
timer: 0,
});
clearInterval(this._interval);
Orientation.lockToLandscape();
};
onSubmit = () => {
const fullnotes = keywordsList.toString();
if (
fullnotes.includes('C1') &&
fullnotes.includes('D1') &&
fullnotes.includes('E1') &&
fullnotes.includes('F1') &&
fullnotes.includes('G1') &&
fullnotes.includes('A1') &&
fullnotes.includes('B1') &&
fullnotes.includes('C2')
) {
//if (keywordsList.toString() === 'C1,D1,E1,F1,G1,A1,B1,C2')
this.setState({
timer: 0,
});
clearInterval(this._interval);
Alert.alert('Correct!');
keywordsList.splice(0, keywordsList.length);
this.props.navigation.navigate('q16', {
c: this.state.correct + 2,
w: this.state.wrong,
});
} else {
console.log('wrong');
this.setState({
timer: 0,
});
clearInterval(this._interval);
keywordsList.splice(0, keywordsList.length);
Alert.alert('Wrong!');
this.props.navigation.navigate('q16', {
c: this.state.correct,
w: this.state.wrong + 1,
});
}
};
componentDidMount() {
this.setState({
correct: this.props.route.params.c,
wrong: this.props.route.params.w,
});
// Orientation.lockToLandscape();
// ImmersiveMode.setBarMode('Bottom');
this.interval = setInterval(
() => this.setState((prevState) => ({timer: prevState.timer + 1})),
1500,
);
}
componentWillUnmount() {
clearInterval(this.interval);
}
';';
render() {
const {
container,
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}>
<StatusBar hidden />
<View style={styles.c1}>
<View style={styles.cc1}>
<Text style={styles.correct}>Correct : {this.state.correct}</Text>
<Text style={styles.wrong}>
Wrong :{'\n'}
{this.state.wrong}
</Text>
<Text style={styles.timer}>
Timer :{'\n'}
{this.state.timer}
</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>
</View>
<Image
style={styles.logo}
source={require('../img/bass_cmajor.png')}
/>
</View>
<View style={styles.c2}>
{NOTESWHITE.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? selectedKeywordStyle
: buttonStyle
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB1
: buttonB1
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB2
: buttonB2
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB3
: buttonB3
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB4
: buttonB4
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB5
: buttonB5
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB11
: buttonB11
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB21
: buttonB21
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB31
: buttonB31
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB41
: buttonB41
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB51
: buttonB51
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
</View>
</View>
);
}
}
screens/quiz16.js 0 → 100644
View file @ ff265d54
/* eslint-disable prettier/prettier */
/* eslint-disable react/no-did-mount-set-state */
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
TouchableHighlight,
ImageBackground,
Image,
Button,
Alert,
} from 'react-native';
import styles from '../style/style';
import Orientation from 'react-native-orientation';
import {useNavigation} from '@react-navigation/native';
import config from '../config';
const NOTESWHITE = [
'C1',
'D1',
'E1',
'F1',
'G1',
'A1',
'B1',
'C2',
'D2',
'E2',
'F2',
'G2',
'A2',
'B2',
];
const NOTESCC = ['C#1'];
const NOTESDD = ['D#1'];
const NOTESFF = ['F#1'];
const NOTESGG = ['G#1'];
const NOTESAA = ['A#1'];
const NOTESCC1 = ['C#2'];
const NOTESDD1 = ['D#2'];
const NOTESFF1 = ['F#2'];
const NOTESGG1 = ['G#2'];
const NOTESAA1 = ['A#2'];
const keywordsList = [];
export default class Quiz16 extends Component {
constructor(props: Object) {
super(props);
this.state = {
timer: 0,
correct: 0,
wrong: 0,
keywordsList: '',
};
}
toggleKeyword = (keyword) => {
let list = keywordsList;
let index = -1;
if ((index = keywordsList.indexOf(keyword)) !== -1) {
list.splice(index, 1);
console.log(list);
} else {
list.push(keyword);
console.log(list);
}
this.setState({keywordsList: list});
};
//reset
removeArray = () => {
keywordsList.splice(0, keywordsList.length);
console.log(keywordsList);
this.setState({
timer: 0,
});
clearInterval(this._interval);
};
onSubmit = () => {
console.log(keywordsList.toString());
const fullnotes = keywordsList.toString();
if (
fullnotes.includes('D1') &&
fullnotes.includes('E1') &&
fullnotes.includes('F#1') &&
fullnotes.includes('G1') &&
fullnotes.includes('A1') &&
fullnotes.includes('B1') &&
fullnotes.includes('C#2') &&
fullnotes.includes('D2')
) {
// if (keywordsList.toString() === 'D1,E1,F#1,G1,A1,B1,C#2,D2') {
this.setState({
timer: 0,
});
clearInterval(this._interval);
Alert.alert('Correct!');
keywordsList.splice(0, keywordsList.length);
this.props.navigation.navigate('q17', {
c: this.state.correct + 2,
w: this.state.wrong,
});
} else {
console.log('wrong');
this.setState({
timer: 0,
});
clearInterval(this._interval);
keywordsList.splice(0, keywordsList.length);
Alert.alert('Wrong!');
this.props.navigation.navigate('q17', {
c: this.state.correct,
w: this.state.wrong + 1,
});
}
};
componentDidMount() {
Orientation.lockToLandscape();
this.setState({
correct: this.props.route.params.c,
wrong: this.props.route.params.w,
});
this.interval = setInterval(
() => this.setState((prevState) => ({timer: prevState.timer + 1})),
1500,
);
}
componentWillUnmount() {
clearInterval(this.interval);
}
';';
render() {
const {
container,
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}>
<View style={styles.c1}>
<View style={styles.cc1}>
<Text style={styles.correct}>Correct : {this.state.correct}</Text>
<Text style={styles.wrong}>
Wrong :{'\n'}
{this.state.wrong}
</Text>
<Text style={styles.timer}>
Timer :{'\n'}
{this.state.timer}
</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>
</View>
<Image
style={styles.logo}
source={require('../img/bass_dmajor.png')}
/>
</View>
<View style={styles.c2}>
{NOTESWHITE.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? selectedKeywordStyle
: buttonStyle
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB1
: buttonB1
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB2
: buttonB2
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB3
: buttonB3
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB4
: buttonB4
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB5
: buttonB5
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB11
: buttonB11
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB21
: buttonB21
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB31
: buttonB31
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB41
: buttonB41
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB51
: buttonB51
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
</View>
</View>
);
}
}
screens/quiz17.js 0 → 100644
View file @ ff265d54
/* eslint-disable prettier/prettier */
/* eslint-disable react/no-did-mount-set-state */
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
TouchableHighlight,
ImageBackground,
Image,
Button,
Alert,
} from 'react-native';
import styles from '../style/style';
import Orientation from 'react-native-orientation';
import {useNavigation} from '@react-navigation/native';
const NOTESWHITE = [
'C1',
'D1',
'E1',
'F1',
'G1',
'A1',
'B1',
'C2',
'D2',
'E2',
'F2',
'G2',
'A2',
'B2',
];
const NOTESCC = ['C#1'];
const NOTESDD = ['D#1'];
const NOTESFF = ['F#1'];
const NOTESGG = ['G#1'];
const NOTESAA = ['A#1'];
const NOTESCC1 = ['C#2'];
const NOTESDD1 = ['D#2'];
const NOTESFF1 = ['F#2'];
const NOTESGG1 = ['G#2'];
const NOTESAA1 = ['A#2'];
const keywordsList = [];
export default class Quiz17 extends Component {
constructor(props: Object) {
super(props);
this.state = {
timer: 0,
correct: 0,
wrong: 0,
keywordsList: '',
};
}
toggleKeyword = (keyword) => {
let list = keywordsList;
let index = -1;
if ((index = keywordsList.indexOf(keyword)) !== -1) {
list.splice(index, 1);
console.log(list);
} else {
list.push(keyword);
console.log(list);
}
this.setState({keywordsList: list});
};
//reset
removeArray = () => {
keywordsList.splice(0, keywordsList.length);
console.log(keywordsList);
this.setState({
timer: 0,
});
clearInterval(this._interval);
};
onSubmit = () => {
console.log(keywordsList.toString());
const fullnotes = keywordsList.toString();
if (
fullnotes.includes('E1') &&
fullnotes.includes('F#1') &&
fullnotes.includes('G#1') &&
fullnotes.includes('A1') &&
fullnotes.includes('B1') &&
fullnotes.includes('C#2') &&
fullnotes.includes('D#2') &&
fullnotes.includes('E2')
) {
//if (keywordsList.toString() === 'E1,F#1,G#1,A1,B1,C#2,D#2,E2') {
this.setState({
timer: 0,
});
clearInterval(this._interval);
Alert.alert('Correct!');
keywordsList.splice(0, keywordsList.length);
this.props.navigation.navigate('q18', {
c: this.state.correct + 2,
w: this.state.wrong,
});
} else {
console.log('wrong');
this.setState({
timer: 0,
});
clearInterval(this._interval);
keywordsList.splice(0, keywordsList.length);
Alert.alert('Wrong!');
this.props.navigation.navigate('q18', {
c: this.state.correct,
w: this.state.wrong + 1,
});
}
};
componentDidMount() {
Orientation.lockToLandscape();
this.setState({
correct: this.props.route.params.c,
wrong: this.props.route.params.w,
});
this.interval = setInterval(
() => this.setState((prevState) => ({timer: prevState.timer + 1})),
1500,
);
}
componentWillUnmount() {
clearInterval(this.interval);
}
';';
render() {
const {
container,
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}>
<View style={styles.c1}>
<View style={styles.cc1}>
<Text style={styles.correct}>Correct : {this.state.correct}</Text>
<Text style={styles.wrong}>
Wrong :{'\n'}
{this.state.wrong}
</Text>
<Text style={styles.timer}>
Timer :{'\n'}
{this.state.timer}
</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>
</View>
<Image
style={styles.logo}
source={require('../img/bass_emajor.png')}
/>
</View>
<View style={styles.c2}>
{NOTESWHITE.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? selectedKeywordStyle
: buttonStyle
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB1
: buttonB1
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB2
: buttonB2
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB3
: buttonB3
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB3
: buttonB3
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB4
: buttonB4
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB5
: buttonB5
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB11
: buttonB11
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB21
: buttonB21
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB31
: buttonB31
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB41
: buttonB41
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB51
: buttonB51
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
</View>
</View>
);
}
}
screens/quiz18.js 0 → 100644
View file @ ff265d54
/* eslint-disable prettier/prettier */
/* eslint-disable react/no-did-mount-set-state */
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
TouchableHighlight,
ImageBackground,
Image,
Button,
Alert,
} from 'react-native';
import styles from '../style/style';
import Orientation from 'react-native-orientation';
import {useNavigation} from '@react-navigation/native';
const NOTESWHITE = [
'C1',
'D1',
'E1',
'E#1',
'G1',
'A1',
'B1',
'C2',
'D2',
'E2',
'E#2',
'G2',
'A2',
'B2',
];
const NOTESCC = ['C#1'];
const NOTESDD = ['D#1'];
const NOTESFF = ['F#1'];
const NOTESGG = ['G#1'];
const NOTESAA = ['A#1'];
const NOTESCC1 = ['C#2'];
const NOTESDD1 = ['D#2'];
const NOTESFF1 = ['F#2'];
const NOTESGG1 = ['G#2'];
const NOTESAA1 = ['A#2'];
const keywordsList = [];
export default class Quiz18 extends Component {
constructor(props: Object) {
super(props);
this.state = {
timer: 0,
correct: 0,
wrong: 0,
keywordsList: '',
};
}
toggleKeyword = (keyword) => {
let list = keywordsList;
let index = -1;
if ((index = keywordsList.indexOf(keyword)) !== -1) {
list.splice(index, 1);
console.log(list);
} else {
list.push(keyword);
console.log(list);
}
this.setState({keywordsList: list});
};
//reset
removeArray = () => {
keywordsList.splice(0, keywordsList.length);
console.log(keywordsList);
this.setState({
timer: 0,
});
clearInterval(this._interval);
};
onSubmit = () => {
console.log(keywordsList.toString());
const fullnotes = keywordsList.toString();
if (
fullnotes.includes('F#1') &&
fullnotes.includes('G#1') &&
fullnotes.includes('A#1') &&
fullnotes.includes('B1') &&
fullnotes.includes('C#2') &&
fullnotes.includes('D#2') &&
fullnotes.includes('E#2') &&
fullnotes.includes('F#2')
) {
//if (keywordsList.toString() === 'F#1,G#1,A#1,B1,C#2,D#2,E#2,F#2') {
this.setState({
timer: 0,
});
clearInterval(this._interval);
Alert.alert('Correct!');
keywordsList.splice(0, keywordsList.length);
this.props.navigation.navigate('q19', {
c: this.state.correct + 2,
w: this.state.wrong,
});
} else {
console.log('wrong');
this.setState({
timer: 0,
});
clearInterval(this._interval);
keywordsList.splice(0, keywordsList.length);
Alert.alert('Wrong!');
this.props.navigation.navigate('q19', {
c: this.state.correct,
w: this.state.wrong + 1,
});
}
};
componentDidMount() {
Orientation.lockToLandscape();
this.setState({
correct: this.props.route.params.c,
wrong: this.props.route.params.w,
});
this.interval = setInterval(
() => this.setState((prevState) => ({timer: prevState.timer + 1})),
1500,
);
}
componentWillUnmount() {
clearInterval(this.interval);
}
';';
render() {
const {
container,
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}>
<View style={styles.c1}>
<View style={styles.cc1}>
<Text style={styles.correct}>Correct : {this.state.correct}</Text>
<Text style={styles.wrong}>
Wrong :{'\n'}
{this.state.wrong}
</Text>
<Text style={styles.timer}>
Timer :{'\n'}
{this.state.timer}
</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>
</View>
<Image
style={styles.logo}
source={require('../img/bass_fsmajor.png')}
/>
</View>
<View style={styles.c2}>
{NOTESWHITE.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? selectedKeywordStyle
: buttonStyle
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB1
: buttonB1
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB2
: buttonB2
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB3
: buttonB3
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB4
: buttonB4
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB5
: buttonB5
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB11
: buttonB11
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB21
: buttonB21
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB31
: buttonB31
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB41
: buttonB41
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB51
: buttonB51
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
</View>
</View>
);
}
}
screens/quiz19.js 0 → 100644
View file @ ff265d54
/* eslint-disable prettier/prettier */
/* eslint-disable react/no-did-mount-set-state */
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
TouchableHighlight,
ImageBackground,
Image,
Button,
Alert,
} from 'react-native';
import styles from '../style/style';
import {useNavigation} from '@react-navigation/native';
const NOTESWHITE = [
'C1',
'D1',
'E1',
'F1',
'G1',
'A1',
'B1',
'C2',
'D2',
'E2',
'F2',
'G2',
'A2',
'B2',
];
const NOTESCC = ['Db1'];
const NOTESDD = ['Eb1'];
const NOTESFF = ['Gb1'];
const NOTESGG = ['Ab1'];
const NOTESAA = ['Bb1'];
const NOTESCC1 = ['Db2'];
const NOTESDD1 = ['Eb2'];
const NOTESFF1 = ['Gb2'];
const NOTESGG1 = ['Ab2'];
const NOTESAA1 = ['Bb2'];
const keywordsList = [];
export default class Quiz19 extends Component {
constructor(props: Object) {
super(props);
this.state = {
timer: 0,
correct: 0,
wrong: 0,
keywordsList: '',
};
}
toggleKeyword = (keyword) => {
let list = keywordsList;
let index = -1;
if ((index = keywordsList.indexOf(keyword)) !== -1) {
list.splice(index, 1);
console.log(list);
} else {
list.push(keyword);
console.log(list);
}
this.setState({keywordsList: list});
};
//reset
removeArray = () => {
keywordsList.splice(0, keywordsList.length);
console.log(keywordsList);
this.setState({
timer: 0,
});
clearInterval(this._interval);
};
onSubmit = () => {
console.log(keywordsList.toString());
const fullnotes = keywordsList.toString();
if (
fullnotes.includes('F1') &&
fullnotes.includes('G1') &&
fullnotes.includes('A1') &&
fullnotes.includes('Bb1') &&
fullnotes.includes('C2') &&
fullnotes.includes('D2') &&
fullnotes.includes('E2') &&
fullnotes.includes('F2')
) {
//if (keywordsList.toString() === 'F1,G1,A1,Bb1,C2,D2,E2,F2') {
this.setState({
timer: 0,
});
clearInterval(this._interval);
Alert.alert('Correct!');
keywordsList.splice(0, keywordsList.length);
this.props.navigation.navigate('q20', {
c: this.state.correct + 2,
w: this.state.wrong,
});
} else {
console.log('wrong');
this.setState({
timer: 0,
});
clearInterval(this._interval);
keywordsList.splice(0, keywordsList.length);
Alert.alert('Wrong!');
this.props.navigation.navigate('q20', {
c: this.state.correct,
w: this.state.wrong + 1,
});
}
};
componentDidMount() {
this.setState({
correct: this.props.route.params.c,
wrong: this.props.route.params.w,
});
this.interval = setInterval(
() => this.setState((prevState) => ({timer: prevState.timer + 1})),
1500,
);
}
componentWillUnmount() {
clearInterval(this.interval);
}
';';
render() {
const {
container,
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}>
<View style={styles.c1}>
<View style={styles.cc1}>
<Text style={styles.correct}>Correct : {this.state.correct}</Text>
<Text style={styles.wrong}>
Wrong :{'\n'}
{this.state.wrong}
</Text>
<Text style={styles.timer}>
Timer :{'\n'}
{this.state.timer}
</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>
</View>
<Image
style={styles.logo}
source={require('../img/bass_fmajor.png')}
/>
</View>
<View style={styles.c2}>
{NOTESWHITE.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? selectedKeywordStyle
: buttonStyle
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB1
: buttonB1
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB2
: buttonB2
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB3
: buttonB3
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB4
: buttonB4
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB5
: buttonB5
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB11
: buttonB11
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB21
: buttonB21
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB31
: buttonB31
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB41
: buttonB41
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB51
: buttonB51
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
</View>
</View>
);
}
}
screens/quiz20.js 0 → 100644
View file @ ff265d54
/* eslint-disable prettier/prettier */
/* eslint-disable react/no-did-mount-set-state */
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
TouchableHighlight,
ImageBackground,
Image,
Button,
Alert,
} from 'react-native';
import styles from '../style/style';
import {useNavigation} from '@react-navigation/native';
const NOTESWHITE = [
'C1',
'D1',
'E1',
'F1',
'G1',
'A1',
'B1',
'C2',
'D2',
'E2',
'F2',
'G2',
'A2',
'B2',
];
const NOTESCC = ['Db1'];
const NOTESDD = ['Eb1'];
const NOTESFF = ['Gb1'];
const NOTESGG = ['Ab1'];
const NOTESAA = ['Bb1'];
const NOTESCC1 = ['Db2'];
const NOTESDD1 = ['Eb2'];
const NOTESFF1 = ['Gb2'];
const NOTESGG1 = ['Ab2'];
const NOTESAA1 = ['Bb2'];
const keywordsList = [];
export default class Quiz20 extends Component {
constructor(props: Object) {
super(props);
this.state = {
timer: 0,
correct: 0,
wrong: 0,
keywordsList: '',
};
}
toggleKeyword = (keyword) => {
let list = keywordsList;
let index = -1;
if ((index = keywordsList.indexOf(keyword)) !== -1) {
list.splice(index, 1);
console.log(list);
} else {
list.push(keyword);
console.log(list);
}
this.setState({keywordsList: list});
};
//reset
removeArray = () => {
keywordsList.splice(0, keywordsList.length);
console.log(keywordsList);
this.setState({
timer: 0,
});
clearInterval(this._interval);
};
onSubmit = () => {
console.log(keywordsList.toString());
const fullnotes = keywordsList.toString();
if (
fullnotes.includes('Eb1') &&
fullnotes.includes('F1') &&
fullnotes.includes('G1') &&
fullnotes.includes('Ab1') &&
fullnotes.includes('Bb1') &&
fullnotes.includes('C2') &&
fullnotes.includes('D2') &&
fullnotes.includes('Eb2')
) {
// if (keywordsList.toString() === 'Eb1,F1,G1,Ab1,Bb1,C2,D2,Eb2') {
this.setState({
timer: 0,
});
clearInterval(this._interval);
Alert.alert('Correct!');
keywordsList.splice(0, keywordsList.length);
this.props.navigation.navigate('q21', {
c: this.state.correct + 2,
w: this.state.wrong,
});
} else {
console.log('wrong');
this.setState({
timer: 0,
});
clearInterval(this._interval);
keywordsList.splice(0, keywordsList.length);
Alert.alert('Wrong!');
this.props.navigation.navigate('q21', {
c: this.state.correct,
w: this.state.wrong + 1,
});
}
};
componentDidMount() {
this.setState({
correct: this.props.route.params.c,
wrong: this.props.route.params.w,
});
this.interval = setInterval(
() => this.setState((prevState) => ({timer: prevState.timer + 1})),
1500,
);
}
componentWillUnmount() {
clearInterval(this.interval);
}
';';
render() {
const {
container,
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}>
<View style={styles.c1}>
<View style={styles.cc1}>
<Text style={styles.correct}>Correct : {this.state.correct}</Text>
<Text style={styles.wrong}>
Wrong :{'\n'}
{this.state.wrong}
</Text>
<Text style={styles.timer}>
Timer :{'\n'}
{this.state.timer}
</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>
</View>
<Image
style={styles.logo}
source={require('../img/bass_eflat.png')}
/>
</View>
<View style={styles.c2}>
{NOTESWHITE.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? selectedKeywordStyle
: buttonStyle
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB1
: buttonB1
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB2
: buttonB2
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB3
: buttonB3
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB4
: buttonB4
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB5
: buttonB5
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB11
: buttonB11
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB21
: buttonB21
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB31
: buttonB31
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB41
: buttonB41
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB51
: buttonB51
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
</View>
</View>
);
}
}
screens/quiz21.js 0 → 100644
View file @ ff265d54
/* eslint-disable prettier/prettier */
/* eslint-disable react/no-did-mount-set-state */
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
TouchableHighlight,
ImageBackground,
Image,
Button,
Alert,
} from 'react-native';
import styles from '../style/style';
import {useNavigation} from '@react-navigation/native';
const NOTESWHITE = [
'C1',
'D1',
'E1',
'F1',
'G1',
'A1',
'B1',
'C2',
'D2',
'E2',
'F2',
'G2',
'A2',
'B2',
];
const NOTESCC = ['Db1'];
const NOTESDD = ['Eb1'];
const NOTESFF = ['Gb1'];
const NOTESGG = ['Ab1'];
const NOTESAA = ['Bb1'];
const NOTESCC1 = ['Db2'];
const NOTESDD1 = ['Eb2'];
const NOTESFF1 = ['Gb2'];
const NOTESGG1 = ['Ab2'];
const NOTESAA1 = ['Bb2'];
const keywordsList = [];
export default class Quiz21 extends Component {
constructor(props: Object) {
super(props);
this.state = {
timer: 0,
correct: 0,
wrong: 0,
keywordsList: '',
};
}
toggleKeyword = (keyword) => {
let list = keywordsList;
let index = -1;
if ((index = keywordsList.indexOf(keyword)) !== -1) {
list.splice(index, 1);
console.log(list);
} else {
list.push(keyword);
console.log(list);
}
this.setState({keywordsList: list});
};
//reset
removeArray = () => {
keywordsList.splice(0, keywordsList.length);
console.log(keywordsList);
this.setState({
timer: 0,
});
clearInterval(this._interval);
};
onSubmit = () => {
console.log(keywordsList.toString());
const fullnotes = keywordsList.toString();
if (
fullnotes.includes('Db1') &&
fullnotes.includes('Eb1') &&
fullnotes.includes('F1') &&
fullnotes.includes('Gb1') &&
fullnotes.includes('Ab1') &&
fullnotes.includes('Bb1') &&
fullnotes.includes('C2') &&
fullnotes.includes('Db2')
) {
//if (keywordsList.toString() === 'Db1,Eb1,F1,Gb1,Ab1,Bb1,C2,Db2') {
this.setState({
timer: 0,
});
clearInterval(this._interval);
Alert.alert('Correct!');
keywordsList.splice(0, keywordsList.length);
this.props.navigation.navigate('q22', {
c: this.state.correct + 2,
w: this.state.wrong,
});
} else {
console.log('wrong');
this.setState({
timer: 0,
});
clearInterval(this._interval);
keywordsList.splice(0, keywordsList.length);
Alert.alert('Wrong!');
this.props.navigation.navigate('q22', {
c: this.state.correct,
w: this.state.wrong + 1,
});
}
};
componentDidMount() {
this.setState({
correct: this.props.route.params.c,
wrong: this.props.route.params.w,
});
this.interval = setInterval(
() => this.setState((prevState) => ({timer: prevState.timer + 1})),
1500,
);
}
componentWillUnmount() {
clearInterval(this.interval);
}
';';
render() {
const {
container,
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}>
<View style={styles.c1}>
<View style={styles.cc1}>
<Text style={styles.correct}>Correct : {this.state.correct}</Text>
<Text style={styles.wrong}>
Wrong :{'\n'}
{this.state.wrong}
</Text>
<Text style={styles.timer}>
Timer :{'\n'}
{this.state.timer}
</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>
</View>
<Image
style={styles.logo}
source={require('../img/bass_dflat.png')}
/>
</View>
<View style={styles.c2}>
{NOTESWHITE.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? selectedKeywordStyle
: buttonStyle
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB1
: buttonB1
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB2
: buttonB2
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB3
: buttonB3
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB4
: buttonB4
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB5
: buttonB5
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB11
: buttonB11
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB21
: buttonB21
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB31
: buttonB31
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB41
: buttonB41
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB51
: buttonB51
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
</View>
</View>
);
}
}
screens/quiz22.js 0 → 100644
View file @ ff265d54
/* eslint-disable prettier/prettier */
/* eslint-disable react/no-did-mount-set-state */
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
TouchableHighlight,
ImageBackground,
Image,
Button,
Alert,
} from 'react-native';
import styles from '../style/style';
import {useNavigation} from '@react-navigation/native';
const NOTESWHITE = [
'C1',
'D1',
'E1',
'F1',
'G1',
'A1',
'B1',
'C2',
'D2',
'E2',
'F2',
'G2',
'A2',
'B2',
];
const NOTESCC = ['C#1'];
const NOTESDD = ['D#1'];
const NOTESFF = ['F#1'];
const NOTESGG = ['G#1'];
const NOTESAA = ['A#1'];
const NOTESCC1 = ['C#2'];
const NOTESDD1 = ['D#2'];
const NOTESFF1 = ['F#2'];
const NOTESGG1 = ['G#2'];
const NOTESAA1 = ['A#2'];
const keywordsList = [];
export default class Quiz22 extends Component {
constructor(props: Object) {
super(props);
this.state = {
timer: 0,
correct: 0,
wrong: 0,
keywordsList: '',
};
}
toggleKeyword = (keyword) => {
let list = keywordsList;
let index = -1;
if ((index = keywordsList.indexOf(keyword)) !== -1) {
list.splice(index, 1);
console.log(list);
} else {
list.push(keyword);
console.log(list);
}
this.setState({keywordsList: list});
};
//reset
removeArray = () => {
keywordsList.splice(0, keywordsList.length);
console.log(keywordsList);
this.setState({
timer: 0,
});
clearInterval(this._interval);
};
onSubmit = () => {
console.log(keywordsList.toString());
const fullnotes = keywordsList.toString();
if (
fullnotes.includes('G1') &&
fullnotes.includes('A1') &&
fullnotes.includes('B1') &&
fullnotes.includes('C2') &&
fullnotes.includes('D2') &&
fullnotes.includes('E2') &&
fullnotes.includes('F#2') &&
fullnotes.includes('G2')
) {
//if (keywordsList.toString() === 'G1,A1,B1,C2,D2,E2,F#2,G2') {
this.setState({
timer: 0,
});
clearInterval(this._interval);
Alert.alert('Correct!');
keywordsList.splice(0, keywordsList.length);
this.props.navigation.navigate('q23', {
c: this.state.correct + 2,
w: this.state.wrong,
});
} else {
console.log('wrong');
this.setState({
timer: 0,
});
clearInterval(this._interval);
keywordsList.splice(0, keywordsList.length);
Alert.alert('Wrong!');
this.props.navigation.navigate('q23', {
c: this.state.correct,
w: this.state.wrong + 1,
});
}
};
componentDidMount() {
this.setState({
correct: this.props.route.params.c,
wrong: this.props.route.params.w,
});
this.interval = setInterval(
() => this.setState((prevState) => ({timer: prevState.timer + 1})),
1500,
);
}
componentWillUnmount() {
clearInterval(this.interval);
}
';';
render() {
const {
container,
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}>
<View style={styles.c1}>
<View style={styles.cc1}>
<Text style={styles.correct}>Correct : {this.state.correct}</Text>
<Text style={styles.wrong}>
Wrong :{'\n'}
{this.state.wrong}
</Text>
<Text style={styles.timer}>
Timer :{'\n'}
{this.state.timer}
</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>
</View>
<Image
style={styles.logo}
source={require('../img/bass_gmajor.png')}
/>
</View>
<View style={styles.c2}>
{NOTESWHITE.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? selectedKeywordStyle
: buttonStyle
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB1
: buttonB1
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB2
: buttonB2
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB3
: buttonB3
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB4
: buttonB4
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB5
: buttonB5
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB11
: buttonB11
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB21
: buttonB21
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB31
: buttonB31
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB41
: buttonB41
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB51
: buttonB51
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
</View>
</View>
);
}
}
screens/quiz23.js 0 → 100644
View file @ ff265d54
/* eslint-disable prettier/prettier */
/* eslint-disable react/no-did-mount-set-state */
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
TouchableHighlight,
ImageBackground,
Image,
Button,
Alert,
} from 'react-native';
import styles from '../style/style';
import {useNavigation} from '@react-navigation/native';
const NOTESWHITE = [
'C1',
'D1',
'E1',
'F1',
'G1',
'A1',
'B1',
'C2',
'D2',
'E2',
'F2',
'G2',
'A2',
'B2',
];
const NOTESCC = ['C#1'];
const NOTESDD = ['D#1'];
const NOTESFF = ['F#1'];
const NOTESGG = ['G#1'];
const NOTESAA = ['A#1'];
const NOTESCC1 = ['C#2'];
const NOTESDD1 = ['D#2'];
const NOTESFF1 = ['F#2'];
const NOTESGG1 = ['G#2'];
const NOTESAA1 = ['A#2'];
const keywordsList = [];
export default class Quiz23 extends Component {
constructor(props: Object) {
super(props);
this.state = {
timer: 0,
correct: 0,
wrong: 0,
keywordsList: '',
};
}
toggleKeyword = (keyword) => {
let list = keywordsList;
let index = -1;
if ((index = keywordsList.indexOf(keyword)) !== -1) {
list.splice(index, 1);
console.log(list);
} else {
list.push(keyword);
console.log(list);
}
this.setState({keywordsList: list});
};
//reset
removeArray = () => {
keywordsList.splice(0, keywordsList.length);
console.log(keywordsList);
this.setState({
timer: 0,
});
clearInterval(this._interval);
};
onSubmit = () => {
console.log(keywordsList.toString());
const fullnotes = keywordsList.toString();
if (
fullnotes.includes('A1') &&
fullnotes.includes('B1') &&
fullnotes.includes('C#2') &&
fullnotes.includes('D2') &&
fullnotes.includes('E2') &&
fullnotes.includes('F#2') &&
fullnotes.includes('G#2') &&
fullnotes.includes('A2')
) {
// if (keywordsList.toString() === 'A1,B1,C#2,D2,E2,F#2,G#2,A2') {
this.setState((prevState) => ({
timer: 0,
}));
clearInterval(this.interval);
Alert.alert('Correct!');
keywordsList.splice(0, keywordsList.length);
this.props.navigation.navigate('q24', {
c: this.state.correct + 2,
w: this.state.wrong,
});
} else {
console.log('wrong');
this.setState((prevState) => ({
timer: 0,
}));
clearInterval(this.interval);
keywordsList.splice(0, keywordsList.length);
Alert.alert('Wrong!');
this.props.navigation.navigate('q24', {
c: this.state.correct,
w: this.state.wrong + 1,
});
}
};
componentDidMount() {
this.setState({
correct: this.props.route.params.c,
wrong: this.props.route.params.w,
});
this.interval = setInterval(
() => this.setState((prevState) => ({timer: prevState.timer + 1})),
1500,
);
}
componentWillUnmount() {
clearInterval(this.interval);
}
';';
render() {
const {
container,
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}>
<View style={styles.c1}>
<View style={styles.cc1}>
<Text style={styles.correct}>Correct : {this.state.correct}</Text>
<Text style={styles.wrong}>
Wrong :{'\n'}
{this.state.wrong}
</Text>
<Text style={styles.timer}>
Timer :{'\n'}
{this.state.timer}
</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>
</View>
<Image
style={styles.logo}
source={require('../img/bass_amajor.png')}
/>
</View>
<View style={styles.c2}>
{NOTESWHITE.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? selectedKeywordStyle
: buttonStyle
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB1
: buttonB1
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB2
: buttonB2
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB3
: buttonB3
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB4
: buttonB4
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB5
: buttonB5
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB11
: buttonB11
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB21
: buttonB21
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB31
: buttonB31
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB41
: buttonB41
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB51
: buttonB51
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
</View>
</View>
);
}
}
screens/quiz24.js 0 → 100644
View file @ ff265d54
/* eslint-disable prettier/prettier */
/* eslint-disable react/no-did-mount-set-state */
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
TouchableHighlight,
ImageBackground,
Image,
Button,
Alert,
} from 'react-native';
import styles from '../style/style';
import {useNavigation} from '@react-navigation/native';
const NOTESWHITE = [
'C1',
'D1',
'E1',
'F1',
'G1',
'A1',
'B1',
'C2',
'D2',
'E2',
'F2',
'G2',
'A2',
'B2',
];
const NOTESCC = ['C#1'];
const NOTESDD = ['D#1'];
const NOTESFF = ['F#1'];
const NOTESGG = ['G#1'];
const NOTESAA = ['A#1'];
const NOTESCC1 = ['C#2'];
const NOTESDD1 = ['D#2'];
const NOTESFF1 = ['F#2'];
const NOTESGG1 = ['G#2'];
const NOTESAA1 = ['A#2'];
const keywordsList = [];
export default class Quiz24 extends Component {
constructor(props: Object) {
super(props);
this.state = {
timer: 0,
correct: 0,
wrong: 0,
keywordsList: '',
};
}
toggleKeyword = (keyword) => {
let list = keywordsList;
let index = -1;
if ((index = keywordsList.indexOf(keyword)) !== -1) {
list.splice(index, 1);
console.log(list);
} else {
list.push(keyword);
console.log(list);
}
this.setState({keywordsList: list});
};
//reset
removeArray = () => {
keywordsList.splice(0, keywordsList.length);
console.log(keywordsList);
this.setState({
timer: 0,
});
clearInterval(this._interval);
};
onSubmit = () => {
console.log(keywordsList.toString());
const fullnotes = keywordsList.toString();
if (
fullnotes.includes('B1') &&
fullnotes.includes('C#2') &&
fullnotes.includes('D#2') &&
fullnotes.includes('E2') &&
fullnotes.includes('F#2') &&
fullnotes.includes('G#2') &&
fullnotes.includes('A#2') &&
fullnotes.includes('B2')
) {
// if (keywordsList.toString() === 'B1,C#2,D#2,E2,F#2,G#2,A#2,B2') {
this.setState({
timer: 0,
});
clearInterval(this._interval);
Alert.alert('Correct!');
keywordsList.splice(0, keywordsList.length);
this.props.navigation.navigate('q25', {
c: this.state.correct + 2,
w: this.state.wrong,
});
} else {
console.log('wrong');
this.setState({
timer: 0,
});
clearInterval(this._interval);
keywordsList.splice(0, keywordsList.length);
Alert.alert('Wrong!');
this.props.navigation.navigate('q25', {
c: this.state.correct,
w: this.state.wrong + 1,
});
}
};
componentDidMount() {
this.setState({
correct: this.props.route.params.c,
wrong: this.props.route.params.w,
});
this.interval = setInterval(
() => this.setState((prevState) => ({timer: prevState.timer + 1})),
1500,
);
}
componentWillUnmount() {
clearInterval(this.interval);
}
';';
render() {
const {
container,
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}>
<View style={styles.c1}>
<View style={styles.cc1}>
<Text style={styles.correct}>Correct : {this.state.correct}</Text>
<Text style={styles.wrong}>
Wrong :{'\n'}
{this.state.wrong}
</Text>
<Text style={styles.timer}>
Timer :{'\n'}
{this.state.timer}
</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>
</View>
<Image
style={styles.logo}
source={require('../img/bass_bmajor.png')}
/>
</View>
<View style={styles.c2}>
{NOTESWHITE.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? selectedKeywordStyle
: buttonStyle
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB1
: buttonB1
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB2
: buttonB2
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB3
: buttonB3
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB4
: buttonB4
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB5
: buttonB5
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB11
: buttonB11
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB21
: buttonB21
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB31
: buttonB31
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB41
: buttonB41
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB51
: buttonB51
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
</View>
</View>
);
}
}
screens/quiz25.js 0 → 100644
View file @ ff265d54
/* eslint-disable prettier/prettier */
/* eslint-disable react/no-did-mount-set-state */
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
TouchableHighlight,
ImageBackground,
Image,
Button,
Alert,
} from 'react-native';
import styles from '../style/style';
import {useNavigation} from '@react-navigation/native';
const NOTESWHITE = [
'B#1',
'D1',
'E1',
'E#1',
'G1',
'A1',
'B1',
'B#2',
'D2',
'E2',
'E#2',
'G2',
'A2',
'B2',
];
const NOTESCC = ['C#1'];
const NOTESDD = ['D#1'];
const NOTESFF = ['F#1'];
const NOTESGG = ['G#1'];
const NOTESAA = ['A#1'];
const NOTESCC1 = ['C#2'];
const NOTESDD1 = ['D#2'];
const NOTESFF1 = ['F#2'];
const NOTESGG1 = ['G#2'];
const NOTESAA1 = ['A#2'];
const keywordsList = [];
export default class Quiz25 extends Component {
constructor(props: Object) {
super(props);
this.state = {
timer: 0,
correct: 0,
wrong: 0,
keywordsList: '',
};
}
toggleKeyword = (keyword) => {
let list = keywordsList;
let index = -1;
if ((index = keywordsList.indexOf(keyword)) !== -1) {
list.splice(index, 1);
console.log(list);
} else {
list.push(keyword);
console.log(list);
}
this.setState({keywordsList: list});
};
//reset
removeArray = () => {
keywordsList.splice(0, keywordsList.length);
console.log(keywordsList);
this.setState({
timer: 0,
});
clearInterval(this._interval);
};
onSubmit = () => {
console.log(keywordsList.toString());
const fullnotes = keywordsList.toString();
if (
fullnotes.includes('C#1') &&
fullnotes.includes('D#1') &&
fullnotes.includes('E#1') &&
fullnotes.includes('F#1') &&
fullnotes.includes('G#1') &&
fullnotes.includes('A#1') &&
fullnotes.includes('B#2') &&
fullnotes.includes('C#2')
) {
// if (keywordsList.toString() === 'C#1,D#1,E#1,F#1,G#1,A#1,B#2,C#2') {
this.setState({
timer: 0,
});
clearInterval(this._interval);
Alert.alert('Correct!');
keywordsList.splice(0, keywordsList.length);
this.props.navigation.navigate('q26', {
c: this.state.correct + 2,
w: this.state.wrong,
});
} else {
console.log('wrong');
this.setState({
timer: 0,
});
clearInterval(this._interval);
keywordsList.splice(0, keywordsList.length);
Alert.alert('Wrong!');
this.props.navigation.navigate('q26', {
c: this.state.correct,
w: this.state.wrong + 1,
});
}
};
componentDidMount() {
this.setState({
correct: this.props.route.params.c,
wrong: this.props.route.params.w,
});
this.interval = setInterval(
() => this.setState((prevState) => ({timer: prevState.timer + 1})),
1500,
);
}
componentWillUnmount() {
clearInterval(this.interval);
}
';';
render() {
const {
container,
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}>
<View style={styles.c1}>
<View style={styles.cc1}>
<Text style={styles.correct}>Correct : {this.state.correct}</Text>
<Text style={styles.wrong}>
Wrong :{'\n'}
{this.state.wrong}
</Text>
<Text style={styles.timer}>
Timer :{'\n'}
{this.state.timer}
</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>
</View>
<Image
style={styles.logo}
source={require('../img/bass_csmajor.png')}
/>
</View>
<View style={styles.c2}>
{NOTESWHITE.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? selectedKeywordStyle
: buttonStyle
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB1
: buttonB1
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB2
: buttonB2
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB3
: buttonB3
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB4
: buttonB4
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB5
: buttonB5
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB11
: buttonB11
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB21
: buttonB21
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB31
: buttonB31
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB41
: buttonB41
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB51
: buttonB51
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
</View>
</View>
);
}
}
screens/quiz26.js 0 → 100644
View file @ ff265d54
/* eslint-disable prettier/prettier */
/* eslint-disable react/no-did-mount-set-state */
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
TouchableHighlight,
ImageBackground,
Image,
Button,
Alert,
} from 'react-native';
import styles from '../style/style';
import {useNavigation} from '@react-navigation/native';
const NOTESWHITE = [
'C1',
'D1',
'E1',
'F1',
'G1',
'A1',
'B1',
'C2',
'D2',
'E2',
'F2',
'G2',
'A2',
'B2',
];
const NOTESCC = ['Db1'];
const NOTESDD = ['Eb1'];
const NOTESFF = ['Gb1'];
const NOTESGG = ['Ab1'];
const NOTESAA = ['Bb1'];
const NOTESCC1 = ['Db2'];
const NOTESDD1 = ['Eb2'];
const NOTESFF1 = ['Gb2'];
const NOTESGG1 = ['Ab2'];
const NOTESAA1 = ['Bb2'];
const keywordsList = [];
export default class Quiz26 extends Component {
constructor(props: Object) {
super(props);
this.state = {
timer: 0,
correct: 0,
wrong: 0,
keywordsList: '',
};
}
toggleKeyword = (keyword) => {
let list = keywordsList;
let index = -1;
if ((index = keywordsList.indexOf(keyword)) !== -1) {
list.splice(index, 1);
console.log(list);
} else {
list.push(keyword);
console.log(list);
}
this.setState({keywordsList: list});
};
//reset
removeArray = () => {
keywordsList.splice(0, keywordsList.length);
console.log(keywordsList);
this.setState({
timer: 0,
});
clearInterval(this._interval);
};
onSubmit = () => {
console.log(keywordsList.toString());
const fullnotes = keywordsList.toString();
if (
fullnotes.includes('Bb1') &&
fullnotes.includes('C2') &&
fullnotes.includes('D2') &&
fullnotes.includes('Eb2') &&
fullnotes.includes('F2') &&
fullnotes.includes('G2') &&
fullnotes.includes('A2') &&
fullnotes.includes('Bb2')
) {
//if (keywordsList.toString() === 'Bb1,C2,D2,Eb2,F2,G2,A2,Bb2') {
this.setState({
timer: 0,
});
clearInterval(this._interval);
Alert.alert('Correct!');
keywordsList.splice(0, keywordsList.length);
this.props.navigation.navigate('q27', {
c: this.state.correct + 2,
w: this.state.wrong,
});
} else {
console.log('wrong');
this.setState({
timer: 0,
});
clearInterval(this._interval);
keywordsList.splice(0, keywordsList.length);
Alert.alert('Wrong!');
this.props.navigation.navigate('q27', {
c: this.state.correct,
w: this.state.wrong + 1,
});
}
};
componentDidMount() {
this.setState({
correct: this.props.route.params.c,
wrong: this.props.route.params.w,
});
this.interval = setInterval(
() => this.setState((prevState) => ({timer: prevState.timer + 1})),
1500,
);
}
componentWillUnmount() {
clearInterval(this.interval);
}
';';
render() {
const {
container,
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}>
<View style={styles.c1}>
<View style={styles.cc1}>
<Text style={styles.correct}>Correct : {this.state.correct}</Text>
<Text style={styles.wrong}>
Wrong :{'\n'}
{this.state.wrong}
</Text>
<Text style={styles.timer}>
Timer :{'\n'}
{this.state.timer}
</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>
</View>
<Image
style={styles.logo}
source={require('../img/bass_bflat.png')}
/>
</View>
<View style={styles.c2}>
{NOTESWHITE.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? selectedKeywordStyle
: buttonStyle
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB1
: buttonB1
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB2
: buttonB2
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB3
: buttonB3
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB4
: buttonB4
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB5
: buttonB5
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB11
: buttonB11
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB21
: buttonB21
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB31
: buttonB31
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB41
: buttonB41
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB51
: buttonB51
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
</View>
</View>
);
}
}
screens/quiz27.js 0 → 100644
View file @ ff265d54
/* eslint-disable prettier/prettier */
/* eslint-disable react/no-did-mount-set-state */
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
TouchableHighlight,
ImageBackground,
Image,
Button,
Alert,
} from 'react-native';
import styles from '../style/style';
import {useNavigation} from '@react-navigation/native';
const NOTESWHITE = [
'C1',
'D1',
'E1',
'F1',
'G1',
'A1',
'B1',
'C2',
'D2',
'E2',
'F2',
'G2',
'A2',
'B2',
];
const NOTESCC = ['Db1'];
const NOTESDD = ['Eb1'];
const NOTESFF = ['Gb1'];
const NOTESGG = ['Ab1'];
const NOTESAA = ['Bb1'];
const NOTESCC1 = ['Db2'];
const NOTESDD1 = ['Eb2'];
const NOTESFF1 = ['Gb2'];
const NOTESGG1 = ['Ab2'];
const NOTESAA1 = ['Bb2'];
const keywordsList = [];
export default class Quiz27 extends Component {
constructor(props: Object) {
super(props);
this.state = {
timer: 0,
correct: 0,
wrong: 0,
keywordsList: '',
};
}
toggleKeyword = (keyword) => {
let list = keywordsList;
let index = -1;
if ((index = keywordsList.indexOf(keyword)) !== -1) {
list.splice(index, 1);
console.log(list);
} else {
list.push(keyword);
console.log(list);
}
this.setState({keywordsList: list});
};
//reset
removeArray = () => {
keywordsList.splice(0, keywordsList.length);
console.log(keywordsList);
this.setState({
timer: 0,
});
clearInterval(this._interval);
};
onSubmit = () => {
console.log(keywordsList.toString());
const fullnotes = keywordsList.toString();
if (
fullnotes.includes('Ab1') &&
fullnotes.includes('Bb1') &&
fullnotes.includes('C2') &&
fullnotes.includes('Db2') &&
fullnotes.includes('Eb2') &&
fullnotes.includes('F2') &&
fullnotes.includes('G2') &&
fullnotes.includes('Ab2')
) {
// if (keywordsList.toString() === 'Ab1,Bb1,C2,Db2,Eb2,F2,G2,Ab2') {
this.setState({
timer: 0,
});
clearInterval(this._interval);
Alert.alert('Correct!');
keywordsList.splice(0, keywordsList.length);
this.props.navigation.navigate('q28', {
c: this.state.correct + 2,
w: this.state.wrong,
});
} else {
console.log('wrong');
this.setState({
timer: 0,
});
clearInterval(this._interval);
keywordsList.splice(0, keywordsList.length);
Alert.alert('Wrong!');
this.props.navigation.navigate('q28', {
c: this.state.correct,
w: this.state.wrong + 1,
});
}
};
componentDidMount() {
this.setState({
correct: this.props.route.params.c,
wrong: this.props.route.params.w,
});
this.interval = setInterval(
() => this.setState((prevState) => ({timer: prevState.timer + 1})),
1500,
);
}
componentWillUnmount() {
clearInterval(this.interval);
}
';';
render() {
const {
container,
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}>
<View style={styles.c1}>
<View style={styles.cc1}>
<Text style={styles.correct}>Correct : {this.state.correct}</Text>
<Text style={styles.wrong}>
Wrong :{'\n'}
{this.state.wrong}
</Text>
<Text style={styles.timer}>
Timer :{'\n'}
{this.state.timer}
</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>
</View>
<Image
style={styles.logo}
source={require('../img/bass_aflat.png')}
/>
</View>
<View style={styles.c2}>
{NOTESWHITE.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? selectedKeywordStyle
: buttonStyle
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB1
: buttonB1
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB2
: buttonB2
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB3
: buttonB3
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB4
: buttonB4
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB5
: buttonB5
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESCC1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB11
: buttonB11
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESDD1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB21
: buttonB21
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESFF1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB31
: buttonB31
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESGG1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB41
: buttonB41
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
{NOTESAA1.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item)
? SbuttonB51
: buttonB51
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={textStyle}> </Text>
</TouchableHighlight>
))}
</View>
</View>
);
}
}
screens/quiz28.js 0 → 100644
View file @ ff265d54
This diff is collapsed.
screens/settings.js
View file @ ff265d54
...@@ -13,71 +13,17 @@ import { ...@@ -13,71 +13,17 @@ import {
Dimensions, Dimensions,
} from 'react-native'; } from 'react-native';
import Orientation from 'react-native-orientation'; import Orientation from 'react-native-orientation';
import Notes from './data';
const config = { const config = {
deviceWidth: Dimensions.get('window').width, deviceWidth: Dimensions.get('window').width,
deviceHeight: Dimensions.get('window').height, deviceHeight: Dimensions.get('window').height,
}; };
const NOTES = [
{
name: 'C Major',
image: require('../img/Cmajor.png'),
},
{
name: 'D Major',
image: require('../img/Dmajor.png'),
},
{
name: 'E Major',
image: require('../img/Emajor.png'),
},
{
name: 'F Sharp Major',
image: require('../img/Fsmajor.png'),
},
{
name: 'F Major',
image: require('../img/Fmajor.png'),
},
{
name: 'E Flat Major',
image: require('../img/Eflatmajor.png'),
},
{
name: 'D Flat Major',
image: require('../img/Dflatmajor.png'),
},
{
name: 'G Major',
image: require('../img/Gmajor.png'),
},
{
name: 'A Major',
image: require('../img/Amajor.png'),
},
{
name: 'B Major',
image: require('../img/Bmajor.png'),
},
{
name: 'C Sharp Major',
image: require('../img/Csmajor.png'),
},
{
name: 'B Flat Major',
image: require('../img/Bflatmajor.png'),
},
{
name: 'A Flat Major',
image: require('../img/Aflatmajor.png'),
},
];
const note = []; const note = [];
export default class Settings extends React.Component { class Settings extends React.PureComponent {
toggleKeyword = (keyword) => { toggleKeyword = (keyword) => {
let list = note; let list = note;
let index = -1; let index = -1;
if ((index = note.indexOf(keyword)) !== -1) { if ((index = note.indexOf(keyword)) !== -1) {
...@@ -86,6 +32,7 @@ export default class Settings extends React.Component { ...@@ -86,6 +32,7 @@ export default class Settings extends React.Component {
} else { } else {
list.push(keyword); list.push(keyword);
console.log(list); console.log(list);
//console.log(Notes.length);
} }
this.setState({note: list}); this.setState({note: list});
}; };
...@@ -101,17 +48,21 @@ export default class Settings extends React.Component { ...@@ -101,17 +48,21 @@ export default class Settings extends React.Component {
source={require('../img/background.jpg')} source={require('../img/background.jpg')}
style={{width: config.deviceWidth, height: config.deviceHeight}}> style={{width: config.deviceWidth, height: config.deviceHeight}}>
<SafeAreaView> <SafeAreaView>
<ScrollView style={{marginTop: '10%'}}> <ScrollView
style={{
marginTop: 50,
marginLeft: 5,
marginRight: 5,
}}>
<View <View
style={{ style={{
flexDirection: 'row', flexDirection: 'row',
flexWrap: 'wrap', flexWrap: 'wrap',
width: config.deviceWidth, width: config.deviceWidth,
marginTop: 40,
marginLeft: config.deviceWidth * 0.08, marginLeft: config.deviceWidth * 0.08,
marginRight: config.deviceWidth * 0.1, marginRight: config.deviceWidth * 0.1,
}}> }}>
{NOTES.map((item, id) => ( {Notes.map((item, id) => (
<View key={id}> <View key={id}>
<TouchableOpacity <TouchableOpacity
style={ style={
...@@ -142,6 +93,7 @@ export default class Settings extends React.Component { ...@@ -142,6 +93,7 @@ export default class Settings extends React.Component {
); );
} }
} }
export default Settings;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
...@@ -175,3 +127,4 @@ const styles = StyleSheet.create({ ...@@ -175,3 +127,4 @@ const styles = StyleSheet.create({
padding: 10, padding: 10,
}, },
}); });
style/style.js
View file @ ff265d54
...@@ -46,13 +46,13 @@ export default StyleSheet.create({ ...@@ -46,13 +46,13 @@ export default StyleSheet.create({
fontSize: 15, fontSize: 15,
}, },
logo: { logo: {
height: config.deviceWidth * 0.5, height: config.deviceWidth * 0.22,
width: config.deviceHeight * 0.3, width: config.deviceHeight * 0.5,
borderColor: 'black', borderColor: 'black',
borderWidth: 3, borderWidth: 3,
borderRadius: 10, borderRadius: 10,
position: 'absolute', position: 'absolute',
marginTop: config.deviceWidth * 0.15, marginTop: config.deviceWidth * 0.1,
}, },
correct: { correct: {
width: 65, width: 65,
...@@ -108,10 +108,10 @@ export default StyleSheet.create({ ...@@ -108,10 +108,10 @@ export default StyleSheet.create({
}, },
buttonView: { buttonView: {
flexDirection: 'column', flexDirection: 'column',
marginLeft: config.deviceHeight * 0.7, marginLeft: config.deviceHeight * 1.0,
}, },
buttonStyle: { buttonStyle: {
width: config.deviceHeight * 0.074, width: config.deviceWidth * 0.072,
alignItems: 'center', alignItems: 'center',
backgroundColor: 'white', backgroundColor: 'white',
borderRightWidth: 1, borderRightWidth: 1,
...@@ -119,7 +119,7 @@ export default StyleSheet.create({ ...@@ -119,7 +119,7 @@ export default StyleSheet.create({
borderBottomWidth: 1, borderBottomWidth: 1,
}, },
selectedKeywordStyle: { selectedKeywordStyle: {
width: config.deviceHeight * 0.074, width: config.deviceWidth * 0.072,
alignItems: 'center', alignItems: 'center',
backgroundColor: '#EEA1E1', backgroundColor: '#EEA1E1',
borderRightWidth: 1, borderRightWidth: 1,
...@@ -130,7 +130,7 @@ export default StyleSheet.create({ ...@@ -130,7 +130,7 @@ export default StyleSheet.create({
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black', backgroundColor: 'black',
height: '65%', height: '65%',
marginLeft: config.deviceHeight * 0.05, marginLeft: config.deviceWidth * 0.047,
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
}, },
...@@ -139,7 +139,7 @@ export default StyleSheet.create({ ...@@ -139,7 +139,7 @@ export default StyleSheet.create({
backgroundColor: 'black', backgroundColor: 'black',
height: '65%', height: '65%',
width: '5%', width: '5%',
marginLeft: config.deviceHeight * 0.122, marginLeft: config.deviceWidth * 0.119,
position: 'absolute', position: 'absolute',
}, },
buttonB3: { buttonB3: {
...@@ -147,7 +147,7 @@ export default StyleSheet.create({ ...@@ -147,7 +147,7 @@ export default StyleSheet.create({
backgroundColor: 'black', backgroundColor: 'black',
height: '65%', height: '65%',
width: '5%', width: '5%',
marginLeft: config.deviceHeight * 0.27, marginLeft: config.deviceWidth * 0.26,
position: 'absolute', position: 'absolute',
}, },
...@@ -156,7 +156,7 @@ export default StyleSheet.create({ ...@@ -156,7 +156,7 @@ export default StyleSheet.create({
backgroundColor: 'black', backgroundColor: 'black',
width: '5%', width: '5%',
height: '65%', height: '65%',
marginLeft: config.deviceHeight * 0.345, marginLeft: config.deviceWidth * 0.335,
position: 'absolute', position: 'absolute',
}, },
buttonB5: { buttonB5: {
...@@ -165,14 +165,14 @@ export default StyleSheet.create({ ...@@ -165,14 +165,14 @@ export default StyleSheet.create({
width: '5%', width: '5%',
height: '65%', height: '65%',
marginBottom: 10, marginBottom: 10,
marginLeft: config.deviceHeight * 0.417, marginLeft: config.deviceWidth * 0.406,
position: 'absolute', position: 'absolute',
}, },
SbuttonB1: { SbuttonB1: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'blue', backgroundColor: 'blue',
height: '65%', height: '65%',
marginLeft: config.deviceHeight * 0.05, marginLeft: config.deviceWidth * 0.047,
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
}, },
...@@ -181,7 +181,7 @@ export default StyleSheet.create({ ...@@ -181,7 +181,7 @@ export default StyleSheet.create({
backgroundColor: 'blue', backgroundColor: 'blue',
height: '65%', height: '65%',
width: '5%', width: '5%',
marginLeft: config.deviceHeight * 0.122, marginLeft: config.deviceWidth * 0.119,
position: 'absolute', position: 'absolute',
}, },
SbuttonB3: { SbuttonB3: {
...@@ -189,7 +189,7 @@ export default StyleSheet.create({ ...@@ -189,7 +189,7 @@ export default StyleSheet.create({
backgroundColor: 'blue', backgroundColor: 'blue',
height: '65%', height: '65%',
width: '5%', width: '5%',
marginLeft: config.deviceHeight * 0.27, marginLeft: config.deviceWidth * 0.26,
position: 'absolute', position: 'absolute',
}, },
SbuttonB4: { SbuttonB4: {
...@@ -197,7 +197,7 @@ export default StyleSheet.create({ ...@@ -197,7 +197,7 @@ export default StyleSheet.create({
backgroundColor: 'blue', backgroundColor: 'blue',
width: '5%', width: '5%',
height: '65%', height: '65%',
marginLeft: config.deviceHeight * 0.345, marginLeft: config.deviceWidth * 0.335,
position: 'absolute', position: 'absolute',
}, },
SbuttonB5: { SbuttonB5: {
...@@ -205,7 +205,7 @@ export default StyleSheet.create({ ...@@ -205,7 +205,7 @@ export default StyleSheet.create({
backgroundColor: 'blue', backgroundColor: 'blue',
width: '5%', width: '5%',
height: '65%', height: '65%',
marginLeft: config.deviceHeight * 0.417, marginLeft: config.deviceWidth * 0.406,
position: 'absolute', position: 'absolute',
}, },
...@@ -213,7 +213,7 @@ export default StyleSheet.create({ ...@@ -213,7 +213,7 @@ export default StyleSheet.create({
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black', backgroundColor: 'black',
height: '65%', height: '65%',
marginLeft: config.deviceHeight * 0.565, marginLeft: config.deviceWidth * 0.55,
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
}, },
...@@ -221,7 +221,7 @@ export default StyleSheet.create({ ...@@ -221,7 +221,7 @@ export default StyleSheet.create({
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black', backgroundColor: 'black',
height: '65%', height: '65%',
marginLeft: config.deviceHeight * 0.64, marginLeft: config.deviceWidth * 0.623,
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
}, },
...@@ -229,7 +229,7 @@ export default StyleSheet.create({ ...@@ -229,7 +229,7 @@ export default StyleSheet.create({
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black', backgroundColor: 'black',
height: '65%', height: '65%',
marginLeft: config.deviceHeight * 0.787, marginLeft: config.deviceWidth * 0.767,
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
}, },
...@@ -239,7 +239,7 @@ export default StyleSheet.create({ ...@@ -239,7 +239,7 @@ export default StyleSheet.create({
backgroundColor: 'black', backgroundColor: 'black',
width: '5%', width: '5%',
height: '65%', height: '65%',
marginLeft: config.deviceHeight * 0.862, marginLeft: config.deviceWidth * 0.839,
position: 'absolute', position: 'absolute',
}, },
buttonB51: { buttonB51: {
...@@ -248,14 +248,14 @@ export default StyleSheet.create({ ...@@ -248,14 +248,14 @@ export default StyleSheet.create({
width: '5%', width: '5%',
height: '65%', height: '65%',
marginBottom: 10, marginBottom: 10,
marginLeft: config.deviceHeight * 0.935, marginLeft: config.deviceWidth * 0.91,
position: 'absolute', position: 'absolute',
}, },
SbuttonB11: { SbuttonB11: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'blue', backgroundColor: 'blue',
height: '65%', height: '65%',
marginLeft: config.deviceHeight * 0.565, marginLeft: config.deviceWidth * 0.55,
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
}, },
...@@ -263,7 +263,7 @@ export default StyleSheet.create({ ...@@ -263,7 +263,7 @@ export default StyleSheet.create({
alignItems: 'center', alignItems: 'center',
backgroundColor: 'blue', backgroundColor: 'blue',
height: '65%', height: '65%',
marginLeft: config.deviceHeight * 0.64, marginLeft: config.deviceWidth * 0.623,
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
}, },
...@@ -271,7 +271,7 @@ export default StyleSheet.create({ ...@@ -271,7 +271,7 @@ export default StyleSheet.create({
alignItems: 'center', alignItems: 'center',
backgroundColor: 'blue', backgroundColor: 'blue',
height: '65%', height: '65%',
marginLeft: config.deviceHeight * 0.787, marginLeft: config.deviceWidth * 0.767,
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
}, },
...@@ -280,7 +280,7 @@ export default StyleSheet.create({ ...@@ -280,7 +280,7 @@ export default StyleSheet.create({
backgroundColor: 'blue', backgroundColor: 'blue',
width: '5%', width: '5%',
height: '65%', height: '65%',
marginLeft: config.deviceHeight * 0.862, marginLeft: config.deviceWidth * 0.839,
position: 'absolute', position: 'absolute',
}, },
SbuttonB51: { SbuttonB51: {
...@@ -288,7 +288,7 @@ export default StyleSheet.create({ ...@@ -288,7 +288,7 @@ export default StyleSheet.create({
backgroundColor: 'blue', backgroundColor: 'blue',
width: '5%', width: '5%',
height: '65%', height: '65%',
marginLeft: config.deviceHeight * 0.935, marginLeft: config.deviceWidth * 0.91,
position: 'absolute', position: 'absolute',
}, },
boxScore: { boxScore: {
......
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