Leren en oefenen voor een theorietoets

Objecten

Deze code maakt een interactief menu waarin afbeeldingen van verschillende emoties dynamisch worden gegenereerd en klikbaar zijn. Wanneer een afbeelding wordt aangeklikt, beweegt deze naar een bepaalde positie en verschijnt er bijpassende tekst.

Dynamisch opbouwen van het menu met objecten

De variabele images bevat een array van objecten. Elk object heeft twee eigenschappen:

  • image: de bestandsnaam van de afbeelding
  • tekst: de beschrijving die bij de afbeelding hoort

Deze array wordt gebruikt om automatisch knoppen met afbeeldingen te genereren.

De for-loop loopt door alle elementen in de array en maakt voor elk object in de array een jQuery-object.
De regel die begint met let button gaan we later op deze pagina uitgebreid bekijken.
De knoppen worden automatisch toegevoegd aan het element met ID menu.

Het ophalen en gebruiken van de data-attributen

Wanneer een knop wordt aangeklikt, wordt een eventlistener geactiveerd:

  • $(this).attr(“id”) haalt het unieke ID van de geklikte knop op en bewaard die in een variabele.
  • $(this).data(“index”) haalt de index op die in het data-index-attribuut van de geklikte knop is opgeslagen.
    Deze waarde wordt ook opgeslagen in een variabele.
  • Vervolgens wordt de functie geklikt() aangeroepen.
    De variabelen worden meegestuurd naar de functie.

De berekening voor de animatie

De functie geklikt() zorgt ervoor dat de geklikte knop beweegt en dat de bijpassende tekst wordt weergegeven.

  • Berekening van de positie:
    Dit bepaalt de nieuwe positie van de knop op basis van thisIndex.
    • De eerste knop (thisIndex = 0) gaat naar -50px
    • De tweede knop (thisIndex = 1) gaat naar -25px
    • De derde knop (thisIndex = 2) blijft op 0px
    • De vierde knop (thisIndex = 3) gaat naar +25px
    • De vijfde knop (thisIndex = 4) gaat naar +50px

Hoe verdrietiger de afbeelding, hoe lager de knop beweegt.

De animatie

  • Met de variabele thisId is de juiste knop geselecteerd.
  • Met thisIndex is de positie na de animatie bepaald.
  • De animate-functie verandert de top-positie naar animateTo.
  • Hierdoor animeert de knop naar boven of beneden.

De geklikte knop beweegt naar een positie die afhangt van de emotie.

Weergeven van de tekst

  • De juiste tekst wordt uit de images-array gehaald, met behulp van de thisIndex.
  • Met .html(tekst) wordt deze tekst in het element met ID resultaat geplaatst.
  • De tekst wordt weergegeven als een <h2>-element.

Bij het klikken op een knop verschijnt de bijbehorende tekst.

Samenvatting van de werking

  1. Knoppen worden automatisch gegenereerd met afbeeldingen en data-attributen.
  2. Bij klikken op een knop wordt het ID en de index opgehaald.
  3. De functie geklikt() zorgt voor:
    • Berekening van de animatiepositie
    • Bewegen van de knop naar deze positie
    • Weergeven van de tekst die bij de emotie 
				
					let images = [
        {image:"very_happy", tekst:"heel erg superblij"},
        {image:"happy", tekst:"gewoon blij"},
        {image:"just_normal", tekst:"gewoon neutraal"},
        {image:"a_little_sad", tekst:"gewoon verdrietig"},
        {image:"very_sad", tekst:"heel erg superverdrietig"}
    ];

    for(let i = 0 ; i < images.length ; i++){
        let button = $(`<div class='btn' id='s${i}'data-index='${i}'><img src='images/${images[i].image}.jpg'></div>`);
        $("#menu").append(button);
    }

    $(".btn").click(function(){
        let thisId = $(this).attr("id");
        let thisIndex = $(this).data("index"));
        geklikt(thisId, thisIndex);
    });

    function geklikt(thisId, thisIndex){
        let animateTo = -50+thisIndex*25;
        $("#" + thisId).animate({"top":animateTo});  
        let tekst = "<h2>"+images[thisIndex].tekst+"</h2>";
        $("#resultaat").html(tekst);
    }

Objecten

Strings in HTML-elementen invoegen
Bij dynamische HTML moet je binnen een string vaak variabelen combineren, zoals in de oorspronkelijke code waarin een div wordt opgebouwd.
Hiervoor gebruik je aanhalingstekens om strings te openen en te sluiten.
Strings en variabelen combineren doe je met een plusteken (+).
Een veelvoorkomend probleem is dat bijvoorbeeld id’s en class-namen ook tussen aanhalingstekens moeten staan. Dit leidt vaak tot ingewikkelde constructies waarin fouten snel gemaakt worden en moeilijk op te sporen zijn.

Om dit te voorkomen, kunnen we gebruikmaken van backticks (`).
Met backticks kun je template literals gebruiken, waarmee je variabelen direct in de string kunt plaatsen zonder plustekens. Voor id’s, class-namen en andere attributen kun je dan gewone aanhalingstekens gebruiken, wat de code beter leesbaar en minder foutgevoelig maakt.

Een template literal is dus een string die wordt omgeven door backticks (` `), en waarin je variabelen of expressies kunt invoegen met interpolatie (${}).

• Dit maakt een jQuery-object aan.
• Alles binnen $() wordt geïnterpreteerd als HTML die later kan worden toegevoegd aan de pagina.

Waarom een jQuery-object?
 Zo kun je er makkelijk methodes op toepassen zoals .append(), .css(), of .click().

• Dit begint de HTML-structuur.
• Een div is een blok-element dat de knop bevat.
• class='btn' zorgt ervoor dat we de knop later kunnen selecteren en stylen met jQuery of CSS.

Waarom een class?
 Met een class (btn) kunnen we meerdere knoppen tegelijk selecteren en bewerken.

• Dit voegt een uniek id toe aan de div.
• i is de teller uit de for-loop.
Als i = 0, wordt dit in html: id="s0" class="btn"
• Dit helpt bij het herkennen van elke knop.

Waarom een uniek id?
 Zo kunnen we specifieke knoppen makkelijk aanspreken in jQuery.

• Dit voegt een HTML5 data-attribuut toe aan de knop.
• data-index bewaart het indexnummer van de knop.
• Als i = 1, wordt dit in html: class="btn" id="s1” data-index="1">
Hiermee kun je later eenvoudig het juiste object uit de array halen.


Waarom een data-attribuut?
 Dit is een makkelijke manier om extra gegevens aan een element te koppelen.

• Dit begint een afbeeldingstag (img).
• De src-waarde wordt later dynamisch ingevuld.

• images is een array met objecten.
• images[i] haalt het juiste object op.
• image haalt de bestandsnaam op.
• Als i = 1, images[1].image = "happy", dan wordt het in html: img src="images/happy
 • De afbeelding wordt dynamisch geladen.

Waarom een array gebruiken?
 Hierdoor kun je makkelijk nieuwe afbeeldingen toevoegen zonder de code te wijzigen.

• Dit sluit de string af en voegt .jpg toe aan het bestandsadres.
• Hierdoor krijgt de afbeelding de juiste extensie.
• De -tag is nu compleet en werkt correct in de browser.

Waarom een src-attribuut?
 De src-waarde bepaalt welke afbeelding wordt weergegeven.