Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:functions:buttontopage [21.07.2016 23:27] – Mehrsprachige Beschriftung admin
+++ de:create:functions:buttontopage [25.09.2021 21:09] (aktuell) – [buttonToPage()] admin
@@ Zeile 17: / Zeile 17: @@
   * //CSS-Klasse//\\ Dem ''<button>''-Tag, welches für den Knopf verwendet wird, können neben der CSS-Klasse ''buttonToPage'' noch weitere CSS-Klassen als String oder Array beigefügt werden. So lässt sich z.B. eine hierarchische Navigation realisieren.
+**Hinweis:** Beim Verlassen einer Seite mit einem Knopf, der mittels ''buttonToPage()'' eingefügt wurde, werden die Antworten auf Pflichtfragen nicht auf Vollständigkeit überprüft.
-===== Beispiel 1 =====
+===== Mehrere Seiten zurück springen =====
 Der Teilnehmer soll die Möglichkeit haben, zu einer früheren Seite zu springen.
@@ Zeile 37: / Zeile 40: @@
-===== Beispiel 2 =====
+===== Einfache Navigation =====
 Der Teilnehmer soll während der gesamten Befragung die Möglichkeit haben, zu zwei bestimmten Seiten im Fragebogen zu springen.
@@ Zeile 63: / Zeile 66: @@
-===== 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.
@@ Zeile 69: / Zeile 72: @@
 Geben Sie den Seiten, auf welchen die Kapitel beginnen, eindeutige Seiten-Kennungen, z.B. "chapter1" bis "chapter4".
-Initialisieren Sie mit folgendem PHP-Code Platzhalter für alle Knöpfe (z.B. "%btnC1%" bis "%btnC5%"):
+Initialisieren Sie mit folgendem PHP-Code Platzhalter für alle Knöpfe (z.B. "%btnC1%" bis "%btnC5%"). Der IF-Filter mit ''[[:de:create:functions:getroute]]'' stellt sicher, dass die Knöpfe für einmal erreichte Kapitel auch dann erhalten bleiben, wenn der Teilnehmer die erste Seite erneut aufruft.
 <code php>
-replace('%btnC1%', '');
+if (getRoute() == 'start') {
-replace('%btnC2%', '');
+  replace('%btnC1%', '');
-replace('%btnC3%', '');
+  replace('%btnC2%', '');
-replace('%btnC4%', '');
+  replace('%btnC3%', '');
-replace('%btnC5%', '');
+  replace('%btnC4%', '');
+  replace('%btnC5%', '');
+}
 </code>
@@ Zeile 107: / Zeile 112: @@
-===== Beispiel: Mehrsprachige Beschriftung =====
+===== Nicht-lineares Ausfüllen =====
+Der Fragebogen soll nicht (unbedingt) linear bearbeitet werden? Mit ''buttonToPage()'' lässt sich auch eine umfangreiche Navigation realisieren.
+Als Vorbereitung geben Sie allen Seiten, auf denen ein Abschnitt beginnt, unter **Fragebogen zusammenstellen** eine [[de:glossary#seitenkennung|Seiten-Kennung]] und tragen Sie als Kommentar für die Seite einen Titel für den Abschnitt ein, wie er in der Navigation erscheinen soll.
+Es gibt zwei Möglichkeiten, die Navigation auf allen Seiten anzuzeigen:
+  - Verwenden Sie Platzhalter und verwenden Sie diese direkt im **Fragebogen-Layout** -> //HTML-Vorlage// vor dem Platzhalter ''%questionnaire%'' -- dann muss der PHP-Code mit ''buttonToPage()'' nur einmal auf der ersten Seite des Fragebogens platziert werden, aber die aktuelle Seite kann bei dieser Lösung nicht farblich hervorgehoben werden.
+  - Platzieren Sie den PHP-Code für die Navigation auf jeder Seite des Fragebogens, z.B. oben auf jeder Seite. Nachfolgend ein Beispiel, wie der PHP-Code dafür aussehen könnte:
+<code php>
+html(
+  // Ein <div> sorgt für die optische Abgrenzung zwischen Navigation und Seiteninhalt
+  '<div style="border: 2px solid #CCCCCC; border-left: 0 none; border-right: 0 none; padding: 20px 0 12px 0; margin-bottom: 3em;">'.
+  // Ein weiteres <div> erlaubt die flexible Anordnung der Navigations-Schaltflächen
+  '<div class="s2flex navButtons" style="flex-wrap: wrap; margin-right: -8px">'.NL.
+  buttonToPage('start').
+  buttonToPage('kontakt').
+  buttonToPage('studium').
+  buttonToPage('leistungen').
+  buttonToPage('dokumente').
+  buttonToPage('notizen').
+  '<div style="width: 2em;"></div>'.
+  buttonToPage('abschicken').
+  '</div>'.
+  '</div>'
+);
+</code>
+Möchte man die Knöpfe noch ein wenig ansprechender gestalten, kann man im **Fragebogen-Layout** in der //HTML-Vorlage// im ''<style>''-Bereich noch ein wenig CSS-Code ergänzen:
+<code css>
+div.navButtons button {
+  border: 2px solid %color.4%;
+  border-radius: 5px;
+  padding: 7px 6px;
+  margin-bottom: 8px;
+  flex-grow: 1;
+  margin-right: 8px;
+}
+div.navButtons button.currentPage {
+  background-color: %color.4%;
+  color: white;
+}
+</code>
+===== Mehrsprachige Beschriftung =====
 In einem mehrsprachigen Fragebogen ([[:de:create:multilang]]) müssen die Beschriftungen der Knöpfe je nach Sprachversion angepasst werden. Dafür kann dem zweiten Parameter ein Array übergeben werden.
@@ Zeile 145: / Zeile 198: @@
 );
 </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.
+Umgekehrt kann ''buttonToPage()'' natürlich auch verwendet werden, damit Befragte einen Abschnitt überspringen können, den sie nicht beantworten möchten. Wenn die Relevanz eines Abschnitts aus den bisherigen Fragen hervor geht, ist eine [[:de:create:filters|Filterfrage]] in aller Regel aber die bessere Lösung.
+Weiterhin sei auf die Funktion ''[[:de:create:functions:textlink]]'' verwiesen, welche einen umfangreichen Informationstext in einem Pop-Up-Fenster anzeigt.
+===== 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.