// 1 fail screen (try again)

// 1 success screen

let choice = 0; // 0 if nothing is chosen yet, 1 if Right button is clicked 2 if Left button is clicked

let state = 1; // 1 if alive, 0 if dead

let qnum = 1; // what question you're on

​

​

​

function setup() {

  createCanvas(500, 500);

  background(220);

}

​

function mousePressed() {

  // 0 if nothing is chosen or a random area is cliked, 1 if Right button is clicked 2 if Left button is clicked

  if(mouseY>=300&&mouseX >= 250) {

    choice = 1

  } else if(mouseY>=300&&mouseX <250) {

    choice = 2

  } else choice = 0;

}

​

function draw() {

  //question 1

    if(state == 1 && qnum == 1) {

      ///q1 prompt

      noStroke()

      fill('black'); 

      rect(0, 0, 500, 300);

      ///two buttons

      strokeWeight(1);

      stroke('palegreen');         //border of button

      rect(0, 300, 250, 200);      

      rect(250, 300, 250, 200);

      rect(width/2-50,height/2-50,100,60);   //envelope

      fill('palegreen')

      triangle(width/2-50,height/2-50,width/2+50,height/2-50,width/2,230)

      textAlign(CENTER);            //text alignment

      fill('palegreen')            //color of text

      textFont('Courier New', 20);   //font

      text('Welcome to the initialisation',width/2,110);

      text('You are chosen to be a spy',width/2, 130);

      text('Do you accept?',width/2, 150);

      text ('I Accept', width/4*3, 400);

      text ('I Reject', width/4, 400);

      if (mouseX>250 && mouseY>300) {

        fill('yellow'); 

        text ('I Accept', width/4*3, 400);

      } else if (mouseX<250 && mouseY>300) {

        fill('yellow'); 

        text ('I Reject', width/4, 400);

      }

      ///the answer for q1 is Right(1). If choice is correct, send to next question; if choice is wrong, change state to dead

      if(choice == 1) {qnum++; choice = 0;} 

      else if(choice == 2){state = 0; choice = 0;}

    } 

  //question 2

    if(state == 1 && qnum == 2) {

      ///q2 prompt

      strokeWeight(1);

      stroke('palegreen')

      background(220);

      fill('black');

      rect(0, 0, 500, 300);

      ///two buttons

      fill('black');

      rect(0, 300, 250, 200);

      rect(250, 300, 250, 200);

      fill(255)

      noStroke();

      rect(200,200,100,80) // body of mug

      ellipse (250,200,100,20) // top of mug

      ellipse (250,280,100,20) // bottom of mug

      fill('brown')           // coffee

      ellipse (250,200,85,10)   //coffee

      noFill();

      stroke(255);

      strokeWeight(10);

      arc(300, 240, 50, 60, -PI/2, PI/2); // Handle using an arc

​

      noStroke();

      textAlign(CENTER);            //text alignment

      fill('palegreen')            //color of text

      textFont('Courier New', 20);   //font

      text('You are required to order coffee',width/2,130);

      text('What do you choose?',width/2, 150);

      text ('Dirty Matcha', width/4*3, 0.8*height-20);

      text ('with Almond milk', width/4*3, 0.8*height);

      text ('Your Favorite!', width/4*3, 0.8*height + 20);

      text ('Black Coffee', width/4, 0.8*height-20);

      text ('No Sugar', width/4, 0.8*height);

      text ('(Ugh)', width/4, 0.8*height + 20); 

      //hover options

      if (mouseX>250 && mouseY>300) {

        fill('yellow'); 

        text ('Dirty Matcha', width/4*3, 0.8*height-20);

        text ('with Almond milk', width/4*3, 0.8*height);

        text ('Your Favorite!', width/4*3, 0.8*height + 20);

      } else if (mouseX<250 && mouseY>300) {

        fill('yellow'); 

        text ('Black Coffee', width/4, 0.8*height-20);

        text ('No Sugar', width/4, 0.8*height);

        text ('(Ugh)', width/4, 0.8*height + 20); 

      }

      ///the answer for q2 is Left(2). If choice is correct, send to next question; if choice is wrong, change state to dead

      if(choice == 2) {qnum++; choice = 0;} 

      else if(choice == 1){state = 0; choice = 0;}

    } 

  //question 3

    if(qnum == 3) {

      ///q3 prompt

      background(220);

      stroke('palegreen')

      strokeWeight(1);

      fill('black');

      rect(0, 0, 500, 300);

      ///two buttons

      rect(0, 300, 250, 200);

      rect(250, 300, 250, 200);

      rect(210, 125, 80, 160, 20);

      fill('red')

      ellipse(250, 155, 40);   //red

      fill('orange')

      ellipse(250, 205, 40);   // orange

      fill('green')

      ellipse(250, 255, 40);   //green

      textAlign(CENTER);            //text alignment

      fill('palegreen')            //color of text

      textFont('Courier New', 20);   //font

      text('The traffic light is Red',width/2,80);

      text('What do you do?',width/2, 100);

      text ('Just jaywalk', width/4, 0.8*height-10);

      text ('Duh!', width/4, 0.8*height + 10);

      text ('The law says to', width/4*3, 0.8*height-20);

      text ('wait for the', width/4*3, 0.8*height);

      text ('green man', width/4*3, 0.8*height + 20); 

      //hover options

      if (mouseX<250 && mouseY>300) {

      fill('yellow'); 

      text ('Just jaywalk', width/4, 0.8*height-10);

      text ('Duh!', width/4, 0.8*height + 10);

      } else if (mouseX>250 && mouseY>300) {

        fill('yellow'); 

      text ('The law says to', width/4*3, 0.8*height-20);

      text ('wait for the', width/4*3, 0.8*height);

      text ('green man', width/4*3, 0.8*height + 20);

      }

      ///the answer for q3 is Left(2). If choice is correct, send to next question; if choice is wrong, change state to dead

      if(choice == 2) {qnum++; choice = 0;} 

      else if(choice == 1){state = 0; choice = 0;}

    }

  //question 4

  if(state == 1 && qnum == 4) {

      ///q4 prompt

      background(220);

      stroke('palegreen')

      strokeWeight(1);

      fill('black');

      rect(0, 0, 500, 300);

    ///two buttons

      rect(0, 300, 250, 200);

      rect(250, 300, 250, 200);

      fill('green')

      ellipse (250,190,40)           //middle

      arc(250, 270, 60, 120, PI, 0); //middle body

      fill('palegreen')

      ellipse (200,170,40)            //left

      arc(300, 270, 80, 160, PI, 0);  //left body

​

      ellipse (300,170,40)            //right

      arc(200, 270, 80, 160, PI, 0);  //right body

      textAlign(CENTER);            //text alignment

      fill('palegreen')            //color of text

      textFont('Courier New', 20);   //font

      text('Your family asks you',width/2,80);

      text('what you have been up to',width/2,100);

      text('What do you tell them?',width/2, 120);

      text ('Actually...', width/4, 0.8*height-20);

      text ('I am on a', width/4, 0.8*height);

      text ('spy mission', width/4, 0.8*height + 20);

​

      text ('You tell them that', width/4*3, 0.8*height-10);

      text ('nothing is new', width/4*3, 0.8*height +10);

       //hover options

      if (mouseX<250 && mouseY>300) {

      fill('yellow'); 

      text ('Actually...', width/4, 0.8*height-20);

      text ('I am on a', width/4, 0.8*height);

      text ('spy mission', width/4, 0.8*height + 20);

      } else if (mouseX>250 && mouseY>300) {

        fill('yellow'); 

        text ('You tell them that', width/4*3, 0.8*height-10);

        text ('nothing is new', width/4*3, 0.8*height +10);

      }

      ///the answer for q4 is Right(1). If choice is correct, send to next question; if choice is wrong, change state to dead

      if(choice == 1) {qnum++; choice = 0;} 

      else if(choice == 2){state = 0; choice = 0;}

    }

    // if all 4 questions are cleared, you pass 

    if(state == 1 && qnum > 4) {

      // success screen 

      background(0);

      fill(255);

      circle(mouseX, mouseY, 25);

      textAlign(CENTER);            //text alignment

      fill('palegreen')            //color of text

      textFont('Courier New', 20);   //font

      text('Congratulations!_',width/2, height/2 + 10);

      text('You are now ready for the first mission',width/2,height/2 -10);

    let starX = random(width);

    let starY = random(height);

    fill('white');

    ellipse(starX, starY, 15, 15);

    }

    // whenever you reach state == 0, you see a fail screen

    if(state == 0) {

      // fail screen 

      background('maroon');

      fill('#FFEB3B')                  //color of icons

      textAlign(CENTER);            //text alignment

      textFont('Helvetica', 20);   //font      

      text('You continue to live a boring life',width/2, height/2 -130);

      text('You have been spotted!',width/2,height/2 -160);

      //draw restart button

      stroke('red')

      strokeWeight(1);

      fill('rgb(95,2,2)')

      rect(0, 300, 500, 200);

      strokeWeight(5)

      line(200, 150, 300, 250);      //cross icon

      line(200, 250, 300, 150);      //cross icon

      //hover & highlight X icon

      if(mouseX>200 && mouseX<300 && mouseY>170 && mouseY<270) {

      strokeWeight(10)

      line(200, 150, 300, 250); 

      line(200, 250, 300, 150);

      }

      noStroke();

      fill('#FFEB3B')                    //color of text

      textAlign(CENTER);                  //text alignment

      textFont('Helvetica', 20);          //font      

      text('Want to have a go again?',width/2, height/2+150);

      //hover bottom box

      if(mouseY>300) {

      stroke('red')

      strokeWeight(1);

      fill('rgb(109,59,0)')

      rect(0, 300, 500, 200);

      noStroke();

      fill('orange')                    //color of text

      textAlign(CENTER);                  //text alignment

      textFont('Helvetica', 20);          //font      

      text('Click here if you dare!',width/2,height/2+150)

      }

      //if restart button is pressed (choice > 0), we start again (state = 1) & qnum = 1

      if(choice > 0) {state = 1; choice=0; qnum = 1;}

    }

}