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 [25.08.2020 11:27] – [Example 3] sophia.schauer | en:create:functions:buttontopage [25.08.2020 12:29] – [Non-linear Questionnaires] sophia.schauer | ||
---|---|---|---|
Line 111: | Line 111: | ||
</ | </ | ||
+ | ===== Non-linear Questionnaires ===== | ||
- | ===== Example: | + | 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: | ||
In a multilingual questionnaire ([[: | In a multilingual questionnaire ([[: |