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

import React from "react";
import { View, ScrollView, StyleSheet, Text, ImageBackground, Dimensions, BackHandler } from "react-native";
import SafeAreaView from 'react-native-safe-area-view';

import { Button, ButtonContainer } from "../components/Button";
import { Banner } from "../components/Banner";
import { texts, colors, 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 screen = Dimensions.get("window");

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
  },
  textAnswer: {
    color: colors.white,
    backgroundColor: colors.black_alpha,
    borderColor: colors.white,
    borderWidth: 2,
    fontSize: 18,
    textAlign: "center",
    fontWeight: "400",
    marginTop: 20,
    paddingVertical: 20,
    paddingHorizontal: 20,
    borderRadius: 10
  },
  safearea: {
    flex: 1,
    paddingHorizontal: 20,
    paddingTop: 40,
    justifyContent: "space-between"
  },
  box: {
    width: screen.width,
    paddingVertical: 10,
    overflow: "hidden"
  },
  scrollView: {
    //margin: 10,
    height: screen.height-150
  },

  bg: {
    width: "100%",
    height: "100%"
  },
  bannerContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  }
})


class Quiz extends React.Component {
  state = {
    correctCount: 0,
    wrongCount: 0,
    wrongAnswers: [],
    availableIds: [],
    activeQuestionId: null,
    activeAnswerId: 0,
    clickedAnswer: false,
    answered: false
  };

  componentDidMount() {
    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);

    const questions = this.props.route.params?.questions || [];
    this.setState({
      availableIds: questions.map(q => q.id),
      activeQuestionId: questions.length ? questions[Math.floor(Math.random() * questions.length)].id : null
    });
  }

  componentWillUnmount() {
    this.backHandler?.remove();
  }

  handleBackButton = () => {
    const tmpQuestions = [];
    let fullQuestions = [];

    examScheme.forEach(elem => fullQuestions.push(...allQuestions[elem.section]));

    for (let i = 0; i < 10; i++) {
      const idx = Math.floor(Math.random() * fullQuestions.length);
      tmpQuestions.push(fullQuestions[idx]);
      fullQuestions.splice(idx, 1);
    }

    this.props.navigation.navigate("Splash", { trueFalseQuestions: tmpQuestions });
    return true;
  }

  answer = (answer, correct, id, question) => {
    this.setState(state => {
      const nextState = { answered: true, clickedId: id, clickedAnswer: answer };

      if ((correct && answer) || (!correct && !answer)) {
        nextState.correctCount = state.correctCount + 1;
      } else {
        nextState.wrongCount = state.wrongCount + 1;
        nextState.wrongAnswers = [...state.wrongAnswers, { question: question.question, id: question.id, clicked: question.answers[state.activeAnswerId].id, answers: question.answers }];
      }

      return nextState;
    }, () => setTimeout(this.nextQuestion, 2000));
  }

  nextQuestion = () => {
    const updatedIndexes = this.state.availableIds.filter(id => id !== this.state.activeQuestionId);
    if (!updatedIndexes.length) {
      this.props.navigation.navigate("ResultsTrueFalse", {
        results: {
          isExam: false,
          total: this.state.availableIds.length,
          correct: this.state.correctCount,
          wrong: this.state.wrongCount,
          wrongAnswers: this.state.wrongAnswers
        }
      });
      return;
    }

    const nextId = updatedIndexes[Math.floor(Math.random() * updatedIndexes.length)];
    this.setState({ availableIds: updatedIndexes, activeQuestionId: nextId, activeAnswerId: Math.floor(Math.random() * 3), answered: false });
  }

  render() {
    const questions = this.props.route.params?.questions || [];
    const question = questions.find(q => q.id === this.state.activeQuestionId) || questions[0];
    const randomAnswer = question?.answers[this.state.activeAnswerId];

    return (
      <ImageBackground source={bgImage} style={{ flex: 1 }} resizeMode="cover">
        <ScrollView>
          <SafeAreaView style={styles.safearea}>
            <Text style={styles.textCode}>{question?.id}</Text>
            <Text style={styles.text}>{question?.question}</Text>
            <Text style={styles.textAnswer}>{randomAnswer?.text}</Text>

            <ButtonContainer>
              <Button
                colorize={{id: randomAnswer.id, clicked: this.state.clickedAnswer ? randomAnswer.id : false, answered: this.state.answered, isCorrect: randomAnswer.correct || false}}
                text={texts.true} onPress={() => this.answer(true, randomAnswer?.correct, randomAnswer?.id, question)} />
              <Button
                colorize={{id: randomAnswer.id, clicked: !this.state.clickedAnswer ? randomAnswer.id : false, answered: this.state.answered, isCorrect: !randomAnswer.correct}}
                text={texts.false} onPress={() => this.answer(false, randomAnswer?.correct, randomAnswer?.id, question)} />
            </ButtonContainer>

            <Text style={styles.text}>{`${this.state.correctCount + this.state.wrongCount}/${this.state.availableIds.length}`}</Text>
          </SafeAreaView>
        </ScrollView>
        <Banner />
      </ImageBackground>
    );
  }
}

export default Quiz;