vds_quiz/vds-app/App/screens/Exam.js

import React from "react"
import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, ImageBackground, BackHandler, AsyncStorage } from "react-native"

import { Button, ButtonContainer } from "../components/Button"
import { colors, texts, examScheme } from "../components/Variables"

import aerodynamicsQuestions from "../data/aerodynamics"
import firstAidQuestions from "../data/firstAid"
import flightSafetyQuestions from "../data/flightSafety"
import instrumentsQuestions from "../data/instruments"
import legislationQuestions from "../data/legislation"
import materialsQuestions from "../data/materials"
import meteorologyQuestions from "../data/meteorology"
import physiopathologyQuestions from "../data/physiopathology"
import pilotingTechniquesQuestions from "../data/pilotingTechniques"

const allQuestions = {
  aerodynamics: aerodynamicsQuestions,
  firstAid: firstAidQuestions,
  flightSafety: flightSafetyQuestions,
  instruments: instrumentsQuestions,
  legislation: legislationQuestions,
  materials: materialsQuestions,
  meteorology: meteorologyQuestions,
  physiopathology: physiopathologyQuestions,
  pilotingTechniques: pilotingTechniquesQuestions
}

const bgImage = require("../assets/bg.jpg")

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  text: {
    color: colors.white,
    fontSize: 20,
    textAlign: "center",
    fontWeight: "600",
    paddingTop: 5,
    paddingBottom: 20
  },
  textCode: {
    color: colors.white,
    fontSize: 12,
    textAlign: "center",
    fontWeight: "500",
    paddingTop: 20,
    paddingBottom: 0
  },
  timer: {
    color: colors.white,
    fontSize: 30,
    textAlign: "center",
    fontWeight: "600",
    paddingVertical: 10,
    marginTop: 30,
    backgroundColor: colors.white_alpha,
    borderRadius: 25,
    textShadowColor: 'rgba(0, 0, 0, 0.45)',
    textShadowOffset: {width: -1, height: 1},
    textShadowRadius: 2
  },
  safearea: {
    flex: 1,
    marginTop: 20,
    paddingHorizontal: 20,
    justifyContent: "space-between"
  },
  bg: {
    width: "100%",
    height: "100%"
  },
})

let interval = null
const maxTime = 1800

class Exam extends React.Component {

  state = {
    correctCount: 0,
    pointsCount: 0,
    totalPoints: 0,
    wrongCount: 0,
    wrongAnswers: [],
    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,
    timer: maxTime
  }

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton)
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton)
  }

  handleBackButton = () => {

    let tmpQuestions = []

    AsyncStorage.getItem('setupData').then((value) => {
      let setupData = JSON.parse(value)

      console.log('handleBackButton setupData',setupData)
      examScheme.forEach( (elem) => {
        let currentSection = setupData.excludeDelta ? allQuestions[elem.section].filter(item => !item.delta) : allQuestions[elem.section]
        for(let i=0; i<elem.questions; i++) {
          const currentIndex = Math.floor(Math.random() * currentSection.length)
          tmpQuestions.push(currentSection[currentIndex])
          currentSection = currentSection.filter( (item, index) => index != currentIndex)
        }
      })

      this.props.navigation.navigate("Splash", {
        examQuestions: tmpQuestions
      })

      return true

    }).done()
  }

  showResults = () => {
    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,
        wrongAnswers: this.state.wrongAnswers
      }
    })
  }

  answer = (correct, id, question) => {
    this.setState(
      state => {
        const nextState = { answered: true, clickedId: id, totalPoints: state.totalPoints + parseInt(question.points)}

        if (correct) {
          nextState.correctCount = state.correctCount + 1
          nextState.pointsCount = state.pointsCount + parseInt(question.points)
          nextState.answerCorrect = true
        } else {
          nextState.wrongCount = state.wrongCount + 1
          nextState.answerCorrect = false
          nextState.wrongAnswers = state.wrongAnswers
          nextState.wrongAnswers.push(
            { question: question.question,
              id: question.id,
              clicked: id,
              answers: question.answers
            }
          )
        }
        return nextState
      },
      () => {
        if(this.state.timer > 1 || (this.state.correctCount+this.state.wrongCount) < this.state.totalCount) {
          setTimeout(() => this.nextQuestion(), correct ? 750 : 3500)
        }
      }
    )

  }

  nextQuestion = () => {

    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.showResults()

    } else {
      this.setState( (state) => {
        return {
          availableIds: updatedIndexes,
          activeQuestionId: nextId,
          answered: false,
          results: resultsShow
        }
      })
    }
  }

  componentWillUnmount(){
    clearInterval(interval)
  }

  render() {
    const questions = this.props.navigation.getParam("questions", [])
    const question = questions.filter(item => item.id == this.state.activeQuestionId)[0] || questions[0]

    if(this.state.timer==maxTime) {
      interval = setInterval( () => {
        this.setState( (state) => {
          return {
            timer: this.state.timer-1,
            results: this.state.timer <= 1 || false
          }
        })
      }, 1000)
    }

    if(this.state.timer < 1 || (this.state.correctCount+this.state.wrongCount) == this.state.totalCount) {
      clearInterval(interval)
      setTimeout ( () => {
        this.showResults()
      }, 1000)
    }

    return (
      <ImageBackground source={bgImage} style={styles.bg} resizeMode="cover">
      <ScrollView style={styles.container}>
        <StatusBar barStyle="light-content" />

        {!this.state.results ?
        <SafeAreaView style={styles.safearea}>
          <Text style={styles.timer}>{new Date(this.state.timer * 1000).toISOString().substr(11, 8)}</Text>
          <View>
            <Text style={styles.textCode}>{question.id}</Text>
            <Text style={styles.text}>{question.question}</Text>

            <ButtonContainer>
              {question.answers.map(answer => (
                <Button
                  key={answer.id}
                  text={answer.text}
                  colorize={{id: answer.id, clicked: this.state.clickedId, answered: this.state.answered, isCorrect: answer.correct}}
                  onPress={() => this.answer(answer.correct, answer.id, question)}
                />
              ))}
            </ButtonContainer>
          </View>

          <Text style={styles.text}>
            {`${this.state.correctCount+this.state.wrongCount}/${this.state.totalCount}`}
          </Text>
        </SafeAreaView>
        : <SafeAreaView style={styles.safearea}></SafeAreaView>}

      </ScrollView>
      </ImageBackground>
    )
  }
}

export default Exam