Взяти готовий шаблон передній додаток.
посилання на репозиторій із шаблоном
Команда для клонування.
git clone git@github.com:zdimon/marafon-js-quiz-template.git
Використовуючи REST API бекенд, розташований за адресою http://quizapi.webmonstr.com/
Адмінка http://quiz.webmonstr.com/admin
Логін - admin
Пароль - admin
Створити програму, використовуючи бібліотеку jQuery у вигляді плагіна.
Підключення плагіна на сторінці.
<script src="app.js"></script>
<script>
var app = $('#rootBlock').quizPlugin();
app.start();
</script>
Суть роботи програми:
Спочатку перевіряється змінна username в localStorage браузера.
Якщо цієї змінної немає, користувачу виводиться форма авторизації зі списком стікерів і полем, де він вказує своє ім’я.
Стікери запитуються за адресою http://quiz.webmonstr.com/v1/quiz/sticker/list
Після введення імені та вибору стікера надіслати на адресу http://quiz.webmonstr.com/v1/quiz/player/join POST запит із даними json у форматі:
{
"name": "string",
"sticker_id": 0
}
Проаналізуйте відповідь від сервера.
У разі успішної відповіді (відсутність у ньому поля error):
Зберегти ім’я користувача localStorage.
Забрати форму авторизації.
Вивести чат-кімнату.
У разі помилки вивести її на сторінку над кнопкою форми червоним кольором.
Виводимо стікер та ім’я користувача.
Замість слова Admin виводить поточний рахунок користувача.
Запросити список гравців можна за адресою:
http://quiz.webmonstr.com/v1/quiz/player/list
Адреса запиту:
http://quiz.webmonstr.com/v1/quiz/get_current_question
Формат відповіді.
{
"lang": "ru",
"level": 3,
"tp": "questionend",
"mode": "fullmatch",
"theme": 4,
"question": "Яке слово утворене від початкових слів пісні «Чарівна Катарина»?",
"answers": "ШАРМАНКА",
"is_published": true,
"order": 1
}
Адреса запиту.
Формат відповіді.
Відповіді, позначені як неправильні, виводити на рожевому фоні, правильні – на салатовому.
Відповідь надсилатиме лише у випадку не порожнього повідомлення.
Адреса.
http://localhost:7777/v1/quiz/save_message
Формат даних, що надсилаються:
{
"message": "string",
"playername": "string"
}
Відповідь ігнорувати.
Адреса веб-сокет з’єднання.
ws://localhost:7777/quiz/
Забезпечити реакцію програми на такі повідомлення.
Формат повідомлення:
{
'type': 'quiz_message',
'message': {...}
}
При надходженні повідомлення:
Вивести його у списку повідомлень згідно з дизайном та логікою описаною вище.
Якщо повідомлення позначене як правильне,
2.1 Оновити список гравців (або використовувати повідомлення про оновлення облікового запису див. нижче) та програти довільний звук.
2.2 Запитати наступне питання та оновити блок #questionBlock
Формат.
{
'type': 'quiz_delete_message',
'message': {...}
}
При надходженні повідомлення видаляти його зі списку ID у повідомленні.
{
'type': 'quiz_update_account',
'message': {...}
}
При надходженні повідомлення оновити обліковий запис користувача за його ID.