Ga naar inhoud

Apps Instructeur

Een app is een kleine webapplicatie (HTML, CSS en JavaScript) die je zelf uploadt en in NexEd laat draaien. Denk aan een rekenoefening, een simulatie, een spel of een hulpmiddel bij de uitleg. Je gebruikt een app op twee manieren:

  • Als eigen exercise

    De app vult het hele scherm. De student rondt de exercise af in de app.

    App exercise maken

  • In een exercise

    De app staat in de omschrijving van een bestaande theorie- of praktijk exercise.

    App in een exercise zetten

Apps zijn nog in bèta

Apps zijn nieuw in NexEd en nog in bèta. Ze werken, maar er kan nog van alles veranderen en niet alles is er al. Lees Nog niet beschikbaar voordat je een app in een cursus gebruikt.

De apps-catalogus

Iedere Administrator en Instructeur van een locatie kan de apps-catalogus openen en zelf apps aanmaken:

  1. Ga naar Catalogus → Apps.
  2. Klik op App aanmaken om een nieuwe app te maken.

Je ziet in de catalogus:

  • je eigen apps, ook als ze nog niet geverifieerd zijn;
  • de apps van collega's op je locatie, zodra de gebruikte versie geverifieerd is;
  • apps met het label Officiële NexEd app. Die maakt NexEd zelf. Verberg ze met NexEd apps verbergen.

Op elke kaart staan de weergave en de manier van afronden van de app. Het -icoon betekent dat de gebruikte versie geverifieerd is.

Een app aanmaken

Klik op App aanmaken. Je doorloopt vier stappen:

  1. Naam: geef de app een naam en een korte beschrijving. Die zie je terug in de catalogus en bij het kiezen van een app.

  2. Weergave: kies waar de app gebruikt kan worden.

    Weergave Betekenis Geschikt voor
    In een exercise De app staat in de omschrijving van een bestaande exercise. Kleine hulpmiddelen bij de uitleg, zoals een rekenmachine.
    Eigen exercise De app is een losse exercise die studenten op het volledige scherm openen. Grotere apps, zoals een spel of simulatie.
    Allebei Beide manieren. Apps die op beide manieren goed werken.

  3. Afronden: kies hoe een app exercise wordt afgerond. Kies wat je app ondersteunt.

    Afronden Wat er gebeurt
    NexEd toont afrond knop De student klikt zelf op Afronden. Er wordt niets ingeleverd. Voor hulpmiddelen of naslag.
    App regelt afronden zelf De app meldt aan NexEd dat de student klaar is. De exercise wordt dan automatisch afgerond.
    App regelt inleveren De app maakt een of meer bestanden en levert die in namens de student.

    Bij App regelt afronden zelf en App regelt inleveren moet de app dit zelf doen via de koppeling met NexEd.

  4. Bestanden: upload de bestanden van je app (zie hieronder) en klik op Versie uploaden. Wil je dat later doen? Klik dan op Later uploaden.

Na stap 3 bestaat de app al. Wie een app aanmaakt, wordt er de eigenaar van.

Bestanden uploaden

Sleep de map van je app, losse bestanden of een zip naar het uploadvak, of klik op Zoek bestand. Geef de versie een naam bij Versienaam: beschrijf kort wat er veranderd is.

  • In de hoofdmap van je app moet een index.html staan. Dat is de pagina die NexEd opent.
  • Een zip upload je los, niet samen met andere bestanden. Staat alles in de zip in één map? Dan pakt NexEd die map vanzelf uit.
  • Mappen en bestanden zoals .git, .idea, .vscode, __MACOSX, .DS_Store en Thumbs.db worden overgeslagen.
  • Een app mag maximaal 5 MB groot zijn en uit maximaal 1000 bestanden bestaan.
  • NexEd serveert alleen gangbare webbestanden: HTML, CSS, JavaScript, JSON, tekst en CSV, afbeeldingen (png, jpg, gif, webp, svg, ico), lettertypes, audio (mp3, wav, ogg), video (mp4, webm) en wasm.

Een app draait afgeschermd

NexEd draait je app in een afgeschermde omgeving (sandbox), los van NexEd zelf. Daardoor:

  • werken cookies, localStorage, sessionStorage en IndexedDB niet. Bewaar gegevens in het geheugen;
  • werken pop-ups, alert(), confirm(), downloads en navigeren naar een andere pagina niet. Toon meldingen in je eigen app;
  • verwijs je naar je eigen bestanden met relatieve paden, zoals ./app.js of ./data/levels.json;
  • kun je de app niet los in een browsertab openen. Test hem op de probeerpagina.

App-instellingen en versies

Klik in de catalogus op een app om de instellingen te openen. Als eigenaar pas je hier de naam, beschrijving, weergave en manier van afronden aan.

Elke upload is een nieuwe versie. Je uploadt een nieuwe versie onderaan, bij App-bestanden. Een nieuwe upload vervangt alle bestanden van de app.

Bij Versie kies je welke versie studenten te zien krijgen. Klik daarna op Opslaan.

Keuze Wat er gebeurt bij een nieuwe upload
Altijd de nieuwste versie De nieuwe versie gaat direct live voor studenten, ook als hij nog niet geverifieerd is. Een nieuwe app staat zo ingesteld.
Een vaste versie Studenten houden de gekozen versie. De nieuwe versie gaat pas live als je hem kiest en op Opslaan klikt.

Na een upload zie je onder het uploadvak de knop Nieuwe versie proberen. Die opent de nieuwe versie op de probeerpagina.

Wordt de app al gebruikt? Kies een vaste versie

Zo test je een nieuwe versie eerst zelf: upload hem, klik op Nieuwe versie proberen en kies hem pas daarna bij Versie. Met Altijd de nieuwste versie krijgen studenten elke upload meteen te zien.

Niet alles is altijd te wijzigen

  • Staat de app al in een exercise? Dan kun je de weergave niet meer veranderen in een weergave die daar niet bij past, en de manier van afronden niet meer wijzigen.
  • Een app verwijderen kan onder Gevarenzone → App verwijderen, maar alleen als de app in geen enkele exercise wordt gebruikt.

Proberen en verifiëren

Test de app op de probeerpagina, zonder cursus:

  1. Klik in de app-instellingen rechtsboven op Probeer de app. Linksboven kun je:

    1. wisselen tussen Eigen exercise en In een exercise, als de app de weergave Allebei heeft;
    2. als eigenaar een andere versie kiezen om te proberen, als de app meer dan één versie heeft. Dat verandert niets voor studenten.

  2. Rond de app af zoals een student dat zou doen. Rondt NexEd de app af (NexEd toont afrond knop)? Klik dan rechtsboven op Afronden. NexEd laat zien wat er is ingeleverd: een melding dat de app klaar is, of de bestanden die de app heeft gemaakt.

Lukt dat als eigenaar? Dan wordt de versie die je probeert geverifieerd (). Collega's op je locatie zien de app in de catalogus en kunnen hem in hun exercises gebruiken zodra de versie die de app gebruikt geverifieerd is.

Een app exercise maken

Een app exercise is een exercise die helemaal uit een app bestaat. Je hebt de rol Eigenaar of Editor op de module nodig.

  1. Open de module in de catalogus (Catalogus → Modules).
  2. Klik in het juiste level op Nieuwe opdracht.
  3. Geef de exercise een titel en kies het type App.
  4. Kies de app. Je ziet alleen apps met de weergave Eigen exercise of Allebei.
  5. Klik op Aanmaken.

  • Het type App kun je nog niet kiezen in een level van het type Extra Oefeningen.
  • Een app exercise wordt niet gereviewd. De exercise is afgerond zodra de student op Afronden klikt, of zodra de app het afronden of inleveren heeft geregeld.
  • Open je een app exercise in de catalogus, dan zie je de app zoals de student hem ziet, maar zonder in te kunnen leveren. Ben je eigenaar van de app? Dan ga je met App instellingen direct naar de app.

Een app in een exercise zetten

Je kunt een app ook in de omschrijving van een theorie- of praktijk exercise zetten.

  1. Open de exercise in de Exercise Editor.
  2. Typ / in de omschrijving en kies App.
  3. Kies de app. Je ziet alleen apps met de weergave In een exercise of Allebei. Klik op Volgende.
  4. Stel de app in en klik op Bevestigen:
    • Hoogte: de hoogte van de app in pixels. Laat leeg voor de standaardhoogte.
    • Volledig scherm-knop tonen: de student kan de app dan op het hele scherm openen.

De app staat nu in de omschrijving. Wil je de instellingen later wijzigen?

  1. Klik rechtsboven in de app op het potlood en pas de app, hoogte of volledig scherm-knop aan.

Een app in een exercise kan de exercise ook voor de student afronden of inleveren. Dat hangt af van de exercise:

Exercise Wat de app kan doen
Theorie De exercise afronden.
Praktijk, inleveren met tekst of bestanden Tekst of bestanden inleveren namens de student.
Praktijk, inleveren met Git Niets. De student levert in via Git.

In Markdown ziet een app er zo uit:

App
{app id="01a1c4fd-634e-71f9-a7e1-0ab36c6e1623" height="400" allowFullscreen="true"}{.endapp}

Voor app-ontwikkelaars

Wil je dat je app een exercise afrondt of iets inlevert? Dan praat je app met NexEd via window.postMessage. De app vraagt alleen óf er iets ingeleverd mag worden; NexEd bepaalt bij welke exercise dat hoort en voert het inleveren uit.

Bericht Richting Inhoud
nexed:handin-init App → NexEd Vraag wat er ingeleverd mag worden. Stuur dit als de app geladen is.
nexed:handin-config NexEd → App canHandIn, uploadType (EVENT, FILE_UPLOAD, TEXT, GIT of null) en requiredFiles.
nexed:handin App → NexEd payload: null (afronden), { files: [{ name, content }] } of { text }.
nexed:handin-ack NexEd → App accepted: true of false.
Een exercise afronden vanuit je app
const NEXED = /^https:\/\/(?:[a-z0-9-]+\.)?app\.nexed\.com$/;
let nexedOrigin = null;
let config = null;

window.addEventListener('message', (event) => {
    if (!NEXED.test(event.origin)) return;
    nexedOrigin = event.origin;
    if (event.data?.type === 'nexed:handin-config') {
        config = event.data; // toon je knop als canHandIn true is
    }
});

window.parent.postMessage({ type: 'nexed:handin-init' }, '*');

function klaar() {
    if (config?.canHandIn && config.uploadType === 'EVENT') {
        const bericht = { type: 'nexed:handin', payload: null };
        window.parent.postMessage(bericht, nexedOrigin);
    }
}
  • Controleer altijd event.origin. NexEd draait op meerdere adressen (app.nexed.com en <school>.app.nexed.com).
  • Stuur nexed:handin naar het exacte adres van NexEd, niet naar '*'.
  • Toon je inleverknop alleen als canHandIn true is. Een docent die de exercise bekijkt, kan niet inleveren.
  • Moet de exercise bepaalde bestanden hebben? Die staan in requiredFiles. Gebruik precies die namen.
  • Tekst mag maximaal 20.000 tekens lang zijn.
  • accepted: true betekent dat NexEd het verzoek heeft aangenomen. Of het inleveren echt lukt, ziet de student in NexEd, niet in je app.
  • Krijg je geen antwoord op nexed:handin-init? Dan kan er op deze pagina niet worden ingeleverd. Gebruik een time-out en verberg je knop.

Nog niet beschikbaar

Apps zijn nog in bèta. Deze onderdelen zijn er nog niet, maar staan op de planning:

  • Instellingen per app exercise. De manier van afronden komt nu altijd van de app, en een app exercise toont geen eigen beschrijving.
  • Reviews. Een app exercise wordt niet gereviewd.
  • Extra Oefeningen. Je kunt nog geen app exercise maken in een level van het type Extra Oefeningen.
  • Gegevens bewaren. Een app kan niets bewaren, zoals de voortgang van een student. Er komt een koppeling met NexEd die werkt als localStorage.
  • Delen en rollen. Alleen de maker kan een app bewerken. Je kunt een app nog niet delen met andere locaties of collega's rechten op een app geven.
  • Gebruik bekijken. Je kunt nog niet zien in welke exercises een app wordt gebruikt.
  • Eigen afbeelding. Je kunt nog geen afbeelding (thumbnail) voor een app instellen.