Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
Letzte Überarbeitung Beide Seiten der Revision
de:create:functions:buttontopage [21.07.2016 23:27]
admin Mehrsprachige Beschriftung
de:create:functions:buttontopage [14.03.2019 12:52]
leiner Neues Beispiel: Navigation
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: 14.03.2019 12:54 von leiner
 
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