React JS Fetching and object into Multi-Choice quize

JavaScript
1

Im building a multi-choice quiz app (guessing the flag of country with 4 multi-choice answers), initially i have the list of the flags and the options hardcoded in an array , now im trying to fetch object of list of countries from an remote API , im trying to randomly select 4 countries names (as the multi-choice) with one of them being correct and its flag image , and i also wanted to be placed randomly in my UI so the correct answers not always be in the same place, any suggestion how i could possibly achieve that ?

2

now im trying to fetch object of list of countries from an remote API

Do you have an API for this already? Are you asking if one exists or do you have one and just don’t know how to grab it?

im trying to randomly select 4 countries names (as the multi-choice) with one of them being correct and its flag image

So, you need to randomly select 4 values. You could randomly select 4 indices, just making sure that there are no duplicates. This is a simple algorithm problem.

and i also wanted to be placed randomly in my UI so the correct answers not always be in the same place, any suggestion how i could possibly achieve that

You can place them randomly or you can randomly select the index (0-3) of the answer. If you want to randomize their placement, then a simple shuffle algorithm should work, like a FY shuffle.

3

Yes i got its from https://restcountries.com/v2/all

yes its the simple , but what makes it complicated is that the correct have to display its flag on the screen , so i can just define random values .

4

Yes i got its from https://restcountries.com/v2/all

OK … so … Are you getting your data or not? We can’t help if we can’t see the code.

yes its the simple , but what makes it complicated is that the correct have to display its flag on the screen , so i can just define random values .

OK… I guess that is a choice. The “correct” one I assume could also be random, randomly selected from the 4.

But OK, let’s say you want France. Then you randomly select 3 others and add them to an array with the entry with France. Then you can shuffle them. You have to make sure the answer is correct - a simple way would be to compare the name associated with that flag and the correct answer.

5

yes im getting the data its very large its Array of objects of 200+ countries , each object is country with different properties like (language , currency , population…ect) , i have already a hard coded array i used previously just for building the app

export const QuestionsList = [
  {
    image: BrazilFlag,
    options: [
      { Answertext: "Brazil", IsitCorrect: true },
      { Answertext: "Germany", IsitCorrect: false },
      { Answertext: "Oman", IsitCorrect: false },
      { Answertext: "Russia", IsitCorrect: false },
    ],
  },
  {
    image: IndiaFlag,
    options: [
      { Answertext: "USA", IsitCorrect: false },
      { Answertext: "Saudi Arabia", IsitCorrect: false },
      { Answertext: "India", IsitCorrect: true },
      { Answertext: "Sirilanka", IsitCorrect: false },
    ],
  },
  {
    image: JapanFlag,
    options: [
      { Answertext: "China", IsitCorrect: false },
      { Answertext: "Japan", IsitCorrect: true },
      { Answertext: "Oman", IsitCorrect: false },
      { Answertext: "Russia", IsitCorrect: false },
    ],
  },
  {
    image: MexicoFlag,
    options: [
      { Answertext: "Jamaica", IsitCorrect: false },
      { Answertext: "Canada", IsitCorrect: false },
      { Answertext: "Bahrain", IsitCorrect: false },
      { Answertext: "Mexico", IsitCorrect: true },
    ],
  },
  {
    image: NorwayFlag,
    options: [
      { Answertext: "Norway", IsitCorrect: true },
      { Answertext: "Sweden", IsitCorrect: false },
      { Answertext: "Denmark", IsitCorrect: false },
      { Answertext: "Korea", IsitCorrect: false },
    ],
  },
];

the problem with this approach is the answer is predetermined , the answer shouldnt be pre-determined , it have to be randomly selected along with its flag , the flag should be displayed in the UI , the answer along with other randomly selected 3 countries will be shuffled in the options slots.

6

No, it doesn’t have to be “predetermined”. It can be randomly selected. If I were building this app, I would have thought of it this way:

  1. Get array of countries/flags.
  2. Create another array, of answers. This is just an array of the objects. I may just be a clone of the countries/flags list.
  3. Shuffle the answers list.
  4. Select an answer from the answers list, popping or shifting it off the array.
  5. Randomly select three other countries/flags from your original countries/flags array. Make sure there are not duplicates between them or with the answer. Put them in an array, the “quiz” array.
  6. Shuffle the quiz array.
  7. Test the user.
  8. Loop back to step 4.

That is not the only way to do it, but that makes sense to me. That would ensure that an answer doesn’t occur more than one in a cycle. If you don’t care about that, then you can just skip 2-4 and in step 5, just randomly select 4 countries/flags and randomly select your answer from that. That would work too. It would be simpler but you could theoretically have repeated “answers”. Maybe that is acceptable - that is up to you.

Do you have code of what you’ve tried? Do you have a link to a pen? Another online IDE? A repo? It might be easier to understand your difficulties if we can see what you are trying to do.

1 Like
7

And just to be clear, I’m not saying that the method I am suggesting is the only way or even the best. If you have a different flow, that’s fine. But it would be helpful if you were clear.

Based on the “QuestionsList” that you had hardcoded, you seem to want to generate the entire quiz before hand. That can work too. You just need to transform your input array into what you have there. You could just shuffle it and then map over it to create your QuestionsList.

1 Like
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.