How can I change the page by clicking a button?

Processing Coding Questions
1

How can I change the page by clicking a button?

2

If you have navigated through several pages, you can click on the back button, or if you have several tabs, you can click on another and so you change the page :crazy_face::crazy_face:.

Also clicking in the top “P” of processing :stuck_out_tongue:… there are several ways, Which one you want? :grimacing:

3

I want to program it that if I press the button a clear page with a text and a back button appears.

boolean InButtonSelection = true;
PImage bg;
void setup() {
size( 1366, 768);
bg = loadImage("qrC6FvL.jpg");
fill(0, 255, 0);
rect (300, 300, 300, 300);
fill(255, 0, 0);
rect (700, 300, 300, 300);
}
void draw() {

  background(bg);
  
  if (mousePressed) {
    
    if (InButtonSelection) {
      
      if (mouseY > 100 && mouseY < 350 && mouseX > 100 && mouseX < 350 ) {
  
  fill(0, 0, 0);
  text("Frage 1:", 600,150);
  text("Wir haben einen nicht gelisteten Helfer.", 350,190);
  fill(0, 255, 0);
  rect (300, 300, 300, 300);
  textSize(32);
  fill(0, 51, 0);
  text("WAHR", 400, 450);

  fill(255, 0, 0);
  rect (700, 300, 300, 300);
  textSize(32);
  fill( 128, 0, 0);
  text("FALSCH", 800, 450);
}
1 Like
4

see also
Background(image) not working !

2 Likes
5

You can use flags, for example:

int flag = 0;
void setup() {
  background(122,29,57);
  textAlign(CENTER);
  textSize(20);
}
void draw() {
      if(flag == 0){
        push();
        background(122,29,57);
        rect(10,10,10,10);
        ellipse(50,50,50,50);
        fill(255,255,0);
        text("Main Page",width/2,height-8);
        pop();
      } else if (flag == 1){
        push();
        background(0,255,0);
        rect(60,80,30,10);
        fill(0);
        text("Green\nPage",width/2,20);
        pop();      
      }else if (flag == 2){
        push();
        background(0,0,255);
        rect(10,80,30,10); 
        fill(255);
        text("Blue Page",width/2,20);
        pop();           
      }
}

void mousePressed(){
  println("MouseX: " + mouseX + " MouseY: " + mouseY + " Flag: " + flag);
  if(flag == 0){
  if(mouseX>10 && mouseX < 20 && mouseY >10 && mouseY <20){
    flag = 1;
  }
  if(dist(mouseX,mouseY,50,50)<25){
    flag = 2;
  }
  }
  if(flag == 1){
  if(mouseX>60 && mouseX < 90 && mouseY >80 && mouseY <90){
    flag = 0;
  }
  }  if(flag == 2){
  if(mouseX>10 && mouseX < 40 && mouseY >80 && mouseY <90){
    flag = 0;
  }}

}

You can use classes to create the buttons (much better in my opinion), I let you this example to give you an idea :smiley:

1 Like
6

Yeah, better check @kll tutorials to learn how to do it :smiley:

7

the example below shows how to handle different screens

For a real quiz though, it would be easier to have an array with questions / texts (“Wir haben einen nicht gelisteten Helfer.”) and a 2nd array if the right answer is true or false (Wahr / falsch). So you can compare the input with the 2nd array and say score++ if he was correct.

This means that you then can for-loop over the arrays and have a very lean code structure.

You would only have an intro screen, a quiz screen (showing the array questions), a results screen (you have 5 of 7 answers correct).

My version below would have the questions hard coded which gives you a lot of redundant code… and a lot of screens. The current screen is indicated by variable state by the way.

Chrisir



boolean InButtonSelection = true;
PImage bg;

int state=0;

void setup() {
  size( 1366, 768);
  bg = loadImage("qrC6FvL.jpg");
}

void draw() {

  background(255);//bg

  //fill(0, 255, 0);
  //rect (300, 300, 300, 300);
  //fill(255, 0, 0);
  //rect (700, 300, 300, 300);

  noFill();
  rect (100, 100, 200, 200);
  fill(0);
  text("Weiter", 110, 140);

  switch(state) {
  case 0: 
    fill(0, 0, 0);
    text("Frage 1:", 600, 150);
    text("Wir haben einen nicht gelisteten Helfer.", 350, 190);

    fill(0, 255, 0);
    rect (300, 300, 300, 300);
    textSize(32);
    fill(0, 51, 0);
    text("WAHR", 400, 450);

    fill(255, 0, 0);
    rect (700, 300, 300, 300);
    textSize(32);
    fill( 128, 0, 0);
    text("FALSCH", 800, 450);
    break;

  case 1:
    text("Frage 2:", 600, 150);
    text("Wir .....................................", 350, 190);
    fill(0, 255, 0);
    rect (300, 300, 300, 300);
    textSize(32);
    fill(0, 51, 0);
    text("WAHR", 400, 450);

    fill(255, 0, 0);
    rect (700, 300, 300, 300);
    textSize(32);
    fill( 128, 0, 0);
    text("FALSCH", 800, 450);

    break;

  case 2:
    text("Frage 3:", 600, 150);
    text("Wir .....................................", 350, 190);
    fill(0, 255, 0);
    rect (300, 300, 300, 300);
    textSize(32);
    fill(0, 51, 0);
    text("WAHR", 400, 450);

    fill(255, 0, 0);
    rect (700, 300, 300, 300);
    textSize(32);
    fill( 128, 0, 0);
    text("FALSCH", 800, 450);

    break; 

  default:
    text("GAME OVER ", 600, 150);
    break;
  }//switch
}

void mousePressed() {
  //  if (InButtonSelection) {
  //   }

  if (mouseY > 100 && 
    mouseY < 350 && 
    mouseX > 100 &&
    mouseX < 350 ) {
    // mouse //
    state++;
  } else if (false ) {
    //
  }
}
//
1 Like