Merge branch 'feature/graphic' into develop

vds-app/App/components/Button.js

@@ -8,8 +8,8 @@ const styles = StyleSheet.create({
     borderWidth: 4,
     borderColor: 'transparent',
     borderRadius: 10,
-    paddingHorizontal: 10,
-    paddingVertical: 13,
+    paddingHorizontal: 20,
+    paddingVertical: 15,
     alignItems: "center",
     justifyContent: "center",
     width: "100%",
@@ -25,6 +25,11 @@ const styles = StyleSheet.create({
     fontSize: 15,
     textAlign: "center"
   },
+  shadow: {
+    textShadowColor: 'rgba(0, 0, 0, 0.45)',
+    textShadowOffset: {width: -1, height: 1},
+    textShadowRadius: 2
+  },
   buttonContainer: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -35,13 +40,14 @@ const styles = StyleSheet.create({
   }
 })
 
-export const Button = ({ text, subtitle = null, isBig = false, colorize = false, color = false, noPadding = false, noBorder = false,  onPress = () => {} }) => {
+export const Button = ({ text, subtitle = null, isBig = false, colorize = false, color = false, noPadding = false, noBorder = false, halfSize = false, hasShadow = false,  onPress = false }) => {
 
   const buttonBig = isBig ? {fontSize: 25} : {}
   const isClicked = colorize.clicked == colorize.id
   let buttonColor = {backgroundColor: colors.white_alpha}
   let planeButton = noPadding ? { borderRadius: 0, marginTop: 0, borderWidth: 0, borderBottomWidth: 1, borderColor: colors.white_alpha} : {}
   let noBorderButton = noBorder ? { borderWidth: 0, borderBottomWidth: 0} : {}
+  let isHalf = halfSize ? { width: "48%", marginHorizontal: "1%"} : {}
 
   if(colorize && colorize.answered) {
 
@@ -58,20 +64,37 @@ export const Button = ({ text, subtitle = null, isBig = false, colorize = false,
     buttonColor = {backgroundColor: color, borderColor: 'transparent'}
   }
 
+  if(onPress) {
     if(subtitle) {
       return (
-      <TouchableOpacity onPress={onPress} style={[styles.button, buttonColor, planeButton, noBorderButton]}>
-        <Text style={[styles.text, buttonBig]}>{text}</Text>
-        <Text style={styles.subtitle}>{subtitle}</Text>
+        <TouchableOpacity onPress={onPress} style={[styles.button, buttonColor, planeButton, noBorderButton, isHalf]}>
+          <Text style={[styles.text, buttonBig, hasShadow ? styles.shadow : '', {fontWeight: "500"}]}>{text}</Text>
+          <Text style={[styles.subtitle, hasShadow ? styles.shadow : '']}>{subtitle}</Text>
         </TouchableOpacity>
       )
     } else {
       return (
-      <TouchableOpacity onPress={onPress} style={[styles.button, buttonColor, planeButton, noBorderButton]}>
-        <Text style={[styles.text, buttonBig]}>{text}</Text>
+        <TouchableOpacity onPress={onPress} style={[styles.button, buttonColor, planeButton, noBorderButton, isHalf]}>
+          <Text style={[styles.text, buttonBig, hasShadow ? styles.shadow : '']}>{text}</Text>
         </TouchableOpacity>
       )
     }
+  } else {
+    if(subtitle) {
+      return (
+        <View style={[styles.button, buttonColor, planeButton, noBorderButton, isHalf]}>
+          <Text style={[styles.text, buttonBig, hasShadow ? styles.shadow : ''], {fontWeight: "500"}}>{text}</Text>
+          <Text style={[styles.subtitle, hasShadow ? styles.shadow : '']}>{subtitle}</Text>
+        </View>
+      )
+    } else {
+      return (
+        <View style={[styles.button, buttonColor, planeButton, noBorderButton, isHalf]}>
+          <Text style={[styles.text, buttonBig, hasShadow ? styles.shadow : '']}>{text}</Text>
+        </View>
+      )
+    }
+  }
 }
 
 

vds-app/App/components/RowItem.js

@@ -1,6 +1,6 @@
 import React from "react"
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native"
-import { colors } from "../components/Variables"
+import { colors, texts } from "../components/Variables"
 
 const styles = StyleSheet.create({
   row: {
@@ -9,17 +9,44 @@ const styles = StyleSheet.create({
     backgroundColor: colors.blue,
     marginBottom: 1
   },
+  container: {
+    paddingHorizontal: 20
+  },
+  button: {
+    backgroundColor: colors.white_alpha,
+    borderWidth: 4,
+    borderColor: 'transparent',
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    paddingVertical: 13,
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    marginVertical: 5
+  },
   text: {
-    fontSize: 18,
+    fontSize: 20,
+    color: colors.white,
+    fontWeight: "500",
+    textShadowColor: 'rgba(0, 0, 0, 0.45)',
+    textShadowOffset: {width: -1, height: 1},
+    textShadowRadius: 2
+  },
+  subtitle: {
+    fontSize: 14,
     color: colors.white,
-    fontWeight: "400"
+    fontWeight: "400",
+    textShadowColor: 'rgba(0, 0, 0, 0.45)',
+    textShadowOffset: {width: -1, height: 1},
+    textShadowRadius: 2
   }
 })
 
-export const RowItem = ({ onPress = () => {}, name, color, textColor }) => (
-  <TouchableOpacity onPress={onPress} activeOpacity={0.8}>
-    <View style={[styles.row, { backgroundColor: color }]}>
+export const RowItem = ({ onPress = () => {}, name, subtitle, textColor }) => (
+  <TouchableOpacity style={styles.container} onPress={onPress} activeOpacity={0.8}>
+    <View style={styles.button}>
       <Text style={[styles.text, { color: textColor }]}>{name}</Text>
+      <Text style={[styles.subtitle, { color: textColor }]}>({subtitle} {texts.questions})</Text>
     </View>
   </TouchableOpacity>
 )

vds-app/App/components/TrueFalseQuestions.js

@@ -0,0 +1,47 @@
+import aerodynamicsQuestions from "../data/aerodynamics"
+import firstAidQuestions from "../data/firstAid"
+import flightSafetyQuestions from "../data/flightSafety"
+import instrumentsQuestions from "../data/instruments"
+import legislationQuestions from "../data/legislation"
+import materialsQuestions from "../data/materials"
+import meteorologyQuestions from "../data/meteorology"
+import physiopathologyQuestions from "../data/physiopathology"
+import pilotingTechniquesQuestions from "../data/pilotingTechniques"
+
+import { examScheme } from "../components/Variables"
+
+let tmpQuestions = []
+
+const allQuestions = {
+  aerodynamics: aerodynamicsQuestions,
+  firstAid: firstAidQuestions,
+  flightSafety: flightSafetyQuestions,
+  instruments: instrumentsQuestions,
+  legislation: legislationQuestions,
+  materials: materialsQuestions,
+  meteorology: meteorologyQuestions,
+  physiopathology: physiopathologyQuestions,
+  pilotingTechniques: pilotingTechniquesQuestions
+}
+
+const generateQuestions = () => {
+  let fullQuestions = []
+
+  examScheme.forEach( (elem) => {
+    let currentSection = allQuestions[elem.section]
+    for(let i=0; i<currentSection.length; i++) {
+      fullQuestions.push(currentSection[i])
+    }
+  })
+
+  for(let i=0; i<10; i++) {
+    const currentIndex = Math.floor(Math.random() * fullQuestions.length)
+    tmpQuestions.push(fullQuestions[currentIndex])
+    fullQuestions = fullQuestions.filter( (item, index) => index != currentIndex)
+  }
+
+}
+
+generateQuestions()
+
+export const trueFalseQuestions = tmpQuestions

vds-app/App/components/Variables.js

@@ -1,13 +1,13 @@
 export const colors = {
   white: "#fff",
-  white_alpha: "rgba(255, 255, 255, 0.3)",
+  white_alpha: "rgba(255, 255, 255, 0.2)",
   white_alpha2: "rgba(255, 255, 255, 0.5)",
   black: "#000",
   black_alpha: "rgba(0, 0, 0, 0.1)",
   purple: "#8c0072",
   purple_light: "#a30085",
-  blue: "#1385d0",
-  dark_blue: "#1279be",
+  blue: "#0080d0",
+  dark_blue: "#0072be",
   red: "#af321e",
   red_alpha: "rgba(175, 50, 30, 0.9)",
   red_light: "#af5d44",
@@ -23,6 +23,7 @@ export const colors = {
 export const texts = {
   quizzes: "Seleziona un argomento",
   section_quizzes: "Quiz per argomento",
+  section_quizzes_subtitle: "Esercitati su argomenti specifici",
   exam: "Simulazione esame",
   exam_simulation: "30 domande in 30min",
   exam_passed: "Esame superato!",
@@ -44,7 +45,7 @@ export const texts = {
   piloting_techniques: "Tecniche di pilotaggio",
   restart: "Ricomincia!",
   recap: "Visualizza errori",
-  recapTitle: "Riepilogo domande sbagliate",
+  recapTitle: "Riepilogo risposte sbagliate",
   infoTitle: "Informazioni App",
   dictionaryTitle: "Terminologia",
   dictionarySubtitle: "Dizionario ICAO e abbreviazioni",
@@ -69,7 +70,11 @@ export const texts = {
   materials: "Materiali",
   flightSafety: "Sicurezza del volo",
   examScheme: "Schema domande d'esame",
-  resultsScheme: "Calcolo risultati"
+  resultsScheme: "Calcolo risultati",
+  true: "Vero",
+  false: "Falso",
+  trueFalse: "Test Vero/Falso",
+  trueFalseSubtitle: "10 domande casuali con risposte Vero/Falso"
 }
 
 export const examScheme = [

vds-app/App/data/flightSafety.js

@@ -95,7 +95,7 @@ const questions = [
       },
       {
         "id": "3",
-        "text": "può non essere pericoloso se l’esperienza è molta. DEL VOLO"
+        "text": "può non essere pericoloso se l’esperienza è molta."
       }
     ]
   },

vds-app/App/data/physiopathology.js

@@ -95,7 +95,7 @@ const questions = [
       },
       {
         "id": "3",
-        "text": "permanenza ad alta quota dopo lungo periodo di ambientamento. DEL VOLO"
+        "text": "permanenza ad alta quota dopo lungo periodo di ambientamento."
       }
     ]
   },
@@ -186,16 +186,16 @@ const questions = [
     "answers": [
       {
         "id": "1",
-        "text": "1 no.",
+        "text": "no.",
         "correct": true
       },
       {
         "id": "2",
-        "text": "2 – si."
+        "text": "si."
       },
       {
         "id": "3",
-        "text": "3 sì, se l’equilibrio è affinato da adeguato addestramento."
+        "text": "sì, se l’equilibrio è affinato da adeguato addestramento."
       }
     ]
   }

vds-app/App/index.js

@@ -4,9 +4,12 @@ import Splash from "./screens/Splash"
 import Banner from "./screens/Banner"
 import QuizIndex from "./screens/QuizIndex"
 import Quiz from "./screens/Quiz"
+import TrueFalse from "./screens/TrueFalse"
 import Exam from "./screens/Exam"
 import Results from "./screens/Results"
+import ResultsTrueFalse from "./screens/ResultsTrueFalse"
 import Recap from "./screens/Recap"
+import RecapTrueFalse from "./screens/RecapTrueFalse"
 import Info from "./screens/Info"
 import Dictionary from "./screens/Dictionary"
 import { colors, texts} from "./components/Variables"
@@ -15,86 +18,79 @@ const MainStack = createStackNavigator({
   Splash: {
     screen: Splash,
     navigationOptions: ({ navigation }) => ({
-      header: null,
-      backgroundColor: colors.yellow,
-      headerStyle: {
-        backgroundColor: colors.yellow
-      }
+      header: null
+    })
+  },
+  RecapTrueFalse: {
+    screen: RecapTrueFalse,
+    navigationOptions: ({ navigation }) => ({
+      header: null
     })
   },
   Recap: {
     screen: Recap,
     navigationOptions: ({ navigation }) => ({
-      header: null,
-      backgroundColor: colors.yellow,
-      headerStyle: {
-        backgroundColor: colors.yellow
-      }
+      header: null
     })
   },
   Results: {
     screen: Results,
     navigationOptions: ({ navigation }) => ({
-      header: null,
-      backgroundColor: colors.yellow,
-      headerStyle: {
-        backgroundColor: colors.yellow
-      }
+      header: null
+    })
+  },
+  ResultsTrueFalse: {
+    screen: ResultsTrueFalse,
+    navigationOptions: ({ navigation }) => ({
+      header: null
     })
   },
   Info: {
     screen: Info,
     navigationOptions: ({ navigation }) => ({
-      header: null,
+      header: null
     })
   },
   Dictionary: {
     screen: Dictionary,
     navigationOptions: ({ navigation }) => ({
-      header: null,
+      header: null
     })
   },
   Banner: {
     screen: Banner,
     navigationOptions: ({ navigation }) => ({
-      header: null,
-      backgroundColor: colors.yellow,
-      headerStyle: {
-        backgroundColor: colors.yellow
-      }
+      header: null
     })
   },
   QuizIndex: {
     screen: QuizIndex,
     navigationOptions: ({ navigation }) => ({
-      headerTitle: texts.quizzes,
-      headerTintColor: colors.white,
-      backgroundColor: colors.dark_blue,
-      headerStyle: {
-        backgroundColor: colors.dark_blue
-      }
+      header: null
     })
   },
   Quiz: {
     screen: Quiz,
     navigationOptions: ({ navigation }) => ({
-      headerTitle: navigation.getParam("title"),
-      headerTintColor: colors.white,
-      headerStyle: {
-        backgroundColor: navigation.getParam("color"),
-        borderBottomColor: navigation.getParam("color")
-      }
+      header: null
+    })
+  },
+  TrueFalse: {
+    screen: TrueFalse,
+    navigationOptions: ({ navigation }) => ({
+      header: null
+//       headerTitle: navigation.getParam("title"),
+//       headerTintColor: colors.white,
+//       headerStyle: {
+//         backgroundColor: navigation.getParam("color"),
+//         borderBottomColor: navigation.getParam("color")
+//       }
     })
   },
   Exam: {
     screen: Exam,
     navigationOptions: ({ navigation }) => ({
-      headerTitle: navigation.getParam("title"),
-      headerTintColor: colors.white,
-      headerStyle: {
-        backgroundColor: navigation.getParam("color"),
-        borderBottomColor: navigation.getParam("color")
-      }
+      header: null
     })
   }
 })

vds-app/App/screens/Dictionary.js

@@ -1,47 +1,24 @@
 import React from "react"
-import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image, BackHandler, Linking} from "react-native"
+import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, ImageBackground, BackHandler, Linking} from "react-native"
 import { AdMobBanner } from "expo-ads-admob"
 
 import { Button, ButtonContainer } from "../components/Button"
 import { colors, texts, credentials} from "../components/Variables"
 import { abbreviations, alphabeth, numbers} from "../data/dictionary"
 
+const bgImage = require("../assets/bg.jpg")
 const screen = Dimensions.get("window")
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: colors.dark_blue,
     flex: 1
   },
   safearea: {
     flex: 1,
     marginTop: 30,
-    marginBottom: 30,
     justifyContent: "space-between",
     paddingHorizontal: 20
   },
-  bannerContainer: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  banner: {
-    width: 320,
-    height: 60,
-    marginVertical: 10
-  },
-  box: {
-    width: screen.width-40,
-    paddingHorizontal: 20,
-    backgroundColor: colors.white,
-    borderRadius: 10,
-    overflow: "hidden"
-  },
-
-  scrollView: {
-    margin: 0,
-    height: screen.height-350
-  },
 
   buttonContainer: {
     marginHorizontal: 0,
@@ -120,6 +97,39 @@ const styles = StyleSheet.create({
     lineHeight: 30,
     fontSize: 26,
     fontWeight: "600"
+  },
+
+
+  box: {
+    width: screen.width-40,
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    backgroundColor: colors.white,
+    borderRadius: 10,
+    overflow: "hidden"
+  },
+
+  scrollView: {
+    margin: 10,
+    height: screen.height-400
+  },
+
+  bg: {
+    width: "100%",
+    height: "100%"
+  },
+  bannerContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    height: 60
+  },
+  banner: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    width: 320,
+    height: 60
   }
 })
 
@@ -178,8 +188,8 @@ class Dictionary extends React.Component {
   render() {
 
     return (
+      <ImageBackground source={bgImage} style={styles.bg} resizeMode="cover">
       <View style={styles.container} >
-
         <SafeAreaView style={styles.safearea}>
           <View style={styles.buttonContainer}>
             <ButtonContainer isBoxed={true}>
@@ -231,6 +241,7 @@ class Dictionary extends React.Component {
           </View>
         </SafeAreaView>
       </View>
+      </ImageBackground>
     )
   }
 }

vds-app/App/screens/Exam.js

@@ -45,7 +45,12 @@ const styles = StyleSheet.create({
     textAlign: "center",
     fontWeight: "600",
     paddingVertical: 10,
-    marginTop: 10,
+    marginTop: 30,
+    backgroundColor: colors.white_alpha,
+    borderRadius: 25,
+    textShadowColor: 'rgba(0, 0, 0, 0.45)',
+    textShadowOffset: {width: -1, height: 1},
+    textShadowRadius: 2
   },
   safearea: {
     flex: 1,
@@ -91,7 +96,7 @@ class Exam extends React.Component {
 
   handleBackButton = () => {
 
-    const tmpQuestions = []
+    let tmpQuestions = []
     examScheme.forEach( (elem) => {
       let currentSection = allQuestions[elem.section]
       for(let i=0; i<elem.questions; i++) {

vds-app/App/screens/Info.js

@@ -48,7 +48,7 @@ const styles = StyleSheet.create({
     lineHeight: 20,
     textShadowColor: 'rgba(0, 0, 0, 0.75)',
     textShadowOffset: {width: -1, height: 1},
-    textShadowRadius: 10
+    textShadowRadius: 5
   },
   title: {
     paddingTop: 30,
@@ -60,32 +60,38 @@ const styles = StyleSheet.create({
     lineHeight: 20,
     textShadowColor: 'rgba(0, 0, 0, 0.75)',
     textShadowOffset: {width: -1, height: 1},
-    textShadowRadius: 10
+    textShadowRadius: 5
   },
   textSmall: {
     lineHeight: 23,
     marginTop: 15,
     borderRadius: 10,
-    backgroundColor: colors.white,
+    backgroundColor: colors.white_alpha,
     borderWidth: 0,
     borderColor: colors.white_alpha,
     fontSize: 16,
-    color: colors.black,
+    color: colors.white,
     fontWeight: "400",
     textAlign: "center",
     paddingHorizontal: 20,
-    paddingVertical: 20
+    paddingVertical: 20,
+    textShadowColor: 'rgba(0, 0, 0, 0.75)',
+    textShadowOffset: {width: -1, height: 1},
+    textShadowRadius: 5
   },
   textItems: {
     fontSize: 16,
     fontWeight: "400",
     lineHeight: 23,
-    color: colors.black,
+    color: colors.white,
     textAlign: "center",
     paddingBottom: 10,
     marginBottom: 10,
-    borderBottomColor: colors.black_alpha,
-    borderBottomWidth: 1
+    borderBottomColor: colors.white_alpha,
+    borderBottomWidth: 1,
+    textShadowColor: 'rgba(0, 0, 0, 0.55)',
+    textShadowOffset: {width: -1, height: 1},
+    textShadowRadius: 2
   },
   noBorder: {
     borderBottomWidth: 0

vds-app/App/screens/Quiz.js

@@ -1,11 +1,12 @@
 import React from "react"
-import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, ImageBackground, BackHandler } from "react-native"
+import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, ImageBackground, BackHandler } from "react-native"
 import { AdMobBanner } from "expo-ads-admob"
 
 import { Button, ButtonContainer } from "../components/Button"
 import { colors, credentials } from "../components/Variables"
 
 const bgImage = require("../assets/bg.jpg")
+const screen = Dimensions.get("window")
 
 const styles = StyleSheet.create({
   container: {
@@ -20,10 +21,19 @@ const styles = StyleSheet.create({
   },
   safearea: {
     flex: 1,
-    marginTop: 20,
     paddingHorizontal: 20,
+    paddingTop: 20,
     justifyContent: "space-between"
   },
+  box: {
+    width: screen.width,
+    paddingVertical: 10,
+    overflow: "hidden"
+  },
+  scrollView: {
+    //margin: 10,
+    height: screen.height-150
+  },
   bg: {
     width: "100%",
     height: "100%"
@@ -34,9 +44,10 @@ const styles = StyleSheet.create({
     justifyContent: "center"
   },
   banner: {
-    width: 320,
-    height: 100,
-    marginVertical: 20
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    width: 320
   }
 })
 
@@ -142,9 +153,9 @@ class Quiz extends React.Component {
 
     return (
       <ImageBackground source={bgImage} style={styles.bg} resizeMode="cover">
+        <View style={styles.box}>
+          <View style={styles.scrollView}>
             <ScrollView style={ styles.container } >
-        <StatusBar barStyle="light-content" />
-
               {!this.state.results ?
               <SafeAreaView style={styles.safearea}>
                 <View>
@@ -167,7 +178,9 @@ class Quiz extends React.Component {
                 </Text>
               </SafeAreaView>
               : <SafeAreaView></SafeAreaView>}
-
+            </ScrollView>
+          </View>
+        </View>
         <View style={styles.bannerContainer}>
           <AdMobBanner
             style={styles.banner}
@@ -175,7 +188,6 @@ class Quiz extends React.Component {
             adUnitID={credentials.adMobUnitIDFooter}
             onDidFailToReceiveAdWithError={this.bannerError} />
         </View>
-      </ScrollView>
       </ImageBackground>
     )
   }

vds-app/App/screens/QuizIndex.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { ScrollView, StatusBar, BackHandler } from "react-native"
+import { View, ScrollView, StatusBar, BackHandler, StyleSheet, Dimensions, ImageBackground } from "react-native"
 
 import aerodynamicsQuestions from "../data/aerodynamics"
 import firstAidQuestions from "../data/firstAid"
@@ -16,9 +16,20 @@ import { Button, ButtonContainer } from "../components/Button"
 import { RowItem } from "../components/RowItem"
 import { colors, texts} from "../components/Variables"
 
+const bgImage = require("../assets/bg.jpg")
+const screen = Dimensions.get("window")
+
+const styles = StyleSheet.create({
+
+  bg: {
+    flex: 1,
+    width: "100%",
+    height: "100%"
+  },
+})
 
 /*
-    <RowItem name="TEST" color={colors.blue} textColor={colors.white} onPress={()=>
+    <RowItem name="TEST" textColor={colors.white} onPress={()=>
       this.props.navigation.navigate("Quiz", {
         title: "TEST",
         questions: testQuestions,
@@ -43,75 +54,76 @@ class QuizIndex extends React.Component {
 
   render() {
     return (
-
-      <ScrollView style={[{ backgroundColor: colors.dark_blue }]}>
-        <StatusBar barStyle="dark-content" />
-
-        <RowItem name={texts.aerodynamics} color={colors.blue} textColor={colors.white} onPress={()=>
+      <ImageBackground source={bgImage} style={styles.bg} resizeMode="cover">
+        <ScrollView >
+          <View style={{marginVertical: 60}}>
+            <RowItem name={texts.aerodynamics} subtitle={aerodynamicsQuestions.length} 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={()=>
+            <RowItem name={texts.first_aid} subtitle={firstAidQuestions.length} 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={()=>
+            <RowItem name={texts.flight_safety} subtitle={flightSafetyQuestions.length} 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={()=>
+            <RowItem name={texts.instruments} subtitle={instrumentsQuestions.length} 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={()=>
+            <RowItem name={texts.legislation} subtitle={legislationQuestions.length} 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={()=>
+            <RowItem name={texts.materials} subtitle={materialsQuestions.length} 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={()=>
+            <RowItem name={texts.meteorology} subtitle={meteorologyQuestions.length} 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={()=>
+            <RowItem name={texts.physiopathology} subtitle={physiopathologyQuestions.length} 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={()=>
+            <RowItem name={texts.piloting_techniques} subtitle={pilotingTechniquesQuestions.length} textColor={colors.white} onPress={()=>
               this.props.navigation.navigate("Quiz", {
                 title: texts.piloting_techniques,
                 questions: pilotingTechniquesQuestions,
                 color: colors.blue
               })}/>
 
-
+            </View>
         </ScrollView>
+
+      </ImageBackground>
     )
   }
 }

vds-app/App/screens/Recap.js

@@ -59,21 +59,22 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     padding: 15,
     borderRadius: 5,
-    backgroundColor: colors.black_alpha
+    backgroundColor: colors.white_alpha
   },
   text: {
     color: colors.white,
     fontSize: 20,
     textAlign: "center",
     fontWeight: "600",
-    paddingVertical: 10
+    paddingTop: 10
   },
   textBig: {
     color: colors.white,
-    fontSize: 24,
+    fontSize: 22,
     textAlign: "center",
-    fontWeight: "500",
-    paddingBottom: 10,
+    fontWeight: "400",
+    paddingBottom: 15,
+    textTransform: "uppercase",
     textShadowColor: 'rgba(0, 0, 0, 0.75)',
     textShadowOffset: {width: -1, height: 1},
     textShadowRadius: 10
@@ -156,6 +157,8 @@ class Recap extends React.Component {
 
             <View style={styles.button}>
               <Button
+                color={colors.white_alpha2}
+                hasShadow={true}
                 text={texts.restart}
                 onPress={() => {this.handleBackButton()}
                 }

vds-app/App/screens/RecapTrueFalse.js

@@ -0,0 +1,193 @@
+import React from "react"
+import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image, ImageBackground, BackHandler} from "react-native"
+import { AdMobBanner } from "expo-ads-admob"
+
+import { Button, ButtonContainer } from "../components/Button"
+import { colors, texts, examScheme, credentials } from "../components/Variables"
+
+import aerodynamicsQuestions from "../data/aerodynamics"
+import firstAidQuestions from "../data/firstAid"
+import flightSafetyQuestions from "../data/flightSafety"
+import instrumentsQuestions from "../data/instruments"
+import legislationQuestions from "../data/legislation"
+import materialsQuestions from "../data/materials"
+import meteorologyQuestions from "../data/meteorology"
+import physiopathologyQuestions from "../data/physiopathology"
+import pilotingTechniquesQuestions from "../data/pilotingTechniques"
+
+const screen = Dimensions.get("window")
+const header = require("../assets/header.png")
+const bgImage = require("../assets/bg.jpg")
+
+const allQuestions = {
+  aerodynamics: aerodynamicsQuestions,
+  firstAid: firstAidQuestions,
+  flightSafety: flightSafetyQuestions,
+  instruments: instrumentsQuestions,
+  legislation: legislationQuestions,
+  materials: materialsQuestions,
+  meteorology: meteorologyQuestions,
+  physiopathology: physiopathologyQuestions,
+  pilotingTechniques: pilotingTechniquesQuestions
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.blue,
+    flex: 1
+  },
+  safearea: {
+    flex: 1,
+    marginTop: 0,
+    justifyContent: "space-between",
+    paddingHorizontal: 20,
+    paddingBottom: 40
+  },
+  headerContainer: {
+    marginTop: -40,
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    height: screen.width/1.5
+  },
+  header: {
+    width: "100%"
+  },
+  box: {
+    marginTop: 30,
+    borderColor: colors.black_alpha,
+    borderWidth: 1,
+    padding: 15,
+    borderRadius: 5,
+    backgroundColor: colors.white_alpha
+  },
+  text: {
+    color: colors.white,
+    fontSize: 20,
+    textAlign: "center",
+    fontWeight: "600",
+    paddingTop: 10
+  },
+  textBig: {
+    color: colors.white,
+    fontSize: 22,
+    textAlign: "center",
+    fontWeight: "400",
+    paddingBottom: 15,
+    textTransform: "uppercase",
+    textShadowColor: 'rgba(0, 0, 0, 0.75)',
+    textShadowOffset: {width: -1, height: 1},
+    textShadowRadius: 10
+  },
+  bg: {
+    width: "100%",
+    height: "100%"
+  },
+  bannerContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  banner: {
+    width: 320,
+    height: 100,
+    marginVertical: 20
+  }
+})
+
+class RecapTrueFalse extends React.Component {
+
+  componentDidMount() {
+    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton)
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton)
+  }
+
+  handleBackButton = () => {
+
+    let tmpQuestions = []
+    let fullQuestions = []
+
+    examScheme.forEach( (elem) => {
+      let currentSection = allQuestions[elem.section]
+      for(let i=0; i<currentSection.length; i++) {
+        fullQuestions.push(currentSection[i])
+      }
+    })
+
+    for(let i=0; i<10; i++) {
+      const currentIndex = Math.floor(Math.random() * fullQuestions.length)
+      tmpQuestions.push(fullQuestions[currentIndex])
+      fullQuestions = fullQuestions.filter( (item, index) => index != currentIndex)
+    }
+
+    this.props.navigation.navigate("Splash", {
+      trueFalseQuestions: tmpQuestions
+    })
+    return true
+  }
+
+  render() {
+
+    const questions = this.props.navigation.getParam("wrongAnswers", [])
+
+    return (
+      <View style={styles.container} >
+        <View style={styles.headerContainer} >
+          <Image source={header} style={styles.header} resizeMode="contain" />
+        </View>
+
+        <Text style={styles.textBig}>{texts.recapTitle}</Text>
+
+        <ScrollView>
+          <SafeAreaView style={styles.safearea}>
+            {questions.map( (question, index) => (
+              <View style={styles.box} key={question.id}>
+                <Text style={styles.text}>{question.text}</Text>
+
+                <ButtonContainer>
+                  {question.answers.map( (answer, index) => {
+                    if(question.clicked == answer.id) {
+                      return (
+                        <Button
+                          noBorder={true}
+                          key={answer.id}
+                          text={answer.text}
+                          colorize={{id: answer.id, clicked: question.clicked, answered: true, isCorrect: answer.correct}}
+                        />
+                      )}
+                    }
+                  )}
+                </ButtonContainer>
+              </View>
+            ))}
+
+            <View style={styles.button}>
+              <Button
+                color={colors.white_alpha2}
+                hasShadow={true}
+                text={texts.restart}
+                onPress={() => {this.handleBackButton()}
+                }
+              />
+            </View>
+          </SafeAreaView>
+
+          <View style={styles.bannerContainer}>
+            <AdMobBanner
+              style={styles.banner}
+              bannerSize="largeBanner"
+              adUnitID={credentials.adMobUnitIDFooter}
+              onDidFailToReceiveAdWithError={this.bannerError} />
+          </View>
+        </ScrollView>
+
+      </View>
+
+    )
+  }
+}
+
+export default RecapTrueFalse

vds-app/App/screens/Results.js

@@ -204,7 +204,7 @@ class Results extends React.Component {
                     })
                   }}/>
                 <Button
-                  isBig={true}
+                  isBig={false}
                   color={colors.white_alpha}
                   text={texts.restart}
                   onPress={() => {this.handleBackButton()}
@@ -214,7 +214,7 @@ class Results extends React.Component {
               </View> :
               <View style={styles.button}>
                 <Button
-                  isBig={true}
+                  isBig={false}
                   color={colors.white_alpha}
                   text={texts.restart}
                   onPress={() => {this.handleBackButton()}

vds-app/App/screens/ResultsTrueFalse.js

@@ -0,0 +1,230 @@
+import React from "react"
+import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image, BackHandler} from "react-native"
+
+import { Button, ButtonContainer } from "../components/Button"
+import { colors, texts, examScheme } from "../components/Variables"
+
+import aerodynamicsQuestions from "../data/aerodynamics"
+import firstAidQuestions from "../data/firstAid"
+import flightSafetyQuestions from "../data/flightSafety"
+import instrumentsQuestions from "../data/instruments"
+import legislationQuestions from "../data/legislation"
+import materialsQuestions from "../data/materials"
+import meteorologyQuestions from "../data/meteorology"
+import physiopathologyQuestions from "../data/physiopathology"
+import pilotingTechniquesQuestions from "../data/pilotingTechniques"
+
+const screen = Dimensions.get("window")
+const header = require("../assets/header.png")
+const maxTime = 0 // 10
+let interval = null
+
+const allQuestions = {
+  aerodynamics: aerodynamicsQuestions,
+  firstAid: firstAidQuestions,
+  flightSafety: flightSafetyQuestions,
+  instruments: instrumentsQuestions,
+  legislation: legislationQuestions,
+  materials: materialsQuestions,
+  meteorology: meteorologyQuestions,
+  physiopathology: physiopathologyQuestions,
+  pilotingTechniques: pilotingTechniquesQuestions
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.dark_blue,
+    flex: 1
+  },
+  safearea: {
+    flex: 1,
+    marginTop: 0,
+    justifyContent: "space-between",
+    paddingHorizontal: 20,
+    paddingBottom: 40
+  },
+  headerContainer: {
+    marginTop: -40,
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    height: screen.width/1.5
+  },
+  header: {
+    width: "100%"
+  },
+  box: {
+    marginTop: 20,
+    marginBottom: 20,
+    marginHorizontal: 20,
+    width: screen.width-80,
+    borderRadius: 20,
+    borderBottomEndRadius: 80,
+    borderTopStartRadius: 100,
+    backgroundColor: colors.white_alpha,
+    borderColor: colors.white,
+    borderWidth: 2,
+    paddingVertical: 30
+  },
+  boxCorrect: {
+    backgroundColor: colors.green_light,
+  },
+  boxWrong: {
+    backgroundColor: colors.red,
+  },
+  boxUnsafe: {
+    backgroundColor: colors.orange,
+  },
+  button: {
+    width: screen.width-80,
+    marginHorizontal: 20
+  },
+  text: {
+    color: colors.white,
+    fontSize: 22,
+    textAlign: "center",
+    fontWeight: "400",
+    lineHeight: 40,
+    textShadowColor: 'rgba(0, 0, 0, 0.75)',
+    textShadowOffset: {width: -1, height: 1},
+    textShadowRadius: 10
+  },
+  textSmall: {
+    color: colors.white,
+    marginTop: 20,
+    fontSize: 26,
+    textAlign: "center",
+    fontWeight: "500",
+    lineHeight: 30,
+    textShadowColor: 'rgba(0, 0, 0, 0.75)',
+    textShadowOffset: {width: -1, height: 1},
+    textShadowRadius: 10
+  },
+  textLabel: {
+    paddingHorizontal: 20,
+    paddingVertical: 20
+  },
+  correct: {
+    color: colors.green
+  },
+  wrong: {
+    color: colors.red
+  },
+  unsafe: {
+    color: colors.yellow
+  }
+})
+
+class Results extends React.Component {
+
+  state = {
+    bannerExpanded: true,
+    timer: maxTime
+  }
+
+  componentDidMount() {
+    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton)
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton)
+  }
+
+  handleBackButton = () => {
+
+    let tmpQuestions = []
+    let fullQuestions = []
+
+    examScheme.forEach( (elem) => {
+      let currentSection = allQuestions[elem.section]
+      for(let i=0; i<currentSection.length; i++) {
+        fullQuestions.push(currentSection[i])
+      }
+    })
+
+    for(let i=0; i<10; i++) {
+      const currentIndex = Math.floor(Math.random() * fullQuestions.length)
+      tmpQuestions.push(fullQuestions[currentIndex])
+      fullQuestions = fullQuestions.filter( (item, index) => index != currentIndex)
+    }
+
+    this.props.navigation.navigate("Splash", {
+      trueFalseQuestions: tmpQuestions
+    })
+    return true
+  }
+
+  render() {
+
+    const currentResults = this.props.navigation.getParam("results")
+    const wrongAnswers = currentResults.wrongAnswers || null
+    const percentage = currentResults.total ? (100/currentResults.total) * currentResults.correct : 0
+    let resultStyle = ''
+    let boxStyle = currentResults.points >= 80 ? currentResults.points >= 85 ? styles.boxCorrect : styles.boxUnsafe : styles.boxWrong
+
+    if(!currentResults.isExam) {
+      resultStyle = ''
+      boxStyle = percentage >= 80 ? percentage >= 85 ? styles.boxCorrect : styles.boxUnsafe : styles.boxWrong
+    }
+
+    //console.log(currentResults)
+
+    return (
+      <View style={styles.container} >
+        <View style={styles.headerContainer} >
+          <Image source={header} style={styles.header} resizeMode="contain" />
+        </View>
+        <ScrollView>
+          <SafeAreaView style={styles.safearea}>
+            <View style={[styles.box, boxStyle]}>
+              <Text style={styles.text}>
+                <Text style={styles.textLabel}>{`${texts.corrects}: ${currentResults.correct}`}</Text>
+              </Text>
+              <Text style={styles.text}>
+                <Text style={styles.textLabel}>{`${texts.wrongs}: ${currentResults.wrong}`}</Text>
+              </Text>
+              <Text style={styles.text}>
+                <Text style={styles.textLabel}>{`${texts.percentage}: ${Math.round(percentage)}%`}</Text>
+              </Text>
+
+            </View>
+
+            {wrongAnswers.length ?
+              <View style={styles.button}>
+                <Button
+                  color={colors.red_light}
+                  text={texts.recap}
+                  onPress={ ()=> {
+                    this.props.navigation.navigate("RecapTrueFalse", {
+                      wrongAnswers: wrongAnswers
+                    })
+                  }}/>
+                <Button
+                  isBig={false}
+                  color={colors.white_alpha}
+                  text={texts.restart}
+                  onPress={() => {this.handleBackButton()}
+                  }
+                />
+
+              </View> :
+              <View style={styles.button}>
+                <Button
+                  isBig={false}
+                  color={colors.white_alpha}
+                  text={texts.restart}
+                  onPress={() => {this.handleBackButton()}
+                  }
+                />
+              </View>
+            }
+
+          </SafeAreaView>
+        </ScrollView>
+
+      </View>
+    )
+  }
+}
+
+export default Results

vds-app/App/screens/Splash.js

@@ -5,6 +5,7 @@ import { AdMobBanner } from "expo-ads-admob"
 import { Button, ButtonContainer } from "../components/Button"
 import { colors, texts, credentials } from "../components/Variables"
 import { examQuestions } from "../components/ExamQuestions"
+import { trueFalseQuestions } from "../components/TrueFalseQuestions"
 
 const screen = Dimensions.get("window")
 const header = require("../assets/header.png")
@@ -69,7 +70,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     width: "100%",
-    height: 220
+    height: 200
   },
   header: {
     width: "100%"
@@ -142,13 +143,15 @@ class Splash extends React.Component {
             <ButtonContainer isBoxed={true}>
               <Button
                 text={texts.section_quizzes}
+                subtitle={`(${texts.section_quizzes_subtitle})`}
                 isBig={false}
                 noPadding={true}
-                color={colors.green_light}
+                hasShadow={true}
+                color={colors.white_alpha}
                 onPress={() =>
                   this.props.navigation.navigate("QuizIndex", {
                     title: texts.section_quizzes,
-                    color: colors.blue
+                    color: colors.white_alpha
                   })}
               />
               <Button
@@ -156,12 +159,28 @@ class Splash extends React.Component {
                 subtitle={`(${texts.exam_simulation})`}
                 isBig={false}
                 noPadding={true}
-                color={colors.purple_light}
+                hasShadow={true}
+                color={colors.white_alpha}
                 onPress={() =>
                   this.props.navigation.navigate("Exam", {
                     title: texts.exam,
                     questions: this.props.navigation.getParam("examQuestions") || examQuestions,
-                    color: colors.blue
+                    color: colors.white_alpha
+                  })}
+              />
+
+              <Button
+                text={texts.trueFalse}
+                subtitle={`(${texts.trueFalseSubtitle})`}
+                isBig={false}
+                noPadding={true}
+                hasShadow={true}
+                color={colors.white_alpha}
+                onPress={() =>
+                  this.props.navigation.navigate("TrueFalse", {
+                    title: texts.trueFalse,
+                    questions: this.props.navigation.getParam("trueFalseQuestions") || trueFalseQuestions,
+                    color: colors.white_alpha
                   })}
               />
               <Button
@@ -169,13 +188,15 @@ class Splash extends React.Component {
                 subtitle={`(${texts.dictionarySubtitle})`}
                 isBig={false}
                 noPadding={true}
-                color={colors.orange}
+                hasShadow={true}
+                color={colors.white_alpha}
                 onPress={() => this.props.navigation.navigate("Dictionary", {})}
               />
               <Button
                 text={texts.infoTitle}
                 isBig={false}
                 noPadding={true}
+                hasShadow={true}
                 color={colors.white_alpha}
                 onPress={() => this.props.navigation.navigate("Info", {})}
               />
@@ -183,8 +204,9 @@ class Splash extends React.Component {
                 text={texts.exit}
                 isBig={false}
                 noPadding={true}
+                hasShadow={true}
                 noBorder={true}
-                color={colors.black_alpha}
+                color={colors.white_alpha2}
                 onPress={() => this.handleBackButton()}
               />
 

vds-app/App/screens/TrueFalse.js

@@ -0,0 +1,260 @@
+import React from "react"
+import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, ImageBackground, BackHandler } from "react-native"
+import { AdMobBanner } from "expo-ads-admob"
+
+import { Button, ButtonContainer } from "../components/Button"
+import { texts, colors, examScheme, credentials } from "../components/Variables"
+
+import aerodynamicsQuestions from "../data/aerodynamics"
+import firstAidQuestions from "../data/firstAid"
+import flightSafetyQuestions from "../data/flightSafety"
+import instrumentsQuestions from "../data/instruments"
+import legislationQuestions from "../data/legislation"
+import materialsQuestions from "../data/materials"
+import meteorologyQuestions from "../data/meteorology"
+import physiopathologyQuestions from "../data/physiopathology"
+import pilotingTechniquesQuestions from "../data/pilotingTechniques"
+
+const allQuestions = {
+  aerodynamics: aerodynamicsQuestions,
+  firstAid: firstAidQuestions,
+  flightSafety: flightSafetyQuestions,
+  instruments: instrumentsQuestions,
+  legislation: legislationQuestions,
+  materials: materialsQuestions,
+  meteorology: meteorologyQuestions,
+  physiopathology: physiopathologyQuestions,
+  pilotingTechniques: pilotingTechniquesQuestions
+}
+
+const bgImage = require("../assets/bg.jpg")
+const screen = Dimensions.get("window")
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  text: {
+    color: colors.white,
+    fontSize: 20,
+    textAlign: "center",
+    fontWeight: "600",
+    paddingVertical: 20
+  },
+  textAnswer: {
+    color: colors.black,
+    backgroundColor: colors.white,
+    fontSize: 18,
+    textAlign: "center",
+    fontWeight: "400",
+    marginTop: 20,
+    paddingVertical: 20,
+    paddingHorizontal: 20,
+    borderRadius: 10
+  },
+  safearea: {
+    flex: 1,
+    paddingHorizontal: 20,
+    paddingTop: 40,
+    justifyContent: "space-between"
+  },
+  box: {
+    width: screen.width,
+    paddingVertical: 10,
+    overflow: "hidden"
+  },
+  scrollView: {
+    //margin: 10,
+    height: screen.height-150
+  },
+
+  bg: {
+    width: "100%",
+    height: "100%"
+  },
+  bannerContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  banner: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    width: 320
+  }
+})
+
+class Quiz extends React.Component {
+
+  state = {
+    correctCount: 0,
+    wrongCount: 0,
+    wrongAnswers: [],
+    totalCount: this.props.navigation.getParam("questions", []).length,
+    availableIds: this.props.navigation.getParam("questions", []).map(a => a.id),
+    activeQuestionId: this.props.navigation.getParam("questions", [])[
+                        Math.floor(Math.random() * this.props.navigation.getParam("questions", []).length)
+                      ].id,
+    activeAnswerId: Math.floor(Math.random() * 3),
+    clickedAnswer: false,
+    answered: false,
+    results: false
+  }
+
+  bannerError = (e) => {
+    console.log("Banner error (footer): ", e)
+  }
+
+  componentDidMount() {
+    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton)
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton)
+  }
+
+  handleBackButton = () => {
+
+    let tmpQuestions = []
+    let fullQuestions = []
+
+    examScheme.forEach( (elem) => {
+      let currentSection = allQuestions[elem.section]
+      for(let i=0; i<currentSection.length; i++) {
+        fullQuestions.push(currentSection[i])
+      }
+    })
+
+    for(let i=0; i<10; i++) {
+      const currentIndex = Math.floor(Math.random() * fullQuestions.length)
+      tmpQuestions.push(fullQuestions[currentIndex])
+      fullQuestions = fullQuestions.filter( (item, index) => index != currentIndex)
+    }
+
+    this.props.navigation.navigate("Splash", {
+      trueFalseQuestions: tmpQuestions
+    })
+    return true
+  }
+
+  answer = (answer, correct, id, question) => {
+    this.setState(
+      state => {
+        const nextState = { answered: true, clickedId: id, clickedAnswer: answer }
+
+        if ((correct && answer) || (!correct && !answer)) {
+          //console.log('ok')
+          nextState.correctCount = state.correctCount + 1
+        } else {
+          //console.log('ko')
+          nextState.wrongCount = state.wrongCount + 1
+          nextState.wrongAnswers = state.wrongAnswers
+          nextState.wrongAnswers.push(
+            { text: question.question,
+              id: question.id,
+              clicked: question.answers[state.activeAnswerId].id,
+              answers: question.answers
+            }
+          )
+
+        }
+
+        return nextState
+      },
+      () => {
+        setTimeout(() => this.nextQuestion(), 2000)
+      }
+    )
+  }
+
+  nextQuestion = () => {
+
+    const updatedIndexes = this.state.availableIds.filter( item => item != this.state.activeQuestionId)
+    const nextId = updatedIndexes[Math.floor(Math.random() * updatedIndexes.length)]
+
+    if (!updatedIndexes.length) {
+      //console.log(this.state.wrongAnswers)
+      this.props.navigation.navigate("ResultsTrueFalse", {
+        results: {
+          isExam: false,
+          total: this.state.totalCount,
+          correct: this.state.correctCount,
+          wrong: this.state.wrongCount,
+          wrongAnswers: this.state.wrongAnswers
+        }
+      })
+
+    } else {
+      this.setState( (state) => {
+        return {
+          availableIds: updatedIndexes,
+          activeQuestionId: nextId,
+          activeAnswerId: Math.floor(Math.random() * 3),
+          answered: false
+        }
+      })
+    }
+  }
+
+  render() {
+    const questions = this.props.navigation.getParam("questions", [])
+    const question = questions.filter(item => item.id == this.state.activeQuestionId)[0] || questions[0]
+    const randomAnswer = question.answers[this.state.activeAnswerId]
+
+    //console.log({id: randomAnswer.id, clicked: this.state.clickedId, answered: this.state.answered, isCorrect: randomAnswer.correct || false})
+
+    return (
+      <ImageBackground source={bgImage} style={styles.bg} resizeMode="cover">
+        <View style={styles.box}>
+          <View style={styles.scrollView}>
+
+            <ScrollView style={ styles.container } >
+              <StatusBar barStyle="light-content" />
+
+              {!this.state.results ?
+              <SafeAreaView style={styles.safearea}>
+                <View>
+                  <Text style={styles.text}>{question.question}</Text>
+                  <Text style={styles.textAnswer}>{randomAnswer.text}</Text>
+
+                  <ButtonContainer>
+                    <Button
+                      halfSize={true}
+                      text={texts.true}
+                      colorize={{id: randomAnswer.id, clicked: this.state.clickedAnswer ? randomAnswer.id : false, answered: this.state.answered, isCorrect: randomAnswer.correct || false}}
+                      onPress={() => this.answer(true, randomAnswer.correct || false, randomAnswer.id, question)}
+                    />
+
+                    <Button
+                      halfSize={true}
+                      text={texts.false}
+                      colorize={{id: randomAnswer.id, clicked: !this.state.clickedAnswer ? randomAnswer.id : false, answered: this.state.answered, isCorrect: !randomAnswer.correct}}
+                      onPress={() => this.answer(false, randomAnswer.correct || false, randomAnswer.id, question)}
+                    />
+                  </ButtonContainer>
+
+                </View>
+
+                <Text style={styles.text}>
+                  {`${this.state.correctCount+this.state.wrongCount}/${this.state.totalCount}`}
+                </Text>
+              </SafeAreaView>
+              : <SafeAreaView></SafeAreaView>}
+
+            </ScrollView>
+          </View>
+        </View>
+        <View style={styles.bannerContainer}>
+          <AdMobBanner
+            style={styles.banner}
+            bannerSize="largeBanner"
+            adUnitID={credentials.adMobUnitIDFooter}
+            onDidFailToReceiveAdWithError={this.bannerError} />
+        </View>
+      </ImageBackground>
+    )
+  }
+}
+
+export default Quiz

vds-app/app.json

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