Show sourcecode
The following files exists in this folder. Click to view.
webbserverprogrammering/submissions/projekt-quiz/
README.md
admin/
create_admin.php
create_quiz.php
css/
dashboard.php
debug_questions.php
includes/
index.php
leaderboard.php
login.php
logout.php
my_results.php
quiz.php
quiz_result.php
register.php
sqlcredentials
README.md
464 lines UTF-8 Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
Projektplanering - Quiz System (C+-nivå)
1. ANVÄNDARFALL
Användare (Kund)
Registrera konto - Ny användare kan skapa ett konto med användarnamn och lösenord
Logga in - Användare loggar in med sina uppgifter
Välja quiz - Efter inloggning kan användaren välja från tillgängliga quiz
Utföra quiz - Användaren svarar på 5 frågor med 3 svarsalternativ vardera
Se resultat - Användaren ser sin poäng direkt efter avslutat quiz
Se egna svar - Användaren kan se sina egna svar (gröna) och rätt svar (röda vid fel)
Visa alla egna resultat - Användaren kan se historik över alla sina genomförda quiz
Göra om quiz - Användaren kan göra samma quiz flera gånger
Jämföra resultat - Användaren ser sin placering mot andra
Logga ut - Användaren kan logga ut säkert
Administrator
Admin-inloggning - Separata inloggningssidor och sessioner för admin
Skapa nya quiz - Admin kan skapa quiz med flexibelt antal frågor
Lägga till frågor - Admin kan lägga till frågor till ett quiz med flexibelt antal svarsalternativ
Redigera quiz - Admin kan ändra befintliga quiz, frågor och svar
Ta bort quiz - Admin kan radera quiz (med varning)
Hantera användare - Admin kan se alla användare, deras resultat och aktivitet
Ta bort användare - Admin kan radera användarkonton
Se statistik - Admin kan se översikt av quiz-användning och resultat
Visa stapeldiagram - Admin ser diagram över poängfördelning för varje quiz
Adminpanel - Samlad översikt över systemet
2. DESIGN
2.1 Webbsidor
Publika sidor (ej inloggade)
1. index.php - Startsida/Landningssida
Funktion: Välkomstsida med info om quiz-systemet
Layout: Header med titel, välkomsttext, knappar för Login och Registrera
2. register.php - Registrering
Funktion: Formulär för att skapa nytt användarkonto
Layout: Formulär med namn, användarnamn, lösenord, bekräfta lösenord
Validering: Kontrollera att användarnamn är unikt
3. login.php - Användarinloggning
Funktion: Inloggning för vanliga användare
Layout: Användarnamn, lösenord, felmeddelanden
Användarens sidor (inloggad kund)
4. dashboard.php - Användarens huvudsida
Funktion: Översikt efter inloggning, välj quiz att köra
Layout: Lista över tillgängliga quiz med antal frågor, användares senaste resultat
╔════════════════════════════════════╗║ Välkommen, [Namn]! [Logga ut] ║╠════════════════════════════════════╣║ Tillgängliga Quiz: ║║ ┌────────────────────────────────┐ ║║ │ Geografi (5 frågor) [Starta]│ ║║ │ Senaste: 4/5 poäng │ ║║ └────────────────────────────────┘ ║║ ┌────────────────────────────────┐ ║║ │ Historia (5 frågor) [Starta]│ ║║ └────────────────────────────────┘ ║║ ║║ [Mina resultat] ║╚════════════════════════════════════╝
5. quiz.php - Genomför quiz
Funktion: Visa frågor en åt gången eller alla på en sida, samla in svar
Layout: Fråga + 3 svarsalternativ (radioknappar), framåt/tillbaka-knappar
╔════════════════════════════════════╗║ Geografi Quiz Fråga 1/5 ║╠════════════════════════════════════╣║ ║║ Vad är Sveriges huvudstad? ║║ ║║ ○ Göteborg ║║ ○ Stockholm ║║ ○ Malmö ║║ ║║ [Föregående] [Nästa] ║╚════════════════════════════════════╝
6. quiz_result.php - Resultat efter quiz
Funktion: Visa poäng, egna svar (grönt) och rätt svar (rött vid fel)
Layout: Poäng överst, sedan lista med alla frågor och svar markerade
╔════════════════════════════════════╗║ Resultat: Geografi Quiz ║╠════════════════════════════════════╣║ Du fick 4 av 5 rätt! ║║ ║║ 1. Vad är Sveriges huvudstad? ║║ ✓ Stockholm (rätt!) ║║ ║║ 2. Vilket land har flest invånare? ║║ ✗ Indien (Du svarade) ║║ ✓ Kina (Rätt svar) ║║ ║║ [Gör om quiz] [Tillbaka] ║╚════════════════════════════════════╝
7. my_results.php - Alla mina resultat
Funktion: Visa historik över alla genomförda quiz
Layout: Tabell med quiz-namn, datum, poäng, länk för att se detaljer
╔════════════════════════════════════╗║ Mina Quiz-resultat ║╠════════════════════════════════════╣║ Quiz Datum Poäng Detaljer║║ ────────────────────────────────── ║║ Geografi 2026-01-20 5/5 [Visa] ║║ Geografi 2026-01-15 4/5 [Visa] ║║ Historia 2026-01-10 3/5 [Visa] ║║ ║╚════════════════════════════════════╝
8. leaderboard.php - Resultattavla
Funktion: Visa alla användares resultat, sorterat efter poäng/namn
Layout: Tabell med namn och poäng, filtrera per quiz
╔════════════════════════════════════╗║ Resultattavla - Geografi Quiz ║╠════════════════════════════════════╣║ Sortera: [Poäng] [Namn] ║║ ║║ Plats Namn Poäng Datum ║║ ────────────────────────────────── ║║ 1. Anna 5/5 2026-01-20║║ 2. Erik 5/5 2026-01-19║║ 3. Maria 4/5 2026-01-20║║ ║╚════════════════════════════════════╝
Adminsidor (skyddade)
9. admin_login.php - Admin-inloggning
Funktion: Separat inloggning för administratörer
Layout: Liknande login.php men med admin-tema
╔════════════════════════════╗║ ADMIN - Inloggning ║╠════════════════════════════╣║ Användarnamn: [______] ║║ Lösenord: [__________] ║║ [Logga in] ║╚════════════════════════════╝
10. admin_panel.php - Admin-huvudsida
Funktion: Översikt och navigation till alla admin-funktioner
Layout: Dashboard med knappar/länkar till alla funktioner, statistik
╔════════════════════════════════════╗║ ADMIN PANEL [Logga ut] ║╠════════════════════════════════════╣║ Snabbstatistik: ║║ • Användare: 45 ║║ • Quiz: 8 ║║ • Genomförda quiz idag: 23 ║║ ║║ [Hantera Quiz] [Skapa Quiz] ║║ [Hantera Användare] [Statistik] ║╚════════════════════════════════════╝
11. admin_create_quiz.php - Skapa nytt quiz
Funktion: Formulär för att skapa quiz med flexibelt antal frågor
Layout: Steg-för-steg eller allt på en sida
╔════════════════════════════════════╗║ Skapa nytt Quiz ║╠════════════════════════════════════╣║ Quiz-titel: [__________________] ║║ Beskrivning: [________________] ║║ Antal frågor: [5] ║║ ║║ ── Fråga 1 ── ║║ Frågetext: [__________________] ║║ Svar 1: [__] ☑ Rätt ║║ Svar 2: [__] ☐ ║║ Svar 3: [__] ☐ ║║ [+ Lägg till svar] ║║ ║║ [+ Lägg till fråga] ║║ [Spara Quiz] ║╚════════════════════════════════════╝
12. admin_manage_quiz.php - Hantera quiz
Funktion: Lista quiz, redigera, ta bort
Layout: Tabell med quiz, knappar för edit/delete
╔════════════════════════════════════╗║ Hantera Quiz ║╠════════════════════════════════════╣║ Titel Frågor Åtgärder ║║ ────────────────────────────────── ║║ Geografi 5 [Edit] [Radera] ║║ Historia 5 [Edit] [Radera] ║║ ║║ [Skapa nytt quiz] ║╚════════════════════════════════════╝
13. admin_manage_users.php - Hantera användare
Funktion: Lista användare, se aktivitet, radera
Layout: Tabell med användarinfo och åtgärder
Skiss:
╔════════════════════════════════════╗║ Hantera Användare ║╠════════════════════════════════════╣║ Namn User Senast Quiz Åtgärd ║║ ────────────────────────────────── ║║ Anna anna 2026-01-20 12 [Radera]║║ Erik erik 2026-01-19 5 [Radera]║║ ║╚════════════════════════════════════╝
14. admin_statistics.php - Statistik och diagram
Funktion: Visa stapeldiagram över poängfördelning
Layout: Välj quiz, visa diagram med % eller absoluta tal
╔════════════════════════════════════╗║ Statistik - Geografi Quiz ║╠════════════════════════════════════╣║ Poängfördelning: ║║ ║║ 5p ████████████ 45% ║║ 4p ████████ 30% ║║ 3p ████ 15% ║║ 2p ██ 7% ║║ 1p █ 3% ║║ ║║ Totalt genomförda: 87 ║╚════════════════════════════════════╝
2.2 Databasdesign
Tabellstruktur (MySQL/MariaDB)
Tabell: users
╔════════════════════════════════════╗
║ users ║
╠════════════════════════════════════╣
║ id INT PRIMARY KEY AUTO_INCREMENT
║ name VARCHAR(100) NOT NULL
║ username VARCHAR(50) UNIQUE NOT NULL
║ password VARCHAR(255) NOT NULL (hashad)
║ is_admin TINYINT(1) DEFAULT 0
║ created_at DATETIME DEFAULT CURRENT_TIMESTAMP
║ last_login DATETIME NULL
╚════════════════════════════════════╝
Tabell: quizzes
╔════════════════════════════════════╗
║ quizzes ║
╠════════════════════════════════════╣
║ id INT PRIMARY KEY AUTO_INCREMENT
║ title VARCHAR(200) NOT NULL
║ description TEXT
║ created_by INT (FK -> users.id)
║ created_at DATETIME DEFAULT CURRENT_TIMESTAMP
║ is_active TINYINT(1) DEFAULT 1
╚════════════════════════════════════╝
Tabell: questions
╔════════════════════════════════════╗
║ questions ║
╠════════════════════════════════════╣
║ id INT PRIMARY KEY AUTO_INCREMENT
║ quiz_id INT NOT NULL (FK -> quizzes.id)
║ question_text TEXT NOT NULL
║ question_order INT DEFAULT 0
╚════════════════════════════════════╝
Tabell: answers
╔════════════════════════════════════╗
║ answers ║
╠════════════════════════════════════╣
║ id INT PRIMARY KEY AUTO_INCREMENT
║ question_id INT NOT NULL (FK -> questions.id)
║ answer_text VARCHAR(255) NOT NULL
║ is_correct TINYINT(1) DEFAULT 0
║ answer_order INT DEFAULT 0
╚════════════════════════════════════╝
Tabell: quiz_attempts
╔════════════════════════════════════╗
║ quiz_attempts ║
╠════════════════════════════════════╣
║ id INT PRIMARY KEY AUTO_INCREMENT
║ user_id INT NOT NULL (FK -> users.id)
║ quiz_id INT NOT NULL (FK -> quizzes.id)
║ score INT NOT NULL
║ total_questions INT NOT NULL
║ completed_at DATETIME DEFAULT CURRENT_TIMESTAMP
╚════════════════════════════════════╝
Tabell: user_answers (för att spara individuella svar)
╔════════════════════════════════════╗
║ user_answers ║
╠════════════════════════════════════╣
║ id INT PRIMARY KEY AUTO_INCREMENT
║ attempt_id INT NOT NULL (FK -> quiz_attempts.id)
║ question_id INT NOT NULL (FK -> questions.id)
║ answer_id INT NOT NULL (FK -> answers.id)
║ is_correct TINYINT(1)
╚════════════════════════════════════╝
ER-Diagram (Relationer)
users (1) ──────< (N) quiz_attempts
│ │
│ └──────< (N) user_answers
│ │
└──────< (N) quizzes │
│ │
└──────< (N) questions │
│ │
│ │
└──────< (N) answers
│
└───< (refereras från user_answers)
Relationsförklaring:
En user kan ha många quiz_attempts (1:N)
Ett quiz kan ha många questions (1:N)
En question kan ha många answers (1:N)
Ett quiz_attempt kan ha många user_answers (1:N)
Ett user_answer refererar till en question och ett answer (N:1)
SQL för att skapa tabeller
CREATE TABLE users (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
username VARCHAR(50) UNIQUE NOT NULL,
password VARCHAR(255) NOT NULL,
is_admin TINYINT(1) DEFAULT 0,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
last_login DATETIME NULL
);
CREATE TABLE quizzes (
id INT PRIMARY KEY AUTO_INCREMENT,
title VARCHAR(200) NOT NULL,
description TEXT,
created_by INT,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
is_active TINYINT(1) DEFAULT 1,
FOREIGN KEY (created_by) REFERENCES users(id) ON DELETE SET NULL
);
CREATE TABLE questions (
id INT PRIMARY KEY AUTO_INCREMENT,
quiz_id INT NOT NULL,
question_text TEXT NOT NULL,
question_order INT DEFAULT 0,
FOREIGN KEY (quiz_id) REFERENCES quizzes(id) ON DELETE CASCADE
);
CREATE TABLE answers (
id INT PRIMARY KEY AUTO_INCREMENT,
question_id INT NOT NULL,
answer_text VARCHAR(255) NOT NULL,
is_correct TINYINT(1) DEFAULT 0,
answer_order INT DEFAULT 0,
FOREIGN KEY (question_id) REFERENCES questions(id) ON DELETE CASCADE
);
CREATE TABLE quiz_attempts (
id INT PRIMARY KEY AUTO_INCREMENT,
user_id INT NOT NULL,
quiz_id INT NOT NULL,
score INT NOT NULL,
total_questions INT NOT NULL,
completed_at DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
FOREIGN KEY (quiz_id) REFERENCES quizzes(id) ON DELETE CASCADE
);
CREATE TABLE user_answers (
id INT PRIMARY KEY AUTO_INCREMENT,
attempt_id INT NOT NULL,
question_id INT NOT NULL,
answer_id INT NOT NULL,
is_correct TINYINT(1),
FOREIGN KEY (attempt_id) REFERENCES quiz_attempts(id) ON DELETE CASCADE,
FOREIGN KEY (question_id) REFERENCES questions(id) ON DELETE CASCADE,
FOREIGN KEY (answer_id) REFERENCES answers(id) ON DELETE CASCADE
);
3. TIDSPLAN
Fas 1: Databas och grundstruktur (4-6 timmar)
Skapa databas och tabeller (1h)
Skapa alla tabeller enligt design
Testa relationer
Skapa testdata (1h)
Lägg till admin-användare
Skapa 2-3 test-användare
Skapa 2 quiz med 5 frågor vardera
Skapa svarsalternativ (3 per fråga)
Skapa config och hjälpfiler (0.5h)
db_connect.php (databasanslutning)
functions.php (hjälpfunktioner)
session_config.php (sessionshantering)
Grundläggande CSS och layout (1.5h)
Skapa style.css med responsiv design
Skapa header/footer includes
Grundläggande tema och färgschema
Fas 2: Användarfunktionalitet (6-8 timmar)
Registrering och inloggning (2h)
index.php (startsida)
register.php (registreringsformulär + validering)
login.php (inloggning)
logout.php (utloggning)
Lösenordshashning med password_hash()
Dashboard och quiz-lista (1.5h)
dashboard.php (visa tillgängliga quiz)
Hämta användarens senaste resultat per quiz
Quiz-genomförande (2.5h)
quiz.php (visa frågor och samla svar)
Spara svar i session tills quiz är klart
Räkna poäng och spara i databas
Resultatvisning (2h)
quiz_result.php (visa poäng + svar med färgkodning)
my_results.php (historik över alla quiz)
Visa grönt för rätt, rött för fel
Fas 3: Resultattavlor (2-3 timmar)
Leaderboard (2h)
leaderboard.php
Sortera efter poäng (primärt) och namn (sekundärt)
Filtrera per quiz
Optimering av queries (1h)
Indexera relevanta kolumner
Testa prestanda med större datamängd
Fas 4: Admin-funktionalitet (8-10 timmar)
Admin-inloggning och panel (1.5h)
admin_login.php (separat inloggning)
admin_panel.php (översikt med statistik)
Sessionsskydd för admin-sidor
Skapa quiz (admin) (3h)
admin_create_quiz.php
Dynamisk formulär med JavaScript
Flexibelt antal frågor och svar
Validering och lagring
Hantera quiz (2h)
admin_manage_quiz.php
Redigera befintliga quiz
Ta bort quiz (med bekräftelse)
Hantera användare (1.5h)
admin_manage_users.php
Lista alla användare
Visa statistik per användare
Radera användare
Statistik och diagram (2h)
admin_statistics.php
Stapeldiagram med CSS eller Chart.js
Visa poängfördelning per quiz
Både % och absoluta tal
Fas 5: Testning och förbättringar (3-4 timmar)
Säkerhetstestning (1.5h)
SQL injection-skydd (prepared statements)
XSS-skydd (htmlspecialchars)
CSRF-tokens för formulär
Session-hijacking-skydd
Användartestning (1h)
Testa alla användarflöden
Fixa buggar och UX-problem
Responsiv design (1h)
Testa på mobil/tablet
Justera CSS för olika skärmstorlekar
Dokumentation (0.5h)
Kommentera kod
Skapa README med installation
Fas 6: Extra funktioner (3-5 timmar, om tid finns)
Timer för quiz (1.5h)
JavaScript-timer
Auto-submit vid timeout
Quiz-kategorier (1h)
Lägg till kategori-tabell
Filtrera quiz efter kategori
Användarprofiler (1.5h)
Redigera profil
Profilbild (upload)
Email-notifikationer (1h)
Skicka mail vid registrering
Glömt lösenord-funktion
Total estimerad tid: 26-36 timmar
4. UTVECKLINGSORDNING (Checklista)
Vecka 1
[ ] Skapa databas och tabeller
[ ] Skapa testdata
[ ] Grundläggande filstruktur och config
[ ] Registrering och inloggning
[ ] Dashboard
Vecka 2
[ ] Quiz-genomförande
[ ] Resultatvisning
[ ] Leaderboard
[ ] Admin-inloggning
[ ] Skapa quiz (admin)
Vecka 3
[ ] Hantera quiz och användare (admin)
[ ] Statistik med diagram
[ ] Säkerhetstestning
[ ] Responsive design
[ ] Användartestning
Vecka 4 (buffert och extra funktioner)
[ ] Bugfixar
[ ] Extra funktioner
[ ] Dokumentation
[ ] Final polering
5. TEKNISKA SPECIFIKATIONER
Teknologier
Backend: PHP 8.x
Databas: MySQL/MariaDB
Frontend: HTML5, CSS3, JavaScript (vanilla eller jQuery)
Diagram: Chart.js eller CSS-baserade staplar
Säkerhet:
Password hashing (password_hash/verify)
Prepared statements (PDO)
Session management
CSRF protection
Input validation
Filstruktur
quiz-system/
├── index.php
├── register.php
├── login.php
├── logout.php
├── dashboard.php
├── quiz.php
├── quiz_result.php
├── my_results.php
├── leaderboard.php
├── admin/
│ ├── admin_login.php
│ ├── admin_panel.php
│ ├── admin_create_quiz.php
│ ├── admin_manage_quiz.php
│ ├── admin_manage_users.php
│ └── admin_statistics.php
├── includes/
│ ├── db_connect.php
│ ├── functions.php
│ ├── session_config.php
│ ├── header.php
│ └── footer.php
├── css/
│ └── style.css
├── js/
│ └── script.js
└── README.md
6. SÄKERHETSÅTGÄRDER
Lösenord: Hashas med password_hash() (bcrypt)
SQL: Prepared statements för alla queries
XSS: htmlspecialchars() på all output
Sessions:
session_regenerate_id() vid inloggning
Timeout efter inaktivitet
Separata sessions för admin/användare
CSRF: Tokens för formulär
Validering: Server-side validering av all input
7. KRAV SOM UPPFYLLS (C+-nivå)
E-nivå krav:
✓ Användare kan registrera konto ✓ Användare kan logga in ✓ Skyddade quiz-sidor (endast inloggade) ✓ Genomföra quiz med 5 frågor, 3 svar ✓ Spara resultat med användar-id ✓ Visa resultat (namn + poäng) ✓ Sortera resultat efter poäng/namn ✓ Skapa fler quiz ✓ Välja quiz efter inloggning ✓ Se sina egna resultat ✓ Göra samma quiz flera gånger
C+-nivå krav:
✓ Admin-inloggning (separat) ✓ Skyddade admin-sidor ✓ Admin kan hantera användare ✓ Admin kan skapa quiz ✓ Stapeldiagram över poängfördelning ✓ Visa egna svar (grönt) och rätt svar (rött) ✓ Spara svar per fråga i databas ✓ Flexibelt antal frågor per quiz ✓ Flexibelt antal svar per fråga
8. TESTSCENARIOS
Användare
Registrera → Logga in → Välja quiz → Genomföra → Se resultat
Göra om samma quiz → Jämföra resultat
Se alla egna resultat i historik
Kontrollera leaderboard
Admin
Admin-inloggning → Se översikt
Skapa nytt quiz med 7 frågor (test av flexibilitet)
Redigera befintligt quiz
Ta bort användare
Se statistik och diagram