How to achieve this: step back and forth through a long, branched form

Dear fellow users,

For my current client I am working on a long form that will eventually be built with decision modeling software, but for the time being I would like to continue testing this with Axure - as long as that system is not yet built.

The case concerns a long, branched form (50-100 complex questions *) that (may) depend on each other. The answer options are simple Yes and No, and sometimes multiple (radiobutton group) to enter a multiple branch. I made a number of prototypes, creating a new nested dynamic panel for each new branch, and that worked well in itself. This made it possible to go through click paths not only forward, but also backwards with a back button. The only problem is that 1 page with multiple nested dynamic panels becomes too slow at a given moment.

  • questions with long content and illustrations

That is why I am looking to realize the same functionality, but where I create every question on a separate page, so that not everything has to be loaded at the same time. Does anyone have experience with such a thing?

Please let me know.

Thanks in advance

Kindest regards,

Igor

Yes, you can create a different page for every question. If the page link or content on the next page depends on how a question was answered on the current page, you can pass data between pages with a global variable. Axure recommends fewer than 25 total global variables, so you probably don’t want to set up a different global variable for every question/answer. You may only need one or two global variables though, in which you reuse them page to page. You can also “hash” a variable, storing multiple items/answers in one variable. For instance, when an answer is completed you can store the result by appending its value to a global variable. It just depends if you really need to keep track of all the answers in your prototype as the questionnaire proceeds–if not, no need to do that.

To provide Back and Next buttons, just put an Open Link action in the Click or Tap event and point to a specific page. So, let’s say you put item 26 on a page titled “Q26” and it has a Yes/No question with two radio buttons. In the Selected or Click or Tap event, you could set a global variable named “response” to “This.text” --or explicitly to the value of “yes” or “no”. Alternatively, you could do the same only when the user clicks the Next button (such that if Back is clicked, any responses on the current page are ignored) with, "IF selected of radioNo equals true, set value of response to “no” ELSE IF true set value of response to “yes” ". Then, on page Q27 you could have a Page Loaded event that tests the value of “response” that perhaps sets the state of a dynamic panel to show contents tailored to a Yes or No response of the previous item (Q26) --make sense?

You can include Cases for branches, as in, “IF response equals “No” Open Q27 in Current Window, ELSE IF true Open Q28 in Current Window” --or alternatively, in the Page Loaded event of each page.

Here is the reference for creating and using global variables:

I am familiar with variables, and already use them anyway, to be able to display an overview after all the questions on a page. So that a user can immediately navigate back from there, not only 1 step back, but also directly to a question in the middle or to the beginning.

My problem is not so much how I navigate forward through the different branches (which consist of separate pages) but to navigate back. That could be done by giving the back-button the vrowser-back functionality, but it should also work if the user navigates back from the overview page to any question page that he wants to adjust, and then wants to navigate even further back.

That is why I am thinking of a variable in which I lay down a breadcrumb path - in the literal sense of the meaning *. With forward navigation, the path grows, with back navigation the path becomes 1 or more steps shorter.

*) In practice, the term breadcrumb path is used to show the place in an information structure, while ‘in the fairy tale’ the crumb path shows the track followed.

The problem that I encounter and that I am not sure yet is how I can translate the question code - say q18 - into an Axure page link.

cheers,

Igor

OK, I see… That’s easier said than done in Axure… Creating the “breadcrumb variable” is pretty straightforward, but parsing it is another matter, and trying to programaticaly link to specific pages can be done, but then your global variables are reset.

The code for parsing strings (including values of variables) can get fairly complex because Axure doesn’t support data arrays nor regex expressions.

Here is a demo, in which the interaction code got more convoluted than I expected. Nevertheless, it does walk through a survey of 5 question-pages and assembles a global variable value with the order of pages visited and responses on those pages. Returning to a question page sets the previous answer on that page. A Summary page lists all the questions and answers, where each item links to its associated page.

You’ll notice the PREVIOUS and NEXT buttons are hard-coded to go to specific pages. As I said, you could try to get around this by assembling a page URL like so: [[PageName+1.toLowerCase()]].html --(and your pages are all simple numbers). However, when the next page is loaded, the browser treats it like an entirely different session, so all the global variables are reset to defaults. The best you can hope for is a long set of Cases like, IF [[PageName]] equals 2 Open 3 in Current Window ELSE IF [[PageName]] equals 3 Open 4 in Current Window etc, etc.

This demo is certainly not that elegant and the code could be improved. I’d be pretty surprised if it held up with 100 pages or so. Not sure what the length limits are for global variable values…

linked data across pages.rp (189.8 KB)