add Results Screen

prevent back

vds-app/App/components/Alert.js

@@ -1,55 +0,0 @@
-import React from "react"
-import { View, StyleSheet, Dimensions, Image } from "react-native"
-import { colors } from "../components/Variables"
-
-const screen = Dimensions.get("window")
-
-const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  circle: {
-    backgroundColor: colors.red,
-    width: screen.width / 2,
-    height: screen.width / 2,
-    borderRadius: screen.width / 2,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  circleCorrect: {
-    backgroundColor: colors.green
-  },
-  icon: {
-    width: screen.width / 3
-  }
-})
-
-export const Alert = ({ correct, visible }) => {
-  if (!visible) return null
-
-
-  const icon = correct
-    ? require("../assets/check.png")
-    : require("../assets/close.png")
-
-  const circleStyles = [styles.circle]
-
-  if (correct) {
-    circleStyles.push(styles.circleCorrect)
-  }
-
-  return (
-    <View style={styles.container}>
-      <View style={circleStyles}>
-        <Image source={icon} style={styles.icon} resizeMode="contain" />
-      </View>
-    </View>
-  )
-}

vds-app/App/components/Results.js

@@ -1,121 +0,0 @@
-import React from "react"
-import { View, StyleSheet, Dimensions, Text, Image, ImageBackground } from "react-native"
-import { colors, texts } from "../components/Variables"
-
-const screen = Dimensions.get("window")
-const imgError = require("../assets/error.jpg")
-const imgUnsafe = require("../assets/unsafe.jpg")
-const imgPassed = require("../assets/passed.jpg")
-
-const styles = StyleSheet.create({
-  container: {
-    top: 0,
-    left: 0,
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    height: screen.height-80,
-    width: screen.width,
-    backgroundColor: colors.white_alpha
-  },
-  box: {
-    position: "absolute",
-    top: (screen.height/2)-220,
-    width: screen.width-50,
-    borderRadius: 15,
-    backgroundColor: colors.white_alpha,
-    borderColor: colors.white,
-    borderWidth: 4,
-    paddingVertical: 30
-  },
-  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: {
-    marginTop: 20,
-    color: colors.white,
-    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
-  },
-  bg: {
-    width: "100%",
-    height: "100%",
-    borderRadius: 5
-  },
-  bgStyle: {
-    borderRadius: 0,
-    opacity: 0.8,
-    borderColor: colors.white_alpha,
-    borderWidth: 0
-  }
-})
-
-export const Results = ({ results, visible }) => {
-  if (!visible) return null
-
-  //const percentage = results.totalPoints ? (100/results.totalPoints) * results.points : 0
-  const percentage = results.total ? (100/results.total) * results.correct : 0
-  let bgImage = results.points >= 80 ? results.points >= 85 ? imgPassed : imgUnsafe : imgError
-  //let imgPanoramaResult = results.points >= 80 ? imgPanorama : imgPanorama2
-
-  if(!results.isExam) {
-    bgImage = percentage >= 80 ? percentage >= 85 ? imgPassed : imgUnsafe : imgError
-    //imgPanoramaResult = percentage >= 80 ? imgPanorama : imgPanorama2
-  }
-
-  return (
-
-    <ImageBackground source={bgImage} style={[styles.bg, styles.container]} resizeMode="cover">
-
-      <View style={styles.box}>
-
-        <Text style={styles.text}>
-          <Text style={styles.textLabel}>{`${texts.corrects}: ${results.correct}`}</Text>
-        </Text>
-        <Text style={styles.text}>
-          <Text style={styles.textLabel}>{`${texts.wrongs}: ${results.wrong}`}</Text>
-        </Text>
-        <Text style={styles.text}>
-          <Text style={styles.textLabel}>{`${texts.percentage}: ${Math.round(percentage)}%`}</Text>
-        </Text>
-        <Text style={styles.text}>
-          <Text style={styles.textLabel}>{`${texts.points}: ${results.points}/${results.totalPoints}`}</Text>
-        </Text>
-
-        {results.isExam ?
-          <Text style={styles.textSmall}>
-            {results.points >= 80 ? results.points >= 85 ? texts.exam_passed : texts.exam_needs_oral : texts.exam_not_passed}
-          </Text> : <Text/>
-        }
-
-      </View>
-
-    </ImageBackground>
-
-  )
-}

vds-app/App/components/Variables.js

@@ -39,7 +39,7 @@ export const texts = {
   physiopathology: "Fisiopatologia del volo",
   piloting_techniques: "Tecniche di pilotaggio"
 }
-
+/*
 export const examScheme = [
   {section: "aerodynamics", questions: 8, points: 3},
   {section: "firstAid", questions: 1, points: 2},
@@ -51,6 +51,13 @@ export const examScheme = [
   {section: "physiopathology", questions: 1, points: 2},
   {section: "pilotingTechniques", questions: 5, points: 4}
 ]
+*/
+export const examScheme = [
+  {section: "aerodynamics", questions: 1, points: 3},
+  {section: "firstAid", questions: 1, points: 2},
+  {section: "flightSafety", questions: 1, points: 4},
+  {section: "instruments", questions: 1, points: 2}
+]
 
 export const credentials = {
   adMobUnitIDTest: "ca-app-pub-3940256099942544/6300978111",

vds-app/App/index.js

@@ -5,6 +5,7 @@ import Banner from "./screens/Banner"
 import QuizIndex from "./screens/QuizIndex"
 import Quiz from "./screens/Quiz"
 import Exam from "./screens/Exam"
+import Results from "./screens/Results"
 import { colors, texts} from "./components/Variables"
 
 const MainStack = createStackNavigator({
@@ -18,6 +19,16 @@ const MainStack = createStackNavigator({
       }
     })
   },
+  Results: {
+    screen: Results,
+    navigationOptions: ({ navigation }) => ({
+      header: null,
+      backgroundColor: colors.yellow,
+      headerStyle: {
+        backgroundColor: colors.yellow
+      }
+    })
+  },
   Banner: {
     screen: Banner,
     navigationOptions: ({ navigation }) => ({

vds-app/App/screens/Exam.js

@@ -1,14 +1,13 @@
 import React from "react"
-import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView } from "react-native"
+import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, ImageBackground } from "react-native"
 
 import { Button, ButtonContainer } from "../components/Button"
-//import { Alert } from "../components/Alert"
-import { Results } from "../components/Results"
-import { colors } from "../components/Variables"
+import { colors, texts } from "../components/Variables"
+
+const bgImage = require("../assets/bg.jpg")
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: colors.blue,
     flex: 1
   },
   text: {
@@ -31,7 +30,11 @@ const styles = StyleSheet.create({
     marginTop: 20,
     paddingHorizontal: 20,
     justifyContent: "space-between"
-  }
+  },
+  bg: {
+    width: "100%",
+    height: "100%"
+  },
 })
 
 let interval = null
@@ -80,25 +83,37 @@ class Exam extends React.Component {
   }
 
   nextQuestion = () => {
-    this.setState( (state) => {
-      const updatedIndexes = state.availableIds.filter( item => item != state.activeQuestionId)
-      const nextId = updatedIndexes[Math.floor(Math.random() * updatedIndexes.length)]
-      let resultsShow = (this.state.timer <= 1 || (this.state.correctCount+this.state.wrongCount) == this.state.totalCount) ? true : false
-
-      if (!updatedIndexes.length) {
-        resultsShow = true
-        setTimeout( () => {
-          this.props.navigation.popToTop()
-        }, 10000)
-      }
 
-      return {
-        availableIds: updatedIndexes,
-        activeQuestionId: nextId,
-        answered: false,
-        results: resultsShow
-      }
-    })
+    const updatedIndexes = this.state.availableIds.filter( item => item != this.state.activeQuestionId)
+    const nextId = updatedIndexes[Math.floor(Math.random() * updatedIndexes.length)]
+    let resultsShow = (this.state.timer <= 1 || (this.state.correctCount+this.state.wrongCount) == this.state.totalCount) ? true : false
+
+    if (!updatedIndexes.length) {
+
+      clearInterval(interval)
+      this.props.navigation.navigate("Results", {
+        results: {
+          isExam: true,
+          total: this.state.totalCount,
+          correct: this.state.correctCount,
+          wrong: this.state.wrongCount,
+          points: this.state.pointsCount,
+          totalPoints: this.state.totalPoints
+        }
+      })
+
+    } else {
+      this.setState( (state) => {
+        return {
+          availableIds: updatedIndexes,
+          activeQuestionId: nextId,
+          answered: false,
+          results: resultsShow
+        }
+      })
+    }
+
+
   }
 
   componentWillUnmount(){
@@ -122,17 +137,14 @@ class Exam extends React.Component {
 
     if(this.state.timer < 1 || (this.state.correctCount+this.state.wrongCount) == this.state.totalCount) {
       clearInterval(interval)
-      setTimeout( () => {
-        this.props.navigation.popToTop()
-      }, 10000)
+      //setTimeout( () => {
+        //this.props.navigation.popToTop()
+      //}, 10000)
     }
 
     return (
-      <ScrollView style={[
-          styles.container,
-          { backgroundColor: this.props.navigation.getParam("color") }
-        ]}
-      >
+      <ImageBackground source={bgImage} style={styles.bg} resizeMode="cover">
+      <ScrollView style={styles.container}>
         <StatusBar barStyle="light-content" />
 
         {!this.state.results ?
@@ -159,18 +171,8 @@ class Exam extends React.Component {
         </SafeAreaView>
         : <SafeAreaView style={styles.safearea}></SafeAreaView>}
 
-        <Results
-          results={{
-            isExam: true,
-            total: this.state.totalCount,
-            correct: this.state.correctCount,
-            wrong: this.state.wrongCount,
-            points: this.state.pointsCount,
-            totalPoints: this.state.totalPoints
-          }}
-          visible={this.state.results}
-        />
       </ScrollView>
+      </ImageBackground>
     )
   }
 }

vds-app/App/screens/Quiz.js

@@ -2,8 +2,6 @@ import React from "react"
 import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, ImageBackground } from "react-native"
 
 import { Button, ButtonContainer } from "../components/Button"
-//import { Alert } from "../components/Alert"
-import { Results } from "../components/Results"
 import { colors } from "../components/Variables"
 
 const bgImage = require("../assets/bg.jpg")
@@ -28,7 +26,7 @@ const styles = StyleSheet.create({
   bg: {
     width: "100%",
     height: "100%"
-  },
+  }
 })
 
 class Quiz extends React.Component {
@@ -71,26 +69,33 @@ class Quiz extends React.Component {
   }
 
   nextQuestion = () => {
-    this.setState( (state) => {
-      const updatedIndexes = state.availableIds.filter( item => item != state.activeQuestionId)
-      const nextId = updatedIndexes[Math.floor(Math.random() * updatedIndexes.length)]
-      let resultsShow = false
-
-      if (!updatedIndexes.length) {
-        resultsShow = true
-        setTimeout( () => {
-          this.props.navigation.popToTop()
-        }, 5000)
-      }
 
-      return {
-        //totalCount: updatedIndexes.length,
-        availableIds: updatedIndexes,
-        activeQuestionId: nextId,
-        answered: false,
-        results: resultsShow
-      }
-    })
+    const updatedIndexes = this.state.availableIds.filter( item => item != this.state.activeQuestionId)
+    const nextId = updatedIndexes[Math.floor(Math.random() * updatedIndexes.length)]
+    let resultsShow = (this.state.timer <= 1 || (this.state.correctCount+this.state.wrongCount) == this.state.totalCount) ? true : false
+
+    if (!updatedIndexes.length) {
+      this.props.navigation.navigate("Results", {
+        results: {
+          isExam: false,
+          total: this.state.totalCount,
+          correct: this.state.correctCount,
+          wrong: this.state.wrongCount,
+          points: this.state.pointsCount,
+          totalPoints: this.state.totalPoints
+        }
+      })
+
+    } else {
+      this.setState( (state) => {
+        return {
+          availableIds: updatedIndexes,
+          activeQuestionId: nextId,
+          answered: false,
+          results: resultsShow
+        }
+      })
+    }
   }
 
   render() {
@@ -124,18 +129,6 @@ class Quiz extends React.Component {
           </Text>
         </SafeAreaView>
         : <SafeAreaView></SafeAreaView>}
-
-        <Results
-          results={{
-            isExam: false,
-            total: this.state.totalCount,
-            correct: this.state.correctCount,
-            wrong: this.state.wrongCount,
-            points: this.state.pointsCount,
-            totalPoints: this.state.totalPoints
-          }}
-          visible={this.state.results}
-        />
       </ScrollView>
       </ImageBackground>
     )

vds-app/App/screens/Results.js

@@ -0,0 +1,155 @@
+import React from "react"
+import { View, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image, BackHandler} from "react-native"
+
+import { Button, ButtonContainer } from "../components/Button"
+import { colors, texts } from "../components/Variables"
+
+const screen = Dimensions.get("window")
+const header = require("../assets/header.png")
+const maxTime = 0 // 10
+let interval = null
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.dark_blue,
+    flex: 1
+  },
+  safearea: {
+    flex: 1,
+    marginTop: 0,
+    justifyContent: "space-between",
+    paddingHorizontal: 20
+  },
+  headerContainer: {
+    marginTop: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    height: 150
+  },
+  header: {
+    width: "100%"
+  },
+  box: {
+    position: "absolute",
+    top: (screen.height/2)-220,
+    width: screen.width-80,
+    left: 40,
+    borderRadius: 15,
+    backgroundColor: colors.white_alpha,
+    borderColor: colors.white,
+    borderWidth: 4,
+    paddingVertical: 30
+  },
+  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: {
+    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 = () => {
+    this.props.navigation.navigate("Splash", {})
+    return true;
+  }
+
+  render() {
+
+    const currentResults = this.props.navigation.getParam("results")
+    const percentage = currentResults.total ? (100/currentResults.total) * currentResults.correct : 0
+    let resultStyle = currentResults.points >= 80 ? currentResults.points >= 85 ? styles.correct : styles.unsafe : styles.wrong
+
+    if(!currentResults.isExam) {
+      resultStyle = percentage >= 80 ? percentage >= 85 ? styles.correct : styles.unsafe : styles.wrong
+    }
+
+    console.log(currentResults)
+
+    /*
+    setTimeout( () => {
+      this.props.navigation.navigate("Splash", {
+        title: texts.section_quizzes,
+        color: colors.blue
+      })
+    }, 5000)
+    */
+
+    return (
+      <View style={styles.container} >
+        <View style={styles.headerContainer} >
+          <Image source={header} style={styles.header} resizeMode="contain" />
+        </View>
+
+        <SafeAreaView style={styles.safearea}>
+          <View style={styles.box}>
+            <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>
+            <Text style={styles.text}>
+              <Text style={styles.textLabel}>{`${texts.points}: ${currentResults.points}/${currentResults.totalPoints}`}</Text>
+            </Text>
+
+            {currentResults.isExam ?
+              <Text style={[styles.textSmall, resultStyle]}>
+                {currentResults.points >= 80 ? currentResults.points >= 85 ? texts.exam_passed : texts.exam_needs_oral : texts.exam_not_passed}
+              </Text> : <Text/>
+            }
+          </View>
+
+        </SafeAreaView>
+
+      </View>
+    )
+  }
+}
+
+export default Results