Google Code Playground - Deel 1

Bovenstaande afbeelding ziet er misschien ingewikkeld uit. Maak je geen zorgen, Google Code Playground is eenvoudiger dan je denkt. Deze tool geeft gebruikers de mogelijkheid de code van applicaties die Google beschikbaar stelt online te bewerken, het resultaat van de verandering direct te bekijken, op te slaan en vervolgens te embedden. Is dit handig? Ja! Je kunt met de toepassingen die je in Google Code Playground vindt namelijk veel meer dan met de gewone Google tools. Omdat Google Code Playground zo uitgebreid is, hebben we meerdere berichten nodig om de mogelijkheden van deze tool in beeld te brengen. Dit eerste onderdeel gaat over de volgende toepassing:

Google Code Playground > Visualization > Controls and dashboard > Dependent controls

Waarom deze toepassing?

RTL Facts is fijn voor het publiek, omdat de lezer de mogelijkheid krijgt gemakkelijk informatie te zoeken die bij zijn eigen situatie aansluit. De toepassing "dependent controls" van Google Code Playground geeft de lezer soortgelijke mogelijkheden. Links in het scherm selecteert de lezer de opties die het beste bij zijn persoonlijke situatie aansluiten en rechts in het scherm verschijnt vervolgens de informatie die op zijn situatie van toepassing is. 

Hoe ziet dat er in de praktijk uit?

Zoek in onderstaande tool op hoeveel inwoners de grote Nederlandse en Belgische steden hebben:

Hoe werkt dit?
Heel eenvoudig! In de afbeelding hieronder zie je hoe de informatie voor bovenstaand tooltje er in code uitziet:

In regel vier zie je de namen van de onderdelen waarop informatie geselecteerd kan worden: 'land', ' regio' en 'stad'. Voor iedere combinatie van informatie moet vervolgens een losse regel ingevoerd worden. Zoals je ziet zijn er voor het onderdeel 'land' twee opties mogelijk: 'Nederland' of 'België'. Als je voor 'Nederland' kiest, vallen alle opties die bij de waarde 'België' horen af. Je kunt nu in het vakje stad alleen voor de vijf Nederlandse steden kiezen.

Waarvoor is dit handig?
Stel, de gemeentebelastingen gaan volgende maand omhoog en je wilt de lezer graag laten weten hoeveel meer hij moet gaan betalen. Dit is echter niet alleen afhankelijk van de gemeente waar hij woont, maar ook van zijn gezinssituatie. Loop de volgende stappen na om de lezer gemakkelijk uit te laten zoeken hoeveel hij erop achteruit gaat:

- Zoek per grote Nederlandse gemeente uit hoeveel alleenstaanden, gezinnen zonder kinderen en gezinnen met kinderen erop achteruit gaan.
- Geef in Google Code Playground vervolgens 3 waarden aan: 'woonplaats', 'gezinssituatie' en 'extra belasting' (o.i.d.).
- Vervolgens vul je per rij dus het volgende in: 'Tilburg, alleenstaand, 200'
- Dit doe je tot je alle informatie netjes onder elkaar hebt staan.
- Het laatste wat je moet doen is een paar woorden onder 'Define category pickers for...'
- Verander filterColumnLabel (regel 21) van 'Land' naar 'Gemeente'. Doe dit ook voor de andere waarden die niet van toepassing zijn op de nieuwe tool.

Pas op: Klik terwijl je werkt regelmatig op 'Run code' om te zien of de code nog werkt.

Klaar?
Klik op 'save' en vervolgens op 'export'. Je hebt nu een webpagina waar jouw tool te vinden is. Om de tool op jouw website te kunnen gebruiken, moet je de webpagina embedden. Daarvoor gebruik je de volgende code:

<object data="LINKNAARWEBPAGINA" height="400" width="600"> <embed src=LINKNAARWEBPAGINA width="600" height="400"> </embed> Error: Embedded data could not be displayed. </object>

 Vervang het woord "LINKNAARWEBPAGINA" voor de link naar jouw webpagina.