lundi 28 décembre 2020

how to display Quiz randomly and without duplication in react native

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