Se sustituye input tipo numero por radios para tamaño de escala

tecnicas/forms/sesion_basic_form.py

@@ -5,6 +5,9 @@ from ..models import EstiloPalabra
 
 
 class SesionBasicForm(forms.Form):
+    sizes_structure = [5, 7, 9]
+    sizes_continue = [9, 13, 15]
+
     id_tecnica = forms.IntegerField(widget=forms.HiddenInput())
 
     nombre_sesion = forms.CharField(max_length=255, widget=forms.TextInput(attrs={
@@ -28,10 +31,6 @@ class SesionBasicForm(forms.Form):
         "placeholder": "Solo números"
     }), required=True)
 
-    tamano_escala = forms.IntegerField(widget=forms.NumberInput(attrs={
-        "class": "bg-surface-ligt p-1 border-b-1 text-center w-full",
-    }), required=True, min_value=5)
-
     instrucciones = forms.CharField(max_length=255, widget=forms.TextInput(attrs={
         "class": "bg-surface-ligt border-b-1 text-center w-full p-1",
         "placeholder": "Este campo es opcional"
@@ -41,23 +40,23 @@ class SesionBasicForm(forms.Form):
         super().__init__(*args, **kwargs)
 
         self.fields['estilo_palabras'] = forms.ModelChoiceField(queryset=EstiloPalabra.objects.all(), widget=forms.RadioSelect(attrs={
-        "class": "uppercase text-lg tracking-wider font-medium p-2 px-4 active:px-5 transition-all rounded-xl bg-blue-500 text-white",
+            "class": "uppercase text-lg tracking-wider font-medium p-2 px-4 active:px-5 transition-all rounded-xl bg-blue-500 text-white",
         }), required=True, initial=EstiloPalabra.objects.first())
 
         self.fields['tipo_escala'] = forms.ModelChoiceField(queryset=TipoEscala.objects.all(), widget=forms.RadioSelect(attrs={
             "class": "uppercase text-lg tracking-wider font-medium p-2 px-4 active:px-5 transition-all rounded-xl bg-blue-500 text-white",
         }), required=True, initial=TipoEscala.objects.first())
 
+        self.fields['tamano_escala'] = forms.IntegerField(widget=forms.HiddenInput(attrs={
+            "class": "cts-size-input",
+        }), required=True, min_value=5)
+
         if id_tecnica_new != 0:
             self.fields['id_tecnica'] = forms.IntegerField(
                 initial=id_tecnica_new, widget=forms.HiddenInput())
 
     def clean(self):
         data_clean = super().clean()
-
-        sizes_estruturada = [5, 7, 9]
-        sizes_continua = [9, 12, 15]
-
         escala = data_clean.get("tipo_escala")
 
         if escala and not isinstance(escala, TipoEscala):
@@ -70,9 +69,9 @@ class SesionBasicForm(forms.Form):
 
         tamano_escala = data_clean.get("tamano_escala")
 
-        if escala.nombre_escala == "estructurada" and not sizes_estruturada.__contains__(tamano_escala):
+        if escala.nombre_escala == "estructurada" and not self.sizes_structure.__contains__(tamano_escala):
             self.add_error("tamano_escala", "El tamaño de la escala no aplica")
-        elif escala.nombre_escala == "continua" and not sizes_continua.__contains__(tamano_escala):
+        elif escala.nombre_escala == "continua" and not self.sizes_continue.__contains__(tamano_escala):
             self.add_error("tamano_escala", "El tamaño de la escala no aplica")
 
         id_tecnica = data_clean.get("id_tecnica")

tecnicas/static/js/panel-basic.js

@@ -1,6 +1,6 @@
 const descriptons = {
-  estructurada: ["Establece número de segmentos:", "Puede ser 5, 7 o 9"],
-  continua: ["Establece la longitud de la escala:", "Puede ser 9, 12 o 15"],
+  estructurada: "Establece número de segmentos:",
+  continua: "Establece la longitud de la escala:",
   atributos:
     "Con el estilo atributos elijes las palabras para evaluar los productos",
   vocabulario:
@@ -12,6 +12,11 @@ let inputTamano;
 
 let inputsStyle;
 let helpStyle;
+let sizeOptionsContainer;
+const SIZE_OPTIONS = {
+  estructurada: [5, 7, 9],
+  continua: [9, 13, 15],
+};
 
 initPanel();
 
@@ -22,6 +27,7 @@ function initPanel() {
 function initRadios() {
   inputsScale = document.getElementsByName("tipo_escala");
   inputTamano = document.getElementsByName("tamano_escala").item(0);
+  sizeOptionsContainer = document.getElementsByClassName("cts-options-size-scale")[0];
 
   for (let index = 0; index < inputsScale.length; index++) {
     let parent = inputsScale.item(index).parentElement;
@@ -46,6 +52,73 @@ function initRadios() {
       showDescriptionStyle(parent);
     }
   }
+
+  initSizeOptions();
+}
+
+function initSizeOptions() {
+  for (let i = 0; i < inputsScale.length; i++) {
+    const radio = inputsScale.item(i);
+    radio.addEventListener('change', () => {
+      const tag = getTagFromLabel(radio);
+      populateSizeOptions(tag);
+    });
+    if (radio.checked) {
+      const tag = getTagFromLabel(radio);
+      populateSizeOptions(tag);
+    }
+  }
+
+  const form = document.querySelector('form');
+  if (!form) return;
+
+  form.addEventListener('submit', (e) => {
+    const chosen = document.querySelector('input[name="option_size_scale"]:checked');
+    if (chosen && inputTamano) {
+      inputTamano.value = chosen.value;
+    }
+
+    if (sizeOptionsContainer) {
+      const toRemove = sizeOptionsContainer.querySelectorAll('input[name="option_size_scale"]');
+      toRemove.forEach((el) => el.remove());
+    }
+  });
+}
+
+function getTagFromLabel(radio) {
+  try {
+    const parent = radio.parentElement;
+    if (!parent) return '';
+    const text = parent.textContent || '';
+    return text.trim().split(/\s+/)[0].toLowerCase();
+  } catch (err) {
+    return '';
+  }
+}
+
+function populateSizeOptions(tag) {
+  const options = SIZE_OPTIONS[tag] || SIZE_OPTIONS['estructurada'];
+  if (!sizeOptionsContainer) return;
+  sizeOptionsContainer.innerHTML = '';
+
+  options.forEach((val) => {
+    const label = document.createElement('label');
+    label.className = 'flex flex-col items-center cursor-pointer';
+
+    const input = document.createElement('input');
+    input.type = 'radio';
+    input.name = 'option_size_scale';
+    input.value = String(val);
+    input.className = 'radio radio-lg checked:bg-pink-500';
+
+    const span = document.createElement('span');
+    span.className = 'mt-2 text-xl text-gray-700 font-medium';
+    span.textContent = String(val);
+
+    label.appendChild(input);
+    label.appendChild(span);
+    sizeOptionsContainer.appendChild(label);
+  });
 }
 
 function showDescriptionStyle(label) {
@@ -56,6 +129,5 @@ function showDescriptionStyle(label) {
 function showDescriptionTamanoScale(label) {
   const text = label.textContent.trim();
   let parent = inputTamano.parentElement;
-  parent.getElementsByTagName("p")[0].textContent = descriptons[text][0];
-  inputTamano.placeholder = descriptons[text][1];
+  parent.getElementsByTagName("p")[0].textContent = descriptons[text];
 }

tecnicas/templates/tecnicas/create_sesion/configuracion-panel-basic.html

@@ -93,6 +93,20 @@
                         <p>Establece número de segmentos:</p>
                         {{ form_sesion.tamano_escala }}
                     </label>
+                    <div class="flex justify-around max-sm:flex-col gap-8 cts-options-size-scale">
+                        <label class="flex flex-col items-center cursor-pointer">
+                            <input type="radio" name="option_size_scale" value="5" class="radio radio-lg checked:bg-pink-500" />
+                            <span class="mt-2 text-xl text-gray-700 font-medium">5</span>
+                        </label>
+                        <label class="flex flex-col items-center cursor-pointer">
+                            <input type="radio" name="option_size_scale" value="7" class="radio radio-lg checked:bg-pink-500" />
+                            <span class="mt-2 text-xl text-gray-700 font-medium">7</span>
+                        </label>
+                        <label class="flex flex-col items-center cursor-pointer">
+                            <input type="radio" name="option_size_scale" value="9" class="radio radio-lg checked:bg-pink-500" />
+                            <span class="mt-2 text-xl text-gray-700 font-medium">9</span>
+                        </label>
+                    </div>
                     {% if form_sesion.tamano_escala.errors %}
                     <article
                         class="w-fit rounded px-2 py-0.5 text-center text-white text-sm font-medium tracking-wide bg-red-500">