Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:functions:buttontopage [14.03.2019 12:54] – leiner
+++ de:create:functions:buttontopage [05.08.2021 14:42] – admin
@@ Zeile 195: / Zeile 195: @@
 );
 </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 =====
+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.
+<code php>
+buttonToPage('pageID');
+</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.
+<code html>
+<a id="submitLink" href="https://www.soscisurvey.de">www.soscisurvey.de</a>
+<script type="text/javascript">
+function goButton(evt) {
+  var field = document.createElement("input");
+  field.setAttribute("type", "hidden");
+  field.setAttribute("name", "submitGo");
+  field.setAttribute("value", "pageID");  // Enter the appropriate page ID here!
+  // 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("submitLink").addEventListener("click", goButton);
+document.getElementById("submitLink").addEventListener("contextmenu", goButton);
+</script>
+</code>
+Die Seiten-Kennung, welche in der JavaScript-Funktion in das Formularfeld geschrieben wird, muss dieselbe sein wie im vorigen Aufruf von ''buttonToPage()'' und beide Inhalte (PHP-Code und HTML-Code) müssen auf derselben Fragebogen-Seite stehen.
+Wenn man nun auf den Link klickt, wird der Klick so ungeleitet, als hätte man auf den Knopf zur Seite "pageID" geklickt.
+**Hinweis:** Einige Browser sperren womöglich das Abfangen des Rechtsklicks - es kann also durchaus passieren, dass Nutzer über Rechtsklick -> //auf neuer Seite öffnen// direkt auf die verlinkte Seite gelangen.