Final Project questions

[HagenNathaniel]

Hey guys!!

Hopefully your projects are going well, I have been doing brainstorming for a week on it and came up with a "Trivia Game' idea..

I THINK I can do it this way, but I wanted to run my thoughts by you guys, and get your feedback..

Ok, so the idea is that, instead of trying to assign ANSWERS (sentences, etc) to a variable for each question, I decided it would be MUCH easier to assign NUMBERS (1-4) to each answer, and ONLY have the answer as text you see on screen.

So, with that in mind, I decided an if/else statement (or a for loop, but I cannot think of how to do that in this manner, any ideas if this is a better option are welcome), would be the best idea...

Something like: (using pseudo code, so syntax probably won't be right) if answer = insert number here "correct!!" (any pointers on this part would be nice :) )

else if answer is NOT insert number here "I'm sorry, that is not correct. Please try again" (this is the part of this I am not sure on how to correctly code)

It doesn't move forward until the answer chosen is correct, another thing I am not sure on how to do.

I also figured I would have it use a different picture/background if the correct or incorrect answer is selected, unless that is a pain in the ass to do, any ideas there would be great as well.

This seems to be relatively moderate in difficulty, I also thought about implementing my 'interacting balls' code into the incorrect answer, but I am not sure how well that would pan out?

What do you guys think?

I'd appreciate any thoughts about this, or questions on to what I am trying to accomplish.

Thanks guys :) !

[chloeortega]

Salutations, I like your concept for your final project, I think your initial idea of using if/else statements for your trivia game is a step in the right direction, have you thought about what kind of questions you would ask, would you be trying to display something that keeps the users score?

[HagenNathaniel]

Kinda thinking of pop culture/game questions...something along those lines.

OOOOOHHH, I hadn't thought of that idea!! (score) wonder how hard that would be to implement.

I know the 'bouncing ball' thing would be a possible PITA.

What would be a good way to implement that score idea?

[HagenNathaniel]

I figure the easiest way to program this, is to get one of the question portions working, and then copy and paste it for the rest.

I am also stumped on how to 'advance' the program,..

Since you gave me a GREAT idea, I think a '3 chances per question' system would be the best option.

Again, I'm stumped on that as well.

[HagenNathaniel]

honestly trying to figure out a title screen for it as well..

Like a "welcome" screen of sorts.

With buttons to "start" the game, and exit it.

[mafordah]

This guy explains how to make a game pretty well and he explains a way to make a start screen in his first section of code. He is using the Processing language, but if you change void or public void to function and int to let it should work the same. Maybe you can apply that to what you want to do.

[HagenNathaniel]

Very nice! I'll be looking at that asap!

I'll let you guys know what I find :)

Thank you!

[HagenNathaniel]

Ok, so here's the code I have done so far..

I have made the required changes, but have attempted to add buttons to the code, according to the p5.js reference site.

1. 2.

I get a blank screen....I see no errors in the hint area.

Where do I go from here?

once I get this initial screen done, I'll be able to move forward.

I'll ask how after you guys help me figure this one out.

[wattse13]

Hey @HagenNathaniel, it looks like you might be missing a closing } for the setup function. I think the missing } should be on line 28.

[HagenNathaniel]

fixed it, it threw an error about a syntax error it couldn't recover from, 68:1, and I removed it..

it fixed the error, but I get a blank screen in preview still.

any ideas?

[HagenNathaniel]

I've even tried modifying the original code to use functions and let instead of void and init...

get errors there too.

Here's the modified code:

'/jshint esversion: 6 /

/ VARIABLES /

// We control which screen is active by settings / updating // gameScreen variable. We display the correct screen according // to the value of this variable. // // 0: Initial Screen // 1: Game Screen // 2: Game-over Screen

var gameScreen = 0;

/ SETUP BLOCK /

function setup() { size(500, 500); }

/ DRAW BLOCK /

function draw() { // Display the contents of the current screen if (gameScreen == 0) { initScreen(); } else if (gameScreen == 1) { gameScreen(); } else if (gameScreen == 2) { gameOverScreen(); } }

/ SCREEN CONTENTS /

function initScreen() { // codes of initial screen } function gameScreen() { // codes of game screen } function gameOverScreen() { // codes for game over screen }

/ INPUTS /

function mousePressed() { // if we are on the initial screen when clicked, start the game if (gameScreen==0) { startGame(); } }

/ OTHER FUNCTIONS /

// This method sets the necessary variables to start the game function startGame() { gameScreen=1; } '

the error I get is:

it's referencing the final piece of code, I can do screenshots if you prefer.

I think this is the best idea to do this, the button idea may not be as simple as I thought :(

[HagenNathaniel]

I kind of like this guy's program..

I wonder if there's a way to adapt it to the way we have been doing it in Creative coding class..

It appears to utilize ONE file, instead of the index.html and sketch.js way we do it.

Here's the link to the video of him doing it.

https://www.youtube.com/watch?v=49pYIMygIcU

I've about given up on doing it the way I have been trying to...unless someone can help me figure it out.

Any ideas guys?

[mafordah]

I had this issue when I adapted it to my game too. Use something other than gameScreen as a variable. For some reason, it doesn't like when the variable and the function have the same name. I just changed mine to screen and it worked.

Here is my code for reference. There's a lot of other things in there, but all I did different from his code to get it to work initially was change the name of the variable.

[HagenNathaniel]

and I thought my dogs were picky...lol

If I can get this initial thing working, I can start the question part....another huge hurdle.

[HagenNathaniel]

Here's what I got so far:

" /jshint esversion: 6 /

// Declare the Setup function

//setting default gamescreen as 0;

let quizScreen = 0;

// create variable for button object.

var button1; var button2; function setup() {

// create a canvas 1280 px wide, by 720 px high, with a red background

createCanvas (1280, 720);

background('red');

button = createButton('Game Start'); button.position (height/2, width/2); button.mousePressed(gameStart);

button2 = createButton('Quit Game'); button.position (height/2 - 15, width/2); button.mousePressed(gameEndScreen); } function draw(){

// displays the contents of the current selected screen

if (gameScreen == 0) {

initScreen();

} else if (gameScreen == 1){

gameScreen();

} else if (gameScreen== 2){

gameEndScreen();

}

// Contents of game screeens

function initScreen() { // code for "Game Start" screen

background('blue'); textAlign(CENTER); text("Click to Start Game", height/2, width/2);

}

function gameScreen(){

//code for game screen/s }

function gameEndScreen(){

// code for game end screen, user requested. }

function mousePressed(){

if (gameScreen==0){ gameStart(); } }

//setting necessary paraeters to start gameEndScreen

function gameStart(){

quizScreen=1;{ } }

// user inputs"

Have a look at that, and tell me where I am going wrong.. According to his instructions, it should be working...but it isn't...

Stressing me out

[mafordah]

Okay from what I can tell, you gotta change the gameScreen variable to quizScreen in the draw function and add a bracket after the if/else statements (at the end of the draw function). Then just code your button object and you should be good to go!

[HagenNathaniel]

edited code before button object:

"/jshint esversion: 6 /

// Declare the Setup function

//setting default gamescreen as 0;

let quizScreen = 0;

// create variable for button object.

var button1; var button2; function setup() {

// create a canvas 1280 px wide, by 720 px high, with a red background

createCanvas (1280, 720);

background('red');

button = createButton('Game Start'); button.position (height/2, width/2); button.mousePressed(gameStart);

button2 = createButton('Quit Game'); button.position (height/2 - 15, width/2); button.mousePressed(gameEndScreen); } function draw(){

// displays the contents of the current selected screen

if (quizScreen == 0) {

initScreen();

} else if (quizScreen == 1){

gameScreen();

} else if (quizScreen== 2){

gameEndScreen();

} }

// Contents of game screeens

function initScreen() { // code for "Game Start" screen

background('blue'); textAlign(CENTER); text("Click to Start Game", height/2, width/2);

}

function gameScreen(){

//code for game screen/s }

function gameEndScreen(){

// code for game end screen, user requested. }

function mousePressed(){

if (gameScreen==0){ gameStart(); } }

//setting necessary paraeters to start gameEndScreen

function gameStart(){

quizScreen=1;{ }

// user inputs

} "

how's that?

[jballas]

@HagenNathaniel

In your set-up() function, make sure it says button1 and button2 like the variable.

button1.position (height/2, width/2);
button1.mousePressed(gameStart);

button2 = createButton('Quit Game');
button2.position (height/2 - 15, width/2);
button2.mousePressed(gameEndScreen);
}```

That should get your file to show up at least.

[jballas]

I also noticed you have the height and width position swapped. I wasn't sure if that was on purpose, or it you wanted the buttons to appear in the middle of the screen.

Let me know if you're still having trouble with the buttons showing up. I know I kept getting a weird error until I updated my p5.dom.min.js library file to the newest version.

[HagenNathaniel]

@jballas , I have nothing showing at all, and that's part of the problem.

I might need to get a newer version of p5.dom.min.js...

IF YOU can get it to work, and see it on your screen as well...it would be easier than trying to guess about it.

I'll see if those fixes help...thanks :)

[jballas]

I was able to see a blue screen and the buttons. You can download the latest zip file with all the p5. libraries here. https://p5js.org/download/

The p5.dom.min is in the Addons folder. You need to have version p5.js v0.7.2 September 02, 2018.

[HagenNathaniel]

hmmm...

I noticed I've been having some issues seeing my work, I even tried making a function setup file only...to see if I could see a canvas...

what you just said, adds to the mystery....

I'll have a look :)

[HagenNathaniel]

I made those changes, I'll add the new updates to the p5.dom file in a second. I have now done that, it is now 9/03/2018

yeah, I do want them in the middle, but I figure if I do both in /2, it'll stack them?

I'll let you know what it does

[HagenNathaniel]

changes made, no shown errors...and still...no go..

screenshot of code and preview.

[jballas]

@HagenNathaniel Did you make sure to reference the dom script file in your index? It should look like this:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
        <script src="p5_lib/p5.min.js"></script>
        <script src="p5_lib/p5.dom.min.js"></script>
        <!-- <script src="p5_lib/p5.sound.min.js"></script> -->
        <script src="sketch.js"></script>
        <style> body {padding: 0; margin: 0;} </style>
    </head>
    <body>
    </body>
</html>

That's the only thing I can think of. Because when I copy and paste your code into my editor I can preview the blue game screen. If you upload your files to github I can take a look at your repo. Put a link here for me.

[HagenNathaniel]

Just made those changes..

Here's the link to the work.

https://github.com/HagenNathaniel/Creative-Coding-120/tree/master/120_Work/HW-13

[HagenNathaniel]

YAY!! it's working!!!

just need to fix up the buttons a bit, and then I can keep moving!

might need help on that part, lol.

[HagenNathaniel]

Basically, this is what's left to do:

1. format the buttons right on start page.

2. program the game/quiz page.

3. set up the input storage for the quiz page, then allowing the end page to retrieve and add up the result of the quiz (score). no idea how to do that :(

4. program the buttons into the quiz page, which I think would be a simple "cut and paste" scenario...?

and, should time allow, add a picture to the background of the page(s).

Any ideas on this?

Thank you so much for your help so far guys!! It's really coming together now :)

[HagenNathaniel]

I'm guessing it'll use the 'onclick' event for the buttons

[HagenNathaniel]

I've made some format changes to the buttons, the background, and added the 'onclick' function, which currently isn't working..trying to figure out how to get them to work.

[HagenNathaniel]

After spending some time with the instructor, we have the preliminary coding done, and the game page is operational...80% of the way... Only thing left to do, is add the questions, and the 'answer checker' for the end screen.

I'll upload the new files to the github ASAP, so you can have a look @jballas :)

I was so lost watching him do most of this,lol!

[HagenNathaniel]

I also need to get the text of the questions to display..

[HagenNathaniel]

Emailed the professor, and he suggested I add a new class for question text display..

So, I added that file to the github.

I'll have to figure out how to incorporate it into the main program.

I'll let you know