Fancy Moodle Hacks

Nativ mit Bootstrap

Erläuterungen

• Falls eine Frage aufgeklappt ist: Im Editor zuklappen und speichern
  
• Zu Beginn aufgeklappt:aria-expanded="false" und class="collapse show"
• Bei einem neuen Eintrag müssen die Werte für id und aria-labelledby angepasst werden.
  
• Bei mehreren Accordions müssen die Werte für id, aria-controls und data-target angepasst werden.

Mit jquery-ui

Bemerkung FAQ / Accordion

Der Atto Editor neigt dazu, unnötige HTML Tags zu setzen und kann so die Struktur des Accordions  zerstören (vor allem, wenn <div> Tags nicht richtig geschlossen werden). Einfügen von komplexeren Texten aus der Zwischenablage wird daher kaum funktionieren. Kleinere Änderungen sollten gehen, solange die Absätze mit den Titeln oder Inhalten nicht ganz gelöscht werden. Grundsätzlich ist sehr empfohlen, in der HTML Ansicht des Editors zu arbeiten.

Anker verwenden (href="#")
Wenn beim Verlinken direkt auf einen spezifischen Eintrag gesprungen werden soll, kann ein entsprechender Anker gesetzt werden (z.B. https://moodle.zhaw.ch/course/view.php?id=2751#moodle_kursanlegen). Dazu das #-Zeichen mit einem Namen für das Ziel ersetzen (keine Leer- oder Sonderzeichen ausser "-" und "_"). Für die Weitergabe des Links mit Anker am einfachsten in der normalen Ansicht mit der rechten Maustaste anklicken und dann «Link-Adresse kopieren» wählen.

Grundstruktur
Die FAQ kann um beliebige Einträge ergänzt werden. Dazu den roten Code kopieren und in der HMTL Ansicht des Editors vor  dem letzten schliessenden </div> des Accordions einfügen (unten orange markiert).

<div id="accordion">
   <h3>Frage 1</h3>
   <div>
      <p>Antwort2</p>
   </div>
   <h3>Frage 2</h3>
   <div>
      <p>Antwort2</p>
   </div>
   <h3>Frage 3</h3>
   <div>
      <p>Antwort 3</p>
   </div>
   <h3>Frage 4</h3>
   <div>
      <p>Antwort 4</p>
   </div>
</div>