Se agrega boton para continuar con la siguinte palabra a calificar (convencional)

tecnicas/static/js/created-scale.js

@@ -1,3 +1,22 @@
+const BTN_CLASS_STYLE = [
+  "text-lg",
+  "tracking-wider",
+  "font-medium",
+  "p-2",
+  "px-4",
+  "border-b-2",
+  "active:border-b-0",
+  "active:border-t-2",
+  "active:border-blue-500",
+  "border-blue-800",
+  "transition-all",
+  "rounded-xl",
+  "bg-blue-500",
+  "text-white",
+  "w-fit",
+  "disabled:bg-amber-600",
+];
+
 function checkSendRating(word) {
   const btnCheck = document.querySelector(`.ct-btn-check-${word}`);
   const btnSend = document.querySelector(`.ct-btn-submit-${word}`);
@@ -19,6 +38,9 @@ function cancelSendRating(word) {
 }
 
 async function sendRating(word) {
+  const containerBtn = document.querySelector(`.actions-${word}`);
+  addOrRemoveWaitSpin(containerBtn);
+
   const formRatingWord = document.querySelector(`.form-rating-${word}`);
 
   const dataForm = new FormData(formRatingWord);
@@ -38,12 +60,14 @@ async function sendRating(word) {
     const jsonResponse = await respone.json();
 
     if (jsonResponse.error) {
-      console.log(jsonResponse.error);
+      addOrRemoveWaitSpin(containerBtn, false, jsonResponse.error);
       return;
     }
 
-    console.log(jsonResponse);
     remplaceForm(formRatingWord, jsonResponse.message);
+    if (isEndedRatingWords()) {
+      addBtnNextWord();
+    }
   } catch (error) {
     console.log("Error:", error);
   }
@@ -54,8 +78,8 @@ function remplaceForm(oldForm, message) {
   const thankYouMessage = document.createElement("p");
   const messageResponse = document.createElement("p");
 
-  thankYouMessage.textContent =
-    "Palabra calificada, gracias por la participación";
+  thankYouMessage.innerHTML =
+    "Palabra calificada,<br>gracias por la participación";
   messageResponse.textContent = message;
 
   articleContainer.classList.add(
@@ -72,3 +96,112 @@ function remplaceForm(oldForm, message) {
   articleContainer.appendChild(messageResponse);
   oldForm.replaceWith(articleContainer);
 }
+
+function addBtnNextWord() {
+  const thankYouMessage = document.createElement("p");
+  thankYouMessage.textContent = "Has finalizado con este producto";
+  thankYouMessage.classList.add("text-2xl", "font-bold", "mb-3");
+
+  const btnNesxtWord = document.createElement("button");
+  btnNesxtWord.classList.add(...BTN_CLASS_STYLE, "ct-btn-next-word");
+  btnNesxtWord.textContent = "Siguiente palabra";
+  btnNesxtWord.addEventListener("click", nextWord);
+
+  const articleContainer = document.createElement("article");
+  articleContainer.classList.add(
+    "bg-gray-200",
+    "p-6",
+    "rounded-lg",
+    "mb-3",
+    "text-center"
+  );
+
+  articleContainer.appendChild(thankYouMessage);
+  articleContainer.appendChild(btnNesxtWord);
+
+  const scalesContainer = document.querySelector(".scales-container");
+  scalesContainer.innerHTML = "";
+  scalesContainer.appendChild(articleContainer);
+}
+
+function isEndedRatingWords() {
+  const currentNumerWords = document.querySelectorAll(
+    'form[class*="form-rating-"]'
+  ).length;
+
+  return !currentNumerWords;
+}
+
+/**
+ *
+ * @param {Event} e
+ */
+function nextWord(e) {
+  location.reload();
+}
+
+function createSpinCharge() {
+  const divSpin = document.createElement("div");
+
+  divSpin.classList.add(
+    "w-10",
+    "h-10",
+    "rounded-full",
+    "border-4",
+    "border-t-4",
+    "border-gray-200",
+    "border-t-blue-600",
+    "animate-spin"
+  );
+
+  return divSpin;
+}
+
+/**
+ *
+ * @param {Element} containerBtn
+ */
+function addOrRemoveWaitSpin(containerBtn, render = true, error = false) {
+  const actions = containerBtn.querySelector(`.btns-container`);
+
+  if (render) {
+    containerBtn.innerHTML = "";
+    const spin = createSpinCharge();
+    actions.classList.add("hidden");
+    containerBtn.appendChild(spin);
+    containerBtn.appendChild(actions);
+    containerBtn.classList.remove("items-end");
+    containerBtn.classList.add("items-center");
+  }
+
+  if (!render) {
+    containerBtn.innerHTML = "";
+
+    if (error) {
+      containerBtn.appendChild(createErrorSubmit(error));
+    }
+
+    containerBtn.append(actions);
+    actions.classList.remove("hidden");
+    containerBtn.classList.remove("items-center");
+    containerBtn.classList.add("items-end");
+  }
+}
+
+function createErrorSubmit(errorMessage) {
+  const containerError = document.createElement("div");
+  containerError.classList.add(
+    "w-full",
+    "p-2",
+    "bg-red-400",
+    "font-bold",
+    "text-center",
+    "rounded-lg"
+  );
+
+  const errorP = document.createElement("p");
+  errorP.textContent = errorMessage;
+
+  containerError.appendChild(errorP);
+  return containerError;
+}

tecnicas/templates/tecnicas/forms_tester/convencional.html

@@ -81,23 +81,33 @@
             </div>
         </article>
 
-        <article class="rounded grid grid-cols-2 max-sm:grid-cols-1 gap-4">
-            <section class="flex flex-col items-center justify-center bg-gray-200 p-2 rounded-lg">
+        <article class="rounded flex flex-col gap-4">
+            <section class="flex items-center justify-center bg-gray-200 p-2 rounded-lg">
                 <p class="text-lg font-medium text-center">
                     {{ session.tecnica.instrucciones }}
                 </p>
             </section>
-            <section class="flex flex-col items-center justify-center bg-gray-200 p-2 rounded-lg">
-                <p class="text-lg font-bold text-center">
-                    Producto:
-                </p>
-                <p class="text-2xl font-bold text-center">
-                    {{ product }}
-                </p>
+            <section class="flex items-center justify-center flex-wrap gap-4">
+                <div class="bg-gray-200 p-2 rounded-lg flex-1">
+                    <p class="text-lg font-bold text-center">
+                        Producto:
+                    </p>
+                    <p class="text-2xl font-bold text-center">
+                        {{ product }}
+                    </p>
+                </div>
+                <div class="bg-gray-200 p-2 rounded-lg flex-1">
+                    <p class="text-lg font-bold text-center">
+                        Repetición:
+                    </p>
+                    <p class="text-2xl font-bold text-center">
+                        {{ session.tecnica.repecion }}
+                    </p>
+                </div>
             </section>
         </article>
 
-        <article class="scale-continue-container [&>*:not(:last-child)]:mb-5 flex flex-col items-center justify-center">
+        <article class="scales-container [&>*:not(:last-child)]:mb-5 flex flex-col items-center justify-center">
             {% if type_scale == "continua" %}
             {% for word in words %}
             <form action="" method="post" class="form-rating-{{word}}">
@@ -125,29 +135,39 @@
                         </div>
 
                         <div class="flex justify-between mt-4">
-                            {% for tag in tags %}
                             <div class="flex flex-col items-start text-left w-[100px]">
-                                <span class="text-xs     font-medium text-gray-700 break-words first-letter:capitalize">
-                                    {{ tag.id_etiqueta }}
+                                <span class="text-xs font-medium text-gray-700 break-words first-letter:capitalize">
+                                    {{ tags.0.id_etiqueta }}
+                                </span>
+                            </div>
+                            <div class="flex flex-col items-start text-center w-[100px]">
+                                <span class="text-xs font-medium text-gray-700 break-words first-letter:capitalize">
+                                    {{ tags.1.id_etiqueta }}
+                                </span>
+                            </div>
+                            <div class="flex flex-col items-start text-right w-[100px]">
+                                <span class="text-xs font-medium text-gray-700 break-words first-letter:capitalize">
+                                    {{ tags.2.id_etiqueta }}
                                 </span>
                             </div>
-                            {% endfor %}
                         </div>
                     </section>
                 </article>
-                <article class="flex justify-end gap-2">
-                    <button type="button" onclick="checkSendRating('{{word}}')"
-                        class="ct-btn-check-{{word}} text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-blue-500 border-blue-800  transition-all rounded-xl bg-blue-500 text-white w-fit disabled:bg-amber-600">
-                        ¿Guardar calificación?
-                    </button>
-                    <button type="button" onclick="sendRating('{{word}}')"
-                        class="ct-btn-submit-{{word}} text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-green-500 border-green-800  transition-all rounded-xl bg-green-500 text-white w-fit disabled:bg-amber-600 hidden">
-                        Estoy seguro
-                    </button>
-                    <button type="button" onclick="cancelSendRating('{{word}}')"
-                        class="ct-btn-cancel-{{word}} text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-orange-500 border-orange-800  transition-all rounded-xl bg-orange-500 text-white w-fit disabled:bg-amber-600 hidden">
-                        Cancelar
-                    </button>
+                <article class="flex flex-col justify-center gap-2 items-end actions-{{word}}">
+                    <section class="flex justify-end items-center gap-2 btns-container">
+                        <button type="button" onclick="checkSendRating('{{word}}')"
+                            class="ct-btn-check-{{word}} text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-blue-500 border-blue-800  transition-all rounded-xl bg-blue-500 text-white w-fit disabled:bg-amber-600">
+                            ¿Guardar calificación?
+                        </button>
+                        <button type="button" onclick="sendRating('{{word}}')"
+                            class="ct-btn-submit-{{word}} text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-green-500 border-green-800  transition-all rounded-xl bg-green-500 text-white w-fit disabled:bg-amber-600 hidden">
+                            Estoy seguro
+                        </button>
+                        <button type="button" onclick="cancelSendRating('{{word}}')"
+                            class="ct-btn-cancel-{{word}} text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-orange-500 border-orange-800  transition-all rounded-xl bg-orange-500 text-white w-fit disabled:bg-amber-600 hidden">
+                            Cancelar
+                        </button>
+                    </section>
                 </article>
             </form>
             {% endfor %}

tecnicas/views/tester_forms/convencional_scales.py

@@ -46,7 +46,7 @@ from ...controllers import SesionController, PosicionController, CalificacionCon
     - Cada palabra debe contar con su input segun el tipo
     - Para cada input se debe poder guardar la calificacion
     - Anstes de guardar la calificacion preguntar por la confirmacion a la hora de guardar el dato
-    - Especficar las etiquetas por debajo del input de ripo ranto
+    - Especficar las etiquetas por debajo del input de ripo rango
         - Para las escalas de tipo continua
             - La longitud de la barra de la escala debe ser igual al tamaño que se especifico en la configuracion
             - Contar con un input de tipo range
@@ -57,7 +57,7 @@ from ...controllers import SesionController, PosicionController, CalificacionCon
             - Su longitud sera tan largo como el contendor que lo aloja
             - La barra se divide segun el numero de etiquetas que estas posean
             - Cata longitud debe poser una marca y solo estas seran las unicas posibles respuestas
-            - Cata segmento en el que se dibide debe tener la etiqueda correspondiente por debaj
+            - Cata segmento en el que se divide debe tener la etiqueda correspondiente por debajo
 '''