Skip to content

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

updating UI

parent 3e25fd61
Hide whitespace changes
Inline Side-by-side
Showing with 1075 additions and 960 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,64 +138,20 @@ class App extends React.PureComponent { ...@@ -140,64 +138,20 @@ 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"
......
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,25 +108,10 @@ class Listen extends React.Component { ...@@ -111,25 +108,10 @@ 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);
//indexS = Listennotes.findIndex(item=> item.name === keyword); //indexS = Listennotes.findIndex(item=> item.name === 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 = () => {
...@@ -298,20 +277,20 @@ class Listen extends React.Component { ...@@ -298,20 +277,20 @@ class Listen extends React.Component {
componentDidMount() { componentDidMount() {
//this.removeArray(); //this.removeArray();
BackHandler.addEventListener('hardwareBackPress', this.homeExit); BackHandler.addEventListener('hardwareBackPress', this.homeExit);
Orientation.lockToLandscape(); Orientation.lockToLandscape();
//this.randomSound(); //this.randomSound();
this.displayData1(); this.displayData1();
this.reset(); this.reset();
console.log(NOTESWHITE.length); console.log(NOTESWHITE.length);
} }
componentWillUnmount() { componentWillUnmount() {
//this.removeArray(); //this.removeArray();
BackHandler.removeEventListener('hardwareBackPress', this.homeExit); BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
//clearInterval(this.interval); //clearInterval(this.interval);
// Orientation.lockToLandscape(); // Orientation.lockToLandscape();
} }
';'; ';';
...@@ -429,524 +408,435 @@ class Listen extends React.Component { ...@@ -429,524 +408,435 @@ class Listen extends React.Component {
showQuit (){ showQuit (){
if (this.state.showQuit === true){ if (this.state.showQuit === true){
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}}> </TouchableOpacity>
<Image style={{height:'40%', width:'30%', position:'absolute', left:110, top: -45 }} source={quitIcon}/> <TouchableOpacity style={styles.buttonYesQuit} onPress={() => this.backAction()}>
<Text style={styles.textYesQuit}>YES</Text>
<Text style={{ fontSize: 24, </TouchableOpacity>
fontFamily: 'Gilroy-Bold', </View>
textAlign: 'center', </View>
lineHeight:30, </View>
color:'#3B3A39', </Modal>
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 style={{ backgroundColor: 'white',
paddingLeft: 18,
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>
</View>
</View>
</View>
</Modal>
);
}
else { else {
return null; return null;
} }
} }
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>
</Modal> </Modal>
); );
} }
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>
</Modal> </Modal>
); );
} }
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',
textAlign: 'center',
lineHeight:25,
color:'#3B3A39',
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>
</View> </View>
</View> </View>
<TouchableOpacity style={styles.buttonDone} onPress={() => this.backAction()}>
<Text style={styles.textDone}>Done</Text>
</TouchableOpacity>
</View>
</View>
</Modal> </Modal>
); );
} }
else { else {
return null; return null;
} }
} }
render() { showButtonPlaying(){
return ( if (this.state.showMusic === false){
<View style={{flex: 1, backgroundColor:'#81C9C9'}}> return (
<StatusBar hidden /> <View style={styles.viewPlayButton}>
{this.showQuit()} <TouchableOpacity style={styles.buttonPlaying}
{this.showCorrect()} onPress={() => this.playButton()}>
{this.showWrong()} <View style={{flexDirection:'row'}}>
{this.showDone()} <Image style={styles.playIcon} source={playIcon}/>
<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>
<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%'}}> }
else {
return (
<View style={styles.viewPlayButton}>
<TouchableOpacity style={styles.buttonPlayingP}
onPress={() => this.playButton()}>
<View style={{flexDirection:'row'}}> <View style={{flexDirection:'row'}}>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'left', lineHeight:20, color:'#EF476F', paddingBottom:'4%'}}> <Image style={styles.playIconP} source={playIcon}/>
Question {this.state.correct + this.state.wrong} <Text style={styles.textPlayingP}>Playing...</Text>
</Text>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'left', lineHeight:20, color:'#3B3A39', paddingBottom:'4%', paddingLeft:'2%'}}>
/ {this.state.maxCount}
</Text>
</View> </View>
<View style={{flexDirection:'row'}}> </TouchableOpacity>
<Image style={{height:'65%', width:'12%',marginTop:'3%'}} source={corIcon}/> </View>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:24, textAlign:'left', lineHeight:30, color:'#14A76C', paddingHorizontal:'8%'}}> );
{this.state.correct} }
</Text>
</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>
</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);
stime = tt;
}}
// Options for the styling
options={{//timer
container: {
backgroundColor: '#FFECDA',
padding: 10,
borderRadius: 8,
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>
</View>
<View style={style.screenA}>
{NOTESWHITE.slice(0, 13).map((item,id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? style.selectedKeywordStyle
: style.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)
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</View>
</View>
<View style={style.screen}>
<View style={{backgroundColor:'white',flexDirection:'row', width: Dimensions.get('screen').width}}>
<TouchableOpacity onPress={this.scrollToStart} style={{width: '25%'}}>
<Text style={style.scrollButtonText}> {'<<'}Back</Text>
</TouchableOpacity>
<Text style={{marginVertical:10,marginHorizontal:30,fontFamily:'Gilroy-Light', textAlign: 'center'}}>2 of 4 pages</Text>
<TouchableOpacity onPress={this.scrollToC} style={{marginRight:config.deviceHeight * 0.8,width: '25%'}}>
<Text style={style.scrollButtonText}>Next {'>>'}</Text>
</TouchableOpacity>
</View>
<View style={style.screenB}>
{NOTESWHITE.slice(13, 26).map((item,id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? style.selectedKeywordStyle
: style.buttonStyle
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight>
))}
{NOTESBLACK.slice(8,18).map((item, id) => (
<TouchableHighlight
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)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</View>
</View>
<View style={style.screen}>
<View style={{backgroundColor:'white',flexDirection:'row', width: Dimensions.get('screen').width}}>
<TouchableOpacity onPress={this.scrollToB} style={{width: '25%'}}>
<Text style={style.scrollButtonText}>{'<<'}Back</Text>
</TouchableOpacity>
<Text style={{marginVertical:10,marginHorizontal:30,fontFamily:'Gilroy-Light', textAlign: 'center'}}>3 of 4 pages</Text>
<TouchableOpacity onPress={this.scrollToD} style={{marginRight:config.deviceHeight * 0.8, width: '25%'}}>
<Text style={style.scrollButtonText}>Next{'>>'}</Text>
</TouchableOpacity>
</View>
<View style={style.screenC}>
{NOTESWHITE.slice(26, 39).map((item,id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? style.selectedKeywordStyle
: style.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)
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</View>
</View>
<View style={style.screen}> }
<View style={{backgroundColor:'white',flexDirection:'row', width: Dimensions.get('screen').width}}>
<TouchableOpacity onPress={this.scrollToC} style={{width: '25%'}}>
<Text style={style.scrollButtonText}>{'<<'}Back</Text>
</TouchableOpacity>
<Text style={{marginVertical:10,marginHorizontal:30,fontFamily:'Gilroy-Light', textAlign: 'center'}}>4 of 4 pages</Text>
</View> showPlaying(){
<View style={style.screenC}> if (this.state.showMusic === true){
return (
<ScrollView style={styles.container} horizontal={true} scrollEnabled={true} showsHorizontalScrollIndicator={false} ref={(scroller) => {this.scroller = scroller;}}>
<View style={styles.screen}>
<View style={styles.viewPages}>
<Text style={[styles.textPages, {paddingHorizontal:width * 0.9}]}>1/4</Text>
<TouchableOpacity onPress={this.scrollToB} style={{width: '25%', marginRight: width * 1}}>
<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)}
key={id}>
<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) => ( {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>
} ))}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyle}> {item.name} </Text>
</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={ onPress={() => this.toggleKeyword(item.name)}
keywordsList.find((element) => element === item.name) key={id}>
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}] <Text style={styles.textStyleB}>{item.name}</Text>
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}] </TouchableHighlight>
} ))}
onPress={() => this.toggleKeyword(item.name)} </View>
key={id}> </View>
<Text style={styles.textStyleB}>{item.name}</Text> </View>
</TouchableHighlight> </ScrollView>
))} );
</View> }
</View> else {
</ScrollView> return (
<ScrollView style={styles.container} horizontal={true} scrollEnabled={true} showsHorizontalScrollIndicator={false} ref={(scroller) => {this.scroller = scroller;}}>
</View> <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)}
key={id}>
<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>
))}
{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>
);
}
}
); 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 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()}
{this.clickSubmitButton()} <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()}
</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: {
alignItems: 'center', height: 50,
backgroundColor:'white', width: 50,
borderRadius: 10, padding:10,
borderColor: 'black', marginTop:width * 0.02,
borderWidth: 5, },
}, viewAttempt: {
textquit: { backgroundColor:'#FFFFFF',
fontSize: 25, borderRadius:8,
fontFamily: 'sans-serif', width:height * 0.22,
textAlign: 'center', marginTop:width * 0.03,
marginTop: 5, marginLeft: height * 0.17,
color:'black', },
}, textAttemptCount:{
viewmodalQQ : { fontFamily:'Gilroy-Bold',
alignItems: 'center', fontSize:16,
flexDirection: 'row', textAlign:'left',
marginTop:15, lineHeight:20,
}, color:'#EF476F',
buttonyes: { paddingVertical:width * 0.03,
backgroundColor: 'white', },
padding: 15, textAttempt:{
borderRadius: 10, fontFamily:'Gilroy-Bold',
marginTop:10, fontSize:16,
marginBottom:10, textAlign:'left',
borderTopColor:'black', lineHeight:20,
borderRightColor:'black', color:'#3B3A39',
borderWidth: 3, paddingVertical:width * 0.03,
marginRight:5, },
},
buttonno: { //showQuit()
backgroundColor: 'white', viewShowQuit:{
paddingLeft: 18, marginHorizontal:height * 0.28,
paddingRight: 18, width:height * 0.45,
paddingTop: 15, height:width * 0.6,
paddingBottom: 15, marginTop:height * 0.13,
borderRadius: 10, alignItems: 'center',
marginTop:10, backgroundColor:'#FFFBF0',
marginBottom:10, borderRadius: 16,
borderWidth: 3, },
borderTopColor:'black', quitIcon:{
marginLeft:5, height:'40%',
}, width:'30%',
textqq: { position:'absolute',
color: 'black', left:110,
fontFamily: 'sans-serif', top: -45,
}, },
// Modal Correct and Wrong textQuitScale:{
viewmodalCW: { fontSize: 24,
marginLeft: Dimensions.get('window').height * 0.25, fontFamily: 'Gilroy-Bold',
width : Dimensions.get('window').height * 0.4, textAlign: 'center',
alignItems: 'center', lineHeight:30,
}, color:'#3B3A39',
imagecw: { paddingTop:width * 0.17,
width: '130%', },
height: '95%', viewButtonQuit:{
}, alignItems: 'center',
textcw: { flexDirection: 'row',
fontSize: 25, marginTop:20,
fontFamily: 'sans-serif', justifyContent: 'center',
textAlign: 'center', },
marginTop:Dimensions.get('window').width * 0.43, buttonNoQuit:{
marginLeft:120, backgroundColor: '#FFFFFF',
color:'white', padding: 15,
}, borderRadius: 8,
viewbutton: { marginTop:10,
alignItems: 'center', marginBottom:10,
marginLeft:120, borderColor:'#81C9C9',
}, borderWidth: 1,
buttonc: { marginRight:8,
backgroundColor: 'white', },
borderColor: 'black', textNoQuit:{
padding: 15, color: '#81C9C9',
borderRadius: 5, fontFamily: 'Gilroy-Bold',
marginTop:10, fontSize:16,
marginBottom:10, textAlign: 'left',
}, lineHeight:20,
buttonok: { paddingHorizontal:height * 0.04,
color: 'black', },
}, buttonYesQuit:{
// Modal Done backgroundColor: 'white',
viewmodalD: { paddingLeft: 18,
marginLeft: Dimensions.get('window').height * 0.3, paddingRight: 18,
width : Dimensions.get('window').height * 0.4, paddingTop: 15,
alignItems: 'center', paddingBottom: 15,
}, borderRadius: 8,
imagedone :{ marginTop:10,
width: '120%', marginBottom:10,
height: '98%', borderWidth: 1,
}, borderColor:'#81C9C9',
viewmodalDD: { marginLeft:8,
alignItems: 'center', },
marginLeft:70, textYesQuit:{
}, color: '#81C9C9',
textwelldone: { fontFamily: 'Gilroy-Bold',
fontSize: 25, fontSize:16,
fontFamily: 'sans-serif', textAlign: 'left',
textAlign: 'center', lineHeight:20,
marginTop:Dimensions.get('window').width * 0.42, paddingHorizontal:height * 0.03,
marginLeft:65, },
color:'white',
}, //showCorrect()
modaltextcorrect: { viewShowCorrect:{
fontSize: 15, marginHorizontal: height * 0.28,
fontFamily: 'sans-serif', width :height * 0.45,
marginLeft:65, height :width * 0.6,
textAlign: 'center', marginTop :height * 0.13,
color: 'green', alignItems: 'center',
}, backgroundColor:'#FFFBF0',
modaltextwrong: { borderRadius: 16,
fontSize: 15, },
fontFamily: 'sans-serif', correctIcon:{
marginLeft:65, height:'40%',
textAlign: 'center', width:'30%',
color: 'red', position:'absolute',
}, left:110,
c1: { top: -45,
height: '45%', },
alignItems: 'center', textScaleResult:{
borderColor: 'black', fontSize: 20,
marginTop:5, fontFamily: 'Gilroy-Bold',
}, textAlign: 'center',
cc1: { lineHeight:25,
flexDirection: 'row', color:'#3B3A39',
marginLeft: 5, paddingTop:width * 0.17,
}, },
t: { textCorrect:{
fontSize: 25, fontSize: 24,
fontFamily: 'sans-serif', fontFamily: 'Gilroy-Bold',
}, textAlign: 'center',
c2: { lineHeight:30,
flexDirection: 'row', color:'#14A76C',
height: '35%', paddingTop:width * 0.02,
}, },
buttonOK:{
backgroundColor: '#81C9C9',
width :height * 0.3,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
marginLeft:8,
},
textOK:{
color: '#FFFFFF',
fontFamily: 'Gilroy-Bold',
fontSize:16,
textAlign: 'left',
lineHeight:20,
paddingHorizontal:height * 0.12,
},
//showWrong()
viewShowWrong: {
marginHorizontal:height * 0.28,
width :height * 0.45,
height :width * 0.6,
marginTop :height * 0.13,
alignItems: 'center',
backgroundColor:'#FFFBF0',
borderRadius: 16,
},
wrongIcon:{
height:'40%',
width:'30%',
position:'absolute',
left:110,
top: -45,
},
textScaleResultW:{
fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3B3A39',
paddingTop:width * 0.17,
},
textWrong:{
fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:30,
color:'#D11427',
paddingTop:width * 0.02,
},
buttonOKW:{
backgroundColor: '#81C9C9',
width :height * 0.3,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
marginLeft:8,
},
textOKW:{
color: '#FFFFFF',
fontFamily: 'Gilroy-Bold',
fontSize:16,
textAlign: 'left',
lineHeight:20,
paddingHorizontal:height * 0.12,
},
//showDone()
viewShowDone:{
marginHorizontal:height * 0.28,
width :height * 0.42,
height :width * 0.73,
marginTop :height * 0.08,
alignItems: 'center',
backgroundColor:'#FFFBF0',
borderRadius: 16,
},
doneIcon:{
height:'30%',
width:'27%',
position:'absolute',
left:110,
top: -45,
},
textWellDone:{
fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3B3A39',
paddingTop:width * 0.14,
},
viewListenResult:{
borderRadius:16,
borderColor:'#E7E7E7',
borderWidth:1,
backgroundColor:'#FFFBF0',
marginTop:'2.5%',
marginLeft:'2%',
width:height * 0.33,
marginBottom:'1.7%',
},
textListenResultD: {
fontSize: 20,
fontFamily: 'Gilroy-Bold',
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,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
marginLeft:5,
},
textDone:{
color: '#FFFFFF',
fontFamily: 'Gilroy-Bold',
fontSize:16,
textAlign: 'left',
lineHeight:20,
paddingHorizontal:height * 0.12,
},
//render()
view1:{
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',
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,
paddingBottom: 15,
borderRadius: 30,
marginTop:10,
marginBottom:10,
},
textPlayingP:{
fontFamily: 'Gilroy-Bold',
fontSize:16,
textAlign: 'center',
lineHeight:20,
color:'#FFFBF0',
paddingHorizontal:height * 0.02,
paddingVertical:width * 0.02,
},
playIconP: {
height:'49%',
width:'16%',
marginTop:'4%',
marginLeft:'15%',
},
viewStopWatch:{
alignItems:'center',
width:height * 0.25,
marginHorizontal:height * 0.064,
marginTop:'3.5%',
},
//stopwatch
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',
left:22,
top:16,
},
container: {
height:'30%',
},
screen: {
backgroundColor: 'yellow',
width: height,
},
screenA: {
width: height,
height:width * 0.4,
backgroundColor: '#F7CAC9',
flexDirection: 'row',
},
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',
fontFamily:'Gilroy-Bold',
},
buttonView: {
flexDirection: 'column',
marginLeft: width * 1.0,
},
textStyle:{
color:'#707070',
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',
backgroundColor: 'white',
borderWidth: 0.5,
borderColor: '#707070',
},
selectedKeywordStyle: {
width: width / 13,
height:height * 0.4,
alignItems: 'center',
backgroundColor: '#FCE1FF',
borderWidth: 0.5,
borderColor: '#707070',
},
buttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
width: '5%',
position: 'absolute',
},
SbuttonB1: {
alignItems: 'center',
backgroundColor: '#FCE1FF',
height: '55%',
marginLeft: height * 0.048,
width: '5%',
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,
},
t1: {
color: 'black',
paddingTop: 120,
},
button: {
flex: 7,
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
b1: {
marginBottom: 25,
width: 200,
height: 50,
borderRadius: 15,
alignItems: 'center',
backgroundColor: 'purple',
},
buttonText: {
textAlign: 'center',
paddingTop: 15,
color: 'white',
fontSize: 15,
fontFamily: 'sans-serif',
},
logo: {
height: config.deviceWidth * 0.22,
width: config.deviceHeight * 0.5,
borderColor: 'black',
borderWidth: 3,
borderRadius: 10,
position: 'absolute',
marginTop: config.deviceWidth * 0.11,
backgroundColor:'white',
},
correct: {
width: 100,
textAlign: 'center',
paddingTop: 15,
color: 'white',
height: 60,
borderRadius: 10,
alignItems: 'center',
fontSize: 25,
marginRight: 10,
backgroundColor:'green',
borderColor:'white',
borderWidth: 2,
fontFamily: 'sans-serif',
},
wrong: {
width: 100,
height: 60,
borderRadius: 10,
borderColor:'white',
alignItems: 'center',
textAlign: 'center',
paddingTop: 15,
color: 'white',
fontSize: 25,
marginRight: 10,
backgroundColor:'red',
borderWidth: 2,
fontFamily: 'sans-serif',
},
timer: {
width: 65,
height: 60,
borderRadius: 10,
borderColor:'white',
alignItems: 'center',
textAlign: 'center',
paddingTop: 16,
color: 'white',
fontSize: 25,
backgroundColor:'black',
borderWidth: 2,
fontFamily: 'sans-serif',
},
submit: {
width: '40%',
marginTop: config.deviceWidth * 0.055,
borderColor:'white',
borderWidth: 2,
borderRadius: 5,
},
viewMain: {
width: '20%',
alignContent: 'flex-end',
marginLeft: 180,
marginTop: '173%',
position: 'absolute',
},
container: {
flex: 1,
},
textStyle: {
fontSize: 14,
padding: 8,
paddingTop:100,
textAlign: 'center',
fontFamily: 'sans-serif',
},
textStyleB: {
fontSize: 12,
padding: 8,
paddingTop:5,
textAlign: 'center',
color:'white',
fontFamily: 'sans-serif',
},
buttonView: {
flexDirection: 'column',
marginLeft: config.deviceHeight * 1.0,
},
buttonStyle: {
width: config.deviceWidth / 14,
height:'70%',
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
selectedKeywordStyle: {
width: config.deviceWidth / 14,
height:'70%',
alignItems: 'center',
backgroundColor: '#EEA1E1',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
buttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '50%',
width: '1.5%',
position: 'absolute',
},
SbuttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '50%',
marginLeft: config.deviceWidth * 0.048,
width: '1.5%',
position: 'absolute',
},
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