Edumaps: Inputs and Formatting in Box Editor

Erstellt von Edumaps . Klasse

At a glance 🚀

At a glance
  • The text formatting used on Edumaps is easy to learn.
  • If you are new, the editor bar will help you insert the formatting marks.
  •  
  • 📝 Text Formatting at a glance:
  •  
    *italic*
     
    **bold**
     
    > Quote
     
      Indented Text
     
    List:
    - One
    - Two
     
    Numbered list:
    1. One
    2. Two
     
    <<Feedback button>>
     
    {Colored text}{#FF851B}
     
    {Text linked}{https://www.edumaps.de}
     

Empty Lines between Elements

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

Bold or Italic

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***

Line breaks and blank lines

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.
Create multiple empty lines
  • Basically, each line is treated as a separate unit and represented by the system as a separate line.
  • Multiple empty lines are combined into one line.
  • However, if you want to add more empty lines, you can do this by putting a space in each line. This means that each line is interpreted as a separate line.
  • Example:
  • First line and now follows a distance:
  •  
  • Line with distance.

Lists and Enumerations

Simple List
  • You can generate a simple list with hyphens:
    • Test 1
    • Test 2
    • Test 3
  •  
  • 📝 Input:
  • - Test 1
    - Test 2
    - Test 3
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:
  • 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. Example:
    1. Fifth entry
    2. Sixth entry
    3. and so on
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

Indent Text

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

Quotations

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.

Links with Thumbnails

Link with Thumbnail
  • If a link to an external website is inserted, a thumbnail will be generated within 1 minute.
  • For example:
  •  
  • 📝 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.
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:
  •  
  • 📝 Input:
  • https://en.wikipedia.org/
    Website of Wikipedia
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}

Links within Text

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.bbc.com in the middle of the text.“
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/}.

Labels of images and links

Labels of images and links
  • A label 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
    Test test
  • to:
  • UPLOAD3
    Photo of our School
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}

Enter code

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

Use Latex

Use 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 \).

Superscripts and subscripts

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}

Own notes in boxes

Own notes in boxes
  • You can add your own notes when you are in editor mode.
  • These notes are only visible to the editor.
  • Simply put two slashes // at the beginning of the line.
  • The line will not be displayed in the map view.

Spoiler

Spoiler
  • 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
  • Spoilers are simply set with ?? at the beginning of a line.
  •  
  • 📝 Input:
  • Example:
     
    ?? This is a hidden solution text.
     
    ?? https://www.edumaps.de/file?id=15951864615653000476.jpg&code=unhj8wy
    This is a hidden photo.

Embed Graphs

Embed Graphs

Color for text/words

Color for text/words
  • 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:
  • 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

Headings and dividing line

Set 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
Horizontal Line
  • A horizontal line can be set inside a box with three hyphens ---.
  • Example:

  •  
  • 📝 Input:
  • ---

Button for Feedback

Button for Feedback
  • If you want your students to give feedback, you can set a feedback button for this.
  • Example:
  •  
  • 📝 Input:
  • Two square brackets are used at the beginning and at the end.
  • <<Feedback here>>

Formatting in paths

Link header of a path
Insert Annotations
  • In the path editor you can "insert annotations". These annotations appear below the path title.
  • New lines are included in the annotations.
  • You can also set formatting for bold and italics.
  • 📝 Input (Example):
  • **Prior knowledge:** These are my comments on the subject.
     
    Second line with more information.

Miscellaneous

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.