JVE embeded voorbeeld

Voor het ingebed aanroepen van JVE rapportages op een eenvoudige old school html webpagina.
Pagina opgezet met iframe en bootstrap 4.
Voor de demonstratie gekozen voor contestnummer 1. de demo/test contest van Jahoma JVE.
Verander ook de grote van de pagina om het effect van bootstrap goed te kunnen zien.

Versie 5

Dit is een korte instructieve rudimentaire en statische html voor het opzetten van een eigen webpagina waar de pagina's van de Jahoma JVE site embedded zijn.
Met bootstrap 4 kan de pagina heel gemakkelijk op een atractieve manier worden ingedeeld. Zolang je er maar voor zorgt dat de som van de col-sm-x velden 12 is.
Tip: Voor de sizing en layout kan je ook kijken naar de mogelijkheden van viewport en/of flexbox.
Deze pagina is verder opgemaakt met Bootstrap BS4 en layout is col-sm-2, col-sm-8 em col-sm-2.
2 + 8 + 2 = 12.


Linker kolom.
Deze wordt gewoonlijk leeg gelaten om de pagina met een lege linkere en rechter rand te kunnen tonen.

De invoer pagina

Maar dit kan ook gewoon een link zijn.
Directe aanroep: https://jve.jahoma.nl/nl/activity/capture/1
Voor de demonstratie gekozen voor contestnummer 1, de demo/test contest van Jahoma JVE
Het gebruikte contest nummer '1' moet je in de html dus vervangen door het nummer van de eigen contest nummer.
Bijvoorbeeld 38,39 of wat dan ook.
Met bootstrap is definieren van een vaste gegeven breedte met bijvoorbeeld width="800" niet nodig en ipv daarvan kan width=100%" gebruikt worden.


De route pagina met daarop de top drie van het leaderboard.

Directe aanroep: https://jve.jahoma.nl/nl/contest/1
Voor de demonstratie wederom gekozen voor de de demo/test (hier 1)
Het nummer 1 moet je hier dus ook vervangen door het nummer van de eigen contest


De viewboards

De viewboards worden gebruikt om de verschillenden views op te zetten.
De basis views zijn; 'leader', 'famous', 'overall' en 'teams' (aan andere wordt gewerkt).
Er zijn meerdere 'show...' tags die gebruikt kunnen worden om de view te verrijken.
- showHeader - Zorgt ervoor dat er een kop boven de lijst verschijnt
- showActivities - Zorgt ervoor dat er een extra kolom op de list verschijnt.

Naast de 'show...' tages zijn er ook nog een aantal filter tags (ifor....) die gebruikt kunnen worden om een bepaalde deelverzameling te kunnen tonen.
Op het gebruik van de 'ifor....' tags gaan we nu niet verder in maar deze kunnen bijvoorbeeld gebruikt worden om alleen alle mannen of vrouwen te tonen in een overzicht.


Het 'overall' board in een beperkte ruimte.

Directe aanroep: https://jve.jahoma.nl/nl/contest/viewboard/overall/1/1000/showHeader/showTotals/showDuration/showDistance/showActivities
scrollbar verschijnt automatisch door de embedding.
Voor de demonstratie wederom gekozen voor de de demo/test (hier 1).
Het nummer 1 moet je hier dus ook vervangen door het nummer van de eigen contest.
Het nummer 1000 geeft aan hoeveel deelneemers er in een overzicht kunnen staan.
Alle show.... zijn optioneel en laten meer of minder informatie zien op het scherm


Het 'leader' board

Directe aanroep: https://jve.jahoma.nl/nl/contest/viewboard/leader/1/1000/showDuration/showDistance
Let op enkele 'show....' en andere opties wordt niet gebruikt en dus wordt er automatisch minder inforatie gegeven.
Voor de demonstratie wederom gekozen voor de de demo/test (hier 1)
Het nummer 1 moet je hier dus ook vervangen door het nummer van de eigen contest
Het nummer 1000 geeft aan hoeveel deelneemers er in een overzicht kunnen staan.

Leader board


Het 'famous' board

Ook wel 'Hall of fame' genoemd. Ook in een beperkte ruimte.
Directe aanroep: https://jve.jahoma.nl/nl/contest/viewboard/famous/1/1000
Let op. Nog minder 'show....' opties gebruikt dus nog minder inforamatie.
Voor de demonstratie wederom gekozen voor de de demo/test (hier 1)
Het nummer 1 moet je hier dus ook vervangen door het nummer van de eigen contest
Het nummer 1000 geeft aan hoeveel deelneemers er in een overzicht kunnen staan.

Famous board


Het 'team' board zonder doorklik buttons.

Directe aanroep: https://jve.jahoma.nl/nl/contest/viewboard/team/1/1000/showheader/showDuration/showDistance/showActivities
De extra shows zijn hier niet direct te zien op het scherm maar worden pas gebruikt als met een van de buttons die in team view te zien is de detail overzichten worden opgevraagd.
Voor de demonstratie wederom gekozen voor de de demo/test (hier 1)
Het nummer 1 moet je hier dus ook vervangen door het nummer van de eigen contest
Het nummer 1000 geeft aan hoeveel deelneemers er in een overzicht kunnen staan.


Het 'group' board met doorklik buttons.

Directe aanroep: https://jve.jahoma.nl/nl/contest/viewboard/group/1/1000/showheader/showDuration/showDistance/showActivities/showlinkbuttons
De extra shows zijn hier niet direct te zien op het scherm maar worden pas gebruikt als met een van de buttons die in group view te zien is de detail overzichten worden opgevraagd.
Voor de demonstratie wederom gekozen voor de de demo/test (hier 1)
Het nummer 1 moet je hier dus ook vervangen door het nummer van de eigen contest
Het nummer 1000 geeft aan hoeveel deelneemers er in een overzicht kunnen staan.


Andere overzichten

Er zijn nog veel meer selecties mogelijk die eenvoudig op te vragen zijn door de link te veranderen.
Bijvoorbeeld een overall board of een team board met een speciale selectie aan de hand van bepaalde 'toon' of 'zoek' parameters.

Kopieren

Deze pagina kan eenvoudig in zijn geheel gekopieerd worden en daarna gebruikt worden op uw eigen website.
Natuurlijk wel even het contestnummer aanpassen aan wat het aan u uitgegeven nummer dan is.


Rechter kolom.
Idem als links, gewoonlijk staat hier dus geen tekst.

Jahoma sample JVE webpagina

Met embedded Iframe's en opmaak met BS4.