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