Help with making a Quiz in Processing

Haven · August 3, 2018, 2:43pm

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

TfGuy44 · August 3, 2018, 3:08pm

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.

kfrajer · August 3, 2018, 5:06pm

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

dan850 · August 3, 2018, 8:08pm

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

Haven · August 4, 2018, 10:58am

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

TfGuy44 · August 4, 2018, 11:23am

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

Haven · August 4, 2018, 11:41am

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

TfGuy44 · August 4, 2018, 12:58pm

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.

Topic		Replies	Views
I really need help! to make a quiz Coding Questions homework	4	1366	January 16, 2019
Need help with creating a quiz Coding Questions homework	6	388	February 5, 2019
How to ask a question and receive and answer Coding Questions	2	3078	May 2, 2019
Survey creation Coding Questions	6	281	July 27, 2021
Text Converter (DESPERATE NEED!) Coding Questions homework	10	915	November 16, 2021

Help with making a Quiz in Processing

Related topics