Frågesport om webbens historia

Länkar

Instruktioner

I denna uppgift ska du skapa en frågesport på centrala fakta från internets historia, så som den presenteras på internetmuseum.se eller via vår gemensamma presentation i klassrummet. Denna uppgift ska testa utveckla och testa såväl dina kunskaper i HTML och CSS som i PHP. Det är alltså ett samarbetsprojekt mellan Webbutvecklings-kursen och Programmering 1 där de olika kurserna kommer att titta på olika aspekter av din kod.

  1. Läs på om internets historia på https://www.internetmuseum.se/ eller den gemensamma presentationen
  2. Utifrån informationen ska du skapa en frågesport med minst 15 centrala fakta.
  3. Svarsalternativen ska vara märkta med antingen flervalsfält (select), radioknappar (radio), range eller checkboxar. Läs mer om HTML5-formulär via följande sida https://www.w3schools.com/html/html_forms.asp/.
  4. Man ska skriva in sitt namn (används till en high-score-lista)
  5. Minst en fråga ska ha en tillhörande bild.
  6. Minst en fråga ska ha en tillhörande video.
  7. Det ska finnas en “tack för att du genomförde min frågesport”-sida där du visar resultatet
  8. Det ska finnas en highscore-lista där du listar de som fått flest poäng
  9. Formge din frågesport med hjälp av CSS. Denna gång är utformningen väldigt fri. Men en god formgivning ska bland annat ha följande kvaliteter:
    1. Tydlighet. Man bör enkelt se vad som ska göras och hur man ska göra det.
    2. Tillgänglighet. Även synskadade bör kunna läsa dina frågor. Välj ett lättläst typsnitt och tänk på kontrasten mellan bakgrunden och texten.
    3. Responsivitet. Det blir allt vanligare att surfa med mobilen. Kontrollera så att sidan också ser bra ut på mobiltelefonen.
    4. Kodkvalitet. Tänk på att koden ska vara lättläst (indenterad), effektiv (kort), och ha logiskt namngivna element, id:n och klasser.
  10. Testa din frågesport via mobilen, samt minst två webbläsare och kontrollera så att allt fungerar och ser ut som det ska.
  11. Glöm inte bort att validera din kod. Varningar kan vara okej, men direkta fel får inte förekomma.
  12. Lämna in din färdiga frågesport på vklass.

Tips och tricks

  1. Detta är ett exempel på hur du kan göra radio-knappar till vanliga knappar:
    1. https://jsfiddle.net/hambern/er6Lypbk
  2. Du får också använda något slags bibliotek för att göra knapparna elegantare. Kolla t.ex. på följande:
    1. https://www.cssscript.com/material-design-checkbox-radio-button-icheck/
    2. https://www.cssscript.com/beautiful-checkbox-and-radio-button-replacement-with-pure-css-magic-check/
    3. https://vitalcss.com/
  3. Detta är ett exempel på hur du kan visa bara en fråga i taget och sedan, via en knapp, kan visa nästa fråga:
    1. https://jsfiddle.net/hambern/u1refgqy

Matris

Kriterie E C A
Responsivitet Sidan ser bra ut även vid större och mindre textstorlekar och är tydlig och lättillgänglig Sidan ser bra ut även i mobilvy och är tydlig och lättillgänglig
Validering Sidan validerar till övervägande del CSS och HTML korrekt Sidan validerar CSS och HTML korrekt utan allvarliga
Element och selektorer Koden använder fungerande element och selektorer Koden använder lämpliga element och selektorer Koden använder elementen och selektorerna på ett effektivt sätt
Formulär Sidan har ett fungerande formulär Formuläret använder lämpliga fält-typer
Intentering Koden är indenterad Koden är väl indenterad och läsvänlig Koden är korrekt indenterad och lätt att förstå
Media Bild och film visas korrekt och är komprimerade i ett lämpligt format Bild och film passar snyggt ihop med övrig design
Kursplanen: kod I arbetet utvecklar eleven kod som med tillfredsställande resultat följer standarder och omfattar någon av de grundläggande teknikerna för märkspråk och stilmallar I arbetet utvecklar eleven kod som med tillfredsställande resultat följer standarder och som omfattar några av de grundläggande teknikerna för märkspråk och stilmallar I arbetet utvecklar eleven kod som med gott resultat följer standarder och som omfattar flera av de grundläggande teknikerna för märkspråk och stilmallar
Kursplanen: media Eleven bearbetar med viss säkerhet enkel text, bild och eventuell annan media så att de anpassas till produkten och vidtar begränsade åtgärder för att åstadkomma snabb överföring av bilder eller andra mediafiler Eleven bearbetar med viss säkerhet och via flera moment text, bild och eventuell annan media, så att de anpassas till produkten och vidtar åtgärder för att åstadkomma snabb överföring av bilder och andra mediafiler Eleven bearbetar med säkerhet och via flera moment text, bild och eventuell annan media så att de anpassas till produkten och vidtar omfattande åtgärder samt optimerar bilder eller andra mediafiler för att åstadkomma snabb överföring av dessa och för att reducera antalet överföringar per sida