Як створити вікторину за 5 хвилин за допомогою ШІ (Gemini) та розмістити її на власному сайті + приклад
.png)
Крок 1: Формулюємо запит до Gemini
Найголовніше — правильно пояснити штучному інтелекту, що ми хочемо отримати. Нам потрібен код, який працюватиме у будь-якому браузері.
Ось приклад промпту (запиту):
"Напиши HTML, CSS та JavaScript код в одному файлі для інтерактивної вікторини до Дня Соборності України. Дизайн має бути у кольорах українського прапора, сучасний та адаптивний для мобільних телефонів. Вікторина має містити 10 питань з варіантами відповідей. У кінці покажи результат та привітання."
Крок 2: Отримуємо код
Gemini згенерує для вас повний код. Вам не потрібно розбиратися, де там стилі, а де скрипти — розумний помічник запакує все в один зручний блок.
Ви можете попросити його змінити питання, додати анімацію конфеті при перемозі або змінити кольори, просто написавши: "Додай анімацію появи питань" або "Зробіть фон світло-блакитним".
Крок 3: Розміщення на Blogger (або будь-якому іншому сайті)
Це найпростіша частина, хоча вона часто лякає новачків.
Створіть нову публікацію в Blogger.
У редакторі тексту перемкніться з режиму "Створити" (Compose) на режим "Перегляд HTML" (значок олівця або дужок
<>).Скопіюйте код, який дав вам Gemini.
Вставте його у поле редактора.
Натисніть "Опублікувати" або "Попередній перегляд".
Порада: Якщо ви використовуєте Blogger, краще вставляти код вікторини не прямо в текст статті, а використовувати віджет "HTML/JavaScript" у макеті, або ж переконатися, що редактор не "з'їдає" теги <script>. Найкращий варіант для статті — вставити код через режим HTML перегляду.
Приклад готової вікторини: "Як добре ти знаєш історію Соборності?"
Нижче я демонструю результат, який згенерував Gemini всього за кілька секунд. Ви можете пройти тест прямо тут!
Вікторина до Дня Соборності України
День Соборності України
Перевір свої знання історії
Завантаження питання...
Вікторину завершено!
Ваш результат:
Немає коментарів:
Дописати коментар