This week, I played with DOM in p5js, to integrate features from the library into the sketch.
I created a word-based guessing game named “Did you know that?”, which includes six fun facts, and the player needs to guess the answer by choosing one from the dropdown menu. After answering all six questions, the player can check how many questions he/she guessed correctly by clicking the check score button.
There are mainly three components of this game: The texts, the dropdown menu, and the scores. I started by finding six random fun facts from https://www.factslides.com/s-Funny, and space out the parts that later to be replaced by the dropdown menus.
Then, I created the dropdown menus and set the options.
However, when it comes to tracking the score, I couldn’t figure out how to add scores based on what the player selects. I tried to create a mySelectFunction(), in which the score will be added if the index of the correct answer is selected, yet it still doesn’t work. I also tried .value() method, but it won’t work either. So this is the part I might need help with…
Here’s the link to the “Did you know that?” game, please let me know how could I add scores for the players ;)
Reference:
Facts Source: https://www.factslides.com/s-Funny
p5js Libraries: https://p5js.org/reference/#/p5/createSelect
