diff --git a/components/flashcards/Quiz.js b/components/flashcards/Quiz.js
index 8f78511..2ca9cd4 100644
--- a/components/flashcards/Quiz.js
+++ b/components/flashcards/Quiz.js
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
-import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, Animated } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
@@ -33,10 +33,13 @@ class Quiz extends Component {
state = {
questionIndex: 0,
answerQuestion: ANSWER,
- questions: []
+ questions: [],
+ done: false,
+ animationValue: new Animated.Value(1)
}
componentDidMount() {
+
if (this.props.cards.length >= 0) {
this.setState((prevState) => {
return {
@@ -49,6 +52,18 @@ class Quiz extends Component {
}
})
}
+
+ }
+
+ componentDidUpdate() {
+ const { animationValue, done } = this.state;
+
+ if (done) {
+ Animated.sequence([
+ Animated.timing(animationValue, { duration: 200, toValue: 1.3 }),
+ Animated.spring(animationValue, { toValue: 1, friction: 5 })
+ ]).start()
+ }
}
navigateQuestions(step) {
@@ -66,6 +81,9 @@ class Quiz extends Component {
case FORWARD: {
if (questionIndex >= size - 1) {
+ this.setState(() => {
+ lastQuestion: true
+ })
return;
}
@@ -103,6 +121,7 @@ class Quiz extends Component {
answer(status) {
const { questionIndex } = this.state;
+ const size = this.state.questions.length;
let refreshedQuestions = this.state.questions;
refreshedQuestions[questionIndex].correct = status;
@@ -113,6 +132,12 @@ class Quiz extends Component {
answerQuestion: ANSWER
}
});
+
+ if (questionIndex === (size - 1)) {
+ this.done();
+ } else {
+ this.navigateQuestions(FORWARD);
+ }
}
done() {
@@ -170,12 +195,15 @@ class Quiz extends Component {
const result = await saveScore(deckKey, status);
this.props.dispatch(updateScores(result.lastScore));
this.props.dispatch(updateDeckScore(deckKey, result.deckScore));
- Alert.alert(
- title,
- message,
- [{ text: 'OK', onPress: () => navigation.goBack() }],
- { cancelable: false }
- );
+
+ this.setState(() => {
+ return {
+ done: true,
+ correct: r,
+ incorrect: w
+ }
+ })
+
} catch (e) {
console.log(e);
}
@@ -185,7 +213,8 @@ class Quiz extends Component {
render() {
- const size = this.state.questions.length;
+ const { questions, done } = this.state;
+ const size = questions.length;
if (size === 0) {
return (
@@ -193,7 +222,46 @@ class Quiz extends Component {
);
- } else {
+ } else if (done) {
+ const { navigation } = this.props;
+ const { deckKey } = navigation.state.params;
+
+ const { correct, incorrect, animationValue } = this.state;
+ const percent = (correct / size) * 100;
+
+ return (
+
+
+ Quiz Finished
+ {correct > incorrect ?
+ (
+ You won! =)
+ )
+ : correct < incorrect ?
+ (
+ You Lose! =(
+ )
+ :
+ (
+ It's a Tie =|
+ )
+ }
+
+ {percent.toFixed(0)}% Correct
+
+
+
+ {
+ navigation.goBack();
+ navigation.navigate('Quiz', { deckKey })
+ }}>Play Again
+
+
+ { navigation.goBack(); }}>Go Back
+
+
+ );
+ } else if (!done) {
const { questionIndex, answerQuestion } = this.state;
const question = this.state.questions[questionIndex];
@@ -223,9 +291,6 @@ class Quiz extends Component {
Answer
-
- Done
-
)
@@ -237,10 +302,10 @@ class Quiz extends Component {
this.answer(RIGHT)}>
- Right =)
+ Correct =)
this.answer(WRONG)}>
- Wrong =(
+ Incorrect =(
@@ -342,6 +407,29 @@ const styles = StyleSheet.create({
backgroundColor: COLOR_FAILURE,
borderRadius: 2,
margin: 2
+ },
+ resultContainer: {
+ flex: 7,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ quizFinishedTxt: {
+ fontSize: 25
+ },
+ wonTxt: {
+ fontSize: 35,
+ color: 'green'
+ },
+ loseTxt: {
+ fontSize: 35,
+ color: 'red'
+ },
+ tieTxt: {
+ fontSize: 35,
+ color: 'gray'
+ },
+ resultTxt: {
+ fontSize: 45
}
});