1.3 Tutorial: Inputs and Formatting in Box Editor

Introduction

✔️ Here you will learn how the inputs in the box editor work:
✔️ There are many formatting options that can be quickly applied. It only takes a few characters.
✔️ The formatting for texts is easy to learn.

Editor Bar

If you are working the first time with the editor, then the editor bar will help you to format the text.
Editor Bar
Also note the other modules in the editor “More” dropdown.
Modules in Editor

Formatting at a glance

The most frequently used formats shown at a glance:
*italic* and **bold** > Quote List: - One - Two Numbered list: 1. One 2. Two ?? Hidden text (spoiler)   Indented Text {Linked Text}{https://www.edumaps.de}

1

Empty Lines between Elements

Elements (photos, videos, links) have to be divided by empty lines.
A contiguous text is recognized as one element, even though it continues on the next line.
Example:
My text with line break
My text with
line break
⚠️ If we want to attach an image/video or a file, we have to insert a blank line in between. Otherwise the link belongs to the previous text.
❌ Wrong:
My text with line break New content here
✔️ Correct with new line in between:
My text with line break New content here
⚙ lines

2

Line breaks vs. new lines

Line breaks are rendered exactly as they are in the text editor.
If you set a new line (with an empty line in front of it), then this counts as a new paragraph.
However, if you just type Enter in the text editor and break the text, the text in the view is also broken.
For example, the following input is displayed with line break:
It follows a new line.
⚙ linebreaks

3

Make words bold or italic

Bold with wrapping of two asterisks:
Bold text
Italic with wrapping of one asterisk:
Italic text
📝 Input:
**Bold text** *Italic text*
Bold and italic:
***bold-italic***
⚙ bold

3.2

Strikethrough and underline words

Strikethrough with enclosing two double tildes:
~~Strikethrough~~
Underlined with HTML syntax:
Underline
📝 Input:
~~Strikethrough~~ Underline
Crossed out and underlined:
~~Underline~~
Results in: ~~Underline~~

4

Simple List

You can generate a simple list with hyphens:
- Test 1
- Test 2
- Test 3
📝 Input:
- Test 1 - Test 2 - Test 3
⚙ lists

4.2

Numbered List

Numbered lists can be created with double hyphens --:
1. test 1
2. test 2
3. test 3
4. Hello
  and to the next line
The numbering is done automatically.
📝 Input:
-- test 1 -- test 2 -- test 3 -- Hello and to the next line
📝 Alternative input with numbering:
Make sure to put a whitespace before the first number so that the indent is set.
1. test 1 2. test 2 3. test 3 4. Hello and to the next line
The numbering can also start with a different number.

4.3

Create an indented list

A list can be indented by putting a space before each hyphen.
Example:
- One
- Two
- Three
📝 Eingabe:
- One - Two - Three
Partial lists are also possible:
- Dog breeds
- - Dachshund
  - Shepherd
  - Beagle
📝 Input:
- Dog breeds - Dachshund - Shepherd - Beagle

5

Indent Text

Text can be indented by putting two spaces at the beginning of the line.
For example:
This is long indented text spanning multiple lines.
📝 Input:
This is long indented text spanning multiple lines.
⚙ indent

5.2

Text indent with two levels

Text can be indented in two stages:
Standard
Indent Level 1
Indent Level 2
For the first level, two spaces have to be set at the beginning of the line.
For the second stage, four spaces have to be set at the beginning of the line.
📝 Input:
Standard Indent Level 1 Indent Level 2

6

Create Quotes

Quotations are created with a > at the beginning of the line:
All dreams can come true if we have the courage to follow them.
📝 Input:
> All dreams can come true if we have the courage to follow them.
A second type of quotations can be created with a >> at the beginning of the line:
Errare humanum est.
📝 Input:
>> Errare humanum est.
⚙ quotes

6.2

Multi-line Quotes

Place a > at the beginning of a paragraph, and only that paragraph will be marked as a quote. Therefore, you can place > before each paragraph if there are multiple paragraphs. Alternatively, you can insert a space on each empty line, and this will connect all paragraphs together.
Alternative solution: Place >>> at the beginning, and then all paragraphs will be represented as a quotation. You can end the large quote with <<<.
📝 Input:
>>> This is a quote over multiple paragraphs ... <<<

7

Links with Thumbnails

If a link to an external website is inserted, a thumbnail will be generated within 1 minute.
For example:
en.wikipedia.org LINK
📝 Input:
https://en.wikipedia.org/
⚠️ A preview image is only generated if the link stands alone on a line.
If the link is within text, it is displayed as a text link.
⚙ thumbnails

7.2

Link with thumbnail and custom text

If you want to set your own text under the thumbnail image, enter the text directly on the next line that follows the link.
For example:
Website of Wikipedia LINK
📝 Input:
https://en.wikipedia.org/ Website of Wikipedia

7.3

Set text link (without thumbnail)

If you want to create a pure text link and prevent a link thumbnail image, put an exclamation mark ! in front of the https.
Oder aber man umschließt den Link mit geschweiften Klammern{https://...}.
Example:
This is a text link: https://en.wikipedia.org/wiki/Canidae
📝 Input:
This is a text link: !https://en.wikipedia.org/wiki/Canidae
or:
This is a text link: {https://en.wikipedia.org/wiki/Canidae}

7.4

Link text with upload

If you want to link a text that points to the upload, place an exclamation mark before and after UPLOAD1 and then write the text to be linked, for example !UPLOAD1! Example PDF. This will link the text “Example PDF”.
Alternatively, you can use curly brackets around UPLOAD1 and insert the text as follows: {My Example PDF}{UPLOAD1}. This will link the text “My Example PDF”.

7.5

Use your own thumbnail

To set your own thumbnail of a website, proceed as follows:
1. Take a screenshot of the website.
2. Upload the screenshot into your box.
3. Enter the link to the website directly below the UPLOAD1 text.
4. Also place an exclamation mark ! in front of the link (!LINK1). This will link the preview image to the external website.
📝 Input:
UPLOAD1 !LINK1
You can also add a title. Overall, it would look like this:
UPLOAD1 !LINK1 My Title

8

Links within Text

If the link is within the text, it is automatically displayed as an inline link - without a thumbnail image.
Example of inline link:
„This is an example link to https://www.wikipedia.de in the middle of the text.“
⚙ textlinks

8.2

Link certain Text

If you want to link part of a text, this is also possible.
Example:
This is a linked text.
📝 Input:
This is a {linked text}{https://www.edumaps.de/}.

9

Labels for Images and Links

A label (caption) can be assigned for each uploaded image, audio, video file, etc.
This label (caption) can also be changed later on by changing the text below UPLOAD.
UPLOAD3 Photo of our School
to:
UPLOAD3 Photo of my old School
⚙ labels

9.2

Info-Icon at Upload (image/PDF)

If you want to add information to your uploaded image or PDF (such as mentioning the source), you can do this as follows:
📝 Input:
UPLOAD3 {Source: https://www.externalpage.org/}
The text inside the curly brackets is displayed on the info icon when you mouse over or click on it.
Example:
The info icon also works with the caption:
📝 Input:
UPLOAD3 Image label {Here is the text for the image}

10

Code Formatting

Set inline code with backticks.
Example: 24·x + 12 = 5
var x = 12;
var y = 12;
var z = x + y;
This way, you can also highlight individual words. However, they will have a monospaced font.
📝 Input:
Example: `24·x + 12 = 5` `var x = 12;` `var y = 12;` `var z = x + y;`
⚙ code

11

Use of Latex

Latex as a block with surrounding dollar signs:
$$ \int \limits_{2}^{\infty} + \frac{1}{2}·x^{45+y+{\alpha} } $$
Set Latex inline with $ 5x+2^x = 12 $ and continue writing. This can be used multiple times within a sentence $ x^2 $ und $ x^3 $.
📝 Input:
$$ \int \limits_{2}^{\infty} + \frac{1}{2}·x^{45+y+{\alpha} } $$ Set Latex inline with $ 5x+2^x = 12 $ and continue writing. This can be used multiple times within a sentence $ x^2 $ und $ x^3 $.
Note: For latex inside text labels, always use inline latex with $ … $ and not block latex.
⚙ latex

12

Superscripts and Subscripts

Superscript works with a caret and curly brackets.
Example: x^{2y}
Subscript works with underscore and curly brackets.
Example: x_{1}
📝 Input:
Example: x^{2y} Example: x_{1}
⚙ supersub

13

Hidden Notes in Boxes

You can add your own notes when you are in edit mode.
These notes are hidden in the map view.
Simply put two slashes // at the beginning of the line.
The line will not be displayed in the map view.
Hidden note in edit mode
⚙ notes

14

Spoilers

Spoiler means: Content can be hidden and it can only be viewed when the user clicks on it.
Example:
Zum Zeigen klicken

This is a hidden solution text.
Zum Zeigen klicken

This is a hidden photo.
Spoilers are simply set with ?? at the beginning of a line.
📝 Input:
Example: ?? This is a hidden solution text. ?? https://www.edumaps.de/file/15951864615653000476.jpg/unhj8wy This is a hidden photo.
⚙ spoiler

14.2

Timed Spoiler

With the timed spoiler you can, for example, recreate learning with flashcards.
Example:
Zum Zeigen klicken

This is a learning text that only appears for 10 seconds.
If you click on the spoiler, it will be displayed for 10 seconds. Then it is hidden again.
Timed spoilers are set with ??? at the beginning of a line.
📝 Input:
Example: ??? This is a learning text that only appears briefly.
⚙ timed-spoiler

15

Text Color

Words can be colored in any color.
Example: This is a blue word.
📝 Input:
This is a {blue word}{#0000FF}.
To do this, you need to know RGB color codes:
en.wikipedia.org LINK
Examples of RGB color codes:
- red FF0000
- green 00FF00
- blue 0000FF
- gray 888888
- light grey CCC
- maroon 800000
- yellow FFFF00
- olive 808000
- lime green 00FF00
- dark green 008000
- sea green 008080
- navy blue 000080
- aqua 00FFFF
- fuchsia FF00FF
- violet 800080
⚙ hexcolor
⚙ textcolor

16

Background Color for Text

You can give any word or text a background color of your choice. To assign a background color, just add another hash # after the color code to an already colored word.
Example: This is a green word and the next one is a red word.
📝 Input:
This is a {green word}{#CCFFCC#} and the next one is a {red word}{#FFA1A5#}.
Colors are specified using RGB color codes. Examples of RGB color codes:
Red FF0000 | Green 00FF00 | Blue 0000FF
⚙ backgroundcolor

17

Headlines

A heading can be set by putting a hash character # followed by a space at the beginning of the line.
My Headline
📝 Input:
# My Headline
⚙ headlines

17.2

Subheadlines

A subheading can be set with two hash characters ## followed by a space at the beginning of the line:
Second heading
📝 Input:
## Second heading
Another subheading can be set with three hash characters ### followed by a space at the beginning of the line:
Third heading
📝 Input:
### Third heading

17.3

Special Headlines

A special heading can be set by putting an dollar sign in front of the hash character, i.e. $#:
Special heading
📝 Input:
$# Special heading
With the use of such headings, texts can be better structured visually.

18

Horizontal Dividing Line

A horizontal line can be set inside a box with three hyphens --- or ***.
Example:
📝 Input:
---
⚙ divider

19

Font Sizes

You can set the font size differently for individual words.
You can increase the font size and decrease the font size of words as follows:
<tiny>Tiny Text</tiny> Small Text <big>Big Text</big>
Changing the font size can be used in map titles, column titles, box titles and box contents.
⚙ fontsizes

20

Checkboxes

Checkboxes are easy to create using Markdown syntax.
Example:
- ☑ First Element
- ☑ Second Element
- ☑ Third Element
📝 Input:
[x] First Element [ ] Second Element [x] Third Element
💖 In edit mode, you can click on the checkboxes within a box to check or uncheck them. The state of the checkboxes is saved in the box content.
⚙ checkboxes

21

Tooltips for Words (Popups)

If you want to explain a certain word, a so-called "tooltip" is suitable for this, which displays an explanation as soon as the user moves the mouse over the word or clicks on the word on a mobile device.
Example:
An Ocelot is not an Axolotl.
📝 Input:
An [ocelot]{The ocelot is a species of carnivore native to Central and South America.} is not an [axolotl]{The axolotl is an aquatic tailed amphibian}.
⚠️ Tooltips may only consist of plain text and may not contain any links or uploads.
⚙ tooltips

22

Conduct Polls

If you want to conduct a survey, where you specify the selectable options, you can use the poll module.
You can find it in the dropdown under “Poll”.
The poll must be enclosed within tags, for example:
📝 Input:
<poll> Option A Option B Option C </poll>
⚙ poll

23

Generate QR Codes

If you want to generate a QR code, you can use the dropdown in the box editor and select “QR Code”.
Enter the text or link that should be hidden behind the QR code.
The QR code is generated dynamically immediately. You can change the text at any time. The QR code is updated instantly.
📝 Input:
{qrcode:My secrect text}
⚙ qrcodes

24

Popup Message

If you want to display an important message to the visitor of your map, you can use the "Popup Message" for this purpose.
Click on the dropdown in the box editor and select "Popup Message". Now, enter your text.
The text will be displayed as a popup dialog in the map view when someone visits your map.
📝 Input:
&&msg:Hello my friends!&&
⚙ popup

25

Insert Countdown

If you want to create a countdown, you can use the “Modules” dropdown in the box editor and select "Countdown".
Enter the time in seconds for how long the countdown should last.
The countdown appears in the preview. Click on it to start the countdown.
📝 Input:
&&count:123&&
⚙ countdown

26

Create Tables

You can insert a table template via the box editor. Click “Elements” and then “Table”.
Insert table
Example:
Head 1 Head 2 Head 3
A1 A2 A3
B1 B2 B3
📝 Input:
||| Head 1 || Head 2 || Head 3 || || A1 || A2 || A3 || || B1 || B2 || B3 ||
The table header begins with three vertical bars |||. Each new table row must begin with ||.
Simple Alternative:
If it is a small table, you can enter it directly by inputting the table as a code block. This requires setting 3 backticks (`), then the table content, and then 3 backticks again.
Example:
Head 1 | Head 2 | Head 3 Content A | Content B | ... 1235678 | 9012345 | ...
However, this requires manual formatting.
⚙ tables

Head 1	Head 2	Head 3
A1	A2	A3
B1	B2	B3

27

Automatic List of Contents

You can automatically create a table of contents for all boxes on your map.
To do this, open the box editor, click “More”, then “Layout”, and select “List of contents”.
Option: List of contents
A complete table of contents will then appear with a link to each box.
⚙ contentslist

28

Text to Speech

With the “Text-to-Speech” option, you can have any text read aloud in a natural voice.
Highlight the text, click on “More”, select “Interactive” and then “Text-to-Speech”. You will be asked to choose the audio language.
The language is then defined inside the audio tag.
Examples:
Je pense que le ciel est beau et paisible.
I like to play football, basketball and chess.
Пусть в твоём дне будет больше света, чем забот.
📝 Input:
<audio-fr>Je pense que le ciel est beau et paisible.</audio>
⚙ tts

29

Tag Filter

You can set a tag within a box. To do this, place a hash sign # directly before a term.
Example: done school
Multiple tags are also possible.
If you click on a tag, only the boxes containing this tag will be displayed. All other boxes will be hidden.
If you click the same tag again, the filter will be removed and all boxes will be shown again.
Tip: You can also link to a map in a way that, when the map link is opened, only boxes with your selected tag are shown. To do this, append to the end of the link: &tag=mytag (replacing "mytag" accordingly).
Note: A tag consists of one word (no spaces).
📝 Input:
#mytag
See also tutorial:
Using Tags and Tag Filters on a Map LINK
⚙ tagfilter

30

Markdown

Our editor supports most of the Markdown syntax.
Article about Markdown (Wikipedia).
If you have written your documents with Markdown, you can copy and paste their contents directly into our editor.
You can display the Markdown syntax by using the dropdown in the box editor and selecting “Syntax on/off”.
⚙ markdown

1.3 Tutorial: Inputs and Formatting in Box Editor

Introduction

📑 Content Overview

Editor Bar

Formatting at a glance

Empty Lines between Elements

Line breaks vs. new lines

Make words bold or italic

Strikethrough and underline words

Simple List

Numbered List

Create an indented list

Indent Text

Text indent with two levels

Create Quotes

Multi-line Quotes

Links with Thumbnails

Link with thumbnail and custom text

Set text link (without thumbnail)

Link text with upload

Use your own thumbnail

Links within Text

Link certain Text

Labels for Images and Links

Info-Icon at Upload (image/PDF)

Code Formatting

Use of Latex

Superscripts and Subscripts

Hidden Notes in Boxes

Spoilers

Timed Spoiler

Text Color

Background Color for Text

Headlines

Subheadlines

Special Headlines

Horizontal Dividing Line

Font Sizes

Checkboxes

Tooltips for Words (Popups)

Conduct Polls

Generate QR Codes

Popup Message

Insert Countdown

Create Tables

Automatic List of Contents

Text to Speech

Tag Filter

Markdown