Handleiding maken van coderdojo opdrachten met de cdz-assignment-generator

Handleiding

In dit document wordt uitgelegd hoe je met de cdz-assignment-generator CoderDojo opdrachten kan maken.

Over cdz-assignment-generator

De CDZ assignment generator is een tool waarmee markdown bestanden eenvoudig kunnen worden omgezet naar CoderDojo opdrachten in HTML.

Vaak voorkomende blokken kunnen in een bibliotheek worden gezet zodat ze in meerdere opdrachten kunnen worden gebruikt.

Deze gegenereerde HTML bestanden zijn geschikt op te kunnen printen over meerdere pagina's. Met de text *pagebreak* kan je ervoor zorgen dat de volgende sectie op een nieuwe pagina begint.

Een voorbeeld van een opdracht die is gemaakt met deze generator is Kat Race.

• Opdracht Kat race
• Broncode

Gebruik

Voor instructie over installatie en gebruik van de cdz-assignment-generator zie README.md

Over markdown

Markdown is een eenvoudige opmaaktaal waarmee je tekst kunt structureren en opmaken met simpele tekens. Het wordt veel gebruikt voor documentatie, README-bestanden (bijvoorbeeld op GitHub), forums en notities.

Het idee: je schrijft gewone tekst met een paar speciale symbolen, en die worden omgezet naar mooi opgemaakte tekst (vaak HTML).

(bron: ChatGPT, prompt: "Wat is markdown?")

Zie ook:

• Markdown Guide
• Cheat sheet

Over blokken

Blokken worden gebruikt om opdrachten op te delen in stukken. Bij het printen van een opdracht worden een page-break binnen een blok automatisch vermeden.

read-blok

Een read-blok is een blokje text waarin uitleg wordt aan de leerling. Probeer deze blokjes klein te houden en begin elk blokje met een kopje waaruit duidelijk wordt wat er wordt uitgelegd, zodat de leerling kan bepalen of leerling het blokje moet lezen of hen het wil lezen.

::: read

*Titel read blok*

Tekst Read blok.

:::

programmeer-blok

Een programmeer-blok wordt gebruik om aan te duiden dat de leerling iets moet programmeren. In programmeerblokken kan je stukjes code toevoegen. Deze worden automatisch opgemaakt met syntax highlights.

::: program

*Titel programmeer blok*

Tekst programmeerblok.

```py
  print('Hello world!')
```
:::

print('Hello world!')

build-blok

Een build wordt gebruikt om aan te duiden dat de leering iets moet doen. Dit is met name van toepassing voor Arduino opdrachten. bijvoorbeeld voor het bouwen van een elektronische schakeling.

::: build

*Titel build blok*

Tekst build-blok.

:::

uitdaging-blok

Een uitdaging-blok wordt gebuikt om de Ninja een extra uitdaging te geven.

::: challenge

*Titel uitdaging blok*

Tekst uitdaging-blok.

:::

Gebruik van images

Je kan eenvoudig plaatjes aan blokken toevoegen. Ook is het mogelijk plaatjes naar links of rechts te laten "floaten" zodat de tekst er automatisch omheen wordt weergegeven. De plaatjes kan je ergens in de directory structuur van de opdracht plaatsen. Linken naar plaatjes die online staan is ook mogelijk.

Met het element *clear-float* kan je ervoor zorgen dat de tekst erna weer onder het plaatje wordt weergegeven en dus niet ernaast. (Zie ook: CSS)

![Arduino](assets/schema.svg){.float-right}
Het plaatje hiernaast wordt met de style float-right weergegeven.

*clear-float*

![Arduino](assets/schema.svg){.float-left}
Het plaatje hiernaast wordt met de style float-left weergegeven.

*clear-float*

Het plaatje hieronder wordt zonder float weergegeven.

![Arduino](assets/schema.svg)

*clear-float*

Verwijzen naar standaard opdracht blokken

Vaak voorkomende elementen kunnen in een bibliotheek worden beheerd zodat ze eenvoudig kunnen worden hergebruikt. Hieronder een voorbeeld van het gebruik van het standaard element voor de uitleg van de modulo functie. Hier kan zelfs worden aangegeven in welke programmeertaal de uitleg moet worden gegeven.

 <!-- @include: global-lib/explain-mod.md#scratch -->

wordt in Scratch:

wanneer groene vlag wordt aangeklikt
maak [rest v] ((13) modulo (4))

voor arduino:

 <!-- @include: global-lib/explain-mod.md#arduino -->

    integer rest = 13 % 4; // De waarde van rest wordt 1

Fontawesome iconen

Het is mogelijk om iconen uit de fontawesome bibliotheek toe te voegen.

De link font awesome verwijst naar een site met de collectie van iconen. Alleen de gratis iconen zijn beschikbaar. De PRO iconen dus niet.

Hieronder enkele voorbeelden van de syntax:

::<familie> <naam> =<grootte> /<kleur>::

familie, naam en grootte zijn optioneel.

Voorbeelden:

Signaaltekst

Je kan teksten als volg accentueren.

>[!belangrijk]
>Belangrijk ....

>[!notitie]
>Notitie ...

>[!tip]
>Tip ...

>[!waarschuwing]
>Waarschuwing ...

>[!voorzichtig]
>Voorzichtig ...

Advanced Code fences

Er zijn verschillende manieren om code binnen code fences te accentueren.

Fence metadata

Door metadata aan een code fence toe te voegen kan je individuele regels of ranges accentueren.

Voorbeeld:

Accentueer regels 1-3 en regel 6.

```ino {1-3,6}
void setup() {

}

void loop() {
  // Voeg hier je code toe
}
```

Resultaat:

void setup() {

}

void loop() {
  // Voeg hier je code toe
}

Inline markup tags

Je kan ook binnen de code tags toevoegen waarmee code wordt gemarkeerd. Deze tags zet je dan in het commentaar van de code.

Zie ook: transformers

Voorbeeld:

```ino
int answer = 42; // [!code info]

void setup() {
  // De code hier wordt 1 keer uitgevoerd [!code highlight]
}

// [!code ++:4]
void loop() {

}
```

Resultaat:

int answer = 42;

void setup() {
  // De code hier wordt 1 keer uitgevoerd
}

void loop() {

}

Scratchblocks

Scratchblocks kunnen in code fences of inline worden toegevoegd.

Zie ook Block Plugin/Syntax

Scratchblocks code fence

Markdown:

```scratch
Wanneer groene vlag wordt aangeklikt
neem (10) stappen
```

Resultaat:

Wanneer groene vlag wordt aangeklikt
neem (10) stappen

Scratchblocks inline code

Markdown:

Met de opdracht `neem (10) stappen`{.scratch} vertel je Cat om 10 stappen te nemen.

Resultaat:

Met de opdracht neem (10) stappen vertel je Cat om 10 stappen te nemen.

---

[NL] Licentie Informatie

Voor al het materiaal in document geldt de licentie: Creative Commons Naamsvermelding-NietCommercieel-GelijkDelen 3.0 https://creativecommons.org/licenses/by-nc-sa/3.0/.

Indien u toegang wilt tot de raw bewerkbare files om het materiaal naar uw eigen doel aan te passen, ons te helpen het materiaal te verbeteren, of het materiaal te vertalen, neem dan contact met CoderDojo Zoetermeer https://codeclub.org/en/clubs/4f8d36fb-7545-4ba9-b9fb-b379b6b87938

[EN] License Information

All work in this document are licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 https://creativecommons.org/licenses/by-nc-sa/3.0/.

If you wish to gain access to the raw editable files in order to adapt our content to your own purposes, help us improve the content, or translate it, then please contact CoderDojo Zoetermeer https://codeclub.org/en/clubs/4f8d36fb-7545-4ba9-b9fb-b379b6b87938 .

This document was created by CoderDojo Zoetermeer. The template design was inspired by the CoderDojo branding and visual identity, and incorporates elements from both organizations. We would like to thank CoderDojo Nederland for their their ongoing support of the CoderDojo community.

Acknowledgements

author(s): Ben Mens