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 {
style={styles.menu}
onPress={() => {
this.props.navigation.navigate('q1');
Orientation.lockToPortrait();
//Orientation.lockToLandscape();
}}>
<Icon raised name="trophy" type="font-awesome" />
<Text>Quiz Time</Text>
<Text>Piano</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.menu}
onPress={() => this.props.navigation.navigate('3')}>
<Icon raised name="clipboard" type="font-awesome" />
<Text>My Record</Text>
<Text>Records</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.menu}
......@@ -85,5 +85,6 @@ const styles = StyleSheet.create({
borderRadius: 10,
borderWidth: 2,
borderColor: 'white',
backgroundColor: 'white',
},
});
screens/logbook.js
View file @ ff265d54
......@@ -6,10 +6,10 @@ import {
ImageBackground,
Text,
View,
TouchableOpacity,
//TouchableOpacity,
StyleSheet,
ScrollView,
Alert,
// Alert,
} from 'react-native';
//import {Icon} from 'react-native-elements';
//import AsyncStorage from '@react-native-async-storage/async-storage';
......@@ -17,24 +17,27 @@ import Orientation from 'react-native-orientation';
//import AsyncStorage from '@react-native-async-storage/async-storage';
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 {
constructor(props: Object) {
constructor(props) {
super(props);
this.state = {
logbook: '',
logbook: [],
correct: [],
};
}
displayData = async () => {
RNFS.readFile(path, 'ascii')
.then((res) => {
this.setState({
logbook: res,
logbook: res.split('\n'),
});
console.log(this.state.logbook);
// Alert.alert(res);
//var l = this.state.logbook.length;
console.log(res);
// console.log(this.state.logbook);
// console.log(l);
})
.catch((err) => {
console.log(err.message, err.code);
......@@ -55,9 +58,45 @@ class LogBook extends React.PureComponent {
height: '100%',
}}>
<SafeAreaView>
<View style={{marginTop: 100, marginLeft: 20}}>
<Text>{this.state.logbook}</Text>
</View>
<ScrollView
style={{
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>
</ImageBackground>
</View>
......
screens/quiz1.js
View file @ ff265d54
......@@ -132,6 +132,7 @@ export default class Quiz1 extends Component {
componentWillUnmount() {
clearInterval(this.interval);
// Orientation.lockToLandscape();
}
';';
......
screens/quiz14.js
View file @ ff265d54
......@@ -2,7 +2,7 @@
/* 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 {
......@@ -23,7 +23,7 @@ import Orientation from 'react-native-orientation';
var date = moment().utcOffset('+08:00').format('D MMM YYYY');
var time = moment().utcOffset('+08:00').format(' h:mm a');
var path = RNFS.DocumentDirectoryPath + '/test.js';
var path = RNFS.DocumentDirectoryPath + '/test.txt';
const NOTESWHITE = [
'C1',
......@@ -54,7 +54,7 @@ const NOTESAA1 = ['Bb2'];
const keywordsList = [];
export default class Quiz14 extends Component {
constructor(props: Object) {
constructor(props) {
super(props);
this.state = {
timer: 0,
......@@ -103,54 +103,55 @@ export default class Quiz14 extends Component {
timer: 0,
});
clearInterval(this._interval);
this.saveData(this.state.correct + 2, this.state.wrong, this.state.timer);
this.displayData();
// this.saveData(this.state.correct + 2, this.state.wrong, this.state.timer);
//this.displayData();
Alert.alert('Correct!');
keywordsList.splice(0, keywordsList.length);
this.props.navigation.navigate('1', {
this.props.navigation.navigate('q15', {
c: this.state.correct + 2,
w: this.state.wrong,
});
Orientation.lockToPortrait();
/* Orientation.lockToPortrait();
Alert.alert(
'Well Done',
'Correct: ' +
(this.state.correct + 2) +
'\n Wrong: ' +
'\nWrong: ' +
this.state.wrong +
'\n',
);
); */
} else {
console.log('wrong');
this.setState({
timer: 0,
});
clearInterval(this._interval);
this.saveData(this.state.correct, this.state.wrong + 1, this.state.timer);
this.displayData();
// this.saveData(this.state.correct, this.state.wrong + 1, this.state.timer);
//this.displayData();
keywordsList.splice(0, keywordsList.length);
this.props.navigation.navigate('1', {
Alert.alert('Wrong!');
this.props.navigation.navigate('q15', {
c: this.state.correct,
w: this.state.wrong + 1,
});
Orientation.lockToPortrait();
Alert.alert(
// Orientation.lockToPortrait();
/* Alert.alert(
'Well Done',
'Correct: ' +
this.state.correct +
'\n Wrong: ' +
'\nWrong: ' +
(this.state.wrong + 1) +
'\n',
);
); */
}
};
saveData = async (correct, wrong, timer) => {
let obj = {
c: correct,
w: wrong,
tm: timer,
d: date,
t: time,
correct: correct,
wrong: wrong,
date: date,
time: time,
};
if (await RNFS.exists(path)) {
console.log('BLAH EXISTS');
......@@ -249,7 +250,7 @@ export default class Quiz14 extends Component {
/>
</View>
<View style={styles.submit}>
<Button title="FINISH" color="#E07EF9" onPress={this.onSubmit} />
<Button title="SUBMIT" color="#E07EF9" onPress={this.onSubmit} />
</View>
</View>
<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 {
Dimensions,
} from 'react-native';
import Orientation from 'react-native-orientation';
import Notes from './data';
const config = {
deviceWidth: Dimensions.get('window').width,
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 = [];
export default class Settings extends React.Component {
toggleKeyword = (keyword) => {
class Settings extends React.PureComponent {
toggleKeyword = (keyword) => {
let list = note;
let index = -1;
if ((index = note.indexOf(keyword)) !== -1) {
......@@ -86,6 +32,7 @@ export default class Settings extends React.Component {
} else {
list.push(keyword);
console.log(list);
//console.log(Notes.length);
}
this.setState({note: list});
};
......@@ -101,17 +48,21 @@ export default class Settings extends React.Component {
source={require('../img/background.jpg')}
style={{width: config.deviceWidth, height: config.deviceHeight}}>
<SafeAreaView>
<ScrollView style={{marginTop: '10%'}}>
<ScrollView
style={{
marginTop: 50,
marginLeft: 5,
marginRight: 5,
}}>
<View
style={{
flexDirection: 'row',
flexWrap: 'wrap',
width: config.deviceWidth,
marginTop: 40,
marginLeft: config.deviceWidth * 0.08,
marginRight: config.deviceWidth * 0.1,
}}>
{NOTES.map((item, id) => (
{Notes.map((item, id) => (
<View key={id}>
<TouchableOpacity
style={
......@@ -142,6 +93,7 @@ export default class Settings extends React.Component {
);
}
}
export default Settings;
const styles = StyleSheet.create({
container: {
......@@ -175,3 +127,4 @@ const styles = StyleSheet.create({
padding: 10,
},
});
style/style.js
View file @ ff265d54
......@@ -46,13 +46,13 @@ export default StyleSheet.create({
fontSize: 15,
},
logo: {
height: config.deviceWidth * 0.5,
width: config.deviceHeight * 0.3,
height: config.deviceWidth * 0.22,
width: config.deviceHeight * 0.5,
borderColor: 'black',
borderWidth: 3,
borderRadius: 10,
position: 'absolute',
marginTop: config.deviceWidth * 0.15,
marginTop: config.deviceWidth * 0.1,
},
correct: {
width: 65,
......@@ -108,10 +108,10 @@ export default StyleSheet.create({
},
buttonView: {
flexDirection: 'column',
marginLeft: config.deviceHeight * 0.7,
marginLeft: config.deviceHeight * 1.0,
},
buttonStyle: {
width: config.deviceHeight * 0.074,
width: config.deviceWidth * 0.072,
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
......@@ -119,7 +119,7 @@ export default StyleSheet.create({
borderBottomWidth: 1,
},
selectedKeywordStyle: {
width: config.deviceHeight * 0.074,
width: config.deviceWidth * 0.072,
alignItems: 'center',
backgroundColor: '#EEA1E1',
borderRightWidth: 1,
......@@ -130,7 +130,7 @@ export default StyleSheet.create({
alignItems: 'center',
backgroundColor: 'black',
height: '65%',
marginLeft: config.deviceHeight * 0.05,
marginLeft: config.deviceWidth * 0.047,
width: '5%',
position: 'absolute',
},
......@@ -139,7 +139,7 @@ export default StyleSheet.create({
backgroundColor: 'black',
height: '65%',
width: '5%',
marginLeft: config.deviceHeight * 0.122,
marginLeft: config.deviceWidth * 0.119,
position: 'absolute',
},
buttonB3: {
......@@ -147,7 +147,7 @@ export default StyleSheet.create({
backgroundColor: 'black',
height: '65%',
width: '5%',
marginLeft: config.deviceHeight * 0.27,
marginLeft: config.deviceWidth * 0.26,
position: 'absolute',
},
......@@ -156,7 +156,7 @@ export default StyleSheet.create({
backgroundColor: 'black',
width: '5%',
height: '65%',
marginLeft: config.deviceHeight * 0.345,
marginLeft: config.deviceWidth * 0.335,
position: 'absolute',
},
buttonB5: {
......@@ -165,14 +165,14 @@ export default StyleSheet.create({
width: '5%',
height: '65%',
marginBottom: 10,
marginLeft: config.deviceHeight * 0.417,
marginLeft: config.deviceWidth * 0.406,
position: 'absolute',
},
SbuttonB1: {
alignItems: 'center',
backgroundColor: 'blue',
height: '65%',
marginLeft: config.deviceHeight * 0.05,
marginLeft: config.deviceWidth * 0.047,
width: '5%',
position: 'absolute',
},
......@@ -181,7 +181,7 @@ export default StyleSheet.create({
backgroundColor: 'blue',
height: '65%',
width: '5%',
marginLeft: config.deviceHeight * 0.122,
marginLeft: config.deviceWidth * 0.119,
position: 'absolute',
},
SbuttonB3: {
......@@ -189,7 +189,7 @@ export default StyleSheet.create({
backgroundColor: 'blue',
height: '65%',
width: '5%',
marginLeft: config.deviceHeight * 0.27,
marginLeft: config.deviceWidth * 0.26,
position: 'absolute',
},
SbuttonB4: {
......@@ -197,7 +197,7 @@ export default StyleSheet.create({
backgroundColor: 'blue',
width: '5%',
height: '65%',
marginLeft: config.deviceHeight * 0.345,
marginLeft: config.deviceWidth * 0.335,
position: 'absolute',
},
SbuttonB5: {
......@@ -205,7 +205,7 @@ export default StyleSheet.create({
backgroundColor: 'blue',
width: '5%',
height: '65%',
marginLeft: config.deviceHeight * 0.417,
marginLeft: config.deviceWidth * 0.406,
position: 'absolute',
},
......@@ -213,7 +213,7 @@ export default StyleSheet.create({
alignItems: 'center',
backgroundColor: 'black',
height: '65%',
marginLeft: config.deviceHeight * 0.565,
marginLeft: config.deviceWidth * 0.55,
width: '5%',
position: 'absolute',
},
......@@ -221,7 +221,7 @@ export default StyleSheet.create({
alignItems: 'center',
backgroundColor: 'black',
height: '65%',
marginLeft: config.deviceHeight * 0.64,
marginLeft: config.deviceWidth * 0.623,
width: '5%',
position: 'absolute',
},
......@@ -229,7 +229,7 @@ export default StyleSheet.create({
alignItems: 'center',
backgroundColor: 'black',
height: '65%',
marginLeft: config.deviceHeight * 0.787,
marginLeft: config.deviceWidth * 0.767,
width: '5%',
position: 'absolute',
},
......@@ -239,7 +239,7 @@ export default StyleSheet.create({
backgroundColor: 'black',
width: '5%',
height: '65%',
marginLeft: config.deviceHeight * 0.862,
marginLeft: config.deviceWidth * 0.839,
position: 'absolute',
},
buttonB51: {
......@@ -248,14 +248,14 @@ export default StyleSheet.create({
width: '5%',
height: '65%',
marginBottom: 10,
marginLeft: config.deviceHeight * 0.935,
marginLeft: config.deviceWidth * 0.91,
position: 'absolute',
},
SbuttonB11: {
alignItems: 'center',
backgroundColor: 'blue',
height: '65%',
marginLeft: config.deviceHeight * 0.565,
marginLeft: config.deviceWidth * 0.55,
width: '5%',
position: 'absolute',
},
......@@ -263,7 +263,7 @@ export default StyleSheet.create({
alignItems: 'center',
backgroundColor: 'blue',
height: '65%',
marginLeft: config.deviceHeight * 0.64,
marginLeft: config.deviceWidth * 0.623,
width: '5%',
position: 'absolute',
},
......@@ -271,7 +271,7 @@ export default StyleSheet.create({
alignItems: 'center',
backgroundColor: 'blue',
height: '65%',
marginLeft: config.deviceHeight * 0.787,
marginLeft: config.deviceWidth * 0.767,
width: '5%',
position: 'absolute',
},
......@@ -280,7 +280,7 @@ export default StyleSheet.create({
backgroundColor: 'blue',
width: '5%',
height: '65%',
marginLeft: config.deviceHeight * 0.862,
marginLeft: config.deviceWidth * 0.839,
position: 'absolute',
},
SbuttonB51: {
......@@ -288,7 +288,7 @@ export default StyleSheet.create({
backgroundColor: 'blue',
width: '5%',
height: '65%',
marginLeft: config.deviceHeight * 0.935,
marginLeft: config.deviceWidth * 0.91,
position: 'absolute',
},
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