A framework for quizzes using React and BlueprintJS

This app allows you to play simple quiz games. The quiz logic is separated from the specific data, which allows you to make a quiz on any topic, if there is a public API for this topic on the Internet that produces an array of objects.

This project uses Sass/CSS modules, Sass libraries, and BlueprintJS for UI styling, and uses a GraphQL query over HTTP to fetch data for the sample quiz.

Project structure

File paths start at /src.

The main component /components/App uses the useReducer hook and context to create a context with global state and actions. The state and action logic mimics Redux and redux-thunk. See /reducer and /context.

The /containers/GameContainer container contains logic for managing game states.

Configuring quiz data

The file /reducer/constants contains the enumeration SupportedDataConfigs, which is used to modify existing configurations and create new configurations

• /features/mainMenu/hooks/useDataFetch contains the logic for configuring HTTP requests (using axios)
• /utils/getGameDataDict contains the logic for converting data received from the API into the format used by the application
• /features/quiz/utils/wordings/wordingsDict contains the logic for formulating questions and answer options, and /features/quiz/utils/generateQuestion contains the logic for generating questions and answer options.

---

Фреймфорк для квизов на React и BlueprintJS

Этот проект позволяет играть в простые игры-квизы. Логика квиза отделена от конкретных данных, что позволяет сделать квиз по любой тематике, если для этой тематики в интернете есть публичный API, который выдает массив объектов.

В этом проекте используются Sass/CSS модули, библиотеки Sass и BlueprintJS для стилей интерфейса, для получения данных для примера квиза используется запрос GraphQL через HTTP.

Структура

Здесь и далее пути к файлам начинаются в /src.

В главном компоненте /components/App используются хук useReducer и контекст, чтобы создать контекст с глобальным состоянием и действиями. Логика состояния и действий имитирует Redux и redux-thunk. См. /reducer и /context.

В контейнере /containers/GameContainer содержится логика управления состояниями игры.

Настройка данных для квиза

В файле /reducer/constants есть перечисление конфигураций SupportedDataConfigs, которое связано с объектами конфигурации в различных файлах.

• в /features/mainMenu/hooks/useDataFetch содержится логика HTML запросов для различных конфигураций
• в /utils/getGameDataDict содержится логика приведения данных, полученных с API, в используемый приложением формат
• в /features/quiz/utils/wordings/wordingsDict содержится логика формулировки вопросов и вариантов ответа, в /features/quiz/utils/generateQuestion - логика генерации вопросов и вариантов ответа.