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 [09.03.2022 10:57] – [buttonToPage()] ruth.noppeney | ||
---|---|---|---|
Line 19: | Line 19: | ||
* // | * // | ||
+ | **Note:** When leaving a page through a button that was included via '' | ||
===== Go back several pages ===== | ===== Go back several pages ===== | ||
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 ([[: | ||
Line 150: | Line 197: | ||
); | ); | ||
</ | </ | ||
+ | |||
+ | |||
+ | ===== JavaScript ===== | ||
+ | |||
+ | The function '' | ||
+ | |||
+ | In order for the questionnaire to accept the jump order, the '' | ||
+ | |||
+ | <code php> | ||
+ | buttonToPage(' | ||
+ | </ | ||
+ | |||
+ | Next, a JavaScript function is required that writes the appropriate data to the questionnaire page and then submits the page by clicking the " | ||
+ | |||
+ | <code html> | ||
+ | <a id=" | ||
+ | |||
+ | <script type=" | ||
+ | function goButton(evt) { | ||
+ | var field = document.createElement(" | ||
+ | field.setAttribute(" | ||
+ | field.setAttribute(" | ||
+ | field.setAttribute(" | ||
+ | // Apppend the hidden input to the questionnaire form | ||
+ | var form = SoSciTools.getForm(); | ||
+ | form.appendChild(field); | ||
+ | // Submit the page | ||
+ | SoSciTools.submitPage(); | ||
+ | // Do not follow the original link | ||
+ | evt.preventDefault(); | ||
+ | return false; | ||
+ | } | ||
+ | |||
+ | // Change the behavior of the link | ||
+ | document.getElementById(" | ||
+ | document.getElementById(" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | The page ID, that is written into the form field by the JavaScript function, must be the same as in the previous call of '' | ||
+ | |||
+ | Now when you click on the link, the click will be redirected as if you had clicked on the button to the page " | ||
+ | |||
+ | **Note:** Some browsers may block intercepting the right click - so it may well happen that users go directly to the linked page via right click -> //open on new page//. |