Skip to content

P
pianoApp
Commit 3e25fd61 authored by norhalimah's avatar norhalimah
Browse files
Options

styling..

parent 581d1a12
Hide whitespace changes
Inline Side-by-side
Showing with 763 additions and 727 deletions
android/app/src/main/java/com/pianoapp/MainActivity.java
View file @ 3e25fd61
...@@ -13,7 +13,7 @@ public class MainActivity extends ReactActivity { ...@@ -13,7 +13,7 @@ public class MainActivity extends ReactActivity {
*/ */
@Override @Override
protected String getMainComponentName() { protected String getMainComponentName() {
return "PianoApp"; return "PianoSmart";
} }
@Override @Override
......
android/app/src/main/res/values/strings.xml
View file @ 3e25fd61
<resources> <resources>
<string name="app_name">PianoApp</string> <string name="app_name">PianoSmart</string>
</resources> </resources>
android/settings.gradle
View file @ 3e25fd61
rootProject.name = 'PianoApp' rootProject.name = 'PianoSmart'
include ':@react-native-community_art' include ':@react-native-community_art'
project(':@react-native-community_art').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/art/android') project(':@react-native-community_art').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/art/android')
include ':@react-native-community_art' include ':@react-native-community_art'
......
app.json
View file @ 3e25fd61
{ {
"name": "PianoApp", "name": "PianoSmart",
"displayName": "PianoApp" "displayName": "PianoSmart"
} }
\ No newline at end of file
ios/PianoAppTests/PianoAppTests.m → ios/PianoSmartTests/PianoSmartTests.m
View file @ 3e25fd61
...@@ -7,11 +7,11 @@ ...@@ -7,11 +7,11 @@
#define TIMEOUT_SECONDS 600 #define TIMEOUT_SECONDS 600
#define TEXT_TO_LOOK_FOR @"Welcome to React" #define TEXT_TO_LOOK_FOR @"Welcome to React"
@interface PianoAppTests : XCTestCase @interface PianoSmartTests : XCTestCase
@end @end
@implementation PianoAppTests @implementation PianoSmartTests
- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test
{ {
......
ios/Podfile
View file @ 3e25fd61
...@@ -3,7 +3,7 @@ require_relative '../node_modules/@react-native-community/cli-platform-ios/nativ ...@@ -3,7 +3,7 @@ require_relative '../node_modules/@react-native-community/cli-platform-ios/nativ
platform :ios, '10.0' platform :ios, '10.0'
target 'PianoApp' do target 'PianoSmart' do
config = use_native_modules! config = use_native_modules!
use_react_native!(:path => config["reactNativePath"]) use_react_native!(:path => config["reactNativePath"])
...@@ -22,7 +22,7 @@ target 'PianoApp' do ...@@ -22,7 +22,7 @@ target 'PianoApp' do
pod 'ReactNativeART', :path => '../node_modules/@react-native-community/art' pod 'ReactNativeART', :path => '../node_modules/@react-native-community/art'
target 'PianoAppTests' do target 'PianoSmartTests' do
inherit! :complete inherit! :complete
# Pods for testing # Pods for testing
end end
...@@ -37,10 +37,10 @@ target 'PianoApp' do ...@@ -37,10 +37,10 @@ target 'PianoApp' do
end end
end end
target 'PianoApp-tvOS' do target 'PianoSmart-tvOS' do
# Pods for PianoApp-tvOS # Pods for PianoSmart-tvOS
target 'PianoApp-tvOSTests' do target 'PianoSmart-tvOSTests' do
inherit! :search_paths inherit! :search_paths
# Pods for testing # Pods for testing
end end
......
package.json
View file @ 3e25fd61
{ {
"name": "PianoApp", "name": "PianoSmart",
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"scripts": { "scripts": {
......
screens/listening.js
View file @ 3e25fd61
...@@ -4,12 +4,10 @@ ...@@ -4,12 +4,10 @@
/* eslint-disable prettier/prettier */ /* eslint-disable prettier/prettier */
import React from 'react'; import React from 'react';
import { import {
ImageBackground,
Text, Text,
View, View,
StatusBar, StatusBar,
TouchableHighlight, TouchableHighlight,
Button,
Modal, Modal,
TouchableOpacity, TouchableOpacity,
Dimensions, Dimensions,
...@@ -691,7 +689,7 @@ showDone(){ ...@@ -691,7 +689,7 @@ showDone(){
marginTop:10, marginTop:10,
marginBottom:10, marginBottom:10,
}} }}
onPress={() => this.backAction()}> onPress={() => this.playButton()}>
<Text style={{color: '#FFFFFF', <Text style={{color: '#FFFFFF',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.13}}>PLAY</Text> fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.13}}>PLAY</Text>
</TouchableOpacity> </TouchableOpacity>
......
screens/quiz.js
View file @ 3e25fd61
...@@ -33,7 +33,7 @@ const con = { ...@@ -33,7 +33,7 @@ const con = {
deviceWidth: Dimensions.get('window').width, deviceWidth: Dimensions.get('window').width,
deviceHeight: Dimensions.get('window').height, deviceHeight: Dimensions.get('window').height,
}; };
const date = moment().utcOffset('+08:00').format('D MMM'); 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');
const path1 = RNFS.DocumentDirectoryPath + '/counter.txt'; const path1 = RNFS.DocumentDirectoryPath + '/counter.txt';
...@@ -101,7 +101,7 @@ class Quiz extends React.Component { ...@@ -101,7 +101,7 @@ class Quiz extends React.Component {
showQuit : false, showQuit : false,
maxCount : 5, maxCount : 5,
records: [], records: [],
click: false, click: true,
keyCount: 8, keyCount: 8,
}; };
} }
...@@ -138,10 +138,10 @@ class Quiz extends React.Component { ...@@ -138,10 +138,10 @@ class Quiz extends React.Component {
} }
this.setState({keywordsList: list}); this.setState({keywordsList: list});
if (this.state.keywordsList.length === 0 ){ if (this.state.keywordsList.length === 0 ){
this.setState({click: false}); this.setState({click: true});
} }
if (this.state.keywordsList.length > 0 ) { if (this.state.keywordsList.length > 0 ) {
this.setState({click: true}); this.setState({click: false});
} }
}; };
...@@ -192,7 +192,7 @@ class Quiz extends React.Component { ...@@ -192,7 +192,7 @@ class Quiz extends React.Component {
console.log('error'); console.log('error');
console.log(this.state.name); console.log(this.state.name);
} }
this.setState({keyCount: 8}); this.setState({keyCount: 8, click: true});
}; };
ansCMajor = ()=> { ansCMajor = ()=> {
...@@ -657,14 +657,14 @@ class Quiz extends React.Component { ...@@ -657,14 +657,14 @@ class Quiz extends React.Component {
}; };
homeExit = async () => { homeExit = async () => {
this.setState({showQuit: true}); this.setState({showQuit: true});
}; };
backAction = () => { backAction = () => {
this.setState({showDone: false, showQuit: false}); this.setState({showDone: false, showQuit: false});
this.props.navigation.navigate('1'); this.props.navigation.navigate('1');
Orientation.lockToPortrait(); Orientation.lockToPortrait();
}; };
correctAlert = () => { correctAlert = () => {
...@@ -687,7 +687,7 @@ class Quiz extends React.Component { ...@@ -687,7 +687,7 @@ class Quiz extends React.Component {
}; };
wrongAlert = () => { wrongAlert = () => {
var wrongSound = new Sound(wroSound, (error) => { var wrongSound = new Sound(wroSound, (error) => {
if (error) { if (error) {
console.log('failed to load the sound', error); console.log('failed to load the sound', error);
return; return;
...@@ -695,11 +695,11 @@ class Quiz extends React.Component { ...@@ -695,11 +695,11 @@ class Quiz extends React.Component {
// loaded successfully // loaded successfully
wrongSound.play((success) => { wrongSound.play((success) => {
if (success) { if (success) {
// console.log('successfully finished playing'); // console.log('successfully finished playing');
wrongSound.release(); wrongSound.release();
} else { } else {
// console.log('playback failed due to audio decoding errors'); // console.log('playback failed due to audio decoding errors');
wrongSound.release(); wrongSound.release();
} }
}); });
}); });
...@@ -707,90 +707,83 @@ class Quiz extends React.Component { ...@@ -707,90 +707,83 @@ class Quiz extends React.Component {
componentDidMount() { componentDidMount() {
//this.removeArray(); //this.removeArray();
BackHandler.addEventListener('hardwareBackPress', this.homeExit); BackHandler.addEventListener('hardwareBackPress', this.homeExit);
Orientation.lockToLandscape(); Orientation.lockToLandscape();
this.displayData(); this.displayData();
} }
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();
} }
';'; ';';
displayData = async () => { displayData = async () => {
this.setState({records: []}); this.setState({records: []});
try { try {
const value = await AsyncStorage.getItem('@notes_key'); const value = await AsyncStorage.getItem('@notes_key');
console.log(JSON.parse(value)); console.log(JSON.parse(value));
if (value !== null) { if (value !== null) {
// We have data!! this.setState({
this.setState({ logbook: JSON.parse(value),
logbook: JSON.parse(value), });
}); RNFS.readFile(path1, 'ascii')
// console.log(this.state.logbook); .then((ccc) => {
RNFS.readFile(path1, 'ascii')
.then((ccc) => {
console.log('has notes has counter'); console.log('has notes has counter');
// console.log(ccc);
imageN = Math.floor(Math.random() * this.state.logbook.length); imageN = Math.floor(Math.random() * this.state.logbook.length);
this.setState({ this.setState({
name : this.state.logbook[imageN], name : this.state.logbook[imageN],
maxCount : ccc, maxCount : ccc,
}); });
indexN = Notes.findIndex(item=> item.name === this.state.name); indexN = Notes.findIndex(item=> item.name === this.state.name);
console.log(this.state.name); console.log(this.state.name);
}) })
.catch((err) => { .catch((err) => {
console.log(err.message, err.code); console.log(err.message, err.code);
console.log('has notes no counter'); console.log('has notes no counter');
imageN = Math.floor(Math.random() * this.state.logbook.length); imageN = Math.floor(Math.random() * this.state.logbook.length);
this.setState({ this.setState({
name : this.state.logbook[imageN], name : this.state.logbook[imageN],
maxCount : 10, maxCount : 10,
}); });
console.log(this.state.name); console.log(this.state.name);
indexN = Notes.findIndex(item=> item.name === this.state.name); indexN = Notes.findIndex(item=> item.name === this.state.name);
// console.log(indexN); });
}
else {
RNFS.readFile(path1, 'ascii')
.then((res) => {
console.log('no notes has counter');
imageN = Math.floor(Math.random() * Notes.length);
indexN = imageN;
this.setState({
name : Notes[indexN].name,
maxCount : res,
}); });
} console.log(this.state.name);
else { })
RNFS.readFile(path1, 'ascii') .catch(() => {
.then((res) => { // console.log(err.message, err.code);
console.log('no notes has counter'); console.log('no notes no counter');
imageN = Math.floor(Math.random() * Notes.length); imageN = Math.floor(Math.random() * Notes.length);
indexN = imageN; indexN = imageN;
this.setState({ this.setState({
name : Notes[indexN].name,
maxCount : res,
});
console.log(this.state.name);
//console.log(res);
})
.catch(() => {
// console.log(err.message, err.code);
console.log('no notes no counter');
imageN = Math.floor(Math.random() * Notes.length);
indexN = imageN;
this.setState({
name : Notes[indexN].name, name : Notes[indexN].name,
maxCount : 5, maxCount : 5,
}); });
console.log(this.state.name); console.log(this.state.name);
});
}); }
} catch (error) {
// Error retrieving data
} }
} catch (error) { };
// Error retrieving data
}
};
handlerArgCall = async(correct, wrong, timer) => { handlerArgCall = async(correct, wrong, timer) => {
var listR = []; var listR = [];
let obj = { let obj = {
correct: correct, correct: correct,
wrong: wrong, wrong: wrong,
timer: timer, timer: timer,
...@@ -798,433 +791,275 @@ class Quiz extends React.Component { ...@@ -798,433 +791,275 @@ class Quiz extends React.Component {
time: time, time: time,
day : day, day : day,
}; };
this.setState({records : obj}); this.setState({records : obj});
try { try {
var value = await AsyncStorage.getItem('@storage_key'); var value = await AsyncStorage.getItem('@storage_key');
if (value !== null) { if (value !== null) {
value = JSON.parse(value); value = JSON.parse(value);
value.push(obj); value.push(obj);
// console.log(value); // console.log(value);
// console.log('We have data!!'); AsyncStorage.setItem('@storage_key', JSON.stringify(value), (err)=> {
AsyncStorage.setItem('@storage_key', JSON.stringify(value), (err)=> {
if (err){ if (err){
console.log('an error'); console.log('an error');
throw err; throw err;
} }
// console.log('success'); // console.log('success');
}).catch((err)=> { }).catch((err)=> {
console.log('error is: ' + err); console.log('error is: ' + err);
}); });
} }
else { else {
listR.push(obj); listR.push(obj);
AsyncStorage.setItem('@storage_key', JSON.stringify(listR), (err)=> { AsyncStorage.setItem('@storage_key', JSON.stringify(listR), (err)=> {
if (err){ if (err){
console.log('an error'); console.log('an error');
throw err; throw err;
} }
// console.log('success'); //console.log(JSON.stringify(this.state.listN)); }).catch((err)=> {
}).catch((err)=> { console.log('error is: ' + err);
console.log('error is: ' + err); });
}); }
} catch (error) {
// Error retrieving data
} }
} catch (error) {
// Error retrieving data
}
}; };
//reset //reset
removeArray = () => { removeArray = () => {
keywordsList.splice(0, keywordsList.length); keywordsList.splice(0, keywordsList.length);
console.log(keywordsList); console.log(keywordsList);
this.setState({ this.setState({
correct: this.state.correct, correct: this.state.correct,
wrong: this.state.wrong, wrong: this.state.wrong,
keyCount:8, keyCount:8,
click:true,
}); });
}; };
clickSubmitButton (){ clickSubmitButton (){
if (this.state.click === false){ if (this.state.click === true){
return ( return (
<View style={{flexDirection: 'row', width:Dimensions.get('window').width, marginBottom:Dimensions.get('window').height * 0.05}}> <View style={styles.viewSubmitButton}>
<TouchableOpacity style={{backgroundColor:'#E7E7E7', borderRadius:8, width:Dimensions.get('window').width * 0.22, marginHorizontal:Dimensions.get('window').width * 0.75, marginTop:'3%'}} onPress={this.onSubmit} > <TouchableOpacity style={styles.buttonSubmitButtonT} onPress={this.onSubmit} >
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'center', lineHeight:20, color:'#848484', paddingVertical:Dimensions.get('window').height * 0.035}}> <Text style={styles.textSubmitButtonT}>
Submit Submit
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</View>
);
}
else {
return (
<View style={styles.viewSubmitButton}>
<TouchableOpacity style={styles.buttonSubmitButtonF} onPress={this.onSubmit} >
<Text style={styles.textSubmitButtonF}>
Submit
</Text>
</TouchableOpacity>
</View> </View>
); );
} }
else {
return (
<View style={{flexDirection: 'row', width:Dimensions.get('window').width, marginBottom:Dimensions.get('window').height * 0.05}}>
<TouchableOpacity style={{backgroundColor:'#EF476F', borderRadius:8, width:Dimensions.get('window').width * 0.22, marginHorizontal:Dimensions.get('window').width * 0.75, marginTop:'3%'}} onPress={this.onSubmit} >
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'center', lineHeight:20, color:'#FFFBF0', paddingVertical:Dimensions.get('window').height * 0.035}}>
Submit
</Text>
</TouchableOpacity>
</View>
);
}
} }
clickResetButton (){ clickResetButton (){
if (this.state.click === false){ if (this.state.click === true){
return (
<TouchableOpacity style={styles.buttonResetButtonT} onPress={this.removeArray} >
<View style={{flexDirection: 'row'}}>
<Image style={styles.imageResetIcon} source={undo1}/>
<Text style={styles.textResetButtonT}>
Undo All Key
</Text>
</View>
</TouchableOpacity>
);
}
else {
return ( return (
<TouchableOpacity style={{backgroundColor:'#E7E7E7', borderColor:'#E7E7E7', borderWidth:1, borderRadius:8, width:Dimensions.get('window').width * 0.22, marginHorizontal:Dimensions.get('window').width * 0.72, marginTop:Dimensions.get('window').height * 0.03}} onPress={this.onSubmit} > <TouchableOpacity style={styles.buttonResetButtonF} onPress={this.removeArray} >
<View style={{flexDirection: 'row'}}> <View style={{flexDirection: 'row'}}>
<Image style={{height:'45%', width:'12%',marginTop:'8%', marginHorizontal:'8%'}} source={undo1}/> <Image style={styles.imageResetIcon} source={undo2}/>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#848484', paddingVertical:Dimensions.get('window').height * 0.04}}> <Text style={styles.textResetButtonF}>
Undo All Key Undo All Key
</Text> </Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
); );
}
} }
else {
return (
<TouchableOpacity style={{backgroundColor:'#FFFBF0', borderColor:'#FC8121', borderWidth:1, borderRadius:8, width:Dimensions.get('window').width * 0.22, marginHorizontal:Dimensions.get('window').width * 0.72, marginTop:Dimensions.get('window').height * 0.03}} onPress={this.onSubmit} >
<View style={{flexDirection: 'row'}}>
<Image style={{height:'45%', width:'12%',marginTop:'8%', marginHorizontal:'8%'}} source={undo2}/>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#FC8121', paddingVertical:Dimensions.get('window').height * 0.04}}>
Undo All Key
</Text>
</View>
</TouchableOpacity>
);
}
}
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 Scale?</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>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
);
}
else {
return null;
}
}
<Text style={{ fontSize: 24, showCorrect(){
fontFamily: 'Gilroy-Bold', if (this.state.showC === true){
textAlign: 'center', return (
lineHeight:30, <Modal transparent={true} visible={this.state.showC} animationType="slide">
color:'#3B3A39', <View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}>
paddingTop:Dimensions.get('window').height * 0.17}}>Quit Scale?</Text> <View style={styles.viewShowCorrect}>
<View <Image style={styles.correctIcon} source={correctIcon}/>
style={{ alignItems: 'center', <Text style={styles.textScaleResult}>Scale Result</Text>
flexDirection: 'row', <Text style={styles.textCorrect}>Correct</Text>
marginTop:20, justifyContent: 'center'}}> <TouchableOpacity style={styles.buttonOK} onPress={() => this.setState({showC: false})}>
<TouchableOpacity style={{ backgroundColor: '#FFFFFF', <Text style={styles.textOK}>OK</Text>
padding: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
borderColor:'#81C9C9',
borderWidth: 1,
marginRight:8}}
onPress={() => this.setState({showQuit: false})}>
<Text style={{ color: '#81C9C9',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.04}}>NO</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={{ backgroundColor: 'white',
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>
</View> </View>
</Modal> </Modal>
); );
} }
else { else {
return null; return null;
} }
} }
showCorrect(){ showWrong(){
if (this.state.showC === true){ if (this.state.showW === true){
return ( return (
<Modal transparent={true} visible={this.state.showC} 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}>Scale 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={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 {
return null;
} }
}
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>
</TouchableOpacity>
</View>
</View>
</Modal>
);
}
else { else {
return null; return null;
} }
} }
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', showDone(){
width : Dimensions.get('window').width * 0.33, if (this.state.showDone === true){
paddingTop: 15, return (
paddingBottom: 15, <Modal transparent={true} visible={this.state.showDone} animationType="slide">
borderRadius: 8, <View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}>
marginTop:10, <View style={styles.viewShowDone}>
marginBottom:10, <Image style={styles.doneIcon} source={doneIcon}/>
marginLeft:5}} <Text style={styles.textWellDone}>Well Done !</Text>
onPress={() => this.backAction()}> <View style={styles.viewScaleResult}>
<Text style={{color: '#FFFFFF', <Text style={styles.textScaleResultD}>Scale Result : </Text>
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.14}}>OK</Text> <View style={styles.viewCorrectWrong}>
</TouchableOpacity> <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>
</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() { render() {
return ( return (
<View style={{flex: 1, backgroundColor:'#81C9C9'}}> <View style={{flex: 1, backgroundColor:'#81C9C9'}}>
<StatusBar hidden /> <StatusBar hidden />
{this.showQuit()} {this.showQuit()}
{this.showCorrect()} {this.showCorrect()}
{this.showWrong()} {this.showWrong()}
{this.showDone()} {this.showDone()}
{this.clickSubmitButton()} {this.clickSubmitButton()}
<View style={{backgroundColor:'#FFFBF0',flexDirection: 'row', width:Dimensions.get('window').width, height:Dimensions.get('window').height * 0.4, borderTopLeftRadius:8, borderTopRightRadius:8}}> <View style={styles.view1}>
<View style={{width:Dimensions.get('window').width * 0.25, marginHorizontal:Dimensions.get('window').width * 0.03, marginTop:'6%', marginBottom:'2%'}}> <View style={styles.viewQues}>
<View style={{flexDirection:'row'}}> <View style={{flexDirection:'row'}}>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'left', lineHeight:20, color:'#EF476F', paddingBottom:'8%'}}> <Text style={styles.textQues}>
Question {this.state.correct + this.state.wrong} Question {this.state.correct + this.state.wrong}
</Text> </Text>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'left', lineHeight:20, color:'#3B3A39', paddingBottom:'8%', paddingLeft:'2%'}}> <Text style={styles.textQuesCount}>
/ {this.state.maxCount} / {this.state.maxCount}
</Text> </Text>
</View> </View>
<View style={{flexDirection:'row'}}> <View style={{flexDirection:'row'}}>
<Image style={{height:'65%', width:'12%',marginTop:'3%'}} source={corIcon}/> <Image style={styles.corIconQues} source={corIcon}/>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:24, textAlign:'left', lineHeight:30, color:'#14A76C', paddingHorizontal:'8%'}}> <Text style={styles.textCorrectQ}>
{this.state.correct} {this.state.correct}
</Text> </Text>
</View>
</View> </View>
</View>
<View style={{alignItems:'center',width:Dimensions.get('window').width * 0.32, marginHorizontal:Dimensions.get('window').width * 0.03, marginTop:'2%'}}> <View style={styles.viewImageNotes}>
<Image style={{height:Dimensions.get('window').height * 0.27, width:Dimensions.get('window').width * 0.18}} source={Notes[indexN].image}/> <Image style={styles.imageNote} source={Notes[indexN].image}/>
<View style={{flexDirection: 'row'}}> <View style={{flexDirection: 'row'}}>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#3B3A39'}}> <Text style={styles.textKeyLeft}>
Remaining key(s) to select: Remaining key(s) to select:
</Text> </Text>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#3D9090', paddingLeft:'3%'}}> <Text style={styles.textKeyCount}>
{this.state.keyCount} {this.state.keyCount}
</Text> </Text>
</View> </View>
</View> </View>
<View style={{alignItems:'center',width:Dimensions.get('window').width * 0.25, marginHorizontal:Dimensions.get('window').width * 0.045, marginTop:'2.5%'}}> <View style={styles.viewTimerUndo}>
<Stopwatch <Stopwatch
secs secs
start={this.state.start} start={this.state.start}
getTime={(tt) => { getTime={(tt) => {
//console.log(tt); stime = tt;
stime = tt;
}} }}
// Options for the styling // Options for the styling
options={{//timer options={{//timer
container: { container: styles.containerStopWatch,
backgroundColor: '#FFECDA', text: styles.textStopWatch}}/>
padding: 10, <Image style={styles.timerIcon} source={timerIcon}/>
borderRadius: 8, {this.clickResetButton()}
borderColor:'#FFECDA', </View>
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:'18%', width:'13%', position: 'absolute', left:25, top:15}} source={timerIcon}/>
{this.clickResetButton()}
</View> </View>
</View>
<View style={{flexDirection: 'row', height: Dimensions.get('window').height * 0.4}}> <View style={{flexDirection: 'row', height: Dimensions.get('window').height * 0.4}}>
{NOTESWHITE.map((item, id) => ( {NOTESWHITE.map((item, id) => (
<TouchableHighlight <TouchableHighlight style={keywordsList.find((element) => element === item.name) ? styles.whiteNotesButtonPress : styles.whiteNotesButton }
style={ onPress={() => this.toggleKeyword(item)}
keywordsList.find((element) => element === item.name) key={id}>
? { width: Dimensions.get('window').width / NOTESWHITE.length, <Text> </Text>
alignItems: 'center',
backgroundColor: '#FCE1FF',
borderWidth: 0.5,
borderColor: '#707070',
borderBottomWidth: 1}
: { width: Dimensions.get('window').width / NOTESWHITE.length,
borderWidth: 0.5,
borderColor: '#707070',
alignItems: 'center',
backgroundColor: 'white',
borderBottomWidth: 1}
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={styles.textStyle}> </Text>
</TouchableHighlight> </TouchableHighlight>
))} ))}
{NOTESBLACK.map((item, id) => ( {NOTESBLACK.map((item, id) => (
<TouchableHighlight <TouchableHighlight style={keywordsList.find((element) => element === item.name) ? [styles.blackNotesButtonPress, {marginLeft: config.deviceWidth * item.left}] : [styles.blackNotesButton, {marginLeft: config.deviceWidth * item.left}]}
style={ onPress={() => this.toggleKeyword(item)}
keywordsList.find((element) => element === item.name) key={id}>
? [styles.SbuttonB1, {marginLeft: config.deviceWidth * item.left}] <Text> </Text>
: [styles.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={styles.textStyle}> </Text>
</TouchableHighlight> </TouchableHighlight>
))} ))}
</View> </View>
</View> </View>
); );
} }
} }
......
style/styleQuiz.js
View file @ 3e25fd61
/* 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: {
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,
alignItems: 'center',
backgroundColor:'white',
borderRadius: 10,
borderColor: 'black',
borderWidth: 5,
},
textquit: {
fontSize: 25,
fontFamily: 'sans-serif',
textAlign: 'center',
marginTop: 5,
color:'black',
},
viewmodalQQ : {
alignItems: 'center',
flexDirection: 'row',
marginTop:15,
},
buttonyes: {
backgroundColor: 'white',
padding: 15,
borderRadius: 10,
marginTop:10,
marginBottom:10,
borderTopColor:'black',
borderRightColor:'black',
borderWidth: 3,
marginRight:5,
},
buttonno: {
backgroundColor: 'white',
paddingLeft: 18,
paddingRight: 18,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 10,
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,
alignItems: 'center',
},
imagecw: {
width: '130%',
height: '95%',
},
textcw: {
fontSize: 25,
fontFamily: 'sans-serif',
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,
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: {
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,
textAlign: 'center',
color: 'green',
},
modaltextwrong: {
fontSize: 15,
fontFamily: 'sans-serif',
marginLeft:65,
textAlign: 'center',
color: 'red',
},
c1: {
height: '70%',
alignItems: 'center',
borderColor: 'black',
marginTop:5,
},
cc1: {
flexDirection: 'row',
marginLeft: 5,
},
t: {
fontSize: 25,
fontFamily: 'sans-serif',
},
c2: {
flexDirection: 'row',
height: '35%',
},
t1: { // clickSubmitButton ()
color: 'black', viewSubmitButton:{
paddingTop: 120, flexDirection: 'row',
}, width:width,
button: { marginBottom:height * 0.05,
flex: 7, },
alignItems: 'center', // clickSubmitButton () if true
backgroundColor: 'white', buttonSubmitButtonT:{
borderRightWidth: 1, backgroundColor:'#E7E7E7',
borderColor: 'black', borderRadius:8,
borderBottomWidth: 1, width:width * 0.22,
}, marginHorizontal:width * 0.75,
b1: { marginTop:'3%',
marginBottom: 25, },
width: 200, textSubmitButtonT:{
height: 50, fontFamily:'Gilroy-Bold',
borderRadius: 15, fontSize:16,
alignItems: 'center', textAlign:'center',
backgroundColor: 'purple', lineHeight:20,
}, color:'#848484',
buttonText: { paddingVertical:height * 0.035,
textAlign: 'center', },
paddingTop: 15, // clickSubmitButton () if false
color: 'white', buttonSubmitButtonF:{
fontSize: 15, backgroundColor:'#EF476F',
fontFamily: 'sans-serif', borderRadius:8,
}, width:width * 0.22,
logo: { marginHorizontal:width * 0.75,
height: config.deviceWidth * 0.22, marginTop:'3%',
width: config.deviceHeight * 0.5, },
position: 'absolute', textSubmitButtonF:{
marginTop: config.deviceWidth * 0.11, fontFamily:'Gilroy-Bold',
backgroundColor:'white', fontSize:16,
}, textAlign:'center',
correct: { lineHeight:20,
width: 100, color:'#FFFBF0',
textAlign: 'center', paddingVertical:height * 0.035,
paddingTop: 15, },
color: 'white',
height: 60, //clickResetButton ()
borderRadius: 10, imageResetIcon:{
alignItems: 'center', height:'45%',
fontSize: 25, width:'12%',
marginRight: 10, marginTop:'8%',
backgroundColor:'green', marginHorizontal:'8%',
borderColor:'white', },
borderWidth: 2, buttonResetButtonT:{
fontFamily: 'sans-serif', backgroundColor:'#E7E7E7',
}, borderColor:'#E7E7E7',
wrong: { borderWidth:1,
width: 100, borderRadius:8,
height: 60, width:width * 0.22,
borderRadius: 10, marginHorizontal:width * 0.72,
borderColor:'white', marginTop:height * 0.03,
alignItems: 'center', },
textAlign: 'center', textResetButtonT:{
paddingTop: 15, fontFamily:'Gilroy-Bold',
color: 'white', fontSize:14,
fontSize: 25, textAlign:'left',
marginRight: 10, lineHeight:18,
backgroundColor:'red', color:'#848484',
borderWidth: 2, paddingVertical:height * 0.04,
fontFamily: 'sans-serif', },
}, buttonResetButtonF:{
timer: { backgroundColor:'#FFFBF0',
width: 65, borderColor:'#FC8121',
height: 60, borderWidth:1,
borderRadius: 10, borderRadius:8,
borderColor:'white', width:width * 0.22,
alignItems: 'center', marginHorizontal:width * 0.72,
textAlign: 'center', marginTop:height * 0.03,
paddingTop: 16, },
color: 'white', textResetButtonF:{
fontSize: 25, fontFamily:'Gilroy-Bold',
backgroundColor:'black', fontSize:14,
borderWidth: 2, textAlign:'left',
fontFamily: 'sans-serif', lineHeight:18,
}, color:'#FC8121',
submit: { paddingVertical:height * 0.04,
width: '40%', },
marginTop: config.deviceWidth * 0.055,
borderColor:'white', //showQuit()
borderWidth: 2, viewShowQuit:{
borderRadius: 5, marginHorizontal:width * 0.28,
}, width:width * 0.45,
viewMain: { height:height * 0.6,
width: '20%', marginTop:width * 0.13,
alignContent: 'flex-end', alignItems: 'center',
marginLeft: 180, backgroundColor:'#FFFBF0',
marginTop: '173%', borderRadius: 16,
position: 'absolute', },
}, quitIcon:{
height:'40%',
width:'30%',
position:'absolute',
left:110,
top: -45,
},
textQuitScale:{
fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:30,
color:'#3B3A39',
paddingTop:height * 0.17,
},
viewButtonQuit:{
alignItems: 'center',
flexDirection: 'row',
marginTop:20,
justifyContent: 'center',
},
buttonNoQuit:{
backgroundColor: '#FFFFFF',
padding: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
borderColor:'#81C9C9',
borderWidth: 1,
marginRight:8,
},
textNoQuit:{
color: '#81C9C9',
fontFamily: 'Gilroy-Bold',
fontSize:16,
textAlign: 'left',
lineHeight:20,
paddingHorizontal:width * 0.04,
},
buttonYesQuit:{
backgroundColor: 'white',
paddingLeft: 18,
paddingRight: 18,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
borderWidth: 1,
borderColor:'#81C9C9',
marginLeft:8,
},
textYesQuit:{
color: '#81C9C9',
fontFamily: 'Gilroy-Bold',
fontSize:16,
textAlign: 'left',
lineHeight:20,
paddingHorizontal:width * 0.03,
},
//showCorrect()
viewShowCorrect:{
marginHorizontal: Dimensions.get('window').width * 0.28,
width :width * 0.45,
height :height * 0.6,
marginTop :width * 0.13,
alignItems: 'center',
backgroundColor:'#FFFBF0',
borderRadius: 16,
},
correctIcon:{
height:'40%',
width:'30%',
position:'absolute',
left:110,
top: -45,
},
textScaleResult:{
fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3B3A39',
paddingTop:height * 0.17,
},
textCorrect:{
fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:30,
color:'#14A76C',
paddingTop:height * 0.02,
},
buttonOK:{
backgroundColor: '#81C9C9',
width :width * 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:width * 0.12,
},
//showWrong()
viewShowWrong: {
marginHorizontal:width * 0.28,
width :width * 0.45,
height :height * 0.6,
marginTop :width * 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:height * 0.17,
},
textWrong:{
fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:30,
color:'#D11427',
paddingTop:height * 0.02,
},
buttonOKW:{
backgroundColor: '#81C9C9',
width :width * 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:width * 0.12,
},
//showDone()
viewShowDone:{
marginHorizontal:width * 0.28,
width :width * 0.42,
height :height * 0.73,
marginTop :width * 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:height * 0.14,
},
viewScaleResult:{
borderRadius:16,
borderColor:'#E7E7E7',
borderWidth:1,
backgroundColor:'#FFFBF0',
marginTop:'2.5%',
marginLeft:'2%',
width:width * 0.33, marginBottom:'1.7%',
},
textScaleResultD: {
fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3D9090',
paddingHorizontal:width * 0.06,
paddingTop:height * 0.02,
},
viewCorrectWrong:{
flexDirection: 'row',
paddingHorizontal:width * 0.07,
paddingVertical:height * 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 :width * 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:width * 0.14,
},
//render()
view1:{
backgroundColor:'#FFFBF0',
flexDirection: 'row',
width:width,
height:height * 0.4,
borderTopLeftRadius:8,
borderTopRightRadius:8,
},
viewQues:{
width:width * 0.25,
marginHorizontal:width * 0.03,
marginTop:'6%',
marginBottom:'2%',
},
textQues:{
fontFamily:'Gilroy-Bold',
fontSize:16,
textAlign:'left',
lineHeight:20,
color:'#EF476F',
paddingBottom:'8%',
},
textQuesCount:{
fontFamily:'Gilroy-Bold',
fontSize:16,
textAlign:'left',
lineHeight:20,
color:'#3B3A39',
paddingBottom:'8%',
paddingLeft:'2%',
},
corIconQues:{
height:'65%',
width:'12%',
marginTop:'3%',
},
textCorrectQ:{
fontFamily:'Gilroy-Bold',
fontSize:24,
textAlign:'left',
lineHeight:30,
color:'#14A76C',
paddingHorizontal:'8%',
},
viewImageNotes:{
alignItems:'center',
width:width * 0.32,
marginHorizontal:width * 0.03,
marginTop:'2%',
},
imageNote:{
height:height * 0.27,
width:width * 0.18,
},
textKeyLeft:{
fontFamily:'Gilroy-Bold',
fontSize:14,
textAlign:'left',
lineHeight:18,
color:'#3B3A39',
},
textKeyCount:{
fontFamily:'Gilroy-Bold',
fontSize:14,
textAlign:'left',
lineHeight:18,
color:'#3D9090',
paddingLeft:'3%',
},
viewTimerUndo:{
alignItems:'center',
width:width * 0.25,
marginHorizontal:width * 0.045,
marginTop:'2.5%',
},
//stopwatch
containerStopWatch:{
backgroundColor: '#FFECDA',
padding: 10,
borderRadius: 8,
borderColor:'#FFECDA',
borderWidth:2,
width:width * 0.22,
alignItems: 'center',
},
textStopWatch:{
fontSize: 16,
color: '#3B3A39',
textAlign: 'left',
paddingTop: 5,
lineHeight:20,
alignItems: 'center',
fontFamily: 'Gilroy-Bold',
},
timerIcon:{
height:'18%',
width:'13%',
position: 'absolute',
left:25,
top:15,
},
//White Notes
whiteNotesButton: {
width:width / 14,
borderWidth: 0.5,
borderColor: '#707070',
alignItems: 'center',
backgroundColor: 'white',
borderBottomWidth: 1,
},
whiteNotesButtonPress:{
width:width / 14,
alignItems: 'center',
backgroundColor: '#FCE1FF',
borderWidth: 0.5,
borderColor: '#707070',
borderBottomWidth: 1,
},
container: { //Black Notes
flex: 1, blackNotesButton: {
}, alignItems: 'center',
textStyle: { backgroundColor: 'black',
fontSize: 16, height: '55%',
padding: 8, width: '5%',
textAlign: 'center', position: 'absolute',
fontFamily: 'sans-serif', borderWidth: 0.5,
}, borderColor: '#707070',
buttonView: { },
flexDirection: 'column', blackNotesButtonPress: {
marginLeft: config.deviceHeight * 1.0, alignItems: 'center',
}, backgroundColor: '#FCE1FF',
//White Notes borderWidth: 0.5,
buttonStyle: { borderColor: '#707070',
width: config.deviceWidth * 0.075, height: '55%',
alignItems: 'center', width: '5%',
backgroundColor: 'white', position: 'absolute',
borderRightWidth: 1, },
borderColor: 'black',
borderBottomWidth: 1,
},
selectedKeywordStyle: {
width: config.deviceWidth * 0.075,
alignItems: 'center',
backgroundColor: '#FCE1FF',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
//Black Notes
buttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
width: '5%',
position: 'absolute',
borderWidth: 0.5,
borderColor: '#707070',
},
SbuttonB1: {
alignItems: 'center',
backgroundColor: '#FCE1FF',
borderWidth: 0.5,
borderColor: '#707070',
height: '55%',
width: '5%',
position: 'absolute',
},
}); });
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