Антон Антон

Нужно добавить следующие меты:
property="og:type" content="article"
property="og:image" content=...
property="og:image:width" content=...
property="og:image:height" content=...
name="twitter:image" content=...
name="twitter:card" content="summary_large_image"

Это можно сделать с помощью svg meshgradient, полноценный пример мне делать лень, но в двух словах - рисуем треугольниками, а в меше градиента совмещаем две точки, чтобы он тоже стал треугольником.
https://svgwg.org/svg-next/pservers.html#MeshGradi... но он не везде поддерживается, так что нужен полифилл https://codepen.io/FragsterAt/pen/LYKBmNR (взял из того, как Inkscape сохраняет)

display: flex;
align-items: center;
width: 100%;

кажется, можно сделать на чем-то типа vue манипулируя svg

С каждым вызовом questionGenerator на кнопку submitBtn навешиваются все новые и новые обработчики. Нужно либо навесить обработчик один раз, либо очищать предыдущие обработчики. Учитывая, что испобльзуемые переменные глобальные - вроде бы можно смело вынести навешивание обработчика из функции questionGenerator.
И да, я смотрел только один файл, ибо очень неудобно. Лучше выкладывать исходники на github или в codepen

К тегу form надо добавить атрибут enctype="multipart/form-data"

display: flex + justify-content: center + flex-wrap: wrap ну и фикс ширина и gap нужный, что-то типа
https://play.tailwindcss.com/gNwK9SI8Kt

или даже inline-block + text-center
https://play.tailwindcss.com/qnseDkOlq6

Положить их в разные контейнеры с полной шириной

https://developer.mozilla.org/en-US/docs/Web/API/W...

SVG +
https://developer.mozilla.org/en-US/docs/Web/SVG/A...
vector-effect="non-scaling-stroke"