const imageURLs = [

"fake1", 

"fake10",

"fake2",

"fake3",

"fake4",

"fake5",

"fake6",

"fake7",

"fake8",

"fake9",

"real1",

"real10",

"real2",

"real3",

"real4",

"real5",

"real6",

"real7",

"real8",

"real9",

].map(x => x + '.png') // THIS IS AN ARRAY OF STRINGS!

let questions = []

​

// SIMPLE RANDOMIZATION HACK IDEA

// https://stackoverflow.com/a/46545530

​

function preload() {

  questions = imageURLs.map((x) => {

    return {

    name: x,

    rank: Math.random(), // THIS IS A NUMBER (WILL USE IT TO SHUFFLE)

    isReal: x.includes('real'), // THIS IS A BOOLEAN

    image: loadImage(x) // THIS IS AN IMAGE OBJECT

    } // THIS IS AN OBJECT

  }).sort((a, b) => a.rank - b.rank) // THIS IS AN ARRAY OF SHUFFLED OBJECTS! YAY!

} 

​

function setup() {

  imageMode(CENTER);

  createCanvas(dimension, dimension);

  background(200);

  counter = 0; 

  score = 0;

​

  // CREATE BUTTONS BUT HIDE THEM

  buttonReal = createButton("REAL");

  buttonReal.position(130, 350);

  buttonFake = createButton("FAKE");

  buttonFake.position(230, 350);

  hideQuestionButtons();

  buttonNext = createButton("NEXT");

  buttonNext.position(dimension / 2 - 30, 350);

  buttonNext.hide()

​

  buttonReal.mousePressed(onRealClick)

  buttonFake.mousePressed(onFakeClick)

  buttonNext.mousePressed(onNext)

  // CREATE START BUTTON AND SHOW IT

  buttonStart = createButton("START");

  buttonStart.position(dimension / 2 - 30, dimension / 2 + 30);

  buttonStart.mousePressed(showQuestion);

  textAlign(CENTER);

  textSize(30);

  text("Guess which picture is", width / 2, 70);

  text("REAL or FAKE", width / 2, 120);

}

​

function showQuestionButtons() {

  buttonReal.show()

  buttonFake.show()

}

​

function hideQuestionButtons() {

  buttonReal.hide()

  buttonFake.hide()

}

​

function showQuestion() {

  fill(200);

  rect(0, 0, dimension, dimension);

  noFill()

  strokeWeight(4);

  rect(10, 10, dimension - 20,  dimension - 20, 20);

  buttonStart.hide();

  buttonNext.hide()

  currentQuestion = questions[counter];

  console.log(currentQuestion)

  image(currentQuestion.image, dimension / 2, dimension / 2);

  showQuestionButtons() 

} 

​

function showAnswer(isCorrect) {

  hideQuestionButtons()

  const resultText = isCorrect ? 'Correct' : 'Incorrect'

  if(isCorrect) {

    fill(0, 255, 0);

​

  } else {

    fill(255, 0, 0);

​

  }

  text(resultText, width / 2, 300);  

  buttonNext.show()

}

​

function onRealClick() {

  currentQuestion = questions[counter];

  if(currentQuestion.isReal) score++;

  showAnswer(currentQuestion.isReal)

}

​

function onFakeClick() {

  currentQuestion = questions[counter];

  if(!currentQuestion.isReal) score++;

  showAnswer(!currentQuestion.isReal)  

}

​

function showResult() {

  fill(200);

  rect(0, 0, dimension, dimension);

  hideQuestionButtons()

  buttonNext.hide()

  fill(0, 100, 255);

  text(`GAME OVER`, width / 2, 100);

  fill(0, 0, 255);

  text(`SCORE: ${score}`, width / 2, 300);

}

​

function onNext() {

  counter++

  if(counter >= questions.length) {

    // show game end

    showResult() 

  } else {

    // show next question

    showQuestion()

  }

}

​

function draw() {}

​