Naar de hoofdinhoud

Kan ik ook eigen knoppen maken die bepaalde functies van Tolkie aanzetten?

Meer dan 4 weken geleden bijgewerkt

Normaal gesproken worden de functies van Tolkie Leeshulp aangeroepen via knoppen van Tolkie. Denk aan knoppen als Lees voor, Uitleg woorden, Simpele tekst en het zwevende vraagteken rechts onderin. Maar je kunt ook zelf knoppen op je website plaatsen die de functies van Tolkie activeren. In dit kennisbank-artikel lees je hoe dat werkt.

Om eigen knoppen te gebruiken, volg je de volgende stappen.

  1. Voeg een ‘domme’ knop toe aan de website. Deze knop doet in eerste instantie nog niets. Je kunt de knop zelf plaatsen of door je webbouwer laten maken. Verderop deze pagina staat voorbeeldcode voor de verschillende knoppen

  2. Voeg nu een class toe aan de knop. De class is per functie verschillend. Hieronder zie je welke class bij welke functie hoort:

    1. Vertalen: tolkie-translate-button

    2. Lees voor: tolkie-tts-button

    3. Uitleg woorden: tolkie-dictionary-button

    4. Simpele tekst: tolkie-summary-button

    5. Grote letters: tolkie-fontsize-button

    6. Menu/alle functies: tolkie-tool-button

Belangrijk:

  • Zodra ons script op de website wordt geladen, kijkt het script of het 1 van deze classes tegenkomt op de pagina. Als het script een class vindt, voegt het een klik-functionaliteit toe aan de knop met de class. Het script zorgt er ook voor dat de knop met een druk op ‘Enter’ wordt geactiveerd, zodat de knop ook meteen toegankelijk is voor gebruikers van een toetsenbord

  • Klikt of drukt een gebruiker op de knop? Dan opent de leeshulp op de functie die aan de knop is gekoppeld. Het script geeft de knop dan ook de class ‘active’, zodat via styling kan worden aangegeven dat de functie actief is

  • Deze oplossing werkt voor meerdere knoppen op een pagina. Zo kun je een vertaalknop toevoegen aan bovenkant van de pagina en nog eentje onderaan, bijvoorbeeld in de footer

Voorbeeld-html voor de verschillende knoppen

Hieronder vind je een aantal voorbeelden van html-code voor de knoppen:

Lees voor

<button class="tolkie-single-button tolkie-tts-button" tabindex="0" type="button">
<img alt="" src="https://cdn.tolkie.nl/assets/tts.svg">
Lees voor
</button>

Uitleg woorden

<button class="tolkie-single-button tolkie-dictionary-button" tabindex="0" type="button">
<img alt="" src="https://cdn.tolkie.nl/assets/dictionary.svg">
Uitleg woorden
</button>

Simpele tekst

<button class="tolkie-single-button tolkie-summary-button" tabindex="0" type="button">
<img alt="" src="https://cdn.tolkie.nl/assets/summary.svg">
Simpele tekst
</button>

Vertalen

<button class="tolkie-single-button tolkie-translate-button" tabindex="0" type="button">
<img alt="" src="https://cdn.tolkie.nl/assets/globe-translate.svg">
Vertalen
</button>

Grote letters

<button class="tolkie-single-button tolkie-fontsize-button" tabindex="0" type="button">
<img alt="" src="https://cdn.tolkie.nl/assets/font-size.svg">
Grote letters
</button>

'Alle functies' menu

<button class="tolkie-single-button tolkie-tool-button" tabindex="0" type="button">
<img alt="" src="https://cdn.tolkie.nl/assets/question-file.svg">
Leeshulp
</button>
Was dit een antwoord op uw vraag?