What is it:
A simple way to create & host decision trees (also known as "dialog trees" or "choose-your-own-adventure" books).
A simple way to create & host decision trees (also known as "dialog trees" or "choose-your-own-adventure" books).
What's it for?
When you need to give someone information based on their answers to a series of questions. Expedition is open-source and you can do whatever you want with it (MIT License).
When you need to give someone information based on their answers to a series of questions. Expedition is open-source and you can do whatever you want with it (MIT License).
Why it's neat:
- It's just Javascript and HTML
- No database or remote dependencies
- Fast and mobile-friendly
- Support for different languages and datasets
- Easy to deploy & for non-programmers to maintain
Quick start:
| Step 1: | Download ZIP archive |
| Step 2: | Unzip archive |
| Step 3: | Copy unzipped files to your web directory of your choice |
| Step 4: | Done! Just visit your web directory with any browser. |
To edit pages:
Manually edit the Json file, "/data/default_pages.json". Graphical design interface coming soon, but you don't really need one.
Manually edit the Json file, "/data/default_pages.json". Graphical design interface coming soon, but you don't really need one.
To edit the flow:
In your browser, visit "/designer/flow/"
Note: You must call this page using localhost or via any web server
In your browser, visit "/designer/flow/"
Note: You must call this page using localhost or via any web server
Different languages:
Add different languages to your pages, then use the "language" URL param (example).
Add different languages to your pages, then use the "language" URL param (example).
Different datasets (a different tree with different pages):
| Step 1: | Download the empty "flow" and "pages" JSON files: here and here. |
| Step 2: | Change "new" in the filenames to whatever name you want, then copy to your "/data" directory. |
| Step 3: | Call your new dataset by putting the name (from above) in the "dataset" URL parameter (example tree and designer). |
Google Analytics:
Change the value of "googleTrackingId" in "[dataset]_pages.json" to your GA tracking ID.
Change the value of "googleTrackingId" in "[dataset]_pages.json" to your GA tracking ID.
Debugging in Javascript console
Turn on your browser's console (Right-click > Inspect > Console) to see the path as you move around your tree.
Turn on your browser's console (Right-click > Inspect > Console) to see the path as you move around your tree.
Localhost dataset testing:
Test a dataset on your localhost by using the syntax:
https://myserver.com/expedition/?localhost=http://localhost/expedition/
Or something like https://myserver.com/expedition/?localhost=http://localhost/expedition/&dataset=mydataset
Test a dataset on your localhost by using the syntax:
https://myserver.com/expedition/?localhost=http://localhost/expedition/
Or something like https://myserver.com/expedition/?localhost=http://localhost/expedition/&dataset=mydataset
Lock it down:
The /designer interface is harmless but still public to end-users. So it might look like a security concern, even though it's not. If you want to remove access, just delete that directory or rename it to something obscure.
The /designer interface is harmless but still public to end-users. So it might look like a security concern, even though it's not. If you want to remove access, just delete that directory or rename it to something obscure.