Полина

У вас не сохранен исходный размер. Он нам нужен чтоб знать до каких пределов увеличивать.
Допустим, нам надо проверить длину поля после ввода и удаления символов.

document.addEventListener('DOMContentLoaded', () => {
    const inputElement = document.querySelector("input");
    const originalFontSize = parseFloat(getComputedStyle(inputElement).fontSize);
    let currentSize = originalFontSize;
    // переменная для последнего значения поля input
    let lastValue = '';

    inputElement.addEventListener("input", () => {
        const value = inputElement.value;

        if (value.length > lastValue.length) {
            // добавлен символ
            if (inputElement.scrollWidth > inputElement.clientWidth) {
                // текст не помещается, уменьшаем шрифт
                currentSize -= 1;
            }
        } else if (value.length < lastValue.length) {
            // удалён символ
            if (currentSize < originalFontSize) {
                // восстанавливаем размер шрифта до начального
                currentSize += 1;
            }
        }

        inputElement.style.fontSize = `${currentSize}px`;
        // console.log(`Размер шрифта: ${currentSize}px`);
        lastValue = value;
    });

    // инициализация размера шрифта
    inputElement.style.fontSize = `${originalFontSize}px`;
});

Если ширина поля ввода фиксированная, то примерно так. Если она динамическая, надо добавить проверку на ширину input
В обработчик можно еще добавить value.length === lastValue.length (например, для замены моноширинного символа или копипаста с цифрами). Но если у вас символы разной ширины (например, Ш и W занимают больше места), то лучше проверить влезают ли буквы даже если длина строки не менялась.

Самый простой вариант, наверное, сделать SVG.

Немного корявый способ на css - наложить две фигуры друг на друга.

<div class="container">
  <div class="shape box"></div>
  <div class="shape parallelogram"></div>
</div>

.shape {
  width: 1000px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.box {
  border-radius: 20px 20px 0 0;
  z-index: 1;
}
.parallelogram {
  transform: skewY(-4deg);
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  margin-top: -35px; /* степень перекрытия объектов*/
  z-index: 2;
}

У вас в разметке на 26 строке не закрытый li и на 121 строке лишний div

Можно немного изменить и отделить структуру от логики:

// ждем пока контент будет полностью загружен
document.addEventListener('DOMContentLoaded', function() {
  // находим кнопку и добавляем обработчик
  const applyButton = document.getElementById('apply');
  applyButton.addEventListener('click', function() {
      summary();
  });

  function summary() {
      let questions = document.querySelectorAll('.question');
      let score = 0;
      let rightAnswers = ["a_2", "a_5", "a_9", "a_10", "a_13", "a_18", "a_19", "a_24", "a_27", "a_28"];

      questions.forEach(function(question, index) {
          let chosenAnswer = question.querySelector("input[type='radio']:checked");
          if (chosenAnswer && chosenAnswer.id === rightAnswers[index]) {
              score++;
          }

          console.log("Выбранный ответ: " + (chosenAnswer ? chosenAnswer.parentNode.textContent : "Нет ответа выбрано"));
          console.log("Правильный ответ: " + rightAnswers[index]);
          console.log("Очки: " + score);
      });
      alert("Количество правильных ответов: " + score);
  }
});

из html убираем onclick="summary();"

К этой панели добавить шаблоны произвольных размеров, увы, нельзя

Можно сделать шаблон для отдельного проекта:
1. Создать нужный фрейм с заголовками, сеткой и т.п.
2. Правой кнопкой, выбрать create component
3. Теперь он доступен в Assets, можно его бесконечно переиспользовать
4. Или создать библиотеку компонентов (pro подписка) чтобы использовать этот шаблон/набор шаблонов в разных проектах