Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
Nächste ÜberarbeitungBeide Seiten der Revision
de:create:functions:buttontopage [21.07.2016 23:27] – Mehrsprachige Beschriftung adminde:create:functions:buttontopage [14.03.2019 12:52] – Neues Beispiel: Navigation leiner
Zeile 69: Zeile 69:
 Geben Sie den Seiten, auf welchen die Kapitel beginnen, eindeutige Seiten-Kennungen, z.B. "chapter1" bis "chapter4". 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> <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> </code>
  
Zeile 107: Zeile 109:
  
  
-===== Beispiel: Mehrsprachige Beschriftung =====+===== 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. 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 144: Zeile 146:
   '%btnC3%'   '%btnC3%'
 ); );
 +</code>
 +
 +
 +===== Navigation im Fragebogen =====
 +
 +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> </code>
de/create/functions/buttontopage.txt · Zuletzt geändert: 25.09.2021 21:09 von admin
 
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki