How to do a true or false game?

Hello!

I want to make a true or false game, with these questions:

String Question1 = "Wir haben einen nicht gelisteten Helfer.";
String Question2 = "           Wir sind das erste Mal dabei.";
String Question3 = "Unser Team besteht nur aus Leuten aus der 7. Klasse.";
String Question4 = "          Unserer ITler ist der coolste.";
String Question5 = "Beim letzten Wettkampf kamen wir in die Top 5.";
String Question6 = "Unsere Schule stellt ein anderes Team.";

The Quiz has to appear, when you click the “QUIZ” Button, and there has to be this back button:

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

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

,which brings you back to State 0 = the button-menu.

I just dont know, how to make something like that and it would be really nice, if you helped me!

Hole code:

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

/* boolean answer1 = true;
boolean answer2 = false;
boolean answer3 = false;
boolean answer4 = true;
boolean answer5 = false;
boolean answer6 = true;

String Question1 = "Wir haben einen nicht gelisteten Helfer.";
String Question2 = "           Wir sind das erste Mal dabei.";
String Question3 = "Unser Team besteht nur aus Leuten aus der 7. Klasse.";
String Question4 = "          Unserer ITler ist der coolste.";
String Question5 = "Beim letzten Wettkampf kamen wir in die Top 5.";
String Question6 = "Unsere Schule stellt ein anderes Team.";

int currentQuestion = 1;

*/


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(200, 0, 0); 
  else stroke(0);
  rect(x1, y1, w1, h1);
  if ( over(x2, y2, w2, h2) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x2, y2, w2, h2);
  if ( over(x3, y3, w3, h3) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x3, y3, w3, h3);
  if ( over(x4, y4, w4, h4) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x4, y4, w4, h4);
  if ( over(x6, y6, w6, h6) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x6, y6, w6, h6);
  draw_quiz_text();
}

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

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

void drawQuiz() {
  
  background(lightblue);
  
  
  
   
}

void draw_quiz_text() {
  
  fill(184, 18, 18);
  textSize(150);
  stroke(0);
  textLeading(250);
  textAlign(CENTER);
  text(QUIZ, x6 + 95, y6 + 220);
  textAlign(LEFT);
  textSize(40);
  fill(0, 0, 200);
  
}

void setup() {
  fullScreen();
  //size(1920, 1200);
  fill(0, 0, 200);
  strokeWeight(10);
}

void draw() {
  background(68, 235, 7);
  
  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 ) drawQuiz();
}

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;
    if ( over(x7, y7, w7, h7) )  state = 7;
    //if ( over(x7, y7, w7, h7) )  currentQuestion ++;
    if ( over(x8, y8, w8, h8) )  state = 8;
    //if ( over(x8, y8, w8, h8) )  currentQuestion ++;
  } else {
    if ( over(x5, y5, w5, h5) )  state = 0;
  }
}



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

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

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

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

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

i understand you wanted us to help about a

void keyPressed() {}

https://processing.org/reference/keyPressed_.html

OR

void mousePresed() {}

https://processing.org/reference/mousePressed_.html
if over your buttons.

for your ( good prepared ) buttons?

because from here i not see any operation
and NO QUESTION from you what you have in mind how to do it?
keyboard or mouse click?


but i want to start with something different after i see your code.
it is about the questions

recommend:
-a- a array of String[] for the questions
-b- a array of boolean[] for the correct answers

That’s my code from
Here: Background(image) not working

yes because you helped me

but the last version I posted there in the other thread is much better than what you have there

but state gives you the screen you are on, show a different screen for each question

in draw

if(state == 0) {
  text( Question1 ....
}
else if(state == 0) {
  // Frage 2 !!!!!!!
  text( Question2 ....
}

similar in the function mousePressed() :

when you get a mousePressed :

if(state == 0) {
  //Question1 ....
  if(over(.....
      userAnsweredWAHR=true;
   else if (over....
     userAnsweredWAHR=false;
   
    if (answer1==userAnsweredWAHR) {
             correctTotal++;
             maybe say showCorrectScreen=true; here
            }
        else {
             correctWrong++; 
          }
}//if state
else if(state == 0) {
  // Frage 2 !!!!!!!
  
}

my old code

int state = 0;

boolean testSketch = true;//false;//true;

int x1, y1, w1, h1;   //Button oben links
int x2, y2, w2, h2;   //Button oben rechts
int x3, y3, w3, h3;   //Button unten links
int x4, y4, w4, h4;   //Button unten rechts
int x5, y5, w5, h5;   // Button zurück

/* // hard coded
 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=730, w3=250, h3=250;   //Button unten links
 int x4=1570, y4=730, w4=250, h4=250;   //Button unten rechts
 int x5=80, y5=870, w5=250, h5=100;   // Button zurück
 */

// ---------------------------------------------------------------------------
// processing Core Functions 

void settings() {
  if ( testSketch ) 
    size(600, 400);
  else
    fullScreen();
}

void setup() {
  setup_buttons();
  fill(0, 0, 200);
  strokeWeight(5);
  textSize(20);
}

void draw() {
  background(200, 100, 200);

  if ( state == 0 ) draw_4_buttons();
  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();
}

// ---------------------------------------------------------------------------
// belonging to setup()

void setup_buttons() {
  x1 = width/10;
  y1 = height/10;
  w1 = 2*x1;
  h1 = 2*y1;

  x2 = width-x1-w1;
  y2 = y1;
  w2 = w1;
  h2 = h1;

  x3 = x1;
  y3 = height-y1-h1;
  w3 = w1;
  h3 = h1;

  x4 = x2;
  y4 = y3;
  w4 = w1;
  h4 = h1;

  x5 = x3;
  y5 = y3;
  w5 = w1;
  h5 = h1/2;
}

// ---------------------------------------------------------------------------
// belonging to draw()

void draw_4_buttons() {
  text("some text page 0 ", 120, height/2);

  //_______ stat 0 only
  if ( over(x1, y1, w1, h1) ) 
    stroke(200, 0, 0); 
  else stroke(0);
  rect(x1, y1, w1, h1);
  pushStyle();
  fill(0);
  text("1", x1+33, y1+33);
  popStyle();

  if ( over(x2, y2, w2, h2) )
    stroke(200, 0, 0); 
  else stroke(0);
  rect(x2, y2, w2, h2);
  pushStyle();
  fill(0);
  text("2", x2+33, y2+33);
  popStyle();

  if ( over(x3, y3, w3, h3) )
    stroke(200, 0, 0); 
  else stroke(0);
  rect(x3, y3, w3, h3);
  pushStyle();
  fill(0);
  text("3", x3+33, y3+33);
  popStyle();

  if ( over(x4, y4, w4, h4) ) 
    stroke(200, 0, 0); 
  else stroke(0);
  rect(x4, y4, w4, h4);
  pushStyle();
  fill(0);
  text("4", x4+33, y4+33);
  popStyle();
}

void draw_back_button_and_some_text1() {
  text("some text page1 ", 20, 20);
  draw_zurueck_button();
}

void draw_back_button_and_some_text2() {
  text("some text page2 ", 20, 20);
  draw_zurueck_button();
}

void draw_back_button_and_some_text3() {
  text("some text page3 ", 20, 20);
  draw_zurueck_button();
}

void draw_back_button_and_some_text4() {
  text("some text page4 ", 20, 20);
  draw_zurueck_button();
}

void draw_zurueck_button() {
  //_ state 1,2,3
  if ( over(x5, y5, w5, h5) ) 
    stroke(200, 0, 0); 
  else stroke(0);
  rect(x5, y5, w5, h5);
  pushStyle();
  fill(255);
  text("zurück", x5+33, y5+22);
  popStyle();
}

// -------------------------------------------------------------
// Inputs 

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(x5, y5, w5, h5) )  state = 0;
  }
}

// -------------------------------------------------------------
// Tools

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

where do i have do declare boolean userAnsweredWAHR?

Before setup ()

I have to write something more

Isn‘t this pretty much a 1:1 copy of this :

Seems like it‘s an assignment.

1 Like

yes, that is the question of my friend, that works with me, but we dont only want the quiz, but also the 4 other buttons

you have to to write more?

also, if i click the space, where the green “right” button is, while im in the button selection, the “correct” screen shows up to? Why?

if (correctAnswers[0]==userAnsweredWAHR) {
             
             if(state > 4) {    
             correctTotal++;
             }
            }
        else {
             incorrectTotal++; 
          }
void showCorrectScreen() {

  draw_zurueck_button(); 
  text(correctAnswerText, 300, 300);
}
if ( over(x7, y7, w7, h7) ) {

    userAnsweredWAHR = true;
    state = 100;
  } else if ( over(x8, y8, w8, h8) ) {

    userAnsweredWAHR = false;
  }
if ( state == 100 ) {

    showCorrectScreen();
  }

Everything:

int state = 0;
color green = color(72, 255, 0);
color red = color(255, 17, 0);
color lightblue = color(3, 182, 252);
boolean userAnsweredWAHR;
int correctTotal = 0;
int incorrectTotal = 0;
String correctAnswerText = "Richtig!";


String[] Questions = {"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."};

boolean[] correctAnswers = {true, false, false, true, false, true};


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(200, 0, 0); 
  else stroke(0);
  rect(x1, y1, w1, h1);
  if ( over(x2, y2, w2, h2) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x2, y2, w2, h2);
  if ( over(x3, y3, w3, h3) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x3, y3, w3, h3);
  if ( over(x4, y4, w4, h4) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x4, y4, w4, h4);
  if ( over(x6, y6, w6, h6) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x6, y6, w6, h6);
  draw_quiz_text();
}

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

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

void draw_left_quiz_button() {

  rect(x7, y7, w7, h7);
}

void draw_right_quiz_button() {

  rect(x8, y8, w8, h8);
}


void draw_quiz_text() {

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

void setup() {
  fullScreen();
  //size(1920, 1200);
  fill(0, 0, 200);
  strokeWeight(10);
}

void draw() {
  background(68, 235, 7);

  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 ) {

    background(lightblue);
    textSize(60);

    text(Questions[0], 370, 150);
    fill(green);
    draw_left_quiz_button();
    fill(red);
    draw_right_quiz_button();
    draw_zurueck_button();
  }

  if ( state == 100 ) {

    showCorrectScreen();
  }
}

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 ( over(x5, y5, w5, h5) )  state = 0;
  }

  //For the Quiz

  if ( over(x7, y7, w7, h7) ) {

    userAnsweredWAHR = true;
    state = 100;
  } else if ( over(x8, y8, w8, h8) ) {

    userAnsweredWAHR = false;
  }

  if (correctAnswers[0]==userAnsweredWAHR) {

    if (state > 4) {    
      correctTotal++;
    }
  } else {
    incorrectTotal++;
  }
}


void showCorrectScreen() {

  draw_zurueck_button(); 
  text(correctAnswerText, 300, 300);
}

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

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

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

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

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

i changed a few things, but it still doesnt work:

int state = 0;
color green = color(72, 255, 0);
color red = color(255, 17, 0);
color lightblue = color(3, 182, 252);
boolean userAnsweredWAHR = false;
int correctTotal = 0;
int incorrectTotal = 0;
String correctAnswerText = "Richtig!";


String[] Questions = {"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."};

boolean[] correctAnswers = {true, false, false, true, false, true};


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(200, 0, 0); 
  else stroke(0);
  rect(x1, y1, w1, h1);
  if ( over(x2, y2, w2, h2) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x2, y2, w2, h2);
  if ( over(x3, y3, w3, h3) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x3, y3, w3, h3);
  if ( over(x4, y4, w4, h4) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x4, y4, w4, h4);
  if ( over(x6, y6, w6, h6) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x6, y6, w6, h6);
  draw_quiz_text();
}

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

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

void draw_left_quiz_button() {

  rect(x7, y7, w7, h7);
}

void draw_right_quiz_button() {

  rect(x8, y8, w8, h8);
}


void draw_quiz_text() {

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

void setup() {
  fullScreen();
  //size(1920, 1200);
  fill(0, 0, 200);
  strokeWeight(10);
}

void draw() {
  background(68, 235, 7);

  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 ) {

    background(lightblue);
    textSize(60);

    text(Questions[0], 370, 150);
    fill(green);
    draw_left_quiz_button();
    fill(red);
    draw_right_quiz_button();
    draw_zurueck_button();
  }

  if ( state == 100 ) {

    showCorrectScreen();
  }
}

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 ( over(x5, y5, w5, h5) )  state = 0;
  }

  //For the Quiz

  if ( over(x7, y7, w7, h7) ) {

    if(state != 0 && state != 1 && state != 2 && state != 3 && state != 4)
    userAnsweredWAHR = true;
    state = 100;
  } else if ( over(x8, y8, w8, h8) ) {

    userAnsweredWAHR = false;
  }

  if (correctAnswers[0]==userAnsweredWAHR) {

    if (state > 4) {    
      correctTotal++;
    }
  } else {
    incorrectTotal++;
  }
}


void showCorrectScreen() {

  draw_zurueck_button(); 
  text(correctAnswerText, 300, 300);
}

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

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

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

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

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

I tried to look at your code.

I had difficulties because my laptop monitoris just 650 high, so some of your buttons are toofar down!

Now. You have an array Questions, so you need an variable index for this, so you know which question to ask!!! But you don’t use an index, only 0 ! After a question, you want to increase index. Do you want state to be the index of Questions?

You also have an array correctAnswers that hopefully match Questions

if (correctAnswers[0]==userAnsweredWAHR) {

here you use 0 instead of an index!!!

These lines follow immediately:

    if (state > 4) {    
      correctTotal++;
    }
  } else {
    incorrectTotal++;
  }

but what is the purpose of (state > 4) ?


these lines:

if ( over(x7, y7, w7, h7) ) {

    if (state != 0 && state != 1 && state != 2 && state != 3 && state != 4)
      userAnsweredWAHR = true;
    state = 100;
  } else if ( over(x8, y8, w8, h8) ) {

    userAnsweredWAHR = false;
  }

Err…

I guess, button 7 is WAHR button, and button 8 is FALSCH button. OK.

if ( over(x7, y7, w7, h7) ) {
    userAnsweredWAHR = true;
} else if ( over(x8, y8, w8, h8) ) {
    userAnsweredWAHR = false;
}

if (userAnsweredWAHR == correctAnswers[index]) 
state=100;  // Richtig screen 
else state=200;  // Falsch screen

You need to take care of index.

Why if (state != 0 && state != 1 && state != 2 && state != 3 && state != 4) ??

1 Like

Okay, try to implement this principle:

  • state is NOT the index.

  • index is a separate variable you take care of.

state is a variable that tells you the screen:
there are several screens that you go through:

  1. Start screen
  2. You ask a question with answer buttons
  3. You show either a richtig or falsch screen (state 100 and 200 - after these say state = 2)
  4. You show a game over screen (like 3 of 5 answers were correct)

Especially screen 2 and 3 you should show again and again. state tells you which screen to show and where to go next.


The variable index is a totally different thing and tells you the number of question to ask inside the screen. See last post.


How to program

Imagine you run a office or a company and have to take care of what’s going on. Make sure state and index always have the correct value.

  • Change them when necessary (E.g. state=100;).
  • Evaluate them and act accordingly. To evaluate use if(state== or switch(state). The variable index you use as an index: text(Questions[index].... or if (correctAnswers[index]==userAnsweredWAHR) {

Stick to these principles and re-write your code please.

Chrisir

wie kommst du auf “index”? das habe ich nie benutzt. Außerdem verstehe ich nicht ganz, wie ich das mit den Fragen machen soll, könntest du eine Frage als Beispiel machen?

@Chrisir
Ich habe jetzt ein bisschen copypastet und es sollte jetzt funktionieren, soweit, wie ich es von einem zu kleinen Laptop Screen sagen kann.

Das Problem ist, dass ich auf der letzten Seite des Quiz eine IndexOutOfBounds exception bekomme, aber nicht weiß, wie ich das behebe.
Der zweite Fehler besteht darin, dass jedes mal, wenn man auf richtig oder falsch klickt, der Bildschirm kurz grün aufleuchtet ( 0.1 s ), vielleicht wird da kurz ein falscher Screen angezeigt.

Außerdem sind Texte u.ä. noch nicht an der Richtigen Position, aber das stelle ich zuhause an einem größeren Screen ein.

Code:

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


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(200, 0, 0); 
 else stroke(0);
 rect(x1, y1, w1, h1);
 if ( over(x2, y2, w2, h2) ) stroke(200, 0, 0); 
 else stroke(0);
 rect(x2, y2, w2, h2);
 if ( over(x3, y3, w3, h3) ) stroke(200, 0, 0); 
 else stroke(0);
 rect(x3, y3, w3, h3);
 if ( over(x4, y4, w4, h4) ) stroke(200, 0, 0); 
 else stroke(0);
 rect(x4, y4, w4, h4);
 if ( over(x6, y6, w6, h6) ) stroke(200, 0, 0); 
 else stroke(0);
 rect(x6, y6, w6, h6);
 draw_quiz_text();
}

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

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




void draw_quiz_text() {

 fill(184, 18, 18);
 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 (700, 300, 300, 300);
   fill(0, 255, 0);
   rect (300, 300, 300, 300);
   fill(0, 0, 0);
   text(text1[index], 600, 150);
   text(text2[index], 350, 190);
   textSize(32);
   fill(0, 51, 0);
   text("WAHR", 400, 450);
   textSize(32);
   fill( 128, 0, 0);
   text("FALSCH", 800, 450);
   pushStyle();
 } else if (flag == 1 || flag == 2) {  
   //
   resultScreen();
 } else if (flag == 3) {
   pushStyle();    

   draw_zurueck_button();

   textSize(32);
   text("Das war's", 600, 150);
   text("Danke für's mitmachen", 600, 200);
   pushStyle();
   flag=0;
   index++;
 } 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);
}

void draw() {
 background(68, 235, 7);

 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();
}

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 ( over(x5, y5, w5, h5) )  state = 0;
 }

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

 //------------------------
 if (flag == 0) {
   // Question 1
   if (mouseX>300 && mouseX < 600 && mouseY >300 && mouseY <600) {
     flag = 1;
   }
   if (dist(mouseX, mouseY, 849, 450)<125) {
     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() {
 fill(0);
 text("some text page1 ", 760, 50);
 draw_zurueck_button();
}

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

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

void draw_back_button_and_some_text4() {
 fill(0);
 text("some text page4 ", 760, 50);
 draw_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      ) ;
}

at line 136
you increase the index,
if that is bigger as the question list, you need to do SOMETHING

    index++; // need limit 
    if ( index >= text2.length ) state=7;// final score screen or exit()

when posting code at forum the screen size ( 5000,3000 ) and fullScreen()
esp if the code runs into error
is not nice.

you could start your project from this template:

// file: development_template

// while develop processing code
// it can be good to see some diagnostic printout at CONSOLE
// so fullscreen ( big size ) CANVAS use is not recommended
// and sharing some oversized/fullscreen code at forum, esp in case of error, not funny!

// but if use hard coded object positions ( like buttons at 1500,900 ) difficult
// so try like this:

boolean dev = true; //________________ use temporary small screen
boolean diag = dev; //________________ print to console ( also can adjust separately )
int my_w = 500, my_h = 300; //________ my canvas window width height as small develop screen

int rx, ry, rw, rh; //________________ test object is a rectangle

void setup_object() { //______________ using width and height only possible after setup / size /
  rx = width/10;
  ry = rx;
  rw = width - 2*rx;
  rh = height - 2*ry;
  if ( diag ) println("rect(rx,ry,rw,rh)", rx, ry, rw, rh);
}

void draw_object() {
  fill(0, 200, 0);
  stroke(0, 0, 200);
  strokeWeight(5);
  rect(rx, ry, rw, rh);
}

void settings() {
  if ( dev ) size ( my_w, my_h ); //__ default JAVA2D optional FX2D, P2D, P3D
  else       fullScreen(); //_________ optional ( renderer , display )
}

void setup() { //_____________________ in here we know how big the screen is we use: 
  setup_object(); //__________________ so we are able to adjust objects position correctly for any screen size
}

void draw() {
  background(200, 200, 0);
  draw_object();
}

void keyPressed() {
  if ( diag ) println("key "+key+" keyCode "+keyCode);
  if ( key == 'd' ) {
    diag = ! diag;
    if ( diag ) println("use key ... , [d] diag toggle");
    else        println("diag OFF");
  }
}

void mousePressed() {
  if ( diag ) println("click");
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  if ( diag ) println("mouseWheel "+e);
}

as the canvas can be resize-able

better
// file: development_template

// while develop processing code
// it can be good to see some diagnostic printout at CONSOLE
// so fullscreen ( big size ) CANVAS use is not recommended
// and sharing some oversized/fullscreen code at forum, esp in case of error, not funny!

// if a window is resizable you might want to adjust
// could use: https://gist.github.com/GoToLoop/1d1eb18f468a7d5758469707276b6ea1
// but it might also not be wanted ? image proportion? so here use just a optional key [r]

// but if use hard coded object positions ( like buttons at 1500,900 ) difficult
// so try like this:

boolean dev = true; //________________ use temporary small screen
boolean diag = dev; //________________ print to console ( also can adjust separately )
int my_w = 500, my_h = 300; //________ my canvas window width height as small develop screen

int rx, ry, rw, rh; //________________ test object is a rectangle

void setup_object() { //______________ using width and height only possible after setup / size /
  // readback:
  my_w = width;
  my_h = height;
  rx = my_w/10;
  ry = rx; // my_h/10;
  rw = my_w - 2*rx;
  rh = height - 2*ry;
  if ( diag ) println("rect(rx,ry,rw,rh)", rx, ry, rw, rh);
}

void draw_object() {
  fill(0, 200, 0);
  stroke(0, 0, 200);
  strokeWeight(5);
  rect(rx, ry, rw, rh);
}

void settings() {
  if ( dev ) size ( my_w, my_h ); //__ default JAVA2D optional FX2D, P2D, P3D
  else       fullScreen(); //_________ optional ( renderer , display )
}

void setup() { //_____________________ in here we know how big the screen is we use: 
  surface.setResizable(true);
  surface.setTitle("myTitle");
  setup_object(); //__________________ so we are able to adjust objects position correctly for any screen size
}

void draw() {
  background(200, 200, 0);
  draw_object();
}

void keyPressed() {
  if ( diag ) println("key "+key+" keyCode "+keyCode);
  if ( key == 'r' ) setup_object(); //___ use after manual resize window
  if ( key == 'd' ) {
    diag = ! diag;
    if ( diag ) println("use key [r] adjust , [d] diag toggle");
    else        println("diag OFF");
  }
}

void mousePressed() {
  if ( diag ) println("click");
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  if ( diag ) println("mouseWheel "+e);
}

1 Like

I did thism but know the endscreen is vanishing after 1 second:

  } else if (flag == 3) {
    pushStyle();    

    draw_zurueck_button();

    index++;
    if ( index >= text2.length ) state=7;
    textSize(32);
    text("Das war's", 600, 150);
    text("Danke für's mitmachen", 600, 200);
    pushStyle();
    flag=0;

I fixed it now, but the screen is flashing green after you answer a question, why is that?

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


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(200, 0, 0); 
  else stroke(0);
  rect(x1, y1, w1, h1);
  if ( over(x2, y2, w2, h2) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x2, y2, w2, h2);
  if ( over(x3, y3, w3, h3) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x3, y3, w3, h3);
  if ( over(x4, y4, w4, h4) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x4, y4, w4, h4);
  if ( over(x6, y6, w6, h6) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x6, y6, w6, h6);
  draw_quiz_text();
}

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

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




void draw_quiz_text() {

  fill(184, 18, 18);
  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 (700, 300, 300, 300);
    fill(0, 255, 0);
    rect (300, 300, 300, 300);
    fill(0, 0, 0);
    text(text1[index], 600, 150);
    text(text2[index], 350, 190);
    textSize(32);
    fill(0, 51, 0);
    text("WAHR", 400, 450);
    textSize(32);
    fill( 128, 0, 0);
    text("FALSCH", 800, 450);
    pushStyle();
  } else if (flag == 1 || flag == 2) {  
    //
    resultScreen();
  } else if (flag == 3) {
    pushStyle();    

    draw_zurueck_button();

    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);
}

void draw() {
  background(68, 235, 7);

  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 war's", 600, 150);
    text("Danke für's mitmachen", 600, 200);
    pushStyle();
  }
}

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 ( over(x5, y5, w5, h5) )  state = 0;
  }

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

  //------------------------
  if (flag == 0) {
    // Question 1
    if (mouseX>300 && mouseX < 600 && mouseY >300 && mouseY <600) {
      flag = 1;
    }
    if (dist(mouseX, mouseY, 849, 450)<125) {
      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() {
  fill(0);
  text("some text page1 ", 760, 50);
  draw_zurueck_button();
}

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

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

void draw_back_button_and_some_text4() {
  fill(0);
  text("some text page4 ", 760, 50);
  draw_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      ) ;
}