let chosenCountryFlag;

let choices = [];

​

function setup() {

  createCanvas(400, 400);

  getFlags();

}

​

function draw() {

  background(50);

​

  if (chosenCountryFlag) {

    image(chosenCountryFlag, 50, 50, 300, 200);

    fill(255);

    text(

      `1. ${choices[0].name.common}, 2. ${choices[1].name.common}, 3. ${choices[2].name.common}`,

      50,

      300

    );

  }

}

async function getFlags() {

  let response = await fetch(url);

  let countries = await response.json();

​

  let index = floor(random(0, countries.length));

  choices.push(countries[index]);

​

  let index2 = floor(random(0, countries.length));

  choices.push(countries[index2]);

​

  let index3 = floor(random(0, countries.length));

  choices.push(countries[index3]);

​

  let neo = floor(random(3));

  chosenCountryFlag = loadImage(choices[neo].flags.png);

  console.log(choices)

  chosenName = choices[neo].name.common;

}

​

function mousePressed() {

  choices = [];

  getFlags();

}

​