Link or call image when answere correct (Quiz with keyboard input)

Processing Coding Questions
1

Hello everyone,

Im coding a quiz but Im just a beginner.
So there is one thing I need help with:
What I want:
When the answer is correct it needs to go to the next picture.
How do I draw the next image when the answer is correct?
Can I do something like:
img=0
when answer is correct: img++
so then the next image is drawn for example img2
So I have to do this with picking a picture from an array but I don’t know how to set that up and pick it
Looking forward to a response!

PImage img1;
PImage img2;
PImage img3;
PImage img4;


String[] questions  ={
  "Rekenen voorbeeld", 
  "Vraag 1\n 5+5=?", 
  "Vraag 2\n 5+20=?", 
  "Vraag 3\n 20-5=?", 
  "Klaar, Goed gedaan!"};
  
String[] goodanswers={
  "n.a.", 
  "a", 
  "b", 
  "c", 
  "n.a."};
int q=0, Correct=0, Pogingen = 0;

void setup() {
  size (1280, 800);
  img1 = loadImage("muur.jpg");
  img2 = loadImage("kinderen.jpg");
  img3 = loadImage("pink_wall.png");
  img4 = loadImage("schoolkind.jpg");
  
  println("mouse click: LEFT: next question, RIGHT: start again");
  println("key: [a],[b], ... as indicated in the questions");
}

void draw() {
  background(0, 0, 0);
  image(img1, 0, 0);
  fill(300,800,200); // text color
  textSize(25);
    //positie text
  text(questions[q], 1000, 200);

  //score
if ( Correct > 0 ) text("Vragen: "+Correct+" Pogingen: "+Pogingen, width - 300, height - 20);
}

void mousePressed() {
  if ( mouseButton == LEFT ) q++;
  if ( q > 4 ) exit();
  if ( mouseButton == RIGHT ) q = 0;
}

void keyPressed() {
  //println("key: "+key+" keyCode "+keyCode);
  if ( goodanswers[q].equals(str(key)) ) { 
        println("++ Correct!");
    Correct++;
    q++;
  } else { 
    println("-- Helaas..., probeer opnieuw of skip met muis LEFT click");
    Pogingen++;
  }
}
2

Hi @jelledgwn,

Welcome to the forum! :wink:

You nailed it! You almost have the solution, you just need to implement it.

What you’ll need is an array of images. In Processing images are stored using an instance of the PImage class. You could declare your array as:

img1 = loadImage("...");
img2 = loadImage("...");
// ...

PImage[] images = {img1, img2, img3, img4};

directly by passing the images as elements (just like you did with questions and goodanswers arrays).

But as programmers, we can do better!
Let’s suppose that you have another image to add. You can just declare a new variable imgX and add it to your array. But what if we could do it automatically?

The idea is to load an image into an array a certain number of times → for loop!

for (int i = 0; i < nbImages; i++) {
  PImage img = loadImage("???.png");
  // Store image into an array
}

First what filename are we going to put? If you want to keep normal names for your images, you can store them into an array and use that array for loading them:

String imgNames = {"muur", "kinderen", "pink_wall", "schoolkind"};

for (int i = 0; i < imgNames.length; i++) {
  String name = imgName[i];
  PImage img = loadImage(name + ".png");
  // Put it in the array
}

Another solution is to name your images 1.png, 2.png… and load them with the loop index

Now you need to store that image into an array. You can declare your array of images like this:

PImage[] images = new PImage[imgNames.length];

by passing the length of the image names. You can then put an element in the for loop at that index:

String imgNames = {"muur", "kinderen", "pink_wall", "schoolkind"};
PImage[] images = new PImage[imgNames.length];

for (int i = 0; i < imgNames.length; i++) {
  String name = imgName[i];
  PImage img = loadImage(name + ".png");

  images[i] = img;
}

Now in the draw function you can access the current image with an index that is increasing when the answer is correct. :yum:

Have fun!

1 Like
6

I solved it!
Here is my code for other users that have the same problem

String[] imgNames = {"a", "b","c","d"};
PImage[] images = new PImage[4];
int q=0, Correct=0, Pogingen = 0, counter = 0;

import processing.sound.*;
SoundFile file;


String[] questions  ={
  "startscreen", //press S to start
  "Vraag 1\n 5+5=?", 
  "Vraag 2\n 5+20=?", 
  "Vraag 3\n 20-5=?", 
  "Klaar, Goed gedaan!"};
 
String[] goodanswers={
  "s", 
  "w", 
  "e", 
  "r", 
  "n.a."};

void setup() {
  file = new SoundFile(this, "sample.mp3");//plays when wrong answer
  
for(int i = 0; i < imgNames.length; i++){
  String name = imgNames[i];
  PImage img = loadImage(name + ".jpg");
  images[i] = img;
  }
    
  size (1280, 800);
  background(0,0,0);
  image(images[0],0, 0);  
}


void draw() {
  fill(255,255,255); // text color
  textSize(25);
}

//if wanted skip question
/*
void mousePressed() {
  if ( mouseButton == LEFT ) q++;
  if ( q > 4 ) exit();
  if ( mouseButton == RIGHT ) q = 0;
}
*/  
  
void keyPressed() {
  //println("key: "+key+" keyCode "+keyCode);
    if ( goodanswers[q].equals(str(key)) ) { 
    println("++ Correct!");
    counter++;
    image(images[counter],0,0);
 //score up   
    Correct++;
// next question
    q++;
    
       //score
if ( Correct > 0 ) 
    background(0, 0, 0);
    image(images[counter],0,0);
    text("Vragen: "+Correct+" Pogingen: "+Pogingen, width - 300, height - 20);
    text(questions[q], 325, 350);
  } else { 
    println("-- Helaas..., probeer opnieuw");
    //play mp3 file
    file.play();
   //score up attempts
    Pogingen++;
  }
}

Thanks and good luck everyone

1 Like
7

@josephh

Now my code is working im realising I also want to use .gif files.
How can I load those, because now I only can load .png

So to be more clear:
Lets say I have 5 png and 3 gif and I want to call them in that order. Is that possible

8

Good question. My solution can’t handle that as you noticed.

One solution would be to list the files in a specific folder (inside the data folder) programmatically with Processing then load those images in a loop.

You can check this SO thread:

With this, if you add a new file to the folder it’s going to be picked up automatically by your program :grinning: