Colorswitching instructie

  1. Je kunt de file met de code downloaden hieronder.
  2. ==>Colorswitching file<==
  3. Als eerste maak je een div met een class name bv kleinelinkimgborder of titel.
  4. Dan steek je er een tekst of foto in met een border en een eventuele link achter de foto of tekst (href=x), De eerste foto is gebruikt voor een foto de tweede voor tekst.
  5. Vervolgens style je de look van je tekst of foto en border in je css en voegt animation en box-shadow toe aan je border style, bij tekst alleen animation.
  6. Daarna voeg je ook @keyframes borderanimation of @keyframes animation toe en die verdeel je in procenten (afhankelijk van het aantal kleuren dat je wilt) en geef 0 en 100% dezelfde kleuren voor een mooiere overgang.
  7. Tenslotte sla je alles op en ga je het het openen in je browser.

Slideshow instructie

  1. Je kunt de file met de code downloaden hieronder.
  2. ==>Slideshow file<==
  3. Eerst maak je een div met classname:w3-content w3-display-container met daarin een foto en eventuele link met classname:mySlides(stylen in css)
  4. Daarna maak je 2 knoppen
  5. Vervolgens voeg je dit stukje Javascript toe in je css
  6. Tenslotte link je naar https://www.w3schools.com/w3css/4/w3.css in je head
  7. Achteraf test je je slideshow

Quiz tutorial

Speel de Quiz

1) Download de ==>voorbeeld bestanden<==

2) Open het quiz.html bestand

quiz

3) Kies je aantal vragen en denk even na over wat je wil vragen.

4) Vul de vraag hier in.

vraag

5) Vul dan de mogelijke antwoorden op deze vraag hier in.

antwoord

6) Copy-Paste dan heel deze li zodat je een tweede vraag kan maken.

copy-paste

7) herhaal dit proces tot je het aantal vragen hebt dat je wil (vergeet ook niet het nummer van de vraag aan te passen bij label en input.).

8) Vul dan hier de juiste antwoorden op de vragen in.

antwoorden

9) Open nu het grade2.php bestand.

grade2

10) Pas ook hier de juiste antwoorden op je vragen aan.

phpantwoorden

11) Je quiz is klaar nu kan je de styling nog wijzigen in het bijgevoegede styling.css bestand.

styling