# Help with making a Quiz in Processing

**URL:** <https://discourse.processing.org/t/help-with-making-a-quiz-in-processing/2333>\
**Category:** Coding Questions\
**Created:** [August 3, 2018, 2:43pm UTC](https://discourse.processing.org/t/help-with-making-a-quiz-in-processing/2333 "2018-08-03T14:43:07Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Haven](https://avatars.discourse-cdn.com/v4/letter/h/3ec8ea/32.png) [@Haven](https://discourse.processing.org/u/Haven)\
**Post date:** [August 3, 2018, 2:43pm UTC](https://discourse.processing.org/t/help-with-making-a-quiz-in-processing/2333/1 "2018-08-03T14:43:07Z")

</div>

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**

```auto
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**

```auto
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**

```auto
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;
  } 
  
  
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [August 3, 2018, 3:08pm UTC](https://discourse.processing.org/t/help-with-making-a-quiz-in-processing/2333/2 "2018-08-03T15:08:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [August 3, 2018, 5:06pm UTC](https://discourse.processing.org/t/help-with-making-a-quiz-in-processing/2333/3 "2018-08-03T17:06:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [August 3, 2018, 8:08pm UTC](https://discourse.processing.org/t/help-with-making-a-quiz-in-processing/2333/4 "2018-08-03T20:08:49Z")

</div>

@Haven also remember to keep your code Snippets between the tick marks 🙂 ![58%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/37a038edd046d08846b191357e693681b737def8.png) let us know if you have any more questions

---

<div class="post-metadata">

**Author:** ![Haven](https://avatars.discourse-cdn.com/v4/letter/h/3ec8ea/32.png) [@Haven](https://discourse.processing.org/u/Haven)\
**Post date:** [August 4, 2018, 10:58am UTC](https://discourse.processing.org/t/help-with-making-a-quiz-in-processing/2333/5 "2018-08-04T10:58:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [August 4, 2018, 11:23am UTC](https://discourse.processing.org/t/help-with-making-a-quiz-in-processing/2333/6 "2018-08-04T11:23:16Z")

</div>

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:

```auto
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...

```

---

<div class="post-metadata">

**Author:** ![Haven](https://avatars.discourse-cdn.com/v4/letter/h/3ec8ea/32.png) [@Haven](https://discourse.processing.org/u/Haven)\
**Post date:** [August 4, 2018, 11:41am UTC](https://discourse.processing.org/t/help-with-making-a-quiz-in-processing/2333/7 "2018-08-04T11:41:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [August 4, 2018, 12:58pm UTC](https://discourse.processing.org/t/help-with-making-a-quiz-in-processing/2333/8 "2018-08-04T12:58:46Z")

</div>

Here is a neat example I wrote.

```auto
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.