how to manage multiple screens for a multi-quiz game in p5.js?

Question

I'm new to web development and need to program quiz with sound,images and a lot of interactivity, and I just found that p5.js is the perfect solution for me.

My problem is that I have like more than 10 questions with different kind of inputs (each of them with their own rules and some with the same rules) and an introduction screen. And I really confused how can I organize this, how is the best way to keep my code clean, because the tutorials that I followed the usually do the examples in a single file, and I think that if I program something like this at the draw function ( if question == 1 { question, answers, Rules rules rules rules rules } if question == 2 {question, answers different rules rules } ) it will be an huge mess.

So, I need some solution for multiple-screens, but that share some global variables.The user should be able to back to any previous question already answered and modify the current answer.

I think that should be the same for a game with multiple levels, where you keep some "rules" of the world and just change the stages/levels/screens/enemies.

Sorry about my english, i hope that it si not confuse.

Thanks !

Related: [Transitioning from one scene to the next with p5.js](https://stackoverflow.com/questions/58477636/transitioning-from-one-scene-to-the-next-with-p5-js) — ggorlen, Aug 08 '23 at 18:00

score 1 · Answer 1 · edited May 23 '17 at 12:31

It sounds to me like you should use objects to encapsulate the data you need to represent a screen or question.

Here is a tutorial on using objects in p5.js, and google has a ton more. But the basic idea is that you need to create an object that contains everything you need to know about a particular screen or question. It might look something like this:

// Question class
function Question(myQuestionText, myAnswerText, myRules) {
  this.questionText = myQuestionText
  this.answerText = myAnswerText;
  this.rules= myRules

  this.display = function() {
    text(questionText, 25, 25);
  };

  this.checkAnswer= function(userAnswer) {
    return userAnswer == answerText;
  }
};

This is just an example of the types of things you might do, and you would definitely need to expand it to make it fit your needs exactly. For example you might also create a Rule object and have each Question contain an array of Rules. Again, that's just one approach you might take.

But the point is that once you have these things encapsulated, you can store the questions as JSON or build them programatically, and then store them in an array of Questions. Here is an example on using arrays of objects in p5.js.

Once you have the array of Questions, then your draw code can look something like this:

function draw(){
   questions[questionIndex].display();
}

No need for a huge if statement, since everything you need to know is encapsulated by the Question object.

This is a pretty broad subject and it can get a little confusing, so I recommend you try something and post an MCVE if you get stuck. Good luck.

score 0 · Accepted Answer · answered May 18 '16 at 21:16

You should take Kevin's approach to creating your own Object type to keep things tidy.

For a quick prototype you can make use of the dynamic nature of javascript and create objects on the fly (think JSON like). Here is a very basic example that stores basic questions:

var questions = [
  {
    question:"Question #1",
    options:[1,2,3],
    selected:-1,
    correct:2
  },
  {
    question:"Question #2",
    options:[3,2,1],
    selected:-1,
    correct:1
  },
  {
    question:"Question #3",
    options:[2,1,3],
    selected:-1,
    correct:3
  }
];

var currentQuestion = 0;

function setup() {
  createCanvas(400,400);
}

function draw() {
  background(255);
  text(questions[currentQuestion].question,10,15);
  text(questions[currentQuestion].question,10,15);
  for(var o = 0; o < questions[currentQuestion].options.length; o++){
    text(questions[currentQuestion].options[o],10,35 + (20 * o));
  }
  text("selected: " + questions[currentQuestion].selected,10,90);
  text("correct: " + questions[currentQuestion].correct,10,110);
  text("match: " + (questions[currentQuestion].selected == questions[currentQuestion].correct),10,130);
}
function keyPressed(){
  //loop through questions on space
  if(key == ' ') currentQuestion = (currentQuestion + 1) % questions.length;
  if(key == '1') questions[currentQuestion].selected = 1;
  if(key == '2') questions[currentQuestion].selected = 2;
  if(key == '3') questions[currentQuestion].selected = 3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js"></script>

Run the code snippet Full page and use the SPACE key to loop through questions and 1,2 or 3 to select answers. This will most likely not do what you want it do, but hopefully illustrate a quick prototyping approach.

Depending on your experience with JavaScript and external libraries, you might want to check out Polymer (and the topeka example + source). Be warned, it's a steep learning curve if you're new to coding, so it might be worth getting the hang of JS with p5.js first.

how to manage multiple screens for a multi-quiz game in p5.js?

2 Answers2