12 changed files with 288 additions and 261 deletions
@ -1,55 +0,0 @@ |
|||
import React from "react" |
|||
import { View, StyleSheet, Dimensions, Image } from "react-native" |
|||
import { colors } from "../components/Variables" |
|||
|
|||
const screen = Dimensions.get("window") |
|||
|
|||
const styles = StyleSheet.create({ |
|||
container: { |
|||
position: "absolute", |
|||
top: 0, |
|||
bottom: 0, |
|||
left: 0, |
|||
right: 0, |
|||
flex: 1, |
|||
alignItems: "center", |
|||
justifyContent: "center" |
|||
}, |
|||
circle: { |
|||
backgroundColor: colors.red, |
|||
width: screen.width / 2, |
|||
height: screen.width / 2, |
|||
borderRadius: screen.width / 2, |
|||
alignItems: "center", |
|||
justifyContent: "center" |
|||
}, |
|||
circleCorrect: { |
|||
backgroundColor: colors.green |
|||
}, |
|||
icon: { |
|||
width: screen.width / 3 |
|||
} |
|||
}) |
|||
|
|||
export const Alert = ({ correct, visible }) => { |
|||
if (!visible) return null |
|||
|
|||
|
|||
const icon = correct |
|||
? require("../assets/check.png") |
|||
: require("../assets/close.png") |
|||
|
|||
const circleStyles = [styles.circle] |
|||
|
|||
if (correct) { |
|||
circleStyles.push(styles.circleCorrect) |
|||
} |
|||
|
|||
return ( |
|||
<View style={styles.container}> |
|||
<View style={circleStyles}> |
|||
<Image source={icon} style={styles.icon} resizeMode="contain" /> |
|||
</View> |
|||
</View> |
|||
) |
|||
} |
|||
@ -1,122 +0,0 @@ |
|||
import React from "react" |
|||
import { View, StyleSheet, Dimensions, Text, Image, ImageBackground } from "react-native" |
|||
import { colors, texts } from "../components/Variables" |
|||
|
|||
const screen = Dimensions.get("window") |
|||
const imgError = require("../assets/error.jpg") |
|||
const imgUnsafe = require("../assets/unsafe.jpg") |
|||
const imgPassed = require("../assets/passed.jpg") |
|||
|
|||
const styles = StyleSheet.create({ |
|||
container: { |
|||
top: 0, |
|||
left: 0, |
|||
flex: 1, |
|||
alignItems: "center", |
|||
justifyContent: "center", |
|||
height: screen.height-80, |
|||
width: screen.width, |
|||
backgroundColor: colors.white_alpha |
|||
}, |
|||
box: { |
|||
position: "absolute", |
|||
top: (screen.height/2)-220, |
|||
width: screen.width-50, |
|||
borderRadius: 15, |
|||
backgroundColor: colors.white_alpha, |
|||
borderColor: colors.white, |
|||
borderWidth: 4, |
|||
paddingVertical: 30 |
|||
}, |
|||
text: { |
|||
color: colors.white, |
|||
fontSize: 22, |
|||
textAlign: "center", |
|||
fontWeight: "400", |
|||
lineHeight: 40, |
|||
textShadowColor: 'rgba(0, 0, 0, 0.75)', |
|||
textShadowOffset: {width: -1, height: 1}, |
|||
textShadowRadius: 10 |
|||
}, |
|||
textSmall: { |
|||
marginTop: 20, |
|||
color: colors.white, |
|||
fontSize: 26, |
|||
textAlign: "center", |
|||
fontWeight: "500", |
|||
lineHeight: 30, |
|||
textShadowColor: 'rgba(0, 0, 0, 0.75)', |
|||
textShadowOffset: {width: -1, height: 1}, |
|||
textShadowRadius: 10 |
|||
}, |
|||
textLabel: { |
|||
paddingHorizontal: 20, |
|||
paddingVertical: 20 |
|||
}, |
|||
correct: { |
|||
color: colors.green |
|||
}, |
|||
wrong: { |
|||
color: colors.red |
|||
}, |
|||
unsafe: { |
|||
color: colors.yellow |
|||
}, |
|||
bg: { |
|||
width: "100%", |
|||
height: "100%", |
|||
borderRadius: 5, |
|||
paddingVertical: 50 |
|||
}, |
|||
bgStyle: { |
|||
borderRadius: 0, |
|||
opacity: 0.8, |
|||
borderColor: colors.white_alpha, |
|||
borderWidth: 0 |
|||
} |
|||
}) |
|||
|
|||
export const Results = ({ results, visible }) => { |
|||
if (!visible) return null |
|||
|
|||
//const percentage = results.totalPoints ? (100/results.totalPoints) * results.points : 0
|
|||
const percentage = results.total ? (100/results.total) * results.correct : 0 |
|||
let bgImage = results.points >= 80 ? results.points >= 85 ? imgPassed : imgUnsafe : imgError |
|||
//let imgPanoramaResult = results.points >= 80 ? imgPanorama : imgPanorama2
|
|||
|
|||
if(!results.isExam) { |
|||
bgImage = percentage >= 80 ? percentage >= 85 ? imgPassed : imgUnsafe : imgError |
|||
//imgPanoramaResult = percentage >= 80 ? imgPanorama : imgPanorama2
|
|||
} |
|||
|
|||
return ( |
|||
|
|||
<ImageBackground source={bgImage} style={[styles.bg, styles.container]} resizeMode="cover"> |
|||
|
|||
<View style={styles.box}> |
|||
|
|||
<Text style={styles.text}> |
|||
<Text style={styles.textLabel}>{`${texts.corrects}: ${results.correct}`}</Text> |
|||
</Text> |
|||
<Text style={styles.text}> |
|||
<Text style={styles.textLabel}>{`${texts.wrongs}: ${results.wrong}`}</Text> |
|||
</Text> |
|||
<Text style={styles.text}> |
|||
<Text style={styles.textLabel}>{`${texts.percentage}: ${Math.round(percentage)}%`}</Text> |
|||
</Text> |
|||
<Text style={styles.text}> |
|||
<Text style={styles.textLabel}>{`${texts.points}: ${results.points}/${results.totalPoints}`}</Text> |
|||
</Text> |
|||
|
|||
{results.isExam ? |
|||
<Text style={styles.textSmall}> |
|||
{results.points >= 80 ? results.points >= 85 ? texts.exam_passed : texts.exam_needs_oral : texts.exam_not_passed} |
|||
</Text> : <Text/> |
|||
} |
|||
|
|||
</View> |
|||
|
|||
</ImageBackground> |
|||
|
|||
) |
|||
} |
|||
@ -0,0 +1,185 @@ |
|||
import React from "react" |
|||
import { View, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image, BackHandler} from "react-native" |
|||
|
|||
import { Button, ButtonContainer } from "../components/Button" |
|||
import { colors, texts } from "../components/Variables" |
|||
|
|||
const screen = Dimensions.get("window") |
|||
const header = require("../assets/header.png") |
|||
const maxTime = 0 // 10
|
|||
let interval = null |
|||
|
|||
const styles = StyleSheet.create({ |
|||
container: { |
|||
backgroundColor: colors.dark_blue, |
|||
flex: 1 |
|||
}, |
|||
safearea: { |
|||
flex: 1, |
|||
marginTop: 0, |
|||
justifyContent: "space-between", |
|||
paddingHorizontal: 20 |
|||
}, |
|||
headerContainer: { |
|||
marginTop: 0, |
|||
alignItems: "center", |
|||
justifyContent: "center", |
|||
width: "100%", |
|||
height: 150 |
|||
}, |
|||
header: { |
|||
width: "100%" |
|||
}, |
|||
box: { |
|||
position: "absolute", |
|||
top: screen.width/4, |
|||
left: 40, |
|||
width: screen.width-80, |
|||
borderRadius: 15, |
|||
backgroundColor: colors.white_alpha, |
|||
borderColor: colors.white, |
|||
borderWidth: 4, |
|||
paddingVertical: 30 |
|||
}, |
|||
boxCorrect: { |
|||
borderColor: colors.green, |
|||
}, |
|||
boxWrong: { |
|||
borderColor: colors.red, |
|||
}, |
|||
boxUnsafe: { |
|||
borderColor: colors.orange, |
|||
}, |
|||
button: { |
|||
position: "absolute", |
|||
bottom: 40, |
|||
left: 40, |
|||
width: screen.width-80 |
|||
}, |
|||
text: { |
|||
color: colors.white, |
|||
fontSize: 22, |
|||
textAlign: "center", |
|||
fontWeight: "400", |
|||
lineHeight: 40, |
|||
textShadowColor: 'rgba(0, 0, 0, 0.75)', |
|||
textShadowOffset: {width: -1, height: 1}, |
|||
textShadowRadius: 10 |
|||
}, |
|||
textSmall: { |
|||
marginTop: 20, |
|||
fontSize: 26, |
|||
textAlign: "center", |
|||
fontWeight: "500", |
|||
lineHeight: 30, |
|||
textShadowColor: 'rgba(0, 0, 0, 0.75)', |
|||
textShadowOffset: {width: -1, height: 1}, |
|||
textShadowRadius: 10 |
|||
}, |
|||
textLabel: { |
|||
paddingHorizontal: 20, |
|||
paddingVertical: 20 |
|||
}, |
|||
correct: { |
|||
color: colors.green |
|||
}, |
|||
wrong: { |
|||
color: colors.red |
|||
}, |
|||
unsafe: { |
|||
color: colors.yellow |
|||
} |
|||
}) |
|||
|
|||
class Results extends React.Component { |
|||
|
|||
state = { |
|||
bannerExpanded: true, |
|||
timer: maxTime |
|||
} |
|||
|
|||
componentDidMount() { |
|||
BackHandler.addEventListener('hardwareBackPress', this.handleBackButton) |
|||
} |
|||
|
|||
componentWillUnmount() { |
|||
BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton) |
|||
} |
|||
|
|||
handleBackButton = () => { |
|||
this.props.navigation.navigate("Splash", {}) |
|||
return true; |
|||
} |
|||
|
|||
render() { |
|||
|
|||
const currentResults = this.props.navigation.getParam("results") |
|||
const percentage = currentResults.total ? (100/currentResults.total) * currentResults.correct : 0 |
|||
let resultStyle = currentResults.points >= 80 ? currentResults.points >= 85 ? styles.correct : styles.unsafe : styles.wrong |
|||
let boxStyle = currentResults.points >= 80 ? currentResults.points >= 85 ? styles.boxCorrect : styles.boxUnsafe : styles.boxWrong |
|||
|
|||
if(!currentResults.isExam) { |
|||
resultStyle = percentage >= 80 ? percentage >= 85 ? styles.correct : styles.unsafe : styles.wrong |
|||
boxStyle = percentage >= 80 ? percentage >= 85 ? styles.boxCorrect : styles.boxUnsafe : styles.boxWrong |
|||
} |
|||
|
|||
console.log(currentResults) |
|||
|
|||
/* |
|||
setTimeout( () => { |
|||
this.props.navigation.navigate("Splash", { |
|||
title: texts.section_quizzes, |
|||
color: colors.blue |
|||
}) |
|||
}, 5000) |
|||
*/ |
|||
|
|||
return ( |
|||
<View style={styles.container} > |
|||
<View style={styles.headerContainer} > |
|||
<Image source={header} style={styles.header} resizeMode="contain" /> |
|||
</View> |
|||
|
|||
<SafeAreaView style={styles.safearea}> |
|||
<View style={[styles.box, boxStyle]}> |
|||
<Text style={styles.text}> |
|||
<Text style={styles.textLabel}>{`${texts.corrects}: ${currentResults.correct}`}</Text> |
|||
</Text> |
|||
<Text style={styles.text}> |
|||
<Text style={styles.textLabel}>{`${texts.wrongs}: ${currentResults.wrong}`}</Text> |
|||
</Text> |
|||
<Text style={styles.text}> |
|||
<Text style={styles.textLabel}>{`${texts.percentage}: ${Math.round(percentage)}%`}</Text> |
|||
</Text> |
|||
<Text style={styles.text}> |
|||
<Text style={styles.textLabel}>{`${texts.points}: ${currentResults.points}/${currentResults.totalPoints}`}</Text> |
|||
</Text> |
|||
|
|||
{currentResults.isExam ? |
|||
<Text style={[styles.textSmall, resultStyle]}> |
|||
{currentResults.points >= 80 ? currentResults.points >= 85 ? texts.exam_passed : texts.exam_needs_oral : texts.exam_not_passed} |
|||
</Text> : <Text/> |
|||
} |
|||
</View> |
|||
|
|||
<View style={styles.button}> |
|||
<Button |
|||
text={texts.restart} |
|||
onPress={() => { |
|||
this.props.navigation.navigate("Splash", { |
|||
title: texts.section_quizzes, |
|||
color: colors.blue |
|||
})} |
|||
} |
|||
/> |
|||
</View> |
|||
|
|||
|
|||
</SafeAreaView> |
|||
|
|||
</View> |
|||
) |
|||
} |
|||
} |
|||
|
|||
export default Results |
|||
Loading…
Reference in new issue