Edumaps: Eingaben und Formatierungen im Box-Editor

Erstellt von Edumaps . Klasse

Auf einen Blick 🚀

Auf einen Blick
  • Die auf Edumaps verwendeten Formatierungen für Texte sind leicht zu erlernen.
  • Falls Sie neu sind, hilft Ihnen die Editorleiste beim Einfügen der Formatierungszeichen.
  •  
  • 📝 Text-Formatierungen auf einen Blick:
  •  
    *kursiv*
     
    **fett**
     
    > Zitat
     
      Eingerückter Text
     
    Aufzählung:
    - Eins
    - Zwei
     
    Nummerierte Aufzählung: 
    1. Eins
    2. Zwei
     
    {Farbiger Text}{#FF851B}
     
    {Linktext}{https://www.edumaps.de}
     
0

Leere Zeilen zwischen Elementen

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
0

Fett oder Kursiv

Wörter fett oder kursiv machen
  • Fett mit umschließenden zwei Sternchen:
  • Fettdruck
  • Kursiv mit umschließenden einem Sternchen:
  • Kursivdruck
  •  
  • 📝 Eingabe:
  • **Fettdruck**
     
    *Kursivdruck*
  •  
  • Fett und Kursiv somit:
  • ***fettkursiv***
0
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
0

Zeilenumbruch und leere Zeilen

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.
0
Mehrere leere Zeilen erzeugen
  • Grundsätzlich wird jede Zeile als eigene Einheit behandelt und vom System als eigene Zeile dargestellt.
  • Mehrere leere Zeilen werden zu einer Zeile zusammengefasst.
  • Wenn Sie jedoch weitere leere Zeilen einfügen möchten, so ist dies möglich, indem Sie in jede Zeile ein Leerzeichen setzen. Dadurch wird jede Zeile als eigenständige Zeile interpretiert.
  • Beispiel:
  • Erste Zeile und nun folgt ein Abstand:
  •  
  • Zeile mit Abstand.
0

Listen und Aufzählungen

Einfache Liste
  • Einfache Liste mit Anstrich erzeugen:
    • Test 1
    • Test 2
    • Test 3
  •  
  • 📝 Eingabe:
  • - Test 1
    - Test 2
    - Test 3
0
Nummerierte Liste
  • Nummerierte Listen können mit doppeltem Anstrich -- erzeugt werden:
    1. test 1
    2. test 2
    3. test 3
    4. 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:
    1. Fünfter Eintrag
    2. Sechster Eintrag
    3. usw.
0
Liste mit Einzug erzeugen
  • Eine Liste kann mit Einzug dargestellt werden, indem man ein Leerzeichen vor jeden Anstrich setzt.
  • Beispiel:
    • Eins
    • Zwei
    • Drei
  • 📝 Eingabe:
  •  - Eins
     - Zwei
     - Drei
  •  
  • Auch Teillisten sind möglich:
    • Hunderassen
      • Dackel
      • Schäferhund
      • Beagle
  • 📝 Eingabe:
  • - Hunderassen
    - Dackel
    - Schäferhund
    - Beagle
0

Text einrücken

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.
0
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
0

Zitate

Zitate setzen
  • Zitate werden mit einem > am Beginn der Zeile erzeugt:
  • Alle Träume können wahr werden, wenn wir den Mut haben, ihnen zu folgen.
  •  
  • 📝 Eingabe:
  • > Alle Träume können wahr werden, wenn wir den Mut haben, ihnen zu folgen.
  •  
  • Eine zweite Darstellung von Zitaten wird mit >> am Beginn der Zeile erzeugt:
  • Errare humanum est.
  •  
  • 📝 Eingabe:
  • >> Errare humanum est.
0

Links mit Vorschaubildern

Link mit Vorschaubild
  • Wenn ein Link zu einer externen Webseite eingefügt wird, so wird innerhalb von 1 Minute ein Vorschaubild generiert.
  • Zum Beispiel:
  • Thumbnail www.bildungsserver.de
  •  
  • 📝 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.
0
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:
  • Thumbnail Webseite zum Bildungsserver
  •  
  • 📝 Eingabe:
  • https://www.bildungsserver.de/
    Webseite zum Bildungsserver
0
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}
0
Eigenes Vorschaubild einsetzen
  • Um ein eigenes Vorschaubild zu setzen, gehen Sie wie folgt vor:
    1. Machen Sie einen Screenshot von der Webseite.
    1. Laden Sie den Screenshot in Ihre Box hoch.
    1. Tragen Sie anschließend den Link zur Webseite direkt unterhalb des UPLOAD1-Textes ein.
    1. Setzen Sie zusätzlich ein Ausrufezeichen ! vor den Link. Dadurch wird das Vorschaubild auf die externe Webseite verlinkt.
  • 📝 Eingabe:
  • UPLOAD1
    !https://de.wikipedia.org/
0

Links im Text

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.“
0
Text verlinken
  • Möchte man einen Teil eines Textes verlinken, so ist dies ebenfalls möglich.
  • Beispiel:
  • Das ist ein verlinkter Text.
  •  
  • 📝 Eingabe:
  • Das ist ein {verlinkter Text}{https://www.edumaps.de/}.
0

Labels von Bildern und Links

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
0
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}
0

Code eingeben

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;`
0

Latex nutzen

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.
0

Hochstellen und Tiefstellen

Text hochstellen und tiefstellen
  • Hochstellen geht mit Caret und geschweiften Klammern.
  • Beispiel: x^{2y}
  • Tiefstellen geht mit Unterstrich und geschweiften Klammern.
  • Beispiel: x_{1}
  •  
  • 📝 Eingabe:
  • Beispiel: x^{2y}
     
    Beispiel: x_{1}
0

Eigene Notizen in Boxen

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.
  • Eigene Notiz (nur im Bearbeitungsmodus)
    Eigene Notiz (nur im Bearbeitungsmodus)
0

Spoiler-Funktion

Spoiler
  • Die Spoiler-Funktion bedeutet: Inhalte können versteckt werden und sind nur mit Klick anzeigbar.
  • Beispiel:
  • Zum Zeigen klicken
    Dies ist ein versteckter Lösungstext.
  • Zum Zeigen klicken
    Dies ist ein verstecktes Foto.
    Dies ist ein verstecktes Foto.
  • Spoiler werden einfach mit ?? zu Beginn einer Zeile gesetzt.
  •  
  • 📝 Eingabe:
  • Beispiel:
     
    ?? Dies ist ein versteckter Lösungstext.
     
    ?? UPLOAD3
    Dies ist ein verstecktes Foto.
0

Farbe für Text/Wörter

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:
  • Thumbnail en.wikipedia.org
  • 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
0

Hintergrundfarbe für Texte/Wörter

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
0

Überschriften

Überschriften
  • Eine Überschrift kann gesetzt werden, indem man ein Hash-Zeichen # gefolgt von einem Leerzeichen am Anfang der Zeile setzt.
  • Meine Überschrift
  •  
  • 📝 Eingabe:
  • # Meine Überschrift
0
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
0
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.
0

Button für Rückmeldung

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:
  • Rückmeldung
  •  
  • 📝 Eingabe:
  • Dazu verwendet man zwei Pfeile zu Beginn und am Ende.
  • ⇢Rückmeldung⇠
0

Trennlinien

Horizontale Linie
  • Eine horizontale Linie kann innerhalb einer Box mit --- oder *** gesetzt werden.
  • Beispiel:
  •  
  • 📝 Eingabe:
  • ---
0

Checkboxen

Checkboxen
  • Checkboxen lassen sich mit Markdown-Syntax leicht erstellen.
  • Beispiel:
    • ☑ Erstes Element
    • ☐ Zweites Element
    • ☑ Drittes Element
  •  
  • 📝 Eingabe:
  • [x] Erstes Element
    [ ] Zweites Element
    [x] Drittes Element
0

Tooltips (Popups)

Tooltips für Wörter
  • 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.
0

Graphen einbetten

Graphen einbetten
0

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*.
0
Kopfzeile eines Pfades verlinken
0
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.
0

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*.
0
Kopfzeile einer Box verlinken
0

Sonstiges

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.
0
(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:
    1. Farbe bearbeiten klicken
    2. Farbcode ändern
    3. An den Farbcode hinten ein 55 anhängen
  • Nun ist der Titel-Hintergrund halbtransparent. Wollen Sie die ganze Box halbtransparent, müssen Sie noch auf das Icon "Box mit Farbe füllen" ganz rechts klicken.
  • Die Transparentwerte, die an einen Farbcode wie #FF5500 angehangen werden können, laufen von 00 (voll transparent) bis FF (opaque).
  •  
  • Screenshot Einstellung Box-Farbe halbtransparent
    Screenshot Einstellung Box-Farbe halbtransparent
0