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 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:
Click to show

This is a hidden solution text.
Click to show

File „This is a hidden photo.“ was deleted.
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:
Click to show

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 exclamation mark 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

Protect content with password

If you want to hide the content of a box and make it accessible only with a password, you can use the password function. Click on the dropdown arrow in the box editor and select "Password".
Alternatively, you can also enter the password directly in the box editor:
📝 Input:
&&pw:yourpassword&&
Switch to the map view, and the content is now hidden and will only be displayed upon entering the correct password.
⚙ password

23

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

24

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

25

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

26

Insert Countdown

If you want to create a countdown, you can use the 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

27

Create Tables

A template of a table can be used through the box editor.
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

28

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

29

(Semi)Transparent Background Colors

You can make the background of boxes semi-transparent or fully transparent.
To create a semi-transparent background you need to:
1. Edit the box and click “Edit color” (pencil icon).
2. Click “Edit Color” a second time
3. You will now see the transparency slider that you can adjust.
If you want to apply the semi-transparent color to the whole box, you have to click on “Fill”.
⚙ transparent