Ändra utseende och innehåll i ditt uppdragLektion två

I denna lektion är målet att du ska lära dig tre saker:

  1. Hur du gör för att lägga in en bild i en beskrivning av ett uppdrag.
  2. Hur du ändrar den bakgrundsbild som visar på alla sidor i Teknikjakten. 
  3. Hur du kan ange fler än ett svarsalternativ som rätt.

Öppna filerna i din kodeditor

Börja med att öppna filerna i din editor. Om du använder Visual Studio Code öppnar du filerna genom att

  1. Klicka på “File”.
  2. Klicka på “Open folder”
  3. Välj den mapp där du sparat mallen.
  4. Klicka på filen index.html för att öppna filen du ska jobba med.

Lägga till en bild i beskrivningen av ett uppdrag

För att lägga in en bild med hjälp av språket HTML används HTML-elementet img (kommer från det engelska ordet image). När vi skriver <img> förstår webbläsaren att det är en bild som ska visas. För att webbläsaren skal veta vilken bild det handlar om måste vi berätta var bilden finns och vad den heter. För att göra detta använder vi oss av attributet src (kommer från det engelska ordet source). Vi behöver slutligen lägga till ytterligare ett attribut med alternativ text som kan visas för den som inte kan ta del av bilden visuellt. Det gör vi genom att använda attributet alt.

Koden för att lägga in en bild

<img src="./img/bildensnamn.filformat" alt="beskrivning av bilden">

  • srcanger sökväg och namn på filen. Den inledande punkten säger att sökvägen utgår från platsen där filen index.html finns.
  • /img betyder att den sedan ska gå till en katalog som heter “img”.
  • Den ska slutligen visa en bild med med namnet bildensnamn.filformat
  • Alt anger en alternativ text som används för att beskriva bilden.

Exempel

I detta exempel har vi sparat en bild som heter coolbild.jpeg. Vi har lagt denna bild i katalogen “img” inne i teknikjaktenmallen. Koden för att visa bilden skulle då vara:

<img src="./img/coolbild.jpeg" alt="beskrivning av bilden">

För att lägga in en egen bild kan du kopiera den ovanstående raden, lägga till en alternativ text som beskriver bilden samt ersätta coolbild.jpeg med namnet på den bild du vill använda. Detta förutsätter alltså att bilden finns i katalogen ”img”. 

Du lägger sedan in denna kod på en ny rad under texten

“ÄNDRA:Vad är uppdraget som ska utföras?”

Spara filen och öppna sedan sidan index.html i din webbläsare.

Nu borde du kunna se bilden (fungerar det inte kan du testa att ladda om sidan genom att trycka på F5).

Ändra bakgrundsbilden på din teknikjakt

 

Teknikjakten: Bakgrundsbild med plånbok, solglasögon med mera.

Bakgrundsbilden för teknikjakten visas på alla sidor. Ändra den till något eget för att skapa ett sammanhållande tema för din jakt.

Du börjar med att öppna katalogen som heter ”css” och därefter filen style.css.

Mappen css.

Tidigare har du använt språket HTML men du ska nu arbeta i ett annat språk som heter CSS. Sammanfattningsvis kan man säga att språket HTML berättar vilket innehåll som ska finnas på en sida, alltså till exempel rubriker, brödtext och knappar. Språket CSS ansvarar sedan för hur detta innehåll ska se ut.

Vi ska nu ändra CSS-koden som används för att beskriva vilken bakgrundsbild som ska finnas i sidhuvudet. Vi använder CSS istället för ett image-element eftersom det i detta fall handlar om en bild som ska ligga i bakgrunden. Det är en visuell utsmyckning av sidan och inte innehåll som behövs för att förstå den.

För att ändra bakgrundsbilden placerar du den bild du vill använda i katalogen ”img”. Du bläddrar sedan ner till raden som börjar med header.masthead och byter sedan ut texten ”header-bg.jpg” till  bildens namn och filändelse.

Exempelvis: background-image: url("../img/coolbild.jpeg");

Öppna din teknikjakt i webbläsaren. Testa att ladda om sidan genom att trycka på F5 för att se hur sidan ser ut med ny bakgrundsbild. 

Mer om svarsalternativ

Byt nu till filen index.html och bläddra ner längst ner på sidan till raden som börjar med var answer.

var answer = document.forms["contactForm"]["answer"].value.toLowerCase();

Ovanstående rad är viktig. Den säger att vi ska hämta den text som finns i en textruta som heter ”answer”. Texten i rutan ska översättas så att eventuella versaler blir till gemener. 

Svar: JON

Texten “JON” skulle alltså konverteras till “jon” vilket gör det lättare för oss att avgöra om ett svar är rätt eller inte. Texten ska slutligen sparas i en variabel som heter answer. Du kan tänka dig att variabeln answer är en plats där det svar användaren matat in i rutan sparas. Det kommer vi sedan jämföra mot det svar vi förväntar oss och på så vis se om användaren svarat rätt.

Hoppa ner till raden som inleds med if(answer == “ändra”):

if (answer == "ändra") { /*Kom ihåg att svaret skall skrivas med gemener*/
return true;
}else{
document.getElementById("answer").value ="";
document.getElementById("answer").setAttribute("placeholder","Det var tyvärr fel svar, försök igen!");
return false;
}

Det är denna rad som anger vilket eller vilka svarsalternativ som är rätt. Läser vi raden från vänster till höger kan vi tolka den på följande vis. Om den text som finns i variabeln answer är densamma som texten “ändra” så ska nästa uppdrag laddas. I annat fall ska texten i svarsrutan rensas och bytas ut mot text som säger att svaret är fel.

Att ändra vilket svarsalternativ som är rätt har du gjort i en tidigare del av kursen.

Om operatorer

Du känner redan till många olika operatorer från matematikundervisningen. Vissa operatorer används för för att utföra olika typer av beräkningar. Dessa kallas för aritmetiska operatorer som till exempel:

  • /
  • *

Andra operatorer används för olika typer av jämförelser:

  • tal1 == tal2 (Är det sant att tal1 och tal2 har samma värde?
  • tal1 < tal2 (Är det sant att att tal1 är mindre än tal2?
  • tal > tal2 (Är det sant att tal1 är större än tal2?

För att ange fler än ett alternativ som är rätt kommer vi använda oss av operatorn ”OR” (Eller). Inom många programmeringsspråk brukar man skriva denna operator med hjälp av följande två tecknen ||.

Exempel

 if (answer == ”röd” || answer == ”blå” )

Nu kan alltså rätt rätt svar vara “röd” eller “blå”.

Finns fler svarsalternativ som kan vara korrekta går det bra att fortsätta fylla på med fler alternativ:

if (answer == ”röd” || answer == ”blå” || answer == ”svart”)

Kopiera dem från denna text || eller håll ner knappen Alt-Gr samtidigt som du trycker på tangenten till höger om Shift för att skriva dem själv.

Du är nu på god väg att ha skapat en egen jakt!

I nästa lektion får du veta hur du lägger till fler uppdrag och hur du avslutar din jakt.

Om du loggar in kan du spara dina framsteg och få personligt rekommenderade kurser.

Författare: Jon Fällström & Johan Sundlöf

Publicerad: 27 januari, 2021