H5 P2 Lingo - REVERSE ENGINEERING

• Informatica
• Middelbare school
• havo
• Leerjaar 4

HAVO 5 - Lingo Twee Teams

Les 1

Startklaar zitten.

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Voorkennis activeren

Welke van de volgende code is correct voor een if-statement in Javascript?

1. if x > 10 { console.log('hallo'); }
2. if (x > 10) { console.log('hallo'); }
3. if x > 10: console.log('hallo');
4. if (x > 10): { console.log('hallo'); }

Welke van de volgende code print 5 keer hallo in Javascript?

1. for (i = 0; i <= 5; i++) { console.log("hallo"); }
2. for (let i = 0; i < 5; i++) { console.log("hallo"); }
3. for (let i = 1; i < 5; i++) { console.log("hallo"); }
4. for i in range(5): console.log("hallo");

Schrijf een if-statement in JavaScript waarin gecontroleerd wordt of een variabele age groter is dan 18 en log "kind" of "volwassen".

Leerdoelen

1. Ik begrijp de huidige één-speler-versie van Lingo.
2. Ik kan benoemen welke aanpassingen nodig zijn om deze uit te breiden naar een twee-speler-versie.

Lingo Opdracht

Week	Opdracht	Weging
1	Analyse van bestaande code	15 punten
2	Spelerbeheer toevoegen	15 punten
3	Meerdere rondes toevoegen	15 punten
4	Scorebord implementeren	15 punten
5	Timer voor beurten	15 punten
6	Eindscherm en winnaar	15 punten

Lingo Opdracht

• Download Lingo.zip van Teams en sla het op in je computer. 
• In Teams staat een opdracht Analyseren van Code.
• Maak de analyse (vragen staan in het document op Teams).

Kom je er niet uit?

Vraag de klasgenoot naast je en gebruik Google. Vraag anders aan mij.

Klaar?

Bewaar dit document goed, je moet hem aan het einde van de periode inleveren!

Ga verder met de opdrachten voor Week 2.

Hoe ver ben je gekomen?

Ik heb nog geen een functie geanalyseerd

Ik heb een functie geanalyseerd

Ik heb de helft van de functies geanalyseerd

Ik moet nog een functie analyseren

Ik heb alle functies geanalyseerd

Ik vond deze opdracht

Heel makkelijk

Makkeljk

Wel te doen

Moeilijk

Heel moeilijk

Afsluiting

1. Ik begrijp de huidige één-speler-versie van Lingo.
   
2. Ik kan benoemen welke aanpassingen nodig zijn om deze uit te breiden naar een twee-speler-versie.

HAVO 5 - Lingo Twee Teams

Startklaar zitten.

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Voorkennis activeren

Lesdoel

1. Na deze les kan de leerling de JavaScript-functie setTimeout of setInterval gebruiken om een automatische overschakeling naar de volgende ronde te realiseren als de speler het woord niet op tijd raadt. Hierbij wordt een timer zichtbaar weergegeven op het scherm, die aftelt en rood en groter wordt als er nog maar 5 seconden over zijn. Bij het verlopen van de tijd verschijnt een melding.

Wat doet de functie setTimeout?

1. Voegt een gebeurtenis toe
2. Stelt een timer in voor een functie
3. Verwijdert een timer
4. Maakt een nieuwe functie aan

Wat doet de setInterval functie in JavaScript?

1. Voert een functie herhaaldelijk uit
2. Stop de uitvoering van een functie

Hoeveel milliseconden zijn er in 1 seconde?

1. 10 milliseconden
2. 10000 milliseconden
3. 1000 milliseconden
4. 100 milliseconden

Lingo Opdracht

Week	Opdracht	Weging
1	Analyse van bestaande code	15 punten
2	Spelerbeheer toevoegen	15 punten
3	Meerdere rondes toevoegen	15 punten
4	Scorebord implementeren	15 punten
5	Timer voor beurten	15 punten
6	Eindscherm en winnaar	15 punten

Setitmeout functie

• Wat doet setTimeout

Het voert een functie uit 1x uit na ingestelde tijd

• Hoe stel je de tijd in?

De basisstructuur is: setTimeout(function, tijdInMilliseconden);

Voorbeeld:

setTimeout(

() => {

    console.log("Dit bericht verschijnt na 3 seconden.");

}, 

3000); 

Setinterval functie

• Wat doet setInterval

Het voert een functie uit 1x uit na ingestelde tijd

• Hoe stel je de tijd in?

De basisstructuur is: setInterval(function, tijdInMilliseconden);

Voorbeeld:

setTimeout(

() => {

    console.log("Dit bericht verschijnt na 3 seconden.");

}, 

3000); 

Opdracht

1: Bouw een timer in die:

1. Aftelt van 10 naar 0.
2. Een melding toont wanneer de tijd om is.
3. Automatisch naar een nieuwe ronde gaat als de tijd op is.

2: Voor de snelle leerlingen:

• Elke 2 seconden een randomrekensom uitvoeren.
  
• Dit gebeurt gedurende 20 seconden
• Een melding toont wanneer de tijd om is.
  
• Automatisch naar een nieuwe ronde gaat als de tijd op is.

Opdracht

Opdracht:

let tijdOver = 10;

function startTimer() {

    const timerInterval = setInterval(() => {

        console.log(`Tijd over: ${tijdOver} seconden`);

        tijdOver--;

        if (tijdOver < 0) {

            clearInterval(timerInterval); // Stop de timer

            console.log("Tijd is om! Naar de volgende ronde.");

        }

    }, 1000); // Aftellen elke seconde

}

startTimer();

Opdracht

Voor de snelle leerlingen:

function startInterval() {

    const intervalId = setInterval(() => {

        console.log("Dit gebeurt elke 2 seconden.");

    }, 2000);

    // Stop na 10 seconden

    setTimeout(() => {

        clearInterval(intervalId);

        console.log("Interval gestopt.");

    }, 10000);

}

startInterval();

Ik vond deze opdracht

Heel makkelijk

Makkeljk

Wel te doen

Moeilijk

Heel moeilijk

zet jouw code hier van de 1e opdracht

Hoe ver ben je gekomen?

Ik heb nog geen een functie geanalyseerd

Ik heb een functie geanalyseerd

Ik heb de helft van de functies geanalyseerd

Ik moet nog een functie analyseren

Ik heb alle functies geanalyseerd

Bonus opdracht

Verder aan de slag met jouw lingo project 2 spelers

Bonusopdracht:

Laat de timer rood en groter worden wanneer er nog maar 5 seconden over zijn. Of maak een visuele timer zoals een stopwatch.

Afsluiting

Klasikaal

In jouw agenda zetten:

Zondag 23.59 uiterst jouw lingo-spel inleveren via teams.

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Voorkennis activeren

Welke argumenten kan de alert functie accepteren?

1. Een object met eigenschappen.
2. Een getal en een string.
3. Een enkele tekststring.
4. Een array van strings.

Hoe wordt de alert functie aangeroepen?

1. Met display('je bericht');
2. Met showAlert('je bericht');
3. Met alert('je bericht');
4. Met message('je bericht');

Wat doet de alert functie in JavaScript?

1. Verandert de achtergrondkleur van de pagina.
2. Voegt een afbeelding toe aan de pagina.
3. Verzendt data naar de server.
4. Toont een bericht aan de gebruiker.

Lesdoel

1. Lesdoel: De leerlingen leren een eenvoudig eindscherm te maken in JavaScript waarin via een alert wordt aangegeven welk team heeft gewonnen. Daarnaast leren zij hoe zij een creatief popupvenster kunnen ontwerpen als bonusopdracht.

Lingo Opdracht

Week	Opdracht	Weging
1	Analyse van bestaande code	15 punten
2	Spelerbeheer toevoegen	15 punten
3	Meerdere rondes toevoegen	15 punten
4	Scorebord implementeren	15 punten
5	Timer voor beurten	15 punten
6	Eindscherm en winnaar	15 punten

Alert('......')

Syntax:  window.alert("jouw bericht hier!");

window hoef je niet erbij te zetten

Van de DOM bevindt het zich in de Window niveau

Als de alert wordt aangeroepen dan worden alle

andere instructies gepauzeerd 

ook de setTimeout wordt op pauze gezet

wat was setTimeout ook alweer?

Voorbeeld

instructie stap 1 wordt uitgevoerd

instructie stap 2 wordt uitgevoerd - dit is de alert

zolang ik de knop ok van de alert niet in druk wordt instructie stap 3 niet uitgevoerd

Hoe maak ik een mooie popup

Dit doe je in combinatie HTML, CSS en javascript.

Je krijgt van mij een bestand waar dit gebeurt. Zoek uit hoe dit werkt en kijk of jij dit wilt toepassen in jouw lingo.

Niet verplicht maar wel leerzaam!

Afsluiting

Klasikaal behandelen

Planning: Schrijf in jouw agenda, project lingo 2 spelers inleveren uiterst a.s. zondag via teams!