Quiz w Javascript

0

Witajcie, mam pewien problem mianowicie chciałbym stworzyć quiz totalnie amatorski. Powstał już projekt jednak brakuje mi jeszcze pewnych opcji. Mianowicie chciałbym aby każde pytanie można było sprawdzić(udzielasz odpowiedź klikasz w guzik sprawdź odpowiedź i podświetla się na czerwono lub zielono).

Wklejam kody:

HTML: https://pastebin.com/TKxTGN64
CSS: https://pastebin.com/ZShVS5cT
JS: https://pastebin.com/DzFETqG3
Baza pytań JS: https://pastebin.com/dCFVFihx

Może ktoś się nudzi tego wieczoru i pomoże ;)
Pozdrawiam

1

Skorzystaj z JQuery, to nie jest trudne.
na przykład div(który działa jak button) z id "check" do sprawdzania


<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var odp = false;
$(document).ready(function(){
    $("#check").click(function(){
       if(odp){
       		$("#status").html("Odpowiedź jest poprawna"); //zmiana tekstu
            $("#status").css('color', 'green'); //zmiana koloru czcionki
       }else{
       		$("#status").html("Odpowiedź jest błędna");
            $("#status").css('color', 'red');
       }
    });
});
</script>
</head>
<body>

<div id="check" style="width:100px;height:20px;cursor:pointer;background-color: coral;color:white;border-radius: 25px;padding:10px;text-align: center;text-align: center;vertical-align: middle;line-height: 20px;">Sprawdź</div>

<div id="status"></div>

</body>
</html>

0
Kandif napisał(a):

Skorzystaj z JQuery, to nie jest trudne.
na przykład div(który działa jak button) z id "check" do sprawdzania


<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var odp = false;
$(document).ready(function(){
    $("#check").click(function(){
       if(odp){
       		$("#status").html("Odpowiedź jest poprawna"); //zmiana tekstu
            $("#status").css('color', 'green'); //zmiana koloru czcionki
       }else{
       		$("#status").html("Odpowiedź jest błędna");
            $("#status").css('color', 'red');
       }
    });
});
</script>
</head>
<body>

<div id="check" style="width:100px;height:20px;cursor:pointer;background-color: coral;color:white;border-radius: 25px;padding:10px;text-align: center;text-align: center;vertical-align: middle;line-height: 20px;">Sprawdź</div>

<div id="status"></div>

</body>
</html>

A czy jest możliwość zrobienia tego w czystym js bez dołączania jquery?

1

Oczywiście że jest, ale nie widzę potrzeby aby tak robić. Po to zostało stworzone JQuery. Czy twoje zadanie wymaga czystego js ?

0
Kandif napisał(a):

Oczywiście że jest, ale nie widzę potrzeby aby tak robić. Po to zostało stworzone JQuery. Czy twoje zadanie wymaga czystego js ?

Niestety tak, potrzebuję zrobić to najprościej jak się da :(

1

Niestety tak, potrzebuję zrobić to najprościej jak się da

Właśnie po to wymyślono jquery - żeby zamiast pisać kilkadziesiąt/kilkaset linii, masz gotową bibliotekę, która wykona to samo zadanie przy użyciu kilku linii.
Pytanie - do dla Ciebie oznacza "jak najprościej". W mojej ocenie prostsze jest podpięcie jquery i dopisanie paru rzeczy, niż pisanie ręcznie dużych ilości kodu (który z dużym prawdopodobieństwem będzie gorszy jakościowo, niż to, co zrobili twórcy jquery).

czy jest możliwość zrobienia tego w czystym js bez dołączania jquery

Oczywiście. Jquery nie jest jakąś czarną magią, tylko jest biblioteką napisaną właśnie w JS. Wszystko, co oferuje jquery możesz napisać samemu - ale będzie z tym trochę pracy.

0
cerrato napisał(a):

Niestety tak, potrzebuję zrobić to najprościej jak się da

Właśnie po to wymyślono jquery - żeby zamiast pisać kilkadziesiąt/kilkaset linii, masz gotową bibliotekę, która wykona to samo zadanie przy użyciu kilku linii.
Pytanie - do dla Ciebie oznacza "jak najprościej". W mojej ocenie prostsze jest podpięcie jquery i dopisanie paru rzeczy, niż pisanie ręcznie dużych ilości kodu (który z dużym prawdopodobieństwem będzie gorszy jakościowo, niż to, co zrobili twórcy jquery).

czy jest możliwość zrobienia tego w czystym js bez dołączania jquery

Oczywiście. Jquery nie jest jakąś czarną magią, tylko jest biblioteką napisaną właśnie w JS. Wszystko, co oferuje jquery możesz napisać samemu - ale będzie z tym trochę pracy.

Pytanie jak to teraz wszystko sklecić w całość?

Dzięki za poświęcenie czasu.

0

Pytanie jak to teraz wszystko sklecić w całość?

A możesz napisać konkretniej, w czym jest problem?
Na początku sam dałeś linki do tego, co sam zrobiłeś (aczkolwiek podejrzewam, że jest to w dużej mierze przepisane z innego źródła - chociażby sam tytuł "quiz sport" totalnie niepasujący do tematyki pytań czy użycie funkcji fisherYates) i z tego co pisałeś - w większości to działa zgodnie z oczekiwaniami, tylko brakuje elementu sprawdzającego poprawność.
Potem @Kandif podał Ci przykład, jak można zastosować jquery i uzyskać oczekiwany przez Ciebie rezultat.
Stąd pytanie - w czym konkretnie masz problem?

A jeszcze w temacie Twojego kodu quizu w JS - można tam wiele rzeczy zmienić / poprawić. Pierwsze co mi się rzuca w oczy to bardzo wiele powtórzeń - np. bliźniacze funkcje getAnswer1, 2, 3, 4 - można to zrobić w jednej funkcji wspólnej z parametrem, to samo dotyczy uporządkowania funkcji createQuestionBlock. Funkcja nextQuestion - skoro i tak (niezależnie od tego, czy odpowiedź była błędna czy poprawna) zwiększasz wartość globalProgress, można to wywalić poza if'a (a tym samym wyeliminować ELSE). Odnośnie wspomnianej funkcji fisherYates - nigdzie nie zauważyłem, żeby była ona wywoływana (prawdopodobnie jest to pozostałośc z Ctrl-C Ctrl-V).

0
cerrato napisał(a):

Pytanie jak to teraz wszystko sklecić w całość?

A możesz napisać konkretniej, w czym jest problem?
Na początku sam dałeś linki do tego, co sam zrobiłeś (aczkolwiek podejrzewam, że jest to w dużej mierze przepisane z innego źródła - chociażby sam tytuł "quiz sport" totalnie niepasujący do tematyki pytań czy użycie funkcji fisherYates) i z tego co pisałeś - w większości to działa zgodnie z oczekiwaniami, tylko brakuje elementu sprawdzającego poprawność.
Potem @Kandif podał Ci przykład, jak można zastosować jquery i uzyskać oczekiwany przez Ciebie rezultat.
Stąd pytanie - w czym konkretnie masz problem?

A jeszcze w temacie Twojego kodu quizu w JS - można tam wiele rzeczy zmienić / poprawić. Pierwsze co mi się rzuca w oczy to bardzo wiele powtórzeń - np. bliźniacze funkcje getAnswer1, 2, 3, 4 - można to zrobić w jednej funkcji wspólnej z parametrem, to samo dotyczy uporządkowania funkcji createQuestionBlock. Funkcja nextQuestion - skoro i tak (niezależnie od tego, czy odpowiedź była błędna czy poprawna) zwiększasz wartość globalProgress, można to wywalić poza if'a (a tym samym wyeliminować ELSE). Odnośnie wspomnianej funkcji fisherYates - nigdzie nie zauważyłem, żeby była ona wywoływana (prawdopodobnie jest to pozostałośc z Ctrl-C Ctrl-V).

Tak większość skopiowana jest z gotowego quizu bo nie będę ukrywał, że z js mam mało wspólnego. I po prostu nie wiem jak to wszystko zrobić żeby mi to działało i cieszyło oko. Potrzebuję po prostu czegoś co sobie wymyśliłem tzn. sukcesu aby rozpocząć naukę nad js.
Pozdrawiam

1 użytkowników online, w tym zalogowanych: 0, gości: 1