fix navigation, info styles

vds-app/App/components/Button.js

@@ -33,7 +33,7 @@ const styles = StyleSheet.create({
   }
 })
 
-export const Button = ({ text, subtitle = null, isBig = false, colorize = false,  onPress = () => {} }) => {
+export const Button = ({ text, subtitle = null, isBig = false, colorize = false, color = false,  onPress = () => {} }) => {
 
   const buttonBig = isBig ? {fontSize: 25} : {}
   const isClicked = colorize.clicked == colorize.id
@@ -50,6 +50,10 @@ export const Button = ({ text, subtitle = null, isBig = false, colorize = false,
     }
   }
 
+  if(color) {
+    buttonColor = {backgroundColor: color, borderColor: 'transparent'}
+  }
+
   if(subtitle) {
     return (
       <TouchableOpacity onPress={onPress} style={[styles.button, buttonColor]}>

vds-app/App/components/Variables.js

@@ -30,6 +30,7 @@ export const texts = {
   wrongs: "Sbagliate",
   percentage: "Percentuale",
   points: "Punti",
+  questions: "Domande",
   aerodynamics: "Aerodinamica",
   first_aid: "Primo soccorso",
   flight_safety: "Sicurezza in volo",
@@ -45,13 +46,25 @@ export const texts = {
   infoTitle: "Informazioni",
   version: "Versione",
   author: "Autore",
+  exit: "Esci",
+  exitQuestion: "Vuoi uscire dall'app?",
   description: "VDS Quiz è una applicazione che utilizza le 500 domande ufficiali dell'AeCI (Aero Club d'Italia), nella simulazione le domande vengono estrapolate seguendo lo schema ufficiale d'esame:",
-  source: "Domande ufficiali",
+  source: "PDF Domande ufficiali",
   pdfLinkText: "Fonte: AeCI (Aero Club d'Italia) \"500 Quiz\"",
   pdfLink: "http://www.aeci.it/upload/files/quiz_VDS-VL_2017.pdf",
-  schema: "Normativa e legislazione: 4 domande / 3pt \n\r Aerodinamica: 8 domande / 3pt \n\r Pronto soccorso: 1 domande / 2pt \n\r Fisiopatologia del volo: 1 domande / 2pt \n\r Meteorologia e aerologia: 6 domande / 4pt \n\r Strumenti: 1 domande / 2pt \n\r Tecnica di pilotaggio: 5 domande / 4pt \n\r Materiali: 1 domande / 2pt \n\r Sicurezza del volo: 3 domande / 4pt \n\r TOTALE: 30 domande / 100pt",
-  resultsSchema: "da 100pt a 86pt idoneo\n\r da 85pt a 80pt idoneo con superamento di una verifica orale, riguardante i quesiti errati\n\r inferiore a 80pt non idoneo"
+  legislation: "Normativa e legislazione",
+  aerodynamics: "Aerodinamica",
+  firstAid: "Pronto soccorso",
+  physiopathology: "Fisiopatologia del volo",
+  meteorology: "Meteorologia e aerologia",
+  instruments: "Strumenti",
+  pilotingTechniques: "Tecnica di pilotaggio",
+  materials: "Materiali",
+  flightSafety: "Sicurezza del volo",
+  examScheme: "Schema domande d'esame",
+  resultsScheme: "Calcolo risultati"
 }
+
 export const examScheme = [
   {section: "aerodynamics", questions: 8, points: 3},
   {section: "firstAid", questions: 1, points: 2},
@@ -70,8 +83,15 @@ export const examScheme = [
   {section: "flightSafety", questions: 1, points: 4},
   {section: "instruments", questions: 1, points: 2}
 ]
-
 */
+
+export const resultsScheme = [
+  {points: "da 86 a 100 punti", result: "idoneo"},
+  {points: "da 80 a 85 punti", result: "doneo con superamento di una verifica orale, riguardante i quesiti errati"},
+  {points: "inferiore a 80 punti", result: "non idoneo"},
+]
+
+
 export const credentials = {
   adMobUnitIDTest: "ca-app-pub-3940256099942544/6300978111",
   adMobUnitID: "ca-app-pub-4145771316565790/1848957462" //"ca-app-pub-3940256099942544/6300978111" //  "ca-app-pub-4145771316565790/1848957462",

vds-app/App/screens/Info.js

@@ -2,7 +2,7 @@ import React from "react"
 import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image, BackHandler, Linking} from "react-native"
 
 import { Button, ButtonContainer } from "../components/Button"
-import { colors, texts } from "../components/Variables"
+import { colors, texts, examScheme, resultsScheme} from "../components/Variables"
 
 const screen = Dimensions.get("window")
 const header = require("../assets/header.png")
@@ -18,7 +18,7 @@ const styles = StyleSheet.create({
     flex: 1,
     marginTop: 0,
     justifyContent: "space-between",
-    paddingHorizontal: 20
+    paddingHorizontal: 10
   },
   headerContainer: {
     marginTop: -40,
@@ -37,8 +37,8 @@ const styles = StyleSheet.create({
     width: screen.width-80
   },
   box: {
-    width: screen.width-40,
-    paddingHorizontal: 20
+    width: screen.width-20,
+    paddingHorizontal: 10
   },
   text: {
     color: colors.white,
@@ -50,12 +50,24 @@ const styles = StyleSheet.create({
     textShadowOffset: {width: -1, height: 1},
     textShadowRadius: 10
   },
+  title: {
+    paddingTop: 30,
+    color: colors.white,
+    fontSize: 18,
+    textTransform: "uppercase",
+    textAlign: "center",
+    fontWeight: "400",
+    lineHeight: 20,
+    textShadowColor: 'rgba(0, 0, 0, 0.75)',
+    textShadowOffset: {width: -1, height: 1},
+    textShadowRadius: 10
+  },
   textSmall: {
     lineHeight: 23,
     marginTop: 15,
     borderRadius: 5,
     backgroundColor: colors.black_alpha,
-    borderWidth: 1,
+    borderWidth: 0,
     borderColor: colors.white_alpha,
     fontSize: 16,
     color: colors.white,
@@ -64,6 +76,23 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingVertical: 20
   },
+  textItems: {
+    fontSize: 16,
+    fontWeight: "400",
+    lineHeight: 23,
+    color: colors.white,
+    textAlign: "center",
+    paddingBottom: 10,
+    marginBottom: 10,
+    borderBottomColor: colors.black_alpha,
+    borderBottomWidth: 1
+  },
+  noBorder: {
+    borderBottomWidth: 0
+  },
+  item: {
+    width: "100%"
+  },
   noPadding: {
     paddingVertical: 0,
   },
@@ -78,6 +107,8 @@ const styles = StyleSheet.create({
   }
 })
 
+const B = (props) => <Text style={{fontWeight: 'bold'}}>{props.children}</Text>
+
 class Info extends React.Component {
 
   state = {}
@@ -87,6 +118,18 @@ class Info extends React.Component {
     Linking.openURL(url).catch((err) => console.error('An error occurred', err))
   }
 
+  componentDidMount() {
+    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton)
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton)
+  }
+
+  handleBackButton = () => {
+    this.props.navigation.navigate("Splash")
+    return true
+  }
 
   render() {
 
@@ -112,13 +155,35 @@ class Info extends React.Component {
               <Text style={styles.textSmall}>
                 {texts.description}
               </Text>
-              <Text style={styles.textSmall}>
-                {texts.schema}
+
+              <Text style={styles.title}>
+                {texts.examScheme}:
               </Text>
-              <Text style={styles.textSmall}>
-                {texts.resultsSchema}
+
+              <View style={styles.textSmall}>
+                {examScheme.map( (arg, index) => (
+                  <Text style={styles.textItems} key={index}>
+                    <B>{texts[arg.section]}</B>: {'\n\r'}{arg.questions} {texts.questions} / {arg.points} {texts.points}
+                  </Text>
+                ))}
+
+                  <Text style={[styles.textItems, styles.noBorder]}>
+                    <B>TOTALE</B>: {'\n\r'}30 {texts.questions} / 100 {texts.points}
+                  </Text>
+              </View>
+
+              <Text style={styles.title}>
+                {texts.resultsScheme}:
               </Text>
 
+              <View style={styles.textSmall}>
+                {resultsScheme.map( (arg, index) => (
+                  <Text style={[styles.textItems, index == resultsScheme.length-1 ? styles.noBorder : {}]} key={index}>
+                    <B>{arg.points}</B>: {'\n\r'}{arg.result}
+                  </Text>
+                ))}
+              </View>
+
               <Button
                 text={texts.source}
                 subtitle={texts.pdfLinkText}

vds-app/App/screens/Quiz.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, ImageBackground } from "react-native"
+import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, ImageBackground, BackHandler } from "react-native"
 
 import { Button, ButtonContainer } from "../components/Button"
 import { colors } from "../components/Variables"
@@ -47,6 +47,19 @@ class Quiz extends React.Component {
     results: false
   }
 
+  componentDidMount() {
+    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton)
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton)
+  }
+
+  handleBackButton = () => {
+    this.props.navigation.navigate("Splash")
+    return true
+  }
+
   answer = (correct, id, question) => {
     this.setState(
       state => {

vds-app/App/screens/QuizIndex.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { ScrollView, StatusBar,  } from "react-native"
+import { ScrollView, StatusBar, BackHandler } from "react-native"
 
 import aerodynamicsQuestions from "../data/aerodynamics"
 import firstAidQuestions from "../data/firstAid"
@@ -19,80 +19,101 @@ import { colors, texts} from "../components/Variables"
 
 /*
     <RowItem name="TEST" color={colors.blue} textColor={colors.white} onPress={()=>
-      navigation.navigate("Quiz", {
+      this.props.navigation.navigate("Quiz", {
         title: "TEST",
         questions: testQuestions,
         color: colors.blue
       })}/>
 */
 
-export default ({ navigation }) => (
-  <ScrollView style={[{ backgroundColor: colors.dark_blue }]}>
-    <StatusBar barStyle="dark-content" />
-
-    <RowItem name={texts.aerodynamics} color={colors.blue} textColor={colors.white} onPress={()=>
-      navigation.navigate("Quiz", {
-        title: texts.aerodynamics,
-        questions: aerodynamicsQuestions,
-        color: colors.blue
-      })}/>
-
-    <RowItem name={texts.first_aid} color={colors.blue} textColor={colors.white} onPress={()=>
-      navigation.navigate("Quiz", {
-        title: texts.first_aid,
-        questions: firstAidQuestions,
-        color: colors.blue
-      })}/>
-
-    <RowItem name={texts.flight_safety} color={colors.blue} textColor={colors.white} onPress={()=>
-      navigation.navigate("Quiz", {
-        title: texts.flight_safety,
-        questions: flightSafetyQuestions,
-        color: colors.blue
-      })}/>
-
-    <RowItem name={texts.instruments} color={colors.blue} textColor={colors.white} onPress={()=>
-      navigation.navigate("Quiz", {
-        title: texts.instruments,
-        questions: instrumentsQuestions,
-        color: colors.blue
-      })}/>
-
-    <RowItem name={texts.legislation} color={colors.blue} textColor={colors.white} onPress={()=>
-      navigation.navigate("Quiz", {
-        title: texts.legislation,
-        questions: legislationQuestions,
-        color: colors.blue
-      })}/>
-
-    <RowItem name={texts.materials} color={colors.blue} textColor={colors.white} onPress={()=>
-      navigation.navigate("Quiz", {
-        title: texts.materials,
-        questions: materialsQuestions,
-        color: colors.blue
-      })}/>
-
-    <RowItem name={texts.meteorology} color={colors.blue} textColor={colors.white} onPress={()=>
-      navigation.navigate("Quiz", {
-        title: texts.meteorology,
-        questions: meteorologyQuestions,
-        color: colors.blue
-      })}/>
-
-    <RowItem name={texts.physiopathology} color={colors.blue} textColor={colors.white} onPress={()=>
-      navigation.navigate("Quiz", {
-        title: texts.physiopathology,
-        questions: physiopathologyQuestions,
-        color: colors.blue
-      })}/>
-
-    <RowItem name={texts.piloting_techniques} color={colors.blue} textColor={colors.white} onPress={()=>
-      navigation.navigate("Quiz", {
-        title: texts.piloting_techniques,
-        questions: pilotingTechniquesQuestions,
-        color: colors.blue
-      })}/>
-
-
-  </ScrollView>
-)
+class QuizIndex extends React.Component {
+
+  componentDidMount() {
+    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton)
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton)
+  }
+
+  handleBackButton = () => {
+    this.props.navigation.navigate("Splash")
+    return true
+  }
+
+  render() {
+    return (
+
+      <ScrollView style={[{ backgroundColor: colors.dark_blue }]}>
+        <StatusBar barStyle="dark-content" />
+
+        <RowItem name={texts.aerodynamics} color={colors.blue} textColor={colors.white} onPress={()=>
+          this.props.navigation.navigate("Quiz", {
+            title: texts.aerodynamics,
+            questions: aerodynamicsQuestions,
+            color: colors.blue
+          })}/>
+
+        <RowItem name={texts.first_aid} color={colors.blue} textColor={colors.white} onPress={()=>
+          this.props.navigation.navigate("Quiz", {
+            title: texts.first_aid,
+            questions: firstAidQuestions,
+            color: colors.blue
+          })}/>
+
+        <RowItem name={texts.flight_safety} color={colors.blue} textColor={colors.white} onPress={()=>
+          this.props.navigation.navigate("Quiz", {
+            title: texts.flight_safety,
+            questions: flightSafetyQuestions,
+            color: colors.blue
+          })}/>
+
+        <RowItem name={texts.instruments} color={colors.blue} textColor={colors.white} onPress={()=>
+          this.props.navigation.navigate("Quiz", {
+            title: texts.instruments,
+            questions: instrumentsQuestions,
+            color: colors.blue
+          })}/>
+
+        <RowItem name={texts.legislation} color={colors.blue} textColor={colors.white} onPress={()=>
+          this.props.navigation.navigate("Quiz", {
+            title: texts.legislation,
+            questions: legislationQuestions,
+            color: colors.blue
+          })}/>
+
+        <RowItem name={texts.materials} color={colors.blue} textColor={colors.white} onPress={()=>
+          this.props.navigation.navigate("Quiz", {
+            title: texts.materials,
+            questions: materialsQuestions,
+            color: colors.blue
+          })}/>
+
+        <RowItem name={texts.meteorology} color={colors.blue} textColor={colors.white} onPress={()=>
+          this.props.navigation.navigate("Quiz", {
+            title: texts.meteorology,
+            questions: meteorologyQuestions,
+            color: colors.blue
+          })}/>
+
+        <RowItem name={texts.physiopathology} color={colors.blue} textColor={colors.white} onPress={()=>
+          this.props.navigation.navigate("Quiz", {
+            title: texts.physiopathology,
+            questions: physiopathologyQuestions,
+            color: colors.blue
+          })}/>
+
+        <RowItem name={texts.piloting_techniques} color={colors.blue} textColor={colors.white} onPress={()=>
+          this.props.navigation.navigate("Quiz", {
+            title: texts.piloting_techniques,
+            questions: pilotingTechniquesQuestions,
+            color: colors.blue
+          })}/>
+
+
+      </ScrollView>
+    )
+  }
+}
+
+export default QuizIndex

vds-app/App/screens/Splash.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image } from "react-native"
+import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image, Alert, BackHandler } from "react-native"
 import { AdMobBanner } from "expo-ads-admob"
 
 import { Button, ButtonContainer } from "../components/Button"
@@ -87,6 +87,27 @@ class Splash extends React.Component {
     //console.log("Banner error: ", e)
   }
 
+  componentDidMount() {
+    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton)
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton)
+  }
+
+  handleBackButton = () => {
+    Alert.alert(
+      texts.exit,
+      texts.exitQuestion,
+      [
+        {text: 'No', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
+        {text: 'Si', onPress: () => BackHandler.exitApp()},
+      ],
+      { cancelable: false }
+    )
+    return true
+  }
+
   render() {
 
     if(this.state.timer==maxTime) {
@@ -122,6 +143,7 @@ class Splash extends React.Component {
               <Button
                 text={texts.section_quizzes}
                 isBig={false}
+                color={colors.green_light}
                 onPress={() =>
                   this.props.navigation.navigate("QuizIndex", {
                     title: texts.section_quizzes,
@@ -132,18 +154,25 @@ class Splash extends React.Component {
                 text={texts.exam}
                 subtitle={`(${texts.exam_simulation})`}
                 isBig={false}
+                color={colors.purple_light}
                 onPress={() =>
                   this.props.navigation.navigate("Exam", {
                     title: texts.exam,
-                    questions: examQuestions,
+                    questions: this.props.navigation.getParam("examQuestions") || examQuestions,
                     color: colors.blue
                   })}
               />
               <Button
                 text={texts.infoTitle}
                 isBig={false}
-                onPress={() =>
-                  this.props.navigation.navigate("Info", {})}
+                color={colors.white_alpha}
+                onPress={() => this.props.navigation.navigate("Info", {})}
+              />
+              <Button
+                text={texts.exit}
+                isBig={false}
+                color={colors.black_alpha}
+                onPress={() => this.handleBackButton()}
               />
 
             </ButtonContainer>

vds-app/app.json

@@ -8,7 +8,7 @@
       "ios",
       "android"
     ],
-    "version": "1.5.0",
+    "version": "1.6.1",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "splash": {
@@ -26,7 +26,7 @@
       "icon": "./assets/icon.png",
       "package": "com.dslak.vdsquiz",
       "permissions": [],
-      "versionCode": 7,
+      "versionCode": 8,
       "config": {
         "googleMobileAdsAppId": "ca-app-pub-4145771316565790~1876877627"
       }