Wil je je cursisten diepere, rijkere ervaringen bieden? Creëer op code gebaseerde projecten rechtstreeks in Rise 360 met codeblok. Ontwikkel interactieve tools en demo's met een code-editor in de app, of upload je eigen voltooide projecten. Weet je niet zeker waar je moet beginnen? Bekijk deze training voor inspiratie, of lees verder om het zelf te proberen.

1. Een codeblok invoegen
2. De blokinstellingen aanpassen
3. Toegankelijkheid en bekende problemen

Opmerking: Codeblokken kunnen alleen de bronnen gebruiken die beschikbaar zijn in het blok zelf, en wat er wordt geschreven, heeft alleen invloed op de omgeving van dat blok. Code geschreven in HTML, CSS en JavaScript werkt het beste voor aangepaste codeblokken.

Stap 1: Een codeblok invoegen

1. Open een Rise 360-cursus en bewerk vervolgens een bestaande les of maak een nieuwe les.
2. Selecteer Alle blokken in de sneltoetsbalk voor blokken. Of klik op het pictogram voor het invoegen van een blok (+) dat verschijnt wanneer u met de muis over een grens tussen blokken beweegt.
3. Kies in de zijbalk de categorie Code.
4. Selecteer een optie, afhankelijk van hoe je je codeproject hebt gecompileerd.
   • Klik op Code toevoegen om de code rechtstreeks in te voeren en te bewerken. Wijzigingen die je aanbrengt, worden in realtime weergegeven.
   • Klik op Project uploaden om een ZIP-bestand te uploaden dat voldoet aan de volgende criteria:
     • Bevat een kernprojectbestand met de index.html naam dat de code voor uw project bevat. Het kan niets anders worden genoemd. Dit bestand mag niet in een map staan en moet zich op hoofdniveau van het bestand bevinden
     • Bevat alle middelen voor uw project, inclusief bronbestanden zoals afbeeldingen
     • Is niet groter dan 5 GB
5. Wanneer het blok wordt weergegeven, klikt u op de actieknop of plaatst u de muisaanwijzer op het blok om de ontwerpwerkbalk aan de linkerkant te openen. Klik vervolgens op het pictogram Inhoud. In de zijbalk kun je je code toevoegen of je gezipte project uploaden.
   • Gebruik in het blok Code toevoegen de pictogrammen voor zoeken/vervangen, kopiëren en verwijderen om snel wijzigingen aan te brengen in uw hele codeblok.
   • Gebruik in het blok Uploaden het verwijderpictogram om het huidige geüploade ZIP-bestand te wissen.

Je project wordt onmiddellijk uitgevoerd zodra het is toegevoegd aan Rise 360.

Opmerking: De codeblokken die zijn opgenomen in trainingen die zijn gepubliceerd voor LMS of webexport, kunnen niet lokaal worden bekeken, maar worden zoals verwacht weergegeven wanneer ze naar uw trainingshost worden geüpload.

Parameters voor voltooiing

Om ervoor te zorgen dat cursisten een codeblokactiviteit voltooien voordat ze verder gaan, stelt u de voltooiingsparameters voor uw codeblok in. Als de volgende stappen zijn voltooid, wordt door blokken voortgezet herkend wanneer cursisten de activiteit binnen het blok hebben voltooid.

1. U kunt de inhoud van een bestaand codeblok bewerken of een nieuw blok toevoegen.
2. Schakel de schakelaar Voltooiingsvereisten instellen in.
3. Kopieer het codefragment dat wordt weergegeven: window.parent.postMessage ({type: 'complete'}, '*');
4. Plak de code in het codevenster of in je bestaande project. Voor bestaande blokken voor uploadprojecten moet je je project opnieuw importeren nadat je het fragment van de voltooiingscode hebt toegevoegd.

Dat is het! Nu zullen Rise 360 Continue Blocks herkennen wanneer de codeblokactiviteit is voltooid.

Opmerking: Als je de voltooiingsschakelaar activeert en een op voltooiing gebaseerd vervolgblok toevoegt zonder het codefragment in je project op te nemen, kunnen cursisten de training niet voortzetten.

Inspiratiegalerij

Beide blokken hebben met één klik toegang tot onze instructiecursus met voorbeeldprojecten. Neem een kijkje en kijk wat er mogelijk is, en bouw vervolgens je eigen op basis van de verstrekte code en middelen! Klik gewoon op Hulp nodig om aan de slag te gaan? knop om het te bekijken.

Vibe-codering

Als u een LLM van derden gebruikt om code te genereren (ook bekend als „vibe-codering”), gebruik dan het volgende als promptsjabloon om verbeterde compatibiliteit met Rise 360 te garanderen. Vervang de tekst tussen vierkante haakjes door je eigen inhoud.

1. Maak een `index.html` bestand dat HTML, CSS en JavaScript kan bevatten en geen externe webverzoeken bevat

2. <iframe>Dit `index.html` bestand wordt gebruikt in een ``

3. Maak in het bestand `index.html` [beschrijf je project], geef het een transparante achtergrond

4. Codeer dat zodra [beschrijf de voltooiingsparameters], de toepassing `window.parent.postMessage ({type: 'complete'}, '*'); `moet aanroepen om het bovenliggende venster te laten weten dat de interactie is voltooid

Stap 2: De blokinstellingen aanpassen

Pas aan hoe je content eruitziet op het scherm door met je muis over een bestaand blok te gaan om toegang te krijgen tot de ontwerpwerkbalk aan de linkerkant. Klik op het pictogram Stijl om de opties voor blokachtergrond te openen. Het menu Opmaak biedt opties voor het wijzigen van de blokopvulling, inhoudsbreedte en maximale hoogte van het blok.

Toegankelijkheid en bekende problemen

Toegankelijkheid

De toegankelijkheid van codeblokken wordt bepaald door de toegankelijkheid van de HTML-code die het bevat. Bekijk deze tips om je codeblok toegankelijk te maken:

• Schrijf code die is afgestemd op de WCAG 2.2-normen.
• Gebruik waar mogelijk semantische HTML. Het biedt ingebouwde toegankelijkheid en vermindert de behoefte aan aangepaste code.
• Gebruik schermlezers, toetsenbordnavigatie en zoomfuncties om je cursus te testen. Controleer nogmaals of cursisten updates kunnen volgen en voldoende tijd hebben om te reageren of de inhoud te bekijken.

Gebruik een plug-in voor toegankelijkheidscontrole, zoals axe DevTools van Deque of de Wave-toegankelijkheidscontrole, om je code te verifiëren.

Op zoek naar meer ontwerptips voor toegankelijkheid? Bekijk de volgende bronnen:

• Rise 360: Hoe ontwerp je een toegankelijke cursus
• Toegankelijkheidsindex

Bekende problemen

Op dit moment hebben codeblokken de volgende bekende problemen:

• Als je je training naar PDF publiceert, wordt de inhoud van codeblokken niet één-op-één gereproduceerd.
• Articulate Localization wordt op dit moment niet ondersteund voor codeblokken. Codeblokken kunnen ook niet worden vertaald via handmatige XLIFF-vertaling. Om codeblokken te vertalen, moet u na de vertaling handmatig taalspecifieke codeblokken invoegen.