# Link or call image when answere correct (Quiz with keyboard input)
**URL:** https://discourse.processing.org/t/link-or-call-image-when-answere-correct-quiz-with-keyboard-input/33222
**Category:** Coding Questions
**Created:** [November 1, 2021, 1:15pm UTC](https://discourse.processing.org/t/link-or-call-image-when-answere-correct-quiz-with-keyboard-input/33222 "2021-11-01T13:15:18Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@jelledgwn](https://discourse.processing.org/u/jelledgwn)
#### Post date: [November 1, 2021, 1:15pm UTC](https://discourse.processing.org/t/link-or-call-image-when-answere-correct-quiz-with-keyboard-input/33222/1 "2021-11-01T13:15:18Z")
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!
```auto
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++;
}
}
```
---
### Author:  [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [November 1, 2021, 5:35pm UTC](https://discourse.processing.org/t/link-or-call-image-when-answere-correct-quiz-with-keyboard-input/33222/2 "2021-11-01T17:35:47Z")
Hi @jelledgwn,
Welcome to the forum! 😉
> [@jelledgwn](#):
>
> 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!
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:
```processing
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!
```auto
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:
```auto
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:
```auto
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:
```auto
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. 😋
Have fun!
---
### Author:  [@jelledgwn](https://discourse.processing.org/u/jelledgwn)
#### Post date: [November 2, 2021, 10:02am UTC](https://discourse.processing.org/t/link-or-call-image-when-answere-correct-quiz-with-keyboard-input/33222/6 "2021-11-02T10:02:55Z")
I solved it!
Here is my code for other users that have the same problem
```auto
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
---
### Author:  [@jelledgwn](https://discourse.processing.org/u/jelledgwn)
#### Post date: [November 2, 2021, 10:16am UTC](https://discourse.processing.org/t/link-or-call-image-when-answere-correct-quiz-with-keyboard-input/33222/7 "2021-11-02T10:16:19Z")
@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
> [@josephh](#):
>
> ` PImage img = loadImage(name + ".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
---
### Author:  [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [November 3, 2021, 7:53pm UTC](https://discourse.processing.org/t/link-or-call-image-when-answere-correct-quiz-with-keyboard-input/33222/8 "2021-11-03T19:53:51Z")
> [@jelledgwn](#):
>
> 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
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 😀