p5.js ..
Posted by kll on October 21 2019 19:22:45
usually i play processing PDE JAVA
but have p5.js and python mode installed too.
add on RPI started a NODE express server for it recently.

also i use a account at the online editor
but rarely write about it here.

as one of the beginner problems here again was

-1- about button operation

-2- screens / states for a quiz game

i started a sequence of codes, like steps for a tutorial.
sadly i had the feeling i talk to a wall and had to watch
his code growing from 2000 to 3000 lines.
i know the forum work is not about that one question / from that one OP /
others could read that post later and might profit.

anyhow i want to summarize it here too.

start with a single page with button(s)



-0- if you have coded a toggle button successfully, how to make a second?

-1- a button function ( one button used, second prepared // )

-2- add arrays for buttons parameters ( used for 6 * 5 grid )

-3- but better a arrayList of a class button ( some functionality / look as -2- )

start to work from " the other side " of the game project



-4- a modular program structure for this game
- - intro

- - question list ( later use that 30 buttons )

- - the selected question with possible answers ( a b c multiple choice style )

- - answer / result page for WIN / LOSE / typo

-5- the question/answers/good answer/ thing is to be considered as DATA
not as text inside a CODE,
better in a extra 31 line CSV file read as table object.

-6-
the real reason for using a extra code file should be re usability.
so you have a function
or a class ( for what it is the the pure reason they exist: to be re used )
you want use from several projects you could
download and upload that as a extra file.js.
But to get that running need to declare it in the index.html
( or your browser would not know it needs to download it )
to show that better i made a extra little play code
( update also with a very simple test class )

-7- combine it all
- - make lots new buttons for operations ( besides the 30 for the 6 * 5 selection grid )

- - mouseIsPressed inside class did fire back, when like next page has button same place.
needed my own boolean from main mousePressed()

- - a reset of the 3 main program variables ( state / last_question last_answer )
and all operation buttons needed.

- - make state 1,2,3, so CSV now 91 lines long

-7b- as i say, work never finished
- - finally moved the Button class to the /assets/myTools.js file
( you want know what the problem with that was?
for documentation i write a header section how to use it,
inside the file say you need to
/* < script src="assets/myTools.js" >< / script > */
when i used it for the function only no problem,
when i put the class inside ?some p5.js or IS or HTML ? went crazy. )
later found if i comment js nested with comment html ok like
/* < !-- < ?? > -- > */


- - set / get $win$ from the CSV ( new column )
and show in button grid ( after selection of STATE 1,2,3 only) and WIN page.

- - prepare 3 text array for category texts.
possibly might also better be DATA ( like from other CSV file? )
but i do not know that game...

some details also pictures see here


and here in the same sequence the links to the step codes.
-0- toggle button hard coded
-1- button function for ONE ( opt. TWO) )
-2- arrays for buttons
-3- array of class button
-4- state system for this quiz game
-5- questions... from external CSV file loaded
-6- easy use code from extra file.js
+ button and sound
-7- all in one
-7b- more work












also translated that into a JAVA tutorial
and try to put it all into one project with 7 lessons - for easy handling,
but now i think it is even less readable.
code

ok, work it over, change the screens with classes ( but the code looks cleaner )
code

while i failed to make the class call page smarter with a object array of different classes.