Skip to content

P
pianoQuiz
Commit a7e1fc5a authored by norhalimah's avatar norhalimah
Browse files
Options

the latest update

parent 7c18fe81
Show whitespace changes
Inline Side-by-side
Showing with 45 additions and 391 deletions
GroupButton.js deleted 100644 → 0
View file @ 7c18fe81
/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import _ from 'lodash';
import {SelectMultipleGroupButton} from 'react-native-selectmultiple-button';
const multipleGroupData = [
{value: 'running'},
{value: 'riding'},
{value: 'reading'},
{value: 'coding'},
{value: 'Niuer'},
];
const radioGroupData = [
{value: 'Female', displayValue: 'F'},
{value: 'Male', displayValue: 'M'},
{value: 'Other', displayValue: 'O'},
{value: 'Rather not say', displayValue: 'R'},
];
const defaultSelectedIndex_group_insterest = [0, 1, 4];
const defaultSelectedIndex_group_gender = [1];
const ios_blue = '#007AFF';
export default class GroupButton extends Component {
constructor(props) {
super(props);
var selectedValues1 = [];
defaultSelectedIndex_group_insterest.map((item) => {
selectedValues1.push(multipleGroupData[item].value);
});
this.state = {
multipleSelectedData: [],
multipleSelectedDataLimited: [],
radioSelectedData: '',
multipleSelectedData_group: selectedValues1,
multipleSelectedData_group_limited: [],
radioSelectedData_group:
radioGroupData[defaultSelectedIndex_group_gender[0]].value,
};
}
render() {
return (
<View style={{flex: 1}}>
<Text style={styles.welcome}>
implement the multiple-select buttons demo by
SelectMultipleGroupButton
</Text>
<Text style={{color: ios_blue, marginLeft: 10}}>
I like {_.join(this.state.multipleSelectedData_group, ', ')}
</Text>
<SelectMultipleGroupButton
defaultSelectedIndexes={defaultSelectedIndex_group_insterest}
containerViewStyle={{justifyContent: 'flex-start'}}
highLightStyle={{
borderColor: 'gray',
backgroundColor: 'transparent',
textColor: 'gray',
borderTintColor: ios_blue,
backgroundTintColor: 'transparent',
textTintColor: ios_blue,
}}
onSelectedValuesChange={(selectedValues) =>
this._groupButtonOnSelectedValuesChange(selectedValues)
}
group={multipleGroupData}
/>
<Text style={{color: 'gray', marginLeft: 10, marginTop: 20}}>
Maximum 3(by yourself) limited
</Text>
<Text style={{color: ios_blue, marginLeft: 10}}>
I like {_.join(this.state.multipleSelectedData_group_limited, ', ')}
</Text>
<SelectMultipleGroupButton
containerViewStyle={{justifyContent: 'flex-start'}}
highLightStyle={{
borderColor: 'gray',
backgroundColor: 'transparent',
textColor: 'gray',
borderTintColor: ios_blue,
backgroundTintColor: 'transparent',
textTintColor: ios_blue,
}}
maximumNumberSelected={3}
onSelectedValuesChange={(selectedValues) =>
this._groupButtonOnSelectedValuesChange_limited(selectedValues)
}
group={multipleGroupData}
/>
<View style={{height: 1, backgroundColor: 'gray', marginTop: 20}} />
<Text style={styles.welcome}>
implement the radio-select buttons demo by SelectMultipleGroupButton
</Text>
<Text style={{color: 'green', marginLeft: 10}}>
I am {this.state.radioSelectedData_group}
</Text>
<SelectMultipleGroupButton
multiple={false}
defaultSelectedIndexes={defaultSelectedIndex_group_gender}
containerViewStyle={{flexDirection: 'column', width: 100}}
highLightStyle={{
borderColor: 'gray',
backgroundColor: 'transparent',
textColor: 'gray',
borderTintColor: 'green',
backgroundTintColor: 'green',
textTintColor: 'white',
}}
buttonViewStyle={{width: 40, height: 40, borderRadius: 20}}
singleTap={(valueTap) => {
this._onRadioGroupButtonSingleTap(valueTap);
}}
group={radioGroupData}
/>
</View>
);
}
_groupButtonOnSelectedValuesChange(selectedValues) {
this.setState({
multipleSelectedData_group: selectedValues,
});
}
_groupButtonOnSelectedValuesChange_limited(selectedValues) {
this.setState({
multipleSelectedData_group_limited: selectedValues,
});
}
_onRadioGroupButtonSingleTap(valueTap) {
this.setState({
radioSelectedData_group: valueTap,
});
}
}
const styles = StyleSheet.create({
welcome: {
margin: 10,
// marginTop: 30,
color: 'gray',
},
});
alert.js deleted 100644 → 0
View file @ 7c18fe81
/* eslint-disable prettier/prettier */
import React from 'react';
import {
StyleSheet,
Modal,
View,
Text,
TouchableOpacity,
Image,
} from 'react-native';
import PropTypes from 'prop-types';
export default class alertBox extends React.Component {
onNegativeButtonPress = () => {
this.props.onPressNegativeButton();
};
onPositiveButtonPress = () => {
this.props.onPressPositiveButton();
};
render() {
return (
<Modal
visible={this.props.displayAlert}
transparent={true}
animationType={'fade'}>
<View style={styles.mainOuterComponent}>
<View style={styles.mainContainer}>
{/* First ROw - Alert Icon and Title */}
<View style={styles.topPart}>
<Text style={styles.alertTitleTextStyle}>
{`${this.props.alertTitleText}`}
</Text>
</View>
{/* Second Row - Alert Message Text */}
<View style={styles.middlePart}>
<Text style={styles.alertMessageTextStyle}>
{`${this.props.alertMessageText}`}
</Text>
</View>
{/* Third Row - Positive and Negative Button */}
<View style={styles.bottomPart}>
{this.props.displayPositiveButton && (
<TouchableOpacity
onPress={this.onPositiveButtonPress}
style={styles.alertMessageButtonStyle}>
<Text style={styles.alertMessageButtonTextStyle}>
{this.props.positiveButtonText}
</Text>
</TouchableOpacity>
)}
{this.props.displayNegativeButton && (
<TouchableOpacity
onPress={this.onNegativeButtonPress}
style={styles.alertMessageButtonStyle}>
<Text style={styles.alertMessageButtonTextStyle}>
{this.props.negativeButtonText}
</Text>
</TouchableOpacity>
)}
</View>
</View>
</View>
</Modal>
);
}
}
alertBox.propTypes = {
displayAlert: PropTypes.bool,
displayAlertIcon: PropTypes.bool,
alertTitleText: PropTypes.string,
alertMessageText: PropTypes.string,
displayPositiveButton: PropTypes.bool,
positiveButtonText: PropTypes.string,
displayNegativeButton: PropTypes.bool,
negativeButtonText: PropTypes.string,
onPressPositiveButton: PropTypes.func,
onPressNegativeButton: PropTypes.func,
};
// export default CustomAlertComponent;
const styles = StyleSheet.create({
mainOuterComponent: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#00000088',
},
mainContainer: {
flexDirection: 'column',
height: '25%',
width: '80%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#404040',
// borderWidth: 2,
// borderColor: '#FF0000',
borderRadius: 10,
padding: 4,
},
topPart: {
flex: 0.5,
width: '100%',
flexDirection: 'row',
alignItems: 'center',
// borderWidth: 1,
// borderColor: '#00FF00',
paddingHorizontal: 2,
paddingVertical: 4,
},
middlePart: {
flex: 1,
width: '100%',
// borderWidth: 1,
// borderColor: '#FF6600',
padding: 4,
color: '#FFFFFF',
fontSize: 16,
marginVertical: 2,
},
bottomPart: {
flex: 0.5,
width: '100%',
// borderWidth: 1,
// borderColor: '#0066FF',
flexDirection: 'row',
padding: 4,
justifyContent: 'space-evenly',
},
alertIconStyle: {
// borderWidth: 1,
// borderColor: '#cc00cc',
height: 35,
width: 35,
},
alertTitleTextStyle: {
flex: 1,
textAlign: 'justify',
color: '#FFFFFF',
fontSize: 18,
fontWeight: 'bold',
// borderWidth: 1,
// borderColor: '#660066',
padding: 2,
marginHorizontal: 2,
},
alertMessageTextStyle: {
color: '#FFFFFF',
textAlign: 'justify',
fontSize: 16,
paddingHorizontal: 6,
paddingVertical: 2,
},
alertMessageButtonStyle: {
width: '30%',
paddingHorizontal: 6,
marginVertical: 4,
borderRadius: 10,
backgroundColor: '#80BFFF',
justifyContent: 'center',
alignItems: 'center',
},
alertMessageButtonTextStyle: {
fontSize: 14,
fontWeight: 'bold',
color: '#FFFFFF',
},
});
config.js 0 → 100644
View file @ a7e1fc5a
/* eslint-disable prettier/prettier */
import {Dimensions} from 'react-native';
const config = {
deviceWidth: Dimensions.get('window').width,
deviceHeight: Dimensions.get('window').height,
};
export default config;
context.js deleted 100644 → 0
View file @ 7c18fe81
/* eslint-disable prettier/prettier */
import React from 'react';
export default React.createContext({
wrong: 0,
correct: 0,
tasks: [],
addNewTask: (task) => {},
deleteTask: (taskId) => {},
});
quiz1.js
View file @ a7e1fc5a
......@@ -14,6 +14,7 @@ import {
Alert,
} from 'react-native';
import styles from './style.js';
import config from './config';
import {useNavigation} from '@react-navigation/native';
const NOTESWHITE = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];
const NOTESCC = ['C#'];
......@@ -94,7 +95,7 @@ export default class Quiz1 extends Component {
render() {
const {
container1,
container,
selectedKeywordStyle,
buttonStyle,
textStyle,
......
quiz10.js
View file @ a7e1fc5a
......@@ -100,7 +100,7 @@ export default class Quiz10 extends Component {
render() {
const {
container1,
container,
selectedKeywordStyle,
buttonStyle,
textStyle,
......
quiz11.js
View file @ a7e1fc5a
......@@ -100,7 +100,7 @@ export default class Quiz11 extends Component {
render() {
const {
container1,
container,
selectedKeywordStyle,
buttonStyle,
textStyle,
......
quiz12.js
View file @ a7e1fc5a
......@@ -100,7 +100,7 @@ export default class Quiz12 extends Component {
render() {
const {
container1,
container,
selectedKeywordStyle,
buttonStyle,
textStyle,
......
quiz13.js
View file @ a7e1fc5a
......@@ -100,7 +100,7 @@ export default class Quiz13 extends Component {
render() {
const {
container1,
container,
selectedKeywordStyle,
buttonStyle,
textStyle,
......
quiz14.js
View file @ a7e1fc5a
......@@ -100,7 +100,7 @@ export default class Quiz14 extends Component {
render() {
const {
container1,
container,
selectedKeywordStyle,
buttonStyle,
textStyle,
......
quiz2.js
View file @ a7e1fc5a
......@@ -98,7 +98,7 @@ export default class Quiz2 extends Component {
render() {
const {
container1,
container,
selectedKeywordStyle,
buttonStyle,
textStyle,
......
quiz3.js
View file @ a7e1fc5a
......@@ -100,7 +100,7 @@ export default class Quiz3 extends Component {
render() {
const {
container1,
container,
selectedKeywordStyle,
buttonStyle,
textStyle,
......
quiz4.js
View file @ a7e1fc5a
......@@ -100,7 +100,7 @@ export default class Quiz4 extends Component {
render() {
const {
container1,
container,
selectedKeywordStyle,
buttonStyle,
textStyle,
......
quiz5.js
View file @ a7e1fc5a
......@@ -100,7 +100,7 @@ export default class Quiz5 extends Component {
render() {
const {
container1,
container,
selectedKeywordStyle,
buttonStyle,
textStyle,
......
quiz6.js
View file @ a7e1fc5a
......@@ -100,7 +100,7 @@ export default class Quiz6 extends Component {
render() {
const {
container1,
container,
selectedKeywordStyle,
buttonStyle,
textStyle,
......
quiz7.js
View file @ a7e1fc5a
......@@ -100,7 +100,7 @@ export default class Quiz7 extends Component {
render() {
const {
container1,
container,
selectedKeywordStyle,
buttonStyle,
textStyle,
......
quiz8.js
View file @ a7e1fc5a
......@@ -100,7 +100,7 @@ export default class Quiz8 extends Component {
render() {
const {
container1,
container,
selectedKeywordStyle,
buttonStyle,
textStyle,
......
quiz9.js
View file @ a7e1fc5a
......@@ -100,7 +100,7 @@ export default class Quiz9 extends Component {
render() {
const {
container1,
container,
selectedKeywordStyle,
buttonStyle,
textStyle,
......
style.js
View file @ a7e1fc5a
/* eslint-disable prettier/prettier */
import {StyleSheet} from 'react-native';
import config from './config';
export default StyleSheet.create({
c1: {
height: '65%',
......@@ -8,7 +9,7 @@ export default StyleSheet.create({
},
cc1: {
flexDirection: 'row',
marginTop: 20,
marginTop: 15,
marginLeft: 5,
},
t: {
......@@ -18,12 +19,7 @@ export default StyleSheet.create({
flexDirection: 'row',
height: '25%',
},
c3: {
paddingTop: 30,
height: '10%',
alignItems: 'center',
justifyContent: 'center',
},
t1: {
color: 'black',
paddingTop: 120,
......@@ -52,8 +48,8 @@ export default StyleSheet.create({
},
logo: {
marginTop: 10,
width: 250,
height: 250,
height: config.deviceHeight * 0.4,
width: config.deviceWidth * 0.8,
borderColor: 'black',
borderWidth: 3,
borderRadius: 10,
......@@ -92,7 +88,7 @@ export default StyleSheet.create({
},
submit: {
width: '30%',
marginTop: 22,
marginTop: config.deviceHeight * 0.03,
},
viewMain: {
width: '20%',
......@@ -102,11 +98,10 @@ export default StyleSheet.create({
position: 'absolute',
},
container1: {
flexDirection: 'row',
justifyContent: 'space-around',
flexWrap: 'wrap',
paddingTop: 50,
container: {
flex: 1,
width: config.deviceWidth,
height: config.deviceHeight,
},
textStyle: {
fontSize: 16,
......@@ -129,29 +124,11 @@ export default StyleSheet.create({
borderColor: 'black',
borderBottomWidth: 1,
},
buttonStyle1: {
flex: 7,
alignItems: 'center',
backgroundColor: 'black',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
position: 'absolute',
},
selectedKeywordStylec: {
flex: 7,
alignItems: 'center',
backgroundColor: 'blue',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
position: 'absolute',
},
buttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '65%',
marginLeft: 32,
marginLeft: config.deviceWidth * 0.09,
width: '10%',
position: 'absolute',
},
......@@ -160,7 +137,7 @@ export default StyleSheet.create({
backgroundColor: 'black',
height: '65%',
width: '10%',
marginLeft: 85,
marginLeft: config.deviceWidth * 0.233,
position: 'absolute',
},
buttonB3: {
......@@ -168,7 +145,7 @@ export default StyleSheet.create({
backgroundColor: 'black',
height: '65%',
width: '10%',
marginLeft: 185,
marginLeft: config.deviceWidth * 0.52,
position: 'absolute',
},
......@@ -177,7 +154,7 @@ export default StyleSheet.create({
backgroundColor: 'black',
width: '10%',
height: '65%',
marginLeft: 238,
marginLeft: config.deviceWidth * 0.66,
position: 'absolute',
},
buttonB5: {
......@@ -186,14 +163,14 @@ export default StyleSheet.create({
width: '10%',
height: '65%',
marginBottom: 10,
marginLeft: 289,
marginLeft: config.deviceWidth * 0.805,
position: 'absolute',
},
SbuttonB1: {
alignItems: 'center',
backgroundColor: 'blue',
height: '65%',
marginLeft: 32,
marginLeft: config.deviceWidth * 0.09,
width: '10%',
position: 'absolute',
},
......@@ -202,7 +179,7 @@ export default StyleSheet.create({
backgroundColor: 'blue',
height: '65%',
width: '10%',
marginLeft: 85,
marginLeft: config.deviceWidth * 0.233,
position: 'absolute',
},
SbuttonB3: {
......@@ -210,7 +187,7 @@ export default StyleSheet.create({
backgroundColor: 'blue',
height: '65%',
width: '10%',
marginLeft: 185,
marginLeft: config.deviceWidth * 0.52,
position: 'absolute',
},
SbuttonB4: {
......@@ -218,7 +195,7 @@ export default StyleSheet.create({
backgroundColor: 'blue',
width: '10%',
height: '65%',
marginLeft: 238,
marginLeft: config.deviceWidth * 0.66,
position: 'absolute',
},
SbuttonB5: {
......@@ -226,8 +203,7 @@ export default StyleSheet.create({
backgroundColor: 'blue',
width: '10%',
height: '65%',
marginBottom: 10,
marginLeft: 289,
marginLeft: config.deviceWidth * 0.805,
position: 'absolute',
},
boxScore: {
......
totalScore.js
View file @ a7e1fc5a
......@@ -99,7 +99,7 @@ export default class TotalScore extends Component {
render() {
const {
container1,
container,
selectedKeywordStyle,
buttonStyle,
textStyle,
......
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