Differences

This shows you the differences between two versions of the page.

--- mattias_02 [2019-11-05 13:33]
Mattias Hamberg [Instruktioner]
+++ mattias_02 [2022-07-18 13:20] (current)
@@ Line 9: / Line 9: @@
 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.
-  - Läs på om internets historia på [[https://www.internetmuseum.se/|]] eller den gemensamma presentationen
+  - Läs på om internets historia på [[https://www.internetmuseum.se/|]] eller den [[https://ornskoldsvik-my.sharepoint.com/:p:/g/personal/mattias_hamberg_ornskoldsvik_se/EXu1tKRjsgxKjmBGRiHaAoUBQ2cHFxjtYIfyAWhCeJUnYg?e=FMG5jV|gemensamma presentationen]]
   - Utifrån informationen ska du skapa en frågesport med minst 15 centrala fakta.
-  - Svarsalternativen ska vara märkta med antingen flervalsfält (select), radioknappar (radio) eller checkboxar. Läs mer om HTML5-formulär via följande sida [[https://www.w3schools.com/html/html_forms.asp/]].
+  - 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/]].
   - Man ska skriva in sitt namn (används till en high-score-lista)
   - Minst en fråga ska ha en tillhörande bild.
   - Minst en fråga ska ha en tillhörande video.
+  - Det ska finnas en "tack för att du genomförde min frågesport"-sida där du visar resultatet
+  - Det ska finnas en highscore-lista där du listar de som fått flest poäng
   - 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:
     - **Tydlighet**. Man bör enkelt se vad som ska göras och hur man ska göra det.
     - **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.
-    - **Responsivitet**. Det blir allt vanligare att surfa med mobilen. Kontrollera så att sidan också ser bra ut med en mycket smal skärm.
+    - **Responsivitet**. Det blir allt vanligare att surfa med mobilen. Kontrollera så att sidan också ser bra ut på mobiltelefonen.
     - **Kodkvalitet**. Tänk på att koden ska vara lättläst (indenterad), effektiv (kort), och ha logiskt namngivna element, id:n och klasser.
-  - Använd gärna ett bibliotek för att göra knapparna elegantare. Kolla t.ex. på följande:
+  - Testa din frågesport via mobilen, samt minst två webbläsare och kontrollera så att allt fungerar och ser ut som det ska.
+  - Glöm inte bort att validera din kod. Varningar kan vara okej, men direkta fel får inte förekomma.
+  - Lämna in din färdiga frågesport på vklass.
+==== Tips och tricks ===
+  - Detta är ett exempel på hur du kan göra radio-knappar till vanliga knappar:
+    - [[https://jsfiddle.net/hambern/er6Lypbk]]
+  - Du får också använda något slags bibliotek för att göra knapparna elegantare. Kolla t.ex. på följande:
     - [[https://www.cssscript.com/material-design-checkbox-radio-button-icheck/|]]
     - [[https://www.cssscript.com/beautiful-checkbox-and-radio-button-replacement-with-pure-css-magic-check/|]]
     - [[https://vitalcss.com/]]
-  - Testa din frågesport via mobilen och kontrollera så att allt fungerar och ser ut som det ska
+  - 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:
-  - Glöm inte bort att validera din kod
+    - [[https://jsfiddle.net/hambern/u1refgqy]]
-  - Lämna in din färdiga frågesport på vklass
 ==== 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 varningar |
+| 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 | |