Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungNächste ÜberarbeitungBeide Seiten der Revision |
de:create:functions:buttontopage [17.03.2021 10:27] – admin | de:create:functions:buttontopage [05.08.2021 14:42] – admin |
---|
); | ); |
</code> | </code> |
| |
| |
| ===== Optionale Seiten ===== |
| |
| Eine weitere Anwendung von ''buttonToPage()'' besteht darin, dass man optionale Seiten oder Abschnitte im Fragebogen realisieren kann. So könnte eine [[:de:create:consent|informierte Einwilligung]] zunächst nur die Kurzfassung der Informationen präsentieren und per Klick auf den Knopf "Vollständige Informationen" gelangt man auf eine Seite, welche die detaillierte Darstellung beinhaltet. |
| |
| In der praktichen Umsetzung würde man die Seite mit der vollständigen Information überspringen, wenn die befragte Person nur auf "Weiter" klickt. Man hätte also folgende Seiten: |
| |
| * Seite 1 mit der Kurzfassung |
| * Seite 2 ("details") mit der detaillierten Information |
| * Seite 3 ("start") auf welcher der eigentliche Fragebogen beginnt |
| |
| Der PHP-Code würde nun den Platzhalter ''%details%'' mit einem Knopf zur Seite 2 belegen, während ''[[:de:create:functions:setnextpage]]'' dafür sorgt, dass der "Weiter"-Knopf zur Seite 3 führt. |
| |
| <code php> |
| buttonCode('details', 'Vollständige Informationen', '%details%'); |
| setNextPage('start'); |
| </code> |
| |
| Dieser PHP-Code wird auf Seite 1 platziert, darunter der Text mit der Kurzfasssung, welche an geeigneter Stellen den Platzhalter ''%details%'' verwendet. |
| |
| |
===== JavaScript ===== | ===== JavaScript ===== |
| |
Die Funktion ''buttonToPage()'' liefert einen Knopf, dessen aussehen mittels CSS auch angepasst werden kann. Aber im Prinzip ist auch möglich, das Verhalten mit anderen HTML-Elementen zu verknpüfen. | Die Funktion ''buttonToPage()'' liefert einen Knopf, dessen aussehen mittels CSS auch angepasst werden kann. Aber im Prinzip ist auch möglich, das Verhalten mit anderen HTML-Elementen zu verknüpfen. |
| |
Damit der Fragebogen den Sprungbefehl entgegennimmt, muss der ''buttonToPage()'' Befehl zunächst einmal mit dem gewünschten Sprungziel aufgerufen werden. | Damit der Fragebogen den Sprungbefehl entgegennimmt, muss der ''buttonToPage()'' Befehl zunächst einmal mit dem gewünschten Sprungziel aufgerufen werden. |
</code> | </code> |
| |
Weiterhin ist eine JavaScript-Funktion erforderlich, welche die passenden Daten in die Fragebogen-Seite schreibt und anschließend die Seite mittels "Weiter" abschickt. Diese ist im folgenden HTML-Code definiert. Zusätzlich wird dort ein normaler Links mittels `<a>` definiert und die Funktion mittels ''addEventListener()'' (ganz am Ende) an diesen Link gekoppelt. Der zweite Event-Listener für ''"contextmenu"'' fängt einen Rechtsklick ab. | Weiterhin ist eine JavaScript-Funktion erforderlich, welche die passenden Daten in die Fragebogen-Seite schreibt und anschließend die Seite mittels "Weiter" abschickt. Diese ist im folgenden HTML-Code definiert. Zusätzlich wird dort ein normaler Links mittels ''<a>'' definiert und die Funktion mittels ''addEventListener()'' (ganz am Ende) an diesen Link gekoppelt. Der zweite Event-Listener für ''"contextmenu"'' fängt einen Rechtsklick ab. |
| |
<code html> | <code html> |
field.setAttribute("type", "hidden"); | field.setAttribute("type", "hidden"); |
field.setAttribute("name", "submitGo"); | field.setAttribute("name", "submitGo"); |
field.setAttribute("value", "pageID"); // Hier die passende Seite-Kennung eintragen! | field.setAttribute("value", "pageID"); // Enter the appropriate page ID here! |
// Apppend the hidden input to the questionnaire form | // Apppend the hidden input to the questionnaire form |
var form = SoSciTools.getForm(); | var form = SoSciTools.getForm(); |