Help with making a Quiz in Processing

How to create questions buttons so the programm knows from the position which answer is correct. Also don’t know how to set up the question class correctly. Second big problem: how to shrink the code.
Not very familiar with processing, having to do a project for university.

Every help will be greatly appreciated.

Main

Preformatted text`Button [] buttons = new Button[3];

Question [] questions = new Question [ 3 ];

int indexQuestions = 0;


final int StartScreen=0;   
final int play=1;       
final int gameOver=2;   

int status = StartScreen;      

void setup() {
  size(1280, 800);



  
  questions[0] = new Question(  "Q1? ", "Answer1", "Answer2", "Answer3", "Answer4", 2, 640, 100 );
  questions[1] = new Question(  "Q1? ", "Answer1", "Answer2", "Answer3", "Answer4", 3, 640, 100 );
  questions[2] = new Question(  "Q1? ", "Answer1", "Answer2", "Answer3", "Answer4", 3, 640, 100 );

  buttons[0] = new Button("START", 1050, 480, 200, 80); //Start
  buttons[1] = new Button("HOW TO", 800, 480, 200, 80); // How To
  buttons[2] = new Button("IMPRESSUM", 1000, 700, 250, 80); // Impressum
}

void draw() {

  background(96, 154, 166);
  PImage img;
  img = loadImage("trump_face.png");
  image(img, 100, 120);


  switch (status) {
  case StartScreen:
    buttons[0].Draw();
    buttons[1].Draw();
    buttons[2].Draw();

    if (buttons[1].MouseIsOver()) {
      img = loadImage("impressum.jpg");
      image(img, 0, 0);
    } 
    
    if (buttons[2].MouseIsOver()) {
      img = loadImage("impressum.jpg");
      image(img, 0, 0);
    }
    break;


  case play:

    img = loadImage("game.png");
    image(img, 0, 0);
    questions[indexQuestions].display();
    break;

  case  gameOver:
    text ( "The END.", 200, 200 );
    text ( "Click in the lowest right corner .", 200, 400 );
    break;
  } 
} 

void mousePressed() {
  switch (status) {

  case StartScreen:
    if (buttons[0].MouseIsOver()) {   
      status = play;

      break;
    }

  case play:
    if (buttons[1].MouseIsOver()) 
    { 
      
      if (questions[indexQuestions].check(key)) {
        println ("Good");
      } else {
        println ("No");
      }
     
      indexQuestions++;
     
      if (indexQuestions>questions.length-1)
      {
        status = gameOver;
      } // if
    } // if
    break;

  case gameOver:
    if (buttons[2].MouseIsOver()) {
      // restart 
      indexQuestions=0;
      status=StartScreen;
    }
    break;
  } 
}

Buttons

class Button {
 
  String myText;
  float myX;
  float myY;
  float myWidth;
  float myHeight;

 Button( String tempText, float tempX, float tempY, float tempWidth, float tempHeight  ) {

    myText = tempText;
    myX = tempX;
    myY = tempY;
    myWidth = tempWidth;
    myHeight = tempHeight;
    
  }

  void Draw() {

    //buttonLook
    noStroke();
    fill(255,0,0);
    rect(myX,myY,myWidth,myHeight);
          
    textSize(34);
    fill(255);
    textAlign(CENTER, CENTER);
    text(myText, myX + ( myWidth / 2 ), myY + ( myHeight / 2 ) );
      
  }


  boolean MouseIsOver() {
    if (mouseX > myX && mouseX < myX+myWidth && mouseY > myY && mouseY < myY+myHeight) {
      return true;
    }
    return false;
  }
  
  
}

Class questions

class Question {
  String quest;
  String answer1, answer2, answer3, answer4 ;
  int correctAnswerNumber; 
  int posX, posY;
  
  
 
  Question (String que,   String answer1temp, String answer2temp, String answer3temp, String answer4temp,   int correctAnswerNumberTemp,   int x, int y) {
    this.quest = que;
    answer1=answer1temp;
    answer2=answer2temp;
    answer3=answer3temp;
    answer4=answer4temp;

    correctAnswerNumber = correctAnswerNumberTemp;
    posX=x;
    posY=y;
  }
 
  void position(int x, int y) {
    this.posX = x;
    this.posY = y;
  }
 
  void display() {
    textSize(34);
    text(quest, posX, posY);
    text(answer1, posX, posY+50);
    text(answer2, posX, posY+150);
    text(answer3, posX, posY+200);
    text(answer3, posX, posY+250);
    
  } // method 
 
  boolean check( char keyToTest ) {
    if (keyToTest=='1' && correctAnswerNumber==1) return true;
    if (keyToTest=='2' && correctAnswerNumber==1) return true; 
    if (keyToTest=='3' && correctAnswerNumber==1) return true;
    if (keyToTest=='3' && correctAnswerNumber==1) return true; 
    return false;
  } 
  
  
}

Edit your post, select your code, and hit the </> button to format it for the forums, please.

Without being able to copy, paste, and run your code easily, we are already disinclined to help you.

You need to also fix the indentation. To do that is easy: In the PDE, select the code you want to copy and then press Ctrl+t before you issue the copy command. When you posted here, follow Thomas’ advice.

Kf

@Haven also remember to keep your code Snippets between the tick marks :slight_smile:58%20PM let us know if you have any more questions

I’am as I said very new to prossessing let alone this forum. I hope the code is okay now.

At least now we can almost run your code.

After copy pasting the first chunk of code…

… and then copy pasting the second chunk of code…

… and then copy pasting the third chunk of code…

(Next time put it all in one chunk!)

I finally got your code to run… into a problem because you are loading an image which I don’t have.

So I have to remove that image. Running again I get a menu of sorts, but clicking a button causes it to try to load a second image I don’t have.

… But that’s a real problem.

You need to load all your images in setup(). You should not be loading them at all after setup(). Basically, DO NOT LOAD IMAGES IN draw(). The reason for this is simple: You only need to load the images once. You don’t need to reload them 60 times a second. If you’re wondering why your sketch is slow, THIS IS THE REASON. So first thing’s first: If you’re going to use these images, this is a good chunk of code:

PImage img_trump;
PImage img_impressum;
PImage img_game;

void setup() {
  size(1280, 800);
  img_trump = loadImage("trump_face.png");
  img_impressum = loadImage("impressum.jpg");
  img_game = loadImage("game.png"); 
  // ... the rest of setup() goes here...

For me it was logical to put the code in different chunks beacause they are in different tabs. Thanks for your reply

1 Like

Here is a neat example I wrote.

class Button {
  float x, y, w, h;
  String t;
  color c, co, ct;
  int v;
  Button(int value){
    v = value;
    x = width/2;
    y = height/2;
    w = 100;
    h = 30;
    c = color(128);
    co = color(196);
    ct = color(0);
    t = "";
  }
  void draw(){
    noStroke();
    fill(c);
    if( over() ){
      fill(co);
    }
    pushMatrix();
    translate(x,y);
    rect(0,0,w,h);
    fill(ct);
    textAlign(CENTER);
    text( t, w/2, h/2 + 4 );
    popMatrix();
  }
  boolean over(){
    return( x < mouseX && mouseX < x + w && y < mouseY && mouseY < y + h );
  }
  void mousePressed(){
    if( over() ){
      copeWithAnswer( v );
    }
  }
  void setText(String newText){
    t = newText;
  }
}

Button[] buttons;

void setup(){
  size(600,400);
  buttons = new Button[4];
  for( int i = 0; i < buttons.length; i++){
    buttons[i] = new Button(i);
    buttons[i].x = 80 + 120 * i ;
  } 
  prime_buttons();
}

void draw(){
  background(0);
  fill(255);
  text( questions[current_question][4], width/2, 100);
  for( int i = 0; i < buttons.length; i++){
    buttons[i].draw();
  }
}

void mousePressed(){
    for( int i = 0; i < buttons.length; i++){
    buttons[i].mousePressed();
  }
}

String[][] questions = {
  { "Triangle", "Square", "Circle", "Star", "What shape has three sides?", "0" },
  { "Blue", "Pink", "Purple", "Red", "What color is a normal brick?", "3" },
};
int current_question = 0;

void copeWithAnswer(int givenAnswer){
  if( int(questions[current_question][5]) == givenAnswer ){
    println( "RIGHT!" );
  } else {
    println( "WRONG!" );
  }
  current_question++;
  current_question%=questions.length;
  prime_buttons();
}

void prime_buttons(){
  for( int i = 0; i < buttons.length; i++){
    buttons[i].setText(questions[current_question][i]);
  }
}

Notice that there are only 4 buttons (they get reused for each question) and it doesn’t bother with a class for questions (just an array of them, where a question is 5 Strings).

I’d love to go into details about this but I am falling asleep. Study how it works and understand it and apply that to your own sketch.