From 93db047e170d5087e5478545dfdfa2d6a120ba0c Mon Sep 17 00:00:00 2001 From: Dslak Date: Tue, 5 Nov 2019 15:02:31 +0100 Subject: [PATCH] add Results Screen prevent back --- vds-app/App/components/Alert.js | 55 ---------- vds-app/App/components/Results.js | 121 ---------------------- vds-app/App/components/Variables.js | 9 +- vds-app/App/index.js | 11 ++ vds-app/App/screens/Exam.js | 88 ++++++++-------- vds-app/App/screens/Quiz.js | 61 +++++------ vds-app/App/screens/Results.js | 155 ++++++++++++++++++++++++++++ 7 files changed, 246 insertions(+), 254 deletions(-) delete mode 100644 vds-app/App/components/Alert.js delete mode 100644 vds-app/App/components/Results.js create mode 100644 vds-app/App/screens/Results.js diff --git a/vds-app/App/components/Alert.js b/vds-app/App/components/Alert.js deleted file mode 100644 index 81a83d6..0000000 --- a/vds-app/App/components/Alert.js +++ /dev/null @@ -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 ( - - - - - - ) -} diff --git a/vds-app/App/components/Results.js b/vds-app/App/components/Results.js deleted file mode 100644 index 2ae721b..0000000 --- a/vds-app/App/components/Results.js +++ /dev/null @@ -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 ( - - - - - - - {`${texts.corrects}: ${results.correct}`} - - - {`${texts.wrongs}: ${results.wrong}`} - - - {`${texts.percentage}: ${Math.round(percentage)}%`} - - - {`${texts.points}: ${results.points}/${results.totalPoints}`} - - - {results.isExam ? - - {results.points >= 80 ? results.points >= 85 ? texts.exam_passed : texts.exam_needs_oral : texts.exam_not_passed} - : - } - - - - - - ) -} diff --git a/vds-app/App/components/Variables.js b/vds-app/App/components/Variables.js index f673ca9..c30216e 100644 --- a/vds-app/App/components/Variables.js +++ b/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", diff --git a/vds-app/App/index.js b/vds-app/App/index.js index 4896a85..e87af68 100644 --- a/vds-app/App/index.js +++ b/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 }) => ({ diff --git a/vds-app/App/screens/Exam.js b/vds-app/App/screens/Exam.js index 3e4e20c..f72efc8 100644 --- a/vds-app/App/screens/Exam.js +++ b/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 ( - + + {!this.state.results ? @@ -159,18 +171,8 @@ class Exam extends React.Component { : } - + ) } } diff --git a/vds-app/App/screens/Quiz.js b/vds-app/App/screens/Quiz.js index 5691732..440e0da 100644 --- a/vds-app/App/screens/Quiz.js +++ b/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 { : } - - ) diff --git a/vds-app/App/screens/Results.js b/vds-app/App/screens/Results.js new file mode 100644 index 0000000..cb3a6c7 --- /dev/null +++ b/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 ( + + + + + + + + + {`${texts.corrects}: ${currentResults.correct}`} + + + {`${texts.wrongs}: ${currentResults.wrong}`} + + + {`${texts.percentage}: ${Math.round(percentage)}%`} + + + {`${texts.points}: ${currentResults.points}/${currentResults.totalPoints}`} + + + {currentResults.isExam ? + + {currentResults.points >= 80 ? currentResults.points >= 85 ? texts.exam_passed : texts.exam_needs_oral : texts.exam_not_passed} + : + } + + + + + + ) + } +} + +export default Results