This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
en:create:functions:buttontopage [11.08.2016 10:56] – [Example 2] s.kuhn89 | en:create:functions:buttontopage [25.08.2020 12:02] – [Example: multilingual annotation] sophia.schauer | ||
---|---|---|---|
Line 20: | Line 20: | ||
- | ===== Example 1 ===== | + | ===== Go back several pages ===== |
The participant shall have the opportunity to leap to a previous page. | The participant shall have the opportunity to leap to a previous page. | ||
Line 39: | Line 39: | ||
- | ===== Example 2 ===== | + | ===== Easy navigation |
The participant shall have the option to leap to two specific pages during the whole survey. | The participant shall have the option to leap to two specific pages during the whole survey. | ||
Line 62: | Line 62: | ||
</ | </ | ||
- | **Please note:** The buttons will just be displayed, if the questionnaire is started from the first page on. If you start the questionmaire | + | **Please note:** The buttons will just be displayed, if the questionnaire is started from the first page on. If you start the questionnaire |
- | ===== example 3 ===== | + | ===== Editing previous sections |
Again we want to offer the participant several buttons in order to navigate within the questionnaire. However this time the participant has the option to leap to chapters of the questionaire that he/she has already completed. | Again we want to offer the participant several buttons in order to navigate within the questionnaire. However this time the participant has the option to leap to chapters of the questionaire that he/she has already completed. | ||
Line 111: | Line 111: | ||
</ | </ | ||
+ | ===== Non-linear Questionnaires ===== | ||
- | ===== example: multilingual annotation | + | The questionnaire should not (necessarily) be answered linearly? With '' |
+ | |||
+ | In preparation, | ||
+ | |||
+ | There are two ways to display the navigation on all pages: | ||
+ | |||
+ | - Use placeholders and use them directly in the **questionnaire layout** -> // | ||
+ | - Place the PHP code for navigation on each page of the questionnaire, | ||
+ | |||
+ | <code php> | ||
+ | html( | ||
+ | // A <div> provides the optical demarcation between navigation and page content | ||
+ | '< | ||
+ | // Another <div> allows the flexible arrangement of the navigation buttons | ||
+ | '< | ||
+ | buttonToPage(' | ||
+ | buttonToPage(' | ||
+ | buttonToPage(' | ||
+ | buttonToPage(' | ||
+ | buttonToPage(' | ||
+ | buttonToPage(' | ||
+ | '< | ||
+ | buttonToPage(' | ||
+ | '</ | ||
+ | '</ | ||
+ | ); | ||
+ | </ | ||
+ | |||
+ | If you want to make the buttons a bit more attractive, you can add some CSS code to the **questionnaire layout** in the // | ||
+ | |||
+ | <code css> | ||
+ | div.navButtons button { | ||
+ | border: 2px solid %color.4%; | ||
+ | border-radius: | ||
+ | padding: 7px 6px; | ||
+ | margin-bottom: | ||
+ | flex-grow: 1; | ||
+ | margin-right: | ||
+ | } | ||
+ | div.navButtons button.currentPage { | ||
+ | background-color: | ||
+ | color: white; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Example: Multilingual Annotation | ||
In a multilingual questionnaire ([[: | In a multilingual questionnaire ([[: |