decidim-forms 0.30.3 → 0.31.0.rc1

data/app/packs/src/decidim/forms/forms.js

@@ -13,7 +13,7 @@ import createDisplayConditions from "src/decidim/forms/display_conditions.compon
 import createMaxChoicesAlertComponent from "src/decidim/forms/max_choices_alert.component"
 import { preventUnload } from "src/decidim/utilities/dom"
 
-$(() => {
+document.addEventListener("turbo:load", () => {
   $(".js-radio-button-collection, .js-check-box-collection").each((idx, el) => {
     createOptionAttachedInputs({
       wrapperField: $(el),
@@ -22,7 +22,7 @@ $(() => {
     });
   });
 
-  $.unique($(".js-check-box-collection").parents(".answer")).each((idx, el) => {
+  $.unique($(".js-check-box-collection").parents(".response")).each((idx, el) => {
     const maxChoices = $(el).data("max-choices");
     if (maxChoices) {
       createMaxChoicesAlertComponent({
@@ -35,39 +35,18 @@ $(() => {
     }
   });
 
-  document.querySelectorAll(".js-sortable-check-box-collection").forEach((el) =>  {
+  document.querySelectorAll(".js-sortable-check-box-collection").forEach((el) => new DragonDrop(el, {
+    handle: false,
+    item: ".js-collection-input"
+  }));
 
-    /**
-    * Due to a bug reported in https://github.com/decidim/decidim/issues/15191
-    * we have to listen to the `drag` event and prevent the scrolling
-    * and enabling it back again after it.
-    */
-
-    let preventScroll = function(event) {
-      event.preventDefault();
-    }
-
-    el.addEventListener("touchmove", (event) => {
-      preventScroll(event);
-    }, { passive: false });
-
-    el.addEventListener("touchend", () => {
-      el.removeEventListener("touchmove", preventScroll)
-    });
-
-    return new DragonDrop(el, {
-      handle: false,
-      item: ".js-collection-input"
-    });
-  });
-
-  $(".answer-questionnaire .question[data-conditioned='true']").each((idx, el) => {
+  $(".response-questionnaire .question[data-conditioned='true']").each((idx, el) => {
     createDisplayConditions({
       wrapperField: $(el)
     });
   });
 
-  const form = document.querySelector("form.answer-questionnaire");
+  const form = document.querySelector("form.response-questionnaire");
   if (form) {
     const safePath = form.dataset.safePath.split("?")[0];
     let exitUrl = "";

data/app/packs/stylesheets/decidim/forms/forms.scss

@@ -1,4 +1,4 @@
-.answer-questionnaire {
+.response-questionnaire {
   @apply border-t-2 border-background pt-8;
 
   &__step {
@@ -22,7 +22,7 @@
   }
 
   &__question-label {
-    @apply text-black text-xl font-semibold relative before:content-[attr(data-answer-idx)] before:w-6 before:h-6 md:before:absolute md:before:-left-4 md:before:-translate-x-full before:inline-flex before:justify-center before:rounded-full before:bg-background before:text-lg before:text-gray-2 before:font-semibold;
+    @apply text-black text-xl font-semibold relative before:content-[attr(data-response-idx)] before:w-6 before:h-6 md:before:absolute md:before:-left-4 md:before:-translate-x-full before:inline-flex before:justify-center before:rounded-full before:bg-background before:text-lg before:text-gray-2 before:font-semibold;
   }
 
   &__question-description {

data/app/presenters/decidim/forms/admin/questionnaire_participant_presenter.rb

@@ -19,7 +19,7 @@ module Decidim
           participant.ip_hash || "-"
         end
 
-        def answered_at
+        def responded_at
           participant.created_at
         end
 
@@ -30,23 +30,23 @@ module Decidim
         end
 
         def status
-          I18n.t(registered? ? "registered" : "unregistered", scope: "decidim.forms.user_answers_serializer")
+          I18n.t(registered? ? "registered" : "unregistered", scope: "decidim.forms.user_responses_serializer")
         end
 
-        def answers
-          siblings.map { |answer| QuestionnaireAnswerPresenter.new(answer:) }
+        def responses
+          siblings.map { |response| QuestionnaireResponsePresenter.new(response:) }
         end
 
-        def first_short_answer
-          short = siblings.where(decidim_forms_questions: { question_type: %w(short_answer) })
+        def first_short_response
+          short = siblings.where(decidim_forms_questions: { question_type: %w(short_response) })
           short.first
         end
 
         def completion
-          with_body = siblings.where(decidim_forms_questions: { question_type: %w(short_answer long_answer) })
+          with_body = siblings.where(decidim_forms_questions: { question_type: %w(short_response long_response) })
                               .where.not(body: "").count
-          with_choices = siblings.where.not(decidim_forms_questions: { question_type: %w(short_answer long_answer) })
-                                 .where("decidim_forms_answers.id IN (SELECT decidim_answer_id FROM decidim_forms_answer_choices)").count
+          with_choices = siblings.where.not(decidim_forms_questions: { question_type: %w(short_response long_response) })
+                                 .where("decidim_forms_responses.id IN (SELECT decidim_response_id FROM decidim_forms_response_choices)").count
 
           (with_body + with_choices).to_f / questionnaire.questions.not_separator.not_title_and_description.count * 100
         end
@@ -54,10 +54,10 @@ module Decidim
         private
 
         def siblings
-          Answer.not_separator
-                .not_title_and_description
-                .where(questionnaire:, session_token: participant.session_token)
-                .joins(:question).order("decidim_forms_questions.position ASC")
+          Response.not_separator
+                  .not_title_and_description
+                  .where(questionnaire:, session_token: participant.session_token)
+                  .joins(:question).order("decidim_forms_questions.position ASC")
         end
       end
     end

data/app/presenters/decidim/forms/admin/{questionnaire_answer_presenter.rb → questionnaire_response_presenter.rb}

@@ -4,15 +4,15 @@ module Decidim
   module Forms
     module Admin
       #
-      # Presenter for questionnaire answer
+      # Presenter for questionnaire response
       #
-      class QuestionnaireAnswerPresenter < SimpleDelegator
+      class QuestionnaireResponsePresenter < SimpleDelegator
         delegate :content_tag, :safe_join, :link_to, :number_to_human_size, to: :view_context
 
         include Decidim::TranslatableAttributes
 
-        def answer
-          __getobj__.fetch(:answer)
+        def response
+          __getobj__.fetch(:response)
         end
 
         def view_context
@@ -20,22 +20,22 @@ module Decidim
         end
 
         def question
-          translated_attribute(answer.question.body)
+          translated_attribute(response.question.body)
         end
 
         def body
-          return answer.body if answer.body.present?
-          return attachments if answer.attachments.any?
-          return "-" if answer.choices.empty?
+          return response.body if response.body.present?
+          return attachments if response.attachments.any?
+          return "-" if response.choices.empty?
 
-          choices = answer.choices.map do |choice|
+          choices = response.choices.map do |choice|
             {
-              answer_option_body: choice.try(:answer_option).try(:translated_body),
+              response_option_body: choice.try(:response_option).try(:translated_body),
               choice_body: body_or_custom_body(choice)
             }
           end
 
-          return choice(choices.first) if answer.question.question_type == "single_option"
+          return choice(choices.first) if response.question.question_type == "single_option"
 
           content_tag(:ul) do
             safe_join(choices.map { |c| choice(c) })
@@ -44,7 +44,7 @@ module Decidim
 
         def attachments
           content_tag(:ul) do
-            safe_join(answer.attachments.map { |a| pretty_attachment(a) })
+            safe_join(response.attachments.map { |a| pretty_attachment(a) })
           end
         end
 
@@ -57,7 +57,7 @@ module Decidim
             link_to(attachment.url, target: "_blank", rel: "noopener noreferrer") do
               content_tag(:span) do
                 translated_attribute(attachment.title).presence ||
-                  I18n.t("download_attachment", scope: "decidim.forms.questionnaire_answer_presenter")
+                  I18n.t("download_attachment", scope: "decidim.forms.questionnaire_response_presenter")
               end + " " + content_tag(:small) do
                 "#{attachment.file_type} #{number_to_human_size(attachment.file_size)}"
               end
@@ -73,9 +73,9 @@ module Decidim
         end
 
         def render_body_for(choice_hash)
-          return choice_hash[:answer_option_body] if choice_hash[:choice_body].blank?
+          return choice_hash[:response_option_body] if choice_hash[:choice_body].blank?
 
-          "#{choice_hash[:answer_option_body]} (#{choice_hash[:choice_body]})"
+          "#{choice_hash[:response_option_body]} (#{choice_hash[:choice_body]})"
         end
 
         def body_or_custom_body(choice)

data/app/presenters/decidim/forms/admin_log/question_presenter.rb

@@ -15,11 +15,11 @@ module Decidim
       class QuestionPresenter < Decidim::Log::BasePresenter
         private
 
-        # i18n-tasks-use t("decidim.forms.admin_log.question.publish_answers")
-        # i18n-tasks-use t("decidim.forms.admin_log.question.unpublish_answers")
+        # i18n-tasks-use t("decidim.forms.admin_log.question.publish_responses")
+        # i18n-tasks-use t("decidim.forms.admin_log.question.unpublish_responses")
         def action_string
           case action
-          when "publish_answers", "unpublish_answers"
+          when "publish_responses", "unpublish_responses"
             "decidim.forms.admin_log.question.#{action}"
           else
             super

data/app/presenters/decidim/forms/{answer_option_presenter.rb → response_option_presenter.rb}

@@ -3,9 +3,9 @@
 module Decidim
   module Forms
     #
-    # Decorator for answer_options
+    # Decorator for response_options
     #
-    class AnswerOptionPresenter < SimpleDelegator
+    class ResponseOptionPresenter < SimpleDelegator
       include Decidim::TranslationsHelper
 
       def translated_body

data/app/queries/decidim/forms/questionnaire_participant.rb

@@ -2,7 +2,7 @@
 
 module Decidim
   module Forms
-    # A class used to collect user answers for a questionnaire
+    # A class used to collect user responses for a questionnaire
     class QuestionnaireParticipant < Decidim::Query
       # Syntactic sugar to initialize the class and return the queried objects.
       #
@@ -23,12 +23,12 @@ module Decidim
 
       # Returns query with participant info
       def query
-        answers.select(:session_token, :decidim_user_id, :ip_hash).first
+        responses.select(:session_token, :decidim_user_id, :ip_hash).first
       end
 
-      # Finds the participant's answers.
-      def answers
-        Answer.where(questionnaire: @questionnaire, session_token: @token)
+      # Finds the participant's responses.
+      def responses
+        Response.where(questionnaire: @questionnaire, session_token: @token)
       end
     end
   end

data/app/queries/decidim/forms/questionnaire_participants.rb

@@ -2,7 +2,7 @@
 
 module Decidim
   module Forms
-    # A class used to collect user answers for a questionnaire
+    # A class used to collect user responses for a questionnaire
     class QuestionnaireParticipants < Decidim::Query
       # Syntactic sugar to initialize the class and return the queried objects.
       #
@@ -18,12 +18,12 @@ module Decidim
         @questionnaire = questionnaire
       end
 
-      # Finds all Answers for the questionnaire (unique session_tokens).
-      # Because exporters only have access to the Answers this
+      # Finds all Responses for the questionnaire (unique session_tokens).
+      # Because exporters only have access to the Responses this
       # is used as an indirect way to access the participants
       # (see #participants and #participant)
       def query
-        Answer.where(questionnaire: @questionnaire)
+        Response.where(questionnaire: @questionnaire)
       end
 
       def participant(session_token)
@@ -31,8 +31,8 @@ module Decidim
       end
 
       def participants
-        subquery = query.select("DISTINCT ON (decidim_forms_answers.session_token) decidim_forms_answers.*")
-        Answer.select("*").from(subquery).order(:created_at)
+        subquery = query.select("DISTINCT ON (decidim_forms_responses.session_token) decidim_forms_responses.*")
+        Response.select("*").from(subquery).order(:created_at)
       end
 
       def count_participants

data/app/queries/decidim/forms/questionnaire_user_responses.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Forms
+    # A class used to collect user responses for a questionnaire
+    class QuestionnaireUserResponses < Decidim::Query
+      # Syntactic sugar to initialize the class and return the queried objects.
+      #
+      # questionnaire - a Questionnaire object
+      def self.for(questionnaire)
+        new(questionnaire).query
+      end
+
+      # Initializes the class.
+      #
+      # questionnaire = a Questionnaire object
+      def initialize(questionnaire)
+        @questionnaire = questionnaire
+      end
+
+      # Finds and group responses by user for each questionnaire's question.
+      def query
+        responses = Response.not_separator
+                            .not_title_and_description
+                            .joins(:question)
+                            .where(questionnaire: @questionnaire)
+
+        responses.sort_by { |response| response.question.position.to_i }.group_by { |a| a.user || a.session_token }.values
+      end
+    end
+  end
+end

data/app/views/decidim/forms/admin/questionnaires/_display_condition.html.erb

@@ -1,13 +1,13 @@
 <% display_condition = form.object %>
 
-<div class="card questionnaire-question-display-condition">
+<div class="card questionnaire-question-display-condition m-4">
   <div class="card-divider">
     <h2 class="card-title">
     <span><%= t(".display_condition") %></span>
     <% if editable %>
-      <button class="button button__sm button__transparent-secondary small alert remove-display-condition button--title">
+      <button class="button button__xs button__transparent-secondary small alert remove-display-condition button--title">
         <%= icon("delete-bin-line") %>
-        <%= t(".remove") %>
+        <span class="hidden md:block"><%= t(".remove") %></span>
       </button>
     <% end %>
     </h2>
@@ -27,7 +27,7 @@
           options_for_select(display_condition.questions_for_select(questionnaire, question.id), selected: display_condition.decidim_condition_question_id),
           { prompt: t(".select_condition_question"), label: t(".condition_question") },
           disabled: !editable,
-          data: { url: answer_options_url(id: question.id) }
+          data: { url: response_options_url(id: question.id) }
         )
       %>
     </div>
@@ -41,14 +41,14 @@
         )
       %>
     </div>
-    <div class="row column questionnaire-question-display-condition-answer-option">
+    <div class="row column questionnaire-question-display-condition-response-option">
       <%=
         form.select(
-          :decidim_answer_option_id,
-          options_from_collection_for_select(display_condition.answer_options, :id, :translated_body, selected: display_condition.decidim_answer_option_id),
-          { prompt: t(".select_answer_option"), label: t(".answer_option") },
+          :decidim_response_option_id,
+          options_from_collection_for_select(display_condition.response_options, :id, :translated_body, selected: display_condition.decidim_response_option_id),
+          { prompt: t(".select_response_option"), label: t(".response_option") },
           disabled: !editable,
-          data: { selected: display_condition.decidim_answer_option_id }
+          data: { selected: display_condition.decidim_response_option_id }
         )
       %>
     </div>

data/app/views/decidim/forms/admin/questionnaires/_form.html.erb

@@ -5,10 +5,10 @@
         <%= form.translated :text_field, :title, autofocus: true, aria: { label: :title } %>
       </div>
       <div class="row column">
-        <%= form.translated :editor, :description, toolbar: :full, lines: 30, label: t("models.components.description", scope: "decidim.forms.admin"), aria: { label: :description } %>
+        <%= form.translated :editor, :description, toolbar: :full, lines: 8, label: t("models.components.description", scope: "decidim.forms.admin"), aria: { label: :description } %>
       </div>
       <div class="row column">
-        <%= form.translated :editor, :tos, toolbar: :content, lines: 10, label: t("models.components.tos", scope: "decidim.forms.admin"), aria: { label: :tos } %>
+        <%= form.translated :editor, :tos, toolbar: :content, lines: 8, label: t("models.components.tos", scope: "decidim.forms.admin"), aria: { label: :tos } %>
       </div>
     </div>
   </div>

data/app/views/decidim/forms/admin/questionnaires/_matrix_row.html.erb

@@ -1,13 +1,13 @@
 <% matrix_row = form.object %>
 
-<div class="card questionnaire-question-matrix-row">
+<div class="card questionnaire-question-matrix-row mt-4">
   <div class="card-divider">
     <h2 class="card-title">
     <span><%= t(".matrix_row") %></span>
     <% if editable %>
-      <button class="button button__sm button__transparent-secondary small alert remove-matrix-row button--title mb-2">
+      <button class="button button__xs button__transparent-secondary small alert remove-matrix-row button--title mb-2">
         <%= icon("delete-bin-line") %>
-        <%= t(".remove") %>
+        <span class="hidden md:block"><%= t(".remove") %></span>
       </button>
     <% end %>
     </h2>

data/app/views/decidim/forms/admin/questionnaires/_question.html.erb

@@ -1,7 +1,7 @@
 <% question = form.object %>
 <% is_expanded = question.errors.any? %>
 <div class="card questionnaire-question" id="accordion-<%= id %>-field">
-  <div class="form__wrapper" data-component="accordion">
+  <div class="form__wrapper" data-controller="accordion">
     <div class="card-divider">
       <h2 class="card-title flex items-center">
         <span>
@@ -23,16 +23,26 @@
           </button>
 
           <% if editable %>
+            <button class="button button__xs button__transparent-secondary small alert move-up-question button--title">
+              <%= icon("arrow-up-line") %>
+              <span class="hidden md:block"><%= t(".up") %></span>
+            </button>
+
+            <button class="button button__xs button__transparent-secondary small alert move-down-question button--title">
+              <%= icon("arrow-down-line") %>
+              <span class="hidden md:block"><%= t(".down") %></span>
+            </button>
+
             <button class="button button__xs button__transparent-secondary small alert remove-question button--title">
               <%= icon("delete-bin-line") %>
-              <%= t(".remove") %>
+              <span class="hidden md:block"><%= t(".remove") %></span>
             </button>
           <% end %>
           </span>
       </h2>
     </div>
 
-    <div id="panel-<%= id %>-question-card" class="panel-question-card card-section collapsible <%= "panel-error" if is_expanded %>">
+    <div id="panel-<%= id %>-question-card" class="panel-question-card card-section collapsible <%= "panel-error" if is_expanded %>" aria-hidden="<%= is_expanded ? "false" : "true" %>">
       <div class="row column">
         <%=
           form.translated(
@@ -108,23 +118,23 @@
           </div>
 
           <% if editable %>
-            <button class="button button__sm button__secondary add-matrix-row"><%= t(".add_matrix_row") %></button>
+            <button class="button button__xs button__transparent-secondary mt-4 add-matrix-row"><%= t(".add_matrix_row") %></button>
           <% end %>
         </div>
       </div>
 
-      <div class="questionnaire-question-answer-options" data-template="<%= answer_option_template_selector %>">
-        <div class="questionnaire-question-answer-options-list">
-          <% question.answer_options.each do |answer_option| %>
-            <%= fields_for "questions[questions][#{question.to_param}][answer_options][]", answer_option do |answer_option_form| %>
-              <%= render "decidim/forms/admin/questionnaires/answer_option", form: answer_option_form, question:, editable: %>
+      <div class="questionnaire-question-response-options" data-template="<%= response_option_template_selector %>">
+        <div class="questionnaire-question-response-options-list">
+          <% question.response_options.each do |response_option| %>
+            <%= fields_for "questions[questions][#{question.to_param}][response_options][]", response_option do |response_option_form| %>
+              <%= render "decidim/forms/admin/questionnaires/response_option", form: response_option_form, question:, editable: %>
             <% end %>
           <% end %>
         </div>
 
         <% if editable %>
           <div class="row column">
-            <button type="button" class="button button__sm button__secondary mt-4 add-answer-option"><%= t(".add_answer_option") %></button>
+            <button type="button" class="button button__xs button__transparent-secondary mt-4 add-response-option"><%= t(".add_response_option") %></button>
           </div>
         <% end %>
       </div>
@@ -152,7 +162,7 @@
         <% if editable %>
           <% disabled = !question.persisted? %>
           <div class="row column">
-            <button <%= "disabled" if disabled %> title="<%= disabled ? t(".add_display_condition_info") : t(".add_display_condition_info") %>" class="button button__sm button__secondary mt-4 add-display-condition"><%= t(".add_display_condition") %></button>
+            <button <%= "disabled" if disabled %> title="<%= disabled ? t(".add_display_condition_info") : t(".add_display_condition_info") %>" class="button button__xs button__transparent-secondary mt-4 add-display-condition"><%= t(".add_display_condition") %></button>
           </div>
         <% end %>
       </div>

data/app/views/decidim/forms/admin/questionnaires/_questions_form.html.erb

@@ -1,11 +1,12 @@
 <div class="questionnaire-questions form__wrapper">
-  <div class="row column text-center my-4">
-    <button type="button" class="button button__sm button__secondary collapse-all"><%= t(".collapse") %></button>
-    <button type="button" class="button button__sm button__secondary expand-all"><%= t(".expand") %></button>
+  <div class="row column text-right my-4">
+    <button type="button" class="button button__sm button__text-secondary collapse-all"><%= t(".collapse") %></button>
+    |
+    <button type="button" class="button button__sm button__text-secondary expand-all"><%= t(".expand") %></button>
   </div>
 
   <% if questionnaire.questions_editable? %>
-    <% if questionnaire.answers.any? && !questionnaire.published? %>
+    <% if questionnaire.responses.any? && !questionnaire.published? %>
       <%= cell("decidim/announcement", t(".unpublished_warning"), callout_class: "warning" ) %>
     <% end %>
 
@@ -15,7 +16,7 @@
                    form: question_form,
                    id: tabs_id_for_question(blank_question),
                    editable: questionnaire.questions_editable?,
-                   answer_option_template_selector: "#answer-option-template-dummy",
+                   response_option_template_selector: "#response-option-template-dummy",
                    display_condition_template_selector: "#display-condition-template-dummy",
                    matrix_row_template_selector: "#matrix-row-template-dummy" %>
       </script>
@@ -31,15 +32,15 @@
                    id: tabs_id_for_question(blank_question),
                    editable: questionnaire.questions_editable? %>
       </script>
-      <%= render "decidim/forms/admin/questionnaires/answer_option_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "answer-option-template-dummy" %>
+      <%= render "decidim/forms/admin/questionnaires/response_option_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "response-option-template-dummy" %>
       <%= render "decidim/forms/admin/questionnaires/display_condition_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "display-condition-template-dummy" %>
       <%= render "decidim/forms/admin/questionnaires/matrix_row_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "matrix-row-template-dummy" %>
     <% end %>
   <% else %>
-    <%= cell("decidim/announcement", t(".already_answered_warning"), callout_class: "warning" ) %>
+    <%= cell("decidim/announcement", t(".already_responded_warning"), callout_class: "warning" ) %>
   <% end %>
 
-  <div class="questionnaire-questions-list flex flex-col py-6 gap-6 last:pb-0" data-draggable-table data-sort-url="#" id="questionnaire-questions-list">
+  <div class="questionnaire-questions-list flex flex-col py-6 gap-6 last:pb-0">
     <% @form.questions.each_with_index do |question, index| %>
       <%= fields_for "questions[questions][]", question do |question_form| %>
         <% if question.separator? %>
@@ -58,10 +59,10 @@
                      id: tabs_id_for_question(question),
                      editable: questionnaire.questions_editable?,
                      display_condition_template_selector: "#display-condition-template-#{index}",
-                     answer_option_template_selector: "#answer-option-template-#{index}",
+                     response_option_template_selector: "#response-option-template-#{index}",
                      matrix_row_template_selector: "#matrix-row-template-#{index}" %>
           <%= render "decidim/forms/admin/questionnaires/display_condition_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "display-condition-template-#{index}" %>
-          <%= render "decidim/forms/admin/questionnaires/answer_option_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "answer-option-template-#{index}" %>
+          <%= render "decidim/forms/admin/questionnaires/response_option_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "response-option-template-#{index}" %>
           <%= render "decidim/forms/admin/questionnaires/matrix_row_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "matrix-row-template-#{index}" %>
         <% end %>
       <% end %>
@@ -72,38 +73,9 @@
 <%= append_javascript_pack_tag "decidim_forms_admin" %>
 
 <% if questionnaire.questions_editable? %>
-   <script>
-    document.addEventListener("DOMContentLoaded", function () {
+  <script>
+    document.addEventListener("turbo:load", function () {
       window.Decidim.createEditableForm();
-
-      // Function to initialize the sortable functionality
-      function initializeSortable() {
-        const container = document.querySelector("#questionnaire-questions-list");
-        const questionCards = container?.querySelectorAll(".card.questionnaire-question");
-
-        if (!container || !questionCards?.length) return;
-
-        questionCards.forEach(card => {
-          card.setAttribute("draggable", "true");
-          card.setAttribute("role", "option");
-          card.setAttribute("aria-grabbed", "false");
-        });
-
-        window.Decidim?.createSortableList?.("#questionnaire-questions-list");
-      }
-
-      // Initialize on load and when new options such as questions etc are added
-      initializeSortable();
-
-      const observer = new MutationObserver(() => {
-        clearTimeout(observer.timer);
-        observer.timer = setTimeout(initializeSortable, 500);
-      });
-
-      const container = document.querySelector("#questionnaire-questions-list");
-      if (container) {
-        observer.observe(container, { childList: true, subtree: true });
-      }
     });
   </script>
 <% end %>

data/app/views/decidim/forms/admin/questionnaires/{_answer_option.html.erb → _response_option.html.erb}

@@ -1,13 +1,13 @@
-<% answer_option = form.object %>
+<% response_option = form.object %>
 
-<div class="card questionnaire-question-answer-option">
+<div class="card questionnaire-question-response-option m-4">
   <div class="card-divider">
     <h2 class="card-title">
-    <span><%= t(".answer_option") %></span>
+    <span><%= t(".response_option") %></span>
     <% if editable %>
-      <button class="button button__sm button__transparent-secondary small alert remove-answer-option button--title mb-2">
+      <button class="button button__xs button__transparent-secondary small alert remove-response-option button--title mb-2">
         <%= icon("delete-bin-line") %>
-        <%= t(".remove") %>
+        <span class="hidden md:block"><%= t(".remove") %></span>
       </button>
     <% end %>
     </h2>
@@ -19,7 +19,7 @@
         form.translated(
           :text_field,
           :body,
-          tabs_id: tabs_id_for_question_answer_option(question, answer_option),
+          tabs_id: tabs_id_for_question_response_option(question, response_option),
           label: t(".statement"),
           disabled: !editable
         )
@@ -37,7 +37,7 @@
     </div>
   </div>
 
-  <% if answer_option.persisted? %>
+  <% if response_option.persisted? %>
     <%= form.hidden_field :id, disabled: !editable %>
   <% end %>
 

data/app/views/decidim/forms/admin/questionnaires/_response_option_template.html.erb

@@ -0,0 +1,7 @@
+<% question = form.object %>
+
+<script type="text/template" class="decidim-response-option-template decidim-template" id="<%= template_id %>">
+  <%= fields_for "questions[questions][#{question.to_param}][response_options][]", blank_response_option do |response_option_form| %>
+    <%= render "decidim/forms/admin/questionnaires/response_option", form: response_option_form, question:, editable: %>
+  <% end %>
+</script>