Как создать приложение Quiz с помощью ChatGPT (+шаблон)

Также оставляю инструкции в видео-формате ↴

В данной статье я наглядно покажу, как создать мобильное приложение - викторину Quiz с помощью облачной платформы Chatium, а также как установить скрипт викторины в GetCourse.

Для создания приложения не потребуется скачивание каких-либо программ, даже программировать здесь необязательно, поэтому эти инструкции подойдут любому.

Создаем мобильное приложение

Копируем шаблон

• Копируем шаблон, перейдя по ссылке https://chatium.com/quiz

Нас сразу перекинет на страницу с шаблоном, останется только «Форкнуть» его. Так мы получим собственную версию приложения.

• Далее нужно его сохранить. Нас перекинет на страницу с авторизацией в Chatium.

После этих действий мы получим личный шаблон для работы с приложением.

Редактируем вопросы

Чтобы настроить вопросы нашей викторины, необходимо в тексте программы найти строку «const questionsTable...». Над ней можно перейти к таблице всех вопросов.

Нас перекинет на страницу с таблицей, выглядеть она будет так:

Здесь мы можем изменить:

• Количество вопросов
• text - формулировку вопроса
• options - варианты ответа
• correct_answer - правильный ответ на вопрос
• image - изображение к каждому вопросу

Для того чтобы проверить, что элемент изменяется, добавим текст к вопросу. Теперь он будет выглядеть вот так:

Устанавливаем на телефон

Так как мы делаем мобильное приложение викторины, нам нужно знать, как все будет выглядеть и работать на телефоне. Чтобы запустить Quiz, есть несколько способов:

1. Через мобильное приложение Chatium.
2. Через браузер.

В первом случае:

Мы авторизуемся в приложении и нажимаем на кнопку Add by QR.

• Chatium запросит разрешение на использование камеры, после чего нужно отсканировать QR-код в правом нижнем углу на странице с викториной.
• Так в приложении у нас откроется викторина, а мы сможем пройти ее и проверить работу.

Во втором случае:

• Мы сканируем QR-код с помощью стандартного приложения камеры на телефоне. Так у нас откроется викторина в браузере.

Делаем вопросы с помощью ChatGPT

Самому придумывать и вписывать в таблицу каждый вопрос может быть утомительно и долго, поэтому в шаблоне есть еще один способ наполнить викторину вопросами.

В коде реализован функционал импорта вопросов с помощью ChatGPT, чтобы его использовать:

• В тексте программы нужно найти строку «const importScreen...»
• Над ней переходим на страницу

На странице будет написан промпт для ChatGPT, который просит нейросеть сделать таблицу вопросов в формате .json, а также поле ввода, куда нужно будет вставить ответ.

*Промпт для ChatGPT можно менять как угодно. Можно написать его на русском языке, использовать другую тематику вопросов.

• Копируем промпт и вбиваем его нейросети

• Копируем ответ и вставляем его на странице с промптом. Нажимаем Import

Наши вопросы импортированы в викторину, но у них нет картинок. Чтобы добавить изображения к вопросам, нужно перейти в таблицу с их настройкой, и в соответствующем столбце выбрать нужные изображения.

Редактируем дизайн

Чтобы изменить элементы приложения, необходимо иметь хотя бы малое представление о программировании.

Даже если представления нет, то я покажу на примерах, как меняется интерфейс приложения.

Функция «async function QuestionScreen» отвечает за показ экрана вопроса. В ней мы можем, например, убрать часть кода, отвечающего за картинку, и тогда картинки на экране не будет:

Пока вернем изображение, вернув нужный код.

Также можно сделать текст на изображении, для этого создадим новую строку после «background...»

* color отвечает за цвет текста, fontSize - за шрифт, а padding - за отступ от нижней границы изображения

Мы продублировали текст вопроса на картинке, за него отвечает {question.text}.

Таким образом можно находить элементы экрана в коде, и менять их характеристики.

Скрипт викторины

Теперь я расскажу как на платформе GetCourse поставить скрипт викторины.

Копируем шаблон

Чтобы скопировать шаблон скрипта, необходимо:

• Зайти на свой аккаунт в GetCourse
• Переходим по пути Apps → IDE

• Нас перекинет на страницу с шаблонами, где нужно выбрать и создать Quiz screen.

• Теперь задаем имя. Оно будет в адресе нашего приложения.

Откроется скрипт нашего Quiz'а, с которым мы можем работать.

Настраиваем вопросы

Чтобы настроить вопросы для викторины, нужно перейти по пути Settings → Questions

У нас откроется страница с настройкой таблицы вопросов. Таблицу можно редактировать так же, как мы редактировали вопросы при создании мобильного приложения Quiz.

Только в этом случае у нас есть еще одна настройка, и это:

• position - порядок появления вопроса в викторине.

С вариантами ответа тоже можно настроить несколько мелочей:

• Количество вариантов ответа
• Правильность варианта ответа
• Количество очков за вариант ответа

Чтобы посмотреть, как изменится викторина, поменяем один из вопросов и варианты ответа на него.

Запустим викторину, и увидим, что изменения вступили в силу

Настраиваем Quiz

В скрипте можно настроить само приложение викторины.

Переходим по пути Settings → Config

У нас откроется страница с настройкой викторины, мы можем настроить:

• title - заголовок
• questionLabel - текст, показывающий какой сейчас вопрос
• showCorrectAnswers - показывать ли правильные ответы при прохождении
• showPointsSum - показывать ли сумму баллов за викторину
• pointsSumLabel - текст, отвечающий за показ баллов
• nextQuestionLabel - надпись на кнопке для перехода к следующему вопросу
• canRestart - возможность перезапустить викторину
• restartLabel - надпись при перезапуске викторины
• finishButtonTitle - текст, выводящийся при окончании викторины
• finishButtonUrl - ссылка, по которой перейдет пользователь при нажатии на текст в конце
• resultData - отвечает за то, какой экран будет показываться пользователю, в зависимости от набранных баллов

Давайте вставим текст в finishButtonTitle, а также любую ссылку, например, сайт GetCourse, в finishButtonUrl, по которой пользователь будет переходить при нажатии на текст, чтобы проверить, как это выглядит.

Как видим, у нас появилась кнопка при окончании викторины, при нажатии на которую мы перейдем на сайт GetCourse.

Настраиваем результат

Теперь настроем, что будет видеть пользователь после прохождения викторины, в этом нам помогут баллы за ответы.

Переходим к настройке resultData → Add.

У нас развернется табличка, в которой мы можем поменять:

• minPoints - минимум баллов для показа нужной страницы
• title - заголовок страницы
• text - текст на странице

Тут нам и поможет количество баллов за правильный ответ на первый вопрос, настроим страницу:

Сохраняем изменения и проходим викторину, чтобы проверить их.

Как видим, при правильном ответе на первый вопрос, нам выдают 3 балла, поэтому показывается страница для 3 баллов.

Выдаем доступ

Так как мы все это делали на нашем аккаунте GetCourse, то доступ к разделу IDE, для нас открыт, но для рядовых пользователей и учеников он может быть недоступен.

Чтобы выдать им доступ к этому разделу, нужно:

• Перейти по пути Ученики → Пользователи → (нужный профиль человека)

• Мы увидим профиль пользователя, отсюда нужно перейти на вкладку Права
• Нам покажут список всех прав, которые у нас могут быть. В разделе Основные права нам нужно поставить галочку на последнем пункте

Так рядовой пользователь получит доступ к разделу IDE.

Теперь у нас есть рабочее мобильное приложение Quiz, которое позже можно будет смело выпускать в AppStore или в Google Play, а также скрипт викторины, полученный из GetCourse.

Наслаждаемся результатом! :)

Еще больше про приложения и не только вы сможете найти на моем YouTube канале