Table of content am Anfang des Fragebogens

Question

Hallo,

ein Kunde hätte gerne ein Inhaltsverzeichnis am Anfang des Fragebogens. Am Anfang jeden neuen Kapitels soll dann ein Button zwischen "Zurück" und "Weiter" sein mit "Inhaltsverzeichnis", mit dem die User zurück zum Inhaltsverzeichnis gehen können und von dort aus die anderen Kapitel ansteuern können.

Ich dachte, ich kann das Inhaltsverzeichnis mit html/CSS schreiben, und dann mit gotoPage(''); jedes Kapitel mit der entsprechenden Seite im Fragebogen verknüpfen. Der Button, welcher immer zurück zum Inhaltsverzeichnis verweist, könnte ja auch mit gotoPage(); funktionieren. Oder ist das ein Problem mit PHP und sollte eher über JS gelöst werden?

Und gibt es grundsätzliches etwas an dem Design auszusetzen/ zu beachten?

Ich habe für andere Kunden schon öfters eine Navigationsleiste eingebaut (https://www.soscisurvey.de/help/doku.php/de:create:navigation?s[]=*navigations*), aber das soll dieses Mal eben etwas anders sein.

Answer 1

Verwenden Sie buttonToPage() - diese Funktion ist explizit zum Programmieren einer Navigation gedacht.

Sie können auf der Seite mit dem Inhaltsverzeichnis einfach alle Kapitel mittels buttonToPage() anbieten. Und auf der letzten Seite eines jeden Abschnitts verwenden Sie dann setNextPage(), damit die Leute wieder zur Übersicht zurück kommen.

Und gibt es grundsätzliches etwas an dem Design auszusetzen/ zu beachten?

Sie werden dann noch einen kleinen PHP-Filter benötigen, der prüft, welche Kapitel schon bearbeitet wurden (da empfehle ich, dass Sie am Ende jedes Kapitels eine interne Variable von 0 auf 1 setzen), sodass Sie irgendwann den Knopf "Fragebogen abschließen" anbieten können.

Sie müssen ein wenig auf den Fortschrittsbalken achten (ich würde in Betracht ziehen, ihn ganz zu deaktivieren), und falls die Teilfragebpögen sehr umfangreich sind, könnte man auch einen Blick auf goToQuestionnaire() oder multiLevelDown() werfen.

Comments

Danke, das ist ein guter Hinweis. Ich versuche es morgen einmal mit buttonToPage() umzusetzen. Ich hoffe/denke, dass ich den Fortschrittbalken deaktivieren darf. Das hat mir schon mit der Navigationsleiste Probleme bereitet

---

Doch schon eine kurze Frage- was wäre der einfachste Weg, den Button direkt zwischen "Zurück" und "Weiter" zu positionierern? ALso was wäre der geeignete CSS Code, den ich für Button to Page in dem Fall benutzen muss.

---

Dafür müssten Sie entweder alle drei Knöpfe manuell platzieren oder das Layout so anpassen, dass es noch einen zusätzlichen Knopf vorsieht, den Sie dann via Platzhalter einfügen würden. Letzteres wäre die einfachste Lösung, um den Knopf auf alle Seiten zu bekommen.

Um letzteres zu erklären, ist der Platz hier etwas knapp, deshalb habe ich das in der Anleitung ergänzt: https://www.soscisurvey.de/help/doku.php/de:create:functions:buttontopage#knopf_zum_inhaltsverzeichnis

---

ok, das verstehe ich soweit. Wenn ich den extra Button allerdings immer nur am Kapitel Anfang haben möchte (also alle 4 Seiten oder so). Soll ich den selben Weg gehen und den neuen Button dann auf den anderen Seiten wieder ausblenden?  Wie wäre das ausblenden möglich? geht es z. B.über option('%button.custom%', false);

EDIT: kleine Anmerkung: Wenn der Code vor div id="s2t-controls" eingeschoben wird, landen die Buttons unter dem hr Element, was glaube ich nicht sein sollte. Ich habe es direkt unter  %questionnaire% gesetzt (nach dem schließenden div) und noch padding-bottom: 10px; eingefügt, damit den Buttons nicht auf der hr Linie kleben.

Aber ich verwende auch kein Standard Layout, deswegen weiß ich nicht, ob das nur bei mir die Fall ist.

---

> option('%button.custom%', false);

Fast. replace('%button.custom%', '') müsste funktionieren.

> EDIT: kleine Anmerkung: Wenn der Code vor div id="s2t-controls" eingeschoben wird, landen die Buttons unter dem hr Element

Stimmt, das gilt nur für das Standard-Layout 2023. Ich passe das in der Anleitung noch an, danke für den Hinweis.

---

> Fast. replace('%button.custom%', '') müsste funktionieren.
Ja, funktioniert- allerdings dann auf allen nachstehenden Seiten. Ich müsste es Seitengenau ausblenden.

Das würde mit JS gehen, ist allerdings relativ Code lastig. Wenn es mit SoSci eine Möglichkeit gibt, würde ich eher die bevorzugen.
-----------------------
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('button_custom');
    if (button) {
        button.remove(); // Removes the element from the DOM
    }
});

---

> Ja, funktioniert- allerdings dann auf allen nachstehenden Seiten. Ich müsste es Seitengenau ausblenden.

Genau. Sie würden jeweils auf der Seite, wo Sie den Knopf haben möchten, das buttonToPage() platzieren und auf der folgenden Seite dann immer dass replace(). Selbiges schaltet den Knopf "bis auf Weiteres" ab, sodass Sie den Befehl nicht auf jede Seite setzen müssen.

Eine alternative Lösung bestünde darin, dass Sie den HTML-Code nichts ins Layout packen, sondern direkt auf die Fragebogen-Seite und dort nicht mit Platzhaltern, sondern mit buttonCode() arbeiten. Also unten auf die Seiten mit Knopf:

html('
<div style="display: flex; justify-content: space-between; margin-top: 2em;">
    <div>'.buttonCode('back').'</div>
    <div>'.buttonToPage('content', 'Übersicht').'</div>
    <div>'.buttonCode('next').'</div>
</div>
');