0
Could someone help me I received the following feedback
Não esqueça de cancelar as notificações e agendar as notificações do dia seguinte quando o usuário terminar um quiz :thumbsup:. Você pode usar, por exemplo, o isQuestionAvaliable para testar. Se não existir mais questões disponíveis, significa que o usuário terminou o quiz, então você executa:
clearLocalNotification()
.then(setNotification);
this is my code
import React from 'react';
import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
import { NavigationActions } from 'react-navigation'
export default class Quiz extends React.Component {
state = {
questionIndex: 0,
correctAnswers: 0,
shouldShowAnswer: false,
};
onCorrect = () => {
const {questionIndex, correctAnswers} = this.state;
this.setState({questionIndex: questionIndex + 1, correctAnswers: correctAnswers + 1, shouldShowAnswer: false});
};
startQuiz = () => {
this.setState({questionIndex: 0, correctAnswers: 0, shouldShowAnswer: false});
};
backToDeck = () => {
this.props.navigation.goBack();
}
onIncorrect = () => {
this.setState({questionIndex: this.state.questionIndex + 1});
};
showAnswer = () => {
this.setState({shouldShowAnswer: !this.state.shouldShowAnswer});
};
render() {
const {questionIndex, correctAnswers, shouldShowAnswer} = this.state;
const {questions} = this.props.navigation.state.params;
const isQuestionAvailable = questionIndex < questions.length;
const questionLeft = questions.length - questionIndex;
return (
<View style={{flex: 1}}>
{isQuestionAvailable ? (
<View style={styles.container}>
<View style={[styles.group, {justifyContent: 'flex-start', flex: 1}]}>
<View>
<Text>{questionLeft} / {questions.length}</Text>
</View>
</View>
<View style={[styles.group, {flex: 4}]}>
<View>
{shouldShowAnswer ? (
<View style={{alignItems: 'center'}}>
<Text style={{fontSize: 36}}>{questions[questionIndex].answer}</Text>
<TouchableOpacity onPress={this.showAnswer}>
<Text style={{fontSize: 18, color: '#70dd2f'}}>Question</Text>
</TouchableOpacity>
</View>) : (
<View style={{alignItems: 'center'}}>
<Text style={{fontSize: 36}}>{questions[questionIndex].question}</Text>
<TouchableOpacity onPress={this.showAnswer}>
<Text style={{fontSize: 18, color: '#ff463f'}}>Answer</Text>
</TouchableOpacity>
</View>
)}
</View>
</View>
<View style={{alignItems: 'center', justifyContent: 'space-around', flex: 2}}>
<View style={styles.container}>
<TouchableOpacity onPress={this.onCorrect}>
<Text style={{
backgroundColor: '#70dd2f',
justifyContent: 'center',
height: 30,
textAlign: 'center',
width: 200
}}>Correct</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.onIncorrect}>
<Text style={{
backgroundColor: '#ff463f',
justifyContent: 'center',
height: 30,
textAlign: 'center',
width: 200,
marginTop: 20
}}>Incorrect</Text>
</TouchableOpacity>
</View>
</View>
</View>
) : (
<View style={styles.container}>
<Text>Score: {correctAnswers}</Text>
<View style={{alignItems: 'center', justifyContent: 'space-around', flex: 2}}>
<View style={styles.container}>
<TouchableOpacity onPress={this.startQuiz}>
<Text style={{
backgroundColor: '#70dd2f',
justifyContent: 'center',
height: 30,
textAlign: 'center',
width: 200
}}>Start Quiz</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.backToDeck}>
<Text style={{
backgroundColor: '#ff463f',
justifyContent: 'center',
height: 30,
textAlign: 'center',
width: 200,
marginTop: 20
}}>Back to Deck</Text>
</TouchableOpacity>
</View>
</View>
</View>
)}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 20,
}
});
The question is where I put that clearLocalNotification() could help me solve this problem
The line
{isQuestionAvailable ? ...insiderender()is a condition, if true displays the question otherwise displays the score, then that’s the point you should place. Test.– NoobSaibot
I did not understand could explain me a little more detailed pf
– Filipe Nickel Sala
The condition to check if you have questions available is
isQuestionAvailable = questionIndex < questions.length.. on line 43 you are checking whetherisQuestionAvailableistrueif so, it will execute 44~103 line code. If sofalseis because the user has finished the quiz, then will run the code of the lines 105~135 and this is where you putclearLocalNotification().then(setNotification);– NoobSaibot
Then I’d look like this
</View>

 ) : clearLocalNotification()
 .then(setNotification)
 (
 
 <View style={styles.container}>
 <Text>Score: {correctAnswers}</Text>

 <View style={{alignItems: 'center', justifyContent: 'space-around', flex: 2}}>
 <View style={styles.container}>– Filipe Nickel Sala
You should put below line 104
– NoobSaibot
after the : correct I did this and the variable error
– Filipe Nickel Sala
Referenceerror: Can'’t find variable clearLocalNotification
– Filipe Nickel Sala
In order to be able to help properly, you will have to create a [mcve] in order to help solve it, we also need to know which libraries are using it alongside the React Native.
– NoobSaibot
https://github.com/filipenickel/mobile-flashcards
– Filipe Nickel Sala