{"id":42963149,"url":"https://github.com/bartvanderwal/random-student-picker","last_synced_at":"2026-01-30T23:29:37.411Z","repository":{"id":151927039,"uuid":"554120780","full_name":"bartvanderwal/random-student-picker","owner":"bartvanderwal","description":"Chrome Extensie voor iSAS en opzet back-end voor 'digitaal' wisbordje","archived":false,"fork":false,"pushed_at":"2025-06-18T11:45:27.000Z","size":6966,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-18T12:42:59.461Z","etag":null,"topics":["ajax","chrome-extension","deno","isomorphic-javascript","oak","typescript","vanilla-javascript"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bartvanderwal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-10-19T09:30:48.000Z","updated_at":"2025-06-18T11:45:31.000Z","dependencies_parsed_at":"2025-03-25T06:20:59.898Z","dependency_job_id":"5212b11b-f4ca-4316-b6c7-14ea298971d9","html_url":"https://github.com/bartvanderwal/random-student-picker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bartvanderwal/random-student-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartvanderwal%2Frandom-student-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartvanderwal%2Frandom-student-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartvanderwal%2Frandom-student-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartvanderwal%2Frandom-student-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bartvanderwal","download_url":"https://codeload.github.com/bartvanderwal/random-student-picker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartvanderwal%2Frandom-student-picker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28923090,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-30T22:32:35.345Z","status":"ssl_error","status_checked_at":"2026-01-30T22:32:31.927Z","response_time":66,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","chrome-extension","deno","isomorphic-javascript","oak","typescript","vanilla-javascript"],"created_at":"2026-01-30T23:29:36.892Z","updated_at":"2026-01-30T23:29:37.403Z","avatar_url":"https://github.com/bartvanderwal.png","language":"HTML","readme":"# AIM iSAS Student picker extension v0.1\n\n\u003cimg src=\"plaatjes/screenshot-random-student-picker.png\" alt=\"Structuur van HTML in iSAS\" align=\"right\" width=\"400\"\u003e\n\nEen Chrome browser extensie voor docenten van HAN ICT, om in het aanwezigheidsregistratie scherm van de iSAS webapplicatie die we bij HAN AIM gebruiken de optie toe te voegen een 'random student te picken'. Dit is analoog aan de bestaande [Processing applicatie random-student-picker' van Sander Leer](https://github.com/HANICA/select-random-student) (Leer, 2019). Zorgt voor meer objectiviteit. Door aan te sluiten bij bestaande iSAS hoef je als docent niet handmatig een tekst bestand te vullen voor elke klas/elk blok.\n\nHieronder wat plaatjes en een demo video van de UI. Voor geinteresseerden komt de extensie wellicht tzt in de Chrome Web store, maar voor voorlopig kun je deze handmatig zelf installeren via uploaden van de (JavaScript) code uit deze repo via de Chrome extensie toolbar (in Developer mode; zie stappenplan over installatie in sectie hieronder).\n\nNB Naast de Chrome extensie code is er ook een Deno RESTful backend en erbij static HTML/JS front-end toegevoegd in de `backend` folder met opzet van functionaliteit voor soort 'Digitaal wisbordje'. Deze heeft zijn eigen [README](/backend).\n\nDaaronder een roadmap en hoe je zelf wensen kunt doorgeven. Tot slot typische IT zaken als:\n\n- het ontwerp en requirements via user stories voor toekomstige uitbreiding en stabilisatie,\n- de algoritmiek en implementatie in JavaScript\n\nBron: [Chrome docs on extensions](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/)\n\nhttps://user-images.githubusercontent.com/3029472/196881124-ab0b21ac-1a4b-4637-8966-7dada42cb553.mp4\n\n*Figuur 1*: Video met voorbeeld van gebruik (uiteraard fictieve studentnamen i.v.m. AVG 😉)\n\n\u003cimg src=\"plaatjes/html-structuur-classes.png\" alt=\"Structuur van HTML in iSAS\" align=\"right\"\u003e\n\n*Figuur 2*: (Design) De aanwezigheidslijst in iSAS en HTML structuur en classes voor 'inprikken' in de DOM\n\n## Hoe te installeren\n\nTe zijnertijd kun je deze plugin wellicht direct vinden in de Chrome Web store. Tot die tijd kun je hem handmatig installeren via downloaden van de codebase hier uit GitHub, en deze via de 'Load unpacked' optie installeren via de Chrome extension toolbar. Je moet hier de 'Developer mode' voor aanzetten. Zie bijgevoegde screenshots en stappen. Deze zijn gemaakt onder macOS op een Mac, maar het gaat vergelijkbaar op Windows.\n\n\u003cimg src=\"plaatjes/chrome-extension-install.png\" alt=\"\" align=\"right\" width=\"300\"\u003e\n\n*Figuur 3*: Markeren van 'gepickte' student\n\n\u003cimg src=\"plaatjes/chrome-extension-select-manifest-folder.png\" alt=\"Structuur van HTML in iSAS\" align=\"right\" width=\"300\"\u003e\n\n*Figuur 4*: (Design) Markeren van 'gepickte' student\n\n0. Download code uit github via downloaden .zip uit GitHub en uitpakken of gebruik de git cli: `git clone`\n1. Open de Browser Extensions via ... menu in Chrome of surf naar `chrome://extensions`\n2. Zorg dat je de Developer Modus aan hebt staan\n3. Druk op de `Load unpacked` knop\n4. Navigeer in de file picker naar de folder die je bij stap 0 hebt gedowload (e.g. de folder waar het bestand `manifest.json` in staat) en selecteer deze\n5. Je kunt nu nog het icoontje van de extensie pinnen\n6. Je bent klaar , surf nu naar het Aanwezigheidsscherm in iSAS en je hebt hier extra opties\n\n## Roadmap en contributies\n\nAls je een gewenste feature hebt kun je een issue aanmaken in deze repo. De code is open source en Google heeft [prima tutorials](https://developer.chrome.com/docs/extensions/mv3/getstarted/) over Chrome extensies ontwikkelen, dus je kunt er ook zelf mee aan de slag, en een pull request indienen. Hieronder kort wat eigen ideeen.\n\n- [X] Indienen in Chrome Web Store\n- [ ] Voorkomen direct heraanwijzen zelfde student (zoals in Processing variant al gebeurt; zie ontwerp onder)\n- [ ] Aangeven als iedereen aan beurt is geweest, en resetten random list\n- [ ] Wisbord achtige functionaliteit via plugin scherm en centrale server voor nog beter 'formatief handelen' i.p.v. huidige 'cold calling'\n\n## User stories \u0026 acceptatiecriteria (BDD stijl)\n\nOnderstaand de user stories en acceptatie criteria in [BDD](https://cucumber.io/docs/gherkin/reference/) stijl.\n\n```gherkin\n\nFeature: Random student kiezen\n\nAls docent wil ik in een klas random een aanwezige student kunnen laten kiezen uit de groep om een vraag te beantwoorden, zodat niet telkens dezelfde studenten aan de beurt zijn en de objectiviteit gewaarborgd blijft\n\nFeature: Browser based interface in iSAS als Chrome extensie\n\nAls docent wil ik de al in iSAS ingevulde aanwezigheidslijst kunnen gebruiken in de browser om een random student te kiezen  in plaats van een aparte applicatie te gebruiken zodat ik niet apart iets hoef op te starten en aan/afwezigheid hoef in te vullen\n\n\nScenario: Student kiezen\n\nGegeven een lijst van aanwezige studenten van een klas\nAls ik het systeem om een student vraag\nDan geeft deze random een student uit de lijst die nog niet eerder aan de beurt is geweest\n\nScenario: Nog ongemarkeerde student alsnog als afwezig markeren\n\nGegeven dat het systeem een studentnaam geeft die per ongeluk toch afwezig is\nAls ik aan geef dat deze toch afwezig is\nDan markeert het systeem deze student alsnog als afwezig\n\nScenario: Random lijst resetten\n\nGegeven dat ik alle aanwezige studenten al een keer heb aangewezen\nAls ik weer om een nieuwe student vraag\nDan gaat het systeem opnieuw door alle aanwezigen met een nieuwe random volgorde\n```\n\n## Pseudo code/algoritmiek (ontwerp)\n\n- Zet studenten in een JS array met naam en volgnr [ {\"volgnr\": 1, \"naam\": \"Jan Jansen\", \"aanwezig\": true}, { ... } ]\n- Haal afwezig studenten uit array (kopie)\n- Check dat aanwezigheid is ingevuld voor alle studenten (niet undefined veld)\n\n- Tel aantal studenten (content van spans binnen \u003cli\u003e met html 'class' 'ui-li-heading', zie figuur 1)\n- Kies random getal 'randomVolgNr' tussen 1 en aantal studenten\n- Zet een css klasse 'selected' op de pagina in gevonden random getal\n- Zorg dat deze gemarkeerd is, bv. groen; zie figuur 2\n- Eventueel focus zetten op dit item (met `window.scrollTo()` functie; zie voorbeeldcode in [deze SO vraag/antwoord](https://stackoverflow.com/questions/17722497/scroll-smoothly-to-specific-element-on-page#answer-39494245))\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbartvanderwal%2Frandom-student-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbartvanderwal%2Frandom-student-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbartvanderwal%2Frandom-student-picker/lists"}