Skip to content

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

styling..

parent 581d1a12
Show whitespace changes
Inline Side-by-side
Showing with 539 additions and 503 deletions
android/app/src/main/java/com/pianoapp/MainActivity.java
View file @ 3e25fd61
......@@ -13,7 +13,7 @@ public class MainActivity extends ReactActivity {
*/
@Override
protected String getMainComponentName() {
return "PianoApp";
return "PianoSmart";
}
@Override
......
android/app/src/main/res/values/strings.xml
View file @ 3e25fd61
<resources>
<string name="app_name">PianoApp</string>
<string name="app_name">PianoSmart</string>
</resources>
android/settings.gradle
View file @ 3e25fd61
rootProject.name = 'PianoApp'
rootProject.name = 'PianoSmart'
include ':@react-native-community_art'
project(':@react-native-community_art').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/art/android')
include ':@react-native-community_art'
......
app.json
View file @ 3e25fd61
{
"name": "PianoApp",
"displayName": "PianoApp"
"name": "PianoSmart",
"displayName": "PianoSmart"
}
\ No newline at end of file
ios/PianoAppTests/PianoAppTests.m → ios/PianoSmartTests/PianoSmartTests.m
View file @ 3e25fd61
......@@ -7,11 +7,11 @@
#define TIMEOUT_SECONDS 600
#define TEXT_TO_LOOK_FOR @"Welcome to React"
@interface PianoAppTests : XCTestCase
@interface PianoSmartTests : XCTestCase
@end
@implementation PianoAppTests
@implementation PianoSmartTests
- (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
platform :ios, '10.0'
target 'PianoApp' do
target 'PianoSmart' do
config = use_native_modules!
use_react_native!(:path => config["reactNativePath"])
......@@ -22,7 +22,7 @@ target 'PianoApp' do
pod 'ReactNativeART', :path => '../node_modules/@react-native-community/art'
target 'PianoAppTests' do
target 'PianoSmartTests' do
inherit! :complete
# Pods for testing
end
......@@ -37,10 +37,10 @@ target 'PianoApp' do
end
end
target 'PianoApp-tvOS' do
# Pods for PianoApp-tvOS
target 'PianoSmart-tvOS' do
# Pods for PianoSmart-tvOS
target 'PianoApp-tvOSTests' do
target 'PianoSmart-tvOSTests' do
inherit! :search_paths
# Pods for testing
end
......
package.json
View file @ 3e25fd61
{
"name": "PianoApp",
"name": "PianoSmart",
"version": "0.0.1",
"private": true,
"scripts": {
......
screens/listening.js
View file @ 3e25fd61
......@@ -4,12 +4,10 @@
/* eslint-disable prettier/prettier */
import React from 'react';
import {
ImageBackground,
Text,
View,
StatusBar,
TouchableHighlight,
Button,
Modal,
TouchableOpacity,
Dimensions,
......@@ -691,7 +689,7 @@ showDone(){
marginTop:10,
marginBottom:10,
}}
onPress={() => this.backAction()}>
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>
......
screens/quiz.js
View file @ 3e25fd61
......@@ -33,7 +33,7 @@ const con = {
deviceWidth: Dimensions.get('window').width,
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 day = moment().utcOffset('+08:00').format('ddd');
const path1 = RNFS.DocumentDirectoryPath + '/counter.txt';
......@@ -101,7 +101,7 @@ class Quiz extends React.Component {
showQuit : false,
maxCount : 5,
records: [],
click: false,
click: true,
keyCount: 8,
};
}
......@@ -138,10 +138,10 @@ class Quiz extends React.Component {
}
this.setState({keywordsList: list});
if (this.state.keywordsList.length === 0 ){
this.setState({click: false});
this.setState({click: true});
}
if (this.state.keywordsList.length > 0 ) {
this.setState({click: true});
this.setState({click: false});
}
};
......@@ -192,7 +192,7 @@ class Quiz extends React.Component {
console.log('error');
console.log(this.state.name);
}
this.setState({keyCount: 8});
this.setState({keyCount: 8, click: true});
};
ansCMajor = ()=> {
......@@ -726,15 +726,12 @@ class Quiz extends React.Component {
const value = await AsyncStorage.getItem('@notes_key');
console.log(JSON.parse(value));
if (value !== null) {
// We have data!!
this.setState({
logbook: JSON.parse(value),
});
// console.log(this.state.logbook);
RNFS.readFile(path1, 'ascii')
.then((ccc) => {
console.log('has notes has counter');
// console.log(ccc);
imageN = Math.floor(Math.random() * this.state.logbook.length);
this.setState({
name : this.state.logbook[imageN],
......@@ -753,7 +750,6 @@ class Quiz extends React.Component {
});
console.log(this.state.name);
indexN = Notes.findIndex(item=> item.name === this.state.name);
// console.log(indexN);
});
}
else {
......@@ -767,8 +763,6 @@ class Quiz extends React.Component {
maxCount : res,
});
console.log(this.state.name);
//console.log(res);
})
.catch(() => {
// console.log(err.message, err.code);
......@@ -780,13 +774,12 @@ class Quiz extends React.Component {
maxCount : 5,
});
console.log(this.state.name);
});
}
} catch (error) {
// Error retrieving data
}
};
};
handlerArgCall = async(correct, wrong, timer) => {
var listR = [];
......@@ -805,7 +798,6 @@ class Quiz extends React.Component {
value = JSON.parse(value);
value.push(obj);
// console.log(value);
// console.log('We have data!!');
AsyncStorage.setItem('@storage_key', JSON.stringify(value), (err)=> {
if (err){
console.log('an error');
......@@ -823,14 +815,13 @@ class Quiz extends React.Component {
console.log('an error');
throw err;
}
// console.log('success'); //console.log(JSON.stringify(this.state.listN));
}).catch((err)=> {
console.log('error is: ' + err);
});
}
} catch (error) {
} catch (error) {
// Error retrieving data
}
}
};
//reset
......@@ -841,15 +832,16 @@ class Quiz extends React.Component {
correct: this.state.correct,
wrong: this.state.wrong,
keyCount:8,
click:true,
});
};
clickSubmitButton (){
if (this.state.click === false){
if (this.state.click === true){
return (
<View style={{flexDirection: 'row', width:Dimensions.get('window').width, marginBottom:Dimensions.get('window').height * 0.05}}>
<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} >
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'center', lineHeight:20, color:'#848484', paddingVertical:Dimensions.get('window').height * 0.035}}>
<View style={styles.viewSubmitButton}>
<TouchableOpacity style={styles.buttonSubmitButtonT} onPress={this.onSubmit} >
<Text style={styles.textSubmitButtonT}>
Submit
</Text>
</TouchableOpacity>
......@@ -858,9 +850,9 @@ class Quiz extends React.Component {
}
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}}>
<View style={styles.viewSubmitButton}>
<TouchableOpacity style={styles.buttonSubmitButtonF} onPress={this.onSubmit} >
<Text style={styles.textSubmitButtonF}>
Submit
</Text>
</TouchableOpacity>
......@@ -870,12 +862,12 @@ class Quiz extends React.Component {
}
clickResetButton (){
if (this.state.click === false){
if (this.state.click === true){
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.buttonResetButtonT} onPress={this.removeArray} >
<View style={{flexDirection: 'row'}}>
<Image style={{height:'45%', width:'12%',marginTop:'8%', marginHorizontal:'8%'}} source={undo1}/>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#848484', paddingVertical:Dimensions.get('window').height * 0.04}}>
<Image style={styles.imageResetIcon} source={undo1}/>
<Text style={styles.textResetButtonT}>
Undo All Key
</Text>
</View>
......@@ -884,68 +876,32 @@ class Quiz extends React.Component {
}
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} >
<TouchableOpacity style={styles.buttonResetButtonF} onPress={this.removeArray} >
<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}}>
<Image style={styles.imageResetIcon} source={undo2}/>
<Text style={styles.textResetButtonF}>
Undo All Key
</Text>
</View>
</TouchableOpacity>
);
}
}
}
showQuit (){
if (this.state.showQuit === true){
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 Scale?</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>
......@@ -958,42 +914,17 @@ class Quiz 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}>Scale 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>
......@@ -1003,47 +934,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}>Scale 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>
......@@ -1053,57 +956,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 style={styles.viewShowDone}>
<Image style={styles.doneIcon} source={doneIcon}/>
<Text style={styles.textWellDone}>Well Done !</Text>
<View style={styles.viewScaleResult}>
<Text style={styles.textScaleResultD}>Scale 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={{ backgroundColor: '#81C9C9',
width : Dimensions.get('window').width * 0.33,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
marginLeft:5}}
onPress={() => this.backAction()}>
<Text style={{color: '#FFFFFF',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.14}}>OK</Text>
<TouchableOpacity style={styles.buttonDone} onPress={() => this.backAction()}>
<Text style={styles.textDone}>Done</Text>
</TouchableOpacity>
</View>
</View>
......@@ -1113,7 +986,7 @@ showDone(){
else {
return null;
}
}
}
render() {
return (
......@@ -1125,106 +998,68 @@ showDone(){
{this.showDone()}
{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={{width:Dimensions.get('window').width * 0.25, marginHorizontal:Dimensions.get('window').width * 0.03, marginTop:'6%', marginBottom:'2%'}}>
<View style={styles.view1}>
<View style={styles.viewQues}>
<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}
</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}
</Text>
</View>
<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%'}}>
<Image style={styles.corIconQues} source={corIcon}/>
<Text style={styles.textCorrectQ}>
{this.state.correct}
</Text>
</View>
</View>
<View style={{alignItems:'center',width:Dimensions.get('window').width * 0.32, marginHorizontal:Dimensions.get('window').width * 0.03, marginTop:'2%'}}>
<Image style={{height:Dimensions.get('window').height * 0.27, width:Dimensions.get('window').width * 0.18}} source={Notes[indexN].image}/>
<View style={styles.viewImageNotes}>
<Image style={styles.imageNote} source={Notes[indexN].image}/>
<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:
</Text>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#3D9090', paddingLeft:'3%'}}>
<Text style={styles.textKeyCount}>
{this.state.keyCount}
</Text>
</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
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:'18%', width:'13%', position: 'absolute', left:25, top:15}} source={timerIcon}/>
container: styles.containerStopWatch,
text: styles.textStopWatch}}/>
<Image style={styles.timerIcon} source={timerIcon}/>
{this.clickResetButton()}
</View>
</View>
<View style={{flexDirection: 'row', height: Dimensions.get('window').height * 0.4}}>
{NOTESWHITE.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? { width: Dimensions.get('window').width / NOTESWHITE.length,
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}
}
<TouchableHighlight style={keywordsList.find((element) => element === item.name) ? styles.whiteNotesButtonPress : styles.whiteNotesButton }
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={styles.textStyle}> </Text>
<Text> </Text>
</TouchableHighlight>
))}
{NOTESBLACK.map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? [styles.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [styles.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
<TouchableHighlight style={keywordsList.find((element) => element === item.name) ? [styles.blackNotesButtonPress, {marginLeft: config.deviceWidth * item.left}] : [styles.blackNotesButton, {marginLeft: config.deviceWidth * item.left}]}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={styles.textStyle}> </Text>
<Text> </Text>
</TouchableHighlight>
))}
</View>
</View>
);
}
}
......
style/styleQuiz.js
View file @ 3e25fd61
/* 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,
// clickSubmitButton ()
viewSubmitButton:{
flexDirection: 'row',
width:width,
marginBottom:height * 0.05,
},
// clickSubmitButton () if true
buttonSubmitButtonT:{
backgroundColor:'#E7E7E7',
borderRadius:8,
width:width * 0.22,
marginHorizontal:width * 0.75,
marginTop:'3%',
},
textSubmitButtonT:{
fontFamily:'Gilroy-Bold',
fontSize:16,
textAlign:'center',
lineHeight:20,
color:'#848484',
paddingVertical:height * 0.035,
},
// clickSubmitButton () if false
buttonSubmitButtonF:{
backgroundColor:'#EF476F',
borderRadius:8,
width:width * 0.22,
marginHorizontal:width * 0.75,
marginTop:'3%',
},
textSubmitButtonF:{
fontFamily:'Gilroy-Bold',
fontSize:16,
textAlign:'center',
lineHeight:20,
color:'#FFFBF0',
paddingVertical:height * 0.035,
},
//clickResetButton ()
imageResetIcon:{
height:'45%',
width:'12%',
marginTop:'8%',
marginHorizontal:'8%',
},
buttonResetButtonT:{
backgroundColor:'#E7E7E7',
borderColor:'#E7E7E7',
borderWidth:1,
borderRadius:8,
width:width * 0.22,
marginHorizontal:width * 0.72,
marginTop:height * 0.03,
},
textResetButtonT:{
fontFamily:'Gilroy-Bold',
fontSize:14,
textAlign:'left',
lineHeight:18,
color:'#848484',
paddingVertical:height * 0.04,
},
buttonResetButtonF:{
backgroundColor:'#FFFBF0',
borderColor:'#FC8121',
borderWidth:1,
borderRadius:8,
width:width * 0.22,
marginHorizontal:width * 0.72,
marginTop:height * 0.03,
},
textResetButtonF:{
fontFamily:'Gilroy-Bold',
fontSize:14,
textAlign:'left',
lineHeight:18,
color:'#FC8121',
paddingVertical:height * 0.04,
},
//showQuit()
viewShowQuit:{
marginHorizontal:width * 0.28,
width:width * 0.45,
height:height * 0.6,
marginTop:width * 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:height * 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:width * 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: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',
},
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: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,
},
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:width * 0.12,
},
//showWrong()
viewShowWrong: {
marginHorizontal:width * 0.28,
width :width * 0.45,
height :height * 0.6,
marginTop :width * 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:height * 0.17,
},
textWrong:{
fontSize: 24,
fontFamily: 'Gilroy-Bold',
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%',
},
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,
},
t1: {
color: 'black',
paddingTop: 120,
},
button: {
flex: 7,
//showDone()
viewShowDone:{
marginHorizontal:width * 0.28,
width :width * 0.42,
height :height * 0.73,
marginTop :width * 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,
position: 'absolute',
marginTop: config.deviceWidth * 0.11,
backgroundColor:'white',
},
correct: {
width: 100,
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,
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',
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',
textAlign: 'center',
paddingTop: 15,
color: 'white',
fontSize: 25,
marginRight: 10,
backgroundColor:'red',
borderWidth: 2,
fontFamily: 'sans-serif',
},
timer: {
width: 65,
height: 60,
borderRadius: 10,
borderColor:'white',
},
textStopWatch:{
fontSize: 16,
color: '#3B3A39',
textAlign: 'left',
paddingTop: 5,
lineHeight:20,
alignItems: 'center',
textAlign: 'center',
paddingTop: 16,
color: 'white',
fontSize: 25,
backgroundColor:'black',
borderWidth: 2,
fontFamily: 'sans-serif',
},
submit: {
width: '40%',
marginTop: config.deviceWidth * 0.055,
borderColor:'white',
borderWidth: 2,
borderRadius: 5,
},
viewMain: {
width: '20%',
alignContent: 'flex-end',
marginLeft: 180,
marginTop: '173%',
fontFamily: 'Gilroy-Bold',
},
timerIcon:{
height:'18%',
width:'13%',
position: 'absolute',
},
left:25,
top:15,
},
container: {
flex: 1,
},
textStyle: {
fontSize: 16,
padding: 8,
textAlign: 'center',
fontFamily: 'sans-serif',
},
buttonView: {
flexDirection: 'column',
marginLeft: config.deviceHeight * 1.0,
},
//White Notes
buttonStyle: {
width: config.deviceWidth * 0.075,
//White Notes
whiteNotesButton: {
width:width / 14,
borderWidth: 0.5,
borderColor: '#707070',
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
selectedKeywordStyle: {
width: config.deviceWidth * 0.075,
},
whiteNotesButtonPress:{
width:width / 14,
alignItems: 'center',
backgroundColor: '#FCE1FF',
borderRightWidth: 1,
borderColor: 'black',
borderWidth: 0.5,
borderColor: '#707070',
borderBottomWidth: 1,
},
//Black Notes
buttonB1: {
},
//Black Notes
blackNotesButton: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
......@@ -282,8 +484,8 @@ export default StyleSheet.create({
position: 'absolute',
borderWidth: 0.5,
borderColor: '#707070',
},
SbuttonB1: {
},
blackNotesButtonPress: {
alignItems: 'center',
backgroundColor: '#FCE1FF',
borderWidth: 0.5,
......@@ -291,5 +493,5 @@ export default StyleSheet.create({
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