11 changed files with 506 additions and 174 deletions
@ -0,0 +1,200 @@ |
|||
import React from "react" |
|||
import { View, ScrollView, StyleSheet, StatusBar, Text, Dimensions, Image, ImageBackground, BackHandler } from "react-native" |
|||
import SafeAreaView from 'react-native-safe-area-view' |
|||
import AsyncStorage from '@react-native-async-storage/async-storage' |
|||
|
|||
import { Button, ButtonContainer } from "../components/Button" |
|||
import { Banner } from "../components/Banner" |
|||
import { colors, texts, examScheme, credentials } 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 screen = Dimensions.get("window") |
|||
const header = require("../assets/header.png") |
|||
const bgImage = require("../assets/bg.jpg") |
|||
|
|||
const allQuestions = { |
|||
aerodynamics: aerodynamicsQuestions, |
|||
firstAid: firstAidQuestions, |
|||
flightSafety: flightSafetyQuestions, |
|||
instruments: instrumentsQuestions, |
|||
legislation: legislationQuestions, |
|||
materials: materialsQuestions, |
|||
meteorology: meteorologyQuestions, |
|||
physiopathology: physiopathologyQuestions, |
|||
pilotingTechniques: pilotingTechniquesQuestions |
|||
} |
|||
|
|||
const styles = StyleSheet.create({ |
|||
container: { |
|||
backgroundColor: colors.blue, |
|||
flex: 1 |
|||
}, |
|||
safearea: { |
|||
flex: 1, |
|||
marginTop: 0, |
|||
justifyContent: "space-between", |
|||
paddingHorizontal: 20, |
|||
paddingBottom: 40 |
|||
}, |
|||
headerContainer: { |
|||
marginTop: -40, |
|||
alignItems: "center", |
|||
justifyContent: "center", |
|||
width: "100%", |
|||
height: screen.width/1.5 |
|||
}, |
|||
header: { |
|||
width: "100%" |
|||
}, |
|||
box: { |
|||
marginTop: 30, |
|||
borderColor: colors.black_alpha, |
|||
borderWidth: 1, |
|||
padding: 15, |
|||
borderRadius: 5, |
|||
backgroundColor: colors.white_alpha |
|||
}, |
|||
text: { |
|||
color: colors.white, |
|||
fontSize: 20, |
|||
textAlign: "center", |
|||
fontWeight: "600", |
|||
paddingTop: 0 |
|||
}, |
|||
textCode: { |
|||
color: colors.white, |
|||
fontSize: 12, |
|||
textAlign: "center", |
|||
fontWeight: "500", |
|||
paddingTop: 10, |
|||
paddingBottom: 0 |
|||
}, |
|||
textBig: { |
|||
color: colors.white, |
|||
fontSize: 22, |
|||
textAlign: "center", |
|||
fontWeight: "400", |
|||
paddingBottom: 15, |
|||
textTransform: "uppercase", |
|||
textShadowColor: 'rgba(0, 0, 0, 0.75)', |
|||
textShadowOffset: {width: -1, height: 1}, |
|||
textShadowRadius: 10 |
|||
}, |
|||
bg: { |
|||
width: "100%", |
|||
height: "100%" |
|||
}, |
|||
bannerContainer: { |
|||
flex: 1, |
|||
alignItems: "center", |
|||
justifyContent: "center" |
|||
} |
|||
}) |
|||
|
|||
class RecapTrueFalse extends React.Component { |
|||
|
|||
componentDidMount() { |
|||
this.backHandler = BackHandler.addEventListener( 'hardwareBackPress', this.handleBackButton) |
|||
AsyncStorage.getItem('storeWrongAnswers').then((value) => { |
|||
//console.log(value)
|
|||
}) |
|||
} |
|||
|
|||
componentWillUnmount() { |
|||
this.backHandler?.remove() |
|||
} |
|||
|
|||
handleBackButton = () => { |
|||
|
|||
let tmpQuestions = [] |
|||
let fullQuestions = [] |
|||
|
|||
examScheme.forEach( (elem) => { |
|||
let currentSection = allQuestions[elem.section] |
|||
for(let i=0; i<currentSection.length; i++) { |
|||
fullQuestions.push(currentSection[i]) |
|||
} |
|||
}) |
|||
|
|||
for(let i=0; i<10; i++) { |
|||
const currentIndex = Math.floor(Math.random() * fullQuestions.length) |
|||
tmpQuestions.push(fullQuestions[currentIndex]) |
|||
fullQuestions = fullQuestions.filter( (item, index) => index != currentIndex) |
|||
} |
|||
|
|||
this.props.navigation.navigate("Splash", { |
|||
trueFalseQuestions: tmpQuestions |
|||
}) |
|||
return true |
|||
} |
|||
|
|||
render() { |
|||
|
|||
const questions = this.props.route?.params?.wrongAnswers || [] |
|||
|
|||
|
|||
return ( |
|||
<View style={styles.container} > |
|||
<View style={styles.headerContainer} > |
|||
<Image source={header} style={styles.header} resizeMode="contain" /> |
|||
</View> |
|||
|
|||
<Text style={styles.textBig}>{texts.recapTitle}</Text> |
|||
|
|||
<ScrollView> |
|||
<SafeAreaView style={styles.safearea}> |
|||
{questions.map( (question, index) => ( |
|||
<View style={styles.box} key={question.id}> |
|||
<Text style={styles.textCode}>{question.id}</Text> |
|||
<Text style={styles.text}>{question.question}</Text> |
|||
|
|||
<ButtonContainer> |
|||
{question.answers.map( (answer, index) => { |
|||
if(question.clicked == answer.id) { |
|||
return ( |
|||
<Button |
|||
noBorder={true} |
|||
key={answer.id} |
|||
text={answer.text} |
|||
colorize={{id: answer.id, clicked: question.clicked, answered: true, isCorrect: answer.correct}} |
|||
/> |
|||
)} |
|||
} |
|||
)} |
|||
</ButtonContainer> |
|||
</View> |
|||
))} |
|||
|
|||
<View style={styles.button}> |
|||
<Button |
|||
color={colors.white_alpha2} |
|||
hasShadow={true} |
|||
hasBg={true} |
|||
text={texts.restart} |
|||
onPress={() => {this.handleBackButton()} |
|||
} |
|||
/> |
|||
</View> |
|||
</SafeAreaView> |
|||
|
|||
<View style={styles.bannerContainer}> |
|||
<Banner /> |
|||
</View> |
|||
</ScrollView> |
|||
|
|||
</View> |
|||
|
|||
) |
|||
} |
|||
} |
|||
|
|||
export default RecapTrueFalse |
|||
Loading…
Reference in new issue