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);
bkColor = #DAD4CB;
background (bkColor);
font = loadFont("Helvetica.vlw");
}
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
newSiteColor = #DAD4CB;
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);
// Bilder laden
// ___________________________
if (Bild1A == true){
img1 = loadImage("image_01.png");
image (img1, 100, 300, 200, 200 );
}
if (Bild1B == true) {
img1 = loadImage("image_01.png");
image (img1, 400, 300, 200, 200);
}
if (Bild1C == true) {
img1 = loadImage("image_01.png");
image (img1, 700, 300, 200, 200);
}
// ___________________________
if (Bild2A == true){
img2 = loadImage("image_02.png");
image (img2, 100, 300, 200, 200);
}
if (Bild2B == true){
img2 = loadImage("image_02.png");
image (img2, 400, 300, 200, 200);
}
if (Bild2C == true){
img2 = loadImage("image_02.png");
image (img2, 700, 300, 200, 200);
}
// ________________________
if (Bild3A == true) {
img3 = loadImage("image_03.png");
image (img3, 100, 300, 200, 200 );
}
if (Bild3B == true) {
img3 = loadImage("image_03.png");
image (img3, 400, 300, 200, 200);
}
if (Bild3C == true) {
img3 = loadImage("image_03.png");
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();
// _____________________________
}
}
