everyone. I try to make Quiz app randomly and without duplication in React Native . Successfully Quiz are displayed randomly. But I don't know how to display them without duplication . I am very new to learn React Native. If you have any idea to solve this issue , please help me . I use Mac book pro , Visual Code Studio and React Native.
I write the code as below .
export function App() {
const questions = [
{
questionText: "city",
answerOptions: [
{ answerText: "canada", isCorrect: false },
{ answerText: "USA", isCorrect: false },
{ answerText: "Napoli", isCorrect: true },
{ answerText: "Brazil", isCorrect: false },
],
},
{
questionText: "country",
answerOptions: [
{ answerText: "Paris", isCorrect: false },
{ answerText: "London", isCorrect: false },
{ answerText: "Spain", isCorrect: true },
{ answerText: "Rome", isCorrect: false },
],
},
{
questionText: "color",
answerOptions: [
{ answerText: "dog", isCorrect: false },
{ answerText: "cat", isCorrect: false },
{ answerText: "blue", isCorrect: true },
{ answerText: "tiger", isCorrect: false },
],
},
{
questionText: "currency",
answerOptions: [
{ answerText: "cash", isCorrect: false },
{ answerText: "money", isCorrect: false },
{ answerText: "Pond", isCorrect: true },
{ answerText: "card", isCorrect: false },
],
},
];
const randomQuestions =
questions[Math.floor(Math.random() * questions.length)];
return (
<View style={styles.container}>
<Text style={styles.question}>
{randomQuestions.questionText}
</Text>
<Text style={styles.answer}>
{randomQuestions.answerOptions[0].answerText}
</Text>
<Text style={styles.answer}>
{randomQuestions.answerOptions[1].answerText}
</Text>
<Text style={styles.answer}>
{randomQuestions.answerOptions[2].answerText}
</Text>
<Text style={styles.answer}>
{randomQuestions.answerOptions[3].answerText}
</Text>
</View>
);
};
Aucun commentaire:
Enregistrer un commentaire