//sound credit to: Lucky 7 by Matrixx_ , yay.wav by Higgs01

//

​

​

//frog image:https://www.rawpixel.com/image/6870723/png-sticker-public-domain

let img;

var frog;

var x= 100;

var y= 100;

var state=1;

var sound;

var cheer;

​

​

function preload() {

​

  img = loadImage("frog.png");

sound = loadSound("yaysound.wav");

cheer = loadSound("cheerfulsound.wav")

}

// images and sound

​

function setup() {

  createCanvas(700, 600);

  imageMode(CENTER);

  background("blue");

  textSize(30);

}

​

​

function mousePressed(){

  state++;

  if (state ==7){

    state ==1;

  } 

​

  if (state== 2)  {

    cheer.play();

  } 

    if(state== 3){

      sound.play();

    }

 if (state== 4)  {

    cheer.play();

  } 

    if(state== 5){

      sound.play();

    }

​

   if (state== 6)  {

    cheer.play();

  } 

    if(state== 7){

      sound.play();

    }

  // for each statment I wanted a sound to play//

}

​

​

​

​

function draw() {

  background(220);

​

  if( state ==1){

    //first panel

       fill("green");

  circle(100,300,100)

  circle(500,300,100)

    fill("black")

    text("What is 2+2?", x + 100,y);

    text("2",95,300);

    text("4",490,300)

​

  } 

   if( state ==2){

    //Second panel

    background("rgb(192,193,255)")

    fill("green");

    circle(100,300,100)

    fill("pink")

    circle(500,300,100)

    fill("black")

    text("CORRECT!", x + 100,y);

    text("2",95,300);

    text("4",490,300)

​

  } 

  if( state==3){

   // third panel

     fill("green");

     circle(100,300,100)

     circle(500,300,100)

     fill("black")

     text("What is 10+10?", x + 100, y);

     text("20",95,300);

     text("02", 490, 300);

  } 

   if( state==4){

   // fourth panel

     background("rgb(205,235,244)");

     fill("pink");

     circle(100,300,100)

     fill("green");

     circle(500,300,100)

     fill("black")

     text("CORRECT!", x + 100, y);

     text("20",95,300);

     text("02", 490, 300);

  } 

  if ( state==5){

   // fifth panel

     fill("green");

     circle(100,300,100)

     circle(500,300,100)

     fill("black")

     text("What is 20+20", x + 100, y);

     text("200",85,300);

     text("40", 490, 300);

     }

   if ( state==6){

   // sixth panel

     background("rgb(219,238,254)");

     fill("green");

     circle(100,300,100)

     fill("pink")

     circle(500,300,100)

     fill("black")

     text("What is 20+20", x + 100, y);

     text("200",85,300);

     text("40", 490, 300);

     }

  if( state ==7){

    // seventh panel

    background("rgb(196,225,196)")

    fill("green")

    text("The End Thank You So Much For Playing!", x -10, y)

  }

​

  image(img,mouseX + 10, mouseY + 10, 90, 90);

​

​

}

​

​

​