Tworzenie quizu przy pomocy json

Question

Cześć

Próbuję stworzyć quiz przy pomocy bazy json. Plik index.html jak i plik json uruchamiam na localhost xamppa.
Stworzyłem przykładową baze w oddzielnym pliku json, walidator json nie pokazuje żadnych błędów jednak w konsoli widnieje błąd "Unexpected token : " w linijce 2 pliku json

{
	"Kategoria1": [{
		"id": 0,
		"tresc": "Treść pytania 1",
		"odpA": "Odpowiedź A",
		"odpB": "Odpowiedź B",
		"odpC": "Odpowiedź C",
		"odpD": "Odpowiedź D"
	}, {
		"id": 1,
		"tresc": "Treść pytania 2",
		"odpA": "Odpowiedź A2",
		"odpB": "Odpowiedź B2",
		"odpC": "Odpowiedź C2",
		"odpD": "Odpowiedź D2"

	}],

	"Kategoria2": [{
		"id": 0,
		"tresc": "Treść pytania 1kat2",
		"odpA": "Odpowiedź Akat2",
		"odpB": "Odpowiedź Bkat2",
		"odpC": "Odpowiedź Ckat2",
		"odpD": "Odpowiedź Dkat2"
	}, {
		"id": 1,
		"tresc": "Treść pytania 2",
		"odpA": "Odpowiedź A2pyt2kat2",
		"odpB": "Odpowiedź B2pyt2kat2",
		"odpC": "Odpowiedź C2pyt2kat2",
		"odpD": "Odpowiedź D2pyt2kat2"
	}]


}

$.getJSON("pytania.json", function(json) {
    console.log(json);

Poza tym nie mam kompletnie pojęcia jak wywołać konkretne pytania +odpowiedzi, może coś źle rozumiem. Szukałem ale nic mi nie pomogło, jedyne co, samo połączenie działa(kod wyżej)

Prawidłowo pokazuje zawartość pliku pytania.json

Tylko co teraz, jak próbuje to jakoś zparsować to mam błędy, jak potem wywołać konkretne pytanie + odpowiedzi z konkretnej kategorii.

 

Answer 1

Trochę mało responsywny ten Twój JSON trochę poprawiłem:

[
    {
        "name": "Kategoria1",
        "question":
        [
            {
                "description": "Treść pytania 1",
                "answer":
                [
                    "Odpowiedź A",
                    "Odpowiedź B",
                    "Odpowiedź C",
                    "Odpowiedź D"
                ]
            },
            {
                "description": "Treść pytania 1",
                "answer":
                [
                    "Odpowiedź A",
                    "Odpowiedź B",
                    "Odpowiedź C",
                    "Odpowiedź D"
                ]
            }
        ]
    },
    {
        "name": "Kategoria2",
        "question":
        [
            {
                "description": "Treść pytania 1",
                "answer":
                [
                    "Odpowiedź A",
                    "Odpowiedź B",
                    "Odpowiedź C",
                    "Odpowiedź D"
                ]
            },
            {
                "description": "Treść pytania 1",
                "answer":
                [
                    "Odpowiedź A",
                    "Odpowiedź B",
                    "Odpowiedź C",
                    "Odpowiedź D"
                ]
            }
        ]
    }
 
];

Dzięki zastosowaniu tablicy w przypadku kategorii można łatwo odnosić się do kategorii, zarówno po ID i jak i po nazwie dla wyszukania po nazwie napisałem prostą funkcję. I taką tablice na zamianę id odpowiedzi na literę.

function getQuizzCategoryByName(categoryName)
{
    for(var index in quizz)
        if(quizz[index].name == categoryName)
            return quizz[index];
    return null;
};
var answerIdToLetter = ["A", "B", "C", "D", "E", "F", "G"];

No i samo zastosowanie jest banalne:

var quizz;
$.getJSON("pytania.json", function(json) {
    quizz = JSON.parse(json);
});

Choć ja polecam Ci po prostu dorzucić od razu pytania do JS jak za przy każdym załadowaniu strony będą wykorzystywane to bez sensu lądować kolejny riquest do serwera.

I tu masz kilka przykładów:

//Uzyskanie kategorii po ID
quizz[id_kategorii];
np. quizz[0];
//Uzyskanie kategorii po nazwie
//Jeśli jest null to nie znaleziono
getQuizzCategoryByName("nazwa_kategorii");
np. getQuizzCategoryByName("Kategoria1");
//Numeracje kategorii masz automatyczną od zera
//Sprawdzanie ilości kategorii
quizz.length
//W przypadku wyszukiwania kategorii po nazwie polecam zapisanie kategorii do zmiennej4
var znaleziona_kategoria = getQuizzCategoryByName("nazwa_kategorii");
//Możesz też tak ale nie polecam ponieważ wtedy wyszukuje Ci przy każdym wywołaniu.
getQuizzCategoryByName("nazwa_kategorii").question[id_pytania];
//Ale polecam tak
quizz[id_kategorii].question[id_pytania];
//Albo tak
znaleziona_kategoria.question[id_pytania];
//A tak dostajesz tresc
znaleziona_kategoria.question[id_pytania].description;
//A tak dostajesz ilosc pytan
quizz[id_kategorii].question.length
//Albo 
znaleziona_kategoria.question.length
//A tak dostajesz możliwe odpowiedzi
quizz[id_kategorii].question[id_pytania].answer[id_odpowiedzi];
//A tak dostajesz ilosc możliwych odpowiedzi w danym pytaniu
znaleziona_kategoria.question[id_pytania].answer.length
//Zamiana ID odpowiedzi na literę:
answerIdToLetter[id_odpowiedzi];

 

Comments

A więc po kolei. Chciałem użyć jquery bo ktoś mi napisał " polecam użyć jakiejś biblioteki do Javascriptu np. jQuery dzięki której pisze się łatwiej niż w czystym JS. " no więc użyłem. Poza tym mówisz żeby lepiej javascript trzymać w oddzielnym pliku?
A tu screen, oczywiście wkleiłem poprawiony json, próbowałem doszukać się jakiejś literówki i sprawdzałem też na https://jsonlint.com 

---

Łatwiej nie zawsze znaczy lepiej nie pakuj się w jQ zanim nie będziesz dobrze ogarniać samego JS. To czy użyć frimeworka zależy od tego jak często go używasz w tym przypadku do jednorazowego użycia jest bez sensu.(90 kb samo jQ) Ja ten skrypt sprawdziłem dałeś dobrą nazwę pliku ponieważ u mnie to działa. I daj screena na jakimś hostingu zdjęć ponieważ ta strona obniża zawsze rozdzielczość zdjęcia tak że nic nie widać.

---

Masz naprawdę spore braki w wiedzy oczywiście że zasoby się trzyma w jednym skompresowanym pliku ponieważ wtedy się on cachuje.

---

Najpierw piszesz "nie dawaj js do html" no więc zapytałem się czy chodzi o trzymanie js w oddzielnym pliku i od razu, że mam spore braki w wiedzy bo przecież zasoby trzyma się w jednym skompresowanym pliku ....  ??? Więc chyba chodziło ci o to żeby nie robić to przez innerHTML? 

Tu link do screena: Screen

edit

juz dziala, czyzby chodzilo o reset xamppa? Wyswietla prawidłowo całą zawartość json

 

---

Ponieważ to są spore braki w wiedzy dlatego uważam iż zanim zaczniesz robić tego typu projekty powinieneś nauczyć się podstaw a to czy umieszczać plik skrypt w pliku html czy js to już taka podstawa podstaw. Masz po prostu przygotowany cały projekt wypakuj sobie i zobacz.

https://www.dropbox.com/s/dzh9cmh0gbxj2zq/14.zip?dl=0