Skip to content

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

updating UI

parent 3e25fd61
Show whitespace changes
Inline Side-by-side
Showing with 911 additions and 796 deletions
App.js
View file @ 0bdc5be3
...@@ -4,7 +4,6 @@ import {Image, Dimensions} from 'react-native'; ...@@ -4,7 +4,6 @@ import {Image, Dimensions} from 'react-native';
import {NavigationContainer} from '@react-navigation/native'; import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack'; import {createStackNavigator} from '@react-navigation/stack';
import {Icon} from 'react-native-elements'; import {Icon} from 'react-native-elements';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
//import Settings from './screens/settings'; //import Settings from './screens/settings';
import SettingsScale from './screens/settingScale'; import SettingsScale from './screens/settingScale';
import SettingsListen from './screens/settingListen'; import SettingsListen from './screens/settingListen';
...@@ -19,7 +18,6 @@ import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs ...@@ -19,7 +18,6 @@ import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs
const closeIcon = require('./media/img/btn_close.png'); const closeIcon = require('./media/img/btn_close.png');
const Stack = createStackNavigator(); const Stack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();
const TabTop = createMaterialTopTabNavigator(); const TabTop = createMaterialTopTabNavigator();
function LogBook() { function LogBook() {
...@@ -140,65 +138,21 @@ class App extends React.PureComponent { ...@@ -140,65 +138,21 @@ class App extends React.PureComponent {
<Stack.Screen <Stack.Screen
name="2" name="2"
component={Quiz} component={Quiz}
options={({navigation}) => ({ options={{
title: 'Scale', title: ' ',
headerTitleStyle: {
fontFamily: 'Gilroy-Bold',
fontSize: 20,
lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.15,
color: '#3B3A39',
},
headerStyle: {
backgroundColor: '#E07EF9',
},
headerTintColor: '#fff',
headerTransparent: true, headerTransparent: true,
headerBackImage: () => ( headerLeft: null,
<Icon
name="close"
type="font-awesome"
size={26}
color="black"
onPress={() => {
navigation.navigate('1');
Orientation.lockToPortrait();
}} }}
/> />
),
})}
/>
<Stack.Screen <Stack.Screen
name="3" name="3"
component={Listen} component={Listen}
options={({navigation}) => ({ options={{
title: 'Listen Skill', title: ' ',
headerTitleStyle: {
fontFamily: 'Gilroy-Bold',
fontSize: 20,
lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.15,
color: '#3B3A39',
},
headerStyle: {
backgroundColor: '#E07EF9',
},
headerTintColor: '#fff',
headerTransparent: true, headerTransparent: true,
headerBackImage: () => ( headerLeft: null,
<Icon
name="close"
type="font-awesome"
size={26}
color="black"
onPress={() => {
navigation.navigate('1');
Orientation.lockToPortrait();
}} }}
/> />
),
})}
/>
<Stack.Screen <Stack.Screen
name="4" name="4"
component={MetronomeSkill} component={MetronomeSkill}
......
screens/listening.js
View file @ 0bdc5be3
...@@ -14,9 +14,6 @@ import { ...@@ -14,9 +14,6 @@ import {
BackHandler, BackHandler,
ScrollView, ScrollView,
Image, Image,
StyleSheet,
Animated,
Easing,
} from 'react-native'; } from 'react-native';
import styles from '../style/styleListen'; import styles from '../style/styleListen';
import {Stopwatch} from 'react-native-stopwatch-timer'; import {Stopwatch} from 'react-native-stopwatch-timer';
...@@ -30,11 +27,10 @@ import moment from 'moment'; ...@@ -30,11 +27,10 @@ import moment from 'moment';
import AsyncStorage from '@react-native-async-storage/async-storage'; import AsyncStorage from '@react-native-async-storage/async-storage';
const path1 = RNFS.DocumentDirectoryPath + '/counterlisten.txt'; const path1 = RNFS.DocumentDirectoryPath + '/counterlisten.txt';
const config = {
deviceWidth: Dimensions.get('window').height, const height = Dimensions.get('window').height;
deviceHeight: Dimensions.get('window').width, const width = Dimensions.get('window').width;
}; const date = moment().utcOffset('+08:00').format('DD/MM/YYYY');
const date = moment().utcOffset('+08:00').format('D MMM');
const time = moment().utcOffset('+08:00').format('h:mm a'); const time = moment().utcOffset('+08:00').format('h:mm a');
const day = moment().utcOffset('+08:00').format('ddd'); const day = moment().utcOffset('+08:00').format('ddd');
...@@ -75,6 +71,7 @@ const timerIcon = require('../media/img/icon_timer.png'); ...@@ -75,6 +71,7 @@ const timerIcon = require('../media/img/icon_timer.png');
const rightIcon = require('../media/img/btn_right.png'); const rightIcon = require('../media/img/btn_right.png');
const leftIcon = require('../media/img/btn_left.png'); const leftIcon = require('../media/img/btn_left.png');
const playIcon = require('../media/img/btn_play.png'); const playIcon = require('../media/img/btn_play.png');
const closeIcon = require('../media/img/btn_close.png');
const keySound = Listennotes; const keySound = Listennotes;
var soundN = ''; var soundN = '';
...@@ -111,24 +108,9 @@ class Listen extends React.Component { ...@@ -111,24 +108,9 @@ class Listen extends React.Component {
screenHeight: Dimensions.get('window').height, screenHeight: Dimensions.get('window').height,
screenWidth: Dimensions.get('window').height, screenWidth: Dimensions.get('window').height,
progressStatus: 0, progressStatus: 0,
play: false,
}; };
this.anim = new Animated.Value(0);
}
animate () {
this.anim.setValue(0);
console.log('animated');
Animated.timing(
this.anim,
{
toValue: 1,
//duration: 2000,
duration: 2000,
easing: Easing.linear,
useNativeDriver: false,
} }
).start(() => this.animate());
}
toggleKeyword = (keyword) => { toggleKeyword = (keyword) => {
console.log('Press: ' + keyword); console.log('Press: ' + keyword);
...@@ -236,9 +218,7 @@ class Listen extends React.Component { ...@@ -236,9 +218,7 @@ class Listen extends React.Component {
return; return;
} }
// loaded successfully // loaded successfully
this.setState({progressStatus: playSound.getDuration() * 800});
playSound.play((success) => { playSound.play((success) => {
this.animate();
if (success) { if (success) {
this.setState({showMusic: false}); this.setState({showMusic: false});
playSound.release(); playSound.release();
...@@ -247,7 +227,6 @@ class Listen extends React.Component { ...@@ -247,7 +227,6 @@ class Listen extends React.Component {
} }
}); });
}); });
this.setState({progressStatus: 0 });
}; };
reset = () => { reset = () => {
...@@ -432,51 +411,15 @@ class Listen extends React.Component { ...@@ -432,51 +411,15 @@ class Listen extends React.Component {
return ( return (
<Modal transparent={true} visible={this.state.showQuit} animationType="slide"> <Modal transparent={true} visible={this.state.showQuit} animationType="slide">
<View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}> <View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}>
<View style={{ marginHorizontal: Dimensions.get('window').width * 0.28, <View style={styles.viewShowQuit}>
width : Dimensions.get('window').width * 0.45, <Image style={styles.quitIcon} source={quitIcon}/>
height : Dimensions.get('window').height * 0.6, <Text style={styles.textQuitScale}>Quit Listen Skill ?</Text>
marginTop : Dimensions.get('window').width * 0.13, <View style={styles.viewButtonQuit}>
alignItems: 'center', <TouchableOpacity style={styles.buttonNoQuit} onPress={() => this.setState({showQuit: false})}>
backgroundColor:'#FFFBF0', <Text style={styles.textNoQuit}>NO</Text>
borderRadius: 16}}>
<Image style={{height:'40%', width:'30%', position:'absolute', left:110, top: -45 }} source={quitIcon}/>
<Text style={{ fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:30,
color:'#3B3A39',
paddingTop:Dimensions.get('window').height * 0.17}}>Quit Scale?</Text>
<View
style={{ alignItems: 'center',
flexDirection: 'row',
marginTop:20, justifyContent: 'center'}}>
<TouchableOpacity style={{ backgroundColor: '#FFFFFF',
padding: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
borderColor:'#81C9C9',
borderWidth: 1,
marginRight:8}}
onPress={() => this.setState({showQuit: false})}>
<Text style={{ color: '#81C9C9',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.04}}>NO</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={{ backgroundColor: 'white', <TouchableOpacity style={styles.buttonYesQuit} onPress={() => this.backAction()}>
paddingLeft: 18, <Text style={styles.textYesQuit}>YES</Text>
paddingRight: 18,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
borderWidth: 1,
borderColor:'#81C9C9',
marginLeft:8}}
onPress={() => this.backAction()}>
<Text style={{color: '#81C9C9',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.03}}>YES</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
...@@ -489,42 +432,17 @@ class Listen extends React.Component { ...@@ -489,42 +432,17 @@ class Listen extends React.Component {
} }
} }
showCorrect(){ showCorrect(){
if (this.state.showC === true){ if (this.state.showC === true){
return ( return (
<Modal transparent={true} visible={this.state.showC} animationType="slide"> <Modal transparent={true} visible={this.state.showC} animationType="slide">
<View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}> <View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}>
<View style={{ marginHorizontal: Dimensions.get('window').width * 0.28, <View style={styles.viewShowCorrect}>
width : Dimensions.get('window').width * 0.45, <Image style={styles.correctIcon} source={correctIcon}/>
height : Dimensions.get('window').height * 0.6, <Text style={styles.textScaleResult}>Listen Skill Result</Text>
marginTop : Dimensions.get('window').width * 0.13, <Text style={styles.textCorrect}>Correct</Text>
alignItems: 'center', <TouchableOpacity style={styles.buttonOK} onPress={() => this.setState({showC: false})}>
backgroundColor:'#FFFBF0', <Text style={styles.textOK}>OK</Text>
borderRadius: 16}}>
<Image style={{height:'40%', width:'30%', position:'absolute', left:110, top: -45 }} source={correctIcon}/>
<Text style={{ fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3B3A39',
paddingTop:Dimensions.get('window').height * 0.17}}>Scale Result</Text>
<Text style={{ fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:30,
color:'#14A76C',
paddingTop:Dimensions.get('window').height * 0.02}}>Correct</Text>
<TouchableOpacity style={{ backgroundColor: '#81C9C9',
width : Dimensions.get('window').width * 0.3,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
marginLeft:8}}
onPress={() => this.setState({showC: false})}>
<Text style={{color: '#FFFFFF',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.12}}>OK</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
...@@ -534,47 +452,19 @@ showCorrect(){ ...@@ -534,47 +452,19 @@ showCorrect(){
else { else {
return null; return null;
} }
} }
showWrong(){ showWrong(){
if (this.state.showW === true){ if (this.state.showW === true){
return ( return (
<Modal transparent={true} visible={this.state.showW} animationType="slide"> <Modal transparent={true} visible={this.state.showW} animationType="slide">
<View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}> <View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}>
<View style={{ marginHorizontal: Dimensions.get('window').width * 0.28, <View style={styles.viewShowWrong}>
width : Dimensions.get('window').width * 0.45, <Image style={styles.wrongIcon} source={wrongIcon}/>
height : Dimensions.get('window').height * 0.6, <Text style={styles.textScaleResultW}>Listen Skill Result</Text>
marginTop : Dimensions.get('window').width * 0.13, <Text style={styles.textWrong}>Wrong</Text>
alignItems: 'center', <TouchableOpacity style={styles.buttonOKW} onPress={() => this.setState({showW: false})}>
backgroundColor:'#FFFBF0', <Text style={styles.textOKW}>OK</Text>
borderRadius: 16}}>
<Image style={{height:'40%', width:'30%', position:'absolute', left:110, top: -45 }} source={wrongIcon}/>
<Text style={{ fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3B3A39',
paddingTop:Dimensions.get('window').height * 0.17}}>Scale Result</Text>
<Text style={{ fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:30,
color:'#D11427',
paddingTop:Dimensions.get('window').height * 0.02}}>Wrong</Text>
<TouchableOpacity style={{ backgroundColor: '#81C9C9',
width : Dimensions.get('window').width * 0.3,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
marginLeft:8}}
onPress={() => this.setState({showW: false})}>
<Text style={{color: '#FFFFFF',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.12}}>OK</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
...@@ -584,57 +474,27 @@ showWrong(){ ...@@ -584,57 +474,27 @@ showWrong(){
else { else {
return null; return null;
} }
} }
showDone(){ showDone(){
if (this.state.showDone === true){ if (this.state.showDone === true){
return ( return (
<Modal transparent={true} visible={this.state.showDone} animationType="slide"> <Modal transparent={true} visible={this.state.showDone} animationType="slide">
<View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}> <View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}>
<View style={{ marginHorizontal: Dimensions.get('window').width * 0.28, <View style={styles.viewShowDone}>
width : Dimensions.get('window').width * 0.42, <Image style={styles.doneIcon} source={doneIcon}/>
height : Dimensions.get('window').height * 0.73, <Text style={styles.textWellDone}>Well Done !</Text>
marginTop : Dimensions.get('window').width * 0.07, <View style={styles.viewListenResult}>
alignItems: 'center', <Text style={styles.textListenResultD}>Listen Skill Result : </Text>
backgroundColor:'#FFFBF0', <View style={styles.viewCorrectWrong}>
borderRadius: 16}}> <Image style={styles.corIcon} source={corIcon}/>
<Image style={{height:'40%', width:'30%', position:'absolute', left:110, top: -45 }} source={doneIcon}/> <Text style={styles.textCorrectD}>{this.state.correct}</Text>
<Image style={styles.wroIcon} source={wroIcon}/>
<Text style={{ fontSize: 20, <Text style={styles.textWrongD}>{this.state.wrong}</Text>
fontFamily: 'Gilroy-Bold', </View>
textAlign: 'center', </View>
lineHeight:25, <TouchableOpacity style={styles.buttonDone} onPress={() => this.backAction()}>
color:'#3B3A39', <Text style={styles.textDone}>Done</Text>
paddingTop:Dimensions.get('window').height * 0.17}}>Well Done !</Text>
<View style={{borderRadius:16, borderColor:'#E7E7E7', borderWidth:1, backgroundColor:'#FFFBF0', marginTop:'2%', marginLeft:'2%', width:Dimensions.get('window').width * 0.33, marginBottom:'1.5%'}}>
<Text style={{ fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3D9090',
paddingHorizontal:Dimensions.get('window').width * 0.06,
paddingTop:Dimensions.get('window').height * 0.02}}>Scale Result : </Text>
<View style={{flexDirection: 'row', paddingHorizontal:Dimensions.get('window').width * 0.07, paddingVertical:Dimensions.get('window').height * 0.02}}>
<Image style={{height:'65%', width:'14%',marginTop:'3%'}} source={corIcon}/>
<Text style={{color:'#14A76C', fontSize:24, fontFamily:'Gilroy-Bold', textAlign:'left', lineHeight:30, paddingHorizontal:'10%'}}>{this.state.correct}</Text>
<Image style={{height:'65%', width:'14%',marginTop:'3%'}} source={wroIcon}/>
<Text style={{color:'#F94C4C', fontSize:24, fontFamily:'Gilroy-Bold', textAlign:'left', lineHeight:30, paddingHorizontal:'10%'}}>{this.state.wrong}</Text>
</View>
</View>
<TouchableOpacity style={{ backgroundColor: '#81C9C9',
width : Dimensions.get('window').width * 0.33,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
marginLeft:5}}
onPress={() => this.backAction()}>
<Text style={{color: '#FFFFFF',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.14}}>OK</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
...@@ -644,120 +504,60 @@ showDone(){ ...@@ -644,120 +504,60 @@ showDone(){
else { else {
return null; return null;
} }
} }
render() { showButtonPlaying(){
if (this.state.showMusic === false){
return ( return (
<View style={{flex: 1, backgroundColor:'#81C9C9'}}> <View style={styles.viewPlayButton}>
<StatusBar hidden /> <TouchableOpacity style={styles.buttonPlaying}
{this.showQuit()} onPress={() => this.playButton()}>
{this.showCorrect()} <View style={{flexDirection:'row'}}>
{this.showWrong()} <Image style={styles.playIcon} source={playIcon}/>
{this.showDone()} <Text style={styles.textPlaying}>Play</Text>
<TouchableOpacity style={{backgroundColor:'#E7E7E7', borderColor:'#E7E7E7', borderWidth:1, borderRadius:8, width:Dimensions.get('window').width * 0.22, marginHorizontal:Dimensions.get('window').width * 0.725, marginTop:Dimensions.get('window').height * 0.03}} onPress={this.onSubmit} >
<View style={{flexDirection: 'row'}}>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#848484', paddingVertical:Dimensions.get('window').height * 0.04, paddingHorizontal:Dimensions.get('window').width * 0.035}}>
Attempt 0 / 2
</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<View style={{backgroundColor:'#FFFBF0',flexDirection: 'row', width:Dimensions.get('window').width, height:Dimensions.get('window').height * 0.3, borderTopLeftRadius:8, borderTopRightRadius:8, marginTop:Dimensions.get('window').height * 0.05}}>
<View style={{width:Dimensions.get('window').width * 0.25, marginHorizontal:Dimensions.get('window').width * 0.032, marginTop:'3%', marginBottom:'2%'}}>
<View style={{flexDirection:'row'}}>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'left', lineHeight:20, color:'#EF476F', paddingBottom:'4%'}}>
Question {this.state.correct + this.state.wrong}
</Text>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'left', lineHeight:20, color:'#3B3A39', paddingBottom:'4%', paddingLeft:'2%'}}>
/ {this.state.maxCount}
</Text>
</View> </View>
);
}
else {
return (
<View style={styles.viewPlayButton}>
<TouchableOpacity style={styles.buttonPlayingP}
onPress={() => this.playButton()}>
<View style={{flexDirection:'row'}}> <View style={{flexDirection:'row'}}>
<Image style={{height:'65%', width:'12%',marginTop:'3%'}} source={corIcon}/> <Image style={styles.playIconP} source={playIcon}/>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:24, textAlign:'left', lineHeight:30, color:'#14A76C', paddingHorizontal:'8%'}}> <Text style={styles.textPlayingP}>Playing...</Text>
{this.state.correct}
</Text>
</View>
</View> </View>
<View style={{alignItems:'center',width:Dimensions.get('window').width * 0.32, marginHorizontal:Dimensions.get('window').width * 0.015, marginTop:'2%'}}>
<TouchableOpacity style={{ backgroundColor: '#81C9C9',
width : Dimensions.get('window').width * 0.33,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
}}
onPress={() => this.playButton()}>
<Text style={{color: '#FFFFFF',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.13}}>PLAY</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{alignItems:'center',width:Dimensions.get('window').width * 0.25, marginHorizontal:Dimensions.get('window').width * 0.045, marginTop:'4%'}}> );
<Stopwatch }
secs
start={this.state.start} }
getTime={(tt) => {
//console.log(tt); showPlaying(){
stime = tt; if (this.state.showMusic === true){
}} return (
// Options for the styling <ScrollView style={styles.container} horizontal={true} scrollEnabled={true} showsHorizontalScrollIndicator={false} ref={(scroller) => {this.scroller = scroller;}}>
options={{//timer <View style={styles.screen}>
container: { <View style={styles.viewPages}>
backgroundColor: '#FFECDA', <Text style={[styles.textPages, {paddingHorizontal:width * 0.9}]}>1/4</Text>
padding: 10, <TouchableOpacity onPress={this.scrollToB} style={{width: '25%', marginRight: width * 1}}>
borderRadius: 8, <Image style={styles.rightIcon} source={rightIcon}/>
borderColor:'#FFECDA',
borderWidth:2,
width:Dimensions.get('window').width * 0.22,
alignItems: 'center',
},
text: {
fontSize: 16,
color: '#3B3A39',
textAlign: 'left',
paddingTop: 5,
lineHeight:20,
alignItems: 'center',
fontFamily: 'Gilroy-Bold',
}}}/>
<Image style={{height:'27%', width:'13%', position: 'absolute', left:25, top:15}} source={timerIcon}/>
</View>
</View>
<ScrollView style={style.container}
horizontal={true}
scrollEnabled={true}
showsHorizontalScrollIndicator={false}
ref={(scroller) => {this.scroller = scroller;}}>
<View style={style.screen}>
<View style={{backgroundColor:'white',flexDirection:'row', width: Dimensions.get('screen').width}}>
<Text style={{marginVertical:10, marginHorizontal:30,fontFamily:'Gilroy-Light', textAlign: 'center'}}>1 of 4 pages</Text>
<TouchableOpacity onPress={this.scrollToB} style={{marginRight:config.deviceHeight * 0.8,width: '25%'}}>
<Text style={style.scrollButtonText}>Next {'>>'}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={style.screenA}> <View style={{backgroundColor:'#9F9F9F'}}>
<View style={styles.screenA}>
{NOTESWHITE.slice(0, 13).map((item,id) => ( {NOTESWHITE.slice(0, 13).map((item,id) => (
<TouchableHighlight <TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? styles.selectedKeywordStyle : styles.buttonStyle}
style={
keywordsList.find((element) => element === item.name)
? style.selectedKeywordStyle
: style.buttonStyle
}
onPress={() => this.toggleKeyword(item.name)} onPress={() => this.toggleKeyword(item.name)}
key={id}> key={id}>
<Text style={styles.textStyle}> {item.name} </Text> <Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight> </TouchableHighlight>
))} ))}
{NOTESBLACK.slice(0,8).map((item, id) => ( {NOTESBLACK.slice(0,8).map((item, id) => (
<TouchableHighlight <TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? [styles.SbuttonB1, {marginLeft: height * item.left}] : [styles.buttonB1, {marginLeft: height * item.left}]}
style={
keywordsList.find((element) => element === item.name)
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item.name)} onPress={() => this.toggleKeyword(item.name)}
key={id}> key={id}>
<Text style={styles.textStyleB}>{item.name}</Text> <Text style={styles.textStyleB}>{item.name}</Text>
...@@ -765,37 +565,29 @@ showDone(){ ...@@ -765,37 +565,29 @@ showDone(){
))} ))}
</View> </View>
</View> </View>
</View>
<View style={style.screen}> <View style={styles.screen}>
<View style={{backgroundColor:'white',flexDirection:'row', width: Dimensions.get('screen').width}}> <View style={styles.viewPages}>
<TouchableOpacity onPress={this.scrollToStart} style={{width: '25%'}}> <TouchableOpacity onPress={this.scrollToStart} style={{width: '25%', marginLeft:width * 0.4}}>
<Text style={style.scrollButtonText}> {'<<'}Back</Text> <Image style={styles.leftIcon} source={leftIcon}/>
</TouchableOpacity> </TouchableOpacity>
<Text style={{marginVertical:10,marginHorizontal:30,fontFamily:'Gilroy-Light', textAlign: 'center'}}>2 of 4 pages</Text> <Text style={[styles.textPages, {paddingLeft:width * 0.1, paddingRight:width * 0.1}]}>2/4</Text>
<TouchableOpacity onPress={this.scrollToC} style={{marginRight:config.deviceHeight * 0.8,width: '25%'}}> <TouchableOpacity onPress={this.scrollToC} style={{marginRight:height * 0.3,width: '25%'}}>
<Text style={style.scrollButtonText}>Next {'>>'}</Text> <Image style={styles.rightIcon} source={rightIcon}/>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={style.screenB}> <View style={{backgroundColor:'#9F9F9F'}}>
<View style={styles.screenB}>
{NOTESWHITE.slice(13, 26).map((item,id) => ( {NOTESWHITE.slice(13, 26).map((item,id) => (
<TouchableHighlight <TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? styles.selectedKeywordStyle : styles.buttonStyle}
style={
keywordsList.find((element) => element === item.name)
? style.selectedKeywordStyle
: style.buttonStyle
}
onPress={() => this.toggleKeyword(item.name)} onPress={() => this.toggleKeyword(item.name)}
key={id}> key={id}>
<Text style={styles.textStyle}> {item.name} </Text> <Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight> </TouchableHighlight>
))} ))}
{NOTESBLACK.slice(8,18).map((item, id) => ( {NOTESBLACK.slice(8,18).map((item, id) => (
<TouchableHighlight <TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? [styles.SbuttonB1, {marginLeft: height * item.left}] : [styles.buttonB1, {marginLeft:height * item.left}]}
style={
keywordsList.find((element) => element === item.name)
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item.name)} onPress={() => this.toggleKeyword(item.name)}
key={id}> key={id}>
<Text style={styles.textStyleB}>{item.name}</Text> <Text style={styles.textStyleB}>{item.name}</Text>
...@@ -803,37 +595,29 @@ showDone(){ ...@@ -803,37 +595,29 @@ showDone(){
))} ))}
</View> </View>
</View> </View>
</View>
<View style={style.screen}> <View style={styles.screen}>
<View style={{backgroundColor:'white',flexDirection:'row', width: Dimensions.get('screen').width}}> <View style={styles.viewPages}>
<TouchableOpacity onPress={this.scrollToB} style={{width: '25%'}}> <TouchableOpacity onPress={this.scrollToB} style={{width: '25%'}}>
<Text style={style.scrollButtonText}>{'<<'}Back</Text> <Image style={styles.leftIcon} source={leftIcon}/>
</TouchableOpacity> </TouchableOpacity>
<Text style={{marginVertical:10,marginHorizontal:30,fontFamily:'Gilroy-Light', textAlign: 'center'}}>3 of 4 pages</Text> <Text style={[styles.textPages, {paddingHorizontal:width * 0.4}]}>3/4</Text>
<TouchableOpacity onPress={this.scrollToD} style={{marginRight:config.deviceHeight * 0.8, width: '25%'}}> <TouchableOpacity onPress={this.scrollToD} style={{marginRight:height * 0.8, width: '25%'}}>
<Text style={style.scrollButtonText}>Next{'>>'}</Text> <Image style={styles.rightIcon} source={rightIcon}/>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={style.screenC}> <View style={{backgroundColor:'#9F9F9F'}}>
<View style={styles.screenC}>
{NOTESWHITE.slice(26, 39).map((item,id) => ( {NOTESWHITE.slice(26, 39).map((item,id) => (
<TouchableHighlight <TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? styles.selectedKeywordStyle : styles.buttonStyle }
style={
keywordsList.find((element) => element === item.name)
? style.selectedKeywordStyle
: style.buttonStyle
}
onPress={() => this.toggleKeyword(item.name)} onPress={() => this.toggleKeyword(item.name)}
key={id}> key={id}>
<Text style={styles.textStyle}> {item.name} </Text> <Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight> </TouchableHighlight>
))} ))}
{NOTESBLACK.slice(18, 27).map((item, id) => ( {NOTESBLACK.slice(18, 27).map((item, id) => (
<TouchableHighlight <TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? [styles.SbuttonB1, {marginLeft: height * item.left}] : [styles.buttonB1, {marginLeft: height * item.left}]}
style={
keywordsList.find((element) => element === item.name)
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item.name)} onPress={() => this.toggleKeyword(item.name)}
key={id}> key={id}>
<Text style={styles.textStyleB}>{item.name}</Text> <Text style={styles.textStyleB}>{item.name}</Text>
...@@ -841,36 +625,147 @@ showDone(){ ...@@ -841,36 +625,147 @@ showDone(){
))} ))}
</View> </View>
</View> </View>
</View>
<View style={style.screen}> <View style={styles.screen}>
<View style={{backgroundColor:'white',flexDirection:'row', width: Dimensions.get('screen').width}}> <View style={styles.viewPages}>
<TouchableOpacity onPress={this.scrollToC} style={{width: '25%'}}> <TouchableOpacity onPress={this.scrollToC} style={{width: '25%'}}>
<Text style={style.scrollButtonText}>{'<<'}Back</Text> <Image style={styles.leftIcon} source={leftIcon}/>
</TouchableOpacity> </TouchableOpacity>
<Text style={{marginVertical:10,marginHorizontal:30,fontFamily:'Gilroy-Light', textAlign: 'center'}}>4 of 4 pages</Text> <Text style={[styles.textPages, {paddingHorizontal:width * 0.5}]}>4/4</Text>
</View> </View>
<View style={style.screenC}> <View style={{backgroundColor:'#9F9F9F'}}>
<View style={styles.screenC}>
{NOTESWHITE.slice(39, 52).map((item,id) => ( {NOTESWHITE.slice(39, 52).map((item,id) => (
<TouchableHighlight <TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? styles.selectedKeywordStyle : styles.buttonStyle }
style={ onPress={() => this.toggleKeyword(item.name)}
keywordsList.find((element) => element === item.name) key={id}>
? style.selectedKeywordStyle <Text style={styles.textStyle}> {item.name} </Text>
: style.buttonStyle </TouchableHighlight>
))}
{NOTESBLACK.slice(27, 36).map((item, id) => (
<TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? [styles.SbuttonB1, {marginLeft: height * item.left}] : [styles.buttonB1, {marginLeft: height * item.left}]}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</View>
</View>
</View>
</ScrollView>
);
} }
else {
return (
<ScrollView style={styles.container} horizontal={true} scrollEnabled={true} showsHorizontalScrollIndicator={false} ref={(scroller) => {this.scroller = scroller;}}>
<View style={styles.screen}>
<View style={styles.viewPages}>
<View style={{marginLeft:width * 0.85, width: width * 0.2, backgroundColor:'gray'}}>
<Text style={[styles.textPages, {paddingHorizontal:width * 0.06}]}>1/4</Text>
</View>
<TouchableOpacity onPress={this.scrollToB} style={{width: width * 0.2, marginLeft: width * 0.25, backgroundColor:'gray'}}>
<Image style={styles.rightIcon} source={rightIcon}/>
</TouchableOpacity>
</View>
<View style={{backgroundColor:'#9F9F9F'}}>
<View style={styles.screenA}>
{NOTESWHITE.slice(0, 13).map((item,id) => (
<TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? styles.selectedKeywordStyle : styles.buttonStyle}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight>
))}
{NOTESBLACK.slice(0,8).map((item, id) => (
<TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? [styles.SbuttonB1, {marginLeft: height * item.left}] : [styles.buttonB1, {marginLeft: height * item.left}]}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</View>
</View>
</View>
<View style={styles.screen}>
<View style={styles.viewPages}>
<TouchableOpacity onPress={this.scrollToStart} style={{width: '25%', marginLeft:width * 0.4}}>
<Image style={styles.leftIcon} source={leftIcon}/>
</TouchableOpacity>
<Text style={[styles.textPages, {paddingLeft:width * 0.1, paddingRight:width * 0.1}]}>2/4</Text>
<TouchableOpacity onPress={this.scrollToC} style={{marginRight:height * 0.3,width: '25%'}}>
<Image style={styles.rightIcon} source={rightIcon}/>
</TouchableOpacity>
</View>
<View style={{backgroundColor:'#9F9F9F'}}>
<View style={styles.screenB}>
{NOTESWHITE.slice(13, 26).map((item,id) => (
<TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? styles.selectedKeywordStyle : styles.buttonStyle}
onPress={() => this.toggleKeyword(item.name)} onPress={() => this.toggleKeyword(item.name)}
key={id}> key={id}>
<Text style={styles.textStyle}> {item.name} </Text> <Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight>
))}
{NOTESBLACK.slice(8,18).map((item, id) => (
<TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? [styles.SbuttonB1, {marginLeft: height * item.left}] : [styles.buttonB1, {marginLeft:height * item.left}]}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</View>
</View>
</View>
<View style={styles.screen}>
<View style={styles.viewPages}>
<TouchableOpacity onPress={this.scrollToB} style={{width: '25%'}}>
<Image style={styles.leftIcon} source={leftIcon}/>
</TouchableOpacity>
<Text style={[styles.textPages, {paddingHorizontal:width * 0.4}]}>3/4</Text>
<TouchableOpacity onPress={this.scrollToD} style={{marginRight:height * 0.8, width: '25%'}}>
<Image style={styles.rightIcon} source={rightIcon}/>
</TouchableOpacity>
</View>
<View style={{backgroundColor:'#9F9F9F'}}>
<View style={styles.screenC}>
{NOTESWHITE.slice(26, 39).map((item,id) => (
<TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? styles.selectedKeywordStyle : styles.buttonStyle }
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight>
))}
{NOTESBLACK.slice(18, 27).map((item, id) => (
<TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? [styles.SbuttonB1, {marginLeft: height * item.left}] : [styles.buttonB1, {marginLeft: height * item.left}]}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</View>
</View>
</View>
<View style={styles.screen}>
<View style={styles.viewPages}>
<TouchableOpacity onPress={this.scrollToC} style={{width: '25%'}}>
<Image style={styles.leftIcon} source={leftIcon}/>
</TouchableOpacity>
<Text style={[styles.textPages, {paddingHorizontal:width * 0.5}]}>4/4</Text>
</View>
<View style={{backgroundColor:'#9F9F9F'}}>
<View style={styles.screenC}>
{NOTESWHITE.slice(39, 52).map((item,id) => (
<TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? styles.selectedKeywordStyle : styles.buttonStyle }
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight> </TouchableHighlight>
))} ))}
{NOTESBLACK.slice(27, 36).map((item, id) => ( {NOTESBLACK.slice(27, 36).map((item, id) => (
<TouchableHighlight <TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? [styles.SbuttonB1, {marginLeft: height * item.left}] : [styles.buttonB1, {marginLeft: height * item.left}]}
style={
keywordsList.find((element) => element === item.name)
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item.name)} onPress={() => this.toggleKeyword(item.name)}
key={id}> key={id}>
<Text style={styles.textStyleB}>{item.name}</Text> <Text style={styles.textStyleB}>{item.name}</Text>
...@@ -878,75 +773,70 @@ showDone(){ ...@@ -878,75 +773,70 @@ showDone(){
))} ))}
</View> </View>
</View> </View>
</View>
</ScrollView> </ScrollView>
);
}
}
render() {
return (
<View style={{flex: 1, backgroundColor:'#81C9C9'}}>
<StatusBar hidden />
{this.showQuit()}
{this.showCorrect()}
{this.showWrong()}
{this.showDone()}
<View style={styles.viewTitle}>
<TouchableOpacity style={{marginHorizontal:height * 0.01}} onPress={() => this.homeExit()}>
<Image style={styles.closeIcon} source={closeIcon} />
</TouchableOpacity>
<Text style={styles.textTitle}>Listen Skill</Text>
<View style={styles.viewAttempt}>
<View style={{flexDirection:'row', paddingHorizontal: width * 0.06}}>
<Text style={styles.textAttemptCount}>Attempt {this.state.keynumber} </Text>
<Text style={styles.textAttempt}>/ 2</Text>
</View>
</View>
</View> </View>
<View style={styles.view1}>
<View style={styles.viewQues}>
<View style={{flexDirection:'row'}}>
<Text style={styles.textQues}>
Question {this.state.correct + this.state.wrong}
</Text>
<Text style={styles.textQuesCount}>
/ {this.state.maxCount}
</Text>
</View>
<View style={{flexDirection:'row'}}>
<Image style={styles.corIconQues} source={corIcon}/>
<Text style={styles.textCorrectQ}>
{this.state.correct}
</Text>
</View>
</View>
{this.showButtonPlaying()}
<View style={styles.viewStopWatch}>
<Stopwatch
secs
start={this.state.start}
getTime={(tt) => {
stime = tt;
}}
// Options for the styling
options={{//timer
container: styles.containerStopWatch,
text: styles.textStopWatch}}/>
<Image style={styles.timerIcon} source={timerIcon}/>
</View>
</View>
{this.showPlaying()}
</View>
); );
} }
} }
export default Listen; export default Listen;
const style = StyleSheet.create({
container: {
height:'20%',
},
screen: {
// backgroundColor: 'yellow',
width: Dimensions.get('window').height,
},
screenA: {
width: Dimensions.get('window').height,
backgroundColor: '#F7CAC9',
flexDirection: 'row',
},
screenB: {
width: Dimensions.get('window').height,
backgroundColor: '#92A8D1',
flexDirection: 'row',
},
screenC: {
width: Dimensions.get('window').height,
backgroundColor: '#88B04B',
flexDirection: 'row',
},
scrollButtonText: {
padding: 10,
textAlign: 'center',
fontFamily:'Gilroy-Bold',
},
buttonStyle: {
width: Dimensions.get('window').height / 13,
height:'115%',
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
selectedKeywordStyle: {
width: Dimensions.get('window').width / 13,
height:'115%',
alignItems: 'center',
backgroundColor: '#EEA1E1',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
buttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '65%',
width: '5%',
position: 'absolute',
},
SbuttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '50%',
marginLeft: config.deviceWidth * 0.048,
width: '5%',
position: 'absolute',
},
});
screens/quiz.js
View file @ 0bdc5be3
...@@ -29,10 +29,6 @@ import Sound from 'react-native-sound'; ...@@ -29,10 +29,6 @@ import Sound from 'react-native-sound';
import moment from 'moment'; import moment from 'moment';
import AsyncStorage from '@react-native-async-storage/async-storage'; import AsyncStorage from '@react-native-async-storage/async-storage';
const con = {
deviceWidth: Dimensions.get('window').width,
deviceHeight: Dimensions.get('window').height,
};
const date = moment().utcOffset('+08:00').format('DD/MM/YYYY'); const date = moment().utcOffset('+08:00').format('DD/MM/YYYY');
const time = moment().utcOffset('+08:00').format('h:mm a'); const time = moment().utcOffset('+08:00').format('h:mm a');
const day = moment().utcOffset('+08:00').format('ddd'); const day = moment().utcOffset('+08:00').format('ddd');
...@@ -77,6 +73,11 @@ const corIcon = require('../media/img/icon_check.png'); ...@@ -77,6 +73,11 @@ const corIcon = require('../media/img/icon_check.png');
const timerIcon = require('../media/img/icon_timer.png'); const timerIcon = require('../media/img/icon_timer.png');
const undo1 = require('../media/img/btn_reset_grey.png'); const undo1 = require('../media/img/btn_reset_grey.png');
const undo2 = require('../media/img/btn_reset_orange.png'); const undo2 = require('../media/img/btn_reset_orange.png');
const closeIcon = require('../media/img/btn_close.png');
const height = Dimensions.get('window').height;
const width = Dimensions.get('window').width;
var imageN = ''; var imageN = '';
var indexN = 0; var indexN = 0;
...@@ -996,7 +997,13 @@ class Quiz extends React.Component { ...@@ -996,7 +997,13 @@ class Quiz extends React.Component {
{this.showCorrect()} {this.showCorrect()}
{this.showWrong()} {this.showWrong()}
{this.showDone()} {this.showDone()}
<View style={styles.viewTitle}>
<TouchableOpacity style={{marginHorizontal:height * 0.01}} onPress={() => this.homeExit()}>
<Image style={styles.closeIcon} source={closeIcon} />
</TouchableOpacity>
<Text style={styles.textTitle}>Scale</Text>
{this.clickSubmitButton()} {this.clickSubmitButton()}
</View>
<View style={styles.view1}> <View style={styles.view1}>
<View style={styles.viewQues}> <View style={styles.viewQues}>
......
style/styleListen.js
View file @ 0bdc5be3
/* eslint-disable prettier/prettier */ /* eslint-disable prettier/prettier */
import {StyleSheet, Dimensions} from 'react-native'; import {StyleSheet, Dimensions} from 'react-native';
import config from './config';
const height = Dimensions.get('window').height;
const width = Dimensions.get('window').width;
export default StyleSheet.create({ export default StyleSheet.create({
imagebackground: { viewTitle: {
width: '100%', flexDirection: 'row',
height: '100%', height:'15%',
}, width:height,
//Modal Quit marginTop:'2%',
modalbackground: { },
backgroundColor: '#000000aa', textTitle: {
flex: 1, fontFamily: 'Gilroy-Bold',
}, fontSize: 20,
viewmodalQ: { lineHeight: 25,
marginLeft: Dimensions.get('window').height * 0.3, marginLeft: height * 0.33,
width : Dimensions.get('window').height * 0.4, marginTop:width * 0.045,
height : Dimensions.get('window').width * 0.35, },
marginTop : Dimensions.get('window').width * 0.25, closeIcon: {
height: 50,
width: 50,
padding:10,
marginTop:width * 0.02,
},
viewAttempt: {
backgroundColor:'#FFFFFF',
borderRadius:8,
width:height * 0.22,
marginTop:width * 0.03,
marginLeft: height * 0.17,
},
textAttemptCount:{
fontFamily:'Gilroy-Bold',
fontSize:16,
textAlign:'left',
lineHeight:20,
color:'#EF476F',
paddingVertical:width * 0.03,
},
textAttempt:{
fontFamily:'Gilroy-Bold',
fontSize:16,
textAlign:'left',
lineHeight:20,
color:'#3B3A39',
paddingVertical:width * 0.03,
},
//showQuit()
viewShowQuit:{
marginHorizontal:height * 0.28,
width:height * 0.45,
height:width * 0.6,
marginTop:height * 0.13,
alignItems: 'center', alignItems: 'center',
backgroundColor:'white', backgroundColor:'#FFFBF0',
borderRadius: 10, borderRadius: 16,
borderColor: 'black', },
borderWidth: 5, quitIcon:{
}, height:'40%',
textquit: { width:'30%',
fontSize: 25, position:'absolute',
fontFamily: 'sans-serif', left:110,
top: -45,
},
textQuitScale:{
fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center', textAlign: 'center',
marginTop: 5, lineHeight:30,
color:'black', color:'#3B3A39',
}, paddingTop:width * 0.17,
viewmodalQQ : { },
viewButtonQuit:{
alignItems: 'center', alignItems: 'center',
flexDirection: 'row', flexDirection: 'row',
marginTop:15, marginTop:20,
}, justifyContent: 'center',
buttonyes: { },
backgroundColor: 'white', buttonNoQuit:{
backgroundColor: '#FFFFFF',
padding: 15, padding: 15,
borderRadius: 10, borderRadius: 8,
marginTop:10, marginTop:10,
marginBottom:10, marginBottom:10,
borderTopColor:'black', borderColor:'#81C9C9',
borderRightColor:'black', borderWidth: 1,
borderWidth: 3, marginRight:8,
marginRight:5, },
}, textNoQuit:{
buttonno: { color: '#81C9C9',
fontFamily: 'Gilroy-Bold',
fontSize:16,
textAlign: 'left',
lineHeight:20,
paddingHorizontal:height * 0.04,
},
buttonYesQuit:{
backgroundColor: 'white', backgroundColor: 'white',
paddingLeft: 18, paddingLeft: 18,
paddingRight: 18, paddingRight: 18,
paddingTop: 15, paddingTop: 15,
paddingBottom: 15, paddingBottom: 15,
borderRadius: 10, borderRadius: 8,
marginTop:10, marginTop:10,
marginBottom:10, marginBottom:10,
borderWidth: 3, borderWidth: 1,
borderTopColor:'black', borderColor:'#81C9C9',
marginLeft:5, marginLeft:8,
}, },
textqq: { textYesQuit:{
color: 'black', color: '#81C9C9',
fontFamily: 'sans-serif', fontFamily: 'Gilroy-Bold',
}, fontSize:16,
// Modal Correct and Wrong textAlign: 'left',
viewmodalCW: { lineHeight:20,
marginLeft: Dimensions.get('window').height * 0.25, paddingHorizontal:height * 0.03,
width : Dimensions.get('window').height * 0.4, },
//showCorrect()
viewShowCorrect:{
marginHorizontal: height * 0.28,
width :height * 0.45,
height :width * 0.6,
marginTop :height * 0.13,
alignItems: 'center', alignItems: 'center',
}, backgroundColor:'#FFFBF0',
imagecw: { borderRadius: 16,
width: '130%', },
height: '95%', correctIcon:{
}, height:'40%',
textcw: { width:'30%',
fontSize: 25, position:'absolute',
fontFamily: 'sans-serif', left:110,
top: -45,
},
textScaleResult:{
fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center', textAlign: 'center',
marginTop:Dimensions.get('window').width * 0.43, lineHeight:25,
marginLeft:120, color:'#3B3A39',
color:'white', paddingTop:width * 0.17,
}, },
viewbutton: { textCorrect:{
alignItems: 'center', fontSize: 24,
marginLeft:120, fontFamily: 'Gilroy-Bold',
}, textAlign: 'center',
buttonc: { lineHeight:30,
backgroundColor: 'white', color:'#14A76C',
borderColor: 'black', paddingTop:width * 0.02,
padding: 15, },
borderRadius: 5, buttonOK:{
backgroundColor: '#81C9C9',
width :height * 0.3,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10, marginTop:10,
marginBottom:10, marginBottom:10,
}, marginLeft:8,
buttonok: { },
color: 'black', textOK:{
}, color: '#FFFFFF',
// Modal Done fontFamily: 'Gilroy-Bold',
viewmodalD: { fontSize:16,
marginLeft: Dimensions.get('window').height * 0.3, textAlign: 'left',
width : Dimensions.get('window').height * 0.4, lineHeight:20,
alignItems: 'center', paddingHorizontal:height * 0.12,
}, },
imagedone :{
width: '120%', //showWrong()
height: '98%', viewShowWrong: {
}, marginHorizontal:height * 0.28,
viewmodalDD: { width :height * 0.45,
height :width * 0.6,
marginTop :height * 0.13,
alignItems: 'center', alignItems: 'center',
marginLeft:70, backgroundColor:'#FFFBF0',
}, borderRadius: 16,
textwelldone: { },
fontSize: 25, wrongIcon:{
fontFamily: 'sans-serif', height:'40%',
textAlign: 'center', width:'30%',
marginTop:Dimensions.get('window').width * 0.42, position:'absolute',
marginLeft:65, left:110,
color:'white', top: -45,
}, },
modaltextcorrect: { textScaleResultW:{
fontSize: 15, fontSize: 20,
fontFamily: 'sans-serif', fontFamily: 'Gilroy-Bold',
marginLeft:65,
textAlign: 'center', textAlign: 'center',
color: 'green', lineHeight:25,
}, color:'#3B3A39',
modaltextwrong: { paddingTop:width * 0.17,
fontSize: 15, },
fontFamily: 'sans-serif', textWrong:{
marginLeft:65, fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center', textAlign: 'center',
color: 'red', lineHeight:30,
}, color:'#D11427',
c1: { paddingTop:width * 0.02,
height: '45%', },
alignItems: 'center', buttonOKW:{
borderColor: 'black', backgroundColor: '#81C9C9',
marginTop:5, width :height * 0.3,
}, paddingTop: 15,
cc1: { paddingBottom: 15,
flexDirection: 'row', borderRadius: 8,
marginLeft: 5, marginTop:10,
}, marginBottom:10,
t: { marginLeft:8,
fontSize: 25, },
fontFamily: 'sans-serif', textOKW:{
}, color: '#FFFFFF',
c2: { fontFamily: 'Gilroy-Bold',
flexDirection: 'row', fontSize:16,
height: '35%', textAlign: 'left',
}, lineHeight:20,
paddingHorizontal:height * 0.12,
},
t1: { //showDone()
color: 'black', viewShowDone:{
paddingTop: 120, marginHorizontal:height * 0.28,
}, width :height * 0.42,
button: { height :width * 0.73,
flex: 7, marginTop :height * 0.08,
alignItems: 'center', alignItems: 'center',
backgroundColor: 'white', backgroundColor:'#FFFBF0',
borderRightWidth: 1, borderRadius: 16,
borderColor: 'black', },
borderBottomWidth: 1, doneIcon:{
}, height:'30%',
b1: { width:'27%',
marginBottom: 25, position:'absolute',
width: 200, left:110,
height: 50, top: -45,
borderRadius: 15, },
alignItems: 'center', textWellDone:{
backgroundColor: 'purple', fontSize: 20,
}, fontFamily: 'Gilroy-Bold',
buttonText: {
textAlign: 'center', textAlign: 'center',
paddingTop: 15, lineHeight:25,
color: 'white', color:'#3B3A39',
fontSize: 15, paddingTop:width * 0.14,
fontFamily: 'sans-serif', },
}, viewListenResult:{
logo: { borderRadius:16,
height: config.deviceWidth * 0.22, borderColor:'#E7E7E7',
width: config.deviceHeight * 0.5, borderWidth:1,
borderColor: 'black', backgroundColor:'#FFFBF0',
borderWidth: 3, marginTop:'2.5%',
borderRadius: 10, marginLeft:'2%',
position: 'absolute', width:height * 0.33,
marginTop: config.deviceWidth * 0.11, marginBottom:'1.7%',
backgroundColor:'white', },
}, textListenResultD: {
correct: { fontSize: 20,
width: 100, fontFamily: 'Gilroy-Bold',
textAlign: 'center', textAlign: 'center',
lineHeight:25,
color:'#3D9090',
paddingHorizontal: height * 0.03,
paddingTop:width * 0.02,
},
viewCorrectWrong:{
flexDirection: 'row',
paddingHorizontal:height * 0.07,
paddingVertical:width * 0.02,
},
corIcon:{
height:'65%',
width:'14%',
marginTop:'3%',
},
wroIcon:{
height:'65%',
width:'14%',
marginTop:'3%',
},
textCorrectD:{
color:'#14A76C',
fontSize:24,
fontFamily:'Gilroy-Bold',
textAlign:'left',
lineHeight:30,
paddingHorizontal:'10%',
},
textWrongD:{
color:'#F94C4C',
fontSize:24,
fontFamily:'Gilroy-Bold',
textAlign:'left',
lineHeight:30,
paddingHorizontal:'10%',
},
buttonDone:{
backgroundColor: '#81C9C9',
width :height * 0.33,
paddingTop: 15, paddingTop: 15,
color: 'white', paddingBottom: 15,
height: 60, borderRadius: 8,
borderRadius: 10, marginTop:10,
alignItems: 'center', marginBottom:10,
fontSize: 25, marginLeft:5,
marginRight: 10, },
backgroundColor:'green', textDone:{
borderColor:'white', color: '#FFFFFF',
borderWidth: 2, fontFamily: 'Gilroy-Bold',
fontFamily: 'sans-serif', fontSize:16,
}, textAlign: 'left',
wrong: { lineHeight:20,
width: 100, paddingHorizontal:height * 0.12,
height: 60, },
borderRadius: 10, //render()
borderColor:'white', view1:{
alignItems: 'center', backgroundColor:'#FFFBF0',
flexDirection: 'row',
width:height,
height:width * 0.3,
borderTopLeftRadius:8,
borderTopRightRadius:8,
marginTop:width * 0.04,
},
viewQues:{
width:height * 0.25,
marginHorizontal:height * 0.03,
marginTop:'4%',
marginBottom:'3%',
},
textQues:{
fontFamily:'Gilroy-Bold',
fontSize:16,
textAlign:'left',
lineHeight:20,
color:'#EF476F',
paddingBottom:'1.5%',
},
textQuesCount:{
fontFamily:'Gilroy-Bold',
fontSize:16,
textAlign:'left',
lineHeight:20,
color:'#3B3A39',
paddingBottom:'1.5%',
paddingLeft:'2%',
},
corIconQues:{
height:'65%',
width:'12%',
marginTop:'3%',
},
textCorrectQ:{
fontFamily:'Gilroy-Bold',
fontSize:24,
textAlign:'left',
lineHeight:30,
color:'#14A76C',
paddingHorizontal:'8%',
},
viewPlayButton:{
alignItems:'center',
width:height * 0.32,
marginLeft:height * 0.03,
marginTop:'1.5%',
},
buttonPlaying:{
backgroundColor: '#EF476F',
width : height * 0.3,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 30,
marginTop:10,
marginBottom:10,
},
textPlaying:{
fontFamily: 'Gilroy-Bold',
fontSize:16,
textAlign: 'center', textAlign: 'center',
lineHeight:20,
color:'#FFFBF0',
paddingHorizontal:height * 0.04,
paddingVertical:width * 0.02,
},
playIcon: {
height:'49%',
width:'16%',
marginTop:'4%',
marginLeft:'15%',
},
buttonPlayingP:{
backgroundColor: '#991736',
width : height * 0.3,
paddingTop: 15, paddingTop: 15,
color: 'white', paddingBottom: 15,
fontSize: 25, borderRadius: 30,
marginRight: 10, marginTop:10,
backgroundColor:'red', marginBottom:10,
borderWidth: 2, },
fontFamily: 'sans-serif', textPlayingP:{
}, fontFamily: 'Gilroy-Bold',
timer: { fontSize:16,
width: 65,
height: 60,
borderRadius: 10,
borderColor:'white',
alignItems: 'center',
textAlign: 'center', textAlign: 'center',
paddingTop: 16, lineHeight:20,
color: 'white', color:'#FFFBF0',
fontSize: 25, paddingHorizontal:height * 0.02,
backgroundColor:'black', paddingVertical:width * 0.02,
borderWidth: 2, },
fontFamily: 'sans-serif', playIconP: {
}, height:'49%',
submit: { width:'16%',
width: '40%', marginTop:'4%',
marginTop: config.deviceWidth * 0.055, marginLeft:'15%',
borderColor:'white', },
borderWidth: 2, viewStopWatch:{
borderRadius: 5, alignItems:'center',
}, width:height * 0.25,
viewMain: { marginHorizontal:height * 0.064,
width: '20%', marginTop:'3.5%',
alignContent: 'flex-end', },
marginLeft: 180, //stopwatch
marginTop: '173%', containerStopWatch:{
backgroundColor: '#FFECDA',
padding: 10,
borderRadius: 8,
borderColor:'#FFECDA',
borderWidth:2,
width:height * 0.22,
alignItems: 'center',
},
textStopWatch:{
fontSize: 16,
color: '#3B3A39',
textAlign: 'left',
paddingTop: 5,
lineHeight:20,
alignItems: 'center',
fontFamily: 'Gilroy-Bold',
},
timerIcon:{
height:'25%',
width:'12%',
position: 'absolute', position: 'absolute',
}, left:22,
top:16,
container: { },
flex: 1, container: {
}, height:'30%',
textStyle: { },
fontSize: 14, screen: {
padding: 8, backgroundColor: 'yellow',
paddingTop:100, width: height,
textAlign: 'center', },
fontFamily: 'sans-serif', screenA: {
}, width: height,
textStyleB: { height:width * 0.4,
fontSize: 12, backgroundColor: '#F7CAC9',
padding: 8, flexDirection: 'row',
paddingTop:5, },
screenB: {
width: height,
height:width * 0.4,
backgroundColor: '#92A8D1',
flexDirection: 'row',
},
screenC: {
width:height,
height:width * 0.4,
backgroundColor: '#88B04B',
flexDirection: 'row',
},
scrollButtonText: {
padding: 10,
textAlign: 'center', textAlign: 'center',
color:'white', fontFamily:'Gilroy-Bold',
fontFamily: 'sans-serif', },
}, buttonView: {
buttonView: {
flexDirection: 'column', flexDirection: 'column',
marginLeft: config.deviceHeight * 1.0, marginLeft: width * 1.0,
}, },
buttonStyle: { textStyle:{
width: config.deviceWidth / 14, color:'#707070',
height:'70%', fontSize:12,
fontFamily: 'Gilroy-Light',
textAlign: 'left',
lineHeight:14,
marginTop: height * 0.13,
},
textStyleB:{
color:'#FFFBF0',
fontSize:12,
fontFamily: 'Gilroy-Light',
textAlign: 'left',
lineHeight:14,
marginTop: height * 0.02,
},
buttonStyle: {
width: height / 13,
height:height * 0.4,
alignItems: 'center', alignItems: 'center',
backgroundColor: 'white', backgroundColor: 'white',
borderRightWidth: 1, borderWidth: 0.5,
borderColor: 'black', borderColor: '#707070',
borderBottomWidth: 1, },
}, selectedKeywordStyle: {
selectedKeywordStyle: { width: width / 13,
width: config.deviceWidth / 14, height:height * 0.4,
height:'70%',
alignItems: 'center', alignItems: 'center',
backgroundColor: '#EEA1E1', backgroundColor: '#FCE1FF',
borderRightWidth: 1, borderWidth: 0.5,
borderColor: 'black', borderColor: '#707070',
borderBottomWidth: 1, },
}, buttonB1: {
buttonB1: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black', backgroundColor: 'black',
height: '50%', height: '55%',
width: '1.5%', width: '5%',
position: 'absolute', position: 'absolute',
}, },
SbuttonB1: { SbuttonB1: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black', backgroundColor: '#FCE1FF',
height: '50%', height: '55%',
marginLeft: config.deviceWidth * 0.048, marginLeft: height * 0.048,
width: '1.5%', width: '5%',
position: 'absolute', position: 'absolute',
}, },
viewPages: {
backgroundColor:'#3B3A39',
flexDirection:'row',
width:height,
height:width * 0.12,
},
textPages:{
color:'#FFFFFF',
marginVertical:width * 0.03,
fontFamily:'Gilroy-Light',
textAlign: 'left',
lineHeight:20,
fontSize:16,
},
leftIcon:{
height:width * 0.03,
width:height * 0.03,
paddingHorizontal: height * 0.045,
paddingVertical: width * 0.052,
},
rightIcon:{
height:width * 0.03,
width:height * 0.03,
paddingHorizontal: height * 0.055,
paddingVertical: width * 0.052,
},
anime: {
backgroundColor:'white',
width: '100%',
height: 20,
borderColor: '#FAA',
justifyContent: 'center',
},
inner:{
width: '100%',
height: 20,
backgroundColor:'green',
},
}); });
// //
......
style/styleQuiz.js
View file @ 0bdc5be3
...@@ -5,19 +5,38 @@ const width = Dimensions.get('window').width; ...@@ -5,19 +5,38 @@ const width = Dimensions.get('window').width;
export default StyleSheet.create({ export default StyleSheet.create({
viewTitle: {
flexDirection: 'row',
height:'15%',
width:height,
marginTop:'2%',
},
textTitle: {
fontFamily: 'Gilroy-Bold',
fontSize: 20,
lineHeight: 25,
marginLeft: height * 0.36,
marginTop:width * 0.04,
},
closeIcon: {
height: 50,
width: 50,
padding:10,
},
// clickSubmitButton () // clickSubmitButton ()
viewSubmitButton:{ viewSubmitButton:{
flexDirection: 'row', flexDirection: 'row',
width:width, width:height * 0.2,
marginBottom:height * 0.05, marginBottom:width * 0.05,
height:width * 0.15,
marginLeft:height * 0.08,
}, },
// clickSubmitButton () if true // clickSubmitButton () if true
buttonSubmitButtonT:{ buttonSubmitButtonT:{
backgroundColor:'#E7E7E7', backgroundColor:'#E7E7E7',
borderRadius:8, borderRadius:8,
width:width * 0.22, width:height * 0.22,
marginHorizontal:width * 0.75, marginHorizontal:height * 0.05,
marginTop:'3%',
}, },
textSubmitButtonT:{ textSubmitButtonT:{
fontFamily:'Gilroy-Bold', fontFamily:'Gilroy-Bold',
...@@ -25,14 +44,14 @@ textSubmitButtonT:{ ...@@ -25,14 +44,14 @@ textSubmitButtonT:{
textAlign:'center', textAlign:'center',
lineHeight:20, lineHeight:20,
color:'#848484', color:'#848484',
paddingVertical:height * 0.035, paddingVertical:width * 0.035,
}, },
// clickSubmitButton () if false // clickSubmitButton () if false
buttonSubmitButtonF:{ buttonSubmitButtonF:{
backgroundColor:'#EF476F', backgroundColor:'#EF476F',
borderRadius:8, borderRadius:8,
width:width * 0.22, width:height * 0.22,
marginHorizontal:width * 0.75, marginHorizontal:height * 0.05,
marginTop:'3%', marginTop:'3%',
}, },
textSubmitButtonF:{ textSubmitButtonF:{
...@@ -41,7 +60,7 @@ textSubmitButtonF:{ ...@@ -41,7 +60,7 @@ textSubmitButtonF:{
textAlign:'center', textAlign:'center',
lineHeight:20, lineHeight:20,
color:'#FFFBF0', color:'#FFFBF0',
paddingVertical:height * 0.035, paddingVertical:width * 0.035,
}, },
//clickResetButton () //clickResetButton ()
...@@ -56,9 +75,9 @@ buttonResetButtonT:{ ...@@ -56,9 +75,9 @@ buttonResetButtonT:{
borderColor:'#E7E7E7', borderColor:'#E7E7E7',
borderWidth:1, borderWidth:1,
borderRadius:8, borderRadius:8,
width:width * 0.22, width:height * 0.22,
marginHorizontal:width * 0.72, marginHorizontal:height * 0.72,
marginTop:height * 0.03, marginTop:width * 0.03,
}, },
textResetButtonT:{ textResetButtonT:{
fontFamily:'Gilroy-Bold', fontFamily:'Gilroy-Bold',
...@@ -66,16 +85,16 @@ textResetButtonT:{ ...@@ -66,16 +85,16 @@ textResetButtonT:{
textAlign:'left', textAlign:'left',
lineHeight:18, lineHeight:18,
color:'#848484', color:'#848484',
paddingVertical:height * 0.04, paddingVertical:width * 0.04,
}, },
buttonResetButtonF:{ buttonResetButtonF:{
backgroundColor:'#FFFBF0', backgroundColor:'#FFFBF0',
borderColor:'#FC8121', borderColor:'#FC8121',
borderWidth:1, borderWidth:1,
borderRadius:8, borderRadius:8,
width:width * 0.22, width:height * 0.22,
marginHorizontal:width * 0.72, marginHorizontal:height * 0.72,
marginTop:height * 0.03, marginTop:width * 0.03,
}, },
textResetButtonF:{ textResetButtonF:{
fontFamily:'Gilroy-Bold', fontFamily:'Gilroy-Bold',
...@@ -83,15 +102,15 @@ textResetButtonF:{ ...@@ -83,15 +102,15 @@ textResetButtonF:{
textAlign:'left', textAlign:'left',
lineHeight:18, lineHeight:18,
color:'#FC8121', color:'#FC8121',
paddingVertical:height * 0.04, paddingVertical:width * 0.04,
}, },
//showQuit() //showQuit()
viewShowQuit:{ viewShowQuit:{
marginHorizontal:width * 0.28, marginHorizontal:height * 0.28,
width:width * 0.45, width:height * 0.45,
height:height * 0.6, height:width * 0.6,
marginTop:width * 0.13, marginTop:height * 0.13,
alignItems: 'center', alignItems: 'center',
backgroundColor:'#FFFBF0', backgroundColor:'#FFFBF0',
borderRadius: 16, borderRadius: 16,
...@@ -109,7 +128,7 @@ textQuitScale:{ ...@@ -109,7 +128,7 @@ textQuitScale:{
textAlign: 'center', textAlign: 'center',
lineHeight:30, lineHeight:30,
color:'#3B3A39', color:'#3B3A39',
paddingTop:height * 0.17, paddingTop:width * 0.17,
}, },
viewButtonQuit:{ viewButtonQuit:{
alignItems: 'center', alignItems: 'center',
...@@ -133,7 +152,7 @@ textNoQuit:{ ...@@ -133,7 +152,7 @@ textNoQuit:{
fontSize:16, fontSize:16,
textAlign: 'left', textAlign: 'left',
lineHeight:20, lineHeight:20,
paddingHorizontal:width * 0.04, paddingHorizontal:height * 0.04,
}, },
buttonYesQuit:{ buttonYesQuit:{
backgroundColor: 'white', backgroundColor: 'white',
...@@ -154,15 +173,15 @@ textYesQuit:{ ...@@ -154,15 +173,15 @@ textYesQuit:{
fontSize:16, fontSize:16,
textAlign: 'left', textAlign: 'left',
lineHeight:20, lineHeight:20,
paddingHorizontal:width * 0.03, paddingHorizontal:height * 0.03,
}, },
//showCorrect() //showCorrect()
viewShowCorrect:{ viewShowCorrect:{
marginHorizontal: Dimensions.get('window').width * 0.28, marginHorizontal: height * 0.28,
width :width * 0.45, width :height * 0.45,
height :height * 0.6, height :width * 0.6,
marginTop :width * 0.13, marginTop :height * 0.13,
alignItems: 'center', alignItems: 'center',
backgroundColor:'#FFFBF0', backgroundColor:'#FFFBF0',
borderRadius: 16, borderRadius: 16,
...@@ -180,7 +199,7 @@ textScaleResult:{ ...@@ -180,7 +199,7 @@ textScaleResult:{
textAlign: 'center', textAlign: 'center',
lineHeight:25, lineHeight:25,
color:'#3B3A39', color:'#3B3A39',
paddingTop:height * 0.17, paddingTop:width * 0.17,
}, },
textCorrect:{ textCorrect:{
fontSize: 24, fontSize: 24,
...@@ -188,11 +207,11 @@ textCorrect:{ ...@@ -188,11 +207,11 @@ textCorrect:{
textAlign: 'center', textAlign: 'center',
lineHeight:30, lineHeight:30,
color:'#14A76C', color:'#14A76C',
paddingTop:height * 0.02, paddingTop:width * 0.02,
}, },
buttonOK:{ buttonOK:{
backgroundColor: '#81C9C9', backgroundColor: '#81C9C9',
width :width * 0.3, width :height * 0.3,
paddingTop: 15, paddingTop: 15,
paddingBottom: 15, paddingBottom: 15,
borderRadius: 8, borderRadius: 8,
...@@ -206,15 +225,15 @@ textOK:{ ...@@ -206,15 +225,15 @@ textOK:{
fontSize:16, fontSize:16,
textAlign: 'left', textAlign: 'left',
lineHeight:20, lineHeight:20,
paddingHorizontal:width * 0.12, paddingHorizontal:height * 0.12,
}, },
//showWrong() //showWrong()
viewShowWrong: { viewShowWrong: {
marginHorizontal:width * 0.28, marginHorizontal:height * 0.28,
width :width * 0.45, width :height * 0.45,
height :height * 0.6, height :width * 0.6,
marginTop :width * 0.13, marginTop :height * 0.13,
alignItems: 'center', alignItems: 'center',
backgroundColor:'#FFFBF0', backgroundColor:'#FFFBF0',
borderRadius: 16, borderRadius: 16,
...@@ -232,7 +251,7 @@ textScaleResultW:{ ...@@ -232,7 +251,7 @@ textScaleResultW:{
textAlign: 'center', textAlign: 'center',
lineHeight:25, lineHeight:25,
color:'#3B3A39', color:'#3B3A39',
paddingTop:height * 0.17, paddingTop:width * 0.17,
}, },
textWrong:{ textWrong:{
fontSize: 24, fontSize: 24,
...@@ -240,11 +259,11 @@ textWrong:{ ...@@ -240,11 +259,11 @@ textWrong:{
textAlign: 'center', textAlign: 'center',
lineHeight:30, lineHeight:30,
color:'#D11427', color:'#D11427',
paddingTop:height * 0.02, paddingTop:width * 0.02,
}, },
buttonOKW:{ buttonOKW:{
backgroundColor: '#81C9C9', backgroundColor: '#81C9C9',
width :width * 0.3, width :height * 0.3,
paddingTop: 15, paddingTop: 15,
paddingBottom: 15, paddingBottom: 15,
borderRadius: 8, borderRadius: 8,
...@@ -258,15 +277,15 @@ textOKW:{ ...@@ -258,15 +277,15 @@ textOKW:{
fontSize:16, fontSize:16,
textAlign: 'left', textAlign: 'left',
lineHeight:20, lineHeight:20,
paddingHorizontal:width * 0.12, paddingHorizontal:height * 0.12,
}, },
//showDone() //showDone()
viewShowDone:{ viewShowDone:{
marginHorizontal:width * 0.28, marginHorizontal:height * 0.28,
width :width * 0.42, width :height * 0.42,
height :height * 0.73, height :width * 0.73,
marginTop :width * 0.08, marginTop :height * 0.08,
alignItems: 'center', alignItems: 'center',
backgroundColor:'#FFFBF0', backgroundColor:'#FFFBF0',
borderRadius: 16, borderRadius: 16,
...@@ -284,7 +303,7 @@ textWellDone:{ ...@@ -284,7 +303,7 @@ textWellDone:{
textAlign: 'center', textAlign: 'center',
lineHeight:25, lineHeight:25,
color:'#3B3A39', color:'#3B3A39',
paddingTop:height * 0.14, paddingTop:width * 0.14,
}, },
viewScaleResult:{ viewScaleResult:{
borderRadius:16, borderRadius:16,
...@@ -293,7 +312,8 @@ viewScaleResult:{ ...@@ -293,7 +312,8 @@ viewScaleResult:{
backgroundColor:'#FFFBF0', backgroundColor:'#FFFBF0',
marginTop:'2.5%', marginTop:'2.5%',
marginLeft:'2%', marginLeft:'2%',
width:width * 0.33, marginBottom:'1.7%', width:height * 0.33,
marginBottom:'1.7%',
}, },
textScaleResultD: { textScaleResultD: {
fontSize: 20, fontSize: 20,
...@@ -301,13 +321,13 @@ textScaleResultD: { ...@@ -301,13 +321,13 @@ textScaleResultD: {
textAlign: 'center', textAlign: 'center',
lineHeight:25, lineHeight:25,
color:'#3D9090', color:'#3D9090',
paddingHorizontal:width * 0.06, paddingHorizontal: height * 0.06,
paddingTop:height * 0.02, paddingTop:width * 0.02,
}, },
viewCorrectWrong:{ viewCorrectWrong:{
flexDirection: 'row', flexDirection: 'row',
paddingHorizontal:width * 0.07, paddingHorizontal:height * 0.07,
paddingVertical:height * 0.02, paddingVertical:width * 0.02,
}, },
corIcon:{ corIcon:{
height:'65%', height:'65%',
...@@ -337,7 +357,7 @@ textWrongD:{ ...@@ -337,7 +357,7 @@ textWrongD:{
}, },
buttonDone:{ buttonDone:{
backgroundColor: '#81C9C9', backgroundColor: '#81C9C9',
width :width * 0.33, width :height * 0.33,
paddingTop: 15, paddingTop: 15,
paddingBottom: 15, paddingBottom: 15,
borderRadius: 8, borderRadius: 8,
...@@ -351,21 +371,21 @@ textDone:{ ...@@ -351,21 +371,21 @@ textDone:{
fontSize:16, fontSize:16,
textAlign: 'left', textAlign: 'left',
lineHeight:20, lineHeight:20,
paddingHorizontal:width * 0.14, paddingHorizontal:height * 0.12,
}, },
//render() //render()
view1:{ view1:{
backgroundColor:'#FFFBF0', backgroundColor:'#FFFBF0',
flexDirection: 'row', flexDirection: 'row',
width:width, width:height,
height:height * 0.4, height:width * 0.4,
borderTopLeftRadius:8, borderTopLeftRadius:8,
borderTopRightRadius:8, borderTopRightRadius:8,
}, },
viewQues:{ viewQues:{
width:width * 0.25, width:height * 0.25,
marginHorizontal:width * 0.03, marginHorizontal:height * 0.03,
marginTop:'6%', marginTop:'6%',
marginBottom:'2%', marginBottom:'2%',
}, },
...@@ -401,13 +421,13 @@ textCorrectQ:{ ...@@ -401,13 +421,13 @@ textCorrectQ:{
}, },
viewImageNotes:{ viewImageNotes:{
alignItems:'center', alignItems:'center',
width:width * 0.32, width:height * 0.32,
marginHorizontal:width * 0.03, marginHorizontal:height * 0.03,
marginTop:'2%', marginTop:'2%',
}, },
imageNote:{ imageNote:{
height:height * 0.27, height:width * 0.27,
width:width * 0.18, width:height * 0.18,
}, },
textKeyLeft:{ textKeyLeft:{
fontFamily:'Gilroy-Bold', fontFamily:'Gilroy-Bold',
...@@ -426,8 +446,8 @@ textKeyCount:{ ...@@ -426,8 +446,8 @@ textKeyCount:{
}, },
viewTimerUndo:{ viewTimerUndo:{
alignItems:'center', alignItems:'center',
width:width * 0.25, width:height * 0.25,
marginHorizontal:width * 0.045, marginHorizontal:height * 0.045,
marginTop:'2.5%', marginTop:'2.5%',
}, },
//stopwatch //stopwatch
...@@ -437,7 +457,7 @@ containerStopWatch:{ ...@@ -437,7 +457,7 @@ containerStopWatch:{
borderRadius: 8, borderRadius: 8,
borderColor:'#FFECDA', borderColor:'#FFECDA',
borderWidth:2, borderWidth:2,
width:width * 0.22, width:height * 0.22,
alignItems: 'center', alignItems: 'center',
}, },
textStopWatch:{ textStopWatch:{
...@@ -451,15 +471,15 @@ textStopWatch:{ ...@@ -451,15 +471,15 @@ textStopWatch:{
}, },
timerIcon:{ timerIcon:{
height:'18%', height:'18%',
width:'13%', width:'15%',
position: 'absolute', position: 'absolute',
left:25, left:22,
top:15, top:16,
}, },
//White Notes //White Notes
whiteNotesButton: { whiteNotesButton: {
width:width / 14, width:height / 14,
borderWidth: 0.5, borderWidth: 0.5,
borderColor: '#707070', borderColor: '#707070',
alignItems: 'center', alignItems: 'center',
...@@ -467,7 +487,7 @@ whiteNotesButton: { ...@@ -467,7 +487,7 @@ whiteNotesButton: {
borderBottomWidth: 1, borderBottomWidth: 1,
}, },
whiteNotesButtonPress:{ whiteNotesButtonPress:{
width:width / 14, width:height / 14,
alignItems: 'center', alignItems: 'center',
backgroundColor: '#FCE1FF', backgroundColor: '#FCE1FF',
borderWidth: 0.5, borderWidth: 0.5,
......
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