Gra-wpisywanie wyrazów w zakryte pola

Question

Więc tak: Jestem obecnie bardzo słaby z js a chcę to zmienić i przy okazji powtórzyć zapytania do egzaminu e14. Wymyśliłem pomysł na gierkę lecz jeszcze nie mam pojęcia jak się do tego zabrać. Każda pomoc mi się przyda. W odpowiedziach dawajcie wszystkie linki do podobnych tematów, podobnych gier/stron itd. Wyrażajcie swoje zdania, pomysły jak byście to zrobili itd. Każdą uwagę wezmę pod uwagę oprócz takiej bym sobie odpuścił bo nie ważne ile mi to zajmie ale w końcu jakoś dojdę do rozwiązania.

Do rzeczy:

Chcę zrobić grę w której wpisujemy wyrazy w puste pola czyli odpowiadamy na pytania z baz danych. Potem klikamy przycisk "sprawdz" po czym ramki pól podświetlają się na czerwono / zielono w zależności od tego czy dobrze wpisaliśmy. Drugi przycisk to "Pokaż odpowiedzi", który wiadomo jak ma działać a potem trzeci przycisk "następne pytanie" i przechodzimy do następnego pytania. Pytania będą wybierane losowo a będzie ich kilkadziesiąt. Gdy wymyśliłem pomysł zrobiłem jakiś tam schemat działania w paint :D Nie narysowałem tylko tych trzech przycisków.

Z góry dzięki :P

Answer 1

Mój pomysł

1. Stworzenie w bazie danych tabelki 'pytanie' z polami: id, tresc, odpowiedź.

2. Wypełnienie tabeli.

(PHP)

3. Wylosowanie numeru. (0-id ostatniego pytania)

4. Połączenie z bazą danych.

5. Stworzenie zapytania o wiersz z tabeli, które ma wylosowane id.

6. Stworzenie diva z treścią pytania.

7. Wstawienie pola do wpisywania tekstu oraz przycisku 'sprawdź' oraz 'pokaż odpowiedź', 'następne pytanie'

8. Dodanie do przycisków listenery. (podejście AJAX-owe)

9. Wstawienie ukrytego diva z odpowiedzią.

(javascript)

Tutaj nie chcę mi się rozpisywać, ale mogę podrzucić linki:

listenery: https://www.w3schools.com/js/js_htmldom_eventlistener.asp

AJAX-owe łączenie z bazą danych: https://www.w3schools.com/xml/ajax_database.asp

zamiana stylu strony: (przyda ci się przy zmienianiu koloru obramowania) https://www.w3schools.com/jsref/prop_style_transform.asp

chowanie/ukrywanie DIV: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp