Skip to main content

Search

Customizing navigation in Modern and Device Diverse

  • Updated

Note: This article only applies to surveys using the Flex, Modern, or Device Diverse themes, or a theme derived from one of those. To customize navigation in other survey themes, see continuebutton and backbutton.

Use the page_template_data tag to customize the behavior of the continue and back buttons. Settings include showing/hiding the buttons, and setting a delay time before the buttons appear or fade away.

Syntax

The page_template_data tag uses a particular Perl syntax called a hash reference. Each parameter must be set with the => operator, and must be separated by a comma. A comma is not required after the final parameter, but including one can help prevent errors.

set_defaults
page_template_data: <<END
{
show_back      => 1, # number values before the comma
autosubmit     => 1,
show_continue  => 1,
back_fade      => 300,
}
END

Add the page_template_data tag to the set defaults widget to apply these settings to all pages in the survey. Alternatively, you may add this tag at a specific question or start group widget to apply the settings locally.

Parameters

The following parameters are available to customize navigation. Please note that some settings may override others.

Parameter Values
autosubmit

0 – No autosubmit.

1 (default) – Autosubmit when the form is complete, if all questions can be autosubmitted.

The autosubmit tag may be added directly to set defaults as an alternative.
back_fade

The length of time in milliseconds (ms) before the back button fades away and is no longer available.

Defaults to 8,000 ms (8 seconds). Only applies if show_back is set to '2'.
back_one_page

0 – The respondent may go backward in the survey as far as they'd like.

1 (default) – Respondents may only go backward one page from the latest page they've reached.
delay_continue

The length of time in milliseconds before the continue button will be shown after the page loads. The delay only occurs the first time the respondent visits the page.

Disabled by default. If autosubmit is enabled, the page will still submit as soon as all questions are answered.
ripple

0 – Disables the ripple effect seen when clicking on a radio or checkbox button.

1 (default) – Enables the ripple effect.
show_continue

0 – Never show the continue button. You could also use contbtn: n with set defaults for this.

1 (default for basic themes) – Always show the continue button.

2 (default for dd/modern/flex) – Show the continue button only when all questions on the page are answered.
show_back

0 – Never show the back button. You could also use backbtn: n with set defaults for this.

1 – Always show the back button. Note: To allow unlimited backward navigation, you'll also need to set back_one_page => 0.

2 (default) – Fade out the back button after the back_fade milliseconds have elapsed.

Note: If show_continue is manually set to '0' or '2' ("always hide" or "fade in"), delay_continue will not work. In the Device Diverse theme, show_continue defaults to '2' but it will be ignored if the programmer utilizes delay_continue.

page_template_data vs. template_data

Use page_template_data when applying to questions, tables, and other non-page-like widgets. Think of it as saying, "Go find the page associated with this widget, and apply this config to its template_data."

However, template_data may be used instead for set defaults, new page, and start group widgets. These are considered page-like widgets and thus don't need the "page_" portion.

Examples

Disable autosubmit, always show the continue button

set_defaults
page_template_data: <<END
{
autosubmit    => 0,
show_continue => 1,
}
END

Note: The autosubmit tag can be used instead of page_template_data, either as part of the set defaults widget, or at the question level for radio questions.

Fade out the back button sooner

In this example, the back button is set to fade 2 seconds after the page loads, instead of the default 8 seconds.

set_defaults
page_template_data: { back_fade => 2000 }

Disable autosubmit, always show the continue and back buttons

set_defaults
page_template_data: <<END
{
show_back      => 1,
autosubmit     => 0,
show_continue  => 1,
}
END

Hide back button at a specific question's page

The page_template_data tag may be added at a specific question. This applies the settings only to the page where that question is shown.

4. The previous question is one we REALLY don't want people to be able to see again.
page_template_data: { show_back => 0 }
type: text

Overriding set_defaults

This example shows how the set_defaults settings may be overridden with a page_template_data tag at a specific question.

Note that "10_000" should be read as "10,000". "10000" is also an accepted input.

set defaults
page_template_data: <<END
{
    show_continue => 2
}
END

#...

new page

# later at the question level, to use 'delay_continue', override 'show_continue' as well:

12. Write a lot about Rome's influence on your daily life:
page_template_data: {delay_continue => 10_000, show_continue => 1}
type: textbox

Related articles

Comments

0 comments

Please sign in to leave a comment.