P1 WEEK 1 M4S - INFORMATIE TECHNOLOGIE

• Informatica
• Middelbare school
• havo
• Leerjaar 4

Week 1 les 1

Startklaar zitten.

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Voorkennis activeren

Hoe kun je een for loop schrijven in JavaScript?

1. for (i < 5; i++)
2. loop (var i = 0; i < 5; i++)
3. for (var i = 0; i < 5; i++)
4. for (i = 0; i < 5; i++)

Wat is het keyword om een variabele te declareren in JavaScript?

1. let
2. const
3. var
4. int

Wat is de index van het eerste element in een array?

1. 0
2. 1
3. start
4. -1

Wat is de juiste syntaxis voor het selecteren van alle <div> elementen in CSS?

1. .div {}
2. div {}
3. div[] {}
4. #div {}

LEERDOELEN

Leerlingen kunnen het spel Lingo uitleggen en begrijpen, en vervolgens in staat zijn om dit spel te programmeren.

Lingo

Regels Lingo

Startwoord: 

Begin met de eerste letter van het woord. Deze wordt automatisch ingevuld.

Pogingen: 

Je hebt vijf kansen om het volledige woord te raden.

Hints:

Groen: De letter staat op de juiste plaats.

Geel: De letter zit in het woord, maar staat verkeerd.

Rood/Leeg: De letter komt niet in het woord voor.

Doel: 

Raad het woord binnen vijf pogingen.

Hoe werkt het 

15 minuten lingo spelen

https://www.lingospelen.nl/5-letters/5-rondes/

Ik ken de spelregels van Lingo

Ja

Deels

Nee

Wat betekent de kleur geel bij het raden van het woord?

1. De kleur geel betekent dat de letter in het woord voorkomt, maar op de verkeerde plaats.
2. De kleur geel betekent dat de letter op de juiste plaats staat.
3. De kleur geel betekent dat de letter in het woord staat, maar op de verkeerde plaats.
4. De kleur geel betekent dat de letter niet in het woord voorkomt.

Wat betekent de kleur rood bij het raden van het woord?

1. De kleur rood betekent dat de letter in het woord staat, maar op de verkeerde plaats.
2. De kleur rood betekent dat de letter niet in het woord voorkomt.
3. De kleur rood betekent dat de letter op de juiste plaats staat.
4. De kleur rood betekent dat de letter in het woord voorkomt.

Hoeveel pogingen krijg je om een woord te raden in Lingo?

1. 7 pogingen
2. 3 pogingen
3. 5 pogingen
4. 10 pogingen

Hoeveel letters heeft een Lingo-woord?

1. 4 letters
2. 5 letters
3. 7 letters
4. 6 letters

Week 1 les 2

Startklaar zitten.

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Voorkennis activeren

leg uit wat het verschil is tussen css en html

Ik weet wat het verschil is tussen HTML en CSS

Ja

Deels

Nee

Hoe voeg je een achtergrondafbeelding toe in CSS?

1. background-image: url('achtergrond.jpg');
2. image-src: achtergrond.jpg;
3. bg-img: achtergrond.jpg;
4. set-bg: achtergrond.jpg;

Hoe maak je een externe CSS-bestand in HTML?

1. <link rel='stylesheet' type='text/css' href='styles.css'>
2. <style src='styles.css'>
3. <stylesheet='styles.css'>
4. <css link='styles.css'>

Leerdoel

De leerling kan de structuur en inhoud van een HTML-bestand begrijpen door de verschillende elementen zoals tags, attributen en inhoud te identificeren en te interpreteren.

Vanuit teams download

Download de lingo en bewaar het op jouw laptop op een plek die jij onthoud

Je hebt alleen de layout

Deze is dus nog niet functioneel

Online code editor

Julie gebruiken allemaal de online code editor van visual code

Ga naar de volgende link

https://vscode.dev/

Online code editor

Open de map Lingo die je zojuist hebt gedownload

via teams

Verken wat er allemaal in het map je zit

- html bestand lingo.html

- map assests met daar in mapje css en daarin style.css

Opdracht 1

Verander de eerste rij van team 1 in de letters A naar

B en sla het op als opdracht 1.html

Welke code heb jij aangepast

1. <span class="fw-bold fs-6">..</span>
2. <div class="col-2 square-column border bg-primary text-white d-flex justify-content-center align-items-center"> ..</div>
3. <h3>..</h3>
4. <title>..</title>

Opdracht 2

Verander de tweede rij van team 1 de blauwe vakjes naar rood en sla het op als opdracht 2.html

hint: bg-danger maakt het rood

Welke code heb jij aangepast

1. <span class="fw-bold fs-6">..</span>
2. <div class="col-2 square-column border bg-primary text-white d-flex justify-content-center align-items-center"> ..</div>
3. <h3>..</h3>
4. <title>..</title>

Opdracht 3

Verwijder de knop submit word en sla het op als opdracht 3.html

Welke code heb jij aangepast

1. <span class="fw-bold fs-6">..</span>
2. <button class="btn btn-success" id="submitWord">...</button>
3. <h3>..</h3>
4. <title>..</title>

Lever jouw werk in

Jou lingo html pagina dien je via teams in te leveren

Deze telt mee voor de beoordeling 10% van de totale beoordeling 

Samenvatting

Klasikaal doornemen