Exportieren

1.3 Eingaben und Formatierungen im Box-Editor

Edumaps Tutorial Edumaps

Einführung

  • ✔️ Hier lernen Sie alle wichtigen Eingaben und Formatierungen innerhalb des Boxeditors kennen.
  • ✔️ Es gibt viele Formatierungen, die schnell gesetzt sind. Es braucht nur wenige Zeichen.
  • ✔️ Die Formatierungen für Texte sind leicht zu erlernen.
1

Editorleiste

2

Formatierungen auf einen Blick

  • Die am häufigsten Formatierungen auf einen Blick gezeigt:
  • 📝 Eingabe:
  • *kursiv* und **fett**
     
    > Ein Zitat hier.
     
    Aufzählung:
    - Eins
    - Zwei
     
    Nummerierte Aufzählung: 
    1. Eins
    2. Zwei
     
      Eingerückter Text
     
    {Verlinkter Text}{https://www.edumaps.de}
     
3

Leere Zeilen zwischen Elementen

  • Elemente (Fotos, Videos, Links) müssen 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
4

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

Halber Zeilenabstand

  • Manchmal ist ein einfacher Zeilenumbruch zu eng und eine leere Zeile zu weit. Für den Abstand dazwischen setzen Sie eine Tilde ~ an das Ende der Zeile.
  • Der Text wird umgebrochen und erhält zusätzlich einen halben Zeilenabstand.
  • 📝 Eingabe:
  • Mein Text hier ~
    Der Text geht weiter
  • Praktisch bei Gedichten und Liedtexten: Endet die letzte Zeile eines Absatzes mit ~, so wird auch der Abstand zum nächsten Absatz um einen halben Zeilenabstand vergrößert.
  • Hinweis: In Listen, Tabellen und Code-Blöcken bleibt die Tilde ohne Wirkung und wird normal angezeigt.
6

Wörter fett oder kursiv machen

7

Wörter durchstreichen und unterstreichen

8

Einfache Liste

9

Nummerierte Liste

10

Liste mit Einzug erzeugen

11

Text einrücken

12

Text-Einzug mit zwei Stufen

13

Zitate setzen

14

Mehrzeilige Zitate

15

Link mit Vorschaubild

16

Link mit Vorschau und eigenem Text

17

Textlink setzen (ohne Vorschaubild)

18

Text mit Upload verlinken

19

Eigenes Vorschaubild einsetzen

20

Links innerhalb von Text

21

Text verlinken

22

Link als Button

23

Labels von Bildern und Links

24

Zusätzliche Informationen bei Bildern und PDFs mittels Info-Icon

25

Code formatieren

  • 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;`
  • ⚙ code
26

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.
  • ⚙ latex
27

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}
  • ⚙ hochtief
28

Versteckte Notizen in Boxen

  • Eigene Notizen kann man im Bearbeitungsmodus einfügen.
  • Diese Notizen werden in der Map-Ansicht versteckt.
  • Hierzu einfach am Anfang der Zeile zwei Schrägstriche // setzen.
  • Die Zeile wird dann in der Map-Ansicht nicht dargestellt.
  • ⚙ notizen
29

Spoiler

30

Zeitgesteuerter Spoiler

31

Textfarbe

  • 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 9BE670
    • Dunkelgrün 008000
    • Teal 008080
    • Marineblau 000080
    • Aqua 00FFFF
    • Fuchsienfarbig FF00FF
    • Violett 800080
  • ⚙ hexcolor
  • ⚙ textfarben
32

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
  • ⚙ hintergrundfarbe
33

Überschriften

34

Unterüberschriften

35

Spezielle Überschriften

36

Horizontale Trennlinie

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

  •  
  • 📝 Eingabe:
  • ---
  • ⚙ trennlinie
37

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:
  • <tiny>Tiny Text</tiny>
    <small>Small Text</small>
    <big>Big Text</big>
  • Die Änderung der Schriftgröße kann verwendet werden in Maptiteln, Spaltentiteln, Boxtiteln und Boxinhalten.
  • ⚙ schriftgrößen
38

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
  •  
  • 💖 Im Bearbeitungsmodus können Sie dann auf die Checkboxen innerhalb einer Box klicken und diese abhaken oder abwählen. Der Zustand der Checkboxen wird im Boxinhalt gespeichert.
  • ✔️ Tipp: Nutzen Sie im Boxeditor „Module“ und wählen Sie das Modul „Checkliste“, das einfacher zu bedienen ist.
  • ⚙ checkboxen
39

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.
  • ⚙ tooltips
40

Umfragen durchführen

  • Möchten Sie eine Umfrage durchführen, wobei Sie die wählbaren Optionen festlegen, so können Sie das Umfrage-Modul verwenden.
  • Sie finden es im Dropdown mit „Umfrage“.
  • Die Umfrage muss innerhalb von Tags stehen, zum Beispiel:
  •  
  • 📝 Eingabe:
  • <poll>
    Option A
    Option B
    Option C
    </poll>
  • ⚙ umfragen
41

QR-Codes erstellen

  • Möchten Sie einen QR-Code erzeugen, so können Sie das Dropdown im Box-Editor nutzen und „QR-Code“ auswählen.
  • Geben Sie den Text oder Link, der sich hinter dem QR-Code verstecken soll ein.
  • Der QR-Code wird sofort dynamisch erzeugt. Sie können den Text auch jederzeit ändern. Sofort wird der QR-Code aktualisiert.
  •  
  • 📝 Eingabe:
  • {qrcode:Mein geheimer Text}
  • ⚙ qrcodes
42

Popup-Nachricht

  • Möchten Sie dem Besucher Ihrer Map eine wichtige Nachricht anzeigen, so können Sie die „Popup-Nachricht“ hierzu verwenden.
  • Klicken Sie im Boxeditor auf das Dropdown und wählen „Popup-Nachricht“. Geben Sie nun Ihren Text ein.
  • Der Text wird als Popup-Dialog in der Mapansicht angezeigt, wenn jemand Ihre Map besucht.
  •  
  • 📝 Eingabe:
  • &&msg:Hallo meine Freunde!&&
  • ⚙ popup
43

Countdown einfügen

  • Möchten Sie einen Countdown erzeugen, so können Sie das Dropdown „Module“ im Box-Editor nutzen und „Countdown“ auswählen.
  • Geben Sie die Zeit in Sekunden ein, wie lange der Countdown gehen soll.
  • Der Countdown erscheint in der Vorschau. Mit Klick darauf startet der Countdown.
  •  
  • 📝 Eingabe:
  • &&count:123&&
  • ⚙ countdown
44

Tabellen erstellen

  • Eine Vorlage einer Tabelle können Sie über den Boxeditor einsetzen. Klicken Sie auf „Bausteine“ und dann „Tabelle“.
  • Beispiel:
  • Kopf 1Kopf 2Kopf 3
    A1A2A3
    B1B2B3
  • 📝 Eingabe:
  • ||| Kopf 1 | Kopf 2 | Kopf 3
    || A1 | A2 | A3
    || B1 | B2 | B3
  • Der Tabellenkopf beginnt mit drei senkrechten Strichen |||. Jede neue Tabellenzeile muss mit || beginnen.
  •  
  • Einfache Alternative:
  • Sollte es sich um eine kleine Tabelle handeln, so können Sie diese direkt eingeben, 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.
  • ⚙ tabellen
45

Automatische Inhaltsübersicht

  • Sie können automatisch eine Inhaltsübersicht für alle Boxen auf Ihrer Map erzeugen.
  • Hierzu öffnen Sie den Boxeditor, klicken auf „Mehr“, dann „Layout“ und wählen „Inhaltsübersicht“.
  • Anschließend erscheint ein vollständiges Inhaltsverzeichnis mit Link zu jeder Box.
  • ⚙ inhaltsubersicht
46

Text-to-Speech

  • Mit Hilfe der Option „Text-to-Speech“ („Text-zu-Sprache“) können Sie einen beliebigen Text mit natürlicher Stimme vorlesen lassen.
  • Markieren Sie den Text, klicken Sie auf „Mehr“, wählen Sie „Interaktiv“ und dann „Text-zu-Sprache“. Als nächstes werden Sie aufgefordert, die Audiosprache auszuwählen.
  • Die Sprache wird dann mit Hilfe des Audio-Tags erkannt.
  • Beispiele:
  • Je pense que le ciel est beau et paisible.
  • I like to play football, basketball and chess.
  • Пусть в твоём дне будет больше света, чем забот.
  •  
  • 📝 Eingabe:
  • <audio-fr>Je pense que le ciel est beau et paisible.</audio>
  • ⚙ tts
47

Interaktive Checkliste

  • Möchten Sie Ihren Schülern eine Aufgabenliste zum Abhaken geben, so können Sie das Modul „Checkliste" verwenden. Sie finden es im Boxeditor unter „Module".
  • Im Unterschied zu den einfachen Checkboxen speichert die interaktive Checkliste den Fortschritt je Benutzer. Jeder Schüler hakt seine eigenen Punkte ab, ohne den Boxinhalt zu verändern.
  • 📝 Eingabe:
  • <check>
    Aufgabe 1 lesen
    Arbeitsblatt ausfüllen
    Ergebnis hochladen
    </check>
  • 💖 Eine Übersicht aller Ihrer Checklisten mit Ihrem Fortschritt finden Sie auf der Seite „Meine Checklisten".
  •  
  • Hinweis: Als Mapbesitzer können Sie im Bearbeitungsmodus sehen, welche Benutzer welche Punkte abgehakt haben.
48

Quiz erstellen

  • Möchten Sie eine Verständnisfrage direkt in eine Box einbauen, so können Sie das Modul „Quiz" verwenden. Sie finden es im Boxeditor unter „Module".
  • Sie legen eine Frage und mehrere Antwortoptionen fest und markieren die richtige Antwort. Die Schüler wählen eine Option und erhalten sofort eine Rückmeldung, ob die Antwort richtig oder falsch ist.
  • 📝 Eingabe:
  • <quiz>
    Wie viele Beine hat eine Spinne?
    6
    #8
    10
    </quiz>
49

Tag-Filter

  • Sie können einen Tag innerhalb einer Box setzen. Hierzu stellen Sie ein Hash-Zeichen # direkt vor einen Begriff.
  • Beispiel: fertig schule
  • Auch mehrere Tags sind möglich.
  • Wenn Sie auf einen Tag klicken, so werden nur noch die Boxen angezeigt, die diesen Tag enthalten. Alle anderen Boxen werden ausgeblendet.
  • Klicken Sie denselben Tag erneut, wird der Filter aufgehoben und alle Boxen werden wieder angezeigt.
  • Beachten Sie: Ein Tag besteht aus einem Wort (ohne Leerzeichen). Punkt, Minus und Unterstrich innerhalb des Wortes sind erlaubt, sollten aber vermieden werden.
  • Tipp: Sie können eine Map auch so verlinken, dass mit Aufruf des Map-Links nur Boxen mit Ihrem gewählten Tag angezeigt werden. Hierzu setzen Sie an den Link hinten heran: ?tag=meintag (wobei "meintag" von Ihnen entsprechend ersetzt wird).
  •  
  • 📝 Eingabe:
  • #meintag
  •  
  • Siehe auch:
  • ⚙ tagfilter
50

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.
  • Die Markdown-Syntax können Sie sich anzeigen lassen, indem Sie im Boxeditor das Dropdown benutzen und dort „Syntax an/aus“ wählen.
  • ⚙ markdown