Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungLetzte ÜberarbeitungBeide Seiten der Revision | ||
de:create:functions:buttontopage [14.03.2019 12:52] – Neues Beispiel: Navigation leiner | de:create:functions:buttontopage [05.08.2021 14:44] – [Optionale Seiten] admin | ||
---|---|---|---|
Zeile 18: | Zeile 18: | ||
- | ===== Beispiel 1 ===== | + | ===== Mehrere Seiten zurück springen |
Der Teilnehmer soll die Möglichkeit haben, zu einer früheren Seite zu springen. | Der Teilnehmer soll die Möglichkeit haben, zu einer früheren Seite zu springen. | ||
Zeile 37: | Zeile 37: | ||
- | ===== Beispiel 2 ===== | + | ===== Einfache Navigation |
Der Teilnehmer soll während der gesamten Befragung die Möglichkeit haben, zu zwei bestimmten Seiten im Fragebogen zu springen. | Der Teilnehmer soll während der gesamten Befragung die Möglichkeit haben, zu zwei bestimmten Seiten im Fragebogen zu springen. | ||
Zeile 63: | Zeile 63: | ||
- | ===== Beispiel 3 ===== | + | ===== Bearbeiten früherer Abschnitte |
Wieder sollen im Layout mehrere Knöpfe angeboten werden, um innerhalb des Fragebogens zu navigieren. Allerdings soll ein Sprung nur zu den Kapiteln erlaubt sein, welche der Teilnehmer bereits regulär erreicht hat. | Wieder sollen im Layout mehrere Knöpfe angeboten werden, um innerhalb des Fragebogens zu navigieren. Allerdings soll ein Sprung nur zu den Kapiteln erlaubt sein, welche der Teilnehmer bereits regulär erreicht hat. | ||
Zeile 106: | Zeile 106: | ||
%btnC5% | %btnC5% | ||
</ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Nicht-lineares Ausfüllen ===== | ||
+ | |||
+ | Der Fragebogen soll nicht (unbedingt) linear bearbeitet werden? Mit '' | ||
+ | |||
+ | Als Vorbereitung geben Sie allen Seiten, auf denen ein Abschnitt beginnt, unter **Fragebogen zusammenstellen** eine [[de: | ||
+ | |||
+ | Es gibt zwei Möglichkeiten, | ||
+ | |||
+ | - Verwenden Sie Platzhalter und verwenden Sie diese direkt im **Fragebogen-Layout** -> // | ||
+ | - Platzieren Sie den PHP-Code für die Navigation auf jeder Seite des Fragebogens, | ||
+ | |||
+ | <code php> | ||
+ | html( | ||
+ | // Ein <div> sorgt für die optische Abgrenzung zwischen Navigation und Seiteninhalt | ||
+ | '< | ||
+ | // Ein weiteres <div> erlaubt die flexible Anordnung der Navigations-Schaltflächen | ||
+ | '< | ||
+ | buttonToPage(' | ||
+ | buttonToPage(' | ||
+ | buttonToPage(' | ||
+ | buttonToPage(' | ||
+ | buttonToPage(' | ||
+ | buttonToPage(' | ||
+ | '< | ||
+ | buttonToPage(' | ||
+ | '</ | ||
+ | '</ | ||
+ | ); | ||
+ | </ | ||
+ | |||
+ | Möchte man die Knöpfe noch ein wenig ansprechender gestalten, kann man im **Fragebogen-Layout** in der // | ||
+ | |||
+ | <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; | ||
+ | } | ||
</ | </ | ||
Zeile 149: | Zeile 197: | ||
- | ===== Navigation im Fragebogen | + | ===== Optionale Seiten |
- | Der Fragebogen soll nicht (unbedingt) linear bearbeitet werden? Mit '' | + | Eine weitere Anwendung von '' |
- | Als Vorbereitung geben Sie allen Seiten, auf denen ein Abschnitt beginnt, unter **Fragebogen zusammenstellen** eine [[de: | + | In der praktichen Umsetzung würde man die Seite mit der vollständigen Information überspringen, wenn die befragte Person nur auf " |
- | Es gibt zwei Möglichkeiten, | + | * Seite 1 mit der Kurzfassung |
+ | * Seite 2 (" | ||
+ | * Seite 3 (" | ||
- | | + | Der PHP-Code würde nun den Platzhalter '' |
- | | + | |
<code php> | <code php> | ||
- | html( | + | buttonCode('details', 'Vollständige Informationen', '%details%'); |
- | // Ein <div> sorgt für die optische Abgrenzung zwischen Navigation und Seiteninhalt | + | setNextPage('start'); |
- | | + | |
- | // Ein weiteres <div> erlaubt die flexible Anordnung der Navigations-Schaltflächen | + | |
- | | + | |
- | buttonToPage('start'). | + | |
- | buttonToPage(' | + | |
- | buttonToPage(' | + | |
- | buttonToPage(' | + | |
- | buttonToPage(' | + | |
- | buttonToPage(' | + | |
- | '< | + | |
- | | + | |
- | '</ | + | |
- | '</ | + | |
- | ); | + | |
</ | </ | ||
- | Möchte man die Knöpfe noch ein wenig ansprechender gestalten, kann man im **Fragebogen-Layout** in der // | + | Dieser PHP-Code wird auf Seite 1 platziert, darunter |
- | < | + | Umgekehrt kann '' |
- | div.navButtons button | + | |
- | | + | Weiterhin sei auf die Funktion '' |
- | | + | |
- | | + | ===== JavaScript ===== |
- | | + | |
- | | + | Die Funktion '' |
- | | + | |
- | } | + | Damit der Fragebogen den Sprungbefehl entgegennimmt, |
- | div.navButtons button.currentPage { | + | |
- | | + | < |
- | | + | buttonToPage(' |
+ | </ | ||
+ | |||
+ | Weiterhin ist eine JavaScript-Funktion erforderlich, | ||
+ | |||
+ | <code html> | ||
+ | <a id=" | ||
+ | |||
+ | <script type=" | ||
+ | function goButton(evt) | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | var form = SoSciTools.getForm(); | ||
+ | | ||
+ | // Submit the page | ||
+ | | ||
+ | | ||
+ | evt.preventDefault(); | ||
+ | | ||
} | } | ||
+ | |||
+ | // Change the behavior of the link | ||
+ | document.getElementById(" | ||
+ | document.getElementById(" | ||
+ | </ | ||
</ | </ | ||
+ | |||
+ | Die Seiten-Kennung, | ||
+ | |||
+ | Wenn man nun auf den Link klickt, wird der Klick so ungeleitet, als hätte man auf den Knopf zur Seite " | ||
+ | |||
+ | **Hinweis: |