Drucken

Button/Bedienfelder hinzufügen

Inhaltsübersicht

1.1. 1) Buttons hinzufügen

1.2. 2) Zwei Varianten der Verlinkung

2. 3) Cheatscheet für Buttons und Farben [Bearbeiten]

In dieser Erklärung erfahren Sie, wie Sie:
  1. einen Button per HTML-Editor hinzufügen können.
  2. diesen Button interaktiv verlinken können
  3. Cheatsheet für Buttons und Farben

1) Buttons hinzufügen

a) HTML-Editor in Moodle Textfeld öffnen

Um den HTML-Editor beim Moodle Textfeld zu öffnen, klicken Sie in der Steuerungsleiste auf den Pfeil ganz links, der nach unten zeigt.


Daraufhin öffnen sich die erweiterten Steuerungsleiste, bei der Sie ganz rechts, dann den HTML-Code des Textfelds öffnen können.


Dort können Sie dann ihr komplettes Textfeld auf der HTML-Code-Ebene bearbeiten und anpassen.

b) HTML-Code für Button in Moodle Textfeld hinzufügen

Um nun einen blauen Button einzufügen geben Sie folgenden Code ein. Der Stil kann mt Hilfe von anderen Klassen auch verändert werden.
Code für den Button selbst (unverlinkt):

<button type="button" class="btn btn-primary">Test</button>

c) Test
Abschließend schalten Sie den HTML Editor aus, indem Sie wieder in der erweiterten Steuerleiste auf das Zeichen dafür klicken. Sie schauen, ob der Button angezeigt wird. Er sollte wie folgt aussehen:

Hinweis, der Button ist aber noch nicht interaktiv. Wie das geht, wird im nächsten Abschnitt erklärt.


2) Zwei Varianten der Verlinkung

a) markieren und Verlinken
Diese Variante ist nur bei einem Button zu empfehlen, da es sonst zu Problemen kommen kann. Hierfür markieren Sie ganz einfach mit dem Cursor den Button und wählen in der einfachen Steuerleiste die Verlinkungsoption aus.

Darauf öffnet sich das Verlinkungsfenster, in dem Sie dann die gewünschte Verlinkung eintragen.


b) Button im HTML-Editor mit Code verlinken

Die empfohlene Variante Buttons zu verlinken, ist es dies im HTML-Editor zu tun. Hierfür öffnen Sie wie oben beschrieben den HTML-Editor.
 
Damit nun eine Verlinkung auf diesem Button liegt, muss man zunächst Verlinkungen in HTML so verstehen, dass sie immer das eingeschlossene Objekt zu einer Verlinkung machen. Als Beispiel verlinke ich das Wort "Test" auf die Seite "">https://www.fh-potsdam.de/".

<a href="https://www.fh-potsdam.de/">Test</a>

Das Wort "Test" verlinkt nun auf die Seite "

Damit">https://www.fh-potsdam.de/".

Damit nun der Button "Test" auf die Webseite der Fachhochschule verlinkt, muss auch der Button von dem Link eingeschlossen sein. Das sieht so aus:

<a href="https://www.fh-potsdam.de/"><button type="button" class="btn btn-primary">Test</button></a>

In diesem Beispiel verlinkt also der Button "Test" in der Farbe Blau = Primary auf die Webseite der Fachhochschule.

Wenn Sie möchten, dass der Link in einem neuen Tab öffnet, müssen Sie nach dem Link "target="_blank" ergänzen. Das sieht so aus: 

<a href="https://www.fh-potsdam.de/"target="_blank"><button type="button" class="btn btn-primary">Test</button></a>

3) Cheatscheet für Buttons und Farben [Bearbeiten]

a) Weitere Button-Varianten finden Sie hier im Cheatsheet mit HTML-Code. Nicht alle funktionieren. Testen Sie diese vorher in einem Testkurs aus.

b) Wenn Sie möchten, dass der Button eine andere Farbe hat, können statt Primary für Blau im HTML-Code folgenden Code eingeben:

"Secondory" für Grau

"Success" für Grün

"Info" für Hellblau

"Warning" für Gelb

"Danger" für Rot