Gebruik Bootstrap voor H5P | 1:12

Vraag

Hoe zorg je ervoor dat je H5P afbeelding precies past in je Moodle cursus?

Plug-in

In deze microtraining toon ik je dat door gebruik te maken van Bootstrap. Ik ga ervan uit dat je als beheerder de interacties kunt selecteren in de H5P hub. Heb je de H5P plugin nog niet geïnstalleerd in je Moodle (versie 3.9.x of lager) en/of WordPress website, ga dan naar platformen.

Aanleiding

Steek je veel tijd in het maken van een interactieve Column en dan blijkt dat de foto te groot is om in zijn geheel te zien. Scrollen wil je nou juist voorkomen en het aanpassen van het formaat is ook niet de oplossing, want in Moodle gebruikt de interactie standaard de gehele beschikbare ruimte. Kleine foto’s gaan dan vervagen.
De oplossing is het toepassen van een stukje Bootstrap code. Dit verkleint de presentatieruimte van de Column en je toont in één oogopslag de gehele afbeelding. Voor de gebruiker is dat een fijne ervaring.

Werkwijze

Tijdens het afspelen zal de H5P video je links tonen. Je kunt deze bekijken door er op te klikken. Wil je gelijk verder, druk dan op de knop.