add specific question selector

vds-app/App/components/Variables.js

@@ -80,7 +80,8 @@ export const texts = {
   true: "Vero",
   false: "Falso",
   trueFalse: "Test Vero/Falso",
-  trueFalseSubtitle: "10 domande casuali con risposte Vero/Falso"
+  trueFalseSubtitle: "10 domande casuali con risposte Vero/Falso",
+  goToQuestion: "Vai ad una domanda specifica..."
 }
 
 export const examScheme = [

vds-app/App/screens/Quiz.js

@@ -1,9 +1,9 @@
 import React from "react"
-import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, ImageBackground, BackHandler, AsyncStorage } from "react-native"
+import { View, ScrollView, Picker, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, ImageBackground, BackHandler, AsyncStorage } from "react-native"
 import { AdMobBanner } from "expo-ads-admob"
 
 import { Button, ButtonContainer } from "../components/Button"
-import { colors, credentials } from "../components/Variables"
+import { texts, colors, credentials } from "../components/Variables"
 
 const bgImage = require("../assets/bg.jpg")
 const screen = Dimensions.get("window")
@@ -47,6 +47,20 @@ const styles = StyleSheet.create({
     width: "100%",
     height: "100%"
   },
+  dropdown: {
+    color: colors.white,
+    fontSize: 16,
+    width: "100%",
+    textAlign: "center",
+    fontWeight: "600",
+    backgroundColor: 'transparent',
+  },
+  dropdownItem: {
+    color: colors.white,
+    fontSize: 20,
+    textAlign: "center",
+    fontWeight: "600"
+  },
   bannerContainer: {
     flex: 1,
     alignItems: "center",
@@ -70,11 +84,12 @@ class Quiz extends React.Component {
     totalPoints: 0,
     totalCount: this.props.navigation.getParam("questions", []).length,
     availableIds: this.props.navigation.getParam("questions", []).map(a => a.id),
+    availableQuestions: this.props.navigation.getParam("questions", []),
     activeQuestionId: this.props.navigation.getParam("questions", [])[
                         this.props.navigation.getParam("randomQuestions") ?
                           Math.floor(Math.random() * this.props.navigation.getParam("questions", []).length) : 0
                       ].id,
-
+    minIndex: 0,
     answered: false,
     answerCorrect: false,
     results: false,
@@ -139,7 +154,10 @@ class Quiz extends React.Component {
   nextQuestion = () => {
 
     const updatedIndexes = this.state.availableIds.filter( item => item != this.state.activeQuestionId)
-    const nextId = this.props.navigation.getParam("randomQuestions") ? updatedIndexes[Math.floor(Math.random() * updatedIndexes.length)] : updatedIndexes[0]
+    const updatedQuestions = this.state.availableQuestions.filter( item => updatedIndexes.indexOf(item.id) > -1)
+    const nextId = this.props.navigation.getParam("randomQuestions") ?
+                    updatedIndexes[Math.floor(Math.random() * updatedIndexes.length)] :
+                    updatedIndexes[this.state.minIndex]
     let resultsShow = (this.state.timer <= 1 || (this.state.correctCount+this.state.wrongCount) == this.state.totalCount) ? true : false
 
     if (!updatedIndexes.length) {
@@ -157,9 +175,12 @@ class Quiz extends React.Component {
       })
 
     } else {
+
       this.setState( (state) => {
         return {
           availableIds: updatedIndexes,
+          availableQuestions: updatedQuestions,
+          minIndex: this.state.minIndex >= updatedIndexes.length - 1 ? 0 : this.state.minIndex,
           activeQuestionId: nextId,
           answered: false,
           results: resultsShow
@@ -168,6 +189,17 @@ class Quiz extends React.Component {
     }
   }
 
+  jumpTo = (questionId, itemIndex) => {
+    if(itemIndex) {
+      this.setState( (state) => {
+        return {
+          activeQuestionId: questionId,
+          minIndex: itemIndex-1
+        }
+      })
+    }
+  }
+
   render() {
     const questions = this.props.navigation.getParam("questions", [])
     const question = questions.filter(item => item.id == this.state.activeQuestionId)[0] || questions[0]
@@ -198,10 +230,27 @@ class Quiz extends React.Component {
                 <Text style={styles.text}>
                   {`${this.state.correctCount+this.state.wrongCount}/${this.state.totalCount}`}
                 </Text>
+
+                <Picker
+                  label={texts.goToQuestion}
+                  style={styles.dropdown}
+                  itemStyle={styles.dropdownItem}
+                  onValueChange={(itemValue, itemIndex) => this.jumpTo(itemValue, itemIndex)}
+                >
+
+                  <Picker.Item key={`itemPlaceholder`} label={texts.goToQuestion} value={0} />
+                  {this.state.availableQuestions.map( (item, index) => (
+                    <Picker.Item key={`item${item.id}`} label={`${item.id} - ${item.question}`} value={item.id} />
+                  ))}
+                </Picker>
+
               </SafeAreaView>
               : <SafeAreaView></SafeAreaView>}
+
             </ScrollView>
           </View>
+
+
         </View>
         <View style={styles.bannerContainer}>
           <AdMobBanner