How do I present this workflow as a JavaScript data structure?

Question

I am dealing with a rather complex workflow that I want to represent as a JavaScript data structure. A flow is essentially a set of questions and answers in which the answer to one question affects the question that is asked next. The following is a basic example of how a stream might look:

I'm not sure how to convert this stream to a JavaScript object that is easy to work with. Ideally, I would like to have a structure that can be easily rewritten and rewritten, and this is easily modified, so if someone wants to change the stream at a later point, they can do it without making too many changes.

It seems to me that this is some kind of strange tree structure, where nodes can have more than one parent. (I'm not sure what data structures like this are being called.)

In any case, the only idea I got is to assign an identifier for each node and then create an array of node objects, as shown below:

{ id: 5, parents: [2, 3], children: [6, 7, 8] } 

However, this seems really inflexible when it comes to looping through node objects (I could be wrong, though).

If anyone can offer some instructions / recommendations about which data structure I should study, and possibly how to implement them in JavaScript, I would be very grateful.

Thank you in advance.

Answer 1

Your initial idea will fit your scenario. In addition, you have already answered your question regarding the data structure: JSON . I would stick to that.

There only I would change: I do not think that you need to save your parents if you do not need to return from answering the question.
If so, you have a directed acyclic schedule , and this is the only structure that I can imagine from the point of view of your scenario.
There are several frameworks that deal with the implementation and visualization of these graphs in JS, see this question .

If you are going to implement this structure yourself, here is some (really basic) code to get you started:

 var graph = graph || {}; graph.nodes = [ {id:1, children:[2,3]}, {id:2, children:[]}, {id:3, children:[4]}, {id:4, children:[]} ]; //Returns the next question-id for an answer-id //or -1 if this was the last answer graph.nextQForA = function(aId) { for(var i = 0; i < graph.nodes.length; i++) { if(graph.nodes[i].id === aId && graph.nodes[i].children.length > 0 ) return graph.nodes[i].children[0]; } return -1; } 

Usage here, as shown here (Chrome console):

Bypass can also be done recursively rather than iteratively.

Answer 2

You can use ChoiceScript for this. It's very easy to pick up a Javascript-based library that allows you to create your own website, such as questions and answers, and looks as if it can fit your needs very well.

As in your workflow, ChoiceScript allows you to ask dynamic questions and answers, which means that your answer to one question may affect the next question that you get (just like you described in detail in the OP).

Link: http://www.choiceofgames.com/make-your-own-games/choicescript-intro/

ChoiceScript is mainly used to create games, but it looks like it will also suit your needs. Here is an example of a game created using this JavaScript library:

https://www.choiceofgames.com/ninja/#utm_source=cog&utm_medium=web&utm_content=ourgames