Edurep:Widget: verschil tussen versies

Uit Kennisnet Developers Documentatie
Naar navigatie springen Naar zoeken springen
(veel meer)
k (EoF verwijderd)
 
(9 tussenliggende versies door 3 gebruikers niet weergegeven)
Regel 1: Regel 1:
−
Het implementeren van de Edurep Widget op een website is vrij eenvoudig. Het enige wat vereist is, is het invoegen van een klein stukje JavaScript.
+
Het implementeren van de Edurep Widget op een website is vrij eenvoudig. Het enige wat vereist is, is het invoegen van een klein stukje javascript. Dit kan handmatig met de onderstaande beschrijving of via point-and-click met de wizard.
   
 
__TOC__
  
__TOC__
 
== Inbedden in HTML ==
  
== Inbedden in HTML ==
−
De JavaScript wordt in het onderstaande voorbeeld ingebed in een HTML pagina. In de configuratie kunnen een aantal velden worden ingevuld:
 +
De javascript wordt in het onderstaande voorbeeld ingebed in een HTML-pagina. In de configuratie kunnen een aantal velden worden ingevuld:
 
* title: de titel komt bovenaan de widget te staan
  
* title: de titel komt bovenaan de widget te staan
 
* description: een korte beschrijving over waar de widget naar zoekt
  
* description: een korte beschrijving over waar de widget naar zoekt
 
* border: teken een lijn om de widget
  
* border: teken een lijn om de widget
 
* bordered: laat witruimte tussen de rand en de content van de widget
  
* bordered: laat witruimte tussen de rand en de content van de widget
  +
* showExport: geeft de gebruiker de mogelijkheid om de URL's van geselecteerde leerobjecten te exporteren
−
* showExport: laat de uitvoer functionaliteit zien
  
   
 
{| width="100%"
  
{| width="100%"
Regel 37: Regel 37:
   
 
== Filters toevoegen ==
  
== Filters toevoegen ==
−
Het is ook mogelijk om voorgedefineerde filters mee te geven in de aanroep van de widget. Het is in principe mogelijk om op alle [[Edurep:Veldenlijst|Edurep zoekvelden]] te filteren. Binnen een veld kan men op 1 of meerdere waarden filteren.
 +
Het is ook mogelijk om vooraf gedefinieerde filters mee te geven in de aanroep van de widget. Het is in principe mogelijk om op alle [[Edurep:Veldenlijst|Edurep zoekvelden]] te filteren. Binnen een veld kan men op 1 of meerdere waarden filteren.
 
* name: het Edurep zoekveld
  
* name: het Edurep zoekveld
−
* values -> label: een leesbare naam voor de filterwaarde
 +
* values -> label: een gebruiksvriendelijke naam voor de filterwaarde
 
* values -> value: de daadwerkelijke filterwaarde
  
* values -> value: de daadwerkelijke filterwaarde
   
   
−
Bekijk het onderstaande stukje JavaScript voor een voorbeeld van 2 filters, leerniveau en kosten, waarbij leerniveau op 2 waarden wordt gefilterd.
 +
Bekijk het onderstaande stukje javascript voor een voorbeeld van 2 filters, leerniveau en kosten, waarbij leerniveau op 2 waarden wordt gefilterd.
 
<syntaxhighlight lang="javascript">
  
<syntaxhighlight lang="javascript">
 
var EdurepWidget={};
  
var EdurepWidget={};
Regel 54: Regel 54:
 
showExport: false
  
showExport: false
 
},
  
},
−
filters:[
 +
"filters": {
  ⚫
"lom.rights.cost": [{
−
{
  
  ⚫
"label": "Gratis",
⚫
name: 'lom.classification.educationallevel.id',
  
−
values: [
 +
"value": "no"
−
{
 +
}],
  ⚫
"lom.classification.educationallevel.id": [{
⚫
label:'MBO',
  
  +
"label": "MBO",
−
value:'caa97efc-a713-41ea-a845-1534ca65eac9'
 +
"value": "caa97efc-a713-41ea-a845-1534ca65eac9"
−
},
  
−
{
 +
},
−
label:'VO',
 +
{
  +
"label": "VO",
−
value:'2a1401e9-c223-493b-9b86-78f6993b1a8d'
 +
"value": "2a1401e9-c223-493b-9b86-78f6993b1a8d"
−
}
  
−
]
 +
}]
−
},
  
−
{
  
⚫
name: 'lom.rights.cost',
  
−
values: [{label: 'Gratis', value: 'no'}]
  
 
}
  
}
−
]
  
 
};
  
};
 
</syntaxhighlight>
  
</syntaxhighlight>
   
   
−
Omdat de zoekvelden en waarden niet altijd voor zichzelf spreken, bij deze een overzicht. Vak en leerniveau zoeken met [[OBK:Hoofdpagina|OBK]] waarden. Niet alle waarden staan genoemd, maar deze kunnen worden opgezocht in de [http://browser.onderwijsbegrippenkader.nl OBK Browser] (zoek begrip, klik op oogje, klik op tabblad achtergrond).
 +
Omdat de zoekvelden en waarden niet altijd voor zichzelf spreken, bij deze een overzicht. Vak en leerniveau zoeken met [[OBK:Hoofdpagina|OBK]] waarden.
 
{| class="wikitable"
  
{| class="wikitable"
 
! filter
  
! filter
Regel 108: Regel 103:
 
| rowspan="2" valign="top" | kosten
  
| rowspan="2" valign="top" | kosten
 
| rowspan="2" valign="top" | lom.rights.cost
  
| rowspan="2" valign="top" | lom.rights.cost
⚫
| yes
  
 
| niet gratis
  
| niet gratis
  ⚫
| yes
 
|-
  
|-
⚫
| no
  
 
| gratis
  
| gratis
  ⚫
| no
 
|-
  
|-
 
|}
  
|}
  +
  +
== Wizard ==
  +
Met de [http://kn.nu/edurep-widget Widget Wizard] kan de configuratie eenvoudig worden gegenereerd op basis van een gemaakte zoekopdracht. Een in de widget gemaakte zoekopdracht kan als widget code worden ge-exporteerd.
   
 
[[Categorie:Edurep]]
  
[[Categorie:Edurep]]

Huidige versie van 14 nov 2023 om 12:49

Het implementeren van de Edurep Widget op een website is vrij eenvoudig. Het enige wat vereist is, is het invoegen van een klein stukje javascript. Dit kan handmatig met de onderstaande beschrijving of via point-and-click met de wizard.

Inbedden in HTML

De javascript wordt in het onderstaande voorbeeld ingebed in een HTML-pagina. In de configuratie kunnen een aantal velden worden ingevuld:

  • title: de titel komt bovenaan de widget te staan
  • description: een korte beschrijving over waar de widget naar zoekt
  • border: teken een lijn om de widget
  • bordered: laat witruimte tussen de rand en de content van de widget
  • showExport: geeft de gebruiker de mogelijkheid om de URL's van geselecteerde leerobjecten te exporteren
<html>
<body>
<script type="text/javascript" src="//widget.edurep.nl/latest/js/init.js"></script>
<script type="text/javascript">
  var EdurepWidget={};
  EdurepWidget.config = {
  widget:{
    title: "de Edurep Widget",
    description: "Zoek hier naar digitaal lesmateriaal",
    bordered: true,
    border: true,
    showExport: false
  }
};
</script>
<div style="width:280px">
  <div id="eduwidget"></div>
</div>
</body>
</html>
Edurepwidget.png

Filters toevoegen

Het is ook mogelijk om vooraf gedefinieerde filters mee te geven in de aanroep van de widget. Het is in principe mogelijk om op alle Edurep zoekvelden te filteren. Binnen een veld kan men op 1 of meerdere waarden filteren.

  • name: het Edurep zoekveld
  • values -> label: een gebruiksvriendelijke naam voor de filterwaarde
  • values -> value: de daadwerkelijke filterwaarde


Bekijk het onderstaande stukje javascript voor een voorbeeld van 2 filters, leerniveau en kosten, waarbij leerniveau op 2 waarden wordt gefilterd. 

  var EdurepWidget={};
  EdurepWidget.config = {
  widget:{
   title: "de Widget met filters",
    description: "Zoek hier naar gratis digitaal lesmateriaal voor het VO en MBO",
    bordered: true,
    border: true,
    showExport: false
  },
  "filters": {
    "lom.rights.cost": [{
      "label": "Gratis",
      "value": "no"
    }],
    "lom.classification.educationallevel.id": [{
      "label": "MBO",
      "value": "caa97efc-a713-41ea-a845-1534ca65eac9"
    },
    {
      "label": "VO",
      "value": "2a1401e9-c223-493b-9b86-78f6993b1a8d"
    }]
  }
};


Omdat de zoekvelden en waarden niet altijd voor zichzelf spreken, bij deze een overzicht. Vak en leerniveau zoeken met OBK waarden.

filter zoekveld label value
leerniveau lom.classification.educationallevel.id PO 512e4729-03a4-43a2-95ba-758071d1b725
VO 2a1401e9-c223-493b-9b86-78f6993b1a8d
MBO caa97efc-a713-41ea-a845-1534ca65eac9
vak lom.classification.discipline.id aardrijkskunde c001f86a-4f8f-4420-bd78-381c615ecedc
wiskunde 7afbb7a6-c29b-425c-9c59-6f79c845f5f0
economie 4ba5583f-b147-42cc-a083-ce5ebfd53746
kosten lom.rights.cost niet gratis yes
gratis no

Wizard

Met de Widget Wizard kan de configuratie eenvoudig worden gegenereerd op basis van een gemaakte zoekopdracht. Een in de widget gemaakte zoekopdracht kan als widget code worden ge-exporteerd.

Overgenomen van "https://developers.wiki.kennisnet.nl/index.php?title=Edurep:Widget&oldid=12926"