Stepwise Improvement

Fra HTX Arduino
Spring til navigation Spring til søgning

Teknikken i Stepwise Improvement og ideen bag er udviklet af og dokumenteret[1] af Michael Caspersen ved Århus Universitet som en del af de pædagogiske tanker bag det at undervise grundlæggende programmering.

Hvad er det?

Som navnet siger, så er det at man forbedrer (improvement) sit programmeringsprodukt i trin (step), og at det gerne skal ske i små trin (stepwise).

En del af ideen bygger på test-driven development, altså det at udvikle ved at teste sit produkt under udviklingen, og her er det igen vigtigt at man tager små skridt, gerne et ad gangen, så man hele tiden kan teste det.

Hvad er faren ved metoden?

Når man udvikler et program, så har man sjældent det fulde overblik over hvordan programmet skal opbygges.

Faren ved metoden, specielt til større programmer er, at det ender med at blive en meget rodet kode man ender op med.

Det man kan gøre for at forhindre det er at dele programmet op i mindre funktionsblokke - typisk i overskuelige funktiner der løser et naturligt afgrænset område.

Praktisk eksempel

For at illustrere hvordan metoden virker er der her givet et eksempel på hvordan man kunne udvikle et kryds og bolle-spil.

Den meget strukturerede metode ville være at opstille alle regler for spillet og planlægge hele den grafiske visning, men jeg vil her illustrere hvordan man kan lave udviklingen baseret på en enkelt ide.

Ideen bag denne udvikling af spillet er at de 9 felter skal have hvert sit nummer, så de hver svarer til index i et array som vil komme ind i udviklingen på et tidspunkt.

Udviklingen af eksemplet er illustreret i 8 HTML-filer der er pakket sammen med 3 billeder i denne ZIP-fil

De forskellige trin i udviklingen

Koden tager udgangspunkt i en standard-fil, der indeholder header og body i HTML og begge steder har lidt definitioner af javaScript.

Første trin der er realiseret er at opbygge banen som en 3x3 tabel og lige skrive nummeret på hvert felt ud. Resultatet af dette ligger i index.html, og det centrale kode der er tilføjet standard-filen er følgende:

var nr = 0;
for (n=0; n<3; n++) {
	document.write("<tr>");
	for (i=0; i<3; i++) {
		document.write("<td>" + nr + "</td>");
		nr++;
	}
	document.write("<tr>");
}

Dette giver følgende visning:
Visning ved 1. trin af kodeudviklingen
Visning ved 1. trin af kodeudviklingen

Testen siger her at der er 9 felter, og at hvert felt har sit eget nummer fra 0 til 8.


Det næste der skal ske er at få mere format på visningen. Her laves først et blankt billede i Paint, der formatteres til at være 100x100 pixel. De to andre billeder laves i samme format, hvor der sættes hhv. et kryds og en bolle på dem.

De 3 billeder der anvendes til spillepladen
De 3 billeder der anvendes til spillepladen

Den eneste rettelser der laves er følgende, hvor udskriften af nummeret udskiftes med et billede som henviser til blank.png og som har en onclick-event tilknyttet som er en funktion klik med to parametre - henvisning til billedet og nummeret:

		document.write("<td>" + "<img src='Blank.png' onclick='klik(this, " + nr + ");' />" + "</td>");

Dette giver fra filen index2.html følgende visning:
Visning ved 2. trin af kodeudviklingen
Visning ved 2. trin af kodeudviklingen

Det eneste der skal testes her er at visningen ser fornuftig ud (det udvider tabellen som vist).


Funktionen der er tilknyttet onclick på alle billeder skal selvfølgelig defineres, og i første omgang skal vi lige se om billed-nummeret er knyttet til hvert felt. Det gøres med følgende kode, der ligger i index3.html:

function klik(billede, nr) {
	alert(nr);
}

Dette giver følgende visning når der klikkes på billedet i øverste venstre hjørne:
Visning ved 3. trin af kodeudviklingen
Visning ved 3. trin af kodeudviklingen

Der er selvfølgelig ikke nok at teste det ene billede, men at teste igennem så man er overbevist om at alle billeder har de rigtige numre.


Klikket skal selvfølgelig kunne noget andet - nemlig få kryds eller bolle frem, så i første omgang får vi koden til at rette billed-indholdet til et kryds med følgende rettelse som er med i index4.html:

function klik(billede, nr) {
	billede.src = "Kryds.png";
}

Ved at klikke på nogle billeder kan følgende visning komme frem:
Visning ved 4. trin af kodeudviklingen
Visning ved 4. trin af kodeudviklingen

Dette er faktisk testen.


Det er selvfølgelig ikke nok at få den til at vise krydser, så der laves følgende tilføjelse der ligger i index5.html:

var tur = "Kryds";
// Funktioner til programmet
function klik(billede, nr) {
	billede.src = tur + ".png";
	if (tur == "Kryds") {
		tur = "Bolle";
	} else {
		tur = "Kryds";
	}
}

Dette giver følgende visning når man klikker rundt:
Visning ved 5. trin af kodeudviklingen
Visning ved 5. trin af kodeudviklingen

Testen viser at vi kan skifte mellem billederne, men hvis vi tester lidt mere indgående, så finder vi også ud af at vi kan skifte de billeder der er kommet frem - det følger ikke de normale regner for det grundlæggende spil, så der skal indføres noget mere kode.


Følgende rettelse indføres, hvor der også tages højde for om hele pladen er fyldt, både så det meldes ud både når pladen er fyldt og når man forsøger at klikke videre hvis pladen er fyldt.

Dette styres med en variabel der hedder placeret, som holdes op mod variablen antal, der egentlig fungerer som en konstant.

Det er følgende kode der laver dette som der er i index6.html:

var antal = 9;
var tur = "Kryds";
var placeret = 0;
// Funktioner til programmet
function klik(billede, nr) {
	if (billede.src.indexOf('Blank') < 1) {
		if (placeret == antal) {
			alert("Jeg sagde slut finale");
		}
		return;
	}
	billede.src = tur + ".png";
	if (tur == "Kryds") {
		tur = "Bolle";
	} else {
		tur = "Kryds";
	}
	placeret++;
	if (placeret == antal) {
		alert("Slut finale");
	}
}

Dette giver følgende visning:
Visning ved 6. trin af kodeudviklingen
Visning ved 6. trin af kodeudviklingen

Testen viser at der blokkeres for at ændre i de felter der er sat, og at der kommer en meddelelse når pladen er fyldt, og ligeledes en meddelelse når pladen er fyldt.


For at kunne holde styr på hvad der er placeret hvor, så laves følgende array, der indeholder 9 elementer som hvert indikerer Tom:

var plade = new Array("Tom", "Tom", "Tom", "Tom", "Tom", "Tom", "Tom", "Tom", "Tom");

I funktionen klik gemmes så det der står som den aktuelle tur i arrayet som følger:

	billede.src = tur + ".png";
	plade[nr] = tur;
	if (tur == "Kryds") {

Sidst i funktionen alertes arrayet lige ud på følgende måde, for at kunne følge med i hvor det placeres i arrayet:

	alert(plade.join(" - "));
}

Disse rettelser ligget i index7.html.

Dette giver følgende visning efter 3 klik:
Visning ved 7. trin af kodeudviklingen
Visning ved 7. trin af kodeudviklingen

Som det fremgår af billedet, så ligger der nu et kryds i arrayets felt-0, en bolle i felt-1 og et kryds i felt-7 hvilket passer med den grafiske visning.


Vi er nu ved at være så langt nu, at vi kan teste om der er en vinder af spillet. Det var meningen med arrayet, så vi tester lige om det er noget tomt der ligger i flet-0, og hvis der ikke er det, så testes om der ligger det samme i både felt-0, felt-1 og felt-2. Det gøres på følgende måde i slutningen af klik-funktionen som det er lavet i index8.html:

	if (plade[0] != "Tom") {
		if ((plade[0] == plade[1]) && (plade[0] == plade[2])) {
			alert(plade[0] + " er Vinder");
		}
	}

Dette testes med følgende visning:
Visning ved 8. trin af kodeudviklingen
Visning ved 8. trin af kodeudviklingen

Dette viser at der kan testes om der er en vinder af spillet, og det kan også testes at Bolle kan stå som vinder af spillet.

Tester man lidt videre finder man straks ud af at der ikke testes for vinder i andre placeringer.

Videre udvikling af spillet

Det var ikke meningen at udvikle et fuldt og færdigt spil, men i stedet at vise metoden i stepwise improvement.

Der ligger stadig en del arbejde endnu i at få spillet færdigt, hvor det første naturligvis er at kode alle de andre vinder-muligheder ind i testen.

Der ligger også noget i at kunne genstarte spillet og måske holde noget statistik på hvor mange gange hver enkelt har vundet.

En anden udvidelse kunne være at spille efter de andre regler, hvor pladen ikke fyldes, men i stedet er sådan at man fylder 6 brikker i pladen hvorefter man skal flytte sine brikker - dette vil igen give en kraftig udvidelse af spillet.

Referencer

  1. http://www.daimi.au.dk/~mec/dissertation/Dissertation.pdf Artikel om at undervise programmering på et grundlæggende niveau
Programmering
Programmeringsbegreber Initialisering - Sekvens - Algoritme - Hexadecimal - Det Binære Talsystem - HEX-fil - ASCII - Interrupt - Events - Styresystem - Autocomplete - Selvstudie Programmering - Hour Of Code - Stepwise Improvement - Syntaks - Prog-links - Microcontroller - ChatGPT
Grundlæggende C C float - C double - C-løkker - Datatyper - Konstanter - Regnearter - Funktioner - Return - Returværdi - Rekursion - Semikolon
Variabel Typer boolean - byte - int - unsigned int - word - long - unsigned long - short - float - double - char - unsigned char - string - char array - String - object - Array - 2-dimensionelt Array - void
Program-klassikere Polling - State-machine - Trykknap - Forkant - Bagkant - Prel
Arduino Arduino til Programmering - C til Arduino - Programmering Shield - Arduino PC-software - Arduino Udviklingsmiljø - Arduino Pin Library - Funktion - Arduino Seriel - Arduino String - Arduino String Split - Arduino StateChangeDetection - setup() - loop() - Compilerdirektiver - Asynkron kommunikation - millis() - micros() - Scratch for Arduino - Send fra Arduino til Excel - [[]] - [[]]
Processing Grafik i Processing‎ - Keyboard i Processing - Mus i Processing‎ - Tid i Processing‎ - Draw() - Setup() - Tal Input til Processing - Syntaksfarvning - Kommunikation fra Arduino til Processing - Kommunikation fra Processing til Arduino
javaScript Javascript input‎ - Javascript output‎ - Javascript strukturer‎ - Javascript syntaks‎ - Tid i javaScript - Objekt‎ - AJAX
Serverprogrammering PHP - MySQL - Task Scheduler - WeMOS
PIC JAL - [[]]
Scratch for Arduino S4A Installation - S4A programmering - S4A undervisningsforløb - S4A begrænsninger
Program Dokumentation Algoritme - Flowchart - Pseudokode - Datastruktur - Dataabstraktion - Pulsplaner - Program-kommentar - Teori - Test - UML