03 Tutorial: Eingaben und Formatierungen im Box-Editor
Edumaps
Auf einen Blick 🚀
-
Die Formatierungen für Texte sind leicht zu erlernen.
-
Falls Sie das erste Mal mit dem Editor arbeiten, dann hilft Ihnen die Editorleiste beim Formatieren des Textes.
-
-
-
📝 Formatierungen auf einen Blick:
*kursiv*
**fett**
> Zitat
Eingerückter Text
Aufzählung:
- Eins
- Zwei
Nummerierte Aufzählung:
1. Eins
2. Zwei
?? Versteckter Text (Spoiler)
{Verlinkter Text}{https://www.edumaps.de}
Leere Zeilen zwischen Elementen
-
Elemente (Fotos, Videos, Links) müssen bei Edumaps mit leeren Zeilen getrennt werden.
-
Ein zusammenhängender Text wird als ein Element erkannt, auch wenn er auf der nächsten Zeile weitergeht.
-
Beispiel:
Mein Text mit
Zeilenumbruch
-
Mein Text mit
Zeilenumbruch
-
⚠️ Wollen wir nun einen neuen Inhalt (Bild, Video etc.) anhängen, so müssen wir eine Leerzeile zwischen Text und Upload schalten.
-
❌ Falsch:
Mein Text mit
Zeilenumbruch
Neuer Inhalt
-
✔️ Richtig ist mit einer leeren Zeile:
Mein Text mit
Zeilenumbruch
Neuer Inhalt
Wörter fett oder kursiv machen
Wörter durchstreichen und unterstreichen
-
Durchstreichen mit umschließenden zwei Tilden:
-
Durchgestrichen
-
Unterstrichen mit HTML-Syntax:
-
Unterstrichen
-
-
📝 Eingabe:
~~Durchgestrichen~~
<u>Unterstrichen</u>
-
-
Durchgestrichen und unterstrichen somit:
~~<u>Unterstrichen</u>~~
-
Ergibt: Unterstrichen
Zeilenumbrüche und neue Zeilen
-
Zeilenumbrüche werden genau wie im Texteditor dargestellt.
-
Setzt man eine neue Zeile (mit leerer Zeile davor), dann gilt dies als neuer Absatz.
-
Setzt man jedoch nur ein Enter im Texteditor und bricht damit den Text, so wird auch der Text in der Ansicht gebrochen.
-
Zum Beispiel wird folgende Eingabe mit Zeilenumbruch dargestellt:
-
Es folgt
eine neue Zeile.
Nummerierte Liste
-
Nummerierte Listen können mit doppeltem Anstrich --
erzeugt werden:
-
- test 1
- test 2
- test 3
- Hello
und auf die nächste Zeile
-
Die Nummerierung erfolgt automatisch.
-
-
📝 Eingabe:
-- test 1
-- test 2
-- test 3
-- Hello
und auf die nächste Zeile
-
-
📝 Alternative Eingabe mit Nummerierung:
1. test 1
2. test 2
3. test 3
4. Hello
und auf die nächste Zeile
-
Die Nummerierung kann auch mit einer anderen Zahl starten. Beispiel:
-
- Fünfter Eintrag
- Sechster Eintrag
- usw.
Liste mit Einzug erzeugen
-
Eine Liste kann mit Einzug dargestellt werden, indem man ein Leerzeichen vor jeden Anstrich setzt.
-
Beispiel:
-
-
📝 Eingabe:
- Eins
- Zwei
- Drei
-
-
Auch Teillisten sind möglich:
-
-
📝 Eingabe:
- Hunderassen
- Dackel
- Schäferhund
- Beagle
Text einrücken
-
Text kann eingerückt werden, indem man zu Beginn der Zeile zwei Leerzeichen setzt.
-
Zum Beispiel:
-
Dies ist ein langer eingerückter Text über mehrere Zeilen.
-
-
📝 Eingabe:
Dies ist ein langer eingerückter Text über mehrere Zeilen.
Text-Einzug mit zwei Stufen
-
Text kann in zwei Stufen eingerückt werden:
-
Standard
-
Einzug Stufe 1
-
Einzug Stufe 2
-
Für die erste Stufe sind zwei Leerzeichen am Anfang der Zeile zu setzen.
-
Für die zweite Stufe sind vier Leerzeichen am Anfang der Zeile zu setzen.
-
-
📝 Eingabe:
Standard
Einzug Stufe 1
Einzug Stufe 2
-
-
-
Link mit Vorschaubild
-
Wenn ein Link zu einer externen Webseite eingefügt wird, so wird innerhalb von 1 Minute ein Vorschaubild generiert.
-
Zum Beispiel:
-
-
-
📝 Eingabe:
https://www.bildungsserver.de/
-
-
⚠️ Ein Vorschaubild wird nur erzeugt, wenn der Link alleine auf einer Zeile steht.
-
Befindet sich der Link innerhalb von Text, so wird er als Textlink dargestellt.
Link mit Vorschau und eigenem Text
-
Wenn Sie unter dem Vorschaubild einen eigenen Text setzen wollen, so geben Sie direkt auf der nächsten Zeile, die dem Link folgt, diesen Text ein.
-
Zum Beispiel:
-
-
-
📝 Eingabe:
https://www.bildungsserver.de/
Webseite zum Bildungsserver
Textlink setzen (ohne Vorschaubild)
-
Möchte man einen reinen Textlink erzeugen und ein Link-Vorschaubild verhinden, so setzt man ein Ausrufezeichen !
vor das https
.
-
Oder aber man umschließt den Link mit geschweiften Klammern{https://...}
.
-
Beispiel:
-
Das ist ein Textlink: https://de.wikipedia.org/wiki/Hessen
-
-
📝 Eingabe:
Das ist ein Textlink: !https://de.wikipedia.org/wiki/Hessen
-
oder:
Das ist ein Textlink: {https://de.wikipedia.org/wiki/Hessen}
Text mit Upload verlinken
-
Möchten Sie einen Text verlinken, der auf den Upload zeigt, so setzen Sie ein Ausrufezeichen vor und hinter UPLOAD1
und schreiben dann den zu verlinkenden Text, also zum Beispiel !UPLOAD1! Beispiel-PDF
. Dadurch wird der Text „Beispiel-PDF“ verlinkt.
-
Alternativ können Sie geschweifte Klammern um UPLOAD1
setzen und den Text wie folgt einsetzen: {Meine Beispiel-PDF}{UPLOAD1}
. Dadurch wird der Text „Meine Beispiel-PDF“ verlinkt.
Eigenes Vorschaubild einsetzen
Links innerhalb von Text
-
Befindet sich der Link innerhalb des Textes, so wird er automatisch als Inline-Link dargestellt - ohne Vorschaubild.
-
Beispiel für Inline-Link:
-
„Das ist ein Beispiellink zu https://www.tutory.de in der Mitte des Textes.“
Labels von Bildern und Links
-
Für jede hochgeladene Bild-, Audio-, Video-Datei usw. kann ein Label (Bildunterschrift) vergeben werden.
-
Dieses Label kann man auch nachträglich ändern, indem man den Text unter UPLOAD
ändert.
-
UPLOAD3
Foto von unserer Schule
-
zu:
-
UPLOAD3
Foto von meiner alten Schule
Info-Icon bei Uploads (Bild/PDF)
-
Möchte man eine Information (wie z. B. eine Quellenangabe) bei einem hochgeladenen Bild oder einer PDF hinterlassen, so kann man dies wie folgt tun:
-
📝 Eingabe:
UPLOAD3
{Quelle: https://www.externequelle.org/}
-
Der Text innerhalb der geschweiften Klammern wird bei dem Info-Icon angezeigt, wenn man mit der Maus herüber fährt oder darauf klickt.
-
Beispiel:
-
-
Das Info-Icon funktioniert ebenfalls zusammen mit der Bildunterschrift:
-
📝 Eingabe:
UPLOAD3
Bildunterschrift
{Hier der Infotext zum Bild}
Code eingeben
-
Inline-Code setzen mit Backticks.
-
Beispiel: 24·x + 12 = 5
-
var x = 12;
var y = 12;
var z = x + y;
-
Damit lassen sich auch einzelne Wörter
hervorheben. Diese sind dann jedoch mit Schriftart Monospace.
-
-
📝 Eingabe:
Beispiel: `24·x + 12 = 5`
`var x = 12;`
`var y = 12;`
`var z = x + y;`
Latex nutzen
-
Latex als Block mit umschließenden Dollarzeichen:
-
$$ \int \limits_{2}^{\infty} + \frac{1}{2}·x^{45+y+{\alpha} } $$
-
Latex inline setzen mit \( 5x+2^x = 12 \) und weiterschreiben. Geht auch mehrfach \( x^2 \) und \( x^3 \).
-
-
📝 Eingabe:
$$ \int \limits_{2}^{\infty} + \frac{1}{2}·x^{45+y+{\alpha} } $$
Latex inline setzen mit \( 5x+2^x = 12 \) und weiterschreiben. Geht auch mehrfach \( x^2 \) und \( x^3 \).
-
Hinweis: Nutzen Sie für Latex innerhalb von Textfeldern stets Inline-Latex mit \( … \)
und nicht Block-Latex.
Text hochstellen und tiefstellen
Eigene Notizen in Boxen
-
Eigene Notizen kann man im Bearbeitungsmodus einfügen.
-
Diese Notizen werden nur dem Bearbeiter angezeigt.
-
Hierzu einfach am Anfang der Zeile zwei Schrägstriche //
setzen.
-
Die Zeile wird dann in der Map-Ansicht nicht dargstellt.
-
Zeitgesteuerter Spoiler
-
Mit dem zeitgesteuerten Spoiler können Sie zum Beispiel das Lernen mit Karteikarten nachbauen.
-
Beispiel:
-
Zum Zeigen klicken
Dies ist ein Lerntext, der nur 10 Sekunden erscheint.
-
Klicken Sie auf den Spoiler, so wird er 10 Sekunden angezeigt. Danach wird er wieder versteckt.
-
Zeitgsteuerte Spoiler werden mit ???
zu Beginn einer Zeile gesetzt.
-
📝 Eingabe:
Beispiel:
??? Dies ist ein Lerntext, der nur kurz erscheint.
-
⚙ timed-spoiler
Farbe für Text/Wörter
-
Man kann Wörter mit beliebigen Farben versehen.
-
Beispiel: Dies ist ein blaues Wort.
-
-
📝 Eingabe:
Dies ist ein {blaues Wort}{#0000FF}.
-
-
Hierzu muss man RGB-Farbcodes kennen:
-
-
Beispiele von RGB-Farbcodes:
-
- Rot #FF0000
- Grün #00FF00
- Blau #0000FF
- Grau #888888
- Hellgrau #CCCCCC
- Kastanienbraun #800000
- Gelb #FFFF00
- Oliv #808000
- Lindgrün #00FF00
- Dunkelgrün #008000
- Seegrün #008080
- Marineblau #000080
- Aqua #00FFFF
- Fuchsienfarbig #FF00FF
- Violett #800080
-
⚙ hexcolor
Hintergrundfarbe für Texte/Wörter
-
Man kann Wörter mit beliebigen Farben hinterlegen. Hierzu bei einem bereits eingefärbten Wort hinter den Farbcode ein weiteres Hash #
anfügen.
-
Beispiel: Dies ist ein grünes Wort und das ein rotes Wort.
-
-
📝 Eingabe:
Dies ist ein {grünes Wort}{#CCFFCC#} und das ein {rotes Wort}{#FFA1A5#}.
-
-
Farben werden auch hier mit RGB-Farbcodes angegeben. Beispiele von RGB-Farbcodes:
Rot #FF0000 | Grün #00FF00 | Blau #0000FF
Unterüberschriften
-
Eine Unterüberschrift lässt sich mit zwei Hash-Zeichen ##
gefolgt von einem Leerzeichen am Anfang der Zeile setzen:
-
Zweite Überschrift
-
-
📝 Eingabe:
## Zweite Überschrift
-
-
Eine weitere Unterüberschrift lässt sich mit drei Hash-Zeichen ###
gefolgt von einem Leerzeichen am Anfang der Zeile setzen:
-
Dritte Überschrift
-
-
📝 Eingabe:
### Dritte Überschrift
Spezielle Überschriften
-
Eine spezielle Überschrift lässt sich setzen, indem man vor das Hash-Zeichen ein Ausrufezeichen setzt, also $#
:
-
Spezielle Überschrift
-
-
📝 Eingabe:
$# Spezielle Überschrift
-
-
Mit dem Einsatz solcher Überschriften lassen sich Texte besser visuell unterglieden.
Button für Rückmeldung
-
Möchte man, dass die Schüler ihre Rückmeldung direkt per Button aufrufen und abgeben können, so kann man hierzu einen Button setzen.
-
Beispiel:
-
-
-
📝 Eingabe:
-
Dazu verwendet man zwei Pfeile zu Beginn und am Ende.
⇢Rückmeldung⇠
Schriftgrößen
-
Sie können die Schriftgröße für einzelne Wörter unterschiedlich setzen.
-
Das Vergrößern der Schriftgröße und das Verkleinern der Schriftgröße von Wörtern ist wie folgt möglich:
<small>Small Text</small>
<big>Big Text</big>
-
Die Änderung der Schriftgröße kann verwendet werden in Maptiteln, Pfadtiteln, Boxtiteln und Boxinhalten.
Tooltips für Wörter (Popups)
-
Möchte man ein bestimmtes Wort erklären, so eignet sich ein sogenannter „Tooltip“ hierfür, der eine Erklärung anzeigt, sobald der Benutzer mit der Maus über das Wort fährt oder auf einem mobilen Endgerät auf das Wort klickt.
-
Beispiel:
-
Ein Ozelot ist kein Axolotl.
-
-
📝 Eingabe:
Ein [Ozelot]{Der Ozelot ist eine in Mittel- und Südamerika lebende Raubtierart.} ist kein [Axolotl]{Der Axolotl ist ein aquatil lebender Schwanzlurch}.
-
-
⚠️ Tooltips dürfen nur aus Reintext bestehen und keine Links oder Uploads enthalten.
Maptitel formatieren
-
Im Map-Editor kann man beim Titel-Eingabefeld auch einzelne Wörter formattieren.
-
Hier ist es möglich, Fett und Kursiv mit Sternchen zu setzen. Auch Zeilenumbrüche sind mit zwei Backslashs möglich.
-
📝 Eingabe (Beispiel):
**Fette Überschrift** \\ Dies ist auf der nächsten Zeile. \\ Hier nun ein *kursives Wort*.
Formatierungen in Pfadtiteln
Pfadtitel formattieren
-
Im Pfad-Editor kann man beim Titel-Eingabefeld auch einzelne Wörter formattieren.
-
Hier ist es möglich, Fett und Kursiv mit Sternchen zu setzen. Auch Zeilenumbrüche sind mit zwei Backslashs möglich.
-
📝 Eingabe (Beispiel):
**Fette Überschrift** \\ Dies ist auf der nächsten Zeile. \\ Hier nun ein *kursives Wort*.
Kopfzeile eines Pfades verlinken
Pfad-Anmerkungen einfügen
-
Im Pfad-Editor kann man "Anmerkungen einfügen". Diese Anmerkungen erscheinen unterhalb des Pfadtitels.
-
In den Anmerkungen werden neue Zeilen berücksichtigt.
-
Auch kann man Formatierungen für Fett Kursiv setzen.
-
📝 Eingabe (Beispiel):
**Vorwissen:** Dies sind meine Anmerkungen zu dem Thema.
Zweite Zeile mit mehr Information.
Formatierungen in Boxtiteln
Boxtitel formatieren
-
Im Box-Editor kann man beim Titel-Eingabefeld auch einzelne Wörter formattieren.
-
Hier ist es möglich, Fett und Kursiv mit Sternchen zu setzen. Auch Zeilenumbrüche sind mit zwei Backslashs möglich.
-
📝 Eingabe (Beispiel):
**Fette Überschrift** \\ Dies ist auf der nächsten Zeile. \\ Hier nun ein *kursives Wort*.
Kopfzeile einer Box verlinken
Externe Box in eigene Map einbetten
-
Sie können jede beliebige Box, die sich auf einer anderen Map befindet, auf Ihrer Map einbetten. Dadurch wird die komplette Box auf Ihrer Map angezeigt.
-
Hierzu gehen Sie wie folgt vor:
-
- Gehen Sie zu der externen Map und finden Sie die Box, die Sie einbetten möchten.
- Im Bearbeitungsmodus klicken Sie auf die drei Punkte bei der Box und wählen im Dropdown „Link zur Box“.
-
-
- Kopieren Sie den Link.
- Gehen Sie danach zu Ihrer Map und öffnen sie im Bearbeitungsmodus.
- Erstellen Sie eine neue Box und geben Sie im Boxtitel ein:
embed:
und setzen den Boxlink dahinter. Das sieht zum Beispiel so aus:
-
-
- Speichern Sie die Box und der externe Boxinhalt erscheint.
-
-
Eine eingebettete Box erkennen Sie an dem Icon rechts oben an der Box. Klicken Sie darauf, so öffnet sich die ursprüngliche Box.
-
-
Mögliche Szenarien für die Schule:
-
- Gruppen erarbeiten mit einer Map eine Aufgabe und haben eine Präsentationsbox, in der ihre Aufgaben zusammengefasst sind. Diese Präsentationsboxen werden dann vom Lehrer in einer Hauptmap verlinkt, um die aktuellen Gruppenergebnisse nebeneinander aufzuzeigen.
- Der Lehrer nutzt eine zentrale „Aufgabenbox“, die auf den einzelnen Maps der Schüler (bzw. verschiedener Gruppen) angezeigt wird. Diese wissen dann jeden Tag, welche Aufgaben zu erledigen sind.
-
-
Hinweis:
-
Eingebettete Boxen aktualisieren sich nicht von selbst, wenn sie auf der Ursprungs-Map bearbeitet werden. Um den aktuellen Stand aller Boxen zu sehen, müssen Sie Ihre Map manuell neu laden.
Externen Pfad in eigene Map einbetten
-
Sie können jeden beliebigen Pfad, der sich auf einer anderen Map befindet, auf Ihrer Map einbetten. Dadurch wird der Pfad mit all seinen Boxen auf Ihrer Map angezeigt.
-
Hierzu gehen Sie wie folgt vor:
-
- Gehen Sie zu der externen Map und finden Sie den Pfad, den Sie einbetten möchten.
- Im Bearbeitungsmodus klicken Sie auf die drei Punkte bei dem Pfad und wählen im Dropdown „Link zum Pfad“.
-
-
- Kopieren Sie den Link.
- Gehen Sie danach zu Ihrer Map und öffnen sie im Bearbeitungsmodus.
- Erstellen Sie einen neue Pfad und geben Sie im Pfadtitel ein:
embed:
und setzen den Pfadlink dahinter. Das sieht zum Beispiel so aus:
-
-
- Speichern Sie den Pfad und wechseln Sie in die Map-Ansicht.
-
- Glückwunsch! Der externe Pfad wird nun mit allen enthaltenen Boxen angezeigt.
-
-
Einen eingebetteten Pfad erkennen Sie an dem Pfeil-Icon rechts oben. Auch hat jede Box dieses Pfades das Icon. Klicken Sie darauf, so öffnet sich der ursprüngliche Pfad bzw. die ursprüngliche Box.
-
-
Mögliche Szenarien für die Schule:
-
Jeder Schüler soll sein Portfolio in einer Map erstellen. Pro Fach hat er einen Lernpfad bzw. eine Timeline. Diese Timeline teilt der Schüler mit dem Lehrer. Der Lehrer sammelt die Timelines (Pfade) all seiner Schüler in einer zentralen Map, indem er den jeweiligen Pfad einbettet. Auf diese Weise hat der Lehrer den Entwicklungsstand seiner gesamten Klasse auf einer einzigen Map im Überblick.
-
-
Hinweis:
-
Eingebettete Pfade und Boxen aktualisieren sich nicht von selbst, wenn sie auf der Ursprungs-Map bearbeitet werden. Um den aktuellen Stand aller Boxen zu sehen, müssen Sie Ihre Map manuell neu laden.
Erinnerung an Box
-
Sie können sich an jede gewünschte Box erinnern lassen, wenn sich die Box auf einer Ihrer Maps befindet. Hierzu ist folgende Einstellung nötig:
-
- Öffnen Sie Ihre Map im Bearbeitungsmodus.
- Finden Sie Ihre Box und klicken auf die drei Punkte und im Dropdown dann auf „Bearbeiten“. Der Box-Editor öffnet sich.
- Im Feld „Label“ tragen Sie das Datum im ISO-Format ein. Das heißt Jahr-Monat-Tag. Zum Beispiel
2024-06-15
. - Setzen Sie ein Hash-Symbol direkt vor das Datum, sodass das Datum so aussieht:
#2024-06-15
- Speichern Sie die Box. Fertig.
-
Jeden morgen um 7 Uhr prüft unser Server alle Boxen, ob solch ein Datum eingetragen ist. Dabei wird die Erinnerung immer einen Tag vorher ausgelöst.
-
Für das Beispiel mit #2024-06-15
würde eine Benachrichtigung am 14.06.2024 erzeugt. Das heißt, sie werden immer einen Tag vor dem eingestellten Datum an die Box erinnert.
-
Die Benachrichtigung sehen Sie rechts oben al gelbe Glocke. Klicken Sie darauf, so öffnet sich die Seite „Benachrichtigungen“.
Markdown
-
Unser Editor unterstützt einen Großteil der Markdown-Syntax.
-
Artikel über Markdown (Wikipedia).
-
Falls Sie Texte in Markdown in Ihren Dokumenten verfasst haben, können Sie diese direkt per Copy & Paste in unseren Editor einfügen.
(Halb)Transparente Hintergrundfarben
-
Sie könnnen Hintergrundfarben von Boxen und Pfaden halbtransparent oder vollständig transparent gestalten.
-
Um einen halbtransparenten Hintergrund zu erzeugen, müssen Sie:
-
- Box bearbeiten und auf „Farbe bearbeiten“ klicken (Stift-Icon).
- Ein zweites Mal auf „Farbe bearbeiten“
- Sie sehen nun den Schieberegler für Transparenz, den Sie einstellen können.
-
Wollen Sie die halbtransparente Farbe auf die ganze Box anwenden, so müssen Sie auf „Füllen“ klicken.
-
Tabellen erstellen
-
Sie können Tabellen in einer Box anlegen, indem Sie die Tabelle als Codeblock eingeben. Dazu sind 3 Backticks zu setzen (Zeichen `), dann der Tabelleninhalt, und dann wieder 3 Backticks.
-
Beispiel:
Kopf 1 | Kopf 2 | Kopf 3
Inhalt A | Inhalt B | ...
1235678 | 9012345 | ...
-
Dies erfordert jedoch händisches Formatieren.
-
Für größere Tabellen nutzen Sie bitte Teamtext.