simulation alert

vds-app/App/components/Results.js

@@ -18,8 +18,8 @@ const styles = StyleSheet.create({
   box: {
     backgroundColor: colors.green_alpha,
     width: screen.width / 1.1,
-    height: screen.height / 2,
-    borderRadius: 5,
+    height: 320,
+    borderRadius: 15,
     borderColor: colors.white_alpha,
     borderWidth: 5,
     alignItems: "center",
@@ -28,8 +28,8 @@ const styles = StyleSheet.create({
   boxWrong: {
     backgroundColor: colors.red_alpha,
     width: screen.width / 1.1,
-    height: screen.height / 2,
-    borderRadius: 5,
+    height: 320,
+    borderRadius: 15,
     borderColor: colors.white_alpha,
     borderWidth: 5,
     alignItems: "center",
@@ -38,9 +38,9 @@ const styles = StyleSheet.create({
   boxUnsafe: {
     backgroundColor: colors.orange,
     width: screen.width / 1.1,
-    height: screen.height / 2,
-    borderRadius: 5,
-    borderColor: colors.orange,
+    height: 320,
+    borderRadius: 15,
+    borderColor: colors.white_alpha,
     borderWidth: 5,
     alignItems: "center",
     justifyContent: "center"
@@ -51,7 +51,7 @@ const styles = StyleSheet.create({
     textAlign: "center",
     letterSpacing: -0.02,
     fontWeight: "500",
-    lineHeight: 90
+    lineHeight: 50
   },
   textLabel: {
     paddingHorizontal: 20,
@@ -68,10 +68,9 @@ const styles = StyleSheet.create({
   }
 })
 
-export const Results = ({ correct, wrong, visible }) => {
+export const Results = ({ total, correct, wrong, visible }) => {
   if (!visible) return null
 
-  const total = wrong+correct
   const percentage = total ? (100/total) * correct : 0
   const boxStyle = percentage >= 80 ? percentage >= 85 ? styles.box : styles.boxUnsafe : styles.boxWrong
   const percentStyle = percentage >= 80 ? percentage >= 85 ? styles.correct : styles.unsafe : styles.wrong
@@ -80,22 +79,13 @@ export const Results = ({ correct, wrong, visible }) => {
     <View style={styles.container}>
       <View style={boxStyle}>
         <Text style={styles.text}>
-          <Text style={styles.textLabel}>{`${texts.corrects}: `}</Text>
-          <Text >
-            {`${correct}`}
-          </Text>
+          <Text style={styles.textLabel}>{`${texts.corrects}: ${correct}`}</Text>
         </Text>
         <Text style={styles.text}>
-          <Text style={styles.textLabel}>{`${texts.wrongs}: `}</Text>
-          <Text>
-            {`${wrong}`}
-          </Text>
+          <Text style={styles.textLabel}>{`${texts.wrongs}: ${wrong}`}</Text>
         </Text>
         <Text style={styles.text}>
-          <Text style={styles.textLabel}>{`${texts.percentage}: `}</Text>
-          <Text >
-            {`${Math.round(percentage)}%`}
-          </Text>
+          <Text style={styles.textLabel}>{`${texts.percentage}: ${Math.round(percentage)}%`}</Text>
         </Text>
       </View>
     </View>

vds-app/App/components/RowItem.js

@@ -7,8 +7,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 15,
     paddingVertical: 20,
     backgroundColor: colors.blue,
-    borderBottomColor: colors.dark_blue,
-    borderBottomWidth: 1
+    marginBottom: 1
   },
   text: {
     fontSize: 18,
@@ -17,10 +16,10 @@ const styles = StyleSheet.create({
   }
 })
 
-export const RowItem = ({ onPress = () => {}, name, color }) => (
+export const RowItem = ({ onPress = () => {}, name, color, textColor }) => (
   <TouchableOpacity onPress={onPress} activeOpacity={0.8}>
     <View style={[styles.row, { backgroundColor: color }]}>
-      <Text style={styles.text}>{name}</Text>
+      <Text style={[styles.text, { color: textColor }]}>{name}</Text>
     </View>
   </TouchableOpacity>
 )

vds-app/App/components/Variables.js

@@ -15,7 +15,7 @@ export const colors = {
 
 export const texts = {
   quizzes: "Seleziona un quiz",
-  exam: "Simulazione esame",
+  exam: "Simulazione esame (30 domande in 30min)",
   corrects: "Corrette",
   wrongs: "Sbagliate",
   percentage: "Percentuale",

vds-app/App/screens/Exam.js

@@ -36,7 +36,7 @@ const styles = StyleSheet.create({
 })
 
 let interval = null
-const maxTime = 10
+const maxTime = 10 // 1800
 
 class Exam extends React.Component {
 
@@ -51,7 +51,7 @@ class Exam extends React.Component {
     answered: false,
     answerCorrect: false,
     results: false,
-    timer: 0
+    timer: maxTime
   }
 
   answer = correct => {
@@ -79,7 +79,7 @@ class Exam extends React.Component {
     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 >= maxTime-1 || false
+      let resultsShow = this.state.timer <= 1 || false
 
       if (!updatedIndexes.length) {
         resultsShow = true
@@ -101,18 +101,18 @@ class Exam extends React.Component {
     const questions = this.props.navigation.getParam("questions", [])
     const question = questions.filter(item => item.id == this.state.activeQuestionId)[0] || questions[0]
 
-    if(this.state.timer==0) {
+    if(this.state.timer==maxTime) {
       interval = setInterval( () => {
         this.setState( (state) => {
           return {
-            timer: this.state.timer+1,
-            results: this.state.timer >= maxTime-1 || false
+            timer: this.state.timer-1,
+            results: this.state.timer <= 1 || false
           }
         })
       }, 1000)
     }
 
-    if(this.state.timer >= maxTime) {
+    if(this.state.timer < 1) {
       clearInterval(interval)
       setTimeout( () => {
         this.props.navigation.popToTop()
@@ -151,6 +151,7 @@ class Exam extends React.Component {
           visible={this.state.answered}
         />
         <Results
+          total={this.state.totalCount}
           correct={this.state.correctCount}
           wrong={this.state.wrongCount}
           visible={this.state.results}

vds-app/App/screens/Quiz.js

@@ -121,6 +121,7 @@ class Quiz extends React.Component {
           visible={this.state.answered}
         />
         <Results
+          total={this.state.totalCount}
           correct={this.state.correctCount}
           wrong={this.state.wrongCount}
           visible={this.state.results}

vds-app/App/screens/QuizIndex.js

@@ -19,82 +19,75 @@ import { examQuestions } from "../components/ExamQuestions"
 export default ({ navigation }) => (
   <ScrollView style={[{ backgroundColor: colors.dark_blue }]}>
     <StatusBar barStyle="dark-content" />
-    <RowItem name={texts.aerodynamics} color={colors.blue} onPress={() =>
+    <RowItem name={texts.aerodynamics} color={colors.blue} textColor={colors.white} onPress={()=>
       navigation.navigate("Quiz", {
         title: texts.aerodynamics,
         questions: aerodynamicsQuestions,
         color: colors.blue
       })}/>
 
-    <RowItem name={texts.first_aid} color={colors.blue} onPress={() =>
+    <RowItem name={texts.first_aid} color={colors.blue} textColor={colors.white} onPress={()=>
       navigation.navigate("Quiz", {
         title: texts.first_aid,
         questions: firstAidQuestions,
         color: colors.blue
       })}/>
 
-    <RowItem name={texts.flight_safety} color={colors.blue} onPress={() =>
+    <RowItem name={texts.flight_safety} color={colors.blue} textColor={colors.white} onPress={()=>
       navigation.navigate("Quiz", {
         title: texts.flight_safety,
         questions: flightSafetyQuestions,
         color: colors.blue
       })}/>
 
-    <RowItem name={texts.instruments} color={colors.blue} onPress={() =>
+    <RowItem name={texts.instruments} color={colors.blue} textColor={colors.white} onPress={()=>
       navigation.navigate("Quiz", {
         title: texts.instruments,
         questions: instrumentsQuestions,
         color: colors.blue
       })}/>
 
-    <RowItem name={texts.legislation} color={colors.blue} onPress={() =>
+    <RowItem name={texts.legislation} color={colors.blue} textColor={colors.white} onPress={()=>
       navigation.navigate("Quiz", {
         title: texts.legislation,
         questions: legislationQuestions,
         color: colors.blue
       })}/>
 
-    <RowItem name={texts.materials} color={colors.blue} onPress={() =>
+    <RowItem name={texts.materials} color={colors.blue} textColor={colors.white} onPress={()=>
       navigation.navigate("Quiz", {
         title: texts.materials,
         questions: materialsQuestions,
         color: colors.blue
       })}/>
 
-    <RowItem name={texts.meteorology} color={colors.blue} onPress={() =>
+    <RowItem name={texts.meteorology} color={colors.blue} textColor={colors.white} onPress={()=>
       navigation.navigate("Quiz", {
         title: texts.meteorology,
         questions: meteorologyQuestions,
         color: colors.blue
       })}/>
 
-    <RowItem name={texts.physiopathology} color={colors.blue} onPress={() =>
+    <RowItem name={texts.physiopathology} color={colors.blue} textColor={colors.white} onPress={()=>
       navigation.navigate("Quiz", {
         title: texts.physiopathology,
         questions: physiopathologyQuestions,
         color: colors.blue
       })}/>
 
-    <RowItem name={texts.piloting_techniques} color={colors.blue} onPress={() =>
+    <RowItem name={texts.piloting_techniques} color={colors.blue} textColor={colors.white} onPress={()=>
       navigation.navigate("Quiz", {
         title: texts.piloting_techniques,
         questions: pilotingTechniquesQuestions,
         color: colors.blue
       })}/>
 
-    <RowItem name={texts.exam} color={colors.blue} onPress={() =>
+    <RowItem name={texts.exam} color={colors.yellow} textColor={colors.black} onPress={() =>
       navigation.navigate("Exam", {
         title: texts.exam,
         questions: examQuestions,
         color: colors.blue
       })}/>
 
-    <RowItem name="TEST" color={colors.orange} onPress={() =>
-      navigation.navigate("Quiz", {
-        title: "TEST",
-        questions: testQuestions,
-        color: colors.blue
-      })}/>
-
   </ScrollView>
 )