<h1 id="markdown-header-einleitung">Einleitung</h1>
<p>
    Das Trainingssystem ist ein
    <a data-is-external-link="true" href="https://de.wordpress.org/" rel="nofollow">WordPress</a>
    -Plugin zum Hosting einer Trainingsplattform auf WordPress-Basis. Trainingseinheiten lassen sich damit in Trainings,
    Lektionen und Seiten gliedern. Einzelne Trainings können für spezielle Benutzer*innen oder Gruppen von
    Benutzer*innen (z.B. Firmen oder Abteilungen) freigeschaltet werden. Es gelten die Voraussetzungen, die auch für
    WordPress gelten. Es ist empfohlen, das Theme
    <a data-is-external-link="true" href="https://bitbucket.org/cosa1/coachlight.v2/" rel="nofollow">Coachlight</a>
    zu installieren. Das Trainingssystem verwendet
    <a data-is-external-link="true" href="https://getbootstrap.com" rel="nofollow">Bootstrap</a>
    ,
    <a data-is-external-link="true" href="https://jquery.com" rel="nofollow">jQuery</a>
    und
    <a data-is-external-link="true" href="https://fontawesome.com" rel="nofollow">Font Awesome</a>
    .
</p>
<p>Das Trainingssystem ist im Verbund eines Forschungsprojekts entstanden, in dem spezielle Inhalte zu integrieren
    waren. Aus diesem Grund enthält das System und die vorliegende Dokumentation vereinzelt Sonderlösungen,
    beispielsweise im Bereich des Layouts oder in Form von speziellen Skripten. Diese werden aber hier aufgeführt, um
    sie der Nutzung oder Weiterentwicklung zugänglich zu machen. </p>
<h1 id="markdown-header-serveranforderungen">Serveranforderungen</h1>
<p>
    Es gelten allgemein die Anforderungen an eine WordPress-Installation (siehe
    <a class="ap-connect-link" href="https://de.wordpress.org/about/requirements/"
        rel="nofollow">https://de.wordpress.org/about/requirements/</a>
    ). Folglich sollte
    <strong>PHP (min. 7.4.x)</strong>
    und MySQL (min. 5.6) installiert sein. Für größere Projekte ab ca. 100 Accounts wird empfohlen, dass das
    PHP-Memory-Limit einstellbar ist, beispielsweise auf 256MB. Die maximale Ausführungszeit (
    <code>max_execution_time</code>
    ) sollte zudem auch einstellbar sein, beispielsweise auf mindestens 120 Sekunden bei einem Projekt ab etwa 10
    Trainings mit je 50 Seiten.
</p>
<h1 id="markdown-header-installation-und-inbetriebnahme">Installation und Inbetriebnahme</h1>
<p>Das Plugin kann ganz einfach über das WordPress-Backend und den Menüpunkt „Plugins–&gt;Installieren“ installiert
    werden. Nachdem die ZIP-Datei über den Button „Plugin hochladen“ erfolgreich hochgeladen wurde, muss es nur noch
    aktiviert werden. Dass das funktioniert hat, erkennt man daran, dass im WordPress-Backend nun der Menüpunkt
    „Trainingssystem“ hinzugekommen ist.</p>
<p>
    Nachdem die WordPress-Installation aufgesetzt und das Plugin installiert wurde, sind noch einige wenige Schritte
    erforderlich, um die Plattform schließlich in Betrieb zu nehmen. Zunächst ist das Erzeugen eines Hauptmenüs
    empfehlenswert. Dies ist über das WordPress-Backend und den Punkt „Design–&gt;Menüs“ möglich. Hier muss ein Menü mit
    einem beliebigen Titel wie z.B. „Hauptmenü“ erstellt werden. Beim Erstellen sollte darauf geachtet werden, dass die
    Checkbox „Primary Menu“ unter der Einstellung „Position in Theme“ gesetzt ist.
    <br>

    Sobald das Menü erstellt wurde, muss diesem mindestens ein Eintrag hinzugefügt werden. Dazu muss auf der linken
    Seite unter „Menüeinträge hinzufügen“ ein oder mehrere Elemente, z.B. eine neu erstellte Seite „Startseite“ oder
    „Home“, ausgewählt werden.
    <br>

    Um die Funktionen des Trainingssystems im Frontend zur Verfügung zu stellen, müssen dafür entsprechende Seiten (
    <a data-is-external-link="true" href="#markdown-header-standardseiten" rel="nofollow">Standardseiten</a>
    ) erstellt werden. Dies muss nicht manuell durchgeführt werden, sondern kann über den Punkt
    „Trainingssystem-&gt;Einstellungen–&gt;Standardseiten anlegen“ erledigt werden. Über den Punkt
    „Trainingssystem–&gt;Einstellungen-&gt;Seitenzuteilung“ können die Funktionen den so erzeugten Seiten zugeteilt
    werden.
    <br>

    Wurde das Menü erzeugt, kann dieses in den Einstellungen des Trainingssystems im Abschnitt „Seitenzuteilung“ unter
    „Standardmenü anzeigen in (Menü)“ ausgewählt werden, um das Menü als Standardmenü auf der Plattform einzubinden.
    Wenn das Menü auf diese Weise eingefügt wurde, ist es möglich, bestimmte Menüpunkte wie bspw. Verwaltung oder
    Nachrichten optional ausblenden zu lassen.
    <br>

    Alternativ kann das Menü auch selbst erstellt werden. Dazu muss, wie zuvor bereits beschrieben, das Menü unter
    „Design–&gt;Menüs“ nach Belieben zusammengestellt werden. Unter der Einstellung „Standardmenü anzeigen in (Menü)“
    muss hier aber kein Menü, sondern die Option „nicht zugewiesen“ ausgewählt werden.
</p>
<p>Um Probleme bei der Zugehörigkeit von Trainings, Lektionen sowie Seiten vorzubeugen, ist folgender Schritt notwendig:
    Wählt man über das Admin-Menü „Einstellungen“ und dann den Punkt „Permalinks“, sollte dort „Einfach“ ausgewählt
    sein. Falls nicht, sollte das entsprechend angepasst werden.</p>
<h2 id="markdown-header-inhaltsverzeichnis">Inhaltsverzeichnis</h2>
<ol>
    <li>
        <p>
            <a data-is-external-link="true" href="#markdown-header-grundlagen" rel="nofollow">Grundlagen</a>
            <br>

            1.1
            <a data-is-external-link="true" href="#markdown-header-trainings-lektionen-seiten" rel="nofollow">Trainings,
                Lektionen, Seiten</a>
            <br>

            1.2
            <a data-is-external-link="true" href="#markdown-header-user-management" rel="nofollow">User-Management</a>
            <br>

            1.3
            <a data-is-external-link="true" href="#markdown-header-darstellungsempfehlungen-fur-trainingsseiten"
                rel="nofollow">Darstellungsempfehlungen für Trainingsseiten</a>
            <br>

            1.4
            <a data-is-external-link="true" href="#markdown-header-plattform-kopieren-duplizieren"
                rel="nofollow">Plattform kopieren</a>
            <br>

            1.5
            <a data-is-external-link="true" href="#markdown-header-alternative-themes" rel="nofollow">Alternative
                Themes</a>
            <br>

            1.6
            <a data-is-external-link="true" href="#markdown-header-plugin-vorschlage"
                rel="nofollow">Plugin-Vorschläge</a>
        </p>
    </li>
    <li>
        <p>
            <a data-is-external-link="true" href="#markdown-header-standardseiten" rel="nofollow">Standardseiten</a>
            <br>

            2.1
            <a data-is-external-link="true" href="#markdown-header-profil-seite" rel="nofollow">Profil-Seite</a>
            <br>

            2.2
            <a data-is-external-link="true" href="#markdown-header-abzeichenubersicht"
                rel="nofollow">Abzeichenübersicht</a>
            <br>

            2.3
            <a data-is-external-link="true" href="#markdown-header-trainingsubersicht"
                rel="nofollow">Trainingsübersicht</a>
            <br>

            2.4
            <a data-is-external-link="true" href="#markdown-header-trainingszuweisung"
                rel="nofollow">Trainingszuweisung</a>
            <br>

            2.5
            <a data-is-external-link="true" href="#markdown-header-nutzerliste" rel="nofollow">Nutzerliste</a>
            <br>

            2.6
            <a data-is-external-link="true" href="#markdown-header-trainingsvorlagen"
                rel="nofollow">Trainingsvorlagen</a>
            <br>

            2.7
            <a data-is-external-link="true" href="#markdown-header-firmenzuweisung" rel="nofollow">Firmenzuweisung</a>
            <br>

            2.8
            <a data-is-external-link="true" href="#markdown-header-csv-import" rel="nofollow">CSV-Import</a>
            <br>

            2.9
            <a data-is-external-link="true" href="#markdown-header-nutzer-anlegen" rel="nofollow">Nutzer anlegen</a>
            <br>

            2.10
            <a data-is-external-link="true" href="#markdown-header-freischaltecode" rel="nofollow">Freischaltecode</a>
            <br>

            2.11
            <a data-is-external-link="true" href="#markdown-header-systemstatistiken"
                rel="nofollow">Systemstatistiken</a>
            <br>

            2.12
            <a data-is-external-link="true" href="#markdown-header-nachrichten" rel="nofollow">Nachrichten</a>
            <br>

            2.13
            <a data-is-external-link="true" href="#markdown-header-trainings-ex-import" rel="nofollow">Trainings
                Ex-/Import</a>
            <br>

            2.14
            <a data-is-external-link="true" href="#markdown-header-unternehmen-details"
                rel="nofollow">Unternehmen-Details</a>
            <br>

            2.15
            <a data-is-external-link="true" href="#markdown-header-nutzer-detail-seite"
                rel="nofollow">Nutzer-Detail-Seite</a>
            <br>

            2.16
            <a data-is-external-link="true" href="#markdown-header-nutzerdaten-exportieren" rel="nofollow">Nutzerdaten
                exportieren</a>
            <br>

            2.17
            <a data-is-external-link="true" href="#markdown-header-coaching-supervisoren-ubersicht"
                rel="nofollow">Coaching-/Supervisoren-Übersicht</a>
            <br>

            2.18
            <a data-is-external-link="true" href="#markdown-header-datenexport" rel="nofollow">Datenexport</a>
        </p>
    </li>
    <li>
        <p>
            <a data-is-external-link="true" href="#markdown-header-trainingsentwicklung-interaktive-elemente"
                rel="nofollow">Trainingsentwicklung: Interaktive Elemente</a>
            <br>

            3.1
            <a data-is-external-link="true" href="#markdown-header-shortcode-ubersicht-fur-interaktive-elemente"
                rel="nofollow">Shortcode-Übersicht für interaktive Elemente</a>
            <br>

            3.2
            <a data-is-external-link="true" href="#markdown-header-formulare" rel="nofollow">Formulare</a>
            <br>

            3.3
            <a data-is-external-link="true" href="#markdown-header-ubungen" rel="nofollow">Übungen</a>
            <br>

            3.4
            <a data-is-external-link="true" href="#markdown-header-akkordeon" rel="nofollow">Akkordeon</a>
            <br>

            3.5
            <a data-is-external-link="true" href="#markdown-header-radio" rel="nofollow">Radio</a>
            <br>

            3.6
            <a data-is-external-link="true" href="#markdown-header-quiz" rel="nofollow">Quiz</a>
            <br>

            3.7
            <a data-is-external-link="true" href="#markdown-header-radio-buttons-zurucksetzen"
                rel="nofollow">Radio-Buttons zurücksetzen</a>
            <br>

            3.8
            <a data-is-external-link="true" href="#markdown-header-conditional-content" rel="nofollow">Conditional
                Content</a>
            <br>

            3.9
            <a data-is-external-link="true" href="#markdown-header-check-tables" rel="nofollow">Check Tables</a>
            <br>

            3.10
            <a data-is-external-link="true" href="#markdown-header-pdf-dateien-erzeugen" rel="nofollow">PDF-Dateien
                erzeugen</a>
            <br>

            3.11
            <a data-is-external-link="true" href="#markdown-header-gefahrdungsbeurteilung-gbu"
                rel="nofollow">Gefährdungsbeurteilung (GBU)</a>
            <br>

            3.12
            <a data-is-external-link="true" href="#markdown-header-freigabe-von-inhalten" rel="nofollow">Freigabe von
                Inhalten</a>
            <br>

            3.13
            <a data-is-external-link="true" href="#markdown-header-coachingmodus-formulare"
                rel="nofollow">Coachingmodus-Formulare</a>
            <br>

            3.14
            <a data-is-external-link="true" href="#markdown-header-ausgabe-von-inhalten" rel="nofollow">Ausgabe von
                Inhalten</a>
            <br>

            3.15
            <a data-is-external-link="true" href="#markdown-header-anzeigen-von-beitragen" rel="nofollow">Anzeigen von
                Beiträgen</a>
            <br>

            3.16
            <a data-is-external-link="true" href="#markdown-header-gamification-elemente"
                rel="nofollow">Gamification-Elemente</a>
            <br>

            3.17
            <a data-is-external-link="true" href="#markdown-header-weitere-interaktive-elemente" rel="nofollow">Weitere
                interaktive Elemente</a>
        </p>
    </li>
    <li>
        <p>
            <a data-is-external-link="true" href="#markdown-header-trainingsentwicklung-layout-und-visuelle-elemente"
                rel="nofollow">Trainingsentwicklung: Layout und visuelle Elemente</a>
            <br>

            4.1
            <a data-is-external-link="true" href="#markdown-header-layout" rel="nofollow">Layout</a>
            <br>

            4.2
            <a data-is-external-link="true" href="#markdown-header-shortcode-ubersicht-fur-visuelle-elemente"
                rel="nofollow">Shortcode-Übersicht für visuelle Elemente</a>
            <br>

            4.3
            <a data-is-external-link="true" href="#markdown-header-icons" rel="nofollow">Icons</a>
            <br>

            4.4
            <a data-is-external-link="true" href="#markdown-header-slideshow" rel="nofollow">Slideshow</a>
        </p>
    </li>
    <li>
        <p>
            <a data-is-external-link="true" href="#markdown-header-weitere-elemente-des-trainingssystems"
                rel="nofollow">Weitere Elemente des Trainingssystems</a>
            <br>

            5.1
            <a data-is-external-link="true" href="#markdown-header-limesurvey-anbindung"
                rel="nofollow">LimeSurvey-Anbindung</a>
            <br>

            5.2
            <a data-is-external-link="true" href="#markdown-header-demo-training" rel="nofollow">Demo-Training</a>
            <br>

            5.3
            <a data-is-external-link="true" href="#markdown-header-studien-export" rel="nofollow">Studien-Export</a>
            <br>

            5.4
            <a data-is-external-link="true" href="#markdown-header-lieblingsubungen" rel="nofollow">Lieblingsübungen</a>
            <br>

            5.5
            <a data-is-external-link="true" href="#markdown-header-zertifikate" rel="nofollow">Zertifikate</a>
            <br>

            5.6
            <a data-is-external-link="true" href="#markdown-header-hilfe-kontaktinformationen"
                rel="nofollow">Hilfe-/Kontaktinformationen</a>
        </p>
    </li>
    <li>
        <p>
            <a data-is-external-link="true" href="#markdown-header-entwicklung" rel="nofollow">Entwicklung</a>
            <br>

            6.1
            <a data-is-external-link="true"
                href="#markdown-header-allgemeine-hinweise-zur-weiterentwicklung-des-plugins" rel="nofollow">Allgemeine
                Hinweise zur Weiterentwicklung des Plugins</a>
            <br>

            6.2
            <a data-is-external-link="true" href="#markdown-header-aufbau-des-plugins" rel="nofollow">Aufbau des
                Plugins</a>
            <br>

            6.3
            <a data-is-external-link="true" href="#markdown-header-funktionalitat-hinzufugen"
                rel="nofollow">Funktionalität hinzufügen</a>
            <br>

            6.4
            <a data-is-external-link="true" href="#markdown-header-umgang-mit-nachrichten-vom-system-alerts"
                rel="nofollow">Umgang mit Nachrichten vom System (Alerts)</a>
            <br>

            6.5
            <a data-is-external-link="true" href="#markdown-header-design-andern" rel="nofollow">Design ändern</a>
            <br>

            6.6
            <a data-is-external-link="true" href="#markdown-header-rollen-und-rechte" rel="nofollow">Rollen und
                Rechte</a>
            <br>

            6.7
            <a data-is-external-link="true" href="#markdown-header-einen-release-erzeugen" rel="nofollow">Einen Release
                erzeugen</a>
            <br>

            6.8
            <a data-is-external-link="true" href="#markdown-header-code-samples" rel="nofollow">Code Samples</a>
            <br>

            6.9
            <a data-is-external-link="true" href="#markdown-header-pdf-print" rel="nofollow">PDF-Print</a>
            <br>

            6.10
            <a data-is-external-link="true" href="#markdown-header-patch-funktion" rel="nofollow">Patch-Funktion</a>
        </p>
    </li>
</ol>
<h1 id="markdown-header-grundlagen">Grundlagen</h1>
<p>Die Verwendung des Trainingssystems, also das Bereitstellen und das Erstellen von Inhalten, ist ohne
    Programmierkenntnisse möglich. Zur Erstellung von Inhalten muss das WordPress-Backend zugänglich sein. Das weitere
    Betreiben der Plattform und das Arbeiten mit Benutzer*innen ist über ein entsprechendes Menü im Frontend möglich,
    sodass nach Fertigstellung der Inhalte für eine geplante Plattform ausschließlich über das Frontend mit dem
    Trainingssystem gearbeitet werden kann.</p>
<h2 id="markdown-header-trainings-lektionen-seiten">Trainings, Lektionen, Seiten</h2>
<p>Im Trainingssystem können Trainings zusammengestellt werden, die den Benutzer*innen bereitgestellt werden können. Ein
    Training gliedert sich in eine oder mehrere Lektionen. Diese unterteilen sich wiederum in eine oder mehrere Seiten.
</p>
<p>
    <img alt="gliederung_training.jpg"
        src="https://bitbucket.org/repo/z8zjexy/images/2711664255-gliederung_training.jpg">
</p>
<p>Trainings, Lektionen und Seiten können im WordPress-Backend angelegt werden. Über dem Menüpunkt „Trainings“ unter dem
    Reiter „Trainingssystem“ kann eine Übersicht über alle Trainings aufgerufen werden, die auf der Plattform angelegt
    wurden. Mit einem Klick auf die Schaltfläche „Neues Training“ öffnet sich eine neue Seite, auf der ein neues
    Training angelegt werden kann. Zunächst muss im obersten Eingabefeld ein Titel für das Training vergeben werden. Der
    Titel wird im gesamten System verwendet, um das Training zu identifizieren. </p>
<p>
    <img alt="training_erstellen.PNG" src="https://bitbucket.org/repo/z8zjexy/images/979954331-training_erstellen.PNG">
</p>
<p>
    Im Eingabefeld in der Mitte dieser Seite kann eine Kurzbeschreibung des Trainings eingefügt werden, welche in der
    <a data-is-external-link="true" href="#markdown-header-trainingsubersicht" rel="nofollow">Trainingsübersicht</a>
    für das Training eingesehen werden kann. Diese Beschreibung kann hier genutzt werden, um den Benutzer*innen bspw.
    einen groben Überblick über den Inhalt des Trainings zu geben.
</p>
<p>
    <img alt="training_beschreibung_trainingsubersicht.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/497445721-training_beschreibung_trainingsubersicht.PNG">
</p>
<p>Im dritten Eingabefeld können eine weitere Beschreibung oder auch Bilder eingefügt werden. Diese Inhalte werden in
    der Lektionsübersicht für ein Training angezeigt. </p>
<p>
    <img alt="training_beschreibung_lektionsubersicht.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/3725223877-training_beschreibung_lektionsubersicht.PNG">
</p>
<p>
    Für jedes Training kann auch ein Beitragsbild ausgewählt werden, welches ebenfalls anstelle eines Standardbildes
    innerhalb der Trainingsübersicht angezeigt wird. Des Weiteren kann ein Training auch einer Kategorie zugeordnet
    werden. Dies wird relevant, wenn die Trainings in der Trainingsübersicht nach Kategorien gruppiert werden sollen
    (siehe den Abschnitt
    <a data-is-external-link="true" href="#markdown-header-trainingsubersicht" rel="nofollow">„Trainingsübersicht“</a>
    für weitere Informationen). Wurde ein Training mit den entsprechenden Informationen angelegt, muss dieses nur über
    den Button „Veröffentlichen“ veröffentlicht werden.
    <br>

    Im nächsten Schritt müssen eine oder mehrere Lektionen erstellt werden. Dies geschieht im WordPress-Backend über den
    Button „Neue Lektion“ über den Menüpunkt „Trainingssystem-&gt;Lektionen“. Hier muss nur ein Titel gewählt und der
    Button „Veröffentlichen“ geklickt werden, um die Lektion anzulegen.
    <br>

    Nun müssen Seiten für die erstellten Lektionen angelegt werden. Eine Seite kann im Trainingssystem über den
    Menüpunkt „Trainingssystem-&gt;Seiten“ durch Klick auf den Button „Neue Seite“ erstellt werden. Im sich öffnenden
    Fenster kann im Eingabefeld oben nun der Titel der Seite angegeben werden. Mittels des mittigen Textfeldes kann der
    Inhalt der Seite nach Belieben definiert werden.
    <br>

    Wurden nun ein Training, eine oder mehrere Lektionen sowie eine oder mehrere Seiten erstellt, müssen diese Elemente
    abschließend zu einem Training zusammengeschaltet werden. Dies ist im unteren Bereich der Übersicht für ein Training
    unter „Training zusammenstellen“ möglich. Mit „Lektion hinzufügen“ können hier Lektionen und nach Betätigung des
    Buttons „Seiten“ auch Seiten über einen entsprechenden Button hinzugefügt werden.
</p>
<p>Das Ergebnis der Zusammenstellung bleibt stets ablesbar, da jeder Balken eine Lektion innerhalb des Trainings
    darstellt. Daneben kann für jede Lektion auch die Auflistung aller dazugehörigen Seiten über den entsprechenden
    Button eingeblendet werden.</p>
<p>Über den kleinen „-“-Button in der oberen rechten Ecke jedes Lektion-Balkens kann eine Lektion samt der dazugehörigen
    Seiten aus dem Training entfernt werden. </p>
<p>
    <img alt="trainings_zusammenstellen.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/3947608847-trainings_zusammenstellen.PNG">
</p>
<p>Es ist aus technischer Sicht davon abzuraten, eine Lektion in mehrere verschiedene Trainings zu integrieren.</p>
<h2 id="markdown-header-user-management">User Management</h2>
<p>Die Benutzer*innen können über das Frontend organisiert werden. Über den Menüpunkt „Verwaltung“ sind diesbezüglich
    verschiedene Optionen zugänglich. </p>
<h3 id="markdown-header-hinzufugen">Hinzufügen</h3>
<p>
    Eine
    <a data-is-external-link="true" href="#markdown-header-nutzerliste" rel="nofollow">Tabelle</a>
    aller registrierten Personen bildet den Kern der User-Verwaltung. In dieser sind auch Informationen zum Stand der
    jeweiligen Trainings oder zur Aktivität ablesbar. Weiterhin kann jede*r einzelne Benutzer*in ausgewählt werden, um
    weitere
    <a data-is-external-link="true" href="#markdown-header-nutzer-detail-seite" rel="nofollow">Details</a>
    abzurufen. Das Hinzufügen von Benutzer*innen zur Plattform funktioniert
    <a data-is-external-link="true" href="#markdown-header-nutzer-anlegen" rel="nofollow">einzeln</a>
    oder als
    <a data-is-external-link="true" href="#markdown-header-csv-import" rel="nofollow">CSV-Import</a>
    für eine größere Gruppe. Außerdem besteht die Möglichkeit, Benutzer*innen zu
    <a data-is-external-link="true" href="#markdown-header-firmenzuweisung" rel="nofollow">Firmen</a>
    und Abteilungen zu gliedern und darüber in entsprechenden Trainings Gruppenauswertungen zu erhalten.
</p>
<h3 id="markdown-header-trainings-freigeben">Trainings freigeben</h3>
<p>
    Ist ein Training angelegt und ein*e Benutzer*in zur Plattform hinzugefügt, kann ganz individuell eine entsprechende
    Zusammenstellung an Trainings einem*r Benutzer*in zugewiesen werden. Diese Option ist entweder über den Menüpunkt
    <a data-is-external-link="true" href="#markdown-header-trainingszuweisung" rel="nofollow">„Trainings zuweisen“</a>
    oder über die
    <a data-is-external-link="true" href="#markdown-header-nutzer-detail-seite" rel="nofollow">Nutzer-Detail-Seite</a>
    möglich. In der linken Spalte dieser zweigeteilten Seiten wird ein*e Benutzer*in ausgewählt, in der rechten Spalte
    erfolgt die Zusammenstellung der Trainings.
</p>
<p>Ein Training kann in drei verschiedenen Trainingsmodi freigeschaltet werden:</p>
<ul>
    <li>Begleitet: Der*Die Benutzer*in erhält nach jeder Trainingseinheit ein schriftliches Feedback vom zugeordneten
        E-Coach. Erst nachdem der E-Coach das Feedback versendet hat, kann die nächste Trainingseinheit begonnen werden.
    </li>
    <li>Sequenziell: Der*Die Benutzer*in bearbeitet im eigenen Tempo alle Trainingseinheiten in der vorgegebenen
        Reihenfolge.</li>
    <li>Individuell: Der*Die Benutzer*in kann die Trainingseinheiten in beliebiger Reihenfolge bearbeiten.</li>
</ul>
<h3 id="markdown-header-vorlagennutzer">Vorlagennutzer</h3>
<p>
    Es können auch vorgefertigte Profile (
    <a data-is-external-link="true" href="#markdown-header-trainingsvorlagen" rel="nofollow">„Vorlagennutzer“</a>
    ) angelegt werden. Dies sind keine wirklichen Benutzer*innen, sondern Profile. Eine Zusammenstellung von
    verschiedenen Trainings kann einer Vorlage zugewiesen werden. Über
    <a data-is-external-link="true" href="#markdown-header-freischaltecode" rel="nofollow">Freischaltecodes</a>
    ist eine solche Vorlage dann möglichen neuen Benutzer*innen bereitzustellen.
</p>
<h3 id="markdown-header-user-modus">User-Modus</h3>
<p>Der „User-Modus“ erlaubt das Betrachten der Eingaben in den Trainings, beispielsweise zu Analysezwecken durch einen
    Coach. Er kann über die Nutzer-Detail-Seite, welche über die zentrale Nutzerliste jeweils erreicht werden kann,
    gestartet werden. Navigiert man im aktiven User-Modus in ein Training, sind die Eingaben des*der jeweiligen
    Benutzer*in zu sehen. </p>
<p>
    <img alt="user_modus.PNG" src="https://bitbucket.org/repo/z8zjexy/images/2820899313-user_modus.PNG">
</p>
<p>Es ist durch den roten Balken am oberen Rand der Seite stets erkennbar, für welche*n Benutzer*in man sich gerade im
    User-Modus befindet. Der User-Modus kann über den „Beenden“-Button in diesem roten Balken wieder verlassen werden.
</p>
<h3 id="markdown-header-aktivitat">Aktivität</h3>
<p>Daneben können auch verschiedene Statistiken, beispielsweise Informationen darüber, welche Seiten wie lange besucht
    wurden, abgerufen werden. </p>
<h2 id="markdown-header-darstellungsempfehlungen-fur-trainingsseiten">Darstellungsempfehlungen für Trainingsseiten</h2>
<h3 id="markdown-header-benennung-von-trainingsseiten">Benennung von Trainingsseiten</h3>
<p>Die Benennung der Seiten folgt bestenfalls dem Muster „Trainingsname + fortlaufende, dreistellige Nummer“. </p>
<ul>
    <li>Beispiel: „Stress101“ – Stresstraining, Lektion 1, Seite 1</li>
    <li>Beispiel: „Regeneration409“ – Regenerationstraining, Lektion 4, Seite 9</li>
</ul>
<p>Die Formulare folgen auch diesem Muster, um sie in der Formularliste schnell einer Seite zuordnen zu können. </p>
<ul>
    <li>Beispiel: „Stress104: Meine Kraftgeber“ – Formular im Stresstraining, Lektion 1, Seite 4 zum Thema Kraftgeber
    </li>
</ul>
<h3 id="markdown-header-schrift-in-trainingsseiten">Schrift in Trainingsseiten</h3>
<ul>
    <li>
        Die erste Überschrift einer Lektion ist immer
        <code>&lt;h1&gt;</code>
        .
    </li>
    <li>
        Die Überschrift direkt darunter (Kapitelüberschrift, meistens mit einer Ziffer versehen) ist
        <code>&lt;h2&gt;</code>
        .
    </li>
    <li>
        Alle weiteren Überschriften innerhalb der Lektion sind
        <code>&lt;h3&gt;</code>
        .
    </li>
    <li>
        Fragen im Quiz oder Überschriften einer unteren inhaltlichen Ebene sind
        <code>&lt;h4&gt;</code>
        .
    </li>
    <li>
        Alle Absätze sind im
        <code>&lt;p&gt;</code>
        -Tag.
    </li>
</ul>
<h3 id="markdown-header-medien-einbinden">Medien einbinden</h3>
<p>
    Beim Erstellen von Trainingsseiten können Bilder über „Dateien hinzufügen“ eingebunden werden. Dateinamen sollten
    keine Umlaute enthalten, da dies bei
    <a data-is-external-link="true" href="#markdown-header-trainings-ex-import" rel="nofollow">Ex- und Importen von
        Trainings</a>
    zu Fehlern führt. Die Größenverhältnisse sind global überschrieben. Jedes Bild ist damit so groß wie das
    übergeordnete Element (siehe
    <a data-is-external-link="true" href="#markdown-header-layout" rel="nofollow">Layout</a>
    ). Im Sinne des Responsive-Design sorgt dies auch auf kleineren Bildschirmen für eine angemessene Darstellung. Beim
    Einbinden von Bildern ist es auch empfehleneswert, einen Alternativtext anzugeben, damit die Benutzer*innen
    Informationen über das Bild erhalten können, falls bspw. das Bild nicht geladen werden konnte oder falls ein Screen
    Reader genutzt wird. Ein Alternativtext für das Bild kann einerseits beim Einbinden über „Dateien hinzufügen“ im
    Textfeld „Alternativtext“ oder über das
    <code>alt</code>
    -Attribut für das
    <code>&lt;img&gt;</code>
    -Element angegeben werden.
    <br>

    Videos werden über „Dateien hinzufügen“ eingebunden. Auch hier sind die Größenverhältnisse global geregelt und
    Eintragungen im Tag unwirksam.
    <br>

    Audio-Sequenzen werden über „Dateien hinzufügen“ eingebunden.
</p>
<h2 id="markdown-header-plattform-kopieren-duplizieren">Plattform kopieren (Duplizieren)</h2>
<p>Um die Plattform zu kopieren bzw. zu Duplizieren benötigt es aufgrund der großen Datenmenge in der Datenbank ein
    separates Tool, da dies mit gewöhnlichen MySQL Exports nicht mehr zu bewerkstelligen ist. Im Folgenden sind diese
    Schritte kurz dokumentiert:</p>
<ul>
    <li>
        Auf der Quellplattform das Plugin
        <a data-is-external-link="true" href="https://de.wordpress.org/plugins/duplicator/"
            rel="nofollow">„Duplicator“</a>
        installieren und ein neues Archiv erstellen. Hierbei in der Box „Archiv“ unter Tab „Dateien“ den Haken bei „Nur
        die Datenbank archivieren“ setzen und alle anderen Felder auf den Standardwerten belassen. Mit einem Klick auf
        „Weiter“ fortsetzen und Scan abwarten. Auf der Scan-Seite mit Klick in die Checkbox „Ja. Setze den Build-Prozess
        fort.“ akzeptieren und mit Klick auf „Erstellen“ das Archiv erzeugen. Dieser Schritt dauert nun etwas.
    </li>
    <li>
        Die soeben erzeugte
        <code>installer.php</code>
        sowie ZIP-Datei herunterladen und mittels FTP o.ö. auf das Zielsystem im geeigneten Root-Ordner platzieren
        (dieser muss per URL erreichbar sein).
    </li>
    <li>
        Nach erfolgtem Upload die
        <code>installer.php</code>
        im Browser aufrufen und dort ebenfalls die Checkbox akzeptieren und „Next“ klicken.
    </li>
    <li>In Schritt 2 die Datenbank-Zugangsdaten sowie einen bereits vorhandenen Datenbanknamen eingeben, ansonsten im
        Dropdown „Create new database“ auswählen und mit Klick auf „Test“ prüfen, dann mit Klick auf „Next“ Import der
        Datenbank ausführen.</li>
    <li>
        In Schritt 3 evtl. den Seiten-Titel anpassen, ansonsten mit Klick auf „Next“ bestätigen. Sobald die Ersetzung
        abgeschlossen ist, die Seite schließen,
        <strong>nicht einloggen</strong>
        !
    </li>
    <li>
        Nun im Hauptverzeichnis des Zielsystems alle Dateien und Ordner bis auf die
        <code>wp_config.php</code>
        -Datei löschen.
    </li>
    <li>
        Mittels FTP o.ä. alle Dateien und Ordner im Root-Verzeichnis der WP-Installation auf dem Quellsystem außer der
        <code>wp_config.php</code>
        -Datei in das Hauptverzeichnis auf dem Zielsystem kopieren.
    </li>
    <li>Die Kopie sollte nun unter der URL des Zielsystems erreichbar sein. </li>
</ul>
<h2 id="markdown-header-alternative-themes">Alternative Themes</h2>
<p>folgende Themes wurden mit dem Trainingssystem getestet:</p>
<ul>
    <li>
        <p>ColorMagVersion: 1.3.8, Von ThemeGrill</p>
    </li>
    <li>
        <p>HestiaVersion: 2.4.4, Von ThemeIsle</p>
    </li>
    <li>
        <p>IlldyVersion: 2.1.3, Von Colorlib</p>
    </li>
    <li>
        <p>ShapelyVersion: 1.2.5, Von colorlib</p>
    </li>
    <li>
        <p>SydneyVersion: 1.55, Von aThemes </p>
    </li>
</ul>
<h2 id="markdown-header-plugin-vorschlage">Plugin-Vorschläge</h2>
<p>Folgende zusätzliche Plugins werden bei der Nutzung des Trainingssystem-Plugins empfohlen: </p>
<ul>
    <li>
        <a data-is-external-link="true" href="https://www.advancedcustomfields.com/" rel="nofollow">Advanced Custom
            Fields</a>
        : Muss zwingend bei der Nutzung der
        <a data-is-external-link="true" href="#markdown-header-limesurvey-anbindung"
            rel="nofollow">LimeSurvey-Anbindung</a>
        installiert werden.
    </li>
</ul>
<h1 id="markdown-header-standardseiten">Standardseiten</h1>
<p>
    Es besteht die Möglichkeit, sogenannte Standardseiten im Frontend der Plattform zur Verfügung zu stellen. Hierbei
    handelt es sich um grundlegende Seiten, auf denen die Verwaltung, die Organisation und der generelle Betrieb der
    Plattform umgesetzt wird. Alle verfügbaren Standardseiten können unter
    „Trainingssystem-&gt;Einstellungen–&gt;Standardseiten anlegen“ über den Button „Alle hinzufügen“ für die Plattform
    automatisch angelegt werden. Soll nur eine bestimmte Menge an Seiten hinzugefügt oder eine Seite ergänzt werden,
    kann dies über den Button „Individuell hinzufügen“ durchgeführt. Bei einem Klick auf diesen Button öffnet sich eine
    Liste über alle verfügbaren Standardseiten, welche über die jeweiligen Checkboxen ausgewählt werden können. Wurde
    eine Auswahl bestimmt, muss hier nur noch auf den Button „Hinzufügen“ geklickt werden, damit die gewählten
    Standardseiten der Plattform hinzugefügt werden. Bei Bedarf kann über den Haken „vorhandene ersetzen“ kann eine
    veraltete Version einer Seite ersetzt werden.
    <br>

    Alternativ können die einzelnen Seiten auch manuell via Shortcodes angelegt werden. Im folgenden Abschnitt werden
    die Shortcodes für die verfügbaren Standardseiten tabellarisch aufgeführt sowie die Funktionen der einzelnen Seiten
    beschrieben.
</p>
<table>
    <thead>
        <tr>
            <th>Shortcode</th>
            <th>Funktion</th>
            <th>Parameter</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <code>[tspv2_user_profil]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-profil-seite" rel="nofollow">Profil-Seite</a>
            </td>
            <td>
                <code>titel</code>
                für individuelle Überschrift (optional, Default-Wert: „Mein Profil“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_abzeichen]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-abzeichenubersicht"
                    rel="nofollow">Abzeichenübersicht</a>
            </td>
            <td>
                <code>titel</code>
                für individuelle Überschrift (optional, Default-Wert: „Abzeichen“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_user_trainings]</code>
                (ehemals
                <code>[training_user_overview]</code>
                )
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-trainingsubersicht"
                    rel="nofollow">Trainingsübersicht</a>
            </td>
            <td>
                <code>titel</code>
                für individuelle Überschrift (optional, Default-Wert: „Meine Trainings“),
                <code>grouped</code>
                für eine Gruppierung nach Kategorien (optional, Default-Wert: „false“),
                <code>category</code>
                für das Anzeigen von Trainings der angegebenen Kategorie (optional, Default-Wert: „“),
                <code>category_text</code>
                zum Anzeigen eines Textes zwischen Überschrift der Kategorie und Trainings (optional, Default-Wert: „“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_coach_nutzer]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-trainingszuweisung"
                    rel="nofollow">Trainingszuweisung</a>
            </td>
            <td>
                <code>titel</code>
                für individuelle Überschrift (optional, Default-Wert: „Trainingszuweisung“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_user_list]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-nutzerliste" rel="nofollow">Nutzerliste</a>
            </td>
            <td>
                <code>titel</code>
                für individuelle Überschrift (optional, Default-Wert: „Nutzerliste“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_vorlagen-user-grouper]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-trainingsvorlagen"
                    rel="nofollow">Trainingsvorlagen</a>
            </td>
            <td>
                <code>titel</code>
                für individuelle Überschrift (optional, Default-Wert: „Trainingsvorlagen“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_user_grouper]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-firmenzuweisung"
                    rel="nofollow">Firmenzuweisung</a>
            </td>
            <td>
                <code>titel</code>
                für individuelle Überschrift (optional, Default-Wert: „Firmenzuweisung“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_csv_import]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-csv-import" rel="nofollow">CSV-Import</a>
            </td>
            <td>
                <code>titel</code>
                für individuelle Überschrift (optional, Default-Wert: „Teilnehmende importieren“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_create_user_manually]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-nutzer-anlegen" rel="nofollow">Nutzer anlegen</a>
            </td>
            <td>
                <code>titel</code>
                für individuelle Überschrift (optional, Default-Wert: „Teilnehmende manuell hinzufügen“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_addregiserkey]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-freischaltecode-anlegen"
                    rel="nofollow">Freischaltecode anlegen</a>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_showregiserkeylist]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-freischaltecode-ubersicht"
                    rel="nofollow">Freischaltecode-Übersicht</a>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_system_statistics]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-systemstatistiken"
                    rel="nofollow">Systemstatistiken</a>
            </td>
            <td>
                <code>titel</code>
                für individuelle Überschrift (optional, Default-Wert: „Systemstatistiken“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_mailbox]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-nachrichten" rel="nofollow">Nachrichten</a>
            </td>
            <td>
                <code>titel</code>
                für individuelle Überschrift (optional, Default-Wert: „Nachrichten“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_trainings_ex_import]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-trainings-ex-import" rel="nofollow">Trainings
                    Ex-/Import</a>
            </td>
            <td>
                <code>titel</code>
                für individuelle Überschrift (optional, Default-Wert: „Trainings Ex-/Import“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_company_details]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-unternehmen-details"
                    rel="nofollow">Unternehmen-Details</a>
                (Aufruf erfolgt separat für jede Firma über „Tortensymbol“-Button auf der Seite
                <a data-is-external-link="true" href="#markdown-header-firmenzuweisung"
                    rel="nofollow">„Firmenzuweisung“</a>
                )
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_user_list_detail]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-nutzer-detail-seite"
                    rel="nofollow">Nutzer-Detail-Seite</a>
                (Aufruf erfolgt über
                <a data-is-external-link="true" href="#markdown-header-nutzerliste" rel="nofollow">Nutzerliste</a>
                oder Seite
                <a data-is-external-link="true" href="#markdown-header-coaching-ubersicht"
                    rel="nofollow">Coaching-Übersicht</a>
                bzw.
                <a data-is-external-link="true" href="#markdown-header-supervisoren-ubersicht"
                    rel="nofollow">Supervisoren-Übersicht</a>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_user_results_export]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-nutzerdaten-exportieren"
                    rel="nofollow">Nutzerdaten exportieren</a>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_coaching_overview]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-coaching-ubersicht"
                    rel="nofollow">Coaching-/Supervisoren-Übersicht</a>
            </td>
            <td>
                <code>titel</code>
                für individuelle Überschrift (optional, Default-Wert: „Coaching-Übersicht“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_data_export]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-datenexport" rel="nofollow">Datenexport</a>
            </td>
            <td>
                <code>titel</code>
                für individuelle Überschrift (optional, Default-Wert: „Datenexport“)
            </td>
        </tr>
    </tbody>
</table>
<p>Des Weiteren ist es möglich, im Backend via „Trainingssystem-&gt;Einstellungen–&gt;Seitenzuteilung“ eigene Namen für
    die Menü-Einträge der einzelnen Standardseiten zu wählen. Dazu muss lediglich für die entsprechende Standardseite im
    Textfeld in der Spalte „Menübezeichnung“ eine neue Bezeichnung angegeben werden. Soll zusätzlich die Bezeichnung für
    die Seite im Tab des Browsers entsprechend angepasst werden, muss der Titel für diese im Backend unter
    „Seiten-&gt;Alle Seiten“ ebenfalls geändert werden. </p>
<h2 id="markdown-header-profil-seite">Profil-Seite</h2>
<p>
    Über den Shortcode
    <code>[tspv2_user_profil]</code>
    kann für Benutzer*innen eine Profil-Seite angelegt werden. Auf der Profil-Seite stehen folgende Funktionen zur
    Auswahl:
</p>
<ul>
    <li>E-Mail: Hier kann die mit dem Profil verknüpfte E-Mail-Adresse geändert werden. Außerdem ist es hier möglich,
        Einstellungen über E-Mail-Benachrichtigung vorzunehmen, sofern sich ungelesene Nachrichten im Postfach der
        Plattform befinden. </li>
    <li>Passwort ändern: Über dieses Formular können Benutzer*innen das Passwort für ihr Profil verändern. </li>
    <li>Name: In diesem Formular können Benutzer*innen optional ihren Vor- und Nachnamen angeben bzw. anpassen. </li>
    <li>Telefonnummer: In diesem Formular können Benutzer*innen optional ihre Telefonnummer angeben bzw. anpassen. </li>
    <li>Löschen: Hier können einerseits alle auf der Plattform getätigten Eingaben bzw. der gesamte Account
        unwiderruflich gelöscht werden. </li>
    <li>Trainings: In diesem Bereich können Benutzer*innen eine Übersicht ihrer Trainings sowie den aktuellen
        Fortschritt einsehen. </li>
    <li>
        Freischaltcode: In diesem Feld können Benutzer*innen manuell weitere Trainings mittels
        <a data-is-external-link="true" href="#markdown-header-freischaltcode" rel="nofollow">Freischaltcodes</a>
        freischalten.
    </li>
</ul>
<p>
    Der Shortcode
    <code>[tspv2_user_profil]</code>
    verfügt mit
    <code>titel</code>
    einen (optionalen) Parameter, mit welchem eine individuelle Überschrift für die Seite gewählt werden kann. Wird der
    Parameter nicht angegeben oder ist der Wert für diesen leer, wird der Default-Wert „Mein Profil“ genutzt.
</p>
<h2 id="markdown-header-abzeichenubersicht">Abzeichenübersicht</h2>
<p>
    Mit dem Shortcode
    <code>[tspv2_abzeichen]</code>
    kann eine Übersicht über alle freigeschalteten Abzeichen (Badges) den Benutzer*innen bereitgestellt werden. Über den
    Parameter
    <code>titel</code>
    kann anstelle des Standardwerts „Abzeichen“ eine eigene Überschrift für diese Seite gewählt werden.
    <br>

    Die Übersicht führt Abzeichen für alle Trainings des*der Benutzer*in auf, sofern für das Training ein Abzeichen
    angelegt wurde. Jedes Abzeichen in der Übersicht stellt zusätzlich den Fortschritt im entsprechenden Training dar:
    Das Abzeichen wird zunächst in Grautönen angezeigt, sofern noch nicht alle Lektionen eines Trainings abgeschlossen
    wurden. Unterhalb des Abzeichens sind zudem kleine Punkte vorzufinden. Diese stellen die einzelnen Lektionen des
    Trainings dar und färben sich, sobald die entsprechende Lektion durch den*die Benutzer*in beendet wurde. Wurden alle
    Lektionen eines Trainings erfolgreich abgeschlossen, erscheint das Abzeichen schließlich in Farbe.
</p>
<p>
    <img alt="abzeichen_ubersicht.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/1616936361-abzeichen_ubersicht.PNG">
</p>
<p>Um ein Abzeichen für ein Training einzustellen, muss dieses zunächst im Backend unter „Trainingssystem-&gt;Abzeichen“
    angelegt werden. Neben dem Titel muss über das Dropdown-Menü auch ein Training für das Abzeichen ausgewählt werden.
    Über den Reiter „Beitragsbild“ kann für das Abzeichen zudem optional ein Bild festgelegt werden. </p>
<p>
    <img alt="abzeichen_backend.PNG" src="https://bitbucket.org/repo/z8zjexy/images/488707207-abzeichen_backend.PNG">
</p>
<p>
    Des Weiteren besteht die Möglichkeit, den Benutzer*innen über den Shortcode
    <code>[tspv2_abzeichen_modal]</code>
    im Training das entsprechende Abzeichen zu verleihen (siehe dazu den Abschnitt
    <a data-is-external-link="true" href="#markdown-header-verleihung-von-abzeichen" rel="nofollow">„Verleihung von
        Abzeichen“</a>
    ).
</p>
<h2 id="markdown-header-trainingsubersicht">Trainingsübersicht</h2>
<p>
    Über den Shortcode
    <code>[tspv2_user_trainings]</code>
    (ehemals
    <code>[training_user_overview]</code>
    ) kann für Benutzer*innen eine Übersicht aller zugewiesenen Trainings auf einer Seite eingebunden werden. Zusätzlich
    stehen für diesen Shortcode noch weitere (optionale) Parameter zur Verfügung, mit denen die Trainingsübersicht
    angepasst werden kann:
</p>
<ul>
    <li>
        <code>titel</code>
        : Mit diesem Parameter kann eine individuelle Überschrift für die Trainingsübersicht gewählt werden. Wird dieser
        Parameter nicht angegeben oder ist der gewählte Titel leer, wird der Default-Wert „Meine Trainings“ als
        Überschrift gewählt.
    </li>
    <li>
        <code>grouped</code>
        : Dieser Parameter kann genutzt werden, wenn die Trainings für die Benutzer*innen nach Kategorien gruppiert
        dargestellt werden sollen. Wurde für ein Training keine Kategorie angegeben, wird dieses unter der Kategorie
        „Sonstige“ aufgeführt. Soll eine Gruppierung erfolgen, muss der Parameter auf den Wert „true“ bzw. „1“
        (Default-Wert: „false“) gesetzt werden.
    </li>
    <li>
        <code>category</code>
        : Mit diesem Parameter kann erzwungen werden, dass nur Trainings einer bestimmten Kategorie in der
        Trainingsübersicht angezeigt werden sollen.
    </li>
    <li>
        <code>category_text</code>
        : Dieser Parameter stellt eine Ergänzung zum Parameter category dar. Mit diesem kann ein Text angegeben werden,
        welcher zwischen der Überschrift der Kategorie und der Liste an Trainings angezeigt wird.
    </li>
</ul>
<p>
    Beispiel für die Gruppierung von Trainings mit dem Parameter
    <code>grouped</code>
    :
</p>
<p>
    <code>[tspv2_user_trainings grouped="true"]</code>
</p>
<p>
    <img alt="training_kategorien3.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/530757310-training_kategorien3.PNG">
</p>
<p>
    Beispiel für die Darstellung von Trainings einer bestimmten Kategorie mit den Parametern
    <code>category</code>
    und
    <code>category_text</code>
    :
</p>
<p>
    <code>[tspv2_user_trainings titel="Meine Fragebögen" category="Fragebögen" category_text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."]</code>
</p>
<p>
    <img alt="training_kategorien4.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/3067712-training_kategorien4.PNG">
</p>
<h3 id="markdown-header-kategorien">Kategorien</h3>
<p>Für Trainings können Kategorien angegeben werden, welche bspw. in der Trainingsübersicht zur Gruppierung von
    Trainings genutzt werden kann. Im Backend stehen dabei zwei Möglichkeiten zum Anlegen von Kategorien zur Verfügung:
</p>
<ol>
    <li>Auf der Seite zum Bearbeiten eines Trainings befindet sich ein Bereich mit dem Titel „Kategorien“. Hier kann für
        das Training eine zuvor erstellte Kategorie für das Training ausgewählt werden bzw. eine neue Kategorie angelegt
        werden. </li>
</ol>
<p>
    <img alt="training_kategorien.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/3063611794-training_kategorien.PNG">
</p>
<ol start="2">
    <li>
        Über den Reiter „Beiträge-&gt;Kategorien“ kann ebenfalls eine neue Kategorie erstellt werden, welche
        anschließend dem gewünschten Training zugeordnet werden muss. Außerdem ist es auf dieser Seite auch möglich,
        bereits bestehende Kategorien wieder zu löschen.
        <br>

        Im Backend wird in der Trainingsübersicht zudem für jedes Training die Kategorie aufgeführt, sofern diesem eine
        zugeordnet wurde:
    </li>
</ol>
<p>
    <img alt="training_kategorien2.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/3028027491-training_kategorien2.PNG">
</p>
<h2 id="markdown-header-trainingszuweisung">Trainingszuweisung</h2>
<p>
    Mittels des Shortcodes
    <code>[tspv2_coach_nutzer]</code>
    kann die Funktionalität zum Zuweisen von Trainings in einer Seite eingebunden werden. Um Benutzer*innen über diese
    Funktion Trainings zuzuweisen, sind zwei grundlegende Schritte notwendig:
</p>
<ol>
    <li>Zunächst muss im Bereich „1. Teilnehmende auswählen“ ein oder mehrere Benutzer*innen ausgewählt werden, welchen
        die Trainings zugewiesen werden sollen. Dazu kann über die Suchfunktion entweder nach dem Benutzernamen oder der
        Studienteilnehmer-ID der Benutzer*innen gesucht werden. Wurde der*die gewünschte Benutzer*in gefunden, muss
        diese*r über den Button „hinzufügen“ der Liste an Teilnehmenden hinzugefügt werden. Werden mehrere
        Benutzer*innen auf diese Weise ausgewählt, erhält der*die oberste Benutzer*in in der Liste die Markierung
        „Master“. Beim Speichern von Trainings werden allen Benutzer*innen die Trainings des*der Benutzer*in mit der
        Markierung „Master“ zugewiesen. </li>
    <li>
        Im Bereich „2. Trainings zusammenstellen“ kann die Auswahl der Trainings erfolgen. Über den Button „Training
        auswählen“ kann aus dem sich öffnenden Dialog-Fenster ein oder mehrere Trainings der angezeigten Liste an
        Trainings hinzugefügt werden. Via Drag&amp;Drop kann die Reihenfolge der Trainings in der Liste angepasst
        werden, wobei diese Reihenfolge auch in der
        <a data-is-external-link="true" href="#markdown-header-trainingsubersicht" rel="nofollow">Trainingsübersicht</a>
        übernommen wird.
        <br>

        Für jedes Training können für die ausgewählten Benutzer*innen noch einige Einstellungen vorgenommen werden:
        Zunächst kann über die drei Buttons „Individuell“, „Sequentiell“ und „Begleitet“ der Trainingsmodus für das
        Training ausgewählt werden. Über den Haken „E-Coaching aktivieren“ kann festgelegt werden, ob alle ausgewählten
        Benutzer*innen ein E-Coaching für das Training erhalten sollen. Über den Button „Unlock Coaching-Modus“ kann die
        „Sperre" aufgehoben werden, welche durch das
        <a data-is-external-link="true" href="#markdown-header-coachingmodus-formulare"
            rel="nofollow">Coachingmodus-Formular</a>
        bei einmaliger Speicherung gesetzt wurde, sodass Benutzer*innen erneut die Möglichkeit haben, den gewünschten
        Coaching-Modus auszuwählen.
        <br>

        Über das Dropdown-Menü „X Lektionen“ kann eingestellt werden, ob die Benutzer*innen für das gewählte Training
        alle Lektionen oder nur eine Auswahl sehen dürfen. Mit Klick auf den „-“-Button können den Benutzer*innen der
        Zugriff auf das Training entzogen werden.
    </li>
</ol>
<p>
    <img alt="trainingszuweisung.PNG" src="https://bitbucket.org/repo/z8zjexy/images/3791775688-trainingszuweisung.PNG">
</p>
<p>
    Standardmäßig wird als Titel für diese Seite „Trainingszuweisung“ genutzt. Mit dem Parameter
    <code>titel</code>
    kann ein alternativer Titel vergeben werden.
</p>
<h2 id="markdown-header-nutzerliste">Nutzerliste</h2>
<p>
    Mithilfe des Shortcodes
    <code>[tspv2_user_list]</code>
    kann einer Liste über alle Benutzer*innen auf einer Seite eingefügt werden. Für jede*n Benutzer*in werden dabei die
    Studienteilnehmner-ID (sofern vorhanden), der User-Name, die Firma (sofern zugeordnet), die mit dem Account
    vernüpfte E-Mail-Adresse, eine Liste an zugewiesenen Trainings, der letzte Login auf der Plattform sowie der Status
    des E-Coachings (grün: keine Probleme, rot: Benutzer*in wartet
    auf Feedback) aufgeführt.
</p>
<p>
    <img alt="nutzerliste_2.PNG" src="https://bitbucket.org/repo/z8zjexy/images/4104783178-nutzerliste_2.PNG">
</p>
<p>Zusätzlich ist es auch möglich, die Anzahl der Einträge an Benutzer*innen anzupassen. Über das Dropdown-Element in
    der rechten oberen Ecke kann die Anzahl an Elementen pro Seite festgelegt werden. Es sind hierbei die Werte 100
    (Default-Wert), 250, 500, 1000 sowie „Alle“ auswählbar. Des Weiteren kann über die Such-Funktion auch nach einem
    Suchbegriff gesucht werden, welcher innerhalb der Einträge für die Spalten „Studien-TN-ID“, „User-Name“, „Firma“,
    „E-Mail-Adresse“ und „Zugewiesene Trainings“ gesucht wird. Die beiden Möglichkeiten zur Anpassungen der Anzahl an
    Einträgen können kombiniert werden. </p>
<p>
    Über den optionalen Parameter
    <code>titel</code>
    kann die Überschrift „Nutzerliste“ (Default-Wert) durch einen selbst gewählten Titel ausgetauscht werden.
</p>
<h2 id="markdown-header-trainingsvorlagen">Trainingsvorlagen</h2>
<p>
    Mittels des Shortcodes
    <code>[tspv2_vorlagen-user-grouper]</code>
    kann eine Übersicht zum Erstellen und Bearbeiten von sogenannten Vorlagen-Nutzern eingebunden werden. Bei
    Vorlagen-Nutzern handelt es sich nicht um richtige Benutzer*innen, sondern eher um Profile, denen eine
    Zusammenstellung an verschiedenen Trainings zugewiesen kann. Über Freischaltcodes ist solch eine Trainings-Vorlage
    dann möglichen neuen Benutzer*innen bereitzustellen. Die Seite zur Übersicht aller Trainingsvorlagen gliedert sich
    in zwei Abschnitte:
</p>
<p>
    Im linken Bereich mit dem Titel „1. Vorlage auswählen“ ist eine Übersicht über alle bereits erstellten
    Vorlagen-Nutzern aufgeführt. Neben dem Namen der Vorlage wird hier zudem der Name eines Coaches angezeigt, sofern
    dieser der Vorlage zugeordnet wurde. Außerdem besteht hier die Möglichkeit, bestehende Vorlagen-Nutzer zu bearbeiten
    („Stift“-Symbol) oder zu entfernen („Papierkorb“-Symbol). Über den Button „Vorlage hinzufügen“ unterhalb der Liste
    kann ein neuer Vorlagen-Nutzer angelegt werden. Im sich öffnenden Dialog-Fenster kann neben dem Namen der Vorlage
    auch optional ein Coach angegeben werden.
    <br>

    Auf der rechten Seite („2. Trainings zusammenstellen“) kann dem Vorlagen-Nutzer schließlich auf die gleiche Weise
    wie zuvor bei der
    <a data-is-external-link="true" href="#markdown-header-trainingszuweisung" rel="nofollow">Trainingszuweisung</a>
    beschrieben eine Auswahl an Trainings zugeordnet werden.
</p>
<p>
    <img alt="trainingsvorlagen.PNG" src="https://bitbucket.org/repo/z8zjexy/images/1493385009-trainingsvorlagen.PNG">
</p>
<p>
    Mit dem Attribut
    <code>titel</code>
    kann für diese Seite anstelle vom Default-Wert „Trainingsvorlagen“ eine eigene Überschrift angegeben werden.
</p>
<p>
    Hinweis: Änderungen an Vorlagen-Nutzern wirken sich nicht rückwirkend, sondern nur auf zukünftige Accounts aus.
    Sollen Änderungen für einen Account vollzogen werden, muss dies über die Nutzer-Detail-Seite oder bei der Auswahl
    der Trainings über die
    <a data-is-external-link="true" href="#markdown-header-trainingszuweisung" rel="nofollow">Trainingszuweisung</a>
    durchgeführt werden.
</p>
<h2 id="markdown-header-firmenzuweisung">Firmenzuweisung</h2>
<p>
    Im Trainingssystem können Benutzer*innen auch Firmen bzw. Gruppen und Abteilungen bzw. Untergruppen zugeordnet
    werden. Eine Übersicht über angelegte Firmen kann mittels des Shortcodes
    <code>[tspv2_user_grouper]</code>
    in eine Seite integriert werden. Die Übersicht zur Zuweisung von Firmen unterteilt sich in zwei Bereiche:
    <br>

    Im linken Abschnitt mit dem Titel „1. Unternehmen auswählen“ ist eine Übersicht über alle angelegten Firmen
    vorzufinden. Für jede angelegte Firma sind hier der Name der Firma und die Führungskraft sowie ein
    Krankenkassenadmin aufgeführt, sofern diese angegeben wurden. Des Weiteren befinden sich rechts für jede Firma noch
    drei Buttons:
    <br>

    Über den „Tortendiagramm“-Button können für die Firma weitere Informationen wie bspw. Statistiken eingesehen werden.
    Mittels des „Stift“-Buttons kann der Name der Firma sowie die Führungskraft und der Krankenkassenadmin angepasst
    werden und mit dem „Papierkorb“-Button kann die entsprechende Firma gelöscht werden. Mithilfe des Buttons
    "Unternehmen hinzufügen" unterhalb der Liste kann eine neue Firma angelegt werden. Neben dem Namen und der
    Führungskraft kann hier optional auch ein Krankenkassenadmin angegeben werden.
    <br>

    Hat man eine neue Firma erstellt bzw. eine bestehende Firma auf der linken Seite ausgewählt, erscheint auf der
    rechten Seite der Bereich zum Zusammenstellen von (Unter-)Gruppen mit dem Titel „2. Gruppen zusammenstellen“. Hier
    werden einerseits für die ausgewählte Firma bereits angelegte Gruppen aufgelistet, deren Mitglieder man über das
    jeweilige Dropdown-Menü einsehen kann, andererseits ist hier auch der Button „Gruppe hinzufügen“ vorzufinden, mit
    dem eine neue Gruppe für die Firma angelegt werden kann. Im sich öffnenden Dialog-Fenster kann hier neben dem Namen
    der Gruppe auch eine Auswahl an Mitglieder ausgewählt werden.
    <br>

    Des Weiteren ist es hier auch möglich, für jede Gruppe optional eine Teamleitung festzulegen. Bei Teamleitungen
    handelt es sich um Führungskräfte auf Gruppenebene. Damit ein*e Benutzer*in für eine Grupppe als Teamleitung
    ausgewählt werden kann, muss diese*r einerseits die Rolle „Teamleitung“ haben und sich als Mitglied in der
    entsprechenden Gruppe befinden.
</p>
<p>
    <img alt="firmenzuweisung_teamleitung.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/1247611453-firmenzuweisung_teamleitung.PNG">
</p>
<p>
    Mit dem optionalen Parameter
    <code>titel</code>
    kann anstelle des Default-Werts „Firmenzuweisung“ eine individuelle Überschrift gewählt werden.
</p>
<h2 id="markdown-header-csv-import">CSV-Import</h2>
<p>
    Anstelle des manuellen Anlegens von einzelnen Benutzer*innen über die Seite
    <a data-is-external-link="true" href="#markdown-header-nutzer-anlegen" rel="nofollow">„Benutzer anlegen“</a>
    kann auch eine größere Gruppe an Benutzer*innen über einen CSV-Import angelegt werden. Eine Seite für den CSV-Import
    kann über den Shortcode
    <code>[tspv2_csv_import]</code>
    erzeugt werden.
    <br>

    Innerhalb des Bereichs „Datei hochladen“ kann über den Button „Datei auswählen“ eine CSV-Datei für den Import
    hochgeladen werden. Die Datei muss dabei in folgende Form gebracht werden:
</p>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>E-Mail-Adresse</th>
            <th>Firma</th>
            <th>Gruppe (z.B. Abteilung)</th>
            <th>Studien-ID</th>
            <th>Freischaltcode</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Vorname Nachname</td>
            <td>vorname.nachname@test123.de</td>
            <td>Testfirma</td>
            <td>Testabteilung</td>
            <td>123</td>
            <td>0000</td>
        </tr>
    </tbody>
</table>
<p>Auf der Seite für den CSV-Import steht außerdem ein Beispiel für eine CSV-Datei zur Verfügung, welche bereits die
    erforderliche Form aufweist, sodass diese lediglich mit den realen Daten gefüllt werden muss. </p>
<p>
    Mit dem Parameter
    <code>titel</code>
    kann zudem eine individuelle Überschrift für die Seite bestimmt werden. Standardmäßig wird „Teilnehmende
    importieren“ als Titel für diese Seite gewählt.
</p>
<p>Hinweis: Innerhalb der CSV-Datei muss immer ein Name sowie eine E-Mail-Adresse für eine*n Benutzer*in angegeben
    werden. Alle weiteren Werte können leer gelassen werden. Wird ein Freischaltcode für eine*n Benutzer*in genutzt,
    muss darauf geachtet werden, dass noch eine ausreichende Anzahl an verbleibenden Einlösungen für diesen zur
    Verfügung stehen. Des Weiteren muss bei der CSV-Datei darauf geachtet werden, dass diese eine Header-Zeile enthält.
</p>
<h2 id="markdown-header-nutzer-anlegen">Nutzer anlegen</h2>
<p>
    Einzelne Benutzer*innen können manuell über die Seite „Benutzer anlegen“, welche mit dem Shortcode
    <code>[tspv2_create_user_manually]</code>
    erstellt wird, im Frontend angelegt werden. Beim Anlegen eines*r neuen Benutzer*in müssen stets die mit einem „*“
    markierten Pflichtfelder „Benutzername“ und „E-Mail“ ausgefüllt werden. Zusätzlich kann über die Checkbox
    „E-Mail-Benachrichtung senden“ festgelegt werden, ob der*die Benutzer*in eine E-Mail mit Erstellung des Accounts
    erhalten soll, sodass diese*r das Passwort für den Account ändern können.
    <br>

    Des Weiteren können den neuen Benutzer*innen eine optionale Studienteilnehmer-ID, ein Coach oder eine
    <a data-is-external-link="true" href="#markdown-header-trainingsvorlagen" rel="nofollow">Trainingsvorlage</a>
    zugeordnet werden oder bestimmte Berechtigungen gegeben werden.
</p>
<p>
    Mit Angabe eines Werts für den Parameter
    <code>titel</code>
    kann eine individuelle Überschrift für die Seite anstelle des Default-Wert „Teilnehmende manuell hinzufügen“ gewählt
    werden.
</p>
<h2 id="markdown-header-freischaltecode">Freischaltecode</h2>
<p>Es besteht die Möglichkeit, dass Benutzer*innen sich Trainings über Codes selbst freischalten können. Eine
    Zusammenstellung aus verschiedenen Trainings (oder anderen Inhalten) wird dabei in sogenannten Vorlagen gespeichert.
    Benutzer*innen können dann mit einem Code gemäß dieser Vorlage hinzugefügt werden. </p>
<h3 id="markdown-header-freischaltecode-anlegen">Freischaltecode anlegen</h3>
<p>
    Die Funktion zum Hinzufügen von Freischaltecodes kann über den Shortcode
    <code>[tspv2_addregiserkey]</code>
    in eine Seite eingebunden werden. Um einen neuen Freschaltecode anzulegen, sind folgende Schritte erforderlich:
</p>
<ol>
    <li>
        Ein*e Benutzer*in mit der Rolle „Administrator“, „Verwalter“ oder „Krankenkassenadmin“ legt (optional) im
        Frontend unter „Verwaltung-&gt;Trainingsvorlagen“ eine neue
        <a data-is-external-link="true" href="#markdown-header-trainingsvorlagen" rel="nofollow">Trainingsvorlage</a>
        an.
    </li>
    <li>Dem eben angelegten Vorlagennutzer wird auf der gleichen Seite eine Auswahl an Trainings zugewiesen. </li>
    <li>
        Nun muss der Freischaltecode angelegt werden. Dazu wechselt man im Frontend auf die Seite „Freischaltecode“ im
        Verwaltungsmenü oder auf eine Seite, in der der Shortcode
        <code>[tspv2_addregiserkey]</code>
        zuvor eingebunden wurde.
    </li>
    <li>Im Feld „Freischaltecode eingeben“ kann nun ein numerischer Wert gewählt werden, welcher von den Benutzer*innen
        später zum Einlösen des Freischaltecodes eingegeben werden muss. </li>
    <li>In den (optionalen) Feldern „Vorlage auswählen“ und „2. Vorlage auswählen“ können zuvor angelegte
        Trainingsvorlagen angegeben werden. </li>
    <li>Im Feld „maximale Anzahl der Anmeldungen“ kann die Anzahl an möglichen Einlösungen für den Freischaltcode
        festgelegt werden. </li>
    <li>Über die Felder „Firma auswählen“ und „Firmengruppen auswählen“ können optional für den Freischaltecode noch
        Firmen sowie Gruppen dieser ausgewählt werden. Diese Option ist zu empfehlen, wenn die Benutzer*innen bei der
        Registrierung über einen Freischaltecode direkt einer Firma zugeordnet werden sollen. Wird nur die Firma
        angegeben, können die Benutzer*innen bei der Registrierung eine der Gruppen der angegebenen Firma auswählen.
        Wurden sowohl eine Firma als auch eine Gruppe beim Anlegen des Freischaltecodes ausgewählt, werden die
        Benutzer*innen nach der Registrierung direkt dieser Gruppe zugeordnet. </li>
    <li>Abschließend muss nun noch auf den Button „Anlegen“ geklickt werden. </li>
</ol>
<h3 id="markdown-header-freischaltecode-ubersicht">Freischaltecode-Übersicht</h3>
<p>
    Eine Übersicht über alle angelegten Freischaltecodes kann über den Shortcode
    <code>[tspv2_showregiserkeylist]</code>
    in eine Seite eingefügt werden. Hier wird für jeden Freischaltecode neben den zugeordneten Trainingsvorlagen und
    Firmen auch die Anzahl an bisherigensowie maximalen Einlösungen aufgeführt. Für jeden Freischaltecode wurde
    zusätzlich unter der Spalte „QR-Code“ ein eigener QR-Code generiert, welcher den Benutzer*innen zugesendet werden
    kann. Alternativ kann der Freischaltecode auch als Link versandt werden, welcher ebenfalls über das „QR-Code“-Symbol
    für den entsprechenden Freischaltecode abgerufen werden kann.
</p>
<p>Die Benutzer*innen haben nun folgende Möglichkeiten, einen Freischaltecode zu aktivieren: </p>
<ul>
    <li>Ist noch kein Account auf der Plattform vorhanden, kann der Code direkt bei der Anmeldung eingeben werden. </li>
    <li>Ist der*die Benutzer*in auf der Plattform bereits registriert, kann der Freischaltecode auf der Profilseite
        unter dem Punkt „Freischaltecode“ eingegeben und eingelöst werden. </li>
</ul>
<p>In beiden Fällen werden den Benutzer*innen alle in der Trainingsvorlage zusammengestellten Inhalte übertragen. Das
    bedeutet, dass alle Trainings und Lektionen, die für die Vorlage hinterlegt sind, den Benutzer*innen zugewiesen
    werden. </p>
<h2 id="markdown-header-systemstatistiken">Systemstatistiken</h2>
<p>
    Über dem Menüpunkt „Verwaltung“ können mittels des Unterpunkts „Systemstatistiken“ verschiedene Statistiken über die
    Benutzer*innen des Trainingssystems angezeigt werden. Alternativ kann eine Übersicht aller Statistiken auch mittels
    des Shortcodes
    <code>[tspv2_system_statistics]</code>
    in eine Seite eingebunden werden. Über den Parameter
    <code>titel</code>
    kann eine individuelle Überschrift anstelle des Default-Werts „Systemstatistiken“ ausgewählt werden.
</p>
<h3 id="markdown-header-hovern-mit-der-maus-uber-datenpunkte">Hovern mit der Maus über Datenpunkte</h3>
<p>Wird die Maus über einen Datenpunkt eines Diagramms bewegt, wird für das Element ein kleines Fenster eingeblendet,
    welches für den aktuellen Datenpunkt das Label (beispielsweise ein Datum für die Liniendiagramme) sowie den
    dazugehörigen Wert anzeigt. </p>
<h3 id="markdown-header-auswahl-eines-darstellungszeitraums">Auswahl eines Darstellungszeitraums</h3>
<p>
    Für die einzelnen Diagramme können bestimmte Zeiträume ausgewählt werden. Dazu können über die beiden Eingabefelder
    (links: untere Grenze, rechts: obere Grenze), welche sich oberhalb der Diagramme befinden, Daten im Format
    „TT.MM.JJJJ“ manuell eingegeben oder über den Kalender, welcher durch einen Mausklick auf das Eingabefeld
    eingeblendet wird, ausgewählt werden. Wurde ein Zeitraum für die Statistik schließlich gewählt, müssen die Eingaben
    über den Button „Ausführen“ abgeschickt werden, sodass der Zeitraum auf alle auf dieser Seite angezeigten
    Statistiken des Trainingssystems angewandt werden kann.
    <br>

    Generell müssen nicht beide Grenze für den Zeitraum angegeben werden. Es kann hierbei auch nur eine untere bzw.
    obere Grenze gewählt werden, um die Statistiken für einen Zeitraum darzustellen, welcher zeitlich nach bzw. vor der
    angegebenen Grenze liegt. Sind beide Eingabefelder leer, d.h. sie zeigen beide kein Datum, sondern den Platzhalter
    „TT.MM.JJJJ“ an und es wird der Button „Ausführen“ gedrückt, werden alle dargestellten Statistiken zurück in die
    Ausgangssituation versetzt.
</p>
<h3 id="markdown-header-zurucksetzen-der-daten">Zurücksetzen der Daten</h3>
<p>Die Daten, welche die Grundlage für die Systemstatistiken bilden, können über den Button „Daten zurücksetzen“
    zurückgesetzt werden. </p>
<p>Hinweis: Sobald das nach Drücken des Buttons „Daten zurücksetzen“ erscheinende „Confirm“-Fenster bestätigt wurde,
    werden die Daten für die Systemstatistiken unwiederbringlich gelöscht. Die Daten von folgenden Diagrammen können aus
    organisatorischen Gründen nicht zurückgesetzt werden: </p>
<ul>
    <li>Anzahl hinzugefügte Benutzer </li>
    <li>Zeitpunkt des letzten Logins </li>
    <li>Anzahl Benutzereingaben </li>
    <li>Anzahl abgeschlossene Lektionen </li>
    <li>Anzahl abgeschlossene Trainings </li>
</ul>
<h3 id="markdown-header-zoomen-und-panning-innerhalb-der-diagramme">Zoomen und Panning innerhalb der Diagramme</h3>
<p>
    Innerhalb der Diagramme kann mithilfe des Mausrads die Zoom-Funktion genutzt werden, um den dargestellten Ausschnitt
    des Diagramms zu vergrößern (Scrolling des Mausrads nach oben) oder zu verkleinern (Scrolling des Mausrads nach
    unten).
    <br>

    Des Weiteren kann auch Panning (deutsch: Verschieben, Schwenken) genutzt werden, um den aktuell dargestellten
    Ausschnitt des Diagramms zu verschieben. Dazu muss mit der Maus in das Diagramm geklickt werden, die Maustaste dabei
    gehalten werden und abschließend die Maus bewegt werden, um den Ausschnitt des Diagramms in die gewünschte Richtung
    zu verschieben.
    <br>

    Nachfolgend folgt eine Auflistung über alle Diagramme sowie die möglichen Richtungen für das Zoomen und des
    Pannings:
</p>
<table>
    <thead>
        <tr>
            <th align="left">Diagramm</th>
            <th align="center">Zooming</th>
            <th align="center">Panning</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td align="left">Anzahl hinzugefügte Benutzer</td>
            <td align="center">xy-Richtung</td>
            <td align="center">xy-Richtung</td>
        </tr>
        <tr>
            <td align="left">Zeitpunkt des letzten Logins</td>
            <td align="center">xy-Richtung</td>
            <td align="center">xy-Richtung</td>
        </tr>
        <tr>
            <td align="left">Anzahl Benutzereingaben</td>
            <td align="center">xy-Richtung</td>
            <td align="center">xy-Richtung</td>
        </tr>
        <tr>
            <td align="left">Anzahl abgeschlossene Lektionen</td>
            <td align="center">xy-Richtung</td>
            <td align="center">xy-Richtung</td>
        </tr>
        <tr>
            <td align="left">Benutzeraktivität (gemessen in Seitenaufrufe/Uhrzeit)</td>
            <td align="center">y-Richtung</td>
            <td align="center">y-Richtung</td>
        </tr>
        <tr>
            <td align="left">Benutzeraktivität (gemessen in Seitenaufrufe/Wochentag)</td>
            <td align="center">y-Richtung</td>
            <td align="center">y-Richtung</td>
        </tr>
        <tr>
            <td align="left">Benutzeraktivität (gemessen in Seitenaufrufe/Seite)</td>
            <td align="center">y-Richtung</td>
            <td align="center">y-Richtung</td>
        </tr>
        <tr>
            <td align="left">Benutzeraktivität (gemessen in Sekunden/Seite)</td>
            <td align="center">y-Richtung</td>
            <td align="center">y-Richtung</td>
        </tr>
        <tr>
            <td align="left">Browserverteilung (gemessen in Seitenaufrufen)</td>
            <td align="center">nicht unterstützt</td>
            <td align="center">nicht unterstützt</td>
        </tr>
        <tr>
            <td align="left">Verteilung der Gerätetypen (gemessen in Seitenaufrufen)</td>
            <td align="center">nicht unterstützt</td>
            <td align="center">nicht unterstützt</td>
        </tr>
        <tr>
            <td align="left">Anzahl abgeschlossene Trainings</td>
            <td align="center">x-Richtung</td>
            <td align="center">x-Richtung</td>
        </tr>
    </tbody>
</table>
<h3 id="markdown-header-speichern-der-statistiken-als-excel-und-pdf-datei">Speichern der Statistiken als Excel- und
    PDF-Datei</h3>
<p>
    Die Daten der einzelnen Statistiken lassen sich über den Button mit dem Excel-Symbol als CSV-Datei für Excel
    herunterladen. Es werden hierbei die Daten in der Datei gespeichert, welche aktuell im Diagramm dargestellt werden,
    d.h. ein zuvor eingestellter Zeitraum oder ein gewählter Wertebereich wird auch auf die Daten angewandt, welche
    letztlich in der erstellten CSV-Datei erscheinen.
    <br>

    Zusätzlich können die Daten der einzelnen Statistiken über den Button mit dem PDF-Symbol als PDF-Datei
    herunterladen. Die erzeugte PDF-Datei beinhaltet zum einen auf der ersten Seite das Diagramm, zum anderen ab Seite 2
    die Daten der Statistik. Auch für die PDF-Funktion werden in der PDF-Datei die Daten gespeichert, welche momentan im
    Diagramm dargestellt werden, sodass zuvor festgelegte Zeiträume oder Wertebereiche auf die Daten angewandt werden.
    Das in der PDF abgebildete Diagramm entspricht außerdem der aktuellen Darstellung auf der Seite „Systemstatistiken“,
    d.h. Zooms oder das Verschieben von Bildausschnitten wird für das Diagramm in der PDF-Datei übernommen.
</p>
<h3 id="markdown-header-login-aktivitat-des-aktuellen-tages">Login-Aktivität des aktuellen Tages</h3>
<p>
    Im Abschnitt „Heutige Login-Aktivität“ oberhalb der Diagramme ist eine Übersicht über alle erfolgreichen sowie
    fehlgeschlagenen Login-Versuche in das Trainingssystem für das aktuelle Datum vorzufinden, welche über den Button
    „Login-Aktivität anzeigen“ angezeigt werden kann. Hierbei wird in zeitlich absteigender Reihenfolge für jeden
    Login-Versuch angegeben, welche Benutzer*innen (Benutzername, ID) zu welchem Zeitpunkt versucht haben, sich in das
    Trainingssystem einzuloggen und ob der Versuch erfolgreich war.
    <br>

    Für gescheiterte Logins wird zusätzlich auch angegeben, warum der Login für den*die Benutzer*in nicht möglich war.
    Die möglichen Gründe sind hierbei:
</p>
<ul>
    <li>Der*Die Benutzer*in hat eine/n richtige/n bzw. existierende/n E-Mail-Adresse bzw. Benutzernamen, aber das
        falsche Passwort bei der Anmeldung angegeben. In diesem Fall wird der Benutzername zusammen mit der ID innerhalb
        der Nachricht im Fenster für die Login-Aktivität angezeigt. </li>
    <li>Der*Die Benutzer*in hat keine/n richtige/n bzw. existierende/n E-Mail-Adresse bzw. Benutzernamen angegeben. In
        diesem Fall wird der bei der Anmeldung genutzte Benutzername ohne eine ID innerhalb der Nachricht im Fenster für
        die Login-Aktivität angezeigt, da für diesen Fall intern der Wert 0 als ID für den nicht existierenden
        Benutzernamen genutzt wird. </li>
</ul>
<p>Über den Button „Login-Aktivität ausblenden“ kann die dargestellte Login-Aktivität für das aktuelle Datum wieder
    ausgeblendet werden. </p>
<h3 id="markdown-header-liniendiagramme-besonderheiten">Liniendiagramme - Besonderheiten</h3>
<p>
    Die Daten für die Liniendiagramme liegen für jede Statistik in dreifacher Ausführung vor, d.h. es können Werte pro
    Stunden (rote Datenpunkte), pro Tag (grüne Datenpunkte) bzw. pro Monat (blaue Datenpunkte) angezeigt werden. Über
    die drei Buttons „Stunden“, „Tag“ und „Monat“ unterhalb der jeweiligen Liniendiagramme kann hierbei der aktuell
    dargestellte Datensatz für das Diagramm gewechselt werden. Zuvor gewählte Zeiträume werden für die Liniendiagramme
    übernommen.
    <br>

    Außerdem können mithilfe des Buttons „Reset Zoom“ alle zuvor ausgeführten Zoomings und Pannings zurückgesetzt
    werden, sodass sich das Diagramm wieder in der Ausgangssituation befindet.
</p>
<h3 id="markdown-header-saulendiagramme-besonderheiten">Säulendiagramme - Besonderheiten</h3>
<p>
    Für die beiden Säulendiagramme „Benutzeraktivität (gemessen in Seitenaufrufe/Seite)“ sowie „Benutzeraktivität
    (gemessen in Sekunden/Seite)“ können zusätzlich durch den*die Benutzer*in Wertebereiche definiert werden, um die
    beiden Diagramme übersichtlicher bzw. lesbarer zu gestalten, da hier jeweils Werte für alle Seiten des
    Trainingssystem angezeigt werden.
    <br>

    Für den Wertebereich können hierbei, wie zuvor für die Eingrenzung der Zeiträume bereits beschrieben, eine untere
    (linkes Eingabefeld) und eine obere Grenze (rechtes Eingabefeld) ausgewählt werden, wobei auch hier wieder nicht
    zwingend beide Grenzen zum Beschränken des Wertebereichs angegeben werden müssen. Wurde für ein Säulendiagramm ein
    bestimmter Wertebereich gewählt und der Button „Ausführen“ wurde anschließend gedrückt, wird der ausgewählte
    Wertebereich auf den Datensatz angewandt und das Diagramm wird für die Statistik neu gezeichnet. Werden keine
    Grenzen angegeben, d.h. die Eingabefelder sind leer, wird das entsprechende Diagramm wieder in die Ausgangssituation
    zurückversetzt. Außerdem werden zuvor eingegebene Werte für die Eingabefelder zur Eingrenzung des Zeitraums
    ebenfalls mit einbezogen, sollte für einen gewählten Wertebereich der Button „Ausführen“ gedrückt werden.
</p>
<h3 id="markdown-header-kreisdiagramme-oder-auch-kuchen-bzw-tortendiagramme-besonderheiten">Kreisdiagramme (oder auch
    Kuchen- bzw. Tortendiagramme) - Besonderheiten</h3>
<p>
    Wird die Maus über einen Teilwert des Kreisdiagramms bewegt, werden einerseits die für den Browser bzw. für das
    entsprechende Gerät gemessenen Seitenaufrufe angezeigt, andererseits wird hier auch der relative Anteil dieses
    Teilwerts in Prozent (auf zwei Nachkommastellen gerundet) angegeben.
    <br>

    Zusätzlich können für die Kreisdiagramme auch einzelne Teilwerte ausgeblendet werden, indem das entsprechende Label
    oberhalb des Diagramms mit einem Mausklick ausgewählt wird. Durch einen erneuten Mausklick können die ausgeblendeten
    Teilwerte wieder im Kreisdiagramm eingeblendet werden.
</p>
<h2 id="markdown-header-nachrichten">Nachrichten</h2>
<p>
    Das Trainingssystem verfügt eine über den Shortcode
    <code>tspv2_mailbox</code>
    einsetzbare Nachrichtenfunktion, über welche ein Austausch an Mitteilungen zwischen Teilnehmenden und ihren Coaches
    möglich ist. Auf der „Nachrichten“-Seite befinden sich eine Inbox („Eingang“) und eine Outbox („Gesendet“), über die
    alle Nachrichten abgerufen werden können, welche über das System empfangen bzw. gesendet wurden. Zusätzlich ist für
    Benutzer*innen mit der Rolle „Administrator“, „Psychologischer Coach“ oder „Supervisor“ der Nachrichtenverlauf
    einsehbar.
    <br>

    Über den Button „Neue Nachricht“ kann ein Fenster geöffnet, in welchem eine neue Mitteilung verfasst werden kann.
    Über das Dropdown-Menü in diesem Fenster kann der*die Empfänger*in für diese Nachricht gewählt werden. Normale
    Teilnehmende können als Empfänger*in lediglich ihren Coach sehen, Benutzer*innen mit der Rolle „Psychologischer
    Coach“ können alle zugeordneten Teilnehmenden auswählen.
    <br>

    Über den Parameter
    <code>titel</code>
    kann für diese Seite eine individuelle Überschrift anstelle des Default-Werts „Nachrichten“ gewählt werden.
</p>
<p>Hinweis: Für normale Teilnehmende ohne zugeordneten Coach wird die Nachrichten-Funktion im Menü ausgeblendet.</p>
<h2 id="markdown-header-trainings-ex-import">Trainings Ex-/Import</h2>
<p>
    Ein Ex- bzw. Import von Trainingsinhalten kann über den Shortcode
    <code>tspv2_trainings_ex_import</code>
    in eine Seite eingebunden werden. Über den optionalen Parameter
    <code>titel</code>
    kann eine eigene Überschrift für diese Standardseite bestimmt werden (Default-Wert: „Trainings Ex-/Import“). Im
    Folgenden werden die einzelnen Funktionen dieser Standardseite kurz beschrieben.
</p>
<h3 id="markdown-header-export-von-medieninhalten">Export von Medieninhalten</h3>
<p>In der Tabelle ist über das „Ordner“-Symbol der Download aller Medien-Dateien für ein Training möglich. Abhängig von
    der Art und Anzahl an Medien im ausgewählten Training kann dieser Vorgang dabei eine gewisse Zeit in Anspruch
    nehmen. Die exportierten Dateien werden hier in Form einer ZIP-Datei heruntergeladen. </p>
<h3 id="markdown-header-export-von-trainings">Export von Trainings</h3>
<p>
    Über das „Download“-Symbol kann in der Tabelle ein Training exportiert werden. Der Download des Trainings erfolgt
    hierbei in Form einer JSON-Datei, welche für den
    <a data-is-external-link="true" href="#markdown-header-import-von-trainings" rel="nofollow">Import eines
        Trainings</a>
    , zum Beispiel auf einer weiteren Plattform, genutzt werden kann.
</p>
<h3 id="markdown-header-import-von-medieninhalten">Import von Medieninhalten</h3>
<p>
    Zunächst muss für den Import eine ZIP-Datei mit Medien-Dateien via FTP auf dem Server hochgeladen und im Ordner
    <code>wp-uploads/trainings-ex-import</code>
    abgelegt werden. Anschließend muss die hochgeladene ZIP-Datei im Dropdown-Menü ausgewählt und der Import kann mit
    Klick auf den Button „Bestätigen“ gestartet werden.
</p>
<p>
    Hinweis: Sollte eine Medien-Datei auf dem Server bereits vorhanden sein, so wird diese beim Import
    <strong>nicht</strong>
    mit der neuen Datei überschrieben, sondern bleibt unverändert!
</p>
<h3 id="markdown-header-import-von-trainings">Import von Trainings</h3>
<p>
    Über den Button „Import Training“ kann ein Dialog-Fenster geöffnet werden, in dem eine, wie im Abschnitt
    <a data-is-external-link="true" href="#markdown-header-export-von-trainings" rel="nofollow">Export von Trainings</a>
    beschrieben, JSON-Datei mit Trainingsinhalten über das Upload-Formular für den Import hochgeladen werden.
</p>
<h2 id="markdown-header-unternehmen-details">Unternehmen-Details</h2>
<p>
    Für jede auf der Seite
    <a data-is-external-link="true" href="#markdown-header-firmenzuweisung" rel="nofollow">„Firmenzuweisung“</a>
    aufgeführten Firma bzw. Gruppe können weiterführende Details eingesehen werden. Für diesen Zweck muss in der Tabelle
    im linken Bereich („1. Unternehmen auswählen“) auf dieser Seite für die gewünschte Firma das „Tortendiagramm“-Symbol
    angeklickt werden.
    <br>

    Die Seite für die Unternehmen-Details enthält zunächst einen Bereich „Gruppen“, in der alle Gruppen der aktuell
    betrachteten Firma zusammen mit der Mitgliederanzahl aufgeführt werden. Neben jeder Gruppe ist zudem ebenfalls ein
    „Tortendiagramm“-Symbol vorzufinden, welches zu einer Detail-Seite für diese Gruppe führt. Neben dem Bereich
    „Gruppen“ sind für die Firma noch eine Vielzahl an Statistiken aufgeführt.
</p>
<p>Hinweis: Die Details einer Firma können aktuell nur ab einer Firmen-Größe von mindestens 8 Mitgliedern eingesehen
    werden. Benutzer*innen mit der Rolle „Administrator“ können die Informationen dieser Seite unabhängig von der Anzahl
    an Mitgliedern sehen. </p>
<h2 id="markdown-header-nutzer-detail-seite">Nutzer-Detail-Seite</h2>
<p>
    Für die Benutzer*inne des Trainingssystem ist eine Nutzer-Detail-Seite aufrufbar, welche über die
    <a data-is-external-link="true" href="#markdown-header-nutzerliste" rel="nofollow">Nutzerliste</a>
    und die
    <a data-is-external-link="true" href="#markdown-header-coaching-supervisoren-ubersicht" rel="nofollow">Coaching-
        bzw. Supervisoren-Übersicht</a>
    erreichbar ist. Grundlegend sind hier allgemeine Informationen über den*die Benutzer*in wie bspw. die
    E-Mail-Adresse, die ID oder ggf. ein zugeordneter Coach einsehbar. Zusätzlich können hier weiterführende
    Informationen wie der Trainings-Fortschritt, Firmeninformationen oder Statistiken über die Nutzung des Systems
    abrufbar. Des Weiteren kann über diese Seite der
    <a data-is-external-link="true" href="#markdown-header-user-modus" rel="nofollow">User-Modus</a>
    für den*die aktuelle*n Benutzer*in gestartet oder Nachrichten an diese*n versendet werden.
    <br>

    Außerdem können auf dieser Seite über den „Bearbeiten“-Button die hinterlegte E-Mail-Adresse angepasst, eine
    Studienteilnehmer-ID vergeben oder ein neuer Coach für diese*n Benutzer*in zugeordnet werden. Benutzer*innen mit der
    Rolle Administrator“ können auf dieser Seite zudem dem*der aktuellen Benutzer*in eine oder mehrere Rollen des
    Trainingssystems gegeben werden.
</p>
<h2 id="markdown-header-nutzerdaten-exportieren">Nutzerdaten exportieren</h2>
<p>
    <strong>
        Hinweis: Diese Seite ist veraltet und wird standardmäßig nicht im Menü eingebunden. Dieser Export kann
        allerdings über den unten aufgeführten Shortcode bei Bedarf in eine Seite eingesetzt werden. Für den Export von
        Inhalten aus Formularen bitte den im Abschnitt
        <a data-is-external-link="true" href="#markdown-header-datenexport" rel="nofollow">„Datenexport“</a>
        beschriebenen Export nutzen.
    </strong>
</p>
<p>
    In Zusammenarbeit mit
    <a data-is-external-link="true" href="https://www.effective-webwork.de/" rel="nofollow">effective webwork</a>
    wurde der Shortcode
    <code>[tspv2_user_results_export]</code>
    für den Export von Nutzerdaten entwickelt. Für den Export sind mehrere Schritte notwendig:
</p>
<ol>
    <li>
        <p>Zunächst muss eine Datenquelle für den Export ausgewählt werden. Es stehen folgende Quellen dafür zur
            Verfügung: </p>
        <ul>
            <li>Daten zum Nutzungsverhalten </li>
            <li>Daten aus den Eingabefeldern im Training (nur NinjaForms) </li>
            <li>Fragebogenantworten der User aus Limesurvey </li>
            <li>Alle </li>
        </ul>
    </li>
    <li>
        <p>Im nächsten Schritt können alle bzw. eine Auswahl an Trainings für den Export ausgewählt werden. </p>
    </li>
    <li>Neben den Trainings kann im nächsten Schritt bei Bedarf auch eine Auswahl an Lektionen der zuvor gewählten
        Trainings für die Betrachtung im Export ausgewählt werden. </li>
    <li>Anschließend kann für die Auswahl der Benutzer*innen für den Export auch festgelegt werden, ob der Benutzername
        mit einer bestimmten Zeichenketten starten soll. </li>
    <li>Im letzten Schritt kann ein Zeitraum für die Betrachtung der Daten ausgewählt werden. Auf Klick in eines der
        Eingabefelder öffnet sich hierbei ein Kalender, in dem das gewünschte Start- bzw. Enddatum für den Export
        ausgewählt werden. </li>
    <li>Abschließend kann über den Button „Nutzerdaten exportieren“ kann der Export der Nutzerdaten gestartet werden. Je
        nach Auswahl der Datenquellen kann der Export eine längere Zeit in Anspruch nehmen. </li>
</ol>
<p>Hinweis: Bei der Auswahl der Datenquelle, der Trainings sowie der Lektionen können in den Auswahllisten mittels der
    Taste „STRG“ und Klick auf die entsprechenden Elemente mehrere Optionen für den Export ausgewählt werden. </p>
<h2 id="markdown-header-coaching-supervisoren-ubersicht">Coaching-/Supervisoren-Übersicht</h2>
<p>
    Mithilfe des Shortcodes
    <code>[tspv2_coaching_overview]</code>
    kann eine Übersicht zum Coaching in eine Seite eingebunden werden, welche in zwei separate Sichten für die Rollen
    „Psychologischer Coach“ (
    <a data-is-external-link="true" href="#markdown-header-coaching-ubersicht" rel="nofollow">„Coaching-Übersicht“</a>
    ) und „Supervisor“ (
    <a data-is-external-link="true" href="#markdown-header-supervisoren-ubersicht"
        rel="nofollow">„Supervisoren-Übersicht“</a>
    ) aufgeteilt ist. Mittels des Parameters
    <code>titel</code>
    kann die Überschrift dieser Seite angepasst werden (Default-Wert: „Coaching-Übersicht“).
</p>
<h3 id="markdown-header-coaching-ubersicht">Coaching-Übersicht</h3>
<p>Die Sicht für die Rolle „Psychologischer Coach“ unterteilt sich in die beiden Abschnitte „Mir zugewiesene
    Teilnehmende“ und „Meine Vorlagen“: </p>
<ul>
    <li>
        <strong>Mir zugewiesene Teilnehmende</strong>
        : Hier werden alle Teilnehmende der Plattform aufgelistet, welche den*die aktuelle*n Benutzer*in als Coach
        zugewiesen bekommen haben. Neben demn Namen wird hier für jeden zugeordneten Teilnehmenden auch die
        Studienteilnehmer-ID, sofern vorhanden, und eine Übersicht an Trainings aufgeführt, für die der Teilnehmende
        eine Betreuung in Form eines Coachings benötigt. Über den Button „Detail-Seite“ kann der Coach die
        Nutzer-Detail-Seite für den entsprechenden Teilnehmenden aufrufen, um weitere Informationen über diesen zu
        erhalten.
    </li>
    <li>
        <strong>Meine Vorlagen</strong>
        : In dieser Übersicht werden alle
        <a data-is-external-link="true" href="#markdown-header-trainingsvorlagen" rel="nofollow">Trainingsvorlagen</a>
        aufgeführt, in denen der*die aktuelle Benutzer*in als Coach zugeordnet wurde. Für jede Trainingsvorlage werden
        dabei alle Trainings aufgelistet, bei denen ein Coaching aktiviert wurde.
    </li>
</ul>
<p>
    <img alt="coaching_uebersicht.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/355769924-coaching_uebersicht.PNG">
</p>
<h3 id="markdown-header-supervisoren-ubersicht">Supervisoren-Übersicht</h3>
<p>DIe Übersicht für die Rolle „Supervisor“ teilt sich in die beiden Bereiche „Teilnehmende mit Coaching-Bedarf“ und
    „Coaches“ auf: </p>
<ul>
    <li>
        <strong>Teilnehmende mit Coaching-Bedarf</strong>
        : Diese Übersicht listet alle Benutzer*innen der Plattform ohne zugeordneten Coach auf, für die für mindestens
        ein Training Coaching aktiviert wurde. Für jeden Teilnehmenden können hierbei weitere Informationen wie die
        Trainings mit aktivierten Coaching ausgeklappt werden. Über den Button „Coach auswählen“ kann ein weiteres
        Fenster geöffnet werden, in dem dem aktuell ausgewählten Teilnehmenden ein Coach aus einer Liste an
        Benutzer*innen mit der Rolle „Psychologischer Coach“ zugewiesen werden kann.
    </li>
    <li>
        <strong>Coaches</strong>
        : In dieser Übersicht werden alle Benutzer*innen aufgelistet, welchen in der Plattform die Rolle
        „Psychologischer Coach“ zugeordnet wurde. Für jeden Coach wird dabei eine ausklappbare Liste an bereits
        zugeordneten Teilnehmenden aufgeführt. Diese Übersicht kann von Benutzer*innen mit der Rolle „Supervisor“
        genutzt werden, um vor der Zuweisung von Teilnehmenden die Auslastung der einzelnen Coaches zu überprüfen.
    </li>
</ul>
<p>
    <img alt="supervisoren_uebersicht.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/973741796-supervisoren_uebersicht.PNG">
</p>
<h2 id="markdown-header-datenexport">Datenexport</h2>
<p>
    Über das Verwaltungsmenü kann die Seite für den Datenexport aufgerufen werden. Alternativ kann der Export auch über
    den Shortcode
    <code>[tspv2_data_export]</code>
    auf einer Seite eingebunden werden. Mit dem optionalen Parameter
    <code>titel</code>
    kann für diese Seite anstelle des Standardwerts „Datenexport“ eine eigene Überschrift gewählt werden. Der Vorgang
    zum Export von Daten besteht aus vier Schritten:
</p>
<ol>
    <li>
        <p>Zunächst muss mindestens eine Datenquelle für den Export ausgewählt werden. Es stehen aktuell folgende drei
            Quellen zur Verfügung: </p>
        <ul>
            <li>TS Forms </li>
            <li>Systemstatistiken </li>
        </ul>
    </li>
    <li>
        <p>
            Anschließend müssen für jede in Schritt 1 gewählte Datenquelle die gewünschten Daten ausgewählt werden,
            welche durch die Funktion exportiert werden sollen:
            <br>

            Für den Export der Daten für die TS Forms kann eine Auswahl an Formularen manuell über die Liste ausgewählt
            werden. Alternativ können mit dem „+“- bzw. dem „-“-Button alle in der Liste sichtbaren Formulare aus- bzw.
            abgewählt werden. Zusätzlich kann über die Suchfunktion oberhalb der Liste auch nach bestimmten Begriffen
            oder IDs in den Titeln der Formulare gesucht werden.
            <br>

            Bei der Datenquelle „Systemstatistiken“ muss einerseits eine Auswahl an Trainings für den Export gewählt
            werden, andererseits muss mindestens eine der folgenden Statistiken ausgewählt werden:
        </p>
        <ul>
            <li>Begonnene Lektionen: Hier wird für jede Lektion der ausgewählten Trainings das Datum angegeben, an dem
                diese von den Benutzer*innen begonnen wurden. Hat ein*e Benutzer*in eine Lektion noch nicht begonnen
                oder diese*r hat das Training nicht, wird dies an der entsprechenden Stelle im Export durch ein „-“
                gekennzeichnet. </li>
            <li>Beendete Lektionen: Für jede Lektion der ausgewählten Trainings wird hier das Datum angegeben, an dem
                diese durch die Benutzer*innen beendet wurden. Wurde eine Lektion noch nicht durch eine*n Benutzer*in
                vollständig bearbeitet, wird hier der Fortschritt innerhalb der Lektion in Prozent angezeigt. Hat ein*e
                Benutzer\in ein ausgewähltes Training nicht, wird dies durch ein „-“ angezeigt. </li>
            <li>Letzte besuchte Seite: In dieser Statistik wird für jede*n Benutzer*in der Name der zuletzt aufgerufenen
                Seite eines Trainings angegeben. Hat ein*e Benutzer*in ein Training noch nicht gestartet oder diese*r
                hat das ausgewählte Training nicht, wird dies im Export mit einem „-“ markiert. </li>
        </ul>
    </li>
    <li>
        <p>Als Nächstes muss eine Auswahl an Benutzer*innen getroffen werden. Benutzer*innen können hierbei manuell über
            die Liste gewählt werden. Über die „+“- bzw. „-“-Buttons können alle sichtbaren Benutzer*innen aus- bzw.
            abgewählt werden, mit der Suchfunktion kann nach bestimmten Namen oder Studienteilnehmer-IDs gesucht werden.
            Außerdem kann auf die Liste an Benutzer*innen eine Filterung nach Registrierungsdatum angewandt werden. </p>
    </li>
    <li>
        <p>In diesem optionalen Schritt kann noch festgelegt werden, ob die Studienteilnehmer-ID oder auch Gruppen- bzw.
            Firmen-Informationen für die Benutzer*innen aufgeführt werden sollen, sofern diese vorhanden sind. </p>
    </li>
</ol>
<p>Je nach Auswahl kann das Erzeugen der Datei ein wenig Zeit in Anspruch nehmen. Es wird eine CSV-Datei importiert. Um
    die Daten in Excel einsehen zu können, sollte eine neue Excel-Mappe geöffnet werden. Über „Daten -&gt; Externe Daten
    abrufen -&gt; Aus Text“ muss die exportierte CSV-Datei ausgewählt werden. Im ersten Schritt dann „Mit Trennzeichen
    versehen“ auswählen. Aufgrund möglicher Sonderzeichen in der CSV-Datei sollte für eine fehlerfreie Darstellung als
    Dateiursprung „Unicode (UTF-8)“ gewählt werden. Nach Bestätigen mit „Weiter“ muss als Trennzeichen das Komma gewählt
    werden. Das Datenformat kann auf Standard bleiben. </p>
<p>
    <img alt="datenexport_excel.PNG" src="https://bitbucket.org/repo/z8zjexy/images/3194604580-datenexport_excel.PNG">
</p>
<h1 id="markdown-header-trainingsentwicklung-interaktive-elemente">Trainingsentwicklung: Interaktive Elemente</h1>
<h2 id="markdown-header-shortcode-ubersicht-fur-interaktive-elemente">Shortcode-Übersicht für interaktive Elemente</h2>
<p>In diesem Abschnitt wird eine Vielzahl an Elementen beschrieben, die die Trainingsseiten interaktiver gestalten
    können. Viele dieser Elemente werden dabei als Shortcode eingebunden. Die folgende Tabelle soll hierbei als
    Übersicht über alle Shortcodes für interaktive Elemente dienen: </p>
<table>
    <thead>
        <tr>
            <th>Shortcode</th>
            <th>Funktion</th>
            <th>Parameter</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <code>[ts_forms]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-ts-forms" rel="nofollow">Formular</a>
            </td>
            <td>
                <code>id</code>
                für ID des Formulars
            </td>
        </tr>
        <tr>
            <td>
                <code>[coach_output_format_data]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-ausgabe-von-formularinhalten"
                    rel="nofollow">Ausgabe von Formularinhalten</a>
            </td>
            <td>
                <code>id</code>
                des Formulars,
                <code>text</code>
                für Darstellung des Inhalts als Text,
                <code>list</code>
                für Darstellung des Inhalts als Liste,
                <code>table</code>
                für Darstellung des Inhalts als Tabelle,
                <code>title</code>
                für einen oder mehrere Titel oberhalb der Ausgabe (optional, Default-Wert: „“),
                <code>placeholder</code>
                für Platzhalter für leere/nicht ausgefüllte Felder im Formular (optional, Default-Wert: „“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_media_grid]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-ausgabe-von-dateien" rel="nofollow">Ausgabe von
                    Dateien</a>
            </td>
            <td>
                <code>uploadfieldid</code>
                für ID des Upload-Felds,
                <code>view</code>
                für Sicht des Media-Grids,
                <code>projectfieldid</code>
                für ID des Projekt-Dropdowns (optional, Default-Wert: „“),
                <code>titlefieldid</code>
                für ID des Titel-Felds (optional, Default-Wert: „“),
                <code>descfieldid</code>
                für ID des Beschreibungs-Felds (optional, Default-Wert: „“),
                <code>defaultimage</code>
                für relativen Pfad für das Standardbild (optional, Default-Wert: „“),
                <code>latest</code>
                für Anzahl der anzuzeigenden Dateien (optional, Default-Wert: „“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[ts_forms_submit]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-manuelles-absenden-von-formularinhalten"
                    rel="nofollow">Manuelles Absenden von Formularinhalten</a>
            </td>
            <td>
                <code>text</code>
                für Beschriftung des Buttons (optional, Default-Wert: „Absenden“),
                <code>link</code>
                für Link für Weiterleitung nach dem Absenden (optional, Default-Wert: „“),
                <code>css</code>
                für weitere CSS-Klassen für den Button (optional, Default-Wert: „“),
                <code>extendedfeedback</code>
                für die Anzeige von erweitertem Feedback für die Benutzer*innen (optional, Default-Wert: „“),
                <code>extendedfeedbacktext</code>
                für Feedback-Text bei erfolgreichem Absenden (optional, Default-Wert: „Ihre Eingaben wurden erfolgreich
                gespeichert.“),
                <code>extendedfeedbacktext_fail</code>
                für Feedback-Text bei fehlgeschlagenen Absenden (optional, Default-Wert: „Ihre Eingaben konnten nicht
                gespeichert werden. Bitte versuchen Sie es erneut.“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[ts_exercise]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-ubungen" rel="nofollow">Übungen</a>
            </td>
            <td>
                <code>id</code>
                für ID der Übung
            </td>
        </tr>
        <tr>
            <td>
                <code>[accordionmd]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-akkordeon" rel="nofollow">Akkordeon</a>
            </td>
            <td>
                <code>title</code>
                für Titel des Akkordeons,
                <code>title-size</code>
                zum Festlegen der Größe des Titels (optional, Default-Wert: „“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[radiohn]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-radio" rel="nofollow">Radio-Buttons</a>
            </td>
            <td>
                <code>name</code>
                für einen Teilbezeichner (Präfix) für die ID des korrespondierenden
                <code>&lt;div&gt;</code>
                -Containers,
                <code>wert</code>
                für eienn Teilbezeichner (Suffix) für die ID und die Klasse des korrespondierenden
                <code>&lt;div&gt;</code>
                -Containers,
                <code>nameX</code>
                für einen Teilbezeichner (Präfix) für die ID des korrespondierenden
                <code>&lt;div&gt;</code>
                -Containers (optional, Default-Wert: „“, X ist hier Platzhalter für einen beliebigen numerischen Wert)
            </td>
        </tr>
        <tr>
            <td>
                <code>[quizhn]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-quiz" rel="nofollow">Quiz</a>
            </td>
            <td>
                <code>antwort</code>
                für den Text, der dem Radio-Button zugeordnet werden soll,
                <code>id</code>
                für die ID der korrespondierenden
                <code>&lt;div&gt;</code>
                -Struktur,
                <code>class</code>
                für die übergeordnete Klassenbezeichnung
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_reset_radios]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-radio-buttons-zurucksetzen"
                    rel="nofollow">Radio-Buttons zurücksetzen</a>
            </td>
            <td>
                <code>type</code>
                für die Radio-Button-Variante,
                <code>ts-form-id</code>
                für die ID eines TS Forms (für
                <code>type=ts-form</code>
                ),
                <code>wert</code>
                für den vergebenen Wert (für
                <code>type=radiohn</code>
                ),
                <code>class</code>
                für die vergebene Klasse (für
                <code>type=quizhn</code>
                )
            </td>
        </tr>
        <tr>
            <td>
                <code>[ts_forms_conditional]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-conditional-content" rel="nofollow">Conditional
                    Content</a>
            </td>
            <td>
                <code>tsformid</code>
                für die ID des korrespondierenden TS Forms,
                <code>value</code>
                für den Wert des Formulars, für den der Inhalt angezeigt werden soll,
                <code>samepage</code>
                für Angabe, ob Ausgabe des Inhalts auf der gleichen Seite wie das Formular ist (optional, Default-Wert:
                „false“),
                <code>fieldid</code>
                für die ID des Felds, dessen Wert auf
                <code>value</code>
                geprüft werden soll (optional, Default-Wert: das in der Sortierreihenfolge 1. Feld),
                <code>formgroup</code>
                für die Formgroup eines Formulars, welche überprüft werden soll (optional, Default-Wert: die letzte
                Formgroup des Formulars),
                <code>show_on_default</code>
                für die Ausgabe des Inhalts, wenn der*die Benutzer*in die Eingabe noch nicht verändert hat (optional,
                Default-Wert: „false“),
                <code>range_min</code>
                für untere Grenze für Ausgabe des Inhalts (nur für Formulartyp Slider“),
                <code>range_max</code>
                für obere Grenze für Ausgabe des Inhalts (nur für Formulartyp Slider“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[ts_forms_conditional-inner1]</code>
                ,
                <code>[ts_forms_conditional-inner2]</code>
                ,
                <code>[ts_forms_conditional-inner3]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-conditional-content-verschachtelung"
                    rel="nofollow">Aliasse</a>
                des Shortcodes
                <code>[ts_forms_conditional]</code>
            </td>
            <td>
                siehe Shortcode
                <code>[ts_forms_conditional]</code>
            </td>
        </tr>
        <tr>
            <td>
                <code>[pdfdownload]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-pdf-dateien-erzeugen"
                    rel="nofollow">PDF-Funktion</a>
            </td>
            <td>
                <code>name</code>
                für den Namen der PDF-Datei (optional, Default-Wert: „mypdf“),
                <code>format</code>
                für die Ausrichtung des Dokuments (optional, Default-Wert: „p“),
                <code>title</code>
                für Beschriftung des Download-Links (optional, Default-Wert: „Download als PDF“),
                <code>pdfid</code>
                für ID für Download-Link zur Unterscheidung bei mehrfacher Nutzung des Shortcodes,
                <code>divid</code>
                für ID des
                <code>&lt;div&gt;</code>
                -Containers, in dem der Download-Link eingebettet werden soll (optional, Default-Wert: „“),
                <code>docheadline</code>
                für Hauptüberschrift des Dokuments (optional, Default-Wert: „“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[pdfdownloadignorestart]</code>
                ,
                <code>[pdfdownloadignoreend]</code>
            </td>
            <td>
                Ignorieren von Inhalten beim Erstellen einer PDF mit dem Shortcode
                <code>[pdfdownload]</code>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                <code>[coach_output_gbu]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-ausgabe-der-werte-der-gefahrdungsbeurteilung-gbu"
                    rel="nofollow">Ausgabe von verschiedenen Werten der Gefährdungsbeurteilung (GBU)</a>
            </td>
            <td>
                <code>mode</code>
                für den Modus der Ausgabe,
                <code>id</code>
                für die ID eines Formulars
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_output_mittelwert_gesamt]</code>
            </td>
            <td>
                <a data-is-external-link="true"
                    href="#markdown-header-ausgabe-des-mittelwerts-fur-einen-block-der-gefahrdungsbeurteilung-gbu"
                    rel="nofollow">Ausgabe des Mittelwerts für einen ganzen Block (GBU)</a>
            </td>
            <td>
                <code>id</code>
                für die ID der Formualre, die bei der Berechnung mit einfließen sollen,
                <code>groupbygroups</code>
                für die Aufschlüsselung des Ergebnisses nach Gruppen (optional, Default-Wert: „false“),
                <code>poszuneg</code>
                für ein Farbskala von positiv nach negativ (optional, Default-Wert: „true“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_coach_download_csv_link]</code>
            </td>
            <td>
                <a data-is-external-link="true"
                    href="#markdown-header-csv-download-der-daten-der-gefahrdungsbeurteilung-gbu" rel="nofollow">Ausgabe
                    des Links zur Generierung einer CSV-Datei mit Daten der Gefährdungsbeurteilung</a>
            </td>
            <td>
                <code>data</code>
                für ein JSON-Array mit Themen, Unterthemen und Formular-IDs,
                <code>singleuser</code>
                für den Download der Daten für den*die aktuelle*n Benutzer*in (optional, Default-Wert: „false“),
                <code>groupbygroups</code>
                für die Aufschlüsselung der Daten nach Gruppen (optional, Default-Wert: „false“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[coach_output_gbu_chart]</code>
            </td>
            <td>
                <a data-is-external-link="true"
                    href="#markdown-header-visualisierung-der-werte-der-gefahrdungsbeurteilung-gbu"
                    rel="nofollow">Visualisierung von Werten der Gefährdungsbeurteilung</a>
            </td>
            <td>
                <code>charttype</code>
                für die Angabe eines Diagramm-Typs (optional, Default-Wert: „“),
                <code>id</code>
                für die Angabe der IDs eines oder mehrerer Formulare,
                <code>charttitle</code>
                für die Angabe eines oder mehrerer Titel für die betrachteten Skalen (optional, Default-Wert: „“),
                <code>showpdfdownload</code>
                für das Einbinden eines PDF-Downloads für die Ergebnisse der einzelnen Gruppen (optional, Default-Wert:
                „“),
                <code>pdfdownloadtitle</code>
                für die Angabe einer Beschriftung der mit
                <code>showpdfdownload</code>
                eingebundenen Download-Links (optional, Default-Wert: „Auswertung als PDF herunterladen“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[forward_content]</code>
            </td>
            <td>
                Einbinden eines Buttons, um
                <a data-is-external-link="true" href="#markdown-header-freigabe-von-inhalten-ermoglichen"
                    rel="nofollow">Freigabe von Inhalten zu ermöglichen</a>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                <code>[coach_output_forward_content]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-ausgabe-freigegebener -inhalte"
                    rel="nofollow">Ausgabe freigegebener Inhalte</a>
            </td>
            <td>
                <code>id</code>
                für eine oder mehrere IDs freigegebener TS Forms,
                <code>printlabels</code>
                zur Ausgabe der Labels der freigegebenen Formulare (optional, Default-Wert: „“),
                <code>boss</code>
                für die Angabe, ob Benutzer*innen mit der Rolle „Führungskraft“ die freigegebenen Inhalte einsehen
                dürfen (optional, Default-Wert: „“),
                <code>kadmin</code>
                für die Angabe, ob Benutzer*innen mit der Rolle „Krankenkassenadmin“ die freigegebenen Inhalte einsehen
                dürfen (optional, Default-Wert: „“),
                <code>headlines</code>
                für das Einbinden von individuellen Überschriften zwischen den freigegebenen TS Forms (optional,
                Default-Wert: „“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[coachingmodeform]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-coachingmodus-formulare"
                    rel="nofollow">Coachingmodus-Formular</a>
            </td>
            <td>
                <code>training</code>
                für die ID des Trainings, für das der Coachingmodus festgelegt werden soll,
                <code>title</code>
                für das Anzeigen des Titels des Trainings im Formular (optional, Default-Wert: „“),
                <code>multichoice</code>
                für die Angabe, ob das Formular durch die Benutzer*innen mehrmals abgeschickt werden darf (optional,
                Default-Wert: „“),
                <code>modi</code>
                für die Angabe der zur Auswahl stehenden Coachingmodi (optional, Default-Wert: „“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[copyfieldtext]</code>
            </td>
            <td>
                <a data-is-external-link="true"
                    href="#markdown-header-ausgabe-des-inhalts-eines-textfeldes-in-einen-paragraph"
                    rel="nofollow">Ausgabe des Inhalts eines Textfeldes in einen Paragraph</a>
            </td>
            <td>
                <code>id</code>
                für die ID des Formulars, dessen Inhalt kopiert werden soll
            </td>
        </tr>
        <tr>
            <td>
                <code>[copycheckbox]</code>
            </td>
            <td>
                <a data-is-external-link="true"
                    href="#markdown-header-ausgabe-des-textinhalt-von-gecheckten-checkboxen-in-einer-liste"
                    rel="nofollow">Ausgabe des Textinhalt von gecheckten Checkboxen in einer Liste</a>
            </td>
            <td>
                <code>id</code>
                für die ID des Formulars, dessen Inhalt kopiert werden soll
            </td>
        </tr>
        <tr>
            <td>
                <code>[copychecktableitems]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-ausgabe-von-beschreibungen-einer-check-table"
                    rel="nofollow">Ausgabe von Beschreibungen einer Check Table</a>
            </td>
            <td>
                <code>id</code>
                für die ID der Check Table,
                <code>pos</code>
                für die Spalte der Check Table, bei welcher das Kopieren der Beschreibungen ausgelöst werden soll,
                <code>sammlung</code>
                für die ID des Formulars, in welches die Beschreibungen kopiert werden sollen
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_latest_posts]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-anzeigen-von-beitragen" rel="nofollow">Anzeigen
                    von Beiträgen</a>
            </td>
            <td>
                <code>titel</code>
                für Überschrift der Auflistung (optional, Default-Wert: „Aktuelles“),
                <code>number</code>
                für Anzahl der anzuzeigenden Beiträge (optional, Default-Wert: „3“),
                <code>numberchars</code>
                für Anzahl der anzuzeigenden Zeichen des Beitrags, bevor diese abgeschnitten werden (optional,
                Default-Wert: „150“),
                <code>post_type</code>
                für die Angabe von einem oder mehreren Tyen an Beiträgen, die dargestellt werden sollen (optional,
                Default-Wert: „posts“),
                <code>category</code>
                für einen Filter für Kategorien (optional, Default-Wert: „0“),
                <code>morelink</code>
                für die Angabe eines Buttons für weitere Beiträge (optional, Default-Wert: „null“),
                <code>morelinktext</code>
                für Beschriftung des Buttons, welcher über den Paramter
                <code>morelink</code>
                eingefügt wurde (optional, Default-Wert: „Weitere Beiträge“),
                <code>include</code>
                für die Angabe von IDs von Beiträgen die bei der Darstellung mit eingeschlossen werden sollen (optional,
                Default-Wert: leeres Array),
                <code>exclude</code>
                für die Angabe von IDs von Beiträgen die bei der Darstellung ausgeschlossen werden sollen (optional,
                Default-Wert: leeres Array)
            </td>
        </tr>
        <tr>
            <td>
                <code>[hnprogress]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-fortschrittsubersicht"
                    rel="nofollow">Fortschrittsübersicht in Prozent</a>
            </td>
            <td>
                <code>tname</code>
                für den Namen des Trainings,
                <code>percent</code>
                für die Angabe des Fortschritts in Prozent
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_trainingprogress]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-trainingsfortschritt" rel="nofollow">Fortschritt:
                    Trainingsfortschritt</a>
            </td>
            <td>
                <code>titel</code>
                für individuelle Überschrift (optional, Default-Wert: „Detail Trainingsfortschritt“)
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_abzeichen_modal]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-verleihung-von-abzeichen"
                    rel="nofollow">Verleihung von Abzeichen</a>
            </td>
            <td>
                <code>titel</code>
                für eine individuelle Überschrift (optional, Default-Wert: „Herzlichen Glückwunsch“),
                <code>srclektion</code>
                für die Vergabe einer IMG- bzw. GIF-Datei beim Absolvieren einer Lektion (optional, Default-Wert: „“),
                <code>srctraining</code>
                für die Vergabe einer IMG- bzw. GIF-Datei beim Absolvieren eines Trainings (optional, Default-Wert: „“),
                <code>textlektion</code>
                für die Angabe eines Texts beim Absolvieren einer Lektion (optional, Default-Wert: „Sie haben die
                Lektion erfolgreich abgeschlossen!“),
                <code>texttraining</code>
                für die Angabe eines Texts beim Absolvieren eines Trainings (optional, Default-Wert: „Sie haben das
                Training erfolgreich abgeschlossen!“),
                <code>texttag</code>
                für die Angabe des HTML-Tags für den Text, welcher durch die Parameter
                <code>textlektion</code>
                und
                <code>texttraining</code>
                erzeugt wird (optional, Default-Wert: „p“),
                <code>buttontitel</code>
                für die Beschriftung des Buttons (optional, Default-Wert: „Weiter“),
                <code>overlaynone</code>
                für das Erzeugen des Modal ohne Overlay (optional, Default-Wert: 0)
            </td>
        </tr>
        <tr>
            <td>
                <code>[tspv2_drag_drop_game]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-dragdrop-spiel"
                    rel="nofollow">Drag&amp;Drop-Spiel</a>
            </td>
            <td>
                <code>sections</code>
                für die Angabe von Bereichen für das Drag&amp;Drop-Spiel,
                <code>items1</code>
                für die Angabe von Begriffen, welche zum ersten Bereich im Spiel gehören,
                <code>items2</code>
                für die Angabe von Begriffen, welche zum zweiten Bereich im Spiel gehören,
                <code>items3</code>
                für die Angabe von Begriffen, welche zum dritten Bereich im Spiel gehören,
                <code>color</code>
                für die Angabe von Farben bzw. Farbwerten für die einzelnen Bereiche (optional, Default-Wert: Grautöne)
            </td>
        </tr>
        <tr>
            <td>
                <code>[ts_timer]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-timer" rel="nofollow">Timer</a>
            </td>
            <td>
                <code>h</code>
                für die Zeit in Stunden (optional, Default-Wert: 0),
                <code>m</code>
                für die Zeit in Minuten (optional, Default-Wert: 0),
                <code>s</code>
                für die Zeit in Sekunden (optional, Default-Wert: 0),
                <code>format</code>
                für die Angabe des Zeitformats,
                <code>stop</code>
                für die Angabe des Modus für den Timer (optional, Default-Wert: 0)
            </td>
        </tr>
    </tbody>
</table>
<h3 id="markdown-header-ubersicht-uber-veraltete-shortcodes-fur-interaktive-elemente">Übersicht über veraltete
    Shortcodes für interaktive Elemente</h3>
<p>Im Folgenden werden veraltete Shortcodes aufgeführt, deren Funktionalität noch innerhalb des Trainingssystem-Plugins
    verfügbar ist bzw. welche vom Plugin noch unterstützt werden. Die aufgelisteten Shortcodes sollten im Idealfall
    nicht mehr genutzt werden, da für diese entweder neue Eigenentwicklungen oder verbesserte Funktionen als Ersatz
    verfügbar sind (in der Tabelle die Spalte „Neue Alternative“).</p>
<table>
    <thead>
        <tr>
            <th>Alter Shortcode</th>
            <th>Funktion</th>
            <th>Parameter</th>
            <th>Neue Alternative</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <code>[pdfprintstart]</code>
                und
                <code>[pdfprintende]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-shortcodes-pdfprintstart-und-pdfprintende"
                    rel="nofollow">PDF-Funktion</a>
            </td>
            <td></td>
            <td>
                <code>[pdfdownload]</code>
            </td>
        </tr>
        <tr>
            <td>
                <code>[coach_output_einzel_beurteilung1]</code>
            </td>
            <td>Einzelauswertung für Beschäftige: positiv zu negativ (&lt;3: sehr gut bis gut, &gt;3: kritisch, Rest:
                mittelmäßig)</td>
            <td>
                <code>id</code>
                für die ID eines Formulars
            </td>
            <td>
                <code>[coach_output_gbu]</code>
                mit
                <code>mode="einzel_pos_zu_neg"</code>
            </td>
        </tr>
        <tr>
            <td>
                <code>[coach_output_einzel_beurteilung2]</code>
            </td>
            <td>Einzelauswertung für Beschäftige: negativ zu positiv (&lt;3 kritisch, &gt;3 sehr gut bis gut, Rest:
                mittelmäßig)</td>
            <td>
                <code>id</code>
                für die ID eines Formulars
            </td>
            <td>
                <code>[coach_output_gbu]</code>
                mit
                <code>mode="einzel_neg_zu_pos"</code>
            </td>
        </tr>
        <tr>
            <td>
                <code>[coach_output_gesamt_haeufigkeit]</code>
            </td>
            <td>Gesamtauswertung (Tabellenset 1): Häufigkeiten und Mittelwerte - positiv zu negativ</td>
            <td>
                <code>id</code>
                für die ID eines Formulars
            </td>
            <td>
                <code>[coach_output_gbu]</code>
                mit
                <code>mode="ts1_ga_pos_zu_neg"</code>
            </td>
        </tr>
        <tr>
            <td>
                <code>[coach_output_gesamt_haeufigkeit2]</code>
            </td>
            <td>Gesamtauswertung (Tabellenset 1): Häufigkeiten und Mittelwerte - negativ zu positiv</td>
            <td>
                <code>id</code>
                für die ID eines Formulars
            </td>
            <td>
                <code>[coach_output_gbu]</code>
                mit
                <code>mode="ts1_ga_neg_zu_pos"</code>
            </td>
        </tr>
        <tr>
            <td>
                <code>[coach_output_gesamt_haeufigkeit_gruppen]</code>
            </td>
            <td>Gruppenspezifika (Tabellenset 2): Häufigkeiten - positiv zu negativ (&lt;= 2,3: sehr gut bis gut,
                &gt;=3,7: kritisch, Rest: mittelmäßig)</td>
            <td>
                <code>id</code>
                für die ID eines Formulars
            </td>
            <td>
                <code>[coach_output_gbu]</code>
                mit
                <code>mode="ts2_gs_pos_zu_neg"</code>
            </td>
        </tr>
        <tr>
            <td>
                <code>[coach_output_gesamt_haeufigkeit_gruppen2]</code>
            </td>
            <td>Gruppenspezifika (Tabellenset 2): Häufigkeiten - negativ zu postiv (&lt;= 2,3: kritisch, &gt;=3,7: sehr
                gut bis gut, Rest: mittelmäßig)</td>
            <td>
                <code>id</code>
                für die ID eines Formulars
            </td>
            <td>
                <code>[coach_output_gbu]</code>
                mit
                <code>mode="ts2_gs_neg_zu_pos"</code>
            </td>
        </tr>
        <tr>
            <td>
                <code>[coach_output_tabellenset3]</code>
            </td>
            <td>Gruppenvergleich (Tabellenset 3): Mittelwerte - positiv zu negativ (&lt;= 2,3: sehr gut bis gut,
                &gt;=3,7: kritisch, Rest: mittelmäßig)</td>
            <td>
                <code>id</code>
                für die ID eines Formulars
            </td>
            <td>
                <code>[coach_output_gbu]</code>
                mit
                <code>mode="ts3_gv_pos_zu_neg"</code>
            </td>
        </tr>
        <tr>
            <td>
                <code>[coach_output_tabellenset3b]</code>
            </td>
            <td>Gruppenvergleich (Tabellenset 3): Mittelwerte - negativ zu positiv (&lt;= 2,3: kritisch, &gt;=3,7: sehr
                gut bis gut, Rest: mittelmäßig)</td>
            <td>
                <code>id</code>
                für die ID eines Formulars
            </td>
            <td>
                <code>[coach_output_gbu]</code>
                mit
                <code>mode="ts3_gv_neg_zu_pos"</code>
            </td>
        </tr>
        <tr>
            <td>
                <code>[coach_output_gefaerdungsbeurteilung_text]</code>
            </td>
            <td>Ausgabe der Freitextfelder bei der Gefährdungsbeurteilung</td>
            <td>
                <code>id</code>
                für die ID eines Formulars
            </td>
            <td>
                <code>[coach_output_gbu]</code>
                mit
                <code>mode="text"</code>
            </td>
        </tr>
    </tbody>
</table>
<h2 id="markdown-header-formulare">Formulare</h2>
<h3 id="markdown-header-ts-forms">TS-Forms</h3>
<h4 id="markdown-header-eingaben">Eingaben</h4>
<p>
    <strong>Anlegen von Formularen</strong>
    <br>

    Formulare können im Backend des Trainingssystems angelegt werden. Dazu muss zunächst über den Reiter
    „Trainingssystem“ auf den Menüpunkt „Formulare“ geklickt werden. Auf der folgenden Übersichtsliste wird jedes
    Formular mit ID, Titel sowie Datum der Veröffentlichung angezeigt. Auf der gleichen Seite kann nun über den Button
    „Neues Formular“ ein Formular für das Trainingssystem angelegt werden.
    <br>

    Im ersten Schritt muss der Titel des neuen Formulars eingegeben werden. Hierbei besteht generell eine freie Auswahl
    des Namens, allerdings wird empfohlen, eine sinnvolle Benennung des Titels wie folgt zu wählen:
</p>
<ul>
    <li>ET: Einzeiliges Textfeld / Einzelne Textzeile </li>
    <li>MT: Mehrzeiliges Textfeld / Textabsatz </li>
    <li>C: Checkliste / Liste mit Optionsfeldern </li>
    <li>R: Radiobutton-Liste / Mehrfachauswahl </li>
    <li>D: Dropdown-Liste / Auswahlliste </li>
    <li>S: Slider </li>
    <li>TX: Text </li>
    <li>SK: Skala </li>
    <li>MX: Matrix </li>
    <li>UP: Upload </li>
    <li>MF: Multiformular </li>
    <li>z.B. MF_ET1: Multiformular mit einem Textfeld </li>
    <li>z.B. MF_ET1_D1_ET1: Multiformular mit Textfeld, Auswahlliste, Textfeld </li>
</ul>
<p>Neben der Abkürzung des Typs des Formulars sollte im Titel auch die Seite aufgeführt werden, in der das Formular
    später genutzt wird. Des Weiteren sollte zusätzlich auch der Kontext, in dem das neu erstellt Formular genutzt wird,
    angegeben werden, damit eine leichtere Unterscheidung von Formularen gleichen Typs auf einer Seite möglich ist. Ein
    Beispiel für einen Titel nach dem zuvor beschriebenen Schema wäre folgender: </p>
<p>C:Stress101:Meine Stressfaktoren </p>
<p>
    Wurde schließlich ein geeigneter Titel eingegeben, muss das Formular nun veröffentlicht werden. Anschließend öffnet
    sich eine neue Seite, auf der das Formular bearbeitet werden kann. Die Seite teilt sich dabei in die drei
    Teilbereiche „Formular-Optionen“, „Formular zusammenstellen“ und „Formular wird verwendet in:“ auf.
    <br>

    Im Bereich „Formular-Optionen“ können einige grundlegende Einstellungen am aktuellen Formular vorgenommen werden.
    Zunächst wird hier der Shortcode mit der entsprechenden ID des Formulars aufgelistet, welcher genutzt werden kann,
    um das Formular in einer oder mehreren Seite zu integrieren, z.B.
    <code>[ts_forms id='54495']</code>
    . Der Shortcode funktioniert genauso wie ein HTML-Tag und erzeugt das zuvor erstellte Formular an der Stelle, an der
    auf der Seite eingebunden wird. Durch einen Klick auf den grauen Button neben dem Shortcode des Formulars im Bereich
    „Formular-Optionen“ kann dieser in die Zwischenablage kopiert werden.
    <br>

    Im Bereich „Formular-Optionen“ besteht die Möglichkeit, über das entsprechende Textfeld zusätzliche CSS-Klassen
    anzugeben, die auf dem alle Felder umfassenden div-Container angewendet werden soll. Mehrere CSS-Klassen müssen
    durch ein Leerzeichen voneinander getrennt im Textfeld angegeben werden.
</p>
<p>
    <strong>MultiFormulare (MultiForms)</strong>
    <br>

    Des Weiteren kann im Bereich „Formular-Optionen“ für ein Formular durch Setzen des Hakens bei der Checkbox „Dieses
    Formular ist ein MultiForm“ festgelegt werden, dass das Formular ein „MultiForm“ ist. Ein „MultiForm“ (kurz für
    „MultiFormular“) ist ein Formular, welches nach Laden der Webseite noch über den „+“-Button unterhalb des Formulars
    um weitere Felder durch den*die Benutzer*in erweitert werden kann. Ein Beispiel für ein „MultiForm“ ist in folgendem
    Bild zu sehen:
</p>
<p>
    <img alt="Multiform.PNG" src="https://bitbucket.org/repo/z8zjexy/images/2055082302-Multiform.PNG">
</p>
<p>Über die Radio-Auswahl „MultiForm-Anordnung“ kann für ein „MultiForm“ festgelegt werden, ob die einzelnen Felder des
    Formulars übereinander oder nebeneinander (Default-Wert) angeordnet werden sollen. </p>
<p>
    <strong>Formulareingaben manuell absenden</strong>
    <br>

    Über die Option „Formulareingaben manuell absenden“ im Bereich „Formular-Optionen“ kann für ein Formular festgelegt
    werden, dass die getätigten Eingaben nicht automatisch (bspw. durch Weiterschalten der Seite), sondern manuell
    gespeichert werden sollen. Wurde der Haken bei dieser Option gesetzt, wird automatisch ein Button zum manuellen
    Absenden der Eingaben platziert.
    <br>
    <img alt="tsforms_manuelles_abschicken.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/1615348939-tsforms_manuelles_abschicken.PNG">
    <br>

    Standardmäßig bleibt der*die Benutzer*in nach manuellem Abschicken der Eingaben auf der aktuellen Seite. Wurde für
    diese Option zusätzlich eine URL angegeben, wird der*die Benutzer*in nach Klick auf dem Button auf diese
    weitergeleitet.
    <br>

    Neben der Option, die Eingaben eines Formulars manuell abzuschicken, besteht auch die Möglichkeit, die Inhalte aller
    Formulare auf einer Seite mittels des Shortcodes
    <code>[ts_forms_submit]</code>
    (siehe Abschnitt
    <a data-is-external-link="true" href="#markdown-header-manuelles-absenden-von-formularinhalten"
        rel="nofollow">Manuelles Absenden von Formularinhalten</a>
    ) manuell mit einem einzelnen Button absenden zu lassen.
</p>
<p>
    <strong>Formulareingaben per Mail senden</strong>
    <br>

    Außerdem kann für ein Formular über die Checkbox „Formulareingaben per Mail senden“ im Bereich „Formular-Optionen“
    festgelegt werden, dass die durch die Benutzer*innen getätigten Eingaben an eine oder mehrere hinterlegte
    E-Mail-Adressen gesendet werden können. Für diese Funktion sollte zusätzlich der Shortcode
    <code>[ts_forms_submit]</code>
    zum manuellen Absenden mehrerer Formulare (siehe den Abschnitt
    <a data-is-external-link="true" href="#markdown-header-manuelles-absenden-von-formularinhalten"
        rel="nofollow">„Manuelles Absenden von Formularinhalten“</a>
    ) oder die Option „Formulareingaben manuell absenden“ für das entsprechende Formualr genutzt werden.
    <br>

    Neben dem Versenden per E-Mail werden die Eingaben standardmäßig auch gespeichert, was jedoch über die entsprechende
    Checkbox auszuschalten ist. Diese Funktion sollte sehr achtsam und wenn möglich nur temporär eingesetzt werden, da
    die Daten ungefiltert verschickt werden und die Gefahr einer missbräuchlichen Verwendung besteht.
</p>
<p>Hinweis: Es wird empfohlen, im entsprechenden Formular Labels für die einzelnen Felder zu nutzen, damit die Eingaben
    der Benutzer*innen in der E-Mail leichter den einzelnen Formularfeldern zugeordnet werden können. </p>
<p>
    <strong>Bestätigung an Nutzer senden</strong>
    <br>

    Mit dieser Funktion ist es möglich, dass eine E-Mail-Bestätigung über das erfolgreich abgesendete Formular an die
    ausfüllende Person gesendet wird. Diese Funktion kann durch Setzen der Checkbox „Bestätigung an Nutzer senden“
    aktiviert werden.
    <br>

    Ist die Person beim Ausfüllen des Formulars angemeldet, wird die Bestätigung an die bei der Registrierung
    hinterlegten E-Mail-Adresse genutzt. Ist das Formular für alle Benutzer*innen verfügbar, wird im Formular nach einem
    Textfeld vom Typ „E-Mail“ gesucht und die dort angegebene E-Mail-Adresse für den Versand der Bestätigung verwendet.
    Existiert für das Formular kein Textfeld dieser Art, ist dieses Feld leer oder wurde keine gültige E-Mail-Adresse
    angegeben, erfolgt kein Bestätigungsversand. Es wird auch keine E-Mail-Bestätigung versendet, wenn der Betreff oder
    der Text der E-Mail leer ist.
    <br>

    Für den Text der E-Mail können folgende HTML-Elemente genutzt werden:
</p>
<ul>
    <li>
        <code>&lt;a&gt;</code>
    </li>
    <li>
        <code>&lt;abbr&gt;</code>
    </li>
    <li>
        <code>&lt;acronym&gt;</code>
    </li>
    <li>
        <code>&lt;b&gt;</code>
    </li>
    <li>
        <code>&lt;blockquote&gt;</code>
    </li>
    <li>
        <code>&lt;cite&gt;</code>
    </li>
    <li>
        <code>&lt;code&gt;</code>
    </li>
    <li>
        <code>&lt;del&gt;</code>
    </li>
    <li>
        <code>&lt;em&gt;</code>
    </li>
    <li>
        <code>&lt;i&gt;</code>
    </li>
    <li>
        <code>&lt;q&gt;</code>
    </li>
    <li>
        <code>&lt;s&gt;</code>
    </li>
    <li>
        <code>&lt;strike&gt;</code>
    </li>
    <li>
        <code>&lt;strong&gt;</code>
    </li>
</ul>
<p>
    <strong>Speichermodus der Formulareingaben</strong>
    <br>

    Für jedes Formular kann ein Speichermodus festgelegt werden. Es stehen aktuell folgende drei Modi zur Verfügung:
</p>
<ul>
    <li>
        <strong>Normaler Modus</strong>
        : Hierbei handelt es sich um den Standard für Formulare. Es wird stets die aktuellste Eingabe durch die
        Benutzer*innen gespeichert, d.h. alte Eingaben können bei erneuter Nutzung eines Formulars überschrieben werden.
        Den Benutzer*innen werden bei erneutem Seitenaufruf die letzte Eingabe innerhalb des Formulars angezeigt. Des
        Weiteren können die Eingaben auch mit konventionellen Shortcodes wie
        <code>[coach_output_format_data]</code>
        (siehe Abschnitt
        <a data-is-external-link="true" href="#markdown-header-ausgabe-von-formularinhalten" rel="nofollow">„Ausgabe von
            Formularinhalten“</a>
        für weitere Details) ausgegeben werden.
    </li>
    <li>
        <strong>Alle Formulareingaben behalten</strong>
        : Mit dieser Option werden alle durch die Benutzer*innen getätigten Eingaben gespeichert und nicht automatisch
        überschrieben. Der*Die Benutzer*in kann in seiner Ansicht trotzdem nicht diese Werte sehen. Für die Ausgabe der
        Daten sind besondere Shortcodes wie bspw.
        <code>[tspv2_media_grid]</code>
        (siehe Abschnitt
        <a data-is-external-link="true" href="#markdown-header-ausgabe-von-dateien" rel="nofollow">„Ausgabe von
            Dateien“</a>
        für weitere Details) notwendig.
    </li>
    <li>
        <strong>Keine Formulareingaben speichern</strong>
        : Ist diese Option ausgewählt, so werden keine Eingaben der Benutzer*innen in diesem Formular gespeichert. Diese
        Option eignet sich insbesondere für den Versand der Formulareingaben mit E-Mails, bei dem dasselbe Formular
        mehreren Nutzenden angezeigt wird.
    </li>
</ul>
<p>
    <strong>Formular zusammenstellen</strong>
    <br>

    Im Bereich „Formular zusammenstellen“ kann schließlich eine Auswahl an Feldern für das Formular zusammengestellt
    werden. Dazu muss der blaue „+“-Button geklickt werden und es öffnet sich ein Fenster, in dem eines der folgenden
    Formularfelder ausgewählt werden kann:
</p>
<ul>
    <li>Textfeld </li>
    <li>Textbox </li>
    <li>Dropdown </li>
    <li>Radio-Button </li>
    <li>Checkbox </li>
    <li>Slider </li>
    <li>Text </li>
    <li>Skala </li>
    <li>Matrix </li>
    <li>Upload </li>
</ul>
<p>
    Beschreibungen sowie Besonderheiten zu den einzelnen Formularfeldern sind im Abschnitt
    <a data-is-external-link="true" href="#markdown-header-formularfelder" rel="nofollow">Formularfelder</a>
    vorzufinden. Neben dem Typ kann für ein Feld auch ein optionales Label bzw. im Falle der Radio-Buttons ein Titel
    definiert werden, welcher oberhalb des Felds angezeigt wird. Über „Weitere Optionen“ können zudem Einstellungen wie
    beispielsweise Platzhalterwerte oder auch zusätzliche CSS-Klassen ergänzt werden.
    <br>

    Wurde eine Auswahl an Formularfeldern erstellt, kann die Sortierung der Elemente via Drag &amp; Drop verändert
    werden. Dazu müssen das Formular bzw. Änderungen an diesem zunächst über den Button „Aktualisieren“ gespeichert
    werden.
    <br>

    Über den grauen Button auf der rechten Seite eines Feld können Änderungen an diesem vorgenommen werden. Des Weiteren
    kann über den roten „Papierkorb“-Button ein Feld des Formulars auch wieder entfernt werden.
    <br>

    Die aktuelle Darstellung des zusammengestellten Formulars kann über den „Vorschau“-Button betrachtet werden.
</p>
<p>
    <strong>Verwendung des Formulars abrufen</strong>
    <br>

    Im Bereich „Formular wird verwendet in:“ kann über den Button „Daten abrufen“ eine Liste über alle Seiten aufgerufen
    werden, in denen bisher der aktuell betrachtete Shortcode genutzt wurde. Wurde der Shortcode für das Formular auf
    einer Seite genutzt, kann über den grauen Button der Editor für die entsprechende Seite aufgerufen werden.
</p>
<p>
    <img alt="verwendung_formular.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/1337450271-verwendung_formular.PNG">
</p>
<h4 id="markdown-header-formularfelder">Formularfelder</h4>
<p>
    <strong>Textfeld</strong>
    <br>

    Mit dem Typ „Textfeld“ kann ein einfaches Textfeld für verschiedene Eingaben erstellt werden. Die Art der Eingabe
    kann unter „Weitere Optionen“ über den Punkt „Textfeld-Typ“ festgelegt werden. Es stehen dabei folgende Typen zur
    Auswahl:
</p>
<ul>
    <li>Text: Feld zur Eingabe von einfachen Text. </li>
    <li>Color: Zur Auswahl eines Farbwerts. </li>
    <li>Date: Zur Auswahl eines Datums. </li>
    <li>Datetime local: Zur Auswahl eines Datums mit Uhrzeit. </li>
    <li>E-Mail: Zur Eingabe einer E-Mail-Adresse. </li>
    <li>Month: Zur Auswahl eines Monats. </li>
    <li>Number: Zur Auswahl eines numerischen Werts. </li>
    <li>Passwort: Zur Eingabe eines Passworts. </li>
    <li>Telfonnr.: Zur Eingabe einer Telefonnumer. </li>
    <li>Time: Zur Auswahl einer Uhrzeit. </li>
    <li>URL: Zur Eingabe einer URL. </li>
    <li>Week: Zur Auswahl einer Kalenderwoche. </li>
</ul>
<p>
    <img alt="tsforms_textfeld.JPG" src="https://bitbucket.org/repo/z8zjexy/images/875019222-tsforms_textfeld.JPG">
</p>
<p>Für die Typen „Text“, „E-Mail“, „Number“, „Passwort“, „Telefonnr.“ und „URL“ kann über den Punkt „Platzhalter“ ein
    Platzhalterwert definiert werden, welcher anstelle eines leeren Werts für das Feld angezeigt wird. Über dem Punkt
    „Value“ kann außerdem für das Feld ein Wert definiert werden, welcher standardmäßig eingefügt wird. Der Wert für
    „Value“ muss dabei für bestimmte Typen in einem festgelegten Format angegeben werden: </p>
<ul>
    <li>Text: Einfache Zeichenkette. </li>
    <li>Color: Farbwert als Hex-Wert, z.B. #123456. </li>
    <li>Date: Datum im Format YYYY-MM-DD. </li>
    <li>Datetime local: Datum mit Uhrzeit im Format YYYY-MM-DDThh:mm. </li>
    <li>E-Mail: Einfache Zeichenkette. </li>
    <li>Month: Datum im Format YYYY-MM. </li>
    <li>Number: Numerischer Wert. </li>
    <li>Passwort: Einfache Zeichenkette. </li>
    <li>Telfonnr.: Einfache Zeichenkette. </li>
    <li>Time: Uhrzeit im Format hh:mm. </li>
    <li>URL: Einfache Zeichenkette. </li>
    <li>Week: Kalenderwoche im Format YYYY-Www, z.B: 2021-W01 für die erste Kalenderwoche im Jahr 2021.</li>
</ul>
<p>
    <strong>Textbox</strong>
    <br>

    Mit dem Feldtyp „Textbox“ kann ein mehrzeiliges Textfeld bzw. eine Textarea definiert werden. Unter „Weitere
    Optionen“ können für die Textbox ein Platzhalterwert, eine maximale Länge sowie die Anzahl an Zeilen festgelegt
    werden, welche für das Element auf der Seite angezeigt werden sollen.
</p>
<p>
    <img alt="ts_forms_textbox.PNG" src="https://bitbucket.org/repo/z8zjexy/images/2364743595-ts_forms_textbox.PNG">
</p>
<p>
    <strong>Dropdown</strong>
    <br>

    Mit dem Formularfeld „Dropdown“ kann ein Dropdown-Menü definiert werden, aus welchem der*die Benutzer*in eine Option
    auswählen kann. Unter dem Bereich „Weitere Optionen“ kann für ein Dropdown-Element über dem Punkt „Anzahl der
    sichtbaren Elemente“ festgelegt werden, wie viele der definierten Optionen für den Benuzter sichtbar sein sollen.
</p>
<p>
    <img alt="ts_forms_dropdown.PNG" src="https://bitbucket.org/repo/z8zjexy/images/773127952-ts_forms_dropdown.PNG">
</p>
<p>Über dem Punkt „Benutzer kann eigene Einträge hinzufügen“ kann für das Dropdown-Element festgelegt werden, ob es für
    die Benutzer*innen möglich sein soll, eigene wählbare Optionen dem Element hinzufügen. Dazu muss zusätzlich für das
    Formular die Option „Alle Formulareingaben behalten“ aktiviert werden. </p>
<p>
    <img alt="ts_forms_dropdown_eigener_eintrag.png"
        src="https://bitbucket.org/repo/z8zjexy/images/3447997500-ts_forms_dropdown_eigener_eintrag.png">
</p>
<p>Außerdem kann über dem Punkt „Multiple“ festgelegt werden, ob im Dropdown-Element mehrere Optionen auswählbar sein
    können. </p>
<p>
    <img alt="ts_forms_dropdown_multiple.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/2387242619-ts_forms_dropdown_multiple.PNG">
</p>
<p>
    <strong>Radio-Button</strong>
    <br>

    Mit dem Formularfeld „Radio-Button“ kann eine Gruppe an Buttons zur Auswahl einer Option definiert werden. Für jeden
    Button kann hierbei im Bereich „Radio-Buttons“ mit „Label“ eine Beschriftung sowie mit „Value“ ein Wert festgelegt
    werden. Über den türkisen Button „Hinzufügen“ bzw. dem roten „-“-Button kann ein weiterer Radio-Button ergänzt oder
    der entsprechende Button wieder aus der Grupppe entfernt werden.
    <br>

    Über den grauen „+“-Button können weitere Einstellungen für die Gruppe an Radio-Buttons angezeigt werden. Neben
    CSS-Klassen kann für jeden Button separat angegeben werden, ob dieser das Attribut „Disabled“ erhalten soll, d.h. ob
    dieser Radio-Button überhaupt auswählbar sein soll. Zusätzlich kann hier für einen Radio-Button festgelgegt werden,
    dass dieser vorausgewählt sein soll, sofern die Option „Einen Radio-Button vorauswählen“ ausgewählt wurde.
    <br>

    Unter „Weitere Optionen“ kann außerdem die Anordnung der Radio-Buttons ausgewählt werden. Standardmäßig werden die
    Buttons einer Gruppe untereinander angeordnet. Wurde die Option „Inline“ ausgewählt, werden die Radio-Buttons
    nebeneinander dargestellt.
</p>
<p>
    <img alt="ts_forms_radio_buttons.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/3997132533-ts_forms_radio_buttons.PNG">
</p>
<p>
    <strong>Checkbox</strong>
    <br>

    Mit dem Formularfeld „Checkbox“ kann eine einzelne Checkbox definiert werden. Soll eine Checkbox-Liste erzeugt
    werden, muss jedes Checkbox-Element der Liste separat als Feld erstellt werden. Die einzelnen Elemente der
    Checkbox-Liste werden standardmäßig untereinander angezeigt. Sollen die Elemente nebeneinander dargestellt werden,
    müssen die einzelnen Checkbox-Felder einerseits in der Sortierung direkt untereinander folgen und es muss
    andererseits für jedes Feld auch die „Inline“-Funktion ausgewählt werden.
</p>
<p>
    <img alt="ts_forms_checkbox.PNG" src="https://bitbucket.org/repo/z8zjexy/images/3711681762-ts_forms_checkbox.PNG">
</p>
<p>
    <strong>Slider</strong>
    <br>

    Beim Erstellen eines Slider-Elements können unter „Min“ die Unter- und unter „Max“ die Obergrenze festgelegt werden.
    Über „Step“ kann die Schrittgröße beim Schieben des Reglers für das Slider-Element eingestellt werden. Für diese
    drei Attribute können neben ganzen Zahlen auch Kommazahlen genutzt werden, welche in der Form „X,Y“ oder „X.Y“
    angegeben werden können.
    <br>

    Unter dem Punkt „Weitere Optionen“ kann mit dem Attribut „Value“ zudem der Startwert für das Slider-Element bestimmt
    werden, wobei hier auch wieder Kommazahlen möglich sind. Grundsätzlich sollte beim Erstellen eines Slider-Elements
    möglichst immer die „Tooltip“-Option ausgewählt werden. Diese Option fügt dem Slider ein kleines Fenster oberhalb
    des Cursors hinzu, welches dem*der Benutzer*in den aktuell ausgewählten Wert anzeigt. Außerdem kann für die
    Slider-Elemente über die Optionen ein Farbschema ausgewählt werden. Zur Auswahl stehen hierbei die Farbschemata
    „Kein“ (Default-Wert), „Ampel Rot-Gelb-Grün“ und „Ampel Grün-Gelb-Rot“:
</p>
<p>
    <img alt="Slider.PNG" src="https://bitbucket.org/repo/z8zjexy/images/2268907944-Slider.PNG">
</p>
<p>Anstelle von numerischen Werten können für die Slider auch textuelle Repräsentationen im Tooltip ausgegeben werden.
    Dazu muss einerseits die Tooltip-Funktion aktiv sein, andererseits muss in das Textfeld unter „Tooltip-Text
    Funktion“ ein Skript folgender Form eingefügt werden: </p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span class="k">if</span>
                                            <span class="p">(</span>
                                            <span class="nx">value</span>
                                            <span class="o">&gt;=</span>
                                            <span class="mi">0</span>
                                            <span class="o">&amp;&amp;</span>
                                            <span class="nx">value</span>
                                            <span class="o">&lt;=</span>
                                            <span class="mi">33</span>
                                            <span class="p">)</span>
                                            <span class="p">{</span>
                                            <span class="k">return</span>
                                            <span class="s2">&quot;klein&quot;</span>
                                            <span class="p">;</span>
                                            <span class="p">}</span>
                                            <span class="k">else</span>
                                            <span class="k">if</span>
                                            <span class="p">(</span>
                                            <span class="nx">value</span>
                                            <span class="o">&gt;</span>
                                            <span class="mi">33</span>
                                            <span class="o">&amp;&amp;</span>
                                            <span class="nx">value</span>
                                            <span class="o">&lt;=</span>
                                            <span class="mi">66</span>
                                            <span class="p">)</span>
                                            <span class="p">{</span>
                                            <span class="k">return</span>
                                            <span class="s2">&quot;mittel&quot;</span>
                                            <span class="p">;</span>
                                            <span class="p">}</span>
                                            <span class="k">else</span>
                                            <span class="p">{</span>
                                            <span class="k">return</span>
                                            <span class="s2">&quot;groß&quot;</span>
                                            <span class="p">;</span>
                                            <span class="p">}</span>
                                        </pre>
</div>

<p>
    Im Skript kann mit einer Fallunterscheidung mittels if/else if/else-Anweisungen gearbeitet werden. Der numerische
    Wert wird durch
    <code>value</code>
    repräsentiert, die textuelle Repräsentation wird mit
    <code>return</code>
    zurückgegeben. Das obige Beispiel-Skript gibt für Werte zwischen 0 und 33 das Wort „klein“, für Werte zwischen 34
    und 66 „mittel“ und für jeden Wert über 66 das Wort „groß“ im Tooltip des Sliders aus.
</p>
<p>
    <strong>Text</strong>
    <br>

    Mit dem Feldtyp „Text“ können Textelemente definiert für ein Formular definiert werden, bspw. als ergänzender
    Beschreibungstext oder Überschrift zwischen zwei Feldern. Unter dem Punkt „Weitere Optionen“ kann hier einerseits
    die Position des Texts („linksbündig“, „zentriert“ und „rechtsbündig“) festgelegt werden, andererseits kann hier
    auch das HTML-Element für diesen Feldtyp bestimmt werden. Es stehen folgende HTML-Elemente für den Typ „Text“ zur
    Verfügung:
</p>
<ul>
    <li>
        Paragraph (
        <code>&lt;p&gt;</code>
        )
    </li>
    <li>
        Überschriften (
        <code>&lt;h1&gt;</code>
        -
        <code>&lt;h6&gt;</code>
        )
    </li>
    <li>
        Kleine Schrift (
        <code>&lt;small&gt;</code>
        )
    </li>
    <li>
        Fettgedruckte Schrift (
        <code>&lt;b&gt;</code>
        )
    </li>
    <li>
        Kursive Schrift (
        <code>&lt;i&gt;</code>
        )
    </li>
    <li>
        Text in
        <code>&lt;span&gt;</code>
    </li>
</ul>
<p>
    <img alt="tsforms_text.JPG" src="https://bitbucket.org/repo/z8zjexy/images/3228901921-tsforms_text.JPG">
</p>
<p>
    <strong>Skala</strong>
    <br>

    Mit dem Feldtyp „Skala“ kann eine Skala mit mehreren Antwortmöglichkeiten sowie mit Labeln für Unter- und Obergrenze
    definiert werden. Unter „Optionen“ können mit „Label links“ und „Label rechts“ die Unter- bzw. die Obergrenze für
    diese Reihe der Skala definiert werden. Über den Punkt „Unterüberschrift“ kann zum Beispiel in Form einer Frage eine
    Unterüberschrift angegeben werden. Jede weitere Reihe der Skala unterhalb eines Eintrags mit Unterüberschrift wird
    dieser zugeordnet, sofern für diese selbst keine definiert wurde. Folgende Angaben
    <br>
    <img alt="tsforms_skala_create.JPG"
        src="https://bitbucket.org/repo/z8zjexy/images/2578902930-tsforms_skala_create.JPG">
</p>
<p>würden bspw. folgende Skala generieren: </p>
<p>
    <img alt="tsforms_skala.JPG" src="https://bitbucket.org/repo/z8zjexy/images/2893721367-tsforms_skala.JPG">
</p>
<p>Im Bereich „Weitere Optionen“ können für die Überschrift, die Unterüberschriften und die Labels zum einen die
    Position („linksbündig“, „zentriert“ und „rechtsbündig“) und zum anderen das entsprechende HTML-Element festgelegt
    werden. Es stehen dabei folgende HTML-Elemente zur Verfügung: </p>
<ul>
    <li>
        Paragraph (
        <code>&lt;p&gt;</code>
        )
    </li>
    <li>
        Überschriften (
        <code>&lt;h1&gt;</code>
        -
        <code>&lt;h6&gt;</code>
        )
    </li>
    <li>
        Kleine Schrift (
        <code>&lt;small&gt;</code>
        )
    </li>
    <li>
        Fettgedruckte Schrift (
        <code>&lt;b&gt;</code>
        )
    </li>
    <li>
        Kursive Schrift (
        <code>&lt;i&gt;</code>
        )
    </li>
    <li>
        Text in
        <code>&lt;span&gt;</code>
    </li>
</ul>
<p>Des Weiteren kann unter „Weitere Optionen“ über dem Punkt „Required“ festgelegt werden, ob die Skala zwingend
    ausgefüllt werden muss, bevor die Seite verlassen werden kann. </p>
<p>Hinweis: Der Feldtyp „Skala“ ist nicht für MultiForms geeignet. </p>
<p>
    <strong>Matrix</strong>
    <br>

    Mit dem Feldtyp „Matrix“ lässt sich eine Tabelle in Form einer Antwortmatrix erstellen, welche die Zusammenfassung
    verschiedener themenbezogener Fragegruppen ermöglicht. Unter „Anzahl der Auswahlfelder“ können mindestens zwei und
    maximal elf Radio-Buttons festgelegt werden, welche dem*der Benutzer*in bei der Beantwortung der Fragen zur Auswahl
    stehen. Unter „Überschriften“ werden schließlich entsprechend der zuvor eingestellten Anzahl an Auswahlfeldern
    Reihen an Text/Value-Paaren aufgeführt. Für jedes Paar kann mit „Text“ die übergeordnete Überschrift und mit „Value“
    der hinterlegte für das Auswahlfeld bestimmt werden. Über dem Punkt „Fragen“ können schließelich eine oder mehrere
    Fragen, welche als Reihe in der Matrix dargestellt werden, hinterlegt werden. Folgende Angaben
    <br>
    <img alt="tsforms_matrix1_2.PNG" src="https://bitbucket.org/repo/z8zjexy/images/2522783313-tsforms_matrix1_2.PNG">
</p>
<p>würden bspw. folgende Matrix generieren: </p>
<p>
    <img alt="tsforms_matrix2.PNG" src="https://bitbucket.org/repo/z8zjexy/images/2923542436-tsforms_matrix2.PNG">
</p>
<p>
    Zusätzlich kann optional für jede Frage der Matrix ein Meta-Wert hinterlegt werden. Diese Meta-Werte können bei der
    Nutzung des Shortcodes
    <code>[coach_output_gbu_chart]</code>
    (siehe Abschnitt
    <a data-is-external-link="true" href="#markdown-header-visualisierung-der-werte-der-gefahrdungsbeurteilung-gbu"
        rel="nofollow">„Visualisierung der Werte der Gefährdungsbeurteilung (GBU)“</a>
    für weitere Informationen) eingesetzt werden, um die Fragen innerhalb der Matrix einzelnen Subskalen zuzuordnen.
</p>
<p>Unter „Weitere Optionen“ können für den übergeordneten Titel der Matrix, die einzelnen Überschriften sowie für den
    Titel für die Fragenspalte einerseits die Position („linksbündig“, „zentriert“ oder „rechtsbündig“) und andererseits
    das HTML-Element festgelegt werden. Es stehen dabei folgende Elemente zur Verfügung: </p>
<ul>
    <li>
        Paragraph (
        <code>&lt;p&gt;</code>
        )
    </li>
    <li>
        Überschriften (
        <code>&lt;h1&gt;</code>
        -
        <code>&lt;h6&gt;</code>
        )
    </li>
    <li>
        Kleine Schrift (
        <code>&lt;small&gt;</code>
        )
    </li>
    <li>
        Fettgedruckte Schrift (
        <code>&lt;b&gt;</code>
        )
    </li>
    <li>
        Kursive Schrift (
        <code>&lt;i&gt;</code>
        )
    </li>
    <li>
        Text in
        <code>&lt;span&gt;</code>
    </li>
</ul>
<p>
    Zusätzlich können für den Titel, die einzelnen Überschriften sowie für den Titel für die Fragespalte auch
    CSS-Klassen anzugeben. Zur besseren Darstellung wird es empfohlen, die Klasse „hyphens-auto“ zu nutzen, damit
    längere Worte in den Titeln bzw. Überschriften abhängig von der Breite der Spalte umgebrochen werden.
    <br>

    Außerdem ist es auch möglich, dass die Überschriften in der Matrix auch um 90° gedreht werden können. Dazu muss der
    Haken bei der Option „Überschriften um 90° gedreht“ gesetzt werden.
</p>
<p>
    <img alt="matrix_ueberschrift_quer_backend.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/108913064-matrix_ueberschrift_quer_backend.PNG">
</p>
<p>Damit die um 90° gedrehten Überschriften korrekt dargestellt werden, muss im Eingabefeld „Höhe der 1. Tabellenzeile
    in px“ noch die Höhe der 1. Tabellenzeile in ganzen Pixeln festgelegt werden. Dieser Wert muss anhand der
    individuellen Überschriften angepasst werden. </p>
<p>
    <img alt="matrix_ueberschrift_quer.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/2610889596-matrix_ueberschrift_quer.PNG">
</p>
<p>Bei Bedarf können die Überschriften der Matrix zusätzlich auch unterhalb aller Fragen angezeigt werden. Dazu muss die
    Checkbox „Überschriften zusätzlich unter der Matrix anzeigen“ aktiviert werden. </p>
<p>
    <img alt="matrix_ueberschrift_footer.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/1447932706-matrix_ueberschrift_footer.PNG">
</p>
<p>Hinweis: Der Feldtyp „Matrix“ ist nicht für MultiForms geeignet. </p>
<p>
    <strong>Upload</strong>
    <br>

    Mit dem Feldtyp „Upload“ kann ein Datei-Upload auf der Seite eingebunden werden. Im Bereich Weitere Optionen“ kann
    dabei der gewünschte Datei-Typ für den Upload festgelegt werden. Es stehen folgende Datei-Typen für den Feldtyp
    Upload“ zur Auswahl:
</p>
<ul>
    <li>Alles </li>
    <li>Audio </li>
    <li>Video </li>
    <li>Bild </li>
</ul>
<p>
    Die mit dem Feldtyp „Upload“ hochgeladenen Dateien können im Backend in unter dem Punkt „Medien“ in der
    „Medienübersicht“ bzw. in der „Mediathek“ eingesehen werden. Im Frontend kann eine Übersicht an Dateien für ein
    Formular mit dem Shortcode
    <code>[tspv2_media_grid]</code>
    (siehe Abschnitt
    <a data-is-external-link="true" href="#markdown-header-ausgabe-von-dateien" rel="nofollow">Ausgabe von Dateien</a>
    für weitere Beschreibungen) angezeigt werden.
</p>
<p>
    <img alt="ts_forms_upload.PNG" src="https://bitbucket.org/repo/z8zjexy/images/2021882043-ts_forms_upload.PNG">
</p>
<h4 id="markdown-header-ausgabe-von-formularinhalten">Ausgabe von Formularinhalten</h4>
<p>
    Zur Ausgabe von Formular-Inhalten kann der Shortcode
    <code>[coach_output_format_data id='tsformid']</code>
    genutzt werden. Der Shortcode unterstützt hierbei drei verschiedene Möglichkeiten zur Darstellung des Inhalts,
    welche über Parameter festgelegt werden können:
    <br>
    <strong>text="1"</strong>
</p>
<p>
    Mit diesem Parameter wird der Inhalt des angegebenen Formulars in einem
    <code>&lt;p&gt;</code>
    -Tag auf der Seite ausgegeben. Der Shortcode
    <code>[coach_output_format_data id='tsformid' text="1"]</code>
    erzeugt dabei eine Ausgabe folgender Art:
</p>
<p>
    <img alt="coach_output_format_data_text.JPG"
        src="https://bitbucket.org/repo/z8zjexy/images/2194806737-coach_output_format_data_text.JPG">
</p>
<p>
    <strong>list="1"</strong>
</p>
<p>
    Mit diesem Parameter wird der Inhalt des angegebenen Formulars in einer ungeordneten Liste (
    <code>&lt;ul&gt;</code>
    ) auf der Seite ausgegeben. Diese Variante sollte vor allem für die Darstellung von Checkbox-Liste genutzt werden.
    Der Shortcode
    <code>[coach_output_format_data id='tsformid' list="1"]</code>
    erzeugt dabei eine Ausgabe folgender Art:
</p>
<p>
    <img alt="coach_output_format_data_list.JPG"
        src="https://bitbucket.org/repo/z8zjexy/images/3582299286-coach_output_format_data_list.JPG">
</p>
<p>
    <strong>table="1"</strong>
</p>
<p>
    Mit diesem Parameter wird der Inhalt des angegebenen Formulars als Tabelle (
    <code>&lt;table&gt;</code>
    ) dargestellt. Diese Variante der Darstellung wird standardmäßig und automatisch für MultiForms ausgewählt. Der
    Shortcode
    <code>[coach_output_format_data id='tsformid' table="1"]</code>
    erzeugt dabei eine Ausgabe folgender Art:
</p>
<p>
    <img alt="coach_output_format_data_table.JPG"
        src="https://bitbucket.org/repo/z8zjexy/images/1792896540-coach_output_format_data_table.JPG">
</p>
<p>
    Zusätzlich kann mit dem (optionalen) Parameter
    <code>title</code>
    ein oder mehrere Titel für die Ausgabe festgelegt werden. Bei mehreren Titeln müssen diese jeweils durch „|“
    getrennt werden. Zum Beispiel würde der Shortcode
    <code>[coach_output_format_data id='tsformid' table="1" title="Spalte_1|Spalte_2|Spalte_3"]</code>
    folgende Ausgabe erzeugen:
</p>
<p>
    <img alt="coach_output_format_data_table_title.JPG"
        src="https://bitbucket.org/repo/z8zjexy/images/2406897517-coach_output_format_data_table_title.JPG">
</p>
<p>
    Außerdem kann mit dem (optionalen) Parameter
    <code>placeholder</code>
    auch ein Platzhalter angegeben werden, welcher angezeigt wird, wenn die Benutzer*innen das mit
    <code>id</code>
    angegebene Formular nicht ausgefüllt haben.
</p>
<h4 id="markdown-header-ausgabe-von-dateien">Ausgabe von Dateien</h4>
<p>
    Mit dem Shortcode
    <code>[tspv2_media_grid uploadfieldid="number" view="string"]</code>
    kann eine Übersicht an Dateien angezeigt werden, welche über ein ausgewähltes Formular hochgeladen wurden.
    <br>

    Mittels des Parameters
    <code>uploadfieldid</code>
    muss die ID des Upload-Felds für das Formular für den Datei-Upload angegeben werden. Der Parameter
    <code>view</code>
    bestimmt die aktuelle Sicht für das Media-Grid. Es stehen folgende Werte für diesen Parameter zur Verfügung:
</p>
<ul>
    <li>
        <code>view="my"</code>
        : Sicht für die/den aktuelle/n Benutzer*in, in welcher nur Dateien angezeigt werden, welche von dieser/m
        hochgeladen wurden.
    </li>
    <li>
        <code>view="all"</code>
        : Übersicht über alle Dateien, die von Benutzer*innen über das angegebene Formular hochgeladen wurden.
    </li>
    <li>
        <code>view="boss"</code>
        : Sicht für die Führungskraft einer Firma. Der Führungskraft werden die hochgeladenen Dateien von allen
        Benutzer*innen angezeigt, welche als Mitarbeiter der Firma der Führungskraft zugeordnet wurden.
    </li>
    <li>
        <code>view="kAdmin"</code>
        : Sicht für einen Krankenkassenadmin. In dieser Sicht werden alle hochgeladenen Dateien aller Benutzer*innen von
        Firmen angezeigt, in denen diese/r Benutzer*in als Krankenkassenadmin zugeordnet wurde.
    </li>
</ul>
<p>
    Außerdem bietet der Shortcode noch weitere optionale Parameter an, mit denen weitere Einstellungen für das
    Media-Grid vorgenommen werden können: Mit dem Parameter
    <code>projectfieldid="number"</code>
    kann die Feld-ID des Projekt-Dropdown angegeben werden, sodass die hochgeladenen Dateien einzelnen Projekten im
    Media-Grid zugeordnet werden können. Zusätzlich können die Parameter
    <code>titlefieldid="number</code>
    für das Titel-Feld sowie
    <code>descfieldid="number"</code>
    für das Beschreibungs-Feld des Formulars genutzt werden, sodass weitere Beschreibungen für die einzelnen Dateien
    angezeigt werden können. Mit dem Parameter
    <code>defaultimage="string"</code>
    kann der relative Pfad für das Standardbild angegeben werden. Über dem Parameter
    <code>latest="number"</code>
    kann schließlich die Anzahl der anzuzeigenden Dateien durch einen festen Wert begrenzt werden.
</p>
<p>
    Nachfolgend ein kleines Beispiel, welches die Nutzung des Shortcodes verdeutlichen soll:
    <br>

    Zunächst muss ein Formular wie folgendes für den Datei-Upload erstellt werden:
</p>
<p>
    <img alt="dateiupload2.PNG" src="https://bitbucket.org/repo/z8zjexy/images/3140915699-dateiupload2.PNG">
</p>
<p>Es wurden hierbei als Felder ein Dropdown-Feld (ID: 3164), ein Textfeld (ID: 3165), eine Textbox (ID: 3166) sowie ein
    Upload-Feld (ID: 3167) gewählt. Außerdem wurden die beiden Optionen „Formulareingabe manuell absenden“ sowie „Alle
    Formulareingaben behalten“ ausgewählt. Letztere Option muss ausgewählt sein, damit die Dateien der Benutzer*innen
    bei mehrfacher Nutzung nicht überschrieben werden. Sobald das Formular für den Upload erstellt wurde, muss der
    Shortcode für das Media-Grid an der gewünschten Stelle wie folgt eingefügt werden: </p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            [tspv2_media_grid uploadfieldid=&#39;3167&#39; projectfieldid=&quot;3164&quot; titlefieldid=&quot;3165&quot; descfieldid=&quot;3166&quot; view=&quot;all&quot; defaultimage=&quot;&quot;]
                                        </pre>
</div>

<p>Die notwendigen Feld-IDs für diesen Shortcode können, wie im obigen Bild dargestellt, in der Übersicht zum
    entsprechenden Formular eingesehen werden. </p>
<h4 id="markdown-header-ex-import-von-formularen">Ex-/Import von Formularen</h4>
<p>
    In der Übersicht über alle erstellten Formulare, welche im Backend über „Trainingssystem-&gt;Formulare“ erreichbar
    ist, besteht die Möglichkeit zum Ex- bzw. Import von Formularen.
    <br>

    Für den Export müssen in der Übersicht bei den zu exportierenden Formularen der jeweilige Haken gesetzt werden,
    anschließend muss über den Button „Formular(e) exportieren“ der Export gestartet werden. Der Export erfolgt in Form
    einer JSON-Datei bzw. im Falle von mehreren Formularen als ZIP-Datei, welche mehrere JSON-Dateien enthält.
    Alternativ kann auch innerhalb der Bearbeitungs-Seite eines Formulars dieses ebenfalls exportiert werden.
    <br>

    Für den Import muss in der Übersicht zunächst der Button „Formular(e) importieren“ geklickt werden. Im darauf sich
    öffnenden Dialog-Fenster kann nun ein oder mehrere Formulare als JSON-Datei über das Upload-Feld hochgeladen werden
    und die Formulare werden der aktuellen Plattform hinzugefügt.
</p>
<h4 id="markdown-header-duplizieren-von-formularen">Duplizieren von Formularen</h4>
<p>Ist eine exakte Kopie oder eine Variante eines Formular notwendig, muss dieses nicht unbedingt von Grund auf neu
    angelegt werden, sondern es kann die Funktion zum Duplizieren eines Formulars genutzt werden. Dazu muss auf der
    Seite zum Bearbeiten eines Formulars lediglich der Button „Formular duplizieren“ angeklickt werden und eine Kopie
    des aktuellen Formulars wird erstellt. </p>
<h4 id="markdown-header-manuelles-absenden-von-formularinhalten">Manuelles Absenden von Formularinhalten</h4>
<p>
    Neben der zuvor beschriebenen Möglichkeit zum manuellem Absenden von einzelnen Formularen kann mittels des
    Shortcodes
    <code>[ts_forms_submit text="string" link="string" css="string"]</code>
    auch ein Button auf einer Seite eingebunden werden, mit dem die Inhalte aller Formulare auf dieser Seite manuell
    abgesendet werden können.
    <br>

    Der Shortcode selbst hat einige optionale Parameter, mit denen weitere Einstellungen am Button vorgenommen werden
    können: Mit dem Parameter
    <code>text</code>
    kann eine Beschriftung für den Button angegeben werden. Wird dieser Parameter weggelassen, wird standardmäßig die
    Beschriftung „Absenden“ genutzt. Über dem Parameter
    <code>link</code>
    (Default-Wert: leer) kann ein Link angegeben werden, zu dem weitergeleitet werden soll, nachdem die Inhalte aller
    Formulare abgesendet wurden. Mit
    <code>css</code>
    (Default-Wert: leer) können weitere CSS-Klassen für den Button angegeben werden. Sollen mehrere CSS-Klassen genutzt
    werden, müssen diese durch Leerzeichen getrennt werden.
    <br>

    Außerdem kann mit dem Parameter
    <code>extendedfeedback</code>
    erweitertes Feedback beim Absenden für die Benutzer*innnen eingebunden werden. Dazu muss der Parameter auf den Wert
    „true“ gesetzt werden, standardmäßig ist diese Funktionalität allerdings nicht eingeschaltet. Des Weiteren können
    mit den Parametern
    <code>extendedfeedbacktext</code>
    (Default-Wert: „Ihre Eingaben wurden erfolgreich gespeichert.“) bzw.
    <code>extendedfeedbacktext_fail</code>
    (Default-Wert: „Ihre Eingaben konnten nicht gespeichert werden. Bitte versuchen Sie es erneut.“) individuelle Texte
    für das Feedback bei erfolgreichen bzw. fehlgeschlagenen Absenden der Inhalte angegeben werden.
</p>
<h2 id="markdown-header-ubungen">Übungen</h2>
<p>
    Im Backend des Trainingssystem können über „Trainingssystem-&gt;Übungen“ Übungen definiert werden, welche über den
    Shortcode
    <code>[ts_exercise]</code>
    in jede beliebige Seite eingebunden werden können. Nach Aufruf des Menüpunkts „Übungen“ wird zunächst eine Übersicht
    über alle bisher erstellten Übungen zusammen mit der jeweiligen ID, dem Titel der Übung, der Anzahl an
    Favorisierungen sowie dem Veröffentlichungsdatum angezeigt.
    <br>

    Über den Button „Neue Übung“ kann nun eine neue Übung im System angelegt werden. Zunächst muss hier ein Titel
    gewählt werden, welcher zudem als Überschrift in der späteren Übung dient. Im darauf folgenden Bildschirm kann nun
    der Inhalt für die Übung definiert werden. Wie bei einer normalen Seite können hier beliebige HTML-Elemente wie
    beispielsweise Paragraphen (
    <code>&lt;p&gt;</code>
    ) oder Überschriften (
    <code>&lt;h1&gt;</code>
    bis
    <code>&lt;h6&gt;</code>
    ), Medieninhalte wie Audio- oder Video-Dateien oder auch Elemente des Trainingssystem wie
    <a data-is-external-link="true" href="#markdown-header-formulare" rel="nofollow">Formulare</a>
    ,
    <a data-is-external-link="true" href="#markdown-header-akkordeon" rel="nofollow">Akkordeons</a>
    oder
    <a data-is-external-link="true" href="#markdown-header-timer" rel="nofollow">Timer</a>
    zur Definition des Inhalts der Übungen genutzt werden.
</p>
<p>
    <img alt="ubung_erstellung.PNG" src="https://bitbucket.org/repo/z8zjexy/images/697752884-ubung_erstellung.PNG">
</p>
<p>Des Weiteren kann unter dem Reiter „Übungs Optionen“ der Shortcode zum Einbinden der Übung durch Klick auf den
    entsprechenden Button in die Zwischenablage kopiert werden. Zusätzlich kann hier eingesehen, wie oft diese Übung
    bereits durch Benutzer*innen als Favorit markiert wurde. </p>
<p>
    <img alt="ubung_optionen.PNG" src="https://bitbucket.org/repo/z8zjexy/images/1387788222-ubung_optionen.PNG">
</p>
<p>
    Über den Button „Daten abrufen“ im Bereich „Übungs wird verwendet in:“ kann zudem abgerufen werden, in welche Seiten
    der Plattform die aktuell betrachtete Übung eingesetzt wurde.
    <br>

    Wurde eine Übung mittels des Shortcodes
    <code>[ts_exercise]</code>
    in eine Seite eingebunden, wird der so eben definierte Inhalt in einem Kasten dargestellt. Im unteren Bereich des
    Kastens ist ein Button „Zu Favoriten hinzufügen“ verfügbar, mit dem die entsprechende Übung als Favorit markiert und
    damit auf der Seite
    <a data-is-external-link="true" href="#markdown-header-lieblingsubungen" rel="nofollow">„Lieblingsübungen“</a>
    auf Wunsch abgerufen werden kann. Über den Button „Aus Favoriten entfernen“ kann die Markierung als Favorit für
    diese Übung wieder rückgängig gemacht werden.
</p>
<p>
    <img alt="demo_uebung.PNG" src="https://bitbucket.org/repo/z8zjexy/images/2229478258-demo_uebung.PNG">
</p>
<h2 id="markdown-header-akkordeon">Akkordeon</h2>
<p>Um Inhalte nicht unmittelbar anzuzeigen, sondern diese nutzerseitig ausklappbar zu machen, ist ein sogenanntes
    Akkordeon vorgesehen. Ein einleitender Shortcode kann mit einem Titel versehen werden. Zwischen diesem und einem
    schließenden Shortcode kann ein beliebiger Inhalt eingefügt werden. </p>
<p></p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            [accordionmd title=&quot;hier steht ein Titel&quot;]
                                            <span class="p">&lt;</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>

                                            Hier steht ein Satz.
                                            <span class="p">&lt;/</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>

                                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                                            <span class="p">&lt;/</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>

                                            [/accordionmd]
                                        </pre>
</div>

Daneben steht eine Variante mit kleinerem Titel zur Verfügung:
<p></p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            [accordionmd title=&quot;hier steht ein Titel&quot; title-size=&quot;small&quot;]
                                        </pre>
</div>

<p>
    <img alt="accordion.PNG" src="https://bitbucket.org/repo/z8zjexy/images/2608625697-accordion.PNG">
</p>
<h2 id="markdown-header-radio">Radio</h2>
<p>Ein weiteres Element, um Inhalte nutzerseitig anzuzeigen, ermöglichen sogenannte "Radio-Buttons".
    Um Beispielsweise zwei verschiedene Optionen mit jeweils einem Text zu erzeugen, ist der folgenden Shortcode zu
    integrieren: </p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            [radiohn name=test name2=testzwei wert=77]
                                        </pre>
</div>

<p>Die dazugehörigen Texte sind in eine entsprechende Struktur zu bringen: </p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">id</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;test77&quot;</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;textfeld77 info&quot;</span>
                                            <span class="p">&gt;</span>
                                            hier wird test ausgeklappt 
                                            <span class="p">&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">id</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;testzwei77&quot;</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;textfeld77 info&quot;</span>
                                            <span class="p">&gt;</span>
                                            hier wird testzwei ausgeklappt
                                            <span class="p">&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                        </pre>
</div>

<p>
    Um den jeweiligen Text mit dem entsprechenden "Radio-Button" in Verbindung zu bringen, wird ein Wert (im Beispiel
    77) im Shortcode verwendet, der dann an die Ids (im Beispiel test77 und testzwei77) und die Klassenbezeichnungen (im
    Beispiel textfeld77) zu hängen ist. Für jede weitere Konstruktion in dieser Form auf einer Seite sind andere Werte
    zu verwenden, da Ids nicht mehrfach auf einer Seite vorkommen sollten. Optional können weitere Klassen hinzugefügt
    werden, beispielsweise
    <code>info</code>
    , um den Inhalt farbig hervorzuheben.
</p>
<p>
    <img alt="radiohn_beispiel.PNG" src="https://bitbucket.org/repo/z8zjexy/images/2477295596-radiohn_beispiel.PNG">
</p>
<h2 id="markdown-header-quiz">Quiz</h2>
<p>Dieses Element fügt ein einfaches Quiz hinzu. Die korrekte Antwort bekommt die Klasse „info-radio“, die falschen
    Antworten die Klasse „exer-radio“.
    Wird das Plugin auch für andere Ausklapp-Elemente benutzt, die eine gewisse Länge nicht übersteigen, wird die Klasse
    info-radio verwendet. </p>
<p>Jede Antwort bekommt im Shortcode eine Id, die dann in der entsprechenden HTML-Struktur auch verwendet wird. Das
    ganze Quiz hat einheitliche Klassenbezeichnungen. Ein weiteres Quiz auf einer Seite muss hier andere Bezeichnungen
    verwenden.
    Der folgende Shortcode erzeugt die "Radio-Buttons": </p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            [quizhn antwort=&quot;hier steht eine antwort&quot; id=antwort1 class=klasse1]
                                            [quizhn antwort=&quot;hier steht eine weitere antwort&quot; id=antwort2 class=klasse1]
                                            [quizhn antwort=&quot;antwort drei&quot; id=antwort3 class=klasse1]
                                            [quizhn antwort=&quot;antwort vier&quot; id=antwort4 class=klasse1]
                                        </pre>
</div>

<p>Dazu ist die folgende Struktur zu integrieren: </p>
<p></p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">id</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;antwort1&quot;</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;klasse1 exer-radio&quot;</span>
                                            <span class="p">&gt;&lt;</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                            Falsch!
                                            <span class="p">&lt;/</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">id</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;antwort2&quot;</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;klasse1 info-radio&quot;</span>
                                            <span class="p">&gt;&lt;</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                            Richtig!
                                            <span class="p">&lt;/</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">id</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;antwort3&quot;</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;klasse1 exer-radio&quot;</span>
                                            <span class="p">&gt;&lt;</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                            Falsch!
                                            <span class="p">&lt;/</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">id</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;antwort4&quot;</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;klasse1 exer-radio&quot;</span>
                                            <span class="p">&gt;&lt;</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                            Falsch!
                                            <span class="p">&lt;/</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                        </pre>
</div>

Das Quiz erlaubt im Grunde die gleiche Funktionalität wie das "Radio". Die Antworten werden hier jedoch untereinander
dargestellt und können aus mehreren Wörtern bestehen.
<p></p>
<p>
    <img alt="quizhn_beispiel.PNG" src="https://bitbucket.org/repo/z8zjexy/images/2258830265-quizhn_beispiel.PNG">
</p>
<h2 id="markdown-header-radio-buttons-zurucksetzen">Radio-Buttons zurücksetzen</h2>
<p>
    Alle drei Varianten von Radio-Buttons (ts-forms, radiohn, quizhn) können auch zurückgesetzt werden. Dafür ist der
    Shortcode
    <code>[tspv2_reset_radios type='']</code>
    zu verwenden. Für den Typ "ts-form" wird der Parameter
    <code>ts-form-id=123</code>
    übergeben. Für den Typ "radiohn" ist der der vergebene Wert mit
    <code>wert=123</code>
    einzusetzen. Für den Typ "quizhn" wird die vergebene Klasse mit
    <code>class=123</code>
    übergeben. Außerdem kann die Beschriftung des Buttons über den Parameter
    <code>label='Radios zurücksetzen'</code>
    bestimmt werden. Wird die Beschriftung nicht spezifiziert, wird als Standard "Auswahl aufheben" gesetzt.
</p>
<h2 id="markdown-header-conditional-content">Conditional Content</h2>
<p>
    Um Inhalt abhängig von der Eingabe eines TS-Formulars anzuzeigen, kann der Shortcode
    <code>ts_forms_conditional</code>
    verwendet werden.
</p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span class="k">[ts_forms id=&#39;123&#39;]</span>
                                            <span class="k">[ts_forms_conditional tsformid=&#39;123&#39; value=&#39;1&#39; samepage=&#39;true|false&#39; fieldid=&#39;&#39; formgroup=&#39;&#39; show_on_default=&#39;true|false&#39;]</span>
                                            <span class="na">Dieser Inhalt wird angezeigt wenn der User im Formular 123 den Inhalt 1 eingegeben/angeklickt hat.</span>
                                            <span class="k">[/ts_forms_conditional]</span>
                                        </pre>
</div>
<p></p>
<p>
    Der Shortcode zur Anzeige des Formulars (
    <code>[ts_forms id='123']</code>
    ) ist lediglich notwendig, wenn die Eingabe auf der selben Seite wie die Ausgabe des Conditional Content stehen
    soll. Dies muss nicht zwingend direkt davor sein, irgendwo auf der selben Seite ist ausreichend.
</p>
<p>
    Die Parameter
    <code>tsformid</code>
    muss eine gültige TS-Form-ID sein,
    <code>value</code>
    und der Content (der Inhalt zwischen dem öffnenden und schließenden Shortcode-Tag) darf nicht leer sein.
</p>
<p>
    Die Parameter
    <code>samepage</code>
    ,
    <code>fieldid</code>
    ,
    <code>formgroup</code>
    und
    <code>show_on_default</code>
    sind optional.
    <code>samepage</code>
    kann und sollte bei Verwendung der Ausgabe auf einer anderen Seite als die Eingabe auf false gesetzt werden, um
    unnötigen JavaScript-Code zu vermeiden.
    <code>fieldid</code>
    gibt die ID des Felds an, dessen Formulareingaben auf
    <code>value</code>
    überprüft werden sollen.
    <code>formgroup</code>
    ist für MultiForm-Formulare interessant, damit kann ausgehend vom Start der Indexierung bei 0 der Index der zu
    prüfenden Einträge angegeben werden. Beispielsweise kann hiermit überprüft werden, ob ein*e Benutzer*in mehrere neue
    Zeilen hinzugefügt hat und die Eingabe in der x-ten FormGroup mit
    <code>value</code>
    übereinstimmt. Bei allen Formularfeldern kann ein Standardwert eingegeben werden (z.B. kann ein Slider initial in
    der Mitte bei 50 stehen). Mit dem Attribut
    <code>show_on_default='true'</code>
    kann der Conditional Content also bereits angezeigt werden, wenn der*die Benutzer*in die Eingabe noch nicht
    verändert hat.
</p>
<p>
    Standardwerte sind für
    <code>samepage</code>
    =
    <code>true</code>
    ,
    <code>fieldid</code>
    das in der Sortierreihenfolge 1. Feld, bei
    <code>formgroup</code>
    die letzte Formgroup (trifft nur auf MultiForms zu, ansonsten gibt es immer nur die 1. FormGroup), bei
    <code>show_on_default</code>
    =
    <code>false</code>
    .
</p>
<p>Der Conditional-Shortcode kann außerdem dazu verwendet werden, Slider auszuwerten und je nach Sliderstellung Inhalte
    anzuzeigen. Dazu ist die Angabe einer Range für jeden Inhalt erforderlich. </p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            #!html
                                            <span class="c">&lt;!-- Slider von 0 bis 10: --&gt;</span>

                                            [ts_forms id=&#39;123&#39;]

                                            <span class="c">&lt;!-- Diese Absätze werden je nach Sliderstellung angezeigt: --&gt;</span>

                                            [ts_forms_conditional tsformid=&#39;123&#39; range_min=&#39;0&#39; range_max=&#39;5&#39; samepage=&#39;true]
                                               
                                            <span class="nt">&lt;p&gt;</span>
                                            Hier steht Text von 0 bis 5
                                            <span class="nt">&lt;/p&gt;</span>

                                            [/ts_forms_conditional]

                                            [ts_forms_conditional tsformid=&#39;123&#39; range_min=&#39;6&#39; range_max=&#39;10&#39; samepage=&#39;true]
                                               
                                            <span class="nt">&lt;p&gt;</span>
                                            Hier steht Text von 6 bis 10
                                            <span class="nt">&lt;/p&gt;</span>

                                            [/ts_forms_conditional]
                                        </pre>
</div>

<h3 id="markdown-header-conditional-content-verschachtelung">Conditional Content - Verschachtelung</h3>
<p>
    Der Shortcode
    <code>ts_forms_conditional</code>
    hat noch 3 Aliasse, die aber nach dem selben Prinzip wie o.g. funktionieren, da ein Shortcode mit dem selben Namen
    nicht verschachtelt werden darf:
</p>
<ul>
    <li>
        <p>
            <code>ts_forms_conditional-inner1</code>
        </p>
    </li>
    <li>
        <p>
            <code>ts_forms_conditional-inner2</code>
        </p>
    </li>
    <li>
        <p>
            <code>ts_forms_conditional-inner3</code>
        </p>
    </li>
</ul>
<h2 id="markdown-header-check-tables">Check Tables</h2>
<p>
    Tabellen können mit einer farbigen Markierung nach dem Ampelschema hinterlegt werden, um Themen oder Fragen zu
    bewerten.
    Dazu ist als Grundlage eine Bootstrap-Tabelle mit
    <code>&lt;table class="table"&gt;</code>
    zu empfehlen. Diesem Element werden die Klassen
    <code>check-table</code>
    und beispielsweise
    <code>check-table-rgg</code>
    für rot, gelb, grün (v.l.) hinzugefügt.
</p>
<p>Dieses Element kann erforderlich sein, wenn beispielsweise in der ersten (linken) Tabellenspalte speziellen Themen
    aufgelistet werden und diesen dann in den weiteren Spalten mit einem Schweregrad (rot, gelb, grün) bewertet werden
    sollen. </p>
<p>Beispiel: </p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">table</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;table check-table check-table-rgg&quot;</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">thead</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">tr</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">th</span>
                                            <span class="p">&gt;</span>
                                            Thema
                                            <span class="p">&lt;/</span>
                                            <span class="nt">th</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">th</span>
                                            <span class="p">&gt;</span>
                                            nicht zufrieden
                                            <span class="p">&lt;/</span>
                                            <span class="nt">th</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">th</span>
                                            <span class="p">&gt;</span>
                                            zufrieden
                                            <span class="p">&lt;/</span>
                                            <span class="nt">th</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">th</span>
                                            <span class="p">&gt;</span>
                                            sehr zufrieden
                                            <span class="p">&lt;/</span>
                                            <span class="nt">th</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">tr</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">thead</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">tbody</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">tr</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;</span>
                                            Sind Sie mit ihren Arbeitszeiten zufrieden?
                                            <span class="p">&lt;/</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">tr</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">tr</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;</span>
                                            Wie bewerten Sie XYZ?
                                            <span class="p">&lt;/</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">tr</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">tr</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;</span>
                                            Wie bewerten Sie ABC?
                                            <span class="p">&lt;/</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">td</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">tr</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">tbody</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">table</span>
                                            <span class="p">&gt;</span>
                                        </pre>
</div>

<p>Für alternative Designs, beispielsweise eine andere Farbreihenfolge oder nur zwei Spalten mit rot und grün, muss
    lediglich der Klassenname entsprechend angepasst werden: </p>
<p>
    -ggr (grün, gelb, rot)
    <br>

    -rg (rot, grün)
    <br>

    -gr (grün, rot)
</p>
<p>
    <img alt="checktable1.png" src="https://bitbucket.org/repo/z8zjexy/images/190694746-checktable1.png">
</p>
<p>
    <img alt="checktable2.png" src="https://bitbucket.org/repo/z8zjexy/images/384167639-checktable2.png">
</p>
<p>
    Mittels der Klasse
    <code>check-table-gr-h</code>
    kann außerdem ein Sonderfall für die Check Tables definiert werden. In der grundlegenden Struktur entspricht diese
    Check Table der Klasse
    <code>check-table-gr</code>
    (erste Spalte für Text, zweite (grün) und dritte (rot) Spalte sind ankreuzbar), wobei hier eine vierte Spalte für
    weiteren Text ergänzt wurde. Der Text in dieser Spalte kann durch Klick auf die rote Spalte angezeigt und durch
    Klick auf die grüne Spalte wieder verborgen werden. Auf diese Weise können den Benutzer*innen weiterführende
    Informationen bei bestimmten Bewertungen angezeigt werden.
</p>
<p>
    <img alt="checktablegrh.PNG" src="https://bitbucket.org/repo/z8zjexy/images/2831788018-checktablegrh.PNG">
</p>
<h2 id="markdown-header-pdf-dateien-erzeugen">PDF-Dateien erzeugen</h2>
<h3 id="markdown-header-shortcode-pdfdownload">Shortcode pdfdownload</h3>
<p>
    Es lassen sich mittels des Shortcodes
    <code>[pdfdownload]</code>
    ausgewählte Bereiche einer Seite als PDF-Datei exportieren. Der zu exportierende Inhalt muss dabei durch das
    öffnende und schließende Tag des Shortcodes wie folgt eingeschlossen werden:
</p>
<p>
    <code>[pdfdownload name="string" format="string" pdfid=number title="string" divid="string" docheadline="string"]</code>
</p>
<p>... zu druckender Inhalt </p>
<p>
    <code>[/pdfdownload]</code>
</p>
<p>Der Shortcode verfügt über mehrere Attribute, mit denen gewisse Einstellungen an der PDF selbst bzw. am Download-Link
    vorgenommen werden können: </p>
<ul>
    <li>
        <code>name</code>
        : Mit diesem (optionalen) Attribut kann der Name der späteren PDF-Datei festgelegt werden. Wird dieses Attribut
        bei der Nutzung des Shortcodes weggelassen, wird der Default-Wert „mypdf“ für die Datei genutzt. Bei der Wahl
        des Namens der Datei dürfen weder Leerzeichen noch eines der folgenden Zeichen genutzt werden: \, /, :, *, ?, ",
        &lt;, &gt;, |. Die Datei-Endung „.pdf“ muss hierbei nicht angegeben werden.
    </li>
    <li>
        <code>format</code>
        : Dieses (optionale) Attribut gibt die Ausrichtung der PDF an. Die möglichen Werte sind hierbei „p“
        (Portrait/Hochformat) und „l“ (Landscape/Querformat). Wird dieses Attribut weggelassen, wird der Default-Wert
        „p“ genutzt und die PDF liegt dementsprechend im Hochformat vor. Für den PDF-Export von Tabellen oder
        Multiformularen sollte zur besseren Übersicht ab einer bestimmten Anzahl an Spalten bzw. Felder als Format das
        Querformat (
        <code>format="l"</code>
        ) im Shortcode angegeben werden.
    </li>
    <li>
        <code>title</code>
        : Mit diesem (optionalen) Attribut kann eine Beschriftung für den Download-Link gewählt werden. Wird dieses
        Attribut weggelassen, wird der Default-Wert „Download als PDF“ als Beschriftung gewählt.
    </li>
    <li>
        <code>pdfid</code>
        : Eigene numerische ID für den Download-Link. Dieses Attribut muss bei mehrfacher Nutzung dieses Shortcodes
        innerhalb eines Beitrags jeweils angegeben werden, damit die einzelnen Download-Links intern klar unterschieden
        werden könnnen. Hierbei sollte darauf geachtet werden, dass der Wert für die
        <code>pdfid</code>
        einzigartig auf der Seite ist.
    </li>
    <li>
        <code>divid</code>
        : Mit diesem (optionalen) Parameter kann die ID eines
        <code>&lt;div&gt;</code>
        -Tag mit der Klasse „info-radio link“ angegeben werden, in welches der Download-Link für die PDF eingefügt
        werden soll, sodass dieser an eine beliebige Stelle auf der Seite gesetzt werden kann. Das (bestenfalls leere)
        <code>&lt;div&gt;</code>
        -Tag mit der Klasse „info-radio link“ und der ID für den
        <code>[pdfdownload]</code>
        -Shortcode muss entsprechend an der gewünschten Stelle zuvor platziert werden. Wird der Parameter
        <code>divid</code>
        weggelassen, wird der Download-Link direkt unter dem durch den Shortcode eingeschlossenen Inhalt gesetzt.
    </li>
    <li>
        <code>docheadline</code>
        : Mit diesem (optionalen) Attribut kann eine Hauptüberschrift für das PDF-Dokument definiert werden. Wird dieser
        Parameter nicht angegeben oder der Wert für den Parameter ist leer, wird keine Hauptüberschrift in das Dokument
        geschrieben.
    </li>
</ul>
<p>Standardmäßig wird für jede Seite des Dokuments mittig am unteren Rand die Seitenzahl beginnend ab der Seitenzahl 1
    angegeben. </p>
<p>Der Shortcode liest bei der Bearbeitung Zeile für Zeile des eingeschlossenen Inhalts. Aktuell können folgende
    Elemente von der dahinterliegenden Funktion interpretiert und in der PDF ausgegeben werden: </p>
<ul>
    <li>
        Überschriften (
        <code>&lt;h1&gt;</code>
        , ...,
        <code>&lt;h6&gt;</code>
        ). Die auf der Seite vorliegenden Farbinformationen für die Überschriften werden hierbei für die PDF übernommen.
    </li>
    <li>
        Paragraphs (
        <code>&lt;p&gt;</code>
        ).
    </li>
    <li>
        Zeilenumbrüche (
        <code>&lt;br&gt;</code>
        ).
    </li>
    <li>Einfacher Text. </li>
    <li>
        Das Element
        <code>&lt;div&gt;</code>
        wird inklusive Inhalt ignoriert. Einzige Ausnahme sind
        <code>&lt;div&gt;</code>
        -Elemente mit der Klasse „exer“, welche als Überschrift mit orangenen Rahmen dargestellt werden.
    </li>
    <li>Leere Zeilen im Editor werden als solche auch im PDF-Dokument dargestellt und können dazu genutzt werden,
        manuell Zeilenumbrüche bzw. Abstände im Dokument zu setzen. </li>
    <li>
        <p>
            Geordnete (
            <code>&lt;ol&gt;</code>
            ) bzw. ungeordnete (
            <code>&lt;ul&gt;</code>
            ) Listen. Folgende Inhalte für Listenelemente werden aktuell unterstützt:
        </p>
        <ul>
            <li>
                Paragraphen (
                <code>&lt;p&gt;</code>
                ).
            </li>
            <li>
                (Un-)geordnete Listen (
                <code>&lt;ul&gt;</code>
                bzw.
                <code>&lt;ol&gt;</code>
                ). Hier ist nur eine einmalige Verschachtelung möglich. Hier werden für Listenelemente bisher
                Paragraphen (
                <code>&lt;p&gt;</code>
                ) sowie einfacher Text unterstützt.
            </li>
            <li>Shortcode „ts_forms“ (keine Multiformulare). </li>
            <li>Shortcode „coach_output_format_data“ für text = 1 und list = 1. </li>
            <li>Einfacher Text. </li>
        </ul>
    </li>
    <li>
        <p>
            Tabellen (
            <code>&lt;table&gt;</code>
            ). Folgende Inhalte für Tabellen-Zellen werden aktuell unterstützt:
        </p>
        <ul>
            <li>
                Paragraphen (
                <code>&lt;p&gt;</code>
                ).
            </li>
            <li>Shortcode „ts_forms“ (kein Multiformulare). </li>
            <li>Shortcode „coach_output_format_data“ für text = 1 und list = 1. </li>
            <li>Einfacher Text</li>
        </ul>
    </li>
    <li>
        <p>
            Bilder (
            <code>&lt;img&gt;</code>
            ). Über ausgewählte Klassen, die im „class“-Attribut des
            <code>&lt;img&gt;</code>
            -Elements angegeben werden müssen, können Einstellungen am Bild in der PDF vorgenommen werden:
        </p>
        <ul>
            <li>
                Breite des Bildes: Es stehen die Klassen
                <code>tspdfdownload-small</code>
                für eine Bildbreite von 1/4 der Breite des Dokuments,
                <code>tspdfdownload-medium</code>
                für eine Bildbreite von 1/2 der Breite des Dokuments und
                <code>tspdfdownload-large</code>
                (Standardwert) für die volle Bildbreite im Dokument zur Verfügung.
            </li>
            <li>
                Positionierung des Bildes: Es stehen die Klassen
                <code>tspdfdownload-left</code>
                (Standardwert) für eine Positionierung links im Dokument,
                <code>tspdfdownload-center</code>
                für eine zentrierte Positionierung im Dokument und
                <code>tspdfdownload-right</code>
                für eine Positionierung rechts im Dokument zur Vefügung.
            </li>
        </ul>
    </li>
    <li>
        <p>
            Inhalt der durch HTML-Kommentare (
            <code>&lt;!-- ... --&gt;</code>
            ) einkommentiert wurde, wird ignoriert.
        </p>
    </li>
    <li>
        Shortcode
        <code>accordionmd</code>
        : Der Wert der für das Attribut „title“ angegeben wurde, wird als
        <code>&lt;h4&gt;</code>
        -Überschrift dargestellt.
    </li>
    <li>
        <p>
            Shortcode
            <code>ts_forms</code>
            (eizelne sowie mehrere Felder werden für ein Formular unterstützt):
        </p>
        <ul>
            <li>Einzeilige Textfelder. </li>
            <li>Mehrzeilige Textboxen. </li>
            <li>Dropdown. Es wird hierbei die gewählte bzw. im Falle von Dropdown mit dem Attribut „Multiple“ alle
                ausgewählten Optionen in die PDF aufgenommen. </li>
            <li>Radio-Button. Es wird hierbei die ausgewählte Option in die PDF aufgenommen. </li>
            <li>Checkboxen. Es werden hierbei alle ausgewählten Checkboxen in die PDF aufgenommen. </li>
            <li>Slider. Es wird hierbei der eingestellte Wert in die PDF aufgenommen. </li>
            <li>Multiformulare. Die Darstellung der Multiformulare erfolgt tabellenartig. Checkboxen werden hierbei als
                einzelne Spalte behandelt. </li>
            <li>Label bzw. Titel von Feldern werden oberhalb des Feldes fettgedruckt dargestellt. </li>
        </ul>
    </li>
    <li>
        <p>
            Shortcode
            <code>coach_output_format_data</code>
        </p>
    </li>
    <li>
        Shortcode
        <code>coach_output_forward_content</code>
    </li>
    <li>
        Shortcode
        <code>coach_output_gbu</code>
    </li>
    <li>
        Shortcode
        <code>tspv2_coach_output_mittelwert_gesamt</code>
    </li>
    <li>
        Shortcode
        <code>coach_output_gbu_chart</code>
    </li>
</ul>
<p>
    Zusätzlich wurden mit
    <code>[pdfdownloadignorestart]</code>
    und
    <code>[pdfdownloadignoreend]</code>
    zwei weitere Shortcodes definiert, die es ermöglichen, dass bestimmte Zeilen des durch
    <code>[pdfdownload]</code>
    eingeschlossenen Inhalts ignoriert werden können. Die zu ignorierenden Zeilen müssen wie folgt durch die beiden
    Shortcodes eingeschlossen werden:
</p>
<p>
    <code>[pdfdownloadignorestart]</code>
    <br>

    ...zu ignorierende Zeilen
    <br>
    <code>[pdfdownloadignoreend]</code>
</p>
<p>Die beiden Shortcodes sollte genutzt werden, um für die PDF unerwünschte Inhalte wie Beispiele oder aber auch
    Elemente zu ignorieren, die nicht in der obigen Liste aufgeführt sind. </p>
<p>Im Folgenden wird die Nutzung der genannten Shortcodes beispielhaft gezeigt: </p>
<p>Angenommen es wurde folgendes HTML-Dokument erzeugt: </p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">h1</span>
                                            <span class="p">&gt;</span>
                                            Beispielseite für das Erzeugen von PDF-Dateien
                                            <span class="p">&lt;/</span>
                                            <span class="nt">h1</span>
                                            <span class="p">&gt;</span>

                                            <span class="p">&lt;</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                            Gerne können Sie ihre Notizen als PDF ausdrucken!
                                            <span class="p">&lt;/</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                              

                                            [pdfdownload pdfid=1 name=&quot;Test123&quot; title=&quot;PDF hier herunterladen!&quot; format=&quot;p&quot; divid=&quot;TestDiv123&quot; docheadline=&quot;Meine eigene Überschrift&quot;]  
                                            <span class="p">&lt;</span>
                                            <span class="nt">h4</span>
                                            <span class="p">&gt;</span>
                                            Meine Notizen
                                            <span class="p">&lt;/</span>
                                            <span class="nt">h4</span>
                                            <span class="p">&gt;</span>
                                              

                                            [coach_output_format_data id=&#39;50645&#39; text=&quot;1&quot;]  
                                            [pdfdownloadignorestart]  
                                            [accordionmd title=&quot;Max Mustermanns Notizen&quot;]  
                                            <span class="p">&lt;</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                            Max Mustermanns Notizen erscheinen nicht in der PDF, da wir sie ignorieren!
                                            <span class="p">&lt;/</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                              
                                            [/accordionmd]  
                                            [pdfdownloadignoreend]  

                                            <span class="p">&lt;</span>
                                            <span class="nt">h4</span>
                                            <span class="p">&gt;</span>
                                            Möchten Sie noch weitere Gedanken notieren?
                                            <span class="p">&lt;/</span>
                                            <span class="nt">h4</span>
                                            <span class="p">&gt;</span>
                                              

                                            [ts_forms id=&#39;50647&#39;]  
                                            [/pdfdownload]  
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;info-radio link&quot;</span>
                                            <span class="na">id</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;TestDiv123&quot;</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                        </pre>
</div>

<p>Es wird dabei folgende Seite erzeugt: </p>
<p>
    <img alt="pdfbsp1.JPG" src="https://bitbucket.org/repo/z8zjexy/images/2145065987-pdfbsp1.JPG">
</p>
<p>Ein Klick auf den Link „PDF hier downloaden“ erzeugt die PDF „Test123.pdf“: </p>
<p>
    <img alt="pdfbsp2.JPG" src="https://bitbucket.org/repo/z8zjexy/images/716196355-pdfbsp2.JPG">
</p>
<h3 id="markdown-header-shortcodes-pdfprintstart-und-pdfprintende">Shortcodes pdfprintstart und pdfprintende</h3>
<p>
    <strong>Hinweis: Diese Funktion ist veraltet und sollte nicht mehr genutzt werden. Dieser Shortcode erfordert die
        Installation des Plugins „PDF &amp; Print by BestWebSoft“</strong>
    <br>

    Es lassen sich Bereiche mit dem Plugin „PDF &amp; Print by BestWebSoft“ und einer im Trainingssystem integrierten
    Anpassung als PDF exportieren bzw. drucken.
</p>
<p>
    <code>[pdfprintstart]</code>
</p>
<p>…zu druckender Inhalt</p>
<p>
    <code>[pdfprintende]</code>
</p>
<p>
    Um die Datei zu erhalten, muss an den Pfad der Seite der Parameter
    <code>&amp;print=pdf</code>
    angehängt werden. Daraus lässt sich z.B. auch ein Button unter dem zu druckenden Bereich erzeugen. Um eine Datei im
    Querformat zu erhalten, muss der Parameter wie folgt aussehen:
    <code>&amp;print=pdf&amp;orientationshortcode=L</code>
    .
</p>
<p>Zu unterscheiden sind zwei Varianten:</p>
<ul>
    <li>
        <p>Die PDF soll auf einer Seite erzeugt werden, auf der alle relevanten Daten bereits ausgegeben werden: In
            diesem Fall reicht es aus, das Print-PDF-Plugin auf gewöhnliche Weise zu benutzen, d.h. einen Button mit dem
            Link der aktuellen Seite und dem Zusatz &amp;print=pdf zu erzeugen.</p>
    </li>
    <li>
        <p>Die PDF soll auf einer Seite erzeugt werden, auf der die Daten z.T. erst eingegeben wurden: In diesem Fall
            muss eine separate Print-Seite erzeugt werden, auf der die Ausgabe mit den entsprechenden Shortcodes
            ([coach_output_…]), die mit den IDs der zu druckenden Daten versehen werden müssen, ausgeführt wird. Der
            Link zum Auslösen des Drucks verweist dann auf diese separate Print-Seite.
            Weitere Informationen zur generellen PDF-Erzeugung sind im Wiki zusammengefasst. </p>
    </li>
</ul>
<h2 id="markdown-header-gefahrdungsbeurteilung-gbu">Gefährdungsbeurteilung (GBU)</h2>
<h3 id="markdown-header-ausgabe-der-werte-der-gefahrdungsbeurteilung-gbu">Ausgabe der Werte der Gefährdungsbeurteilung
    (GBU)</h3>
<p>
    Mit dem Shortcode
    <code>[coach_output_gbu]</code>
    können verschiedene Werte der Gefährdungsbeurteilung ausgegeben werden. Der Shortcode erwartet mit
    <code>id</code>
    einerseits die ID eines Formulars, andererseits mit
    <code>mode</code>
    die Auswahl eines Modus zur Darstellung der Werte der Gefährdungsbeurteilung. Für den Parameter
    <code>mode</code>
    stehen folgende möglichen Werte zur Verfügung:
</p>
<ul>
    <li>
        <strong>einzel_pos_zu_neg</strong>
        : Einzelauswertung für Beschäftige: positiv zu negativ (&lt;3: sehr gut bis gut, &gt;3: kritisch, Rest:
        mittelmäßig)
    </li>
    <li>
        <strong>einzel_neg_zu_pos</strong>
        : Einzelauswertung für Beschäftige: negativ zu positiv (&lt;3 kritisch, &gt;3 sehr gut bis gut, Rest:
        mittelmäßig)
    </li>
    <li>
        <strong>ts1_ga_pos_zu_neg</strong>
        : Gesamtauswertung (Tabellenset 1): Häufigkeiten und Mittelwerte - positiv zu negativ
    </li>
    <li>
        <strong>ts1_ga_neg_zu_pos</strong>
        : Gesamtauswertung (Tabellenset 1): Häufigkeiten und Mittelwerte - negativ zu positiv
    </li>
    <li>
        <strong>ts2_gs_pos_zu_neg</strong>
        : Gruppenspezifika (Tabellenset 2): Häufigkeiten - positiv zu negativ (&lt;= 2,3: sehr gut bis gut, &gt;=3,7:
        kritisch, Rest: mittelmäßig)
    </li>
    <li>
        <strong>ts2_gs_neg_zu_pos</strong>
        : Gruppenspezifika (Tabellenset 2): Häufigkeiten - negativ zu postiv (&lt;= 2,3: kritisch, &gt;=3,7: sehr gut
        bis gut, Rest: mittelmäßig)
    </li>
    <li>
        <strong>ts3_gv_pos_zu_neg</strong>
        : Gruppenvergleich (Tabellenset 3): Mittelwerte - positiv zu negativ (&lt;= 2,3: sehr gut bis gut, &gt;=3,7:
        kritisch, Rest: mittelmäßig)
    </li>
    <li>
        <strong>ts3_gv_neg_zu_pos</strong>
        : Gruppenvergleich (Tabellenset 3): Mittelwerte - negativ zu positiv (&lt;= 2,3: kritisch, &gt;=3,7: sehr gut
        bis gut, Rest: mittelmäßig)
    </li>
    <li>
        <strong>text</strong>
        : Ausgabe der Freitextfelder
    </li>
</ul>
<p>
    Hinweis: Die Ergebnisse bzw. Auswertungen für Gruppen des Shortcodes
    <code>[coach_output_gbu]</code>
    sind nur ab einer Firmen-Größe von mindestens 8 Mitgliedern einsehbar.
</p>
<h3 id="markdown-header-ausgabe-des-mittelwerts-fur-einen-block-der-gefahrdungsbeurteilung-gbu">Ausgabe des Mittelwerts
    für einen Block der Gefährdungsbeurteilung (GBU)</h3>
<p>
    Über den Shortcode
    <code>[tspv2_output_mittelwert_gesamt]</code>
    kann der Mittelwert über einen gewählten Block ausgegeben werden. Mit dem Parameter
    <code>id</code>
    müssen hierbei die IDs aller Formulare als Liste übergeben werden, welche bei der Berechnung des Mittelwerts
    einfließen sollen. Der optionale Parameter
    <code>groupbygroups</code>
    kann genutzt werden, um eine Aufschlüsselung des Wertes nach Gruppen festzulegen (Default-Wert: „false“). Außerdem
    kann über den Parameter
    <code>poszuneg</code>
    festgelegt werden, ob eine Farbskala von positiv nach negativ genutzt werden soll (Default-Wert: „true“).
</p>
<p>
    Hinweis: Die Ergebnisse bzw. Auswertungen für Gruppen des Shortcodes
    <code>[tspv2_output_mittelwert_gesamt]</code>
    sind nur ab einer Firmen-Größe von mindestens 8 Mitgliedern einsehbar.
</p>
<h3 id="markdown-header-csv-download-der-daten-der-gefahrdungsbeurteilung-gbu">CSV-Download der Daten der
    Gefährdungsbeurteilung (GBU)</h3>
<p>
    Ein CSV-Download mit Daten der Gefährdungsbeurteilung kann über den Shortcode
    <code>[tspv2_coach_download_csv_link]</code>
    eingebunden werden. Der Shortcode erwartet mit
    <code>data</code>
    ein JSON-Array an Themen, Unterthemen und Formular-IDs. Mit
    <code>singleuser</code>
    kann festgelegt werden, ob für den Download die Daten des*der aktuellen Benutzer*in betrachtet werden sollen
    (Default-Wert: „false“). Über den Parameter
    <code>groupbygroups</code>
    kann festgelegt werden, ob die Daten nach Gruppen aufgeschlüsselt werden sollen (Default-Wert: „false“). Wurde der
    Parameter
    <code>singleuser</code>
    auf den Wert „true“ gesetzt, wird der Parameter
    <code>groupbygroups</code>
    ignoriert.
    <br>

    Beispiel für ein JSON-Array für den Parameter
    <code>data</code>
    des Shortcodes
    <code>[tspv2_coach_download_csv_link]</code>
    :
</p>
<p></p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span class="p">{</span>
                                            <span class="nt">&quot;Arbeitsumgebung&quot;</span>
                                            <span class="p">:</span>
                                            <span class="p">{</span>
                                            <span class="nt">&quot;1 Raumklima&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">616</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;2 Lärm&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">629</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;3 Belechtung und Licht&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">630</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;4 Bewegungsfläche&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">631</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;5 Arbeitsmittel&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">632</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;6 Arbeitstisch und -stuhl&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">633</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;7 Computer-Arbeitsplatz&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">634</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;8 Umfallschutz / Arbeitssicherheit&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">635</span>
                                            <span class="p">},</span>
                                            <span class="nt">&quot;Work-Life-Balance&quot;</span>
                                            <span class="p">:</span>
                                            <span class="p">{</span>
                                            <span class="nt">&quot;1 Eingeschränkte Zeit-/ Ortsouveränität&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">615</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;2 Überstunden&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">636</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;3 Zeitdruck&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">1053</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;4 Pausen&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">1048</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;5 Entgrenzung&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">637</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;6 Vereinbarkeit von Arbeit und Freizeit&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">638</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;7  Unterbrechungen&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">1055</span>
                                            <span class="p">},</span>
                                            <span class="nt">&quot;Arbeitsorganisation&quot;</span>
                                            <span class="p">:</span>
                                            <span class="p">{</span>
                                            <span class="nt">&quot;1 Qualifizierung / Passung&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">627</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;2 Entscheidungs-/ Handlungsspielraum&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">639</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;3 Aufgabenkomplexität&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">640</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;4 Information&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">641</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;5 Emotionale Inanspruchnahme&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">642</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;6 Prozessgestaltung / Projektorganisation&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">643</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;7 Umgang mit Arbeits-/Projektzielen&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">644</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;8 Meetings&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">645</span>
                                            <span class="p">},</span>
                                            <span class="nt">&quot;Unternehmenskultur&quot;</span>
                                            <span class="p">:</span>
                                            <span class="p">{</span>
                                            <span class="nt">&quot;1 Beteiligung&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">618</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;2 Fürsorge&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">646</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;3 Wertschätzung / Fairness&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">647</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;4 Kommunikationskultur&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">648</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;5 Arbeitsklima / Soziale Unterstützung&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">649</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;6 Konfliktmanagement&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">650</span>
                                            <span class="p">},</span>
                                            <span class="nt">&quot;Auswirkung auf die Beschäftigten&quot;</span>
                                            <span class="p">:</span>
                                            <span class="p">{</span>
                                            <span class="nt">&quot;1 Erholungsfahigkeit&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">619</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;2 Arbeitszufriedenheit&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">651</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;3 Arbeitsfreude&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">652</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;4 Bindung und Zugehörigkeit&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">653</span>
                                            <span class="p">}</span>
                                            <span class="p">}</span>
                                        </pre>
</div>

Bzw. in minified:
<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span class="p">{</span>
                                            <span class="nt">&quot;Arbeitsumgebung&quot;</span>
                                            <span class="p">:</span>
                                            <span class="p">{</span>
                                            <span class="nt">&quot;1 Raumklima&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">616</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;2 Lärm&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">629</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;3 Belechtung und Licht&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">630</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;4 Bewegungsfläche&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">631</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;5 Arbeitsmittel&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">632</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;6 Arbeitstisch und -stuhl&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">633</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;7 Computer-Arbeitsplatz&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">634</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;8 Umfallschutz / Arbeitssicherheit&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">635</span>
                                            <span class="p">},</span>
                                            <span class="nt">&quot;Work-Life-Balance&quot;</span>
                                            <span class="p">:</span>
                                            <span class="p">{</span>
                                            <span class="nt">&quot;1 Eingeschränkte Zeit-/ Ortsouveränität&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">615</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;2 Überstunden&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">636</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;3 Zeitdruck&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">1053</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;4 Pausen&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">1048</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;5 Entgrenzung&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">637</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;6 Vereinbarkeit von Arbeit und Freizeit&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">638</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;7 Unterbrechungen&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">1055</span>
                                            <span class="p">},</span>
                                            <span class="nt">&quot;Arbeitsorganisation&quot;</span>
                                            <span class="p">:</span>
                                            <span class="p">{</span>
                                            <span class="nt">&quot;1 Qualifizierung / Passung&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">627</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;2 Entscheidungs-/ Handlungsspielraum&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">639</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;3 Aufgabenkomplexität&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">640</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;4 Information&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">641</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;5 Emotionale Inanspruchnahme&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">642</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;6 Prozessgestaltung / Projektorganisation&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">643</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;7 Umgang mit Arbeits-/Projektzielen&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">644</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;8 Meetings&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">645</span>
                                            <span class="p">},</span>
                                            <span class="nt">&quot;Unternehmenskultur&quot;</span>
                                            <span class="p">:</span>
                                            <span class="p">{</span>
                                            <span class="nt">&quot;1 Beteiligung&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">618</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;2 Fürsorge&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">646</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;3 Wertschätzung / Fairness&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">647</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;4 Kommunikationskultur&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">648</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;5 Arbeitsklima / Soziale Unterstützung&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">649</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;6 Konfliktmanagement&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">650</span>
                                            <span class="p">},</span>
                                            <span class="nt">&quot;Auswirkung auf die Beschäftigten&quot;</span>
                                            <span class="p">:</span>
                                            <span class="p">{</span>
                                            <span class="nt">&quot;1 Erholungsfahigkeit&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">619</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;2 Arbeitszufriedenheit&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">651</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;3 Arbeitsfreude&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">652</span>
                                            <span class="p">,</span>
                                            <span class="nt">&quot;4 Bindung und Zugehörigkeit&quot;</span>
                                            <span class="p">:</span>
                                            <span class="mi">653</span>
                                            <span class="p">}}</span>
                                        </pre>
</div>
<p></p>
<h3 id="markdown-header-visualisierung-der-werte-der-gefahrdungsbeurteilung-gbu">Visualisierung der Werte der
    Gefährdungsbeurteilung (GBU)</h3>
<p>
    Mittels des Shortcodes
    <code>[coach_output_gbu_chart]</code>
    können Auswertungen der Ergebnisse von Befragungen wie der Gefährdungsbeurteilung in Form von Diagrammen
    visualisiert werden. Für diesen Shortcode sind verschiedene Sichten verfügbar, welche abhängig von der Rolle des*der
    entsprechenden Benutzer*in angezeigt werden:
</p>
<ul>
    <li>
        <strong>Rolle Führungskraft</strong>
        : Für Benutzer*innen mit der Rolle „Führungskraft“ werden die Ergebnisse für jede Gruppe der zugeordneten Firma
        angezeigt. Die Diagramme liegen gruppiert für jede Gruppe dieser Firma vor und können ein- bzw. ausgeklappt
        werden.
    </li>
    <li>
        <strong>Rolle Krankenkassenadmin</strong>
        : Für Benutzer*innen mit der Rolle „Krankenkassenadmin“ werden die Ergebnisse für jede zugeordnete Firma
        angezeigt. Jede Firma kann ein- bzw. ausgeklappt werden, sodass eine Auflistung der einzelnen Gruppen der Firma
        abgerufen werden kann. Die Diagramme liegen gruppiert für jede Gruppe dieser Firma vor und können ebenfalls ein-
        bzw. ausgeklappt werden.
    </li>
    <li>
        <strong>Rolle Teamleitung</strong>
        : Für Benutzer*innen mit der Rolle „Teamleitung“ werden die Ergebnisse für die zugeordnete Gruppe angezeigt.
    </li>
</ul>
<p>
    Der Shortcode erwartet mit dem Parameter
    <code>id</code>
    die ID oder eine Liste an IDs (durch „,“ getrennt) von Matrix-Formularen, wobei jede Matrix einer Skala entspricht.
    Es wird empfohlen, die Fragen innerhalb einer Matrix über das Meta-Feld in einzelne Subskalen einzuteilen (vgl.
    Beschreibung des Formularfeldes „Matrix“ im Abschnitt
    <a data-is-external-link="true" href="#markdown-header-ts-forms" rel="nofollow">„TS-Forms“</a>
    ).
    Für jede Skala bzw. jede Matrix werden für eine Gruppe zwei verschiedene Arten an Diagrammen erstellt:
    <br>

    Zunächst wird der Mittelwert für jede angegebene Subskala einer Skala für die aktuelle Gruppe in einem
    Säulendiagramm dargestellt. Für die Sichten für die Führungskräfte und Krankenkassenadmins werden hier zusätzlich
    auch die Mittelwerte für die gesamte Firma als Vergleichswert angegeben.
</p>
<p>
    <img alt="gbu_chart_bar.PNG" src="https://bitbucket.org/repo/z8zjexy/images/1621697599-gbu_chart_bar.PNG">
</p>
<p>Darauffolgend werden die Häufigkeitsverteilungen für die einzelnen Items bzw. Fragen der Matrix gruppiert nach den
    einzelnen Subskalen in Form von Liniendiagrammen angezeigt. </p>
<p>
    <img alt="gbu_chart_line.PNG" src="https://bitbucket.org/repo/z8zjexy/images/35852571-gbu_chart_line.PNG">
</p>
<p>
    Die Auswertungen werden abhängig von der Anzahl an Teilnehmenden dargestellt. Gab es bei einem Item bzw. einer Frage
    einer Matrix nicht genügend Antworten, wird die entsprechende Häufigkeitsverteilung für diese Gruppe nicht
    angezeigt. Gleichzeitig wird das dazugehörige Werte-Paar für die Subskala aus dem Säulendiagramm entfernt, welche
    dem Item bzw. der Frage über das Meta-Feld innerhalb der Matrix zuvor zugeordnet wurde. Wurde für eine Gruppe eine
    Teamleitung eingestellt, werden die Eingaben von diesem*r Benutzer*in für diese Gruppe nicht berücksichtigt.
    <br>

    Soll nur einer der beiden Typen an Diagrammen angezeigt werden, kann der optionale Parameter
    <code>charttype</code>
    genutzt werden. Für den Wert „bar“ wird lediglich die Auswertung in Form eines Säulendiagramm angezeigt, mit dem
    Wert „line“ werden die Häufigkeitsverteilungen für die Items bzw. Fragen des Matrix-Formulars dargestellt.
    Standardmäßig werden beide Arten an Diagramm-Typen in der oben beschriebenen Reihenfolge in eine Seite eingebunden.
    Mittels des optionalen Parameters
    <code>charttitle</code>
    können die Namen der Skalen bzw. eigene Bezeichnungen angegeben werden, welche jeweils oberhalb eines Blocks an
    Diagrammen eines Matrix-Formulars als Überschrift platziert werden. Sollen mehrere Namen angegeben werden, müssen
    diese durch das Zeichen „|“ voneinander getrennt werden.
    <br>

    Über den optionalen Parameter
    <code>showpdfdownload</code>
    kann unter den Ergebnissen für jede Gruppe ein Download-Link automatisch eingefügt werden, welcher den Download der
    Ergebnisse als PDF-Datei ermöglicht. Dazu muss der Wert für diesen Parameter auf „1“ gesetzt werden (
    <code>showpdfdownload="1"</code>
    ). Mit dem ebenfalls optionalen Parameter
    <code>pdfdownloadtitle</code>
    kann anstelle des Standardwerts „Auswertung als PDF herunterladen“ eine eigene Beschriftung des Download-Links
    gewählt werden. Alternativ kann der Download der gesamten Ergebnisse als PDF auch über den Shortcode
    <code>pdfdownload</code>
    (siehe den Abschnitt
    <a data-is-external-link="true" href="#markdown-header-pdf-dateien-erzeugen" rel="nofollow">„PDF-Dateien
        erzeugen“</a>
    ) ermöglicht werden.
</p>
<h2 id="markdown-header-freigabe-von-inhalten">Freigabe von Inhalten</h2>
<h3 id="markdown-header-freigabe-von-inhalten-ermoglichen">Freigabe von Inhalten ermöglichen</h3>
<p>
    Mithilfe des Shortcodes
    <code>[forward_content id="number"]</code>
    kann ein Button auf einer Seite eingebunden werden, der es ermöglicht, den Inhalt eines Formulars einer
    Führungskraft bzw. einem Krankenkassenadmin freizugeben. Über den Parameter
    <code>id</code>
    muss hierbei die ID für das entsprechende Formular angegeben werden. Wurde der Inhalt auf diese Weise für ein
    Formular freigegeben, wird der Button durch einen „Freigabe aufheben“-Button ersetzt, mit dem die Freigabe für das
    angegebene Formular durch den*die Benutzer*in zurückgesetzt werden kann. Wurde die Freigabe so zurückgesetzt, kann
    der Inhalt wie zuvor freigegeben werden.
</p>
<h3 id="markdown-header-ausgabe-freigegebener-inhalte">Ausgabe freigegebener Inhalte</h3>
<p>
    Mit dem Shortcode
    <code>[coach_output_forward_content id="string" printlabels="number" boss="number" kadmin="number" headlines="string"]</code>
    können für eine Führungskraft oder für einen Krankenkassenadmin alle Inhalte von Benutzer*innen einer Firma, die
    durch diese freigegeben wurden, auf einer Seite eingebunden werden. Die freigegebenen Inhalte werden anonym und für
    jede Gruppe separat gesammelt für jedes Feld eines Formular für die Führungskraft bzw. für den Krankenkassenadmin
    angezeigt. Wurden keine Inhalte für ein Formular freigegeben, wird der Führungskraft bzw. dem Krankenkassenadmin der
    Text "Sie sehen nichts, da für Sie noch keine Texte freigegeben wurden." angezeigt. Handelt es sich um den*die
    Benutzer*in um keine Führungskraft oder einem Krankenkassenadmin, wird der Text "Sie sehen nichts, da Sie nicht die
    notwendigen Berechtigungen für diesen Inhalt haben." dargestellt.
    <br>

    Über den Parameter
    <code>id</code>
    kann eine oder mehrere IDs von Formularen angegeben werden, welche zuvor mit dem Shortcode
    <code>[ts_forms]</code>
    erzeugt wurden. Werden mehrere IDs angegeben, müssen diese jeweils durch Komma getrennt werden.
    <br>

    Mittels des (optionalen) Parameters
    <code>printlabels</code>
    kann zusätzlich angegeben werden, ob die Labels einzelner Felder eines Formulars angezeigt werden sollen. Dies ist
    vor allem als inhaltliche Trennung zwischen zwei oder mehreren Feldern eines einzelnen Formulars zu empfehlen.
    Sollen die Labels von Feldern angezeigt werden, muss dies mit
    <code>printlabels="1"</code>
    festgelegt werden. Die Labels werden standardmäßig nicht angezeigt.
    <br>

    Mit Hilfe der beiden Parameter
    <code>boss</code>
    und
    <code>kadmin</code>
    kann eingestellt werden, welche Rollen die freigegebenen Inhalte einsehen sollen. Hierfür müssen die entsprechenden
    Parameter auf den Wert "1" gesetzt werden, also
    <code>boss="1"</code>
    bzw.
    <code>kadmin="1"</code>
    .
    <br>

    Mit dem optionalen Parameter
    <code>headlines</code>
    können eigene Überschriften definiert werden, welche vor den jeweiligen Formularen angezeigt werden (die erste in
    <code>headlines</code>
    angegebene Überschrift wird vor dem ersten in
    <code>id</code>
    angegebenen Formular platziert, usw.). Sollen mehrere Überschriften angegeben werden, müssen diese durch das Zeichen
    "|" voneinander getrennt werden. Soll vor einem bestimmten Formular keine Überschrift platziert werden, muss die
    Überschrift in der in
    <code>headlines</code>
    angegebenen Liste an der entsprechenden Sztelle leer gelassen werden.
    <br>

    Bei der Darstellung der freigegebenen Inhalte werden Formulare mit einzelnen Feldern, Formulare mit mehreren Feldern
    sowie MulitForms unterstützt. Für die Formulare mit mehreren Feldern und für die MultiForms werden hierbei jeweils
    für jedes einzelne Feld die Inhalte gesammelt dargestellt, sodass hier eine inhaltliche Trennung vorzufinden ist.
</p>
<h2 id="markdown-header-coachingmodus-formulare">Coachingmodus-Formulare</h2>
<p>
    Mit dem Shortcode
    <code>[coachingmodeform training="number" title="number" multichoice="number" modi="string"]</code>
    lässt sich an jeder Stelle im Trainingssystem ein Formular für das angegebene Training anzeigen, mit dem der/die
    Benutzer*in selbst den gewünschten Coaching-Modus einstellen kann.
    <br>

    Über den Parameter
    <code>training</code>
    muss hierbei die ID des Trainings angegeben werden, für welches das Coachingmodus-Formular angezeigt werden soll.
    Die ID eines Trainings kann auf der Seite
    <a data-is-external-link="true" href="#markdown-header-trainingszuweisung" rel="nofollow">„Training zuweisen“</a>
    eingesehen werden.
    <br>

    Mit dem (optionalen) Parameter
    <code>title</code>
    kann festgelegt werden, ob der Titel des angegebenen Trainings im Formular erscheinen soll. Dies kann mit
    <code>title="1"</code>
    angegeben werden. Standardmäßig wird der Titel des Trainings nicht im Coachingmodus-Formular angezeigt.
    <br>

    Mittels des (optionalen) Parameters
    <code>multichoice</code>
    kann für ein Formular angegeben werden, ob dieses mehrfach abgeschickt werden darf. Dazu muss der Parameter im
    Shortcode auf 1 gesetzt werden (
    <code>multichoice="1"</code>
    ). Darf das Formular für das angegebene Training nur einmal abgesendet werden, wird für den*die Benutzer*in, wenn
    diese/r die Auswahl für den Coaching-Modus angeschickt hat, intern eine Sperre für das Training gesetzt und das
    Formular wird an anderer Stelle dem*der Benutzer*in nicht mehr angezeigt. Formulare, welche mittels Angabe des
    Parameters
    <code>multichoice</code>
    mehrmals abgeschickt werden dürfen, werden dabei ebenfalls nicht angezeigt, sofern zuvor eine Sperre durch ein
    Formular für dieses Training gesetzt wurde. Die Sperre für ein Training kann für einen oder mehrere Benutzer*innen
    auf der Seite „Training zuweisen“ mit dem Button „Reset“ zurückgesetzt werden.
    <br>

    Über dem Parameter
    <code>modi</code>
    kann angegeben werden, welche Coaching-Modi dem*der Benutzer*in im Formular zur Auswahl gesetellt werden sollen. Es
    sind hierbei folgende Werte für den Parameter möglich, welche durch Komma getrennt angegeben werden müssen:
</p>
<ul>
    <li>
        <strong>ohne</strong>
        : Der*Die Benutzer*in kann das Training selbstständig und ohne Begleitung eines E-Coaches durchführen.
    </li>
    <li>
        <strong>bedarf</strong>
        : Dem*Der Benutzer*in wird für das Training ein E-Coach zugeteilt, den*die diese*r bei Bedarf über die
        <a data-is-external-link="true" href="#markdown-header-nachrichten" rel="nofollow">Nachrichten</a>
        -Funktion kontaktieren kann.
    </li>
    <li>
        <strong>umfassend</strong>
        : Dem*Der Benutzer*in wird für das Training ein E-Coach zugeteilt, den*die diese*r bei Bedarf über die
        Nachrichten-Funktion kontaktieren kann. Zusätzlich erhält der*die Benutzer*in automatisch ein Feedback bei
        Abschluss einer Lektion durch den E-Coach.
    </li>
</ul>
<p>
    Wird der Parameter
    <code>modi</code>
    nicht angegeben werden, stehen alle der oben genannten Coaching-Modi im Formular zur Auswahl.
</p>
<p>
    <img alt="coachingmodeform_bsp.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/3534838096-coachingmodeform_bsp.PNG">
</p>
<p>Hinweis: Erfolgt beim Absenden des Formulars ein Wechsel vom Modus „selbstständig“ bzw. „E-Coaching bei Bedarf“ zum
    Modus „Umfasendes E-Coaching“, erfolgt gleichzeitig ein Wechsel des Trainings-Modus zum Modus „begleitet“. Wird vom
    Coaching-Modus „Umfassendes E-Coaching“ zu einem der anderen beiden Modi gewechselt, wird der Trainings-Modus auf
    den Modus „sequentiell“ für das Training geändert. </p>
<h2 id="markdown-header-ausgabe-von-inhalten">Ausgabe von Inhalten</h2>
<h3 id="markdown-header-ausgabe-des-inhalts-eines-textfeldes-in-einen-paragraph">Ausgabe des Inhalts eines Textfeldes in
    einen Paragraph</h3>
<p>Mithilfe des folgenden Shortcode kann der Inhalt eines ein- oder mehrzeiligen Textfeldes als Text an jeder beliebigen
    Stelle einer Seite ausgegeben werden: </p>
<p>
    <code>[copyfieldtext id=number]</code>
</p>
<p>
    <code>[copyfieldtext]</code>
    erwartet mit
    <code>id</code>
    die ID, welche im Shortcode
    <code>[ts_forms]</code>
    für das ein- bzw. mehrzeilige Textfeld angegeben wurde. Der Shortcode erzeugt an der Stelle, an der dieser gesetzt
    wurde, einen Paragraph (
    <code>&lt;p&gt;</code>
    ), in welchen der Inhalt das Textfeldes kopiert wird. Für eine korrekte Funktionsweise des Shortcodes müssen sich
    dieser sowie das betreffende Textfeld auf der gleichen Seite befinden.
</p>
<h3 id="markdown-header-ausgabe-des-textinhalt-von-gecheckten-checkboxen-in-einer-liste">Ausgabe des Textinhalt von
    gecheckten Checkboxen in einer Liste</h3>
<p>Der folgende Shortcode ermöglicht es, den Inhalt von gecheckten Elemente einer Checkbox-Liste in einer Liste ausgeben
    zu lassen: </p>
<p>
    <code>[copycheckbox id=number]</code>
</p>
<p>
    <code>[copycheckbox]</code>
    erwartet mit
    <code>id</code>
    die ID, welche im
    <code>[ts_forms]</code>
    -Shortcode für die Checkbox-Liste angegeben wurde. Der Shortcode erzeugt an der Stelle, an der dieser gesetzt wurde,
    eine Liste (
    <code>&lt;ul&gt;</code>
    ), in welchen die Inhalte der Checkbox-Liste kopiert werden. Für eine korrekte Funktionsweise des Shortcodes müssen
    sich dieser sowie das betreffende Checkbox-Liste auf der gleichen Seite befinden.
</p>
<h3 id="markdown-header-ausgabe-von-beschreibungen-einer-check-table">Ausgabe von Beschreibungen einer Check Table</h3>
<p>
    Mithilfe des folgenden Shortcodes können durch den*die Benutzer*in ausgewählte Beschreibungen einer
    <a data-is-external-link="true" href="#markdown-header-check-tables" rel="nofollow">Check Table</a>
    in ein Textfeld kopiert werden:
</p>
<p>
    <code>[copychecktableitems id="string" pos=number sammlung="string"]</code>
</p>
<p>Der Shortcode erwartet folgende Attribute: </p>
<ul>
    <li>
        <code>id</code>
        : Gibt die ID der Check Table an, die das Verhalten unterstützen soll.
    </li>
    <li>
        <code>pos</code>
        : Gibt die Spalte der Check Table an, für die die Beschreibungen kopiert werden sollen, sollte der*die
        Benutzer*in diese mit einem Haken auswählen. Die Spalte muss hierbei als numerischer Wert angegeben werden,
        wobei die einzelnen Spalten von links nach rechts beginnend ab dem Wert 1 durchnummeriert sind.
    </li>
    <li>
        <code>sammlung</code>
        : Gibt die ID des Textfeldes an, welche in der Inhaltsseite im
        <code>[ts_forms]</code>
        -Shortcode angegeben wurde.
    </li>
</ul>
<h2 id="markdown-header-anzeigen-von-beitragen">Anzeigen von Beiträgen</h2>
<p>
    Mit dem Shortcode
    <code>[tspv2_latest_posts]</code>
    ist es möglich, eine gewisse Anzahl an Beiträgen (engl. Posts) auf einer Seite anzuzeigen. Der Shortcode verfügt
    über einige optionale Parameter, mit denen weitere Einstellungen an der Auflistung der Beiträge vorgenommen werden
    können:
</p>
<ul>
    <li>
        <code>titel</code>
        : Mit diesem Parameter kann eine Überschrift für die Auflistung gewählt werden. Der Standardwert für diesen
        Parameter ist „Aktuelles“.
    </li>
    <li>
        <code>number</code>
        : Über diesen Parameter kann die Anzahl der Beiträge angegeben werden, welche angezeigt werden soll. Wird der
        Wert -1 gewählt, werdenn alle Beiträge angezeigt, ansonsten die angegebene Anzahl. Der Standardwert für diesen
        Parameter ist 3.
    </li>
    <li>
        <code>numberchars</code>
        : Gibt die Anzahl an Zeichen für einen Beitrag an, die dargestellt werden, bevor dieser durch „...“
        abgeschnitten werden. Der Standardwert für diesen Parameter ist 150.
    </li>
    <li>
        <code>post_type</code>
        : Hiermit kann ein oder mehrere Typen an Beiträgen für die Auflistung festgelegt werden. Sollen mehrere
        Beitrag-Typen angegeben werden, müssen diese jeweils durch ein „|“ voneinander getrennt werden. Der Standardwert
        für diesen Parameter ist „posts“.
    </li>
    <li>
        <code>category</code>
        : Mit diesem Parameter kann ein Kategorie-Filter genutzt werden. Sollen nur bestimmte Kategorien für Beiträge
        angezeigt werden, muss jeweils der Name der Kategorie angegeben werden. Bei mehreren Kategorien müssen diese
        jeweils durch ein „|“ voneinander getrennt werden. Der Standardwert für diesen Parameter ist 0 (kein
        Kategorie-Filter).
    </li>
    <li>
        <code>morelink</code>
        : Mit diesem Parameter kann ein Link für weitere News eingefügt werden. Der Standardwert für diesen Parameter
        ist „null“ (Button wird nicht angezeigt).
    </li>
    <li>
        <code>morelinktext</code>
        : Über diesen Parameter kann die Beschriftung für den Button gewählt werden, welcher über den Parameter
        <code>morelink</code>
        eingefügt wird. Der Standardwert für diesen Parameter ist „Weitere Beiträge“.
    </li>
    <li>
        <code>include</code>
        bzw.
        <code>exclude</code>
        : Mit diesen beiden Parametern können mehrere IDs (getrennt durch „|“) angegeben, die bei der Auflistung mit
        ein- bw. ausgeschlossen werden soll. Der Standardwert für beide Parameter ist ein leeres Array.
    </li>
</ul>
<h2 id="markdown-header-gamification-elemente">Gamification-Elemente</h2>
<h3 id="markdown-header-fortschrittsubersicht">Fortschrittsübersicht</h3>
<p>
    <strong>Hinweis: Diese Funktion ist veraltet und wird eventuell bald überarbeitet.</strong>
    <br>

    Um den Fortschritt für ein Training in Prozentwerten auszugeben, ist folgender Shortcode zu verwenden:
</p>
<p>
    <code>[hnprogress tname=Trainingsname percent=1 ]</code>
    <br>

    Der Trainingsname (
    <code>tname</code>
    ) ist dabei der Name, der bei Erstellung des Trainings vergeben wurde. Dieser wird auch unter den verschiedenen
    Auflistungen der Trainings angezeigt.
</p>
<h3 id="markdown-header-trainingsfortschritt">Trainingsfortschritt</h3>
<p>
    Mit dem Shortcode
    <code>[tspv2_trainingprogress]</code>
    lässt sich für Benutzer*innen der aktuelle Fortschritt für alle zugewiesenen Trainings sowie die untergeordneten
    Lektionen in Prozent anzeigen. Über den optionalen Parameter
    <code>titel</code>
    kann eine eigene Überschrift ausgewählt werden. Wird dieser Parameter nicht angegeben oder ist der Wert für den
    Titel leer, wird der Default-Wert „Detail Trainingsfortschritt“ genutzt.
</p>
<h3 id="markdown-header-verleihung-von-abzeichen">Verleihung von Abzeichen</h3>
<p>
    Um
    <a data-is-external-link="true" href="#markdown-header-abzeichenubersicht" rel="nofollow">Abzeichen</a>
    für das Absolvieren von einer Lektion oder des gesamten Trainings zu verleihen, wird der Shortcode
    <code>[tspv2_abzeichen_modal]</code>
    benötigt. Bei der Benutzung ist Folgendes zu berücksichtigen:
</p>
<p>Der Shortcode muss in jeder Lektion eines Trainings jeweils in der letzten Seite eingebunden werden.</p>
<p>Der Shortcode verfügt über optionale Parameter, mit denen individuelle Anpassungen vorgenommen werden können: </p>
<ul>
    <li>
        <code>titel</code>
        : Über diesen Parameter kann eine Überschrift festgelegt werden. (Default: Herzlichen Glückwunsch)
    </li>
    <li>
        <code>srclektion</code>
        : Über diesen Parameter kann der Pfad zu einer Bilddatei oder einem GIF für das Absolvieren einer Lektion
        vergeben werden.
    </li>
    <li>
        <code>srctraining</code>
        : Über diesen Parameter kann der Pfad zu einer Bilddatei oder einem GIF für das Absolvieren eines Trainings
        vergeben werden.
    </li>
    <li>
        <code>textlektion</code>
        : Über diesen Parameter kann der Text für das Absolvieren einer Lektion vergeben werden. (Default: Sie haben die
        Lektion erfolgreich abgeschlossen!)
    </li>
    <li>
        <code>texttraining</code>
        : Über diesen Parameter kann der Text für das Absolvieren eines Trainings vergeben werden. (Default: Sie haben
        das Training erfolgreich abgeschlossen!)
    </li>
    <li>
        <code>texttag</code>
        : Über diesen Parameter kann das HTML-Tag und damit auch die Schriftgröße für
        <code>textlektion</code>
        und
        <code>texttraining</code>
        angepasst werden. (Default: "p" für Paragraphen
        <code>&lt;p&gt;</code>
        )
    </li>
    <li>
        <code>buttontitel</code>
        : Über diesen Parameter kann die Button-Beschriftung angepasst werden. (Default: Weiter)
    </li>
    <li>
        <code>overlaynone</code>
        : Dieser Parameter erzeugt durch das Setzen auf den Wert 1 das Modal ohne ein Overlay, welches je nach
        Fortschritt eine entsprechend breite Ansicht auf das noch nicht freigespielte Abzeichen zulässt.
    </li>
</ul>
<p>
    Der Pfad zu einer Bilddatei bzw. zu einem GIF für die Parameter
    <code>srclektion</code>
    und
    <code>srctraining</code>
    kann über das WordPress-Backend abgerufen werden. Dazu muss zunächst die Mediathek der Plattform über
    „Medien-&gt;Medienübersicht“ aufgerufen werden. Anschließend muss nur noch die entsprechende Datei durch einen Klick
    ausgewählt werden. Die Adresse ist in der Dateiübersicht auf der rechten Seite unter „Datei-URL“ abrufbar. Diese
    muss im Shortcode für den entsprechenden Parameter eingefügt werden.
    <br>

    Es ist ratsam, dass bei der Nutzung der Parameter zur Angabe des Pfades einer Bilddatei (
    <code>srclektion</code>
    und
    <code>srctraining</code>
    ) oder zur Vergabe eines individuellen Textes im Modal (
    <code>textlektion</code>
    und
    <code>texttraining</code>
    ) diese sowohl für die Lektionen als auch für das Training bei allen Einfügungen des Shortcodes in die Lektionen
    eines Trainings mit angegeben werden. Der Grund liegt darin, dass die Lektionen eines Trainings nicht unbedingt in
    Reihenfolge durch die Benutzer*innen in bestimmten Fällen bearbeitet werden, sodass der Abschluss des gesamten
    Trainings und somit das Anzeigen des entsprechenden Modals nicht unbedingt durch das Beenden der letzten Lektion
    erfolgt.
</p>
<p>
    Folgendes Beispiel soll die Nutzung des Shortcodes
    <code>[tspv2_abzeichen_modal]</code>
    verdeutlichen:
</p>
<p>
    <code>[tspv2_abzeichen_modal srclektion="MEINE_PLATTFORM/wp-content/uploads/2021/09/heart.png" srctraining="MEINE_PLATTFORM/wp-content/uploads/2021/09/heart.gif" textlektion="Herzlichen Glückwunsch! Sie haben diese Lektion erfolgreich abgeschlossen!" texttraining="Herzlichen Glückwunsch! Sie haben das Training erfolgreich abgeschlossen!" titel="Super!" buttontitel="Fortfahren"]</code>
</p>
<p>
    <img alt="abzeichen_modal_beispiel.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/2799347290-abzeichen_modal_beispiel.PNG">
</p>
<h2 id="markdown-header-weitere-interaktive-elemente">Weitere interaktive Elemente</h2>
<h3 id="markdown-header-dragdrop-spiel">Drag&amp;Drop-Spiel</h3>
<p>
    Der Shortcode
    <code>[tspv2_drag_drop_game sections=""  items1="" items2="" items3=""]</code>
    integriert ein einfaches Drag&amp;Drop-Spiel, bei dem verschiedene Begriffe jeweils einem Bereich zugeordnet werden
    sollen. Nach der Zuordnung ist eine Auswertung über einen entsprechenden Button möglich. Die Bereiche werden über
    das Attribut
    <code>sections</code>
    von links nach rechts gelesen angelegt. Es müssen mindestens zwei Bereiche (Sections) hinterlegt werden. Die
    Begriffe werden sortiert nach ihrer Zugehörigkeit zu einem Bereich mit
    <code>items1</code>
    (zugehörig zur ersten Section),
    <code>items2</code>
    und
    <code>items3</code>
    angelegt. Standardmäßig sind verschiedene Grautöne als Farben hinterlegt. Diese können z.B. mit
    <code>colors="red, green, yellow"</code>
    geändert werden. Auch die Hex-Schreibweise (#FF0000) wird unterstützt. Auch hier gelten die Anweisungen von links
    nach rechts, sodass die linke Section rot wäre, die mittlere grün und die rechte gelb.
</p>
<p>Beispiel: Der folgende Shortcode integriert ein Spiel mit eigener Farbgebung, in dem Tiere ihrer Klasse zugeordnet
    werden sollen: </p>
<p>
    <code>[tspv2_drag_drop_game sections="Vögel, Säugetiere, Fische"  items1="Specht, Amsel, Meise" items2="Maus, Wal, Bär" items3="Hecht, Aal, Steinbutt" colors="#fed330, #45aaf2, #2bcbba"]</code>
    <br>
    <img alt="dd-game.png" src="https://bitbucket.org/repo/z8zjexy/images/975365678-dd-game.png">
</p>
<h3 id="markdown-header-timer">Timer</h3>
<p>
    Mithilfe des Shortcodes
    <code>[ts_timer h=number m=number s=number format="string" stop=number]</code>
    lässt sich ein Timer/Countdown in eine Seite einbinden. Mit den Parametern
    <code>h</code>
    ,
    <code>m</code>
    und
    <code>s</code>
    lässt sich die Zeit in Stunden, Minuten bzw. Sekunden für den Timer angeben. Wird einer dieser Parameter bei der
    Nutzung des Shortcodes weggelassen, wird für die entsprechende Zeiteinheit der Default-Wert 0 genutzt.
    <br>

    Mit dem Paramter
    <code>format</code>
    lässt sich die Art der Zeitdarstellung festlegen. Folgende Werte sind hierbei möglich:
</p>
<ul>
    <li>
        <code>format</code>
        = "hms": Die Zeit wird in der Form "hh:mm:ss" dargestellt. Der höchste mögliche Wert für diese Darstellung ist
        "23:59:59". Wird mit
        <code>h</code>
        ,
        <code>m</code>
        und
        <code>s</code>
        eine Zeit angegeben, die diesen Wert übersteigt, wird der erwähnte Höchstwert "23:59:59" für den Timer/Countdown
        genutzt.
    </li>
    <li>
        <code>format</code>
        = "ms": Die Zeit wird in der Form "mm:ss" dargestellt. Der höchste mögliche Wert für diese Darstellung ist
        "59:59". Wird mit
        <code>h</code>
        ,
        <code>m</code>
        und
        <code>s</code>
        eine Zeit angegeben, die diesen Wert übersteigt, wird der erwähnte Höchstwert "59:59" für den Timer/Countdown
        genutzt.
    </li>
    <li>
        <code>format</code>
        = "s": Hier wird die Zeit nur in Sekunden dargestellt. Sollte bei dieser Form der Darstellung die Zeit im
        Shortcode auch über die Parameter
        <code>h</code>
        und
        <code>m</code>
        angegeben worden sein, werden die Werte in Sekunden umgewandelt und zusammen mit dem Wert des Parameters
        <code>s</code>
        aufsummiert.
    </li>
</ul>
<p>
    Über den Parameter
    <code>stop</code>
    lässt sich der Modus für den Timer/Countdown festlegen:
</p>
<ul>
    <li>
        <code>stop</code>
        = 0 (Default-Wert): Der Button "Starte Countdown" wird nach Starten des Timers/Countdowns ausgegraut, sodass
        kein erneutes Starten möglich ist. Dieser Zustand wird erst mit Ablauf des Timers/Countdowns zurückgesetzt.
    </li>
    <li>
        <code>stop</code>
        = 1: Der Button "Starte Countdown" wird nach Starten des Timers/Countdowns durch den Button "Setze Countdown
        zurück" ersetzt, mit welchem der Timer/Countdown auf den mit
        <code>h</code>
        ,
        <code>m</code>
        und
        <code>s</code>
        angegebenen Ausgangswert zurückgesetzt wird.
    </li>
    <li>
        <code>stop</code>
        = 2: Der Button "Starte Countdown" wird nach Starten des Timers/Countdowns durch den Button "Stoppe Countdown"
        ersetzt, mit welchem der Timer/Countdown zu einem beliebigen Zeitpunkt angehalten werden kann. Mit dem darauf
        erscheinenden Button "Setze Countdown fort" kann der Timer/Countdown ab dem gestoppten Zeitpunkt wieder
        gestartet werden.
    </li>
</ul>
<p>
    <img alt="ts_timer_beispiel.PNG" src="https://bitbucket.org/repo/z8zjexy/images/2767469672-ts_timer_beispiel.PNG">
</p>
<h3 id="markdown-header-tooltips">Tooltips</h3>
<p>
    Für einzelne Worte oder längere Textpassagen können sogenannte Tooltips im Trainingssystem genutzt werden, sodass
    bei Hovern über dieses Element eine weitere Beschreibung als kleines Pop-up angezeigt werden kann. Hierfür wurde die
    <a data-is-external-link="true" href="https://getbootstrap.com/docs/4.0/components/tooltips/"
        rel="nofollow">Tooltip-Funktionalität von Bootstrap</a>
    integriert.
    <br>

    Die Tooltip-Funktionalität kann auf folgende Weise eingebunden werden:
    <br>
</p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            Bitte hovern Sie 
                                            <span class="p">&lt;</span>
                                            <span class="nt">span</span>
                                            <span class="na">data-toggle</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;tooltip&quot;</span>
                                            <span class="na">data-placement</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;bottom&quot;</span>
                                            <span class="na">title</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;Hier kann eine Beschreibung eingefügt werden!&quot;</span>
                                            <span class="p">&gt;</span>
                                            HIER
                                            <span class="p">&lt;/</span>
                                            <span class="nt">span</span>
                                            <span class="p">&gt;</span>
                                            , um weitere Beschreibungen zu erhalten.
                                        </pre>
</div>

Das Element, für welches das Tooltip angezeigt werden soll, muss hierbei durch ein HTML-Element wie
<code>&lt;span&gt;</code>
eingeschlossen werden. Über das Attribut
<code>data-toggle</code>
wird hierbei das Tooltip für das Element integriert. Die Position des Tooltips wird über das Attribut
<code>data-placement</code>
angegeben, wobei hierbei die Werte "top", "bottom", "left" und "right" möglich sind. Mit dem Attribut
<code>title</code>
kann die Beschreibung festgelegt werden, welche im Tooltip dargestellt werden soll.
<br>

Das obige Beispiel würde folgendes Ergebnis liefern:
<br>
<img alt="TooltipBsp1.JPG" src="https://bitbucket.org/repo/z8zjexy/images/498606114-TooltipBsp1.JPG">
<br>

Grundsätzlich sollte bei der Nutzung von Tooltips darauf geachtet werden, dass auch erkennbar ist, dass sie auf der
Seite vorhanden sind. Dazu sollte das Element, für das das Tooltip dargestellt werden soll, durch entsprechende Mittel,
z.B. gepunktetes Unterstreichen mit
<code>style="text-decoration:underline;text-decoration-style: dotted;"</code>
, Fettdruck mit
<code>&lt;b&gt;</code>
oder ähnlichem, gekennzeichnet werden.
<p></p>
<h1 id="markdown-header-trainingsentwicklung-layout-und-visuelle-elemente">Trainingsentwicklung: Layout und visuelle
    Elemente</h1>
<h2 id="markdown-header-layout">Layout</h2>
<p>
    Das Layout wird in erster Linie durch das Theme
    <a data-is-external-link="true" href="https://bitbucket.org/cosa1/coachlight.v2/" rel="nofollow">Coachlight</a>
    geregelt. Wie bereits einleitend erwähnt, enthält das Trainingssystem jedoch auch relevante Komponenten.
</p>
<h3 id="markdown-header-bootstrap">Bootstrap</h3>
<p>
    (Zwei) Spalten mit Bootstrap-Klassen:
    Das Frontend-Framework
    <a data-is-external-link="true" href="https://getbootstrap.com" rel="nofollow">Bootstrap</a>
    stellt Inhalte in einem 12er-Grid dar. Die Ziffern in den Klassenbezeichnungen müssen zusammen jeweils 12 ergeben,
    wenn zwei Spalten dargestellt werden sollen. Soll die ganze Breite mit einer Spalte gefüllt werden, ist 12
    einzutragen (wie im Beispiel bei xs für mobile Geräte).
</p>
<p>Beispiel für zwei Spalten mit einem Bild links (zu vier Anteilen) und einem Text rechts (zu acht Anteilen):</p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;row&quot;</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;col-xs-12 col-sm-4 col-md-4 col-lg-4&quot;</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">img</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;img-responsive pull-left&quot;</span>
                                            <span class="na">src</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;....&quot;</span>
                                            <span class="na">alt</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;text&quot;</span>
                                            <span class="p">/&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;col-xs-12 col-sm-8 col-md-8 col-lg-8&quot;</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                                                 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                                                 At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                                                 no sea takimata sanctus est Lorem ipsum dolor sit amet.
                                            <span class="p">&lt;/</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                        </pre>
</div>

<p>Um beispielsweise ein kleines Bild (z.B. Portrait einer Person) mit einem entsprechenden Text anzuzeigen, sind
    folgende Werte zu empfehlen:</p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;row&quot;</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;col-xs-6 col-sm-3 col-md-2 col-lg-2&quot;</span>
                                            <span class="p">&gt;</span>

                                                BILD
                                              
                                            <span class="p">&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;col-xs-12 col-sm-9 col-md-10 col-lg-10&quot;</span>
                                            <span class="p">&gt;</span>

                                                TEXT
                                              
                                            <span class="p">&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                        </pre>
</div>

<h3 id="markdown-header-klassen">Klassen</h3>
<p>
    Für das Layout steht in Bootstrap eine Vielzahl an Klassen zur Verfügung. Die genaue Verwendung ist der
    <a data-is-external-link="true" href="https://getbootstrap.com/docs/4.4/utilities/spacing/"
        rel="nofollow">Dokumentation</a>
    von Bootstrap selbst zu entnehmen. Ein unterer Abstand (margin-bottom) ist beispielsweise über die Klassen mb-0 bis
    mb-5 zu realisieren.
</p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            #!html
                                            <span class="nt">&lt;div</span>
                                            <span class="na">class=</span>
                                            <span class="s">&quot;container&quot;</span>
                                            <span class="nt">&gt;</span>
                                            <span class="nt">&lt;div</span>
                                            <span class="na">class=</span>
                                            <span class="s">&quot;mb-1&quot;</span>
                                            <span class="nt">&gt;</span>
                                            Ich habe wenig Abstand nach unten
                                            <span class="nt">&lt;/div&gt;</span>
                                            <span class="nt">&lt;div</span>
                                            <span class="na">class=</span>
                                            <span class="s">&quot;mb-5&quot;</span>
                                            <span class="nt">&gt;</span>
                                            Ich habe viel Abstand nach unten
                                            <span class="nt">&lt;/div&gt;</span>
                                            <span class="nt">&lt;div&gt;</span>
                                            Ich bin nur so hier und verdeutliche den Abstand des Divs über mir.
                                            <span class="nt">&lt;/div&gt;</span>
                                            <span class="nt">&lt;/div&gt;</span>
                                        </pre>
</div>

<p>Ein oberer Abstand (margin-top) ist entsprechend mit den Klassen mt-0 bis mt-5 umzusetzen. Auch links und rechts ist
    durch entsprechende Klassen abgedeckt. Ein Innenabstand (padding) funktioniert auf die gleiche Weise (pb-0 bis
    pb-5). Weiterhin können mit sm, md, lg, und xl die Bildschirmgrößen hinzugefügt werden, für die der Abstand gelten
    soll. Beispiel: mb-md-5 für einen großen unteren Abstand bei kleiner bis mittlerer Bildschirmbreite. </p>
<p>
    Daneben sind im Theme
    <a data-is-external-link="true" href="https://bitbucket.org/cosa1/coachlight.v2/" rel="nofollow">Coachlight</a>
    einige Klassen integriert worden, um Eigenschaften für das Layout und Design zu vergeben. Diese sollten jedoch nicht
    mehr verwendet werden. Für die Umsetzung der entsprechenden Anweisungen stehen zahlreiche Klassen von Bootstrap zur
    Verfügung:
</p>
<table>
    <thead>
        <tr>
            <th>Funktion</th>
            <th>Bootstrap 4 (TS ab Version 2.1.0)</th>
            <th>alte Klassen (nicht mehr verwenden!)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Innenabstand</td>
            <td>.p-1, .p-2, ...</td>
            <td>.abstand</td>
        </tr>
        <tr>
            <td>Abstand rechts</td>
            <td>.mr-1, .mr-2, ...</td>
            <td>.abstand-rechts</td>
        </tr>
        <tr>
            <td>Innenabstand rechts</td>
            <td>.pr-1, .pr-2, ...</td>
            <td>.padding-rechts</td>
        </tr>
        <tr>
            <td>(Innen-)Abstand oben</td>
            <td>.mt-1, .mt-2, .pt-1, .pt-2, ...</td>
            <td>.bildhoehe, .oben30, .rowabstand</td>
        </tr>
        <tr>
            <td>(Innen-)Abstand unten</td>
            <td>.mb-1, .mb-2, ...</td>
            <td>.marginbottom10, .marginbottom20</td>
        </tr>
        <tr>
            <td>(Innen-)Abstände unterbinden</td>
            <td>.m-0, .p-0, .mb-0, pl-0, ml-0, ...</td>
            <td>.keinabstand, .nomarginbottom, .keineinzug</td>
        </tr>
        <tr>
            <td>kein (Innen-)Abstand oben</td>
            <td>.mt-0, .pt-0</td>
            <td>.keinabstandoben</td>
        </tr>
        <tr>
            <td>Bild über die ganze Breite</td>
            <td>.w-100</td>
            <td>.bildbreite</td>
        </tr>
    </tbody>
</table>
<h3 id="markdown-header-bereiche">Bereiche</h3>
<p>Um Bereiche innerhalb der Trainingsseiten kenntlich zu machen, stehen Klassen zur Verfügung. So kann beispielsweise
    eine Überschrift mit einem farbigen Rahmen versehen werden (Klasse "info") und ein entsprechendes Icon (Klasse
    "icon-info") davor angezeigt werden. Neben der Klasse Info, um z.B. auf Informationsbereiche hinzuweisen, ist auch
    eine Klasse "exer" (von Exercices) für einen Übungsbereich vorhanden. Für diese Klasse wird eine entsprechende
    Highlight-Farbe verwendet, wodurch sie auch für andere Inhaltsbereiche für die Aufmerksamkeitssteuerung verwendet
    werden kann. </p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;info&quot;</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;icon-info&quot;</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">h3</span>
                                            <span class="p">&gt;</span>
                                            Überschrift in h3
                                            <span class="p">&lt;/</span>
                                            <span class="nt">h3</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                        </pre>
</div>

<p>Soll über mehrere Zeilen hinweg, beispielsweise in einem größeren "Kasten", informiert werden, kann das Code-Beispiel
    auch mit einem p-Tag (anstatt hier h3) verwendet werden. </p>
<p>
    <img alt="beispiel_info_exer.PNG" src="https://bitbucket.org/repo/z8zjexy/images/527441347-beispiel_info_exer.PNG">
</p>
<h3 id="markdown-header-automatische-silbentrennung">Automatische Silbentrennung</h3>
<p>Mit der CSS-Klasse „hyphens-auto“ kann eine automatische Silbentrennung für Texte erzwungen werden. </p>
<h2 id="markdown-header-shortcode-ubersicht-fur-visuelle-elemente">Shortcode-Übersicht für visuelle Elemente</h2>
<p>Im Folgenden werden visuelle Elemente beschrieben, welche in Trainingsseiten eingefügt werden können. Einiger dieser
    Elemente werden dabei als Shortcode eingebunden. Die folgende Tabelle soll hierbei als Übersicht über alle
    Shortcodes für visuelle Elemente dienen: </p>
<table>
    <thead>
        <tr>
            <th>Shortcode</th>
            <th>Funktion</th>
            <th>Parameter</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <code>[ts_carousel]</code>
            </td>
            <td>
                <a data-is-external-link="true" href="#markdown-header-slideshow" rel="nofollow">Slideshow</a>
            </td>
            <td>
                <code>fullwidth</code>
                für Art der Slideshow (optional, Default-Wert: „“ (kleine Variante)),
                <code>controls</code>
                (nur für
                <code>fullwidth="1"</code>
                ) für das Einbinden von Buttons zum manuellen Durchschalten der Bilder (optional, Default-Wert: „“
                (keine Buttons)),
                <code>indicators</code>
                (nur für
                <code>fullwidth="1"</code>
                ) für das Einbinden von Indikatoren (optional, Default-Wert: „“ (keine Indikatoren)),
                <code>text</code>
                (nur für
                <code>fullwidth="1"</code>
                ) für das Einbinden von Beschriftungen für die Bilder (optional, Default-Wert: leeres Array),
                <code>headline</code>
                (nur für
                <code>fullwidth="1"</code>
                ) für das Einbinden von Überschriften für die Bilder (optional, Default-Wert: leeres Array),
                <code>textcolor</code>
                (nur für
                <code>fullwidth="1"</code>
                ) für die Angabe einer Farbe für den Text (optional, Default-Wert: „FFFFFF“ (weiß)),
                <code>headlinecolor</code>
                (nur für
                <code>fullwidth="1"</code>
                ) für die Angabe einer Farbe für die Überschriften (optional, Default-Wert: „FFFFFF“ (weiß)),
                <code>links</code>
                (nur für
                <code>fullwidth="1"</code>
                ) für die Angabe von Links (optional, Default-Wert: leeres Array),
                <code>linktexts</code>
                (nur für
                <code>fullwidth="1"</code>
                ) für die Angabe von Beschriftungen für die Links (optional, Default-Wert: leeres Array),
                <code>interval</code>
                (nur für
                <code>fullwidth="0"</code>
                ) für die Angabe der Zeit in ms bis zum Wechsel zum nächsten Bild (optional, Default-Wert: 2000),
                <code>amount</code>
                (nur für
                <code>fullwidth="0"</code>
                ) für die Anzahl an Bildern, die zur gleichen Zeit angezeigt werden sollen (optional, Default-Wert: 3),
                <code>border</code>
                (nur für
                <code>fullwidth="0"</code>
                ) für das Einbinden eines Rahmens um die Bilder (optional, DefaultWert: „1“)
            </td>
        </tr>
    </tbody>
</table>
<h2 id="markdown-header-icons">Icons</h2>
<h4 id="markdown-header-einbinden-von-icons">Einbinden von Icons</h4>
<p>
    Für den Einsatz von Icons im Trainingssystem wird die Bibliothek
    <a data-is-external-link="true" href="https://fontawesome.com/" rel="nofollow">Font Awesome</a>
    empfohlen. Wurde ein passendes Icon gefunden, kann der HTML-Code in die Zwischenablage kopiert und somit auf
    einfache Weise in der Seite eingebunden werden:
</p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                            Hier wurde ein Herz mit der Klasse &quot;fas fa-heart&quot; eingebunden: 
                                            <span class="p">&lt;/</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">i</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;fas fa-heart&quot;</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">i</span>
                                            <span class="p">&gt;</span>
                                        </pre>
</div>

<p>
    <img alt="fontawesome-icon.PNG" src="https://bitbucket.org/repo/z8zjexy/images/280850232-fontawesome-icon.PNG">
</p>
<h4 id="markdown-header-ts-icons">TS-Icons</h4>
<p>Zusätzlich können für die Icons auch Kreise in der Highlight-Farbe des aktuelllen Themes ergänzt werden, welche diese
    umschließen. Dazu muss neben den Klassen für das Icon aus der Bibliothek „Font Awesome“ die Klasse „ts-icon“ sowie
    eine der drei Klassen „ts-icon-small“, „ts-icon-medium“ oder „ts-icon-large“ zur Angabe der Größe des Kreises
    genutzt werden. Soll das Icon selbst weiß sein, muss daneben noch die Klasse „white“ eingefügt werden. </p>
<p>
    <img alt="ts-icon.PNG" src="https://bitbucket.org/repo/z8zjexy/images/4151918354-ts-icon.PNG">
</p>
<h2 id="markdown-header-slideshow">Slideshow</h2>
<p>
    Mit dem Shortcode
    <code>[ts_carousel]</code>
    lässt sich eine Slideshow auf einer Seite einbinden, welche automatisch durch eine Reihe an Bildern schaltet. Die
    Bilder müssen dabei auf folgende Weise durch die Tags des Shortcodes eingeschlossen werden:
</p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            [ts_carousel]
                                            <span class="p">&lt;</span>
                                            <span class="nt">img</span>
                                            <span class="na">src</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;...&quot;</span>
                                            <span class="na">alt</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;...&quot;</span>
                                            <span class="p">&gt;</span>

                                            ...
                                            <span class="p">&lt;</span>
                                            <span class="nt">img</span>
                                            <span class="na">src</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;...&quot;</span>
                                            <span class="na">alt</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;...&quot;</span>
                                            <span class="p">&gt;</span>

                                            [/ts_carousel]
                                        </pre>
</div>

<p>Zusätzlich verfügt dieser Shortcode optionale Parameter, mit denen weitere Anpassungen an der Slideshow vorgenommen
    werden können: </p>
<ul>
    <li>
        <code>fullwidth</code>
        : Über diesen Parameter kann die Art der Slideshow festgelegt werden. Wird der Parameter auf den Wert „1“ (
        <code>fullwidth="1"</code>
        ) gesetzt, wird die Slideshow über die volle Breite der Seite dargestellt. Wird der Parameter nicht angegeben,
        wird eine kleine Variante mit drei Bildern auf der Seite angezeigt.
    </li>
    <li>
        <code>controls</code>
        (nur für
        <code>fullwidth="1"</code>
        ): Wird dieser Parameter auf den Wert „1“ (
        <code>controls="1"</code>
        ) gesetzt, werden der Slideshow auf der linken und auf der rechten Seite Buttons hinzugefügt, mit denen manuell
        durch die einzelnen Bilder geschaltet werden kann.
    </li>
    <li>
        <code>indicators</code>
        (nur für
        <code>fullwidth="1"</code>
        ): Dieser Parameter fügt am unteren Slideshow Indikatoren hinzu, welche die Position des aktuellen Bilds in der
        Reihenfolge anzeigt. Sollen Indikatoren ergänzt werden, muss der Parameter auf den Wert „1“ (
        <code>indicators="1"</code>
        ) gesetzt werden.
    </li>
    <li>
        <code>text</code>
        (nur für
        <code>fullwidth="1"</code>
        ): Mit diesem Parameter kann Text als Beschriftung für jedes Bild angegeben werden. Die einzelnen Beschriftungen
        müssen dabei in Reihenfolge der Bilder als Liste angegeben werden, wobei diese durch das Zeichen „|“ voneinander
        getrennt werden müssen.
    </li>
    <li>
        <code>headline</code>
        (nur für
        <code>fullwidth="1"</code>
        ): Dieser Parameter fügt jedem Bild zusätzlich eine Überschrift hinzu, welche oberhalb der mittels
        <code>text</code>
        angegebenen Beschriftung dargestellt wird. Genau wie beim Parameter
        <code>text</code>
        müssen die Überschriften hierbei in Reihenfolge der Bilder als Liste angegeben werden. Die einzelnen
        Überschriften müssen auch bei diesem Parameter durch das Zeichen „|“ getrennt werden.
    </li>
    <li>
        <code>textcolor</code>
        (nur für
        <code>fullwidth="1"</code>
        ): Mit diesem Parameter kann die Schriftfarbe des Textes angepasst werden. Die Schriftfarbe muss hierbei als
        Hexadezimalwert angegeben werden (Default-Wert: „FFFFFF“ (weiß)).
    </li>
    <li>
        <code>headlinecolor</code>
        (nur für
        <code>fullwidth="1"</code>
        ): Mit diesem Parameter kann die Schriftfarbe der Überschrift angepasst werden. Die Schriftfarbe muss hierbei
        als Hexadezimalwert angegeben werden (Default-Wert: „FFFFFF“ (weiß)).
    </li>
    <li>
        <code>links</code>
        (nur für
        <code>fullwidth="1"</code>
        ): Mit diesem Parameter können Links für die einzelnen Bilder hinterlegt werden. Die Links müssen in Reihenfolge
        der Bilder angegeben und durch das Zeichen „|“ getrennt werden.
    </li>
    <li>
        <code>linktexts</code>
        (nur für
        <code>fullwidth="1"</code>
        ): Für die mit
        <code>links</code>
        angegebenen Links können mit diesem Parameter Beschriftungen ergänzt werden. Die Beschriftungen für die Links
        müssen in Reihenfolge der Bilder angegeben und durch das Zeichen „|“ getrennt werden.
    </li>
</ul>
<p>Die kleine Variante verfügt über weitere Parameter:</p>
<ul>
    <li>
        <code>interval</code>
        : Zeit (Intervall in Millisekunden) bis zum nächsten Bild. (Default-Wert: 2000)
    </li>
    <li>
        <code>amount</code>
        : Anzahl der gleichzeitigen Bilder ,mögliche Werte sind dabei
        <code>1</code>
        <code>2</code>
        <code>3</code>
        <code>4</code>
        <code>6</code>
        . (Default-Wert: 3)
    </li>
    <li>
        <code>border</code>
        : Über diesen Parameter kann der Border ausgeschaltet werden, wenn
        <code>border=„0“</code>
        gesetzt wird. (Default-Wert: 1)
    </li>
</ul>
<h1 id="markdown-header-weitere-elemente-des-trainingssystems">Weitere Elemente des Trainingssystems</h1>
<h2 id="markdown-header-limesurvey-anbindung">LimeSurvey Anbindung</h2>
<p>
    Im Rahmen einer Kooperation wurde von
    <a data-is-external-link="true" href="https://www.effective-webwork.de/" rel="nofollow">effective webwork</a>
    eine LimeSurvey Integration für das Trainingssystem-Plugin entwickelt.
    Hiermit ist es möglich vor Beginn eines Trainings, direkt nach Beendigung des Trainings und nochmals nach einer
    gewissen Zeitspanne nach Beendigung des Trainings eine Befragung mittels einer LimeSurvey Umfrage durchzuführen.
    Ebenfalls werden die Teilnehmenden mit jeweils bis zu 2 Erinnerungsmails auf die beiden Befragungen nach Beendigung
    hingewiesen, sollten sie die Befragung noch nicht durchgeführt haben. Diese Umfragen werden außerhalb des
    Trainingssystems erstellt und durchgeführt und werden durch Verlinkungen in der Lektionsübersicht in das
    Trainingssystem eingebunden.
    Um diese Funktion nutzen zu können, sind vorab einige Einstellungen vorzunehmen:
</p>
<ul>
    <li>
        In den Einstellungen des Trainingssystems unter „Trainingssystem-&gt;Einstellungen–&gt;LimeSurvey-Einstellungen“
        muss die URL sowie Benutzername und Passwort zum Zugriff auf den LimeSurvey-Server angegeben werden.
        <strong>Achtung:</strong>
        Es muss ein gesonderter lokaler API-Nutzer auf dem LimeSurvey-Server angelegt werden, der Standardnutzer kann
        auf die Schnittstelle nicht zugreifen.
    </li>
    <li>
        <em>optional:</em>
        Sollten andere Zeitspannen zum Senden der Hinweismails gewünscht sein, können diese Werte hier ebenfalls
        angepasst werden.
    </li>
    <li>
        Das Plugin
        <a data-is-external-link="true" href="https://www.advancedcustomfields.com/" rel="nofollow">Advanced Custom
            Fields</a>
        muss installiert werden.
    </li>
    <li>
        <p>
            In diesem Plugin muss eine neue Feldgruppe
            <code>LimeSurvey</code>
            angelegt werden und innerhalb dieser Gruppe drei Felder erstellt werden:
        </p>
        <ul>
            <li>
                Beschriftung:
                <code>LimeSurvey Umfrage-ID - Vor dem Training</code>
                , Name:
                <code>limesurvey_id_before_training</code>
            </li>
            <li>
                Beschriftung:
                <code>LimeSurvey Umfrage-ID - Nach dem Training</code>
                , Name:
                <code>limesurvey_id_after_training</code>
            </li>
            <li>
                Beschriftung:
                <code>LimeSurvey Umfrage-ID - Checkup</code>
                , Name:
                <code>limesurvey_id_after_training_check</code>
            </li>
        </ul>
    </li>
    <li>
        <p>
            Als Regel im Reiter Position ist
            <code>Inhaltstyp</code>
            ,
            <code>ist gleich</code>
            und
            <code>Trainings</code>
            auszuwählen. Nun kann die Feldgruppe veröffentlicht werden.
        </p>
    </li>
    <li>Auf jeder Trainings-Seite im WordPress-Backend finden sich nun 3 Textfelder, in denen die IDs der entsprechenden
        Umfragen eingetragen werden können.</li>
</ul>
<p>
    <img alt="LimeSurvey_ACF.png" src="https://bitbucket.org/repo/z8zjexy/images/921368919-LimeSurvey_ACF.png">
</p>
<h2 id="markdown-header-demo-training">Demo-Training</h2>
<p>
    Der Shortcode
    <code>[tspv2_demo_login id="123"]</code>
    ermöglicht Demo-Trainings, die ohne den herkömmlichen Login-Prozess funktionieren.
    Zunächst muss ein Demo-Benutzer mit der Rolle „Abonnent“ im System angelegt werden. Diesem Demo-Benutzer können dann
    „Schnupperversionen“ bzw. Demo-Trainings wie gehabt über die
    <a data-is-external-link="true" href="#markdown-header-trainingszuweisung" rel="nofollow">Trainingszuweisung</a>
    freigegeben werden.
    Über den Parameter
    <code>id</code>
    muss hierbei die ID für den entsprechenden Demo-Benutzer angegeben werden.
    Der Shortcode verfügt über optionale Parameter:
</p>
<ul>
    <li>
        <code>titel</code>
        : Mit diesem Parameter kann die Buttonbeschriftung festgelegt werden. Ansonsten wird der Default-Wert „Zur
        Demo-Version“ genutzt.
    </li>
    <li>
        <code>redirect</code>
        : Dieser Parameter kann zum Einstellen einer Weiterleitung auf eine bestimmte Seite genutzt werden. Die
        Default-Weiterleitung ist stets die Startseite.
    </li>
</ul>
<p>
    Um die Berechtigung des Speicherns für den Demo-Benutzer zu entziehen, muss auf der
    <a data-is-external-link="true" href="#markdown-header-nutzer-detail-seite" rel="nofollow">Nutzer-Detail-Seite</a>
    die Checkbox „User darf Inhalte in der Datenbank speichern“ abgewählt werden.
</p>
<p>
    Hinweis: Der mit dem Shortcode
    <code>[tspv2_demo_login]</code>
    erzeugte Button für den Login als Demo-Benutzer wird für eingeloggte Benutzer*innen ausgeblendet.
</p>
<h2 id="markdown-header-studien-export">Studien-Export</h2>
<p>
    Mit dem Shortcode
    <code>[tspv2_study_export]</code>
    kann ein Export von Benutzereingaben für Formulare der Typen „Skala“ oder „Matrix“ in eine Seite eingebunden werden.
    Über den Parameter
    <code>titel</code>
    kann anstelle des Default-Werts „Studien-Export“ ein eigener Titel für den Export ausgewählt werden.
    <br>

    Für den Export der Eingaben sind grundsätzlich zwei Schritte nötig:
    <br>

    Im ersten Schritt müssen in der Tabelle im oberen Bereich der Übersicht einerseits die gewünschten Trainings durch
    das Setzen der entsprechenden Checkboxen ausgewählt sowie eine Auswahl an Skala- bzw. Matrix-Formularen für den
    Export bestimmt werden. Die Formulare können hierbei über die Checkbox-Liste gewählt werden. Es ist dabei auch
    möglich, nach bestimmten Bezeichnungen oder IDs über die Such-Funktion gesucht werden. Neben der Auswahl von
    Trainings kann der Export auch auf bestimmte Lektionen des Trainings beschränkt werden, indem die entsprechenden
    Checkboxen auf Lektions-Ebene gesetzt werden.
    <br>

    Wurde eine Auswahl an Trainings bzw. Lektionen sowie Formularen getroffen, muss zusätzlich noch angegeben werden,
    für welche Benutzer*innen der Plattform der Export durchgeführt werden soll. Eine Auswahl an Benutzer*innen kann
    dabei über die Liste bzw. über die Such-Funktion oberhalb der Liste bestimmt werden.
    <br>

    Abschließend muss für den Export nur noch auf den „Exportieren“-Button geklickt werden und die zu exportierenden
    Daten werden als CSV-Datei heruntergeladen.
</p>
<p>Hinweis: Je nach Auswahl der Trainings sowie Benutzer*innen kann der Export der Daten ein wenig Zeit in Anspruch
    nehmen. </p>
<h2 id="markdown-header-lieblingsubungen">Lieblingsübungen</h2>
<p>
    Eine Übersicht über alle
    <a data-is-external-link="true" href="#markdown-header-ubungen" rel="nofollow">Übungen</a>
    , die durch die Benutzer*innen als Favorit markiert wurden, kann über den Shortcode
    <code>[tspv2_exercise_favorites]</code>
    in eine Seite eingebunden werden. Auf dieser Seite können die Benutzer*innen die favorisierten Übungen erneut
    betrachten sowie auf Wunsch diese über den Button „Aus Favoriten entfernen“ aus der Übersicht wieder entfernen.
    Außerdem ist es möglich, über den Button „Übung aus Training X“ bzw. „Übung aus einer anderen Seite“ direkt zur
    Seite zu gelangen, in der die entsprechende Übung eingebunden bzw. als Favorit markiert wurde.
</p>
<p>
    <img alt="lieblingsuebungen.PNG" src="https://bitbucket.org/repo/z8zjexy/images/26360317-lieblingsuebungen.PNG">
</p>
<p>
    Mit dem optionalen Parameter
    <code>titel</code>
    kann anstelle des Standardwerts „Lieblingsübungen“ eine eigene Überschrift für diese Seite festgelegt werden. Des
    Weiteren kann über den optionalen Parameter
    <code>orderby</code>
    die Sortierung für die Übungen bestimmt werden. Es sind hierbei folgende Werte möglich:
</p>
<ul>
    <li>
        <code>title_asc</code>
        (Standardwert): Die Übungen werden aufsteigend nach dem Titel sortiert.
    </li>
    <li>
        <code>title_desc</code>
        : Die Übungen werden absteigend nach dem Titel sortiert.
    </li>
    <li>
        <code>date_asc</code>
        : Die Übungen werden aufsteigend nach dem Datum sortiert, an dem diese als Favorit markiert wurden.
    </li>
    <li>
        <code>date_desc</code>
        : Die Übungen werden aufsteigend nach dem Datum sortiert, an dem diese als Favorit markiert wurden.
    </li>
</ul>
<h2 id="markdown-header-zertifikate">Zertifikate</h2>
<p>
    <strong>Hinweis: Diese Funktion ist veraltet und wird bald überarbeitet.</strong>
</p>
<p>
    Neben Abzeichen können auch Zertifikate eingestellt werden, welche bei Abschluss des Trainings den Benutzer*innnen
    ausgestellt werden. Dazu muss zunächst für das entsprechende Training im Backend unter
    „Trainingssystem-&gt;Zertifikate“ ein Zertifikat erstellt und im Dropdown-Menü dem Training zugeordnet werden. Über
    den Shortcode
    <code>[tspv2_zertifikate]</code>
    kann eine Übersicht über alle Zertifikate eingebunden werden.
</p>
<h2 id="markdown-header-hilfe-kontaktinformationen">Hilfe-/Kontaktinformationen</h2>
<p>
    Mit dem Shortcode
    <code>[tspv2_show_contactinfo]</code>
    können den Benutzer*innen Informationen für den Kontakt bzw. für Hilfe bereitgestellt werden. Über den optionalen
    Parameter
    <code>titel</code>
    kann eine eigene Überschrift anstelle des Standardwerts „Kontakt“ festgelegt werden. Soll keine Überschrift
    angezeigt werden, muss dies durch einen leeren Wert (
    <code>title=""</code>
    ) angegeben werden.
    <br>

    Grundsätzlich werden den Benutzer*innen die Kontaktinformationen der eigenen Führungskraft, dem zugeordneten
    Krankenkassenadmin und einem zugeordneten Coach angezeigt. Für jeden Kontakt ist hierbei der Name, die
    E-Mail-Adresse sowie eine Telefonnummer aufgeführt, sofern diese im System hinterlegt wurden. Ist eine Person mit
    einer der genannten Rollen für eine*n Benutzer*in nicht vorhanden, weil bspw. diesem*r kein Coach zugewiesen wurde
    oder für die Firma keine Führungskraft bzw. kein Krankenkassenadmin eingetragen wurde, wird kein Kontakt für diese
    Rolle in der Auflistung angezeigt. Soll einer oder mehrere dieser festen Kontakte bewusst nicht aufgeführt werden,
    können diese über den optionalen Parameter
    <code>exclude</code>
    für die Darstellung ausgeschlossen werden. Dazu müssen eine oder mehrere der folgenden Rollen als Liste (mehrere
    Elemente müssen durch Komma getrennt werden) diesem Parameter übergeben werden:
</p>
<ul>
    <li>„boss“ für die Führungskraft.</li>
    <li>„kadmin“ für den Krankenkassenadmin.</li>
    <li>„coach“ für den Coach. </li>
</ul>
<p>
    Des Weiteren können neben den oben aufgeführten Kontakten für die Rollen Führungskraft, Krankenkassenadmin und Coach
    auch noch weitere Kontakte als Liste über den Parameter
    <code>contacts</code>
    angegeben werden. Es sind hierbei zwei Formen für die Angabe eines Kontakts möglich:
    <br>

    In der ersten Variante kann ein weiterer Kontakt in der Form „Titel|Name|E-Mail-Adresse|Telefonnummer“ angegeben
    werden. Diese Variante ist zu empfehlen, wenn der Kontakt kein Profil im System besitzt.
    <br>

    Alternativ kann in der zweiten Variante ein Kontakt auch in der Form „Titel|ID“ aufgeführt werden, wobei es sich um
    „ID“ bei der ID eines*r Benutzer*in handelt, welche auf der Plattform registriert ist.
    <br>

    Bei beiden Varianten kann über den ersten Wert „Titel“ eine Überschrift für diesen Kontakt bestimmt werden. Mehrere
    Kontakte müssen dabei jeweils durch ein „||“ voneinander getrennt werden.
    <br>

    Mit dem optionalen Parameter
    <code>mode</code>
    kann die Art der Darstellung der Kontakte festgelegt werden. Es stehen hierbei folgende Werte zur Auswahl:
</p>
<ul>
    <li>leerer Wert bzw. Weglassen des Parameters (Standard): Die Kontakte werden untereinander als Liste aufgeführt.
    </li>
    <li>„singlecard“: Die Kontakte werden untereinander als Liste aufgeführt. Jeder Kontakt erhält einen Rahmen. </li>
    <li>„multicard“: Die Kontakte werden untereinander als Liste aufgeführt, wobei sich in jeder Reihe zwei Kontakte
        befinden. Jeder Kontakt erhält einen Rahmen. </li>
</ul>
<p>Nachfolgend werden einige Beispiele zur Nutzung dieses Shortcodes aufgeführt: </p>
<p>Es werden die Kontaktinformationen für die Führungskraft, für den Krankenkassenadmin sowie den Coach, aber für keine
    weitere Rolle aufgeführt. </p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            [tspv2_show_contactinfo]
                                        </pre>
</div>

<p>
    <img alt="contactinfo_nocard.PNG" src="https://bitbucket.org/repo/z8zjexy/images/3422721640-contactinfo_nocard.PNG">
</p>
<p>
    Es werden die Kontaktinformationen für die Führungskraft und den Krankenkassenadmin angezeigt. Die Rolle Coach wird
    hier über den Parameter
    <code>exclude</code>
    bewusst ausgeschlossen und dementsprechend nicht dargestellt. Die einzelnen Kontakte erhalten hier einen Rahmen und
    werden untereinander aufgelistet.
</p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            [tspv2_show_contactinfo exclude=&quot;coach&quot; mode=&quot;singlecard&quot;]
                                        </pre>
</div>

<p>
    <img alt="contactinfo_singlecard.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/3474074752-contactinfo_singlecard.PNG">
</p>
<p>
    Es werden hier alle festen Rollen über den Parameter
    <code>exclude</code>
    ausgeschlossen und nicht angezeigt. Stattdessen werden zwei Kontakte angezeigt, welche über den Parameter
    <code>contacts</code>
    angegeben wurden. Die einzelnen Kontakte erhalten jeweils einen Rahmen und es werden pro Reihe jeweils zwei Kontakte
    nebeneinander dargestellt.
</p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            [tspv2_show_contactinfo exclude=&quot;boss, kadmin, coach&quot; mode=&quot;multicard&quot; 
                                            contacts=&quot;Ihr Ansprechpartner für technische Fragen|Test1|test1@test123.de|0123456789||Ihr Ansprechpartner für inhaltliche Fragen|259&quot;]
                                        </pre>
</div>

<p>
    <img alt="contactinfo_multicard.PNG"
        src="https://bitbucket.org/repo/z8zjexy/images/3410959888-contactinfo_multicard.PNG">
</p>
<h1 id="markdown-header-entwicklung">Entwicklung</h1>
<h2 id="markdown-header-allgemeine-hinweise-zur-weiterentwicklung-des-plugins">Allgemeine Hinweise zur Weiterentwicklung
    des Plugins</h2>
<ul>
    <li>
        Wichtig beim Klonen für die lokale Weiterentwicklung ist das einmalige Ausführen von
        <code>composer install</code>
        im
        <code>trainingssystem-plugin</code>
        - Ordner zur Generierung der vendor-Dependencies.
    </li>
    <li>
        Wenn im Plugin ein neuer Post-Type, neue Optionen oder neue Einträge (
        <code>meta_key</code>
        ) für die Tabelle
        <code>usermeta</code>
        angelegt wurden, müssen diese in der Datei
        <code>uninstall.php</code>
        referenziert werden, damit diese bei der Deinstallation des Plugins ebenfalls entfernt werden.
    </li>
</ul>
<h2 id="markdown-header-aufbau-des-plugins">Aufbau des Plugins</h2>
<p>Dem Plugin liegt die folgende Struktur zugrunde: </p>
<ul>
    <li>
        <code>admin</code>
        -&gt; das css/less-Design und die JS-Scripte für das Backend werden geladen
    </li>
    <li>
        <code>assets</code>
        -&gt; Alle Programmteile, die nicht in PHP geschrieben sind: CSS, JS, SASS, externe Libraries.
    </li>
    <li>
        <code>gulpfile.js</code>
        -&gt; zum Kompilieren des Plugins
    </li>
    <li>
        <p>
            <code>includes</code>
            -&gt; der Hauptordner aller Funktionalitäten:
        </p>
        <ul>
            <li>
                <code>database</code>
                -&gt; Datenbankschnittstelle
            </li>
            <li>
                <code>hooks-define</code>
                -&gt; Hooks, Filter, Shortscodes werden für das Frontend oder Backend definiert
            </li>
            <li>
                <code>module</code>
                -&gt; größere Programmteile mit in sich abgeschlossener Funktionalität
            </li>
        </ul>
    </li>
    <li>
        <p>
            <code>output</code>
            -&gt; Ausgabe von gulpfile.js
        </p>
    </li>
    <li>
        <code>plugin-update-checker</code>
        -&gt; Programmteil, der prüft, ob Updates vorhanden sind und diese ggf. lädt
    </li>
    <li>
        <code>public</code>
        -&gt; das css/less-Design und die JS-Scripte für das Frontend werden geladen
    </li>
    <li>
        <code>templates</code>
        -&gt; Ordner für die Twig-Templates
    </li>
    <li>
        <code>trainingssystem-plugin.php</code>
        -&gt; Hauptdatei des Plugins, mit der es startet
    </li>
</ul>
<h2 id="markdown-header-funktionalitat-hinzufugen">Funktionalität hinzufügen</h2>
<p>Zur Weiterentwicklung des Plugins ist die vorgegebene Struktur einzuhalten. Im Folgenden ist anhand eines Beispiels
    erläutert, wie bei Weiterentwicklungen vorzugehen ist. </p>
<p>Beispiel: Es soll eine neue Funktionalität, beispielsweise das Verwalten von Benutzer*innen, Betrachten von Eingaben
    o.ä., entstehen: </p>
<ol>
    <li>
        Im Backend unter Settings muss ein neuer Eintrag entstehen.
        <br>

        Dazu muss die Datei unter module -&gt; Settingspage um diesen Eintrag erweitert werden.
    </li>
    <li>
        Es muss ein Menüeintrag hinzugefügt werden.
        <br>

        Dazu muss die Datei unter module -&gt; frontend-menu erweitert werden, die auf Settings zugreift.
    </li>
    <li>Der hauptsächliche Programmcode der Funktion kann/sollte zu einem eigenen Modul gemacht werden. </li>
    <li>Das neue Modul muss unter includes -&gt; class-trainingssystem-plugin-dependencies.php referenziert werden,
        damit es geladen wird. </li>
    <li>
        Es wird ein Shortcode angelegt, der den Programmcode aus 3.) lädt.
        <br>

        Dazu muss ein entsprechender Eintrag in includes -&gt; hooks-define -&gt; ...-hooks-define-public.php angelegt
        werden.
    </li>
    <li>Es muss ein Template angelegt werden, welches innerhalb des Shortcodes geladen und ausgegeben wird. </li>
    <li>Damit die neue Funktion/Seite bei erstmaliger Installation des Gesamtsystems bereits hinzugefügt wird, kann eine
        automatische Funktion zum Anlegen verwendet werden. Dazu muss die neue Funktion unter module -&gt; demodata
        -&gt; ...-demodata.php hinterlegt werden. </li>
</ol>
<p>Wenn nur eine kleinere Funktionalität mit einem Shortcode implementiert werden soll, müssen nur die Punkte 3-6
    abgearbeitet werden.
    Für Filter oder Actions müssen nur die Punkte 3-5 bearbeitet werden. Hier sind anstatt Shortcodes entsprechend
    Filter oder Actions angelegt werden. </p>
<p>Hinweis zu Punkt 7.: Es sollte beim Hinterlegen einer neuen Seite unter module -&gt; demodata -&gt; ...-demodata.php
    darauf geachtet werden, dass die Seite nicht bereits zuvor im Trainingssystem angelegt wurde oder dass sich eine
    Seite mit dem gleichen Namen nicht im Papierkorb von WordPress befindet. </p>
<h2 id="markdown-header-umgang-mit-nachrichten-vom-system-alerts">Umgang mit Nachrichten vom System (Alerts)</h2>
<p>
    Im Trainingssystem werden Nachrichten durch das System, sogenannte Alerts, genutzt, die die Benutzer*innen über
    bestimmte Zustände informieren können. Es gibt Alerts für Hinweise, Warnungen und Fehler, welche alle ein spezielles
    Icon sowie eine eigene Farbe haben. Für die Alerts werden Klassen von
    <a data-is-external-link="true" href="https://getbootstrap.com/docs/4.0/components/alerts/"
        rel="nofollow">Bootstrap</a>
    genutzt. Das übergeordnete
    <code>&lt;div&gt;</code>
    -Element für den Alert muss grundsätzlich die Klasse
    <code>alert</code>
    sowie eine Kontext-Klasse der Form
    <code>alert-KONTEXT</code>
    haben. Des Weiteren muss für dieses Element auch
    <code>role="alert"</code>
    angegeben werden.
    <br>

    Es hat sich für die Alerts im Traningssystem ein gewisser Standard etabliert. Dieser sollte bei der
    Weiterentwicklung des Plugins beibehalten werden. Bei der Nutzung von Alerts gelten dabei folgende Regeln:
</p>
<ul>
    <li>
        Die Überschrift wird als
        <code>&lt;h5&gt;</code>
        -Element dargestellt. Diesem Element muss keine Klasse
        <code>mt-0</code>
        o.ä. hinzugefügt werden, da dieser Abstand bereits in der CSS geregelt ist.
    </li>
    <li>
        Die Überschrift im Alert wird automatisch fett gedruckt. Es ist kein
        <code>&lt;b&gt;</code>
        -Element erforderlich.
    </li>
    <li>
        Es folgt kein Doppelpunkt nach der Überschrift und auch kein
        <code>&lt;br&gt;</code>
        -Element.
    </li>
    <li>
        Nach der Überschrift folgt mindestens ein
        <code>&lt;p&gt;</code>
        -Element. Das letzte
        <code>&lt;p&gt;</code>
        -Element hat automatisch keinen unteren Abstand, damit oben und unten jeweils gleiche Abstände bestehen. Es muss
        dafür keine Klasse hinzugefügt werden.
    </li>
</ul>
<p>Nachfolgend folgt eine Übersicht über die verschiedenen Alerts innerhalb des Trainingssystems.</p>
<h3 id="markdown-header-hinweise">Hinweise</h3>
<p>
    Der Alert für Hinweise wird genutzt, wenn ein Dialog oder eine Anzeige in einem bestimmten Status möglicherweise
    unklar sein könnte. Für Hinweise muss die Klasse
    <code>alert-info</code>
    genutzt werden. Beispiel: Eine Liste ist leer, weil noch keine Einträge hinzugefügt wurden.
</p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;alert alert-info&quot;</span>
                                            <span class="na">role</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;alert&quot;</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">h5</span>
                                            <span class="p">&gt;&lt;</span>
                                            <span class="nt">i</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;fas fa-info-circle&quot;</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">i</span>
                                            <span class="p">&gt;</span>
                                            <span class="ni">&amp;nbsp;</span>
                                            Hinweis
                                            <span class="p">&lt;/</span>
                                            <span class="nt">h5</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>

                                                    Sie haben noch keine Übungen als Lieblingsübung markiert.
                                                
                                            <span class="p">&lt;/</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                        </pre>
</div>

<p>
    <img alt="alert_hinweis.PNG" src="https://bitbucket.org/repo/z8zjexy/images/2268775467-alert_hinweis.PNG">
</p>
<h3 id="markdown-header-warnungen">Warnungen</h3>
<p>
    Der Alert für Warnungen wird genutzt, wenn ein Fehler bzw. größeres Problem noch vermeidbar ist, wenn richtig
    gehandelt wird. Für Warnungen muss die Klasse
    <code>alert-warning</code>
    genutzt werden. Beispiel: Wollen Sie wirklich löschen?
</p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;alert alert-warning&quot;</span>
                                            <span class="na">role</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;alert&quot;</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">h5</span>
                                            <span class="p">&gt;&lt;</span>
                                            <span class="nt">i</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;fas fa-exclamation-triangle&quot;</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">i</span>
                                            <span class="p">&gt;</span>
                                            <span class="ni">&amp;nbsp;</span>
                                            Warnung
                                            <span class="p">&lt;/</span>
                                            <span class="nt">h5</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>

                                                    Der User ist noch im Systems als Psychologischer Coach, Supervisor und Führungskraft hinterlegt. Bitte tragen
                                                    Sie dafür Sorge, dass die Nachfolge des Users geregelt ist, damit die Funktionen aller involvierten Personen
                                                    erhalten bleiben.
                                                
                                            <span class="p">&lt;/</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>

                                                    Hier steht noch ein zweiter Absatz.
                                                
                                            <span class="p">&lt;/</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                        </pre>
</div>

<p>
    <img alt="alert_warnung.PNG" src="https://bitbucket.org/repo/z8zjexy/images/4017084375-alert_warnung.PNG">
</p>
<h3 id="markdown-header-fehler">Fehler</h3>
<p>
    Der Alert für Fehler wird genutzt, wenn tatsächlich ein Fehler aufgrund einer Nutzereingabe passiert ist. Für Fehler
    muss die Klasse
    <code>alert-danger</code>
    genutzt werden. Beispiel: Ein Shortcode wurde falsch verwendet.
</p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;alert alert-danger&quot;</span>
                                            <span class="na">role</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;alert&quot;</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">h5</span>
                                            <span class="p">&gt;&lt;</span>
                                            <span class="nt">i</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;fas fa-times-circle&quot;</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">i</span>
                                            <span class="p">&gt;</span>
                                            <span class="ni">&amp;nbsp;</span>
                                            Fehler
                                            <span class="p">&lt;/</span>
                                            <span class="nt">h5</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>

                                                    Der Shortcode [XYZ] wurde möglicherweise falsch verwendet. Bitte überprüfen Sie ihre Eingabe.
                                                
                                            <span class="p">&lt;/</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                        </pre>
</div>

<p>
    <img alt="alert_fehler.PNG" src="https://bitbucket.org/repo/z8zjexy/images/1363205501-alert_fehler.PNG">
</p>
<h3 id="markdown-header-links-in-alerts">Links in Alerts</h3>
<p>
    Zusätzlich kann die Klasse
    <code>alert-link</code>
    für Links innerhalb der Alerts genutzt werden, sodass diese eine zum Alert passende Farbe erhalten.
</p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;alert alert-info&quot;</span>
                                            <span class="na">role</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;alert&quot;</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">h5</span>
                                            <span class="p">&gt;&lt;</span>
                                            <span class="nt">i</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;fas fa-info-circle&quot;</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">i</span>
                                            <span class="p">&gt;</span>
                                            <span class="ni">&amp;nbsp;</span>
                                            Hinweis
                                            <span class="p">&lt;/</span>
                                            <span class="nt">h5</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>

                                                    Ein 
                                            <span class="p">&lt;</span>
                                            <span class="nt">a</span>
                                            <span class="na">href</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;#&quot;</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;alert-link&quot;</span>
                                            <span class="p">&gt;</span>
                                            Beispiel-Link
                                            <span class="p">&lt;/</span>
                                            <span class="nt">a</span>
                                            <span class="p">&gt;</span>
                                             in einem Hinweis-Alert.
                                                
                                            <span class="p">&lt;/</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>

                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;alert alert-warning&quot;</span>
                                            <span class="na">role</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;alert&quot;</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">h5</span>
                                            <span class="p">&gt;&lt;</span>
                                            <span class="nt">i</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;fas fa-exclamation-triangle&quot;</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">i</span>
                                            <span class="p">&gt;</span>
                                            <span class="ni">&amp;nbsp;</span>
                                            Warnung
                                            <span class="p">&lt;/</span>
                                            <span class="nt">h5</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>

                                                    Ein 
                                            <span class="p">&lt;</span>
                                            <span class="nt">a</span>
                                            <span class="na">href</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;#&quot;</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;alert-link&quot;</span>
                                            <span class="p">&gt;</span>
                                            Beispiel-Link
                                            <span class="p">&lt;/</span>
                                            <span class="nt">a</span>
                                            <span class="p">&gt;</span>
                                             in einem Warnung-Alert.
                                                
                                            <span class="p">&lt;/</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>

                                            <span class="p">&lt;</span>
                                            <span class="nt">div</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;alert alert-danger&quot;</span>
                                            <span class="na">role</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;alert&quot;</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">h5</span>
                                            <span class="p">&gt;&lt;</span>
                                            <span class="nt">i</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;fas fa-times-circle&quot;</span>
                                            <span class="p">&gt;&lt;/</span>
                                            <span class="nt">i</span>
                                            <span class="p">&gt;</span>
                                            <span class="ni">&amp;nbsp;</span>
                                            Fehler
                                            <span class="p">&lt;/</span>
                                            <span class="nt">h5</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>

                                                    Ein 
                                            <span class="p">&lt;</span>
                                            <span class="nt">a</span>
                                            <span class="na">href</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;#&quot;</span>
                                            <span class="na">class</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;alert-link&quot;</span>
                                            <span class="p">&gt;</span>
                                            Beispiel-Link
                                            <span class="p">&lt;/</span>
                                            <span class="nt">a</span>
                                            <span class="p">&gt;</span>
                                             in einem Fehler-Alert.
                                                
                                            <span class="p">&lt;/</span>
                                            <span class="nt">p</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;/</span>
                                            <span class="nt">div</span>
                                            <span class="p">&gt;</span>
                                        </pre>
</div>

<p>
    <img alt="alert_link.PNG" src="https://bitbucket.org/repo/z8zjexy/images/4082701037-alert_link.PNG">
</p>
<h2 id="markdown-header-design-andern">Design ändern</h2>
<p>
    Das Layout, die verwendeten Abstände und grundlegende Regeln zur Erscheinung der Trainings werden im Trainingssystem
    selbst unter
    <code>assets--sass</code>
    bestimmt. Die visuelle Erscheinung der mit diesem Trainingssystem entwickelten Trainings wird hauptsächlich durch
    das Theme
    <a data-is-external-link="true" href="https://bitbucket.org/cosa1/coachlight.v2" rel="nofollow">Coachlight</a>
    erzeugt. Prinzipiell ist es möglich, dieses Theme durch andere auszutauschen, die ebenfalls auf Bootstrap basieren.
    Dadurch können jedoch mehr oder weniger umfangreiche Anpassungen erforderlich werden. Wegen der engen Verzahnung von
    Plugin und Theme empfiehlt es sich, Farben, Schriften, Größen, Formen etc. im Theme
    <a data-is-external-link="true" href="https://bitbucket.org/cosa1/coachlight.v2/" rel="nofollow">Coachlight</a>
    und ggf. im Plugin selbst nach eigenen Bedürfnissen anzupassen. Eine einfache Farbänderung beispielsweise ist
    aufgrund der Verwendung von scss-Variablen im oberen Bereich des Plugins und Themes schnell und einfach möglich.
</p>
<h2 id="markdown-header-rollen-und-rechte">Rollen und Rechte</h2>
<p>
    Neben den
    <a data-is-external-link="true" href="https://de.support.wordpress.com/user-roles/" rel="nofollow">Rollen von
        WordPress</a>
    wurden für das Trainingssystem weitere Rollen implementiert:
</p>
<ul>
    <li>
        <strong>Training-Entwickler</strong>
        : Eine Person mit der Rolle „Training-Entwickler“ ist dazu da, Trainings, Formulare und Abzeichen im Backend
        hinzuzufügen, Benutzer*innen zu erstellen und diese dem „psychologischen Coach“ zuzuweisen. Damit eine Person
        mit der Rolle „Training-Entwickler“ Zugriff auf das Backend hat, muss dieser zusätzlich die WordPress-Rolle
        „Redakteur“ gegeben werden.
    </li>
    <li>
        <strong>Psychologischer Coach</strong>
        : „Psychologische“ Coaches werden für die Betreuung der Teilnehmenden im System angelegt. Beim Hinzufügen der
        Teilnehmenden kann der entsprechende „psychologische Coach“ zugewiesen werden.
    </li>
    <li>
        <strong>Supervisor</strong>
        : Eine Person mit der Rolle „Supervisor“ ist dazu da, die Coaches zu beaufsichtigen.
    </li>
    <li>
        <strong>Krankenkassenadmin</strong>
        : Die Personen mit der Rolle „Krankenkassenadmin“ organisieren das Arbeiten in Gruppen, wie beispielsweise
        Firmen oder Abteilungen. Personen mit dieser Rolle haben keinen Zugriff auf individuelle Eingaben der
        Benutzer*innen.
    </li>
    <li>
        <strong>Führungskraft</strong>
        : Eine „Führungskraft“ kann die Auswertung der einzelnen Abteilungen einsehen.
    </li>
    <li>
        <strong>Datenadmin</strong>
        : Die Personen mit der Rolle „Datenadmin“ hat die Berechtigung Nutzerdaten aus Eingabefeldern, Systemstatistiken
        und Umfragen für alle Nutzer der Plattform zu exportieren.
    </li>
    <li>
        <strong>Teamleitung</strong>
        : Die Personen mit der Rolle „Teamleitung“ haben die Führungskraft-Berechtigungen auf Gruppen-Ebene.
    </li>
</ul>
<p>Jede dieser Rollen hat eine Menge an Berechtigungen, welche in einem eigenen Berechtigungssystem in Form einer
    Tabelle auf der Plattform bei Bedarf angepasst werden kann. Soll eine Rolle eine weitere Berechtigungen erhalten
    oder soll diese entzogen werden, muss in der Tabelle, welche im Backend unter „Trainingssystem-&gt;Berechtigungen“
    erreichbar ist, für die Rolle für die entsprechende Funktion der Haken aus- bzw. abgewählt werden. </p>
<p>Folgende Tabelle stellt aktuell den Standard für die Rollen und ihre Berechtigungen dar: </p>
<table>
    <thead>
        <tr>
            <th>Funktion</th>
            <th>Administrator</th>
            <th>Training-Entwickler</th>
            <th>Psychologischer Coach</th>
            <th>Supervisor</th>
            <th>Krankenkassenadmin</th>
            <th>Führungskraft</th>
            <th>Datenadmin</th>
            <th>Teamleitung</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <a data-is-external-link="true" href="#markdown-header-coaching-ubersicht"
                    rel="nofollow">Coaching-Übersicht</a>
            </td>
            <td>ja</td>
            <td>nein</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>
                <a data-is-external-link="true" href="#markdown-header-datenexport" rel="nofollow">Datenexport</a>
            </td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>ja</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>
                <a data-is-external-link="true" href="#markdown-header-firmenzuweisung" rel="nofollow">Firmen</a>
            </td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>Firmen - Alle Firmen sehen</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>Firmen - Meine Firmen sehen</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>
                <a data-is-external-link="true" href="#markdown-header-ausgabe-freigegebener-inhalte"
                    rel="nofollow">Freigegebene Texte einsehen</a>
                (Führungskraft-Sicht)
            </td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>Freigegebene Texte einsehen (Krankenkassenadmin-Sicht)</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>
                <a data-is-external-link="true" href="#markdown-header-freischaltecodes"
                    rel="nofollow">Freischaltecodes</a>
            </td>
            <td>ja</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>
                <a data-is-external-link="true" href="#markdown-header-nachrichten" rel="nofollow">Nachrichten</a>
                versenden
            </td>
            <td>ja</td>
            <td>nein</td>
            <td>ja</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>Nachrichtenverlauf einsehen</td>
            <td>ja</td>
            <td>nein</td>
            <td>ja</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>
                <a data-is-external-link="true" href="#markdown-header-nutzer-anlegen" rel="nofollow">Nutzer anlegen</a>
            </td>
            <td>ja</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>
                <a data-is-external-link="true" href="#markdown-header-nutzer-detail-seite"
                    rel="nofollow">Nutzer-Details</a>
            </td>
            <td>ja</td>
            <td>ja</td>
            <td>ja</td>
            <td>ja</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>Nutzer-Details bearbeiten</td>
            <td>ja</td>
            <td>ja</td>
            <td>nein</td>
            <td>ja</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>
                <a data-is-external-link="true" href="#markdown-header-csv-import" rel="nofollow">Nutzer-Import</a>
            </td>
            <td>ja</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>Nutzerberechtigungen</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>
                <a data-is-external-link="true" href="#markdown-header-nutzerliste" rel="nofollow">Nutzerliste</a>
            </td>
            <td>ja</td>
            <td>ja</td>
            <td>ja</td>
            <td>ja</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>Nutzerliste - Alle Abonnenten</td>
            <td>ja</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>Nutzerliste - Alle Coach-Teilnehmer</td>
            <td>ja</td>
            <td>nein</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>Nutzerliste - Alle Firmenmitglieder</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>Nutzerliste - Alle Nutzenden</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>
                <a data-is-external-link="true" href="#markdown-header-supervisoren-ubersicht"
                    rel="nofollow">Supervisoren-Übersicht</a>
            </td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>
                <a data-is-external-link="true" href="#markdown-header-systemstatistiken"
                    rel="nofollow">Systemstatistiken</a>
            </td>
            <td>ja</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>ja</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>Trainings bearbeiten</td>
            <td>ja</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>
                <a data-is-external-link="true" href="#markdown-header-trainings-ex-import" rel="nofollow">Trainings
                    Ex-/Import</a>
            </td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>
                <a data-is-external-link="true" href="#markdown-header-trainingszuweisung" rel="nofollow">Trainings
                    zuweisen</a>
            </td>
            <td>ja</td>
            <td>ja</td>
            <td>ja</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>
                <a data-is-external-link="true" href="#markdown-header-trainingsvorlagen"
                    rel="nofollow">Trainingsvorlagen</a>
            </td>
            <td>ja</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>
                <a data-is-external-link="true" href="#markdown-header-usermodus" rel="nofollow">User-Modus</a>
            </td>
            <td>ja</td>
            <td>nein</td>
            <td>ja</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>
                <a data-is-external-link="true"
                    href="#markdown-header-visualisierung-der-werte-der-gefahrdungsbeurteilung-gbu"
                    rel="nofollow">Visualisierungen von Befragungsergebnissen einsehen</a>
                (Führungskraft-Sicht)
            </td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>Visualisierungen von Befragungsergebnissen einsehen (Krankenkassenadmin-Sicht)</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
        </tr>
        <tr>
            <td>Visualisierungen von Befragungsergebnissen einsehen (Teamleitung-Sicht)</td>
            <td>ja</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>nein</td>
            <td>ja</td>
        </tr>
    </tbody>
</table>
<p>
    Grundsätzlich können nur Benutzer*innen mit der Rolle „Administrator“ anderen Benutzer*innen Rollen beim Anlegen des
    Accounts bzw. nachträglich über die Bearbeiten-Funktion der Nutzer-Detail-Seite vergeben. Ein*e Benutzer*in kann
    dabei mehrere der oben aufgeführten Rollen haben. Die Berechtigungen werden addiert, ein*e Benutzer*in verliert
    hierbei nicht den Zugriff auf eine Funktion.
    <br>

    Neben den vordefinierten können auch eigene Rollen für die Plattform definiert werden. Dazu muss über den „+
    Rolle“-Button eine neue Rolle mit ID, Titel sowie Beschreibung erstellt werden. Anschließend muss für diese Rolle
    ein Set an Berechtigungen bestimmt und die Auswahl gespeichert werden. Die neue Rolle erscheint schließlich in der
    Tabelle für die Berechtigungen sowie (für Benutze*innen mit der Rolle „Administrator“) auf der Seite zum Anlegen von
    neuen Accounts und bei der Bearbeitungsfunktion innerhalb der Nutzer-Detail-Seite.
    <br>

    Wurden Veränderungen am oben genannten Standard für die Berechtigungen durchgeführt, kann dieser über den Button
    „Standard wiederherstellen“ wiederhergestellt werden. Dies hat zur Folge, dass alle Berechtigungen für die
    vordefinierten Rollen zurückgesetzt und neu angelegte Rollen gelöscht werden.
</p>
<h2 id="markdown-header-einen-release-erzeugen">Einen Release erzeugen</h2>
<p>Um einen neuen Release zu erzeugen, sind folgende Schritte notwendig:</p>
<ol>
    <li>
        <p>
            Die Versionsnummer in der
            <code>trainingssystem-plugin.php</code>
            -Datei muss entsprechend der Menge der Änderungen auf eine neue Haupt- oder Unterversion erhöht werden.
        </p>
    </li>
    <li>
        <p>
            In der
            <code>readme.txt</code>
            -Datei sind die vorgenommenen Änderungen im Changelog kurz zu beschreiben. Diese Übersicht wird dem
            WordPress-Nutzer im Aktualisierungsvorgang angezeigt.
        </p>
    </li>
    <li>
        <p>
            Sofern gulp mitsamt der benötigten Abhängigkeiten noch nicht installiert ist, muss dies im Projektordner
            geschehen. Eine beispielhafte Anleitung findet sich bspw. hier:
            <a data-is-external-link="true" href="https://gulpjs.com/docs/en/getting-started/quick-start"
                rel="nofollow">gulpJS</a>
            . Hierbei wird von npm automatisch der
            <code>node_modules</code>
            -Ordner angelegt und mit den benötigten npm-Projekten gefüllt. Deshalb wird dieser Ordner auch nicht über
            das Repository synchronisiert, sondern muss bei jedem*r Anwender*in neu gebaut werden.
        </p>
    </li>
    <li>
        <p>
            Befindet man sich mit einem Terminal im entsprechenden Projektordner, wird mit
            <code>gulp customcopy</code>
            der Bau der neuen Version gestartet. Sobald dieser Prozess fertiggestellt ist, zeigt das Terminal dies mit
            einem
            <code>Finished 'customcopy' after xxx ms</code>
            an. Im Ordner
            <code>output</code>
            befindet sich nun ein Ordner mit den Plugin-Dateien sowie eine ZIP-Datei, welche die selben Dateien in
            komprimierter Form enthält. Diese ZIP-Datei kann beispielsweise über einen Update-Server oder manuell über
            das WordPress-Backend verteilt und aktualisiert werden.
        </p>
    </li>
</ol>
<h2 id="markdown-header-code-samples">Code Samples</h2>
<p>
    <strong>input data</strong>

    *
    <a class="ap-connect-link" href="https://developer.wordpress.org/plugins/security/securing-input/"
        rel="nofollow">https://developer.wordpress.org/plugins/security/securing-input/</a>

    * als Beispiel: wird hier der Title eingelesen und wieder ausgegeben.
</p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span class="x">#!php</span>

                                            <span class="x">$twig = Trainingssystem_Plugin_Twig::getInstance()-&gt;twig;</span>
                                            <span class="x">ob_start();</span>

                                            <span class="x">$current_user = wp_get_current_user();</span>
                                            <span class="x">if ( 0 == $current_user-&gt;ID ) {</span>
                                            <span class="x">    echo $twig-&gt;render(&#39;notloggedin.html&#39;);</span>
                                            <span class="x">    exit;</span>
                                            <span class="x">}</span>

                                            <span class="x">$title=&quot;&quot;;</span>

                                            <span class="x">$nonceaction = TRAININGSSYSTEM_PLUGIN_SLUG.&#39;submit&#39;;</span>
                                            <span class="x">$noncefield = &#39;teststring&#39;;</span>

                                            <span class="x">if (!isset( $_POST[$noncefield] ) ||</span>
                                            <span class="x">    !isset($_POST[&#39;title&#39;]) ||</span>
                                            <span class="x">    !wp_verify_nonce($_POST[$noncefield], $nonceaction ) ) {</span>
                                            <span class="x">     print &#39;Sorry, your nonce did not verify.&#39;;</span>
                                            <span class="x">     exit;</span>
                                            <span class="x">} else {</span>
                                            <span class="x">     $title = sanitize_text_field($_POST[&#39;title&#39;]);</span>
                                            <span class="x">     echo $twig-&gt;render(&#39;testview.html&#39;, [</span>
                                            <span class="x">            &#39;title&#39;=&gt; $title,</span>
                                            <span class="x">            &#39;submitnonce&#39;=&gt;wp_nonce_field($nonceaction,$noncefield,true,false)] );</span>
                                            <span class="x">}</span>
                                            <span class="x">return ob_get_clean();</span>
                                        </pre>
</div>

<div class="codehilite">
    <pre>
                                            <span></span>
                                            #!html

                                            <span class="p">&lt;</span>
                                            <span class="nt">h2</span>
                                            <span class="p">&gt;</span>
                                            {{title}}
                                            <span class="p">&lt;/</span>
                                            <span class="nt">h2</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">form</span>
                                            <span class="na">method</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;post&quot;</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">input</span>
                                            <span class="na">id</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;title&quot;</span>
                                            <span class="na">type</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;text&quot;</span>
                                            <span class="na">name</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;title&quot;</span>
                                            <span class="p">&gt;</span>
                                            <span class="p">&lt;</span>
                                            <span class="nt">input</span>
                                            <span class="na">type</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;submit&quot;</span>
                                            <span class="na">value</span>
                                            <span class="o">=</span>
                                            <span class="s">&quot;Submit&quot;</span>
                                            <span class="p">&gt;</span>

                                            {{submitnonce | raw}}
                                            <span class="p">&lt;/</span>
                                            <span class="nt">form</span>
                                            <span class="p">&gt;</span>
                                        </pre>
</div>

<p>
    <strong>Der Gutenberg Editor</strong>
    <br>

    Vier Dateien:
    * 1xJS
    <br>
    <em>
        1xCSS(optional)
        <br>
    </em>
    1xPHP(geht auch ohne, wir nutzen das aber für twig templates)
    <br>

    * 1xTwig html
</p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span>#</span>
                                            <span class="o">!</span>
                                            <span class="nx">javascript</span>

                                            <span class="p">(</span>
                                            <span class="kd">function</span>
                                            <span class="p">()</span>
                                            <span class="p">{</span>
                                            <span class="kd">var</span>
                                            <span class="nx">__</span>
                                            <span class="o">=</span>
                                            <span class="nx">wp</span>
                                            <span class="p">.</span>
                                            <span class="nx">i18n</span>
                                            <span class="p">.</span>
                                            <span class="nx">__</span>
                                            <span class="p">;</span>
                                            <span class="c1">// The __() for internationalization.</span>
                                            <span class="kd">var</span>
                                            <span class="nx">el</span>
                                            <span class="o">=</span>
                                            <span class="nx">wp</span>
                                            <span class="p">.</span>
                                            <span class="nx">element</span>
                                            <span class="p">.</span>
                                            <span class="nx">createElement</span>
                                            <span class="p">;</span>
                                            <span class="c1">// The wp.element.createElement() function to create elements.</span>
                                            <span class="kd">var</span>
                                            <span class="nx">registerBlockType</span>
                                            <span class="o">=</span>
                                            <span class="nx">wp</span>
                                            <span class="p">.</span>
                                            <span class="nx">blocks</span>
                                            <span class="p">.</span>
                                            <span class="nx">registerBlockType</span>
                                            <span class="p">;</span>
                                            <span class="c1">// The registerBlockType() to register blocks.</span>
                                            <span class="kd">var</span>
                                            <span class="nx">RichText</span>
                                            <span class="o">=</span>
                                            <span class="nx">wp</span>
                                            <span class="p">.</span>
                                            <span class="nx">editor</span>
                                            <span class="p">.</span>
                                            <span class="nx">RichText</span>
                                            <span class="p">;</span>
                                            <span class="nx">registerBlockType</span>
                                            <span class="p">(</span>
                                            <span class="s1">&#39;gb/trainingssystem-block-test1&#39;</span>
                                            <span class="p">,</span>
                                            <span class="p">{</span>
                                            <span class="c1">// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.</span>
                                            <span class="nx">title</span>
                                            <span class="o">:</span>
                                            <span class="s1">&#39;Test2&#39;</span>
                                            <span class="p">,</span>
                                            <span class="c1">// Block title.</span>
                                            <span class="nx">icon</span>
                                            <span class="o">:</span>
                                            <span class="s1">&#39;shield-alt&#39;</span>
                                            <span class="p">,</span>
                                            <span class="c1">// Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.</span>
                                            <span class="nx">category</span>
                                            <span class="o">:</span>
                                            <span class="s1">&#39;md-trainingssystem-9872&#39;</span>
                                            <span class="p">,</span>
                                            <span class="c1">// Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.</span>
                                            <span class="nx">attributes</span>
                                            <span class="o">:</span>
                                            <span class="p">{</span>
                                            <span class="nx">images</span>
                                            <span class="o">:</span>
                                            <span class="p">{</span>
                                            <span class="k">default</span>
                                            <span class="o">:</span>
                                            <span class="p">[],</span>
                                            <span class="nx">type</span>
                                            <span class="o">:</span>
                                            <span class="s1">&#39;array&#39;</span>
                                            <span class="p">,</span>
                                            <span class="p">},</span>
                                            <span class="nx">content</span>
                                            <span class="o">:</span>
                                            <span class="p">{</span>
                                            <span class="k">default</span>
                                            <span class="o">:</span>
                                            <span class="s2">&quot;kein content&quot;</span>
                                            <span class="p">,</span>
                                            <span class="nx">type</span>
                                            <span class="o">:</span>
                                            <span class="s1">&#39;string&#39;</span>
                                            <span class="p">,</span>
                                            <span class="p">}</span>
                                            <span class="p">},</span>
                                            <span class="nx">edit</span>
                                            <span class="p">({</span>
                                            <span class="nx">attributes</span>
                                            <span class="p">,</span>
                                            <span class="nx">setAttributes</span>
                                            <span class="p">,</span>
                                            <span class="nx">className</span>
                                            <span class="p">,</span>
                                            <span class="nx">focus</span>
                                            <span class="p">,</span>
                                            <span class="nx">id</span>
                                            <span class="p">})</span>
                                            <span class="p">{</span>
                                            <span class="kd">var</span>
                                            <span class="nx">content</span>
                                            <span class="o">=</span>
                                            <span class="nx">attributes</span>
                                            <span class="p">.</span>
                                            <span class="nx">content</span>
                                            <span class="p">;</span>

                                            <span class="kd">function</span>
                                            <span class="nx">onChangeContent</span>
                                            <span class="p">(</span>
                                            <span class="nx">newContent</span>
                                            <span class="p">)</span>
                                            <span class="p">{</span>
                                            <span class="nx">setAttributes</span>
                                            <span class="p">(</span>
                                            <span class="p">{</span>
                                            <span class="nx">content</span>
                                            <span class="o">:</span>
                                            <span class="nx">newContent</span>
                                            <span class="p">,</span>
                                            <span class="nx">images</span>
                                            <span class="o">:</span>
                                            <span class="p">[</span>
                                            <span class="s2">&quot;img1&quot;</span>
                                            <span class="p">,</span>
                                            <span class="s2">&quot;img2&quot;</span>
                                            <span class="p">]}</span>
                                            <span class="p">);</span>
                                            <span class="p">}</span>

                                            <span class="k">return</span>
                                            <span class="nx">el</span>
                                            <span class="p">(</span>
                                            <span class="nx">RichText</span>
                                            <span class="p">,</span>
                                            <span class="p">{</span>
                                            <span class="nx">tagName</span>
                                            <span class="o">:</span>
                                            <span class="s1">&#39;p&#39;</span>
                                            <span class="p">,</span>
                                            <span class="nx">className</span>
                                            <span class="o">:</span>
                                            <span class="nx">className</span>
                                            <span class="p">,</span>
                                            <span class="nx">onChange</span>
                                            <span class="o">:</span>
                                            <span class="nx">onChangeContent</span>
                                            <span class="p">,</span>
                                            <span class="nx">value</span>
                                            <span class="o">:</span>
                                            <span class="nx">content</span>
                                            <span class="p">,</span>
                                            <span class="p">}</span>
                                            <span class="p">);</span>
                                            <span class="p">},</span>
                                            <span class="nx">save</span>
                                            <span class="p">({</span>
                                            <span class="nx">attributes</span>
                                            <span class="p">,</span>
                                            <span class="nx">className</span>
                                            <span class="p">})</span>
                                            <span class="p">{</span>
                                            <span class="c1">//gutenberg will save attributes we can use in server-side callback</span>
                                            <span class="k">return</span>
                                            <span class="kc">null</span>
                                            <span class="p">;</span>
                                            <span class="p">},</span>
                                            <span class="p">});</span>
                                            <span class="p">})();</span>
                                        </pre>
</div>

<div class="codehilite">
    <pre>
                                            <span></span>
                                            <span>#</span>
                                            <span class="o">!</span>
                                            <span class="nx">php</span>

                                            <span class="c1">// muss in der haupt include datei wie folgt geladen werden -&gt; $this-&gt;loader-&gt;add_action( &#39;init&#39;, $Trainingssystem_Plugin_Module_Block_Test, &#39;yourgutenberg_block&#39;);</span>
                                            <span class="kr">class</span>
                                            <span class="nx">Trainingssystem_Plugin_Module_Block_Test</span>
                                            <span class="p">{</span>
                                            <span class="kr">public</span>
                                            <span class="kd">function</span>
                                            <span class="nx">yourgutenberg_block</span>
                                            <span class="p">()</span>
                                            <span class="p">{</span>
                                            <span class="c1">//optional</span>
                                            <span class="nx">wp_register_style</span>
                                            <span class="p">(</span>
                                            <span class="s1">&#39;nameof-mystyle&#39;</span>
                                            <span class="p">,</span>
                                            <span class="nx">plugins_url</span>
                                            <span class="p">(</span>
                                            <span class="s1">&#39;../../../assets/css/blocks/test1.css&#39;</span>
                                            <span class="p">,</span>
                                            <span class="nx">__FILE__</span>
                                            <span class="p">),</span>
                                            <span class="nx">array</span>
                                            <span class="p">(</span>
                                            <span class="s1">&#39;wp-edit-blocks&#39;</span>
                                            <span class="p">),</span>
                                            <span class="nx">$path</span>
                                            <span class="p">.</span>
                                            <span class="s1">&#39;/css/blocks/test1.css&#39;</span>
                                            <span class="p">);</span>
                                            <span class="c1">//optional</span>
                                            <span class="nx">wp_register_style</span>
                                            <span class="p">(</span>
                                            <span class="s1">&#39;nameof-mystyle-editor&#39;</span>
                                            <span class="p">,</span>
                                            <span class="nx">plugins_url</span>
                                            <span class="p">(</span>
                                            <span class="s1">&#39;../../../assets/css/blocks/test1.css&#39;</span>
                                            <span class="p">,</span>
                                            <span class="nx">__FILE__</span>
                                            <span class="p">),</span>
                                            <span class="nx">array</span>
                                            <span class="p">(</span>
                                            <span class="s1">&#39;wp-edit-blocks&#39;</span>
                                            <span class="p">),</span>
                                            <span class="nx">plugins_url</span>
                                            <span class="p">(</span>
                                            <span class="s1">&#39;../../../assets/css/blocks/test1.css&#39;</span>
                                            <span class="p">,</span>
                                            <span class="nx">__FILE__</span>
                                            <span class="p">));</span>

                                            <span class="nx">wp_register_script</span>
                                            <span class="p">(</span>
                                            <span class="s1">&#39;name-ofyour-script-js2&#39;</span>
                                            <span class="p">,</span>
                                            <span class="nx">plugins_url</span>
                                            <span class="p">(</span>
                                            <span class="s1">&#39;../../../assets/js/blocks/test2.js&#39;</span>
                                            <span class="p">,</span>
                                            <span class="nx">__FILE__</span>
                                            <span class="p">),</span>
                                            <span class="nx">array</span>
                                            <span class="p">(</span>
                                            <span class="s1">&#39;wp-blocks&#39;</span>
                                            <span class="p">,</span>
                                            <span class="s1">&#39;wp-i18n&#39;</span>
                                            <span class="p">,</span>
                                            <span class="s1">&#39;wp-element&#39;</span>
                                            <span class="p">,</span>
                                            <span class="s1">&#39;wp-editor&#39;</span>
                                            <span class="p">));</span>

                                            <span class="c1">//name muss exact der gleiche sein wie in dem javascript dokument</span>
                                            <span class="nx">register_block_type</span>
                                            <span class="p">(</span>
                                            <span class="s1">&#39;gb/trainingssystem-block-test1&#39;</span>
                                            <span class="p">,</span>
                                            <span class="nx">array</span>
                                            <span class="p">(</span>
                                            <span class="s1">&#39;editor_script&#39;</span>
                                            <span class="p">=&gt;</span>
                                            <span class="s1">&#39;name-ofyour-script-js2&#39;</span>
                                            <span class="p">,</span>
                                            <span class="c1">// &#39;editor_style&#39; =&gt; &#39;nameof-mystyle-editor&#39;, //optional</span>
                                            <span class="c1">// &#39;style&#39; =&gt; &#39;nameof-mystyle&#39;,//optional</span>
                                            <span class="s1">&#39;render_callback&#39;</span>
                                            <span class="p">=&gt;</span>
                                            <span class="nx">array</span>
                                            <span class="p">(</span>
                                            <span class="nx">$this</span>
                                            <span class="p">,</span>
                                            <span class="s1">&#39;trainingssystem_block_test1_render_callback&#39;</span>
                                            <span class="p">),</span>
                                            <span class="s1">&#39;attributes&#39;</span>
                                            <span class="p">=&gt;</span>
                                            <span class="nx">array</span>
                                            <span class="p">(</span>
                                            <span class="s1">&#39;content&#39;</span>
                                            <span class="p">=&gt;</span>
                                            <span class="nx">array</span>
                                            <span class="p">(</span>
                                            <span class="s1">&#39;type&#39;</span>
                                            <span class="p">=&gt;</span>
                                            <span class="s1">&#39;string&#39;</span>
                                            <span class="p">,</span>
                                            <span class="s1">&#39;default&#39;</span>
                                            <span class="p">=&gt;</span>
                                            <span class="s1">&#39;kein content&#39;</span>
                                            <span class="p">,</span>
                                            <span class="p">),</span>
                                            <span class="s1">&#39;images&#39;</span>
                                            <span class="p">=&gt;</span>
                                            <span class="nx">array</span>
                                            <span class="p">(</span>
                                            <span class="s1">&#39;type&#39;</span>
                                            <span class="p">=&gt;</span>
                                            <span class="s1">&#39;array&#39;</span>
                                            <span class="p">,</span>
                                            <span class="s1">&#39;default&#39;</span>
                                            <span class="p">=&gt;</span>
                                            <span class="p">[],</span>
                                            <span class="s1">&#39;items&#39;</span>
                                            <span class="p">=&gt;</span>
                                            <span class="p">[</span>
                                            <span class="s1">&#39;type&#39;</span>
                                            <span class="p">=&gt;</span>
                                            <span class="s1">&#39;string&#39;</span>
                                            <span class="p">,</span>
                                            <span class="s1">&#39;integer&#39;</span>
                                            <span class="p">,</span>
                                            <span class="p">],</span>
                                            <span class="p">),</span>
                                            <span class="p">),</span>
                                            <span class="p">));</span>
                                            <span class="p">}</span>

                                            <span class="kr">public</span>
                                            <span class="kd">function</span>
                                            <span class="nx">trainingssystem_block_test1_render_callback</span>
                                            <span class="p">(</span>
                                            <span class="nx">$attributes</span>
                                            <span class="p">)</span>
                                            <span class="p">{</span>
                                            <span class="k">if</span>
                                            <span class="p">(</span>
                                            <span class="o">!</span>
                                            <span class="nx">empty</span>
                                            <span class="p">(</span>
                                            <span class="nx">$attributes</span>
                                            <span class="p">))</span>
                                            <span class="p">{</span>
                                            <span class="nx">$twig</span>
                                            <span class="o">=</span>
                                            <span class="nx">Trainingssystem_Plugin_Twig</span>
                                            <span class="o">::</span>
                                            <span class="nx">getInstance</span>
                                            <span class="p">()</span>
                                            <span class="o">-&gt;</span>
                                            <span class="nx">twig</span>
                                            <span class="p">;</span>
                                            <span class="k">return</span>
                                            <span class="nx">$twig</span>
                                            <span class="o">-&gt;</span>
                                            <span class="nx">render</span>
                                            <span class="p">(</span>
                                            <span class="s1">&#39;gutenberg-block-test1.html&#39;</span>
                                            <span class="p">,</span>
                                            <span class="p">[</span>
                                            <span class="s1">&#39;images&#39;</span>
                                            <span class="p">=&gt;</span>
                                            <span class="nx">$attributes</span>
                                            <span class="p">[</span>
                                            <span class="s1">&#39;images&#39;</span>
                                            <span class="p">],</span>
                                            <span class="s1">&#39;text&#39;</span>
                                            <span class="p">=&gt;</span>
                                            <span class="nx">$attributes</span>
                                            <span class="p">[</span>
                                            <span class="s1">&#39;content&#39;</span>
                                            <span class="p">],</span>
                                            <span class="p">]);</span>
                                            <span class="p">}</span>
                                            <span class="k">return</span>
                                            <span class="s1">&#39;&lt;div&gt;&lt;/div&gt;&#39;</span>
                                            <span class="p">;</span>
                                            <span class="p">}</span>
                                            <span class="p">}</span>
                                        </pre>
</div>

<div class="codehilite">
    <pre>
                                            <span></span>
                                            #!html

                                            <span class="nt">&lt;h2&gt;</span>
                                            test gutenberg mit twig 
                                            <span class="nt">&lt;/h2&gt;</span>
                                            <span class="c">{#&lt;div class=bullet-container&gt;</span>
                                            <span class="c">  {% for image in images%}</span>
                                            <span class="c">  &lt;span class=bullet-filled&gt; {{image}} &lt;/span&gt;</span>
                                            <span class="c">  {% endfor %}</span>
                                            <span class="c">&lt;/div&gt;#}</span>

                                            <span class="nt">&lt;div</span>
                                            <span class="na">class=</span>
                                            <span class="s">&quot;info&quot;</span>
                                            <span class="nt">&gt;</span>
                                            <span class="nt">&lt;div</span>
                                            <span class="na">class=</span>
                                            <span class="s">&quot;icon-info&quot;</span>
                                            <span class="nt">&gt;&lt;/div&gt;</span>
                                            <span class="nt">&lt;h4&gt;</span>
                                            <span class="cp">&#123;&#123;</span>
                                            <span class="nv">text</span>
                                            <span class="cp">&#125;&#125;</span>
                                            <span class="nt">&lt;/h4&gt;</span>
                                            <span class="nt">&lt;/div&gt;</span>
                                        </pre>
</div>

<h2 id="markdown-header-pdf-print">PDF-Print</h2>
<p>
    Das PDF-Print Plugin ist in seiner jetzigen Version nicht für PHP &gt; 7 optimiert. Da in diesem Plugin aber manuell
    Änderungen vorgenommen wurden, die nicht mit einer neueren Version des PDF-Plugins kompatibel sind, wurde das Plugin
    angepasst um die Fehler zu unterdrücken. Diese Unterdrückung der Fehler wirkt sich aber auch auf das ganze
    Trainingssystem-Plugin aus, da PDF-Print immer eingebunden wird. Wird für die Weiterentwicklung eine Fehlerausgabe
    gewünscht, so ist in der Datei
    <code>pdf-print.php</code>
    die Zeile 31
    <code>error_reporting(0);</code>
    auskommentiert werden. Zm Exportieren als PDF muss das Error-Reporting dann wieder unterdrückt werden.
</p>
<h2 id="markdown-header-patch-funktion">Patch-Funktion</h2>
<p>Die Patch-Funktion dient dazu Inhalte der Datenbank zu bearbeiten und auch auf Tabellen zuzugreifen, die mit dem
    Update-Funktion der Trainingssystem-eigenen Tabellen nicht erreichbar sind. Die Patch-Funktion ist im Backend unter
    dem Menüpunkt Trainingssystem -&gt; Patch zu finden. Hier gibt es die Möglichkeit eine oder mehrere JSON-Dateien
    hochzuladen und auszuführen. Diese Dateien müssen vorweg erstellt werden und können anschließend z.B. als ZIP-Archiv
    per Mail oder als Link über den Updateserver an die verschiedenen Installationen verteilt werden. Die Möglichkeit
    mehrere kleinere Patch-Dateien hochzuladen wurde geschaffen, da eine große Datei mit vielen Ersetzungen die maximale
    Ausführungszeit des Servers bei Weitem überschreiten würde. Daher ist darauf zu achten, dass die einzelnen
    Teildateien nicht mehr als ca. 10-15 Änderungen beinhalten, je nach Umfang der Datenbank. Bei einer Testinstallation
    mit ca. 70.000 Einträgen inkl. Revisionen in der Posts-Tabelle benötigt die Ersetzung von allen 112 Ersetzungen beim
    Upgrade von Bootstrap 3 auf 4 ca. 15 Minuten. Mit einem Split auf maximal 12 Ersetzungen läuft jede Einzeldatei
    immer noch ca. 1 Minute, mit der für das Trainingssystem empfohlenen max_execution_time von 120s ist dies ein guter
    Wert.</p>
<p>Die JSON-Dateien sind wie folgt aufgebaut und können um eine neue Methode (wie bspw. fertige SQL-Statements) neben
    der bereits implementierten Ersetzen-Funktion erweitert werden:</p>
<div class="codehilite">
    <pre>
                                            <span></span>
                                            #!json

                                            {
                                                &quot;tables&quot;: 
                                                    {
                                                        &quot;posts&quot;: {
                                                            &quot;replace&quot;: [
                                                                {
                                                                    &quot;column&quot;: &quot;post_content&quot;,
                                                                    &quot;old&quot;: &quot;pull-left&quot;,
                                                                    &quot;new&quot;: &quot;float-left&quot;
                                                                },
                                                                {
                                                                    &quot;column&quot;: &quot;post_content&quot;,
                                                                    &quot;old&quot;: &quot;
                                            <span class="nt">&lt;span</span>
                                            <span class="na">class=</span>
                                            <span class="s">\&quot;glyphicon</span>
                                            <span>glyphicon-link</span>
                                            <span>generatepdf\&quot;</span>
                                            <span class="nt">&gt;&lt;/span&gt;</span>
                                            &quot;,
                                                                    &quot;new&quot;: &quot;
                                            <span class="nt">&lt;i</span>
                                            <span class="na">class=</span>
                                            <span class="s">\&quot;fas</span>
                                            <span>fa-external-link-alt</span>
                                            <span>generatepdf\&quot;</span>
                                            <span class="nt">&gt;&lt;/i&gt;</span>
                                            &quot;
                                                                }
                                                            ]
                                                        }
                                                    }
                                            }
                                        </pre>
</div>

<p>Das Attribut tables ist verpflichtend, darunter kommt für jede zu patchende Tabelle ein Objekt mit dem Tabellennamen
    ohne Prefix (lediglich posts statt wp_posts). Innerhalb des Tabellennamens existiert ein Objekt pro Methode, hier
    ist derzeit nur replace implementiert. Die Replace-Methode hat ein Array mit Objekten, wofür jedes Objekt darin für
    eine Patchaufgabe steht. Dieses Objekt benötigt zwingend die Attribute column, old und new. Dies ersetzt den String
    &lt;old&gt; durch &lt;new&gt; in der Spalte &lt;column&gt;.</p>
<hr>