Button clicked when not visible

Ladan · September 16, 2020, 11:51am

When clicking the Quiz button at a point, where the “richtig” or the “falsch” button would be, like on the left of the i, im not shown the first question, but the result screen, so the question is answered with the click on the quiz button. Does anybody know, why that is the case? You should probably try the program yourself to understand what I mean

int state = 0;
color green = color(72, 255, 0);
color red = color(255, 17, 0);
color lightblue = color(3, 182, 252);

PImage Team;
PImage Sponsoren;
PImage Produktion;
PImage Konstruktion;

int flag = 0;

// 3 parallel arrays 

String[] text1 = { 
  "1. Aussage:", 
  "2. Aussage:", 
  "3. Aussage:", 
  "4. Aussage:", 
  "5. Aussage:", 
  "6. Aussage:", 
};

String[] text2 = { 
  "Wir haben einen nicht gelisteten Helfer.", 
  "          Wir sind das erste Mal dabei.", 
  "Unser Team besteht nur aus Leuten aus der 7. Klasse.", 
  "          Unserer ITler ist der coolste.", 
  "Beim letzten Wettkampf kamen wir in die Top 5.", 
  "Unsere Schule stellt ein anderes Team.", 
};

int[] correct = {
  1, 
  2, 
  2, 
  1, 
  2, 
  1, 
};

// index for all 3 
int index = 0; 



String QUIZ = "Q\nU\nI\nZ\n";

int x1=100, y1=100, w1=250, h1=250;   //Button oben links
int x2=1570, y2=100, w2=250, h2=250;   //Button oben rechts
int x3=100, y3=750, w3=250, h3=250;   //Button unten links
int x4=1570, y4=750, w4=250, h4=250;   //Button unten rechts
int x5=80, y5=910, w5=250, h5=100;   // Button zurück
int x6=860, y6=0, w6=200, h6=1080;    //Button Quiz
int x7=260, y7=290, w7=500, h7=500;    //Quiz left Button
int x8=1160, y8=290, w8=500, h8=500;    //Quiz right Button


void drawMainButtons() { //_______ stat 0 only
  if ( over(x1, y1, w1, h1) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x1, y1, w1, h1);
  fill(255, 251, 0);
  textSize(50);
  text("Team", 160, 240);
  
  
  if ( over(x2, y2, w2, h2) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x2, y2, w2, h2);
  fill(255, 251, 0);
  textSize(37);
  text("Konstruktion", 1580, 240);
  
  
  if ( over(x3, y3, w3, h3) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x3, y3, w3, h3);
  fill(255, 251, 0);
  textSize(45);
  text("Produktion", 106, 890);
  
  
  if ( over(x4, y4, w4, h4) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x4, y4, w4, h4);
  fill(255, 251, 0);
  textSize(45);
  text("Sponsoren", 1580, 890);
  
  
  if ( over(x6, y6, w6, h6) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x6, y6, w6, h6);
  draw_quiz_text();
}

void draw_zurueck_button() { //_ state 1,2,3
  fill(84, 0, 153);
  if ( over(x5, y5, w5, h5) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  rect(x5, y5, w5, h5);

  fill(255, 251, 0);
  textSize(55);
  stroke(0);
  text("zurück", x5 + 35, y5 + 68);
  textSize(40);
  fill(0, 0, 200);
}

void draw_low_zurueck_button() {
  fill(84, 0, 153);
  if ( over(x5, y5 + 100, w5 - 50, h5 - 50) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  rect(x5, y5 + 100, w5 - 50, h5 - 50);

  fill(255, 251, 0);
  textSize(50);
  stroke(0);
  text("zurück", x5 + 15 , y5 + 140);
  textSize(40);
  fill(0, 0, 200);
}


void draw_quiz_text() {

  fill(255, 251, 0);
  textSize(150);
  stroke(0);
  textLeading(250);
  textAlign(CENTER);
  text(QUIZ, x6 + 95, y6 + 220);
  textAlign(LEFT);
  textSize(40);
  fill(0, 0, 200);
}

void actOnFlag() {
  if (flag == 0) {
    // Question 1
    pushStyle();
    background(255);
    fill(255, 0, 0);
    rect (1000, 500, 300, 300);
    fill(0, 255, 0);
    rect (600, 500, 300, 300);
    fill(0, 0, 0);
    text(text1[index], 900, 250);
    text(text2[index], 650, 290);
    textSize(32);
    fill(0, 51, 0);
    text("WAHR", 700, 650);
    textSize(32);
    fill( 128, 0, 0);
    text("FALSCH", 1100, 650);
    pushStyle();
  } else if (flag == 1 || flag == 2) {  
    //
    resultScreen();
  } else if (flag == 3) {
    background(255);   

    draw_zurueck_button();

    
    flag=0;
    index++;
    if ( index >= text2.length ) state=7;
    flag=0;
  } else {
    background(255);
    textSize(32);
    fill(255, 0, 0);
    text("Error in actOnFlag: "+flag, 600, 150);
  }
}//func 

void setup() {
  fullScreen();
  //size(1920, 1200);
  fill(0, 0, 200);
  strokeWeight(10);
  Team = loadImage("Team.png");
  Sponsoren = loadImage("Sponsoren.png");
  Produktion = loadImage("Produktion.png");
  Konstruktion = loadImage("Konstruktion.png");
}

void draw() {
  background(255);

  if ( state == 0 ) drawMainButtons(); 

  if ( state == 1 ) draw_back_button_and_some_text1();
  if ( state == 2 ) draw_back_button_and_some_text2();
  if ( state == 3 ) draw_back_button_and_some_text3();
  if ( state == 4 ) draw_back_button_and_some_text4();

  if ( state == 6 ) actOnFlag();
  if ( state == 7 ) {
   
    textSize(32);
    text("Das wars", 600, 150);
    text("Danke fürs mitmachen", 600, 200);
    draw_zurueck_button();
    index = 0;
    
  }
}

void mousePressed() {
  if ( state == 0 ) {
    if ( over(x1, y1, w1, h1) )  state = 1;
    if ( over(x2, y2, w2, h2) )  state = 2;
    if ( over(x3, y3, w3, h3) )  state = 3;
    if ( over(x4, y4, w4, h4) )  state = 4;
    if ( over(x6, y6, w6, h6) )  state = 6;
  } else {
    if ( state != 1 && state != 2 && state != 3 && state != 4){
    if ( over(x5, y5, w5, h5) )  state = 0;
    } else {

        if( over(x5, y5 + 100, w5 - 50, h5 - 50) ) state = 0;
 
    }
    
  }
    

  println("MouseX: " + mouseX + " MouseY: " + mouseY + " Flag: " + flag);

  //------------------------
  if (flag == 0) {
    if(state == 6){
    // Question 1
    if ( over(600, 500, 300, 300)) {     
      flag = 1;
    }
    if ( over(1000, 500, 300, 300)) {
      flag = 2;
    }
    }
  }
  //------------------------
  // Two result screens with a "Next button"
  else if (flag == 1) {
    // Correct 
    if (mouseX>600 && mouseX < 900 && mouseY >300 && mouseY <600) {
      flag = 3; // both proceed to Question 2
    }
  } else if (flag == 2) {
    // Wrong 
    if (mouseX>600 && mouseX < 900 && mouseY >300 && mouseY <600) {
      flag = 3; // both proceed to Question 2
    }
  } 
  //---------------------
  if (flag ==2 || flag == 1 || flag ==3) {
    if (mouseX>1316 && mouseX < 1366 && mouseY >0 && mouseY <50) {
      flag = 0;
    }//if
    //--------------------
    else {
      // flag = 0;
    }
    //
  }//func
  
}




void draw_back_button_and_some_text1() {
  background(Team);
  fill(0);
  //text("some text page1 ", 760, 50);
  //draw_zurueck_button();
  draw_low_zurueck_button();
}

void draw_back_button_and_some_text2() {
  background(Konstruktion);
  fill(0);
  //text("some text page2 ", 760, 50);
  //draw_zurueck_button();
  draw_low_zurueck_button();
}

void draw_back_button_and_some_text3() {
  background(Produktion);
  fill(0);
  //text("some text page3 ", 760, 50);
  //draw_zurueck_button();
  draw_low_zurueck_button();
}

void draw_back_button_and_some_text4() {
  background(Sponsoren);
  fill(0);
  //text("some text page4 ", 760, 50);
  //draw_zurueck_button();
  draw_low_zurueck_button();
}

void resultScreen() {
  if ((flag == 1 && correct[index] == 1) || (flag == 2 && correct[index] == 2)) {
    // Correct 
    pushStyle();
    background(255);
    fill(0, 255, 0);
    textSize(42);
    text("Richtig!", 600, 150);
    fill(0);
    rect(600, 300, 300, 300);
    textSize(32);
    fill(255);
    text("Nächste", 700, 400);
    text("Aussage->", 700, 450);

    draw_zurueck_button();

    popStyle();
  } else {
    // Wrong 
    pushStyle();
    background(255);
    fill(255, 0, 0);
    text("Falsch!", 600, 150);
    fill(0);
    rect(600, 300, 300, 300);
    textSize(32);
    fill(255);
    text("Nächste", 700, 400);
    text("Aussage->", 700, 450);

    draw_zurueck_button();

    popStyle();
  }
}//

boolean over(int x, int y, int w, int h) {
  return ( mouseX > x & mouseX < x + w   &&
    mouseY > y & mouseY < y + h      ) ;
}

Chrisir · September 25, 2020, 11:56am

I think I know why.

Let’s say you are in the Main Screen with Quiz etc. (state == 0)

Then you click Quiz

state gets 1 (or whatever)

BUT we are still in draw so the line if ( state == 1 ) draw_back_button_and_some_text1();
gets executed immediately.

Then mousePressed still true and if ( state == 2 ) draw_back_button_and_some_text2(); applies

Same is true within mousePressed also. Use if…else if… here too

And you have stuff in mousePressed that is after (or outside) the if(state==…) … else if… construct altogether. Bad. That’s probably the main reason. After setting state to 6 in mousePressed we are still in mousePressed and run the “if (flag == 0) {” section immediately (and maybe the next flag section too, when it’s not separated by if...else if...).

Solution

In draw() use if...else if... so only ONE state is executed in one frame (loop) of draw().

And (similarly) here in mousePressed() use if...else if... too:

    if ( over(x1, y1, w1, h1) )  state = 1;
    if ( over(x2, y2, w2, h2) )  state = 2;
    if ( over(x3, y3, w3, h3) )  state = 3;
    if ( over(x4, y4, w4, h4) )  state = 4;
    if ( over(x6, y6, w6, h6) )  state = 6;

Especially, after changing state to 6 in mousePressed(), the rest of mousePressed() should not be executed. Because then processing would immediately check the Wahr and Falsch button against the mouse (instead of waiting for a new mouse press!).

To avoid this I inserted

 if (state!=0) {
      flag = 0;
      println("return"); 
      return; // leave mousePressed()   !!!!!!!!!!!!!!!!!!!!!
    }

in mousePressed(). This leaves the function early so the rest of mousePressed() is not executed. Good.

See below.

Remark

It would be also possible (and cleaner) to have
a clean structure in mousePressed() like this:

  if ( state == 0 ){
  }
 
  else if ( state == 1 ) {
  }
  
  else if ( state == 2 ) {
  }
   
  else if ( state == 3 ) {
  }

  else if ( state == 4 ){
  }
 
  else if ( state == 6 ) {
  }//state 6
  
  else if ( state == 7 ) {
  }

and NOT have stuff (like the flag-section in mousePressed()) outside the entire if state else if... section.

Warm regards,

Chrisir

Full Sketch

int state = 0;
color green = color(72, 255, 0);
color red = color(255, 17, 0);
color lightblue = color(3, 182, 252);

PImage Team;
PImage Sponsoren;
PImage Produktion;
PImage Konstruktion;

int flag = 0;

// 3 parallel arrays 

String[] text1 = { 
  "1. Aussage:", 
  "2. Aussage:", 
  "3. Aussage:", 
  "4. Aussage:", 
  "5. Aussage:", 
  "6. Aussage:", 
};

String[] text2 = { 
  "Wir haben einen nicht gelisteten Helfer.", 
  "          Wir sind das erste Mal dabei.", 
  "Unser Team besteht nur aus Leuten aus der 7. Klasse.", 
  "          Unserer ITler ist der coolste.", 
  "Beim letzten Wettkampf kamen wir in die Top 5.", 
  "Unsere Schule stellt ein anderes Team.", 
};

int[] correct = {
  1, 
  2, 
  2, 
  1, 
  2, 
  1, 
};

// index for all 3 
int index = 0; 

String QUIZ = "Q\nU\nI\nZ\n";

int x1=100, y1=100, w1=250, h1=250;   //Button oben links
int x2=1570, y2=100, w2=250, h2=250;   //Button oben rechts
int x3=100, y3=750, w3=250, h3=250;   //Button unten links
int x4=1570, y4=750, w4=250, h4=250;   //Button unten rechts
int x5=80, y5=910, w5=250, h5=100;   // Button zurück
int x6=860, y6=0, w6=200, h6=1080;    //Button Quiz
int x7=260, y7=290, w7=500, h7=500;    //Quiz left Button
int x8=1160, y8=290, w8=500, h8=500;    //Quiz right Button

//---------------------------------------------------------------------------------

void drawMainButtons() { //_______ stat 0 only
  if ( over(x1, y1, w1, h1) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x1, y1, w1, h1);
  fill(255, 251, 0);
  textSize(50);
  text("Team", 160, 240);


  if ( over(x2, y2, w2, h2) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x2, y2, w2, h2);
  fill(255, 251, 0);
  textSize(37);
  text("Konstruktion", 1580, 240);


  if ( over(x3, y3, w3, h3) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x3, y3, w3, h3);
  fill(255, 251, 0);
  textSize(45);
  text("Produktion", 106, 890);


  if ( over(x4, y4, w4, h4) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x4, y4, w4, h4);
  fill(255, 251, 0);
  textSize(45);
  text("Sponsoren", 1580, 890);


  if ( over(x6, y6, w6, h6) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x6, y6, w6, h6);
  draw_quiz_text();
}

void draw_zurueck_button() { //_ state 1,2,3
  fill(84, 0, 153);
  if ( over(x5, y5, w5, h5) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  rect(x5, y5, w5, h5);

  fill(255, 251, 0);
  textSize(55);
  stroke(0);
  text("zurück", x5 + 35, y5 + 68);
  textSize(40);
  fill(0, 0, 200);
}

void draw_low_zurueck_button() {
  fill(84, 0, 153);
  if ( over(x5, y5 + 100, w5 - 50, h5 - 50) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  rect(x5, y5 + 100, w5 - 50, h5 - 50);

  fill(255, 251, 0);
  textSize(50);
  stroke(0);
  text("zurück", x5 + 15, y5 + 140);
  textSize(40);
  fill(0, 0, 200);
}


void draw_quiz_text() {

  fill(255, 251, 0);
  textSize(150);
  stroke(0);
  textLeading(250);
  textAlign(CENTER);
  text(QUIZ, x6 + 95, y6 + 220);
  textAlign(LEFT);
  textSize(40);
  fill(0, 0, 200);
}

void actOnFlag() {
  if (flag == 0) {
    // Question 1
    pushStyle();
    background(255);
    fill(255, 0, 0);
    rect (1000, 500, 300, 300);
    fill(0, 255, 0);
    rect (600, 500, 300, 300);
    fill(0, 0, 0);
    text(text1[index], 900, 250);
    text(text2[index], 650, 290);
    textSize(32);
    fill(0, 51, 0);
    text("WAHR", 700, 650);
    textSize(32);
    fill( 128, 0, 0);
    text("FALSCH", 1100, 650);
    pushStyle();
  } else if (flag == 1 || flag == 2) {  
    //
    resultScreen();
  } else if (flag == 3) {
    background(255);   

    draw_zurueck_button();


    flag=0;
    index++;
    if ( index >= text2.length ) state=7;
    flag=0;
  } else {
    background(255);
    textSize(32);
    fill(255, 0, 0);
    text("Error in actOnFlag: "+flag, 600, 150);
  }
}//func 

//------------------------------------------------------------------------------------

void setup() {
  fullScreen();
  //size(1920, 1200);
  fill(0, 0, 200);
  strokeWeight(10);
  Team = loadImage("Team.png");
  Sponsoren = loadImage("Sponsoren.png");
  Produktion = loadImage("Produktion.png");
  Konstruktion = loadImage("Konstruktion.png");
}

void draw() {
  background(255);

  if ( state == 0 )
    drawMainButtons(); 
  else if ( state == 1 ) 
    draw_back_button_and_some_text1();
  else if ( state == 2 ) 
    draw_back_button_and_some_text2();
  else if ( state == 3 ) 
    draw_back_button_and_some_text3();
  else if ( state == 4 )
    draw_back_button_and_some_text4();
  else if ( state == 6 ) 
    actOnFlag();
  else if ( state == 7 ) {
    textSize(32);
    text("Das wars", 600, 150);
    text("Danke fürs mitmachen", 600, 200);
    draw_zurueck_button();
    index = 0;
  }
}//func 

//------------------------------------------------------------------------------------

void mousePressed() {
  if ( state == 0 ) {
    if ( over(x1, y1, w1, h1) )  state = 1;
    else if ( over(x2, y2, w2, h2) )  state = 2;
    else if ( over(x3, y3, w3, h3) )  state = 3;
    else if ( over(x4, y4, w4, h4) )  state = 4;
    else if ( over(x6, y6, w6, h6) )  state = 6;
    println(state); 
    if (state!=0) {
      flag = 0;
      println("return"); 
      return; // leave !!!!!!!!!!!!!!!!!!!!!
    }
  } else {
    if ( state != 1 && state != 2 && state != 3 && state != 4) {
      if ( over(x5, y5, w5, h5) )  state = 0;
    } else {
      if ( over(x5, y5 + 100, w5 - 50, h5 - 50) ) state = 0;
    }
  }

  println("MouseX: " + mouseX + " MouseY: " + mouseY + " Flag: " + flag);

  //------------------------
  if (flag == 0) {
    if (state == 6) {
      // Question 1
      if ( over(600, 500, 300, 300)) {     
        flag = 1;
      }
      if ( over(1000, 500, 300, 300)) {
        flag = 2;
      }
    }
  }
  //------------------------
  // Two result screens with a "Next button"
  else if (flag == 1) {
    // Correct 
    if (mouseX>600 && mouseX < 900 && mouseY >300 && mouseY <600) {
      flag = 3; // both proceed to Question 2
    }
  } else if (flag == 2) {
    // Wrong 
    if (mouseX>600 && mouseX < 900 && mouseY >300 && mouseY <600) {
      flag = 3; // both proceed to Question 2
    }
  } 
  //---------------------
  if (flag ==2 || flag == 1 || flag ==3) {
    if (mouseX>1316 && mouseX < 1366 && mouseY >0 && mouseY <50) {
      flag = 0;
    }//if
    //--------------------
    else {
      // flag = 0;
    }
    //
  }
}

//--------------------------------------------------------------------------------

void draw_back_button_and_some_text1() {
  background(Team);
  fill(0);
  //text("some text page1 ", 760, 50);
  //draw_zurueck_button();
  draw_low_zurueck_button();
}

void draw_back_button_and_some_text2() {
  background(Konstruktion);
  fill(0);
  //text("some text page2 ", 760, 50);
  //draw_zurueck_button();
  draw_low_zurueck_button();
}

void draw_back_button_and_some_text3() {
  background(0);
  fill(0);
  //text("some text page3 ", 760, 50);
  //draw_zurueck_button();
  draw_low_zurueck_button();
}

void draw_back_button_and_some_text4() {
  background(Sponsoren);
  fill(0);
  //text("some text page4 ", 760, 50);
  //draw_zurueck_button();
  draw_low_zurueck_button();
}

void resultScreen() {
  if ((flag == 1 && correct[index] == 1) || (flag == 2 && correct[index] == 2)) {
    // Correct 
    pushStyle();
    background(255);
    fill(0, 255, 0);
    textSize(42);
    text("Richtig!", 600, 150);
    fill(0);
    rect(600, 300, 300, 300);
    textSize(32);
    fill(255);
    text("Nächste", 700, 400);
    text("Aussage->", 700, 450);

    draw_zurueck_button();

    popStyle();
  } else {
    // Wrong 
    pushStyle();
    background(255);
    fill(255, 0, 0);
    text("Falsch!", 600, 150);
    fill(0);
    rect(600, 300, 300, 300);
    textSize(32);
    fill(255);
    text("Nächste", 700, 400);
    text("Aussage->", 700, 450);

    draw_zurueck_button();

    popStyle();
  }
}//

boolean over(int x, int y, 
  int w, int h) {
  return 
    mouseX > x & 
    mouseX < x + w   &&
    mouseY > y & 
    mouseY < y + h;
}//func 
//

Chrisir · September 25, 2020, 12:01pm

Remark 2

In my code, change background(0) back to background(Konstruktion); here, if I remember correctly

void draw_back_button_and_some_text3() {
  background(0);

Ladan · October 7, 2020, 11:20am

Thanks, that makes sense to me

Topic		Replies	Views
Help with a quiz I need to create with the random() Coding Questions homework	17	252	January 6, 2023
True or False game / If mousepressed correct answer, show next question randomly Coding Questions homework	2	425	March 24, 2021
How to do a true or false game? Coding Questions	36	2518	February 7, 2020
The output is missing when button is pressed Coding Questions	2	188	May 17, 2022
At work with the class Coding Questions	4	337	June 18, 2020

Button clicked when not visible

Related topics