# Help with a quiz I need to create with the random()

Hello! So I’m really desperate about that homework I’ve got to do.
So the task is creating a quiz with 3 images as the answer options and those images always change their place. To chose one of those answers you click a Buttons that are below the images button “A” for image one, “B” for image two and “C” for image three.
When you chose your answer you click enter on your keyboard and the button appears. Then you need to click on enter to confirm your answer and then the buttons A, B and C get the color green if the answer is correct and red if its false.

I’d appreciate any help a LOT!
also the text, hover and mousePressed function ive put it in a new tab.

Here’s what I got for now:

``````// Gloable Variablen

// Button QUiz starten
int rectColor = #BECBDB;

// Farbe REechtecke A, B und C
boolean ButtonA = false;
boolean ButtonB = false;
boolean ButtonC = false;
int rectA;
int rectB;
int rectC;
int rectEnter;

int newSiteColor;   // "neues" Fenster
int textColor; // Schriftfarbe
int bkColor;   // hintergrundfarbe

// Bilder
PImage img1;
PImage img2;
PImage img3;

// wichtig für random funkton
boolean Bild1A = false;
boolean Bild1B = false;
boolean Bild1C = false;
boolean Bild2A = false;
boolean Bild2B = false;
boolean Bild2C = false;
boolean Bild3A = false;
boolean Bild3B = false;
boolean Bild3C = false;

// wichtig für Random Funktion
int Variante;

// Helvetica einsetzen
PFont font;

void setup () {

size (1000, 800);
background (bkColor);
}

void draw () {

// QUiz Button
rectMode(CENTER);
fill (rectColor);
rect ( 500, 720, 100, 60);

hoverEffekt();     // hover Effekt

//__________________________________________

textFunktion();   // Funktionsaufruf

//____________________________________________

// Wenn hintergrund weiß ist, dann folgende Code ausführen:
if (bkColor == #BECBDB){

// erstellt eine "neue" Seite
fill (newSiteColor);
rect(0,0,100000,8000);

// Aufgabenstellung
textSize(30);
fill(0);
text("Welche Darstellung entspricht", 500, 150);
text("dem Gestaltungsgesetz der Kontinuität?", 500, 190);
textAlign (CENTER, BOTTOM);

//  ___________________________

if (Bild1A == true){
image (img1, 100, 300, 200, 200 );
}
if (Bild1B == true) {
image (img1, 400, 300, 200, 200);
}
if (Bild1C == true) {
image (img1, 700, 300, 200, 200);
}

//  ___________________________

if (Bild2A == true){
image (img2, 100, 300, 200, 200);
}
if (Bild2B == true){
image (img2, 400, 300, 200, 200);
}
if (Bild2C == true){
image (img2, 700, 300, 200, 200);
}

//  ________________________

if (Bild3A == true) {
image (img3, 100, 300, 200, 200 );
}
if (Bild3B == true) {
image (img3, 400, 300, 200, 200);
}
if (Bild3C == true) {
image (img3, 700, 300, 200, 200);
}

// ______________

if (Variante == 1) {
Bild1A = true;
Bild1B = false;
Bild1C = false;

Bild2A = false;
Bild2B = true;
Bild2C = false;

Bild3A = false;
Bild3B = false;
Bild3C = true;
}

if (Variante == 2) {
Bild1A = false;
Bild1B = true;
Bild1C = false;

Bild2A = false;
Bild2B = false;
Bild2C = true;

Bild3A = true;
Bild3B = false;
Bild3C = false;

}

if (Variante == 3){
Bild1A = false;
Bild1B = false;
Bild1C = true;

Bild2A = true;
Bild2B = false;
Bild3C = false;

Bild3A = false;
Bild3B = true;
Bild3C = false;

}

if (Variante == 4) {
Bild1A = true;
Bild1B = false;
Bild1C = false;

Bild2A = false;
Bild2B = false;
Bild2C = true;

Bild3A = false;
Bild3B = true;
Bild3C = false;

}

if (Variante == 5) {
Bild1A = false;
Bild1B = true;
Bild1C = false;

Bild2A = true;
Bild2B = false;
Bild2C = false;

Bild3A = false;
Bild3B = false;
Bild3C = true;

}

if (Variante == 6) {
Bild1A = false;
Bild1B = false;
Bild1C = true;

Bild2A = false;
Bild2B = true;
Bild2C = false;

Bild3A = true;
Bild3B = false;
Bild3C = false;

}

// Abfrage ob richtig angeklickt

if (Variante == 1 && mousePressed && mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580) { //A
text("richtig!", 500, 300);
}
else if (Variante == 2 &&  mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580){
text("richtig!", 500, 300);
}
else if (Variante == 3 && mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580 ) {
text("richtig!", 500, 300);
}
else if ( Variante == 4 && mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580 ) {
text("richtig!", 500, 300);
}
else if (Variante == 5 && mousePressed && mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580){ //A
text("richtig!", 500, 300);
}
else if ( Variante == 6 && mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580){
text("richtig!", 500, 300);
}

// ____________________________________

// rechtecke für Auswahlmöglichkeiten
fill (rectColor);
fill (rectA);
rect ( 200, 550, 50, 50);
textColor = 0;
fill(textColor);
text("A", 200, 570);

fill (rectB);
rect ( 500, 550, 50, 50);
textColor = 0;
fill(textColor);
text("B", 500, 570);

fill (rectC);
rect ( 800, 550, 50, 50);
textColor = 0;
fill(textColor);
text("C", 800, 570);

//Rechteck für Enter

// hover quiz auswahl enter
if (mousePressed) {
rectMode(CENTER);
fill (rectColor);
rect ( 500, 720, 100, 60);

textColor = 0;
fill(textColor);
text("Enter", width/2, 740);
}

/*  && mousePressed && mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580
&&  mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580
&& mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580
&& mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580
&& mousePressed && mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580
&& mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580) */
// _____________________________

hoverEffekt();

// _____________________________

}

}
``````
1 Like

Hey and welcome to the forum!

Great to have you here!

Did you post the other tab?

Because I can’t find `hoverEffekt()`? And `textFunktion()`?

What is your concrete question? Where are you stuck?

here is my current version, I had to st variant to 1 and background to #BECBDB

What does the variable Variant signify?

The current question?

It would be probably easier to work with arrays.
Like list of questions, of correct answers (1,2,3?) and of order of images (123 or 321 or…).

Also remember that draw() runs on and on 60 times per second without “waiting” for input.
Therefore you have to tell `draw()` what lines to execute. For example, when a button A B or C has been clicked, set a variable state from 0 to 1. When state is == 1 display richtig and display the Enter button. (When you display the word richtig only when mousePressed is true, it will only flash briefly)

Warm regards,

Chrisir

``````// Globale Variablen

// Button Quiz starten
int rectColor = #BECBDB;

// Farbe Rechtecke A, B und C
boolean ButtonA = false;
boolean ButtonB = false;
boolean ButtonC = false;

int rectA;
int rectB;
int rectC;
int rectEnter;

int newSiteColor; // “neues” Fenster
int textColor; // Schriftfarbe
int bkColor; // hintergrundfarbe

// Bilder
PImage img1;
PImage img2;
PImage img3;

// wichtig für random funkton
boolean Bild1A = false;
boolean Bild1B = false;
boolean Bild1C = false;
boolean Bild2A = false;
boolean Bild2B = false;
boolean Bild2C = false;
boolean Bild3A = false;
boolean Bild3B = false;
boolean Bild3C = false;

// wichtig für Random Funktion
int Variante=1;

// Helvetica einsetzen
PFont font;

void setup () {
size (1000, 800);
background (bkColor);
font = createFont("Helvetica.vlw", 14);
}

void draw () {
// QUiz Button
rectMode(CENTER);
fill (rectColor);
rect ( 500, 720, 100, 60);

//hoverEffekt();     // hover Effekt

//__________________________________________
//textFunktion();   // Funktionsaufruf
//____________________________________________

// Wenn hintergrund weiß ist, dann folgende Code ausführen:
if (bkColor == #BECBDB) {

// erstellt eine "neue" Seite
fill (newSiteColor);
rect(0, 0, 100000, 8000);

// Aufgabenstellung
textSize(30);
fill(0);
text("Welche Darstellung entspricht", 500, 150);
text("dem Gestaltungsgesetz der Kontinuität?", 500, 190);
textAlign (CENTER, BOTTOM);

//  ___________________________

if (Bild1A == true) {
image (img1, 100, 300, 200, 200 );
}
if (Bild1B == true) {
image (img1, 400, 300, 200, 200);
}
if (Bild1C == true) {
image (img1, 700, 300, 200, 200);
}

//  ___________________________

if (Bild2A == true) {
image (img2, 100, 300, 200, 200);
}
if (Bild2B == true) {
image (img2, 400, 300, 200, 200);
}
if (Bild2C == true) {
image (img2, 700, 300, 200, 200);
}

//  ________________________

if (Bild3A == true) {
image (img3, 100, 300, 200, 200 );
}
if (Bild3B == true) {
image (img3, 400, 300, 200, 200);
}
if (Bild3C == true) {
image (img3, 700, 300, 200, 200);
}

// ______________

if (Variante == 1) {
Bild1A = true;
Bild1B = false;
Bild1C = false;

Bild2A = false;
Bild2B = true;
Bild2C = false;

Bild3A = false;
Bild3B = false;
Bild3C = true;
}

if (Variante == 2) {
Bild1A = false;
Bild1B = true;
Bild1C = false;

Bild2A = false;
Bild2B = false;
Bild2C = true;

Bild3A = true;
Bild3B = false;
Bild3C = false;
}

if (Variante == 3) {
Bild1A = false;
Bild1B = false;
Bild1C = true;

Bild2A = true;
Bild2B = false;
Bild3C = false;

Bild3A = false;
Bild3B = true;
Bild3C = false;
}

if (Variante == 4) {
Bild1A = true;
Bild1B = false;
Bild1C = false;

Bild2A = false;
Bild2B = false;
Bild2C = true;

Bild3A = false;
Bild3B = true;
Bild3C = false;
}

if (Variante == 5) {
Bild1A = false;
Bild1B = true;
Bild1C = false;

Bild2A = true;
Bild2B = false;
Bild2C = false;

Bild3A = false;
Bild3B = false;
Bild3C = true;
}

if (Variante == 6) {
Bild1A = false;
Bild1B = false;
Bild1C = true;

Bild2A = false;
Bild2B = true;
Bild2C = false;

Bild3A = true;
Bild3B = false;
Bild3C = false;
}

// Abfrage ob richtig angeklickt

if (Variante == 1 &&
mousePressed &&
mouseX > 450 &&
mouseX <550 &&
mouseY>520 &&
mouseY<580) { //A
text("richtig!", 500, 300);
} else if (Variante == 2 &&  mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580) {
text("richtig!", 500, 300);
} else if (Variante == 3 && mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580 ) {
text("richtig!", 500, 300);
} else if ( Variante == 4 && mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580 ) {
text("richtig!", 500, 300);
} else if (Variante == 5 && mousePressed && mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580) { //A
text("richtig!", 500, 300);
} else if ( Variante == 6 && mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580) {
text("richtig!", 500, 300);
}

// ____________________________________

// rechtecke für Auswahlmöglichkeiten
fill (rectColor);
fill (rectA);
rect ( 200, 550, 50, 50);
textColor = 220;
fill(textColor);
text("A", 200, 570);

fill (rectB);
rect ( 500, 550, 50, 50);
textColor = 220;
fill(textColor);
text("B", 500, 570);

fill (rectC);
rect ( 800, 550, 50, 50);
textColor = 220;
fill(textColor);
text("C", 800, 570);

//Rechteck für Enter

// hover quiz auswahl enter
if (mousePressed) {
rectMode(CENTER);
fill (rectColor);
rect ( 500, 720, 100, 60);

textColor = 0;
fill(textColor);
text("Enter", width/2, 740);
}

/*  && mousePressed && mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580
&&  mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580
&& mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580
&& mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580
&& mousePressed && mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580
&& mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580) */
// _____________________________
// hoverEffekt();
// _____________________________
}
}

``````
1 Like

First of all, thank you for taking time to help!

This is the code in the tab hover:

``````      void hoverEffekt() {

// hover quiz start
if (mouseX > 450 && mouseX < 550 && mouseY >690 && mouseY < 780) {    // wenn maus über rechteck ist
if (mousePressed) {                                             // wenn auf starten gedrückt wird, dann soll hintergrund weiß werden
bkColor =#BECBDB;
}
rectColor = #FEFF24;
println("maus ist über box");
} else { // wenn nicht, dann...
rectColor = #BECBDB;
}

// Hover und Farbveränderung  bei Auswahlmöglichkeiten
if (mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580) {    // wenn maus über rechteck ist
rectA = #FEFF24; //gelb
println ("maus ist über A");
} else {
rectA = #BECBDB;
}

// Rechteck A wird Orange beim Klicken
if (mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580 ) {
rectA = #F5C720 ;
ButtonA = true;
println ("A wird Orange");
}

//______________________________

if (mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580){
rectB = #FEFF24;
println ("maus ist über B");
} else {
rectB = #BECBDB;
}

if (mousePressed && mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580){
rectB = #F5C720;
println ("B wird Orange");
}

// ____________________________

if (mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580 ) {
rectC = #FEFF24;
println ("maus ist über C");
} else {
rectC = #BECBDB;
}

if (mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580 ) {
rectC = #F5C720;
println ("C wird Orange");
}

// ______________________________

// Hover und Farbveränderung  bei Enter

if (mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580){
rectEnter = #FEFF24;
println ("maus ist über Enter");
} else {
rectEnter = #BECBDB;
}

if (mousePressed && mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580){
rectEnter = #F5C720;
println ("Enter wird Orange");
}
// ____________________________________
}
``````

And this is the code in the tab Text:

``````void textFunktion() {
textColor = 0;

textFont (font);
fill (#433D68);
textSize (70);
textAlign (CENTER, BOTTOM);
text ("Gestaltgesetze", 500, 150);
fill (textColor);
textSize (40);
textAlign (CENTER, CENTER);
text ("Teilaufgabe 1 | WS 22/23", 500, 300);
text ("Interaktive Werkzeuge | Prof. Ralph Tille", 500, 380);
textSize (20);
textAlign (CENTER, CENTER);
text ("INES KURTOVIC | ik057", 500, 460);
textSize (40);
textAlign (CENTER, TOP);
text ("Kennst du die Gestaltgesetze?", 500, 600);
fill (0);
textSize (30);
textAlign (CENTER, TOP);
text ("Quiz", 500, 700);
}
``````

My concrete question is can i attach one button/image to be the right answer?

Variant translated is version. There is 6 version of where the images 3 images can be placed.

And I don’T quite understand the concept of arrays. how would you do it?

" Also remember that draw() runs on and on 60 times per second without “waiting” for input.
Therefore you have to tell `draw()` what lines to execute. For example, when a button A B or C has been clicked, set a variable state from 0 to 1. When state is == 1 display richtig and display the Enter button. (When you display the word richtig only when mousePressed is true, it will only flash briefly)"

This answer did bring me forward. Should I use mouseClicked or another function so it stays?

Thank ou in advance and best regards

You should use mousePressed() as a function:

``````void mousePressed() {
...
}
``````

The variable state

also, the variable state needs to be set before setup()

`int state=0;`

it’s a global variable, known everywhere.

Now you can set it in mousePressed() function and evaluate it in
draw() like

``````if(state==1) {
// show Enter button and after that
} else if (state==2) {
// show richtig / falsch
}
``````
1 Like

here is a version with state, the button Enter appears, richtig appears

``````

// Gloable Variablen

// Button QUiz starten
int rectColor = #BECBDB;

// Farbe REechtecke A, B und C
boolean ButtonA = false;
boolean ButtonB = false;
boolean ButtonC = false;
int rectA;
int rectB;
int rectC;
int rectEnter;

int newSiteColor; // “neues” Fenster
int textColor; // Schriftfarbe
int bkColor; // hintergrundfarbe

// Bilder
PImage img1;
PImage img2;
PImage img3;

// wichtig für random funkton
boolean Bild1A = false;
boolean Bild1B = false;
boolean Bild1C = false;
boolean Bild2A = false;
boolean Bild2B = false;
boolean Bild2C = false;
boolean Bild3A = false;
boolean Bild3B = false;
boolean Bild3C = false;

// wichtig für Random Funktion
int Variante=1;

int state=0;

boolean richtig=false;

// Helvetica einsetzen
PFont font;

// Enter shortcut

void setup () {

size (1000, 800);
bkColor = #BECBDB;
background (bkColor);
font = createFont("Helvetica.vlw", 14);
}

void draw () {

// QUiz Button
rectMode(CENTER);
fill (rectColor);
rect ( 500, 720, 100, 60);

//hoverEffekt();     // hover Effekt

//__________________________________________

// textFunktion();   // Funktionsaufruf

//____________________________________________
//  keyPressed(); // Funktionsaufruf
//____________________________________________
//  mouseClicked (); // Funktionsaufruf
//____________________________________________
//  mousePressed(); // Funktionsaufruf
//____________________________________________

// Wenn hintergrund weiß ist, dann folgende Code ausführen:
if (bkColor == #BECBDB) {

// erstellt eine "neue" Seite
fill (newSiteColor);
rect(0, 0, 100000, 8000);

// Aufgabenstellung
textSize(30);
fill(0);
text("Welche Darstellung entspricht", 500, 150);
text("dem Gestaltungsgesetz der Kontinuität?", 500, 190);
textAlign (CENTER, BOTTOM);

//  ___________________________

if (Bild1A == true) {
image (img1, 100, 300, 200, 200 );
}
if (Bild1B == true) {
image (img1, 400, 300, 200, 200);
}
if (Bild1C == true) {
image (img1, 700, 300, 200, 200);
}

//  ___________________________

if (Bild2A == true) {
image (img2, 100, 300, 200, 200);
}
if (Bild2B == true) {
image (img2, 400, 300, 200, 200);
}
if (Bild2C == true) {
image (img2, 700, 300, 200, 200);
}

//  ________________________

if (Bild3A == true) {
image (img3, 100, 300, 200, 200 );
}
if (Bild3B == true) {
image (img3, 400, 300, 200, 200);
}
if (Bild3C == true) {
image (img3, 700, 300, 200, 200);
}

// ______________

if (Variante == 1) {
Bild1A = true;
Bild1B = false;
Bild1C = false;

Bild2A = false;
Bild2B = true;
Bild2C = false;

Bild3A = false;
Bild3B = false;
Bild3C = true;
}

if (Variante == 2) {
Bild1A = false;
Bild1B = true;
Bild1C = false;

Bild2A = false;
Bild2B = false;
Bild2C = true;

Bild3A = true;
Bild3B = false;
Bild3C = false;
}

if (Variante == 3) {
Bild1A = false;
Bild1B = false;
Bild1C = true;

Bild2A = true;
Bild2B = false;
Bild3C = false;

Bild3A = false;
Bild3B = true;
Bild3C = false;
}

if (Variante == 4) {
Bild1A = true;
Bild1B = false;
Bild1C = false;

Bild2A = false;
Bild2B = false;
Bild2C = true;

Bild3A = false;
Bild3B = true;
Bild3C = false;
}

if (Variante == 5) {
Bild1A = false;
Bild1B = true;
Bild1C = false;

Bild2A = true;
Bild2B = false;
Bild2C = false;

Bild3A = false;
Bild3B = false;
Bild3C = true;
}

if (Variante == 6) {
Bild1A = false;
Bild1B = false;
Bild1C = true;

Bild2A = false;
Bild2B = true;
Bild2C = false;

Bild3A = true;
Bild3B = false;
Bild3C = false;
}

// ____________________________________

// rechtecke für Auswahlmöglichkeiten
fill (rectColor);
fill (rectA);
rect ( 200, 550, 50, 50);
textColor = 220;
fill(textColor);
text("A", 200, 570);

fill (rectB);
rect ( 500, 550, 50, 50);
textColor = 220;
fill(textColor);
text("B", 500, 570);

fill (rectC);
rect ( 800, 550, 50, 50);
textColor = 220;
fill(textColor);
text("C", 800, 570);

//Rechteck für Enter
//   keyPressed();

//Rechteck für Enter

// hover quiz auswahl enter
if (state==1) {
rectMode(CENTER);
fill (rectColor);
rect ( 500, 720, 100, 60);

textColor = 0;
fill(textColor);
text("Enter", width/2, 740);
}
if (state==2) {
fill(0);
text("richtig!", 500, 300);

rectMode(CENTER);
fill (rectColor);
rect ( 500, 720, 100, 60);

textColor = 0;
fill(textColor);
text("Weiter", width/2, 740);
}

/*  && mousePressed && mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580
&&  mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580
&& mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580
&& mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580
&& mousePressed && mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580
&& mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580) */
// _____________________________

//hoverEffekt();

// _____________________________

//mouseClicked ();
}
}

void mousePressed () {
//
println(mouseX, mouseY);

if (state==0) {
state=1;
// Abfrage ob richtig angeklickt
if (Variante == 1 && mousePressed && mouseX > 500 && mouseX <550 && mouseY>550 && mouseY<600) { //B
state=1;
richtig = true;
} else if (Variante == 2 &&  mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580) {
text("richtig!", 500, 300);
} else if (Variante == 3 && mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580 ) {
text("richtig!", 500, 300);
} else if ( Variante == 4 && mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580 ) {
text("richtig!", 500, 300);
} else if (Variante == 5 && mousePressed && mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580) { //A
text("richtig!", 500, 300);
} else if ( Variante == 6 && mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580) {
text("richtig!", 500, 300);
}
} else if (state == 1) {
if (dist(mouseX, mouseY, 500, 720) < 66) {
state=2;
println("2");
}
} else if (state == 2) {
if (dist(mouseX, mouseY, 500, 720) < 66) {
state=0;
Variante = int ( random (1, 6));
println("0");
}
}
}

``````
1 Like

Thank you so much! Now it works just as you said.
My problem now is that all of that code you corrected should be on a second page. on my first page originally there was this:

``````void draw () {

// QUiz Button
rectMode(CENTER);
fill (rectColor);
rect ( 500, 720, 100, 60);

hoverEffekt();     // hover Effekt

//__________________________________________

textFunktion();   // Funktionsaufruf

And in the new tab text the textFunktion function says:
void textFunktion() {
textColor = 0;

textFont (font);
fill (#433D68);
textSize (70);
textAlign (CENTER, BOTTOM);
text ("Gestaltgesetze", 500, 150);
fill (textColor);
textSize (40);
textAlign (CENTER, CENTER);
text ("Teilaufgabe 1 | WS 22/23", 500, 300);
text ("Interaktive Werkzeuge | Prof. Ralph Tille", 500, 380);
textSize (20);
textAlign (CENTER, CENTER);
text ("INES KURTOVIC | ik057", 500, 460);
textSize (40);
textAlign (CENTER, TOP);
text ("Kennst du die Gestaltgesetze?", 500, 600);
fill (0);
textSize (30);
textAlign (CENTER, TOP);
text ("Quiz", 500, 700);
}
``````

How do I fix that?

1 Like

You can think of this first page as belonging to state 0 .

Rename the other states in the code accordingly, such as 0 becomes 1, 1 becomes 2 etc.

Then in draw()

``````if(state==0) {
textFunktion(); // Funktionsaufruf
} else if (state==1) {
...
} else if (state==2) {
...
} else if (state==3) {
...
}
``````

When you think of it nothing in draw() is allowed outside this if… else if… block.

Then everything that draw() / your Sketch does belongs to a state. Good.

Remark

Each state has its own buttons.

And each button has a different functionality depending on the state.

so as I posted your function `mousePressed` also distinguishes between the states.

here the first lines would now be:

``````if(state==0) {
// when the button is pressed:
state=1;
}
``````

Chrisir

1 Like

I kind of get what you’re saying but dont know how to apply it in the code and where…

``````// Gloable Variablen

// Button QUiz starten
int rectColor = #BECBDB;

// Farbe REechtecke A, B und C
boolean ButtonA = false;
boolean ButtonB = false;
boolean ButtonC = false;
int rectA;
int rectB;
int rectC;
int rectEnter;

int newSiteColor; // neues Fenster
int textColor; // Schriftfarbe
int bkColor; // hintergrundfarbe

// Bilder
PImage img1;
PImage img2;
PImage img3;

// wichtig für random funkton
boolean Bild1A = false;
boolean Bild1B = false;
boolean Bild1C = false;
boolean Bild2A = false;
boolean Bild2B = false;
boolean Bild2C = false;
boolean Bild3A = false;
boolean Bild3B = false;
boolean Bild3C = false;

// wichtig für Random Funktion
int Variante=1;

int state=0;

boolean richtig=false;

// Helvetica einsetzen
PFont font;

// Enter shortcut

void setup () {

size (1000, 800);
bkColor = #BECBDB;
background (bkColor);
font = createFont("Helvetica.vlw", 14);
}

void draw () {

// QUiz Button
rectMode(CENTER);
fill (rectColor);
rect ( 500, 720, 100, 60);

hoverEffekt();     // hover Effekt

//__________________________________________

textFunktion();   // Funktionsaufruf

//____________________________________________
//  keyPressed(); // Funktionsaufruf
//____________________________________________
//  mouseClicked (); // Funktionsaufruf
//____________________________________________
//  mousePressed(); // Funktionsaufruf
//____________________________________________

// Wenn hintergrund weiß ist, dann folgende Code ausführen:

if (bkColor == #BECBDB) {

// erstellt eine "neue" Seite
fill (newSiteColor);
rect(0, 0, 100000, 8000);

// Aufgabenstellung
textSize(30);
fill(0);
text("Welche Darstellung entspricht", 500, 150);
text("dem Gestaltungsgesetz der Kontinuität?", 500, 190);
textAlign (CENTER, BOTTOM);

//  ___________________________

if (Bild1A == true) {
image (img1, 100, 300, 200, 200 );
}
if (Bild1B == true) {
image (img1, 400, 300, 200, 200);
}
if (Bild1C == true) {
image (img1, 700, 300, 200, 200);
}

//  ___________________________

if (Bild2A == true) {
image (img2, 100, 300, 200, 200);
}
if (Bild2B == true) {
image (img2, 400, 300, 200, 200);
}
if (Bild2C == true) {
image (img2, 700, 300, 200, 200);
}

//  ________________________

if (Bild3A == true) {
image (img3, 100, 300, 200, 200 );
}
if (Bild3B == true) {
image (img3, 400, 300, 200, 200);
}
if (Bild3C == true) {
image (img3, 700, 300, 200, 200);
}

// ______________

if (Variante == 1) {
Bild1A = true;
Bild1B = false;
Bild1C = false;

Bild2A = false;
Bild2B = true;
Bild2C = false;

Bild3A = false;
Bild3B = false;
Bild3C = true;
}

if (Variante == 2) {
Bild1A = false;
Bild1B = true;
Bild1C = false;

Bild2A = false;
Bild2B = false;
Bild2C = true;

Bild3A = true;
Bild3B = false;
Bild3C = false;
}

if (Variante == 3) {
Bild1A = false;
Bild1B = false;
Bild1C = true;

Bild2A = true;
Bild2B = false;
Bild3C = false;

Bild3A = false;
Bild3B = true;
Bild3C = false;
}

if (Variante == 4) {
Bild1A = true;
Bild1B = false;
Bild1C = false;

Bild2A = false;
Bild2B = false;
Bild2C = true;

Bild3A = false;
Bild3B = true;
Bild3C = false;
}

if (Variante == 5) {
Bild1A = false;
Bild1B = true;
Bild1C = false;

Bild2A = true;
Bild2B = false;
Bild2C = false;

Bild3A = false;
Bild3B = false;
Bild3C = true;
}

if (Variante == 6) {
Bild1A = false;
Bild1B = false;
Bild1C = true;

Bild2A = false;
Bild2B = true;
Bild2C = false;

Bild3A = true;
Bild3B = false;
Bild3C = false;
}

// ____________________________________

// rechtecke für Auswahlmöglichkeiten
fill (rectColor);
fill (rectA);
rect ( 200, 550, 50, 50);
textColor = 220;
fill(textColor);
text("A", 200, 570);

fill (rectB);
rect ( 500, 550, 50, 50);
textColor = 220;
fill(textColor);
text("B", 500, 570);

fill (rectC);
rect ( 800, 550, 50, 50);
textColor = 220;
fill(textColor);
text("C", 800, 570);

//Rechteck für Enter
//   keyPressed();

//Rechteck für Enter

// hover quiz auswahl enter
if (state==1) {
rectMode(CENTER);
fill (rectColor);
rect ( 500, 720, 100, 60);

textColor = 0;
fill(textColor);
text("Enter", width/2, 740);
}
if (state==2) {
fill(0);
text("richtig!", 500, 300);

rectMode(CENTER);
fill (rectColor);
rect ( 500, 720, 100, 60);

textColor = 0;
fill(textColor);
text("Weiter", width/2, 740);
}

/*  && mousePressed && mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580
&&  mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580
&& mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580
&& mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580
&& mousePressed && mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580
&& mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580) */
// _____________________________

//hoverEffekt();

// _____________________________

//mouseClicked ();
}
}

void mousePressed () {
//
println(mouseX, mouseY);

if (state==0) {
state=1;
// Abfrage ob richtig angeklickt
if (Variante == 1 && mousePressed && mouseX > 500 && mouseX <550 && mouseY>550 && mouseY<600) { //B
state=1;
richtig = true;
} else if (Variante == 2 &&  mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580) {
text("richtig!", 500, 300);
} else if (Variante == 3 && mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580 ) {
text("richtig!", 500, 300);
} else if ( Variante == 4 && mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580 ) {
text("richtig!", 500, 300);
} else if (Variante == 5 && mousePressed && mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580) { //A
text("richtig!", 500, 300);
} else if ( Variante == 6 && mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580) {
text("richtig!", 500, 300);
}
} else if (state == 1) {
if (dist(mouseX, mouseY, 500, 720) < 66) {
state=2;
println("2");
}
} else if (state == 2) {
if (dist(mouseX, mouseY, 500, 720) < 66) {
state=0;
Variante = int ( random (1, 6));
println("0");
}
}
}

because my code whats in the tab text function textFunktion() doesnt show and that should be the first page

void textFunktion() {

bkColor = #BECBDB; //mittelblau
textColor = 0;

textFont (font);
fill (#433D68);
textSize (70);
textAlign (CENTER, BOTTOM);
text ("Gestaltgesetze", 500, 150);
fill (textColor);
textSize (40);
textAlign (CENTER, CENTER);
text ("Teilaufgabe 1 | WS 22/23", 500, 300);
text ("Interaktive Werkzeuge | Prof. Ralph Tille", 500, 380);
textSize (20);
textAlign (CENTER, CENTER);
text ("INES KURTOVIC | ik057", 500, 460);
textSize (40);
textAlign (CENTER, TOP);
text ("Kennst du die Gestaltgesetze?", 500, 600);
fill (0);
textSize (30);
textAlign (CENTER, TOP);
text ("Quiz", 500, 700);
}
``````

By the way, you already had a similar approach like my approach with the states.

Instead of state you used the background color as an indicator:

``````
// Wenn hintergrund weiß ist, dann folgende Code ausführen:

if (bkColor == #BECBDB) {
``````
1 Like

here is my version

all tabs are in this version

draw() works with state now.

``````
// Globale Variablen

// Button Quiz starten
int rectColor = #BECBDB;

// Farbe Rechtecke A, B und C
boolean ButtonA = false;
boolean ButtonB = false;
boolean ButtonC = false;
int rectA;
int rectB;
int rectC;
int rectEnter;

int newSiteColor; // neues Fenster
int textColor; // Schriftfarbe
int bkColor; // Hintergrundfarbe

// Bilder
PImage img1;
PImage img2;
PImage img3;

// wichtig für random Funkton
boolean Bild1A = false;
boolean Bild1B = false;
boolean Bild1C = false;
boolean Bild2A = false;
boolean Bild2B = false;
boolean Bild2C = false;
boolean Bild3A = false;
boolean Bild3B = false;
boolean Bild3C = false;

// wichtig für random Funktion
int Variante=1;

// Game logic
int state=0;

boolean richtig=false;

// Helvetica einsetzen
PFont font;

// Enter shortcut

// --------------------------------------------------------------------------------------

void setup () {
size (1000, 800);
bkColor = #BECBDB;
background (bkColor);
font = createFont("Helvetica.vlw", 14);
}

void draw () {
if (state == 0 ) {
// Start Screen / Splash Screen
textFunktion(); // Funktionsaufruf
hoverEffekt(); // hover Effekt
return;
} else if (state==1||state==2) {
// GAME
gamePlay();
} else if (state==3) {
// Enter wurde geklickt, Phase mit "richtig" und "Weiter"
rectMode(CENTER);
fill (rectColor);
rect ( 500, 720, 100, 60);

textColor = 0;
fill(textColor);
textSize(30);
text("Weiter", width/2, 740);

fill(0);
if (richtig) {
text("richtig!", 500, 300);
}
}

fill(0);
textSize(14);
text(state, 25, 25); // debug
}

// ---------------------------------------------------------------------------------------------------

void mousePressed () {
//
println(mouseX, mouseY);

if (state==0) {
// go from Splash Screen to game
state=1;
//
} else if (state==1) {
// in Game
state=2;

// Abfrage ob richtig angeklickt
if (Variante == 1 && mousePressed && mouseX > 500 && mouseX <550 && mouseY>550 && mouseY<600) { //B
richtig = true;
} else if (Variante == 2 && mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580) {
richtig = true;
} else if (Variante == 3 && mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580 ) {
richtig = true;
} else if ( Variante == 4 && mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580 ) {
richtig = true;
} else if (Variante == 5 && mousePressed && mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580) { //A
richtig = true;
} else if ( Variante == 6 && mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580) {
richtig = true;
}
} else if (state == 2) {
// Check for Enter key
if (dist(mouseX, mouseY, 500, 720) < 86) {
state=3;
}
} else if (state == 3) {
// Check for Weiter key
if (dist(mouseX, mouseY, 500, 720) < 86) {
// game continues
// prepare next Question
state=1;
richtig=false; // reset
Variante = int ( random (1, 6));
}
}
}

// ---------------------------------------------------------------------------------------------------

void gamePlay() {
// hover quiz auswahl enter

// erstellt eine "neue" Seite
fill (newSiteColor);
rect(0, 0, 100000, 8000);

// Aufgabenstellung
textSize(30);
fill(0);
text("Welche Darstellung entspricht", 500, 150);
text("dem Gestaltungsgesetz der Kontinuität?", 500, 190);
textAlign (CENTER, BOTTOM);

//  ___________________________

if (Bild1A == true) {
image (img1, 100, 300, 200, 200 );
}
if (Bild1B == true) {
image (img1, 400, 300, 200, 200);
}
if (Bild1C == true) {
image (img1, 700, 300, 200, 200);
}

//  ___________________________

if (Bild2A == true) {
image (img2, 100, 300, 200, 200);
}
if (Bild2B == true) {
image (img2, 400, 300, 200, 200);
}
if (Bild2C == true) {
image (img2, 700, 300, 200, 200);
}

//  ________________________

if (Bild3A == true) {
image (img3, 100, 300, 200, 200 );
}
if (Bild3B == true) {
image (img3, 400, 300, 200, 200);
}
if (Bild3C == true) {
image (img3, 700, 300, 200, 200);
}

// ______________

if (Variante == 1) {
Bild1A = true;
Bild1B = false;
Bild1C = false;

Bild2A = false;
Bild2B = true;
Bild2C = false;

Bild3A = false;
Bild3B = false;
Bild3C = true;
}

if (Variante == 2) {
Bild1A = false;
Bild1B = true;
Bild1C = false;

Bild2A = false;
Bild2B = false;
Bild2C = true;

Bild3A = true;
Bild3B = false;
Bild3C = false;
}

if (Variante == 3) {
Bild1A = false;
Bild1B = false;
Bild1C = true;

Bild2A = true;
Bild2B = false;
Bild3C = false;

Bild3A = false;
Bild3B = true;
Bild3C = false;
}

if (Variante == 4) {
Bild1A = true;
Bild1B = false;
Bild1C = false;

Bild2A = false;
Bild2B = false;
Bild2C = true;

Bild3A = false;
Bild3B = true;
Bild3C = false;
}

if (Variante == 5) {
Bild1A = false;
Bild1B = true;
Bild1C = false;

Bild2A = true;
Bild2B = false;
Bild2C = false;

Bild3A = false;
Bild3B = false;
Bild3C = true;
}

if (Variante == 6) {
Bild1A = false;
Bild1B = false;
Bild1C = true;

Bild2A = false;
Bild2B = true;
Bild2C = false;

Bild3A = true;
Bild3B = false;
Bild3C = false;
}

// ____________________________________

// rechtecke für Auswahlmöglichkeiten
rectMode(CENTER);
fill (rectColor);
fill (rectA);
rect ( 200, 550, 50, 50);
textColor = 220;
fill(textColor);
text("A", 200, 570);

fill (rectB);
rect ( 500, 550, 50, 50);
textColor = 220;
fill(textColor);
text("B", 500, 570);

fill (rectC);
rect ( 800, 550, 50, 50);
textColor = 220;
fill(textColor);
text("C", 800, 570);

// ---------------------------------------------------

if (state==2) {
//Rechteck für Enter
// Quiz Button
rectMode(CENTER);
fill (rectColor);
rect ( 500, 720, 100, 60);

textColor = 0;
fill(textColor);
text("Enter", width/2, 740);
}

hoverEffekt();
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////

void textFunktion() {

bkColor = #BECBDB; //mittelblau
textColor = 0;

textFont (font);
fill (#433D68);
textSize (70);
textAlign (CENTER, BOTTOM);
text ("Gestaltgesetze", 500, 150);
fill (textColor);
textSize (40);
textAlign (CENTER, CENTER);
text ("Teilaufgabe 1 | WS 22/23", 500, 300);
text ("Interaktive Werkzeuge | Prof. Ralph Tille", 500, 380);
textSize (20);
textAlign (CENTER, CENTER);
text ("INES KURTOVIC | ik057", 500, 460);
textSize (40);
textAlign (CENTER, TOP);
text ("Kennst du die Gestaltgesetze?", 500, 600);
fill (0);
textSize (30);
textAlign (CENTER, TOP);
text ("Quiz", 500, 700);
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////

void hoverEffekt() {

// hover quiz start
if (mouseX > 450 && mouseX < 550 && mouseY >690 && mouseY < 780) {    // wenn maus über rechteck ist
if (mousePressed) {                                             // wenn auf starten gedrückt wird, dann soll hintergrund weiß werden
bkColor =#BECBDB;
}
rectColor = #FEFF24;
println("maus ist über box");
} else { // wenn nicht, dann...
rectColor = #BECBDB;
}

// Hover und Farbveränderung  bei Auswahlmöglichkeiten
if (mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580) {    // wenn maus über rechteck ist
rectA = #FEFF24; //gelb
println ("maus ist über A");
} else {
rectA = #BECBDB;
}

// Rechteck A wird Orange beim Klicken
if (mousePressed && mouseX > 150 && mouseX < 250 && mouseY >520 && mouseY < 580 ) {
rectA = #F5C720 ;
ButtonA = true;
println ("A wird Orange");
}

//______________________________

if (mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580) {
rectB = #FEFF24;
println ("maus ist über B");
} else {
rectB = #BECBDB;
}

if (mousePressed && mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580) {
rectB = #F5C720;
println ("B wird Orange");
}

// ____________________________

if (mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580 ) {
rectC = #FEFF24;
println ("maus ist über C");
} else {
rectC = #BECBDB;
}

if (mousePressed && mouseX > 750 && mouseX< 850 && mouseY>520 && mouseY<580 ) {
rectC = #F5C720;
println ("C wird Orange");
}

// ______________________________

// Hover und Farbveränderung  bei Enter

if (mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580) {
rectEnter = #FEFF24;
println ("maus ist über Enter");
} else {
rectEnter = #BECBDB;
}

if (mousePressed && mouseX > 450 && mouseX <550 && mouseY>520 && mouseY<580) {
rectEnter = #F5C720;
println ("Enter wird Orange");
}
// ____________________________________
}
//

``````
1 Like

Thank you so so much! It totally helps. There are still some things I need to adapt, I may reach out again…
But I’ll try continue working with this!

1 Like

Improvement:

At the moment, when you click A, you can’t click B anymore. You only can click Enter.
That might be inconvenient.

Improvement:

use if in mousePressed to distinguish the buttons (no matter the Variant).

Store which button has been pressed (for example `int button` is 1,2 or 3)
set var `boolean showEnter` to true
show Enter Button when `showEnter==true` (instead of using state 2)

Multiple buttons can be clicked, they stay with a color, Enter is shown, so you can change your input by clicking A, B or C.

Only when you click Enter, richtig is shown.

Arrays

Then you can have parallel arrays. Every array has Variant as index:

``````
int[] richtigeAntworten = {
1,
2,
1,
3,
1
};

String[] Fragen = {
"Welche Darstellung entspricht\n" + "dem Gestaltungsgesetz der Kontinuität?",
"Was ist",
"Wer ist",
"Wo",
"Wann"
};

String[] orderOfImages = {
"123",
"213",
"312",
"123",
"213",
"312",
};
``````
1 Like

I’m sorry but now i dont get that…

It was just a thought.

at the moment, you have the question in your code. That makes the code very long and hard to read.

Instead you can separate code (what the Sketch does) and data (questions, order of images…)

The data can be stored in arrays as shown.

Then you just need to display / use the content of the arrays.

(An array is just a list of numbers or text)

1 Like

Hi again!

So I’ve put the function text and hover in a separate tab so the code isn’t that long.
But now I’d like the word “richtig” to appear only when you click on the button (A, B or C) corresponding to img 2.
If you click on one of the other option – img1 or img3– it’s wrong so the word “falsch” should appear and the button enter goes to a “try again?”.
Where do you put that in which if else function?

1 Like

that would be in this area.

You need to distinguish the variant and inside of this distinguish the button:

``````if (Variante == 1) {
if( mousePressed && mouseX > 500 && mouseX <550 && mouseY>550 && mouseY<600) {
//B
richtig = true;
} else
{
richtig = false;
}
} else if (Variante == 2) {
......
}
``````

my musings in my former posts would also help here, but maybe that is to much at the moment.

1 Like

so i tried to apply what you showed me but I couldnt bring it to function…
Now i tried that, but it isnt working either.

``````void mousePressed () {
//
println(mouseX, mouseY);

if (state==0) {
// go from Splash Screen to game
state=1;
//
} else if (state==1) {
// in Game
state=2;

// Abfrage ob richtig angeklickt
if (Variante == 1 && mousePressed && mouseX > 500 && mouseX <550 && mouseY>550 && mouseY<600) { //B in der mitte
richtig = true;
} else {fill(#008000 );
text("Richtig!", 500, 300);
}

if (Variante == 1 && mousePressed && mouseX > 200 && mouseX <250 && mouseY>550 && mouseY<600 || mousePressed && mouseX > 800 && mouseX< 850 && mouseY>550 && mouseY<600) {
richtig =true;
}else{fill(#E12120 ); //red
text("Leider falsch!", 500, 300);
}

if (Variante == 2 && mousePressed && mouseX > 800 && mouseX < 850 && mouseY >550 && mouseY < 600) { //B dritter, letzter stelle
richtig = true;
}  else { fill(#008000 );
text("richtig!", 500, 300);
}
if (Variante == 2 && mousePressed && mouseX > 200 && mouseX <250 && mouseY>550 && mouseY<600 || mousePressed && mouseX > 500 && mouseX< 550 && mouseY>550 && mouseY<600) {
richtig =true;
fill(#E12120 ); //red
text("Leider falsch!", 500, 300);
}
``````

To use text() in mousePressed() doesn’t make sense, it would only flash briefly

instead set variable richtig to false and display the text in draw() accordingly