Hi all. I want to be able to create a flow-chart type of process of questions and answers, but as a series of web pages rather than the traditional flow chart diagram.    So you WOULD start at a page which has the initial question, and then the possible answers would each be links to the next page, which would then offer further conditions/questions etc, etc etc.

I just need to create a real simple decision-assisting online process that would be very smartphone/tablet-friendly.

Does anyone know of an application or program that can create this?  I have spent ages searching online, but because I don't really know how to describe it formally, it's hard to know what to actually search for. I basically just keep coming to flow chart software, and although it's the right process, it isn't the 'LOOK' I require at all. 

many thanks!

billyd

There are a number of ways to do this, even going to the extreme low tech of just basic HTML with Hyperlinks as well as if you really want to make for a user interface, a hyperlink mapped image via use of a tool called Mapedit to select an x,y grid area to be sensitive to click/touch area by user. Mapedit would allow you to make a user interface with MSPaint to create your image. This image would have the button look that you want. You then use Mapedit and select the area for the buttons that will be active to pointing to a hyperlink. Then you save changes and upload this to webserver. Then when you go to the site you have a user interface that looks like its backed by a more complex programming, but instead its just a very creative HTML trick with Mapedit.

I was introduced to Mapedit many years ago when in college. It came bundled with a HTML book I had and I installed it and played around with it. It allowed me to make a HTML video game that followed a linear flow from beginning to end. Sort of like a HTML point and click Myst Type of game where you had to solve puzzles etc. Upon successfully following the correct route out of the loop you progressed to the next puzzle. Mapedit allowed for this interface to be created as well as ability to take images that were mixed together with photoshop too look more professional than MSPaint and make for a better play game with effects. For animations in the game, I PERFORMED GIF overlays etc for running water or other objects in the game that moved to move both interactive and non interactive details on the screen, or simply didnt have to use a GIF to perform turning a virtual light bulb on or off by use of a mapedit hperlink mapping for on-click change of a picture such as light_on.jpg switched to light_off.jpg when clicked to make for interactive effects that look ADVANCED but are not really that advanced when looking at the HTML code to make it happen.

The most important detail would be knowing your viewing area for these devices so that a user is not scrolling up and down and side to side etc.

Knowing the view area of the devices that will connect to this webpage you then can have buttons that are interactive. Attached is a  sample of an image created with MSPaint that you could add to a HTML webpage to display, and map the interactive X,y coordinates with Mapedit so that the entire button area for the colors when tapped or clicked will send the guest to the next webpage with more interactive content that can follow a flow chart that is a static chart.

NOW... If you want it to be dynamic content included, that is they enter their name and that info is then added such as a welcome display with their name, then this is best done with PHP or another scripting language for HTML. You can do it either way static or dynamic, its all up to personal preference and mainly if the content interactive is static ( always the same for all users ) or dynamic ( names change, or other info that is different based on user ) * Although if you had way too much time on your hands you could create the ability for a user to follow a static flow to enter their name such as BOB in which they select B and then O and this then sends them down the path that includes BOB, Bonnie, Bow, etc and upon tapping or selecting the following B it then states a confirmation if your name is BOB and if it is it runs to the main HTML content beyond the static route name madness, however if the name is wrong they can be routed back to index.html which starts back over again with entering name.

BTW: The attached image is just an image. In order for it to be interactive you would need to call this image within HTML to display the image, and then open the HTML file with MAPedit which would display all image links contained within that HTML file. You then select the image file you want to map and then you fairly easily select an area similar to cropping and then specifiy that this is going to be hyperlinked to the next page that this button selection would pass a user to. When all buttons are mapped you have a fully functional low tech method of an interactive flow chart. 

Here is a link to Mapedit that I have used in the past: http://www.boutell.com/mapedit/


[recovering disk space, attachment deleted by admin]Dave, thanks very much for such a detailed and comprehensive reply!

I think that simply just building it as a series of pages with hyperlinks probably will be the way, and the idea of just having simple images with mapped hyperlinks is a really good one. You can actually assign mapped areas directly to an image from the image properties dialogue box in dreamweaver, so I probably wouldn't need to use mapedit but thanks for the info about it anyway.   And yes, top tip re understanding the viewing screen size. I will start from that and then work out the plan thereof.

Thanks again mate, much appreciated.What is the real objective?
A nice interactive presentation of diagrams and text?
Are the diagrams crisp sharp lines like art work by a draftsman or nice photos done by a photographer?
If photos, use HTML and JPG
Otherwise use some kin of Adobe product or something like it.
Look for Interactive PDF pages on web site.
Here is one of many:
https://www.youtube.com/watch?v=Kckzlt_Luc0
Of course this is a video. The actual pages look batter.
It is a very useful idea. No, the objective isn't really about the appearance, nor indeed pictures or prettiness. I am needing to create a set series of questions and options, so that the user can arrive at the correct decision for their circumstances. So it is exactly a flow-chart-like procedure, but rather than the flow-chart approach of rectangles, lines, diamonds etc, it's a series of smartphone pages that the user is taken through, each with the next question/options.  So, yes, it could all be done perfectly easily just with html, simply building each question as a page and hyperlinking them together. But that seems rather a hack way of doing it.  My guess was that actually this is a pretty standard sort of requirement so there must surely be a bit of software to automate the task. But maybe not...

Quote

So, yes, it could all be done perfectly easily just with html, simply building each question as a page and hyperlinking them together. But that seems rather a hack way of doing it.  My guess was that actually this is a pretty standard sort of requirement so there must surely be a bit of software to automate the task.