Web design: how to display a huge decision tree with images?
September 12, 2019 8:08 AM Subscribe
My love of Telephone Pictionary is well-documented. I'm currently running a year-long, 511-person "multiverse" game of Telephone Pictionary, and when I'm done, I want to be able to display the results online. I'm not a web designer (I know rudimentary HTML and once dabbled in CSS), but I'm willing to either learn a few things or pay someone to help. First, I need help thinking through how best to do this. Details within (including "What the hell is Telephone Pictionary?").
First of all, in case you're unfamiliar: Telephone Pictionary is a common party game based on "Telephone" (wherein participants sit in a circle and take turns whispering a phrase in one another’s ear, usually finding that the original phrase has become horribly corrupted in the process). In Telephone Pictionary, the first player will write a sentence or phrase; the next player will attempt to depict it in a drawing; the next player will then attempt to describe the drawing using words. After each step, the paper is folded so only the previous step can be seen, and play alternates between written steps and drawn steps.
Typically, play progresses in a linear fashion; when the game is done, everyone looks at the completed results and delights in them. (There are lots of MeFi-generated examples in the link provided above.)
My current project is a "multiverse" version of this game. The chain is only 9 steps long; however, at each step, the gameplay bifurcates--two different people will independently complete the next step, and so on with each step after that. So by the time we get to the 9th step, there will be 256 different end results. In all, there will be 511 separate components. (We're about 10% of the way in so far, and there are a TON of different interpretations already.)
When I'm done, I'd like to publish the results online and send them around to everyone who contributed to the game. And this is where I'm stuck, because I need to find a way to display the results that is straightforward and intuitive, and allows people to navigate through those 256 different branches.
I have a website hosted on WordPress and I can put the whole thing up there. I just need to HTML the damn thing somehow.
I'd love some guidance on the following:
First of all, in case you're unfamiliar: Telephone Pictionary is a common party game based on "Telephone" (wherein participants sit in a circle and take turns whispering a phrase in one another’s ear, usually finding that the original phrase has become horribly corrupted in the process). In Telephone Pictionary, the first player will write a sentence or phrase; the next player will attempt to depict it in a drawing; the next player will then attempt to describe the drawing using words. After each step, the paper is folded so only the previous step can be seen, and play alternates between written steps and drawn steps.
Typically, play progresses in a linear fashion; when the game is done, everyone looks at the completed results and delights in them. (There are lots of MeFi-generated examples in the link provided above.)
My current project is a "multiverse" version of this game. The chain is only 9 steps long; however, at each step, the gameplay bifurcates--two different people will independently complete the next step, and so on with each step after that. So by the time we get to the 9th step, there will be 256 different end results. In all, there will be 511 separate components. (We're about 10% of the way in so far, and there are a TON of different interpretations already.)
When I'm done, I'd like to publish the results online and send them around to everyone who contributed to the game. And this is where I'm stuck, because I need to find a way to display the results that is straightforward and intuitive, and allows people to navigate through those 256 different branches.
I have a website hosted on WordPress and I can put the whole thing up there. I just need to HTML the damn thing somehow.
I'd love some guidance on the following:
- Overarching design ideas. I'm imagining something like a decision tree, family tree, or tournament bracket system to display the results, but I'm open to different design ideas as well.
- Existing templates, ideally free. Maybe I can just pop in some code and insert captions and image URLs?
- Other design considerations. I have some known unknowns, but I presumably have lots of unknown unknowns as well. What else do I need to be thinking of?
Something like impress.js might be perfect, though complicated. You could set it up to zoom in at each bifurcation point.
posted by Rock Steady at 10:10 AM on September 12, 2019
posted by Rock Steady at 10:10 AM on September 12, 2019
Gephi might be able to do this. Here is an example of a bunch of images used in Gephi.
posted by mecran01 at 6:41 PM on September 12, 2019
posted by mecran01 at 6:41 PM on September 12, 2019
This thread is closed to new comments.
posted by bastionofsanity at 8:42 AM on September 12, 2019