Programmering i App Lab Modul 10 af 10 · Blokoversigt · Tastatur

Modul 10

Projektet

Ni byggeklodser skal blive til én app, du selv har bygget og kan forklare.

Sådan bruger du dette modul

De ni foregående moduler sluttede hver med en byggeklods. Her sætter du dem sammen. Der er ikke meget nyt at lære.

Modulet er ikke en trin-for-trin-opskrift som de andre. Du får appens struktur, de fire skærme, og for hver skærm hvilken byggeklods du skal hente frem. Selve blokkene bygger du selv. Det er den øvelse, der gør, at du kan forklare din egen kode bagefter.

Hav modulerne åbne i faner ved siden af. Der bliver henvist til dem hele vejen igennem.

Appen: en quiz med highscore

Fire skærme. Brugeren logger ind, svarer på tre spørgsmål, ser sin score og kan gemme den til en fælles highscore-liste.

loginScreen. Navn og kode. Byggeklods fra modul 4.
spilScreen. Spørgsmålene ét ad gangen. Modul 5, 7 og 8.
resultatScreen. Score og mulighed for at gemme. Modul 9.
highscoreScreen. Alle gemte scorer. Modul 6 og 9.

Skærme skiftes med setScreen("screenId");. I Design-fanen opretter du dem ved at klikke + ved siden af Screen1 og omdøbe dem.

Elementer hører til én skærm. En knap, du lægger på loginScreen, findes ikke på spilScreen. Sørg for at have den rigtige skærm valgt i Design, før du trækker noget ind.

Skærm 1: login

Hent frem: byggeklodsen fra modul 4.

Design: to Text Inputs (navnFelt, kodeFelt), en knap (loginKnap) og en label (loginStatus).

Du skal ændre to ting: gem brugerens navn i en variabel, der kan bruges senere, og skift skærm ved korrekt login i stedet for at skrive en besked.

var korrektKode = "quiz2026"; var spillerNavn = ""; onEvent(@"loginKnap", @"click", function() { var navn = getText(@"navnFelt"); var kode = getText(@"kodeFelt"); if (kode == korrektKode && navn != "") { spillerNavn = navn; setScreen(@"spilScreen"); } else { setText(@"loginStatus", "Forkert kode, eller intet navn"); } });

spillerNavn oprettes helt øverst, uden for alt andet. Ellers kan de andre skærme ikke få fat i den. Det er reglen fra modul 2.

Skærm 2: quizzen

Hent frem: byggeklodserne fra modul 5 (lister), modul 7 (tilstandsvariabel) og modul 8 (funktioner).

Design: en label til spørgsmålet (spmLabel), tre svarknapper (svar1, svar2, svar3) og to labels til score og feedback.

Data først

Tre lister, der følges ad: spørgsmålene, svarmulighederne og hvilket svar der er det rigtige. De skal stå i samme rækkefølge, så spørgsmål nummer 0 hører sammen med svar nummer 0 og facit nummer 0.

var spørgsmål = ["Hvad er 7 gange 8?", "Danmarks hovedstad?", "Hvad er en Boolean?"]; var svar1Tekster = ["54", "Aarhus", "Et tal"]; var svar2Tekster = ["56", "København", "Sandt eller falsk"]; var svar3Tekster = ["64", "Odense", "En tekst"]; var facit = [2, 2, 2]; var plads = 0; var score = 0;
Her er facit tilfældigvis 2 hver gang. Det ændrer sig, når du laver dine egne spørgsmål.

En funktion der viser det aktuelle spørgsmål

function visSpørgsmål() { setText(@"spmLabel", spørgsmål[plads]); setText(@"svar1", svar1Tekster[plads]); setText(@"svar2", svar2Tekster[plads]); setText(@"svar3", svar3Tekster[plads]); setText(@"scoreLabel", "Score: " + score); }

Kald visSpørgsmål() lige efter setScreen i login, så det første spørgsmål står klar, når skærmen skifter.

En funktion der tager imod et svar

Den her kaldes fra alle tre knapper, med et forskelligt tal hver gang. Det er parametrene fra modul 8 i praksis.

function svarAfgivet(valgt) { if (valgt == facit[plads]) { score = score + 10; setText(@"feedback", "Rigtigt!"); } else { setText(@"feedback", "Desværre."); } plads = plads + 1; if (plads >= spørgsmål.length) { setText(@"slutScore", spillerNavn + ": " + score + " point"); setScreen(@"resultatScreen"); } else { visSpørgsmål(); } } onEvent(@"svar1", @"click", function() { svarAfgivet(1); }); onEvent(@"svar2", @"click", function() { svarAfgivet(2); }); onEvent(@"svar3", @"click", function() { svarAfgivet(3); });

Betingelsen plads >= spørgsmål.length er den samme som i modul 5, bare med en anden konsekvens. I stedet for at starte forfra skifter vi skærm.

Skærm 3: resultatet

Hent frem: byggeklodsen fra modul 9.

Design: en label med slutscoren (slutScore), en Gem score-knap og en Se highscore-knap.

Husk at oprette tabellen i Data-fanen først. Den skal hedde highscores.

onEvent(@"gemKnap", @"click", function() { var resultat = {"Navn":spillerNavn, "Score":score}; createRecord("highscores", resultat, function(record) { setText(@"gemStatus", "Din score er gemt"); }); });

spillerNavn blev gemt helt tilbage på loginskærmen, og variablen er der stadig, fordi den ligger øverst i koden og ikke inde i nogen onEvent.

Skærm 4: highscore

Hent frem: byggeklodserne fra modul 6 og modul 9.

onEvent(@"visHighscoreKnap", @"click", function() { setScreen(@"highscoreScreen"); readRecords("highscores", {}, function(records) { var tekst = ""; for (var i = 0; i < records.length; i++) { tekst = tekst + records[i].Navn + ": " + records[i].Score; tekst = tekst + "\n"; } setText(@"highscoreListe", tekst); }); });

Tæl skinnerne i venstre side. Hver skinne er en blok, der pakker den næste ind: gul onEvent, grøn function, limegrøn readRecords, grøn callback og inderst den blå for-løkke. Bliver du i tvivl om, hvad der hører til hvad, så følg skinnerne.

Gør den til din egen

En quiz om matematik og hovedstæder er ikke særlig let at snakke om til en eksamen. Skift emnet ud med noget, du kender noget til: dit fag, din sport, dit fritidsjob. Koden er den samme, kun teksten i listerne ændrer sig.

Andre retninger, hvis quizzen ikke siger dig noget:

Alle tre bruger de samme ni byggeklodser.

Til eksamen

Du skal kunne åbne din egen app og forklare den. Gå den igennem på forhånd og tjek, at du kan pege på og sætte ord på hver enkelt ting:

  1. En variabel, og hvorfor den ligger, hvor den ligger.
  2. En liste, og hvorfor der bruges en liste frem for enkeltvariabler.
  3. En forgrening, og hvad der sker i hver gren.
  4. En løkke, og hvad der får den til at stoppe.
  5. En funktion, du selv har skrevet, og hvad dens parametre gør.
  6. En event handler, og hvad der udløser den.
  7. Databasen: hvad der gemmes, og hvorfor det ikke kunne være en variabel.