add timer

vds-app/App/components/Results.js

@@ -72,7 +72,7 @@ export const Results = ({ correct, wrong, visible }) => {
   if (!visible) return null
 
   const total = wrong+correct
-  const percentage = (100/total) * 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
 

vds-app/App/screens/Exam.js

@@ -20,6 +20,14 @@ const styles = StyleSheet.create({
     paddingVertical: 20,
     marginTop: 20,
   },
+  timer: {
+    color: colors.white,
+    fontSize: 30,
+    textAlign: "center",
+    fontWeight: "600",
+    paddingVertical: 10,
+    marginTop: 10,
+  },
   safearea: {
     flex: 1,
     marginTop: 20,
@@ -27,6 +35,9 @@ const styles = StyleSheet.create({
   }
 })
 
+let interval = null
+const maxTime = 10
+
 class Exam extends React.Component {
 
   state = {
@@ -39,7 +50,8 @@ class Exam extends React.Component {
                       ].id,
     answered: false,
     answerCorrect: false,
-    results: false
+    results: false,
+    timer: 0
   }
 
   answer = correct => {
@@ -67,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 = false
+      let resultsShow = this.state.timer >= maxTime-1 || false
 
       if (!updatedIndexes.length) {
         resultsShow = true
@@ -77,7 +89,6 @@ class Exam extends React.Component {
       }
 
       return {
-        //totalCount: updatedIndexes.length,
         availableIds: updatedIndexes,
         activeQuestionId: nextId,
         answered: false,
@@ -90,6 +101,24 @@ 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) {
+      interval = setInterval( () => {
+        this.setState( (state) => {
+          return {
+            timer: this.state.timer+1,
+            results: this.state.timer >= maxTime-1 || false
+          }
+        })
+      }, 1000)
+    }
+
+    if(this.state.timer >= maxTime) {
+      clearInterval(interval)
+      setTimeout( () => {
+        this.props.navigation.popToTop()
+      }, 5000)
+    }
+
     return (
       <ScrollView style={[
           styles.container,
@@ -98,6 +127,7 @@ class Exam extends React.Component {
       >
         <StatusBar barStyle="light-content" />
         <SafeAreaView style={styles.safearea}>
+          <Text style={styles.timer}>{new Date(this.state.timer * 1000).toISOString().substr(11, 8)}</Text>
           <View>
             <Text style={styles.text}>{question.question}</Text>