Denna mall kräver vissa kunskaper i HTML, CSS och/eller JavaScript.
Mallen kan användas på två sätt. Både för att utveckla egna mallar och för att bygga interaktiva programmeringsexempel.
Skapa interaktiva programmeringsexempel
Du kan välja vilka kodeditorer som visas i spelaren genom att klicka på ögon-ikonen ovanför respektive kodeditor i Author. Du kan alltså begränsa vilka typer av ändringar som är tillgängliga för dina deltagare beroende på vilka kodeditorer du gör tillgängliga. Vill du att de bara gör ändringar på strukturen? Visa HTML editorn. Vill du att de övar sitt smaksinne för färgval och utseende? Ge dem tillgång till CSS editorn. Vill du låta dem fokusera på problemlösning och experimentera med funktionalitet? Visa JavaScript editorn. Kombinera och exkludera editorer för att anpassa komplexiteten efter behov.
Varje editor kan också förstoras genom att man klickar på förstoringsknappen ovanför respektive editor.
När en kodeditor visas i spelaren tillåts kursdeltagarna på egen hand redigera och experimentera med koden som simuleras. De ändringar de gör kommer också att påverka rutan som visar resultatet av koden.
Notera: Inga ändringar som görs i spelarläget kommer sparas i mallen. Du kan alltså lugnt skapa en startpunkt i Author och sen låta dina deltagare experimentera fritt i spelaren utan att riskera att något ändras eller går förlorat.
Skapa egen mall
När du skapar en egen mall behöver du bara se till att alla editorer är dolda, så att man bara ser resultatet av koden. Sedan programmerar du utseende och funktionalitet på samma sätt som du normalt skulle göra i respektive editor och språk. Nedan följer några mallspecifika anrop, t.ex. att markera övningen som avklarad eller för att programmatiskt ändra färgerna i övningen, som är bra att känna till:
När du skapar en egen mall behöver du bara se till att alla editorer är dolda, så att man bara ser resultatet av koden. Sedan programmerar du utseende och funktionalitet på samma sätt som du normalt skulle göra i respektive editor och språk. Nedan följer några mallspecifika anrop, t.ex. att markera övningen som avklarad eller för att programmatiskt ändra färgerna i övningen, som är bra att känna till:
API
- API.reportDone() - Rapportera övningen som avklarad
- API.css.base - Basfärger
- API.css.highlight - Betoningsfärger
- API.css.rollover - Färger när musen förs över
- API.css.buttons - Knappfärger
- API.reportDone() - Rapportera övningen som avklarad
- API.css.base - Basfärger
- API.css.highlight - Betoningsfärger
- API.css.rollover - Färger när musen förs över
- API.css.buttons - Knappfärger
Notera: för HTML-editorn behövs ingen <html>, <head> eller <body> tagg eftersom de hanteras separat.
Under fliken "Inställningar" kan du som skapar övningen välja huruvida simuleringen automatiskt ska uppdateras när koden ändras, eller om de måste klicka på “Kör”-knappen för att simulera.
Det finns även möjlighet att anpassa temat på editorerna mellan "Dag" och "Natt" läge, för de som föredrar att arbeta med en ljus eller mörk bakgrund.
Egenskaper
Text på knappar
Här kan du ändra texten på knappar som är specifika för mallen.
0 Kommentarer