schuifpuzzel

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

Javascript schuifpuzzel

deel 2

Wat hebben jullie gemaakt?

- GRID

Wie is het gelukt?

Wat gaan we vandaag doen

- CSS: In de GRID een afbeelding plaatsen.

- Javascript: functies

• Schuifpuzzel check
• Andere afbeelding in de GRID laden

Leerdoelen

Na de les:

- pas je CSS toe aan een afbeelding in je eigen GRID.

- weet je hoe je de schuifpuzzel kunt controleren.

- weet je hoe je een andere afbeelding in je GRID kunt plaatsen.

Stap 1: CSS: In de GRID een afbeelding plaatsen.

margin: om ruimte creëren tussen elementen

overflow: geeft aan wat er moet gebeuren wanneer 

de inhoud te groot is voor een bepaald onderdeel. 

(Bijv. knippen/ schuifbalk). Werkt alleen voor blok-elementen.

CSS: In de GRID een afbeelding plaatsen.

Door gebruik te maken van margin plaats je een afbeelding op een 

bepaalde plaats. 

Margin met 2 waardes:

boven en onder = -20px

rechts en links = -220px

Omdat de grid items : overflow: hidden hebben. 

Zal de inhoud buiten het grid item verborgen zijn.

Vergeet niet de classes te koppelen met een grid item. 

CSS GRID: Opdracht

Ga in groepen de CSS toepassen op een afbeelding en zet het in het GRID. 

Jullie krijgen hiervoor 15 minuten.

Bespreek met elkaar hoe je het zou doen en probeer het zo ver mogelijk af te krijgen.

Stap 2: Javascript

Javascript toevoegen aan je schuifpuzzel.

1. Controleren of de schuifpuzzel goed gemaakt is.

2. Nieuwe afbeelding kunnen plaatsen in een GRID

Hoe zou je kunnen controleren of een schuifpuzzel goed gemaakt is?

Hoe ga je dit voor elkaar krijgen. Hoe ga je te werk?

Stap 1

Stap 2

Stap 3

Stap 4

Stap 5

Stap 6

Stap 7

Stap 8

Maak een forloop en 

lees per grid item het identieke nummer uit

Pak de volgorde van de grid items en 

zet ze in een lijst (querySelectorAll())

Maak een if statement om de 

variabele uit te lezen

Maak een functie

Maak een knop

Zorg dat alle grid items een identiek nummer hebben (voordat je verder gaat)

Zet alle identieke nummers achter elkaar in een variabele

Maak een EventListener aan

CODE

De code laten zien.

Hoe zou je een nieuwe afbeelding kunnen plaatsen in een GRID?

Hoe ga je dit voor elkaar krijgen. Hoe ga je te werk?

Stap 1

Stap 2

Stap 3

Stap 4

Stap 5

Stap 6

Stap 7

Stap 8

Maak een functie

Maak een input veld en button in de html

Maak een EventListener aan

Haal de gegevens van de div puzzle op

Leeg de div puzzle

Lees de value van het input veld uit (getElementById)

Zet de value van het input veld in de src van het image element

Load de grid opnieuw

CODE

De code laten zien.

Hoe is het gegaan?

Hebben jullie een idee hoe je de functies moet maken in Javascript?

Wat hebben we vandaag gedaan

CSS: 

• Afbeelding knippen

Javascript: 

• Schuifpuzzel controleren 
• Nieuwe afbeelding laden

Afsluiten

Het huiswerk is: Maak de schuifpuzzel in javascript af.

Volgende week: 

• Uitkomst van de Javascript puzzels 
• Nadenken over Interaction Design in je portfolio.

VRAGEN?