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:26] – [Example 1] sophia.schauer | en:create:functions:buttontopage [17.03.2021 10:32] – admin | ||
---|---|---|---|
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 66: | Line 66: | ||
- | ===== 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: | + | 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//. |