anamarijapapic / JUNIORDev-React-04-Quiz

Trivia quiz game app. 🤓

Home Page:https://anamarijapapic.github.io/JUNIORDev-React-04-Quiz/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Digitalna Dalmacija JUNIORDev React 2024

Praktični rad 4

Na ovoj web lokaciji se nalazi "Open Trivia DataBase" - besplatni JSON API na kojem možete pronaći bazu kviz (trivia) pitanja. Preko navedenog linka možete podesiti nekoliko osnovnih opcija (broj pitanja, kategorija, težina, ...) te generirati URL na koji možete poslati zahtjev. Odgovor na zahtjev će sadržavati niz sa pitanjima i odgovorima. Ovako izgleda primjer odgovora na zahtjev u kojem tražimo 2 pitanja (bez dodatnih filtera) "https://opentdb.com/api.php?amount=2"

{
  "response_code": 0,
  "results": [
    {
      "category": "Entertainment: Video Games",
      "type": "multiple",
      "difficulty": "easy",
      "question": "What household item make the characters of "Steins; Gate" travel through time?",
      "correct_answer": "Microwave",
      "incorrect_answers": ["Computer", "Refrigerator", "Televison"]
    },
    {
      "category": "General Knowledge",
      "type": "boolean",
      "difficulty": "hard",
      "question": "Spoon theory is a theory, utilizing "Spoons" as a metaphor for energy they can use in a day.",
      "correct_answer": "True",
      "incorrect_answers": ["False"]
    }
  ]
}

Kao što vidite pitanja se nalaze u polju "results koji je niz objekata, a svaki objekt predstavlja jedno pitanje sa svojim pripadajućim svojstvima - kategorija, tip, težina, pitanje, točan i netočni odgovori.

Zadatak

Napravite React aplikaciju koja će prilikom pokretanja dohvatiti pet (5) pitanja i naravno spremiti ih unutar komponente. Korisniku je potrebno prikazati prvo pitanje i potencijalne odgovore. Pokušajte implementirati što više od navedenih funkcionalnosti:

  • dodajte mogućnost odgovora na trenutno pitanje i prikaz je li odgovor bio točan ili ne
  • nakon odgovora se prikazuje iduće pitanje
  • na ekranu bi trebalo biti vidljivo koliko je ukupno pitanja i na kojem smo trenutno pitanju
  • korisniku bi trebao biti prikazan njegov trenutni rezultat
  • nakon kraja igre ponudite korisniku mogućnost ponovnog igranja (sa novim pitanjima)

Primjer rješenja

Napredne mogućnosti

Ukoliko ste implementirali sve prethodne funkcionalnosti, pokušajte prije početka igre korisniku ponuditi mogućnost odabira težine, kategorije ili broja pitanja. Ovisno o korisničkom unosu modificirajte URL zahtjeva pa tek nakon potvrde korisnike pošaljite zahtjev i započnite igru sa traženim skupom pitanja.

About

Trivia quiz game app. 🤓

https://anamarijapapic.github.io/JUNIORDev-React-04-Quiz/


Languages

Language:TypeScript 88.4%Language:JavaScript 5.8%Language:HTML 3.1%Language:CSS 2.7%