add exam questions filter

vds-app/App/components/Results.js

@@ -25,7 +25,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  boxLooser: {
+  boxWrong: {
     backgroundColor: colors.red_alpha,
     width: screen.width / 1.1,
     height: screen.height / 2,
@@ -35,6 +35,16 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
+  boxUnsafe: {
+    backgroundColor: colors.orange,
+    width: screen.width / 1.1,
+    height: screen.height / 2,
+    borderRadius: 5,
+    borderColor: colors.orange,
+    borderWidth: 5,
+    alignItems: "center",
+    justifyContent: "center"
+  },
   text: {
     color: colors.white,
     fontSize: 25,
@@ -52,6 +62,9 @@ const styles = StyleSheet.create({
   },
   wrong: {
     color: colors.red
+  },
+  unsafe: {
+    color: colors.yellow
   }
 })
 
@@ -60,8 +73,8 @@ export const Results = ({ correct, wrong, visible }) => {
 
   const total = wrong+correct
   const percentage = (100/total) * correct
-  const boxStyle = percentage > 80 ? styles.box : styles.boxLooser
-  const percentStyle = percentage > 80 ? styles.correct : styles.wrong
+  const boxStyle = percentage >= 80 ? percentage >= 85 ? styles.box : styles.boxUnsafe : styles.boxWrong
+  const percentStyle = percentage >= 80 ? percentage >= 85 ? styles.correct : styles.unsafe : styles.wrong
 
   return (
     <View style={styles.container}>

vds-app/App/components/Variables.js

@@ -29,3 +29,15 @@ 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},
+  {section: "flightSafety", questions: 3, points: 4},
+  {section: "instruments", questions: 1, points: 2},
+  {section: "legislation", questions: 4, points: 3},
+  {section: "materials", questions: 1, points: 2},
+  {section: "meteorology", questions: 6, points: 4},
+  {section: "physiopathology", questions: 1, points: 2},
+  {section: "pilotingTechniques", questions: 5, points: 4}
+]

vds-app/App/index.js

@@ -2,6 +2,7 @@ import { createStackNavigator, createAppContainer } from "react-navigation"
 
 import QuizIndex from "./screens/QuizIndex"
 import Quiz from "./screens/Quiz"
+import Exam from "./screens/Exam"
 import { colors, texts} from "./components/Variables"
 
 const MainStack = createStackNavigator({
@@ -26,6 +27,17 @@ const MainStack = createStackNavigator({
         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")
+      }
+    })
   }
 })
 

vds-app/App/screens/Exam.js

@@ -0,0 +1,133 @@
+import React from "react"
+import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView } 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 styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.blue,
+    flex: 1,
+    paddingHorizontal: 20
+  },
+  text: {
+    color: colors.white,
+    fontSize: 20,
+    textAlign: "center",
+    fontWeight: "600",
+    paddingVertical: 20,
+    marginTop: 20,
+  },
+  safearea: {
+    flex: 1,
+    marginTop: 20,
+    justifyContent: "space-between"
+  }
+})
+
+class Exam extends React.Component {
+
+  state = {
+    correctCount: 0,
+    wrongCount: 0,
+    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,
+    answered: false,
+    answerCorrect: false,
+    results: false
+  }
+
+  answer = correct => {
+    this.setState(
+      state => {
+        const nextState = { answered: true }
+
+        if (correct) {
+          nextState.correctCount = state.correctCount + 1
+          nextState.answerCorrect = true
+        } else {
+          nextState.wrongCount = state.wrongCount + 1
+          nextState.answerCorrect = false
+        }
+
+        return nextState
+      },
+      () => {
+        setTimeout(() => this.nextQuestion(), 750)
+      }
+    )
+  }
+
+  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
+      }
+    })
+  }
+
+  render() {
+    const questions = this.props.navigation.getParam("questions", [])
+    const question = questions.filter(item => item.id == this.state.activeQuestionId)[0] || questions[0]
+
+    return (
+      <ScrollView style={[
+          styles.container,
+          { backgroundColor: this.props.navigation.getParam("color") }
+        ]}
+      >
+        <StatusBar barStyle="light-content" />
+        <SafeAreaView style={styles.safearea}>
+          <View>
+            <Text style={styles.text}>{question.question}</Text>
+
+            <ButtonContainer>
+              {question.answers.map(answer => (
+                <Button
+                  key={answer.id}
+                  text={answer.text}
+                  onPress={() => this.answer(answer.correct)}
+                />
+              ))}
+            </ButtonContainer>
+          </View>
+
+          <Text style={styles.text}>
+            {`${this.state.correctCount+this.state.wrongCount}/${this.state.totalCount}`}
+          </Text>
+        </SafeAreaView>
+        <Alert
+          correct={this.state.answerCorrect}
+          visible={this.state.answered}
+        />
+        <Results
+          correct={this.state.correctCount}
+          wrong={this.state.wrongCount}
+          visible={this.state.results}
+        />
+      </ScrollView>
+    )
+  }
+}
+
+export default Exam

vds-app/App/screens/QuizIndex.js

@@ -13,7 +13,34 @@ import physiopathologyQuestions from "../data/physiopathology"
 import pilotingTechniquesQuestions from "../data/pilotingTechniques"
 
 import { RowItem } from "../components/RowItem"
-import { colors, texts } from "../components/Variables"
+import { colors, texts, examScheme } from "../components/Variables"
+
+let examQuestions = []
+const allQuestions = {
+  aerodynamics: aerodynamicsQuestions,
+  firstAid: firstAidQuestions,
+  flightSafety: flightSafetyQuestions,
+  instruments: instrumentsQuestions,
+  legislation: legislationQuestions,
+  materials: materialsQuestions,
+  meteorology: meteorologyQuestions,
+  physiopathology: physiopathologyQuestions,
+  pilotingTechniques: pilotingTechniquesQuestions
+}
+
+const composeExamQuestions = () => {
+  examScheme.forEach( (elem) => {
+    let currentSection = allQuestions[elem.section]
+    for(let i=0; i<elem.questions; i++) {
+      const currentIndex = Math.floor(Math.random() * elem.questions)
+      //currentSection[currentIndex].question = elem.section + currentSection[currentIndex].question
+      examQuestions.push(currentSection[currentIndex])
+      currentSection = currentSection.filter( (item, index) => index != currentIndex)
+    }
+  })
+}
+
+composeExamQuestions()
 
 export default ({ navigation }) => (
   <ScrollView style={[{ backgroundColor: colors.dark_blue }]}>
@@ -82,9 +109,9 @@ export default ({ navigation }) => (
       })}/>
 
     <RowItem name={texts.exam} color={colors.blue} onPress={() =>
-      navigation.navigate("Quiz", {
+      navigation.navigate("Exam", {
         title: texts.exam,
-        questions: pilotingTechniquesQuestions,
+        questions: examQuestions,
         color: colors.blue
       })}/>
 
@@ -92,7 +119,7 @@ export default ({ navigation }) => (
       navigation.navigate("Quiz", {
         title: "TEST",
         questions: testQuestions,
-        color: colors.orange
+        color: colors.blue
       })}/>
 
   </ScrollView>