How do I make this text display on the screen on the click of a button? - button

Question

let img
let img2
let img3;
let img4
let img5
function preload(){
img = loadImage("Barb1.png");
img2 = loadImage("Barb2.png");
img3 = loadImage("Barb3.png");
img4 = loadImage("Barb4.png");
img5 = loadImage("Barb5.png");
}
function setup() {
createCanvas(1500, 1500);
scene = 1;
ButtonA = createButton("A. GOOD");
ButtonA.position(20,640);
ButtonA.size(100,50)
ButtonA.mouseClicked(correct0);
ButtonB = createButton("B. PINEAPPLE");
ButtonB.position(20,700);
ButtonB.size(100,50)
ButtonB.mouseClicked(incorrect);
ButtonC = createButton("C. PLEASE KILL ME");
ButtonC.position(20,760);
ButtonC.size(100,50)
ButtonC.mouseClicked(incorrect);
ButtonD = createButton("A. BAD");
ButtonD.position(20,640);
ButtonD.size(100,50)
ButtonD.mouseClicked(incorrect);
ButtonD.hide();
ButtonE = createButton("B. PINEAPPLE");
ButtonE.position(20,700);
ButtonE.size(100,50)
ButtonE.mouseClicked(correct1);
ButtonE.hide();
ButtonF = createButton("C. PLEASE KILL ME");
ButtonF.position(20,760);
ButtonF.size(100,50)
ButtonF.mouseClicked(incorrect);
ButtonF.hide();
ButtonG = createButton("1. Delicious");
ButtonG.position(20,640);
ButtonG.size(100,50)
ButtonG.mouseClicked(incorrect);
ButtonG.hide();
ButtonH = createButton("2. Rainy");
ButtonH.position(20,700);
ButtonH.size(100,50)
ButtonH.mouseClicked(correct2);
ButtonH.hide();
ButtonI = createButton("3. Red!");
ButtonI.position(20,760);
ButtonI.size(100,50)
ButtonI.mouseClicked(incorrect);
ButtonI.hide();
ButtonJ = createButton("1. My name is __!");
ButtonJ.position(20,640);
ButtonJ.size(100,50)
ButtonJ.mouseClicked(correct3);
ButtonJ.hide();
ButtonK = createButton("2. Carpe Diem!");
ButtonK.position(20,700);
ButtonK.size(100,50)
ButtonK.mouseClicked(incorrect);
ButtonK.hide();
ButtonL = createButton("3. I don't know yet, what's yours?");
ButtonL.position(20,760);
ButtonL.size(100,50)
ButtonL.mouseClicked(incorrect);
ButtonL.hide();
ButtonM = createButton("1. Goodbye Barb!");
ButtonM.position(20,640);
ButtonM.size(100,50)
ButtonM.mouseClicked(correct4);
ButtonM.hide();
ButtonN = createButton("2. Hello. Barb!");
ButtonN.position(20,700);
ButtonN.size(100,50)
ButtonN.mouseClicked(incorrect);
ButtonN.hide();
ButtonO = createButton("1. THANK THE LORD, IT'S OVER!");
ButtonO.position(20,760);
ButtonO.size(100,50)
ButtonO.mouseClicked(incorrect);
ButtonO.hide();
homebutton = createButton("HOME");
homebutton.position(395, 405);
homebutton.size(150,150);
homebutton.mousePressed(goHome);
homebutton.hide();
}
function correct0(){
print("Barb says,'Good job!' Hold left click and '2' to advance'")
}
function correct1(){
print("Barb says, 'Good job!' Hold left click and '3' to advance'");
}
function correct2(){
print("Barb says, 'Good job!' Hold left click and '4' to advance'");
}
function correct3(){
print("Barb says, 'Good job!' Hold left click and '5' to advance'");
}
function correct4(){
print("Barb says, 'Good job!' Hold left click and '6' to advance'");
}
function incorrect(){
print("Barb says, 'Hmm...that response to my question does not make sense, please try again!''");
}
function goHome(){
window.open('https://editor.p5js.org/PragyaKumari2/sketches/3fhigQjLg');
}
function draw() {
background(100,200,300);
if(scene ==1){
image(img,0,0,800,600)
text("Read the options out loud and choose your answer, make sure to check the console for BARB's reply!", 10, 620)
textSize(19);
if(keyIsPressed){
if(key ==2){
scene =2
ButtonA.remove();
ButtonB.remove();
ButtonC.remove();
ButtonD.show();
ButtonE.show();
ButtonF.show();
}
}
}
if(scene ==2){
image(img2,0,0,800,600)
text("Read the options loudly and choose your answer!", 50, 620)
textSize(20);
if(keyIsPressed){
if(key ==3){
scene =3
ButtonD.remove();
ButtonE.remove();
ButtonF.remove();
ButtonG.show();
ButtonH.show();
ButtonI.show();
}
}
}
if(scene == 3){
image(img3,0,0,800,600)
text("Read the options loudly and choose your answer!", 50, 620)
textSize(20);
if(keyIsPressed){
if(key ==4){
scene =4
ButtonG.remove();
ButtonH.remove();
ButtonI.remove();
ButtonJ.show();
ButtonK.show();
ButtonL.show();
}
}
}
if(scene ==4){
image(img4,0,0,800,600)
text("Read the options loudly and choose your answer!", 50, 620)
textSize(20);
if(keyIsPressed){
if(key ==5){
scene =5
ButtonJ.remove();
ButtonK.remove();
ButtonL.remove();
ButtonM.show();
ButtonN.show();
ButtonO.show();
}
}
}
if(scene == 5){
image(img5, 0,0, 800,600)
text("Read the options loudly and choose your answer!", 50, 620)
textSize(20);
if(keyIsPressed){
if(key ==6){
scene =6
ButtonM.remove();
ButtonN.remove();
ButtonO.remove();
homebutton.show();
}
}
}
if(scene == 6){
text("Thanks a lot for playing! Make sure to practice speaking!", 200, 375)
textSize(20);
}
}
I am able to print to the main console terminal, but I do not know how to print to the display screen. Ive tried using the text function, but it does not appear at all. I am also not that familiar with p5js, so I am stuck on this problem. Is there a problem with the function? Do I need to do something else to output the text? Is it an issue with the scene function I implemented?

Answer 1

I've created a global variable msg to keep the message you want to show to the user. So after next calling of the draw function, you can show it by text function if it has any value.
Also your code needs to set textAlign.
let img;
let img2;
let img3;
let img4;
let img5;
let msg;
function preload() {
img = loadImage("Barb1.png");
img2 = loadImage("Barb2.png");
img3 = loadImage("Barb3.png");
img4 = loadImage("Barb4.png");
img5 = loadImage("Barb5.png");
}
function setup() {
createCanvas(1500, 1500);
scene = 1;
ButtonA = createButton("A. GOOD");
ButtonA.position(20, 640);
ButtonA.size(100, 50);
ButtonA.mouseClicked(correct0);
ButtonB = createButton("B. PINEAPPLE");
ButtonB.position(20, 700);
ButtonB.size(100, 50);
ButtonB.mouseClicked(incorrect);
ButtonC = createButton("C. PLEASE KILL ME");
ButtonC.position(20, 760);
ButtonC.size(100, 50);
ButtonC.mouseClicked(incorrect);
ButtonD = createButton("A. BAD");
ButtonD.position(20, 640);
ButtonD.size(100, 50);
ButtonD.mouseClicked(incorrect);
ButtonD.hide();
ButtonE = createButton("B. PINEAPPLE");
ButtonE.position(20, 700);
ButtonE.size(100, 50);
ButtonE.mouseClicked(correct1);
ButtonE.hide();
ButtonF = createButton("C. PLEASE KILL ME");
ButtonF.position(20, 760);
ButtonF.size(100, 50);
ButtonF.mouseClicked(incorrect);
ButtonF.hide();
ButtonG = createButton("1. Delicious");
ButtonG.position(20, 640);
ButtonG.size(100, 50);
ButtonG.mouseClicked(incorrect);
ButtonG.hide();
ButtonH = createButton("2. Rainy");
ButtonH.position(20, 700);
ButtonH.size(100, 50);
ButtonH.mouseClicked(correct2);
ButtonH.hide();
ButtonI = createButton("3. Red!");
ButtonI.position(20, 760);
ButtonI.size(100, 50);
ButtonI.mouseClicked(incorrect);
ButtonI.hide();
ButtonJ = createButton("1. My name is __!");
ButtonJ.position(20, 640);
ButtonJ.size(100, 50);
ButtonJ.mouseClicked(correct3);
ButtonJ.hide();
ButtonK = createButton("2. Carpe Diem!");
ButtonK.position(20, 700);
ButtonK.size(100, 50);
ButtonK.mouseClicked(incorrect);
ButtonK.hide();
ButtonL = createButton("3. I don't know yet, what's yours?");
ButtonL.position(20, 760);
ButtonL.size(100, 50);
ButtonL.mouseClicked(incorrect);
ButtonL.hide();
ButtonM = createButton("1. Goodbye Barb!");
ButtonM.position(20, 640);
ButtonM.size(100, 50);
ButtonM.mouseClicked(correct4);
ButtonM.hide();
ButtonN = createButton("2. Hello. Barb!");
ButtonN.position(20, 700);
ButtonN.size(100, 50);
ButtonN.mouseClicked(incorrect);
ButtonN.hide();
ButtonO = createButton("1. THANK THE LORD, IT'S OVER!");
ButtonO.position(20, 760);
ButtonO.size(100, 50);
ButtonO.mouseClicked(incorrect);
ButtonO.hide();
homebutton = createButton("HOME");
homebutton.position(395, 405);
homebutton.size(150, 150);
homebutton.mousePressed(goHome);
homebutton.hide();
}
function correct0() {
msg = "Barb says,'Good job!' Hold left click and '2' to advance'";
}
function correct1() {
msg = "Barb says, 'Good job!' Hold left click and '3' to advance'";
}
function correct2() {
msg = "Barb says, 'Good job!' Hold left click and '4' to advance'";
}
function correct3() {
msg = "Barb says, 'Good job!' Hold left click and '5' to advance'";
}
function correct4() {
msg = "Barb says, 'Good job!' Hold left click and '6' to advance'";
}
function incorrect() {
msg =
"Barb says, 'Hmm...that response to my question does not make sense, please try again!''";
}
function goHome() {
window.open("https://editor.p5js.org/PragyaKumari2/sketches/3fhigQjLg");
}
function draw() {
background(100, 200, 300);
if (scene == 1) {
image(img, 0, 0, 800, 600);
text(
"Read the options out loud and choose your answer, make sure to check the console for BARB's reply!",
10,
620
);
textSize(19);
if (keyIsPressed) {
if (key == 2) {
scene = 2;
ButtonA.remove();
ButtonB.remove();
ButtonC.remove();
ButtonD.show();
ButtonE.show();
ButtonF.show();
}
}
}
if (scene == 2) {
image(img2, 0, 0, 800, 600);
text("Read the options loudly and choose your answer!", 50, 620);
textSize(20);
if (keyIsPressed) {
if (key == 3) {
scene = 3;
ButtonD.remove();
ButtonE.remove();
ButtonF.remove();
ButtonG.show();
ButtonH.show();
ButtonI.show();
}
}
}
if (scene == 3) {
image(img3, 0, 0, 800, 600);
text("Read the options loudly and choose your answer!", 50, 620);
textSize(20);
if (keyIsPressed) {
if (key == 4) {
scene = 4;
ButtonG.remove();
ButtonH.remove();
ButtonI.remove();
ButtonJ.show();
ButtonK.show();
ButtonL.show();
}
}
}
if (scene == 4) {
image(img4, 0, 0, 800, 600);
text("Read the options loudly and choose your answer!", 50, 620);
textSize(20);
if (keyIsPressed) {
if (key == 5) {
scene = 5;
ButtonJ.remove();
ButtonK.remove();
ButtonL.remove();
ButtonM.show();
ButtonN.show();
ButtonO.show();
}
}
}
if (scene == 5) {
image(img5, 0, 0, 800, 600);
text("Read the options loudly and choose your answer!", 50, 620);
textSize(20);
if (keyIsPressed) {
if (key == 6) {
scene = 6;
ButtonM.remove();
ButtonN.remove();
ButtonO.remove();
homebutton.show();
}
}
}
if (scene == 6) {
text("Thanks a lot for playing! Make sure to practice speaking!", 200, 375);
textSize(20);
}
textAlign(CENTER);
text(msg, width / 2, height / 2);
}