29. Ga naar inhoud

29. Markdown - Locatie Editor

Markdown is een eenvoudige opmaaktaal waarmee je tekst kunt formatteren met een minimale en leesbare syntax. Alle standaardfeatures van Markdown zijn beschikbaar in de tekstvakken van de Exercise Editor in NexEd.

Markdown handleiding

29.1 Code blocks

Standaard ondersteunt Markdown code blocks. In NexEd is dit ook ondersteund met diverse programmeertalen, zoals hieronder een voorbeeld in JavaScript:

Syntax
```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```

Daarnaast hebben we een aantal NexEd-specifieke code blocks:

```info
Dit is een info block, hierin kan je extra informatie voor de student plaatsen.
```

```warn
Dit is een warn block, hierin kan je waarschuwingen voor de student plaatsen.
```

```error
Dit is een error block, is warning niet ernstig genoeg? Dan kan je een error block gebruiken.

Gebruik dit spaarzaam.
```

```steps
1. Dit is een steps block
2. Hier in plaats je genummerde stappen
3. Voor de student om te doorlopen tijdens de exercise
```

```portfolio
Portfolio blocks worden gebruikt om extra informatie te tonen aan studenten die een portofolio gebaseerd examen moeten doen.

Deze blocks worden alleen getoond indien de feature toggle hiervoor aanstaat, als je dit block ziet dan staat deze feature aan voor de huidige locatie.
```

29.2 Afbeeldingen en video's

Op plekken waar je visuele media kan uploaden (zoals in de Exercise Editor), is er ook een knop beschikbaar om je in één keer een stukje HTML inclusief URL te geven zodat je je media kan tonen. (1) Plak dit stukje code vervolgens ergens in een tekstvak:

  1. 🙋‍♂️ Klik hier om te bekijken hoe dit in de Exercise Editor werkt.
Syntax
<img src="https://app.nexed.com/assets/images/growth.png" width="500"/>

Breedte aanpassen

Afbeeldingen of video's zonder gedefineerde width attribuut kunnen tot maximaal de grootte van hun container groeien. Je kan de breedte aanpassen door het width attribute te wijzigen.

29.2.1 Overig

Tevens kan je de uitlijning van de afbeelding aanpassen door een class in de img te zetten. Hierin heb je de keuze uit left, center en right.

Syntax
<img src="https://app.nexed.com/assets/images/laptop.png" width="250" class="right"/>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Wil je zorgen dat een volgend stuk tekst onder de afbeelding eindigt? Plaats dan eerst een HTML element met de clear class erop, zoals:

Syntax
 <div class="clear">&nbsp;</div>

Let ook hier op!

  • Manipuleer de URL's niet handmatig, omdat dit tot autorisatieproblemen kan leiden.
  • Wees heel voorzichtig met URL's van andere exercises of Self diagnostics te gebruiken. Als een student geen toegang heeft tot die exercise kan de student die afbeelding niet laden.

29.3 Emoji's

In Markdown kun je emoji's invoegen met shortcodes (1) door een dubbele punt aan het begin en einde van de emoji-naam te zetten. Voorbeelden van emoji-shortcodes in Markdown:

  1. 🙋‍♂️ Je kunt een lijst met beschikbare emoji’s vinden op GitHub Emoji Cheatsheet.
  • :rocket: 🚀
  • :tada: 🎉
  • :warning: ⚠️

Emoji's kan je ook direct inladen via Unicode. 🔥

29.4 Tabbladen

Tabbladen worden standaard niet ondersteund in Markdown, maar in NexEd is dit wel beschikbaar.

Syntax
# Tab 1 {.tabset}
## Dit is tab 1
Hier staat alle content van tab 1.

# Tab 2
## Dit is tab 2
Hier staat alle content van tab 2.

# Tab 3
## Dit is tab 3
Hier staat alle content van tab 3.

{.endtabset}

Ook worden tabbladen voor specifieke operating systems ondersteund. Deze groep zal automatisch de tab die bij jouw operating systeem hoort openen.

Syntax
# Tab voor Windows {.tabset}{.tab-windows}
Dit is een tab specifiek voor Windows.

# Tab voor Linux {.tab-linux}
Dit is een tab specifiek voor Linux.

# Tab voor Mac OS {.tab-mac}
Dit is een tab specifiek voor Mac.

{.endtabset}

29.5 Accordion

Ook dit wordt standaard niet ondersteund in Markdown, maar in NexEd is dit wel beschikbaar.

Syntax
# Tab 1 {.accordion}
Hier staat alle content van tab 1 je kan hierbinnen naar hartelust andere markdown gebruiken.

# Tab 2
Hier staat alle content van tab 2.

# Tab 3
Hier staat alle content van tab 3.

{.endaccordion}

29.6 Meerkeuzevragen

Sommige theorie opdrachten bevatten veel uitleg, soms net iets te veel om in één keer goed te snappen. Het kan dan helpen om de grote hoeveelheid theorie op te splitsen in kleinere blokken en per blok te controleren of de student het nog allemaal snapt.

Met het meerkeuzecomponent kan je overal in een theorie exercise een meerkeuzevraag toevoegen. Totdat de student de vraag goed beantwoordt, blijft de tekst na de vraag onleesbaar.

Toelichting syntax

Met OK geef je aan welk antwoord het juiste antwoord is. Let op dat er maar één correct antwoord kan zijn.

Syntax
{question:Welke getallen worden in een binair systeem gebruikt?}

- OK 0, 1
- 0, 1, 2, 3
- 1, 2
- 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Dit is een optionele toelichting die wordt getoond als het antwoord correct is aangekruist.

{/question}