Refactor assessment system: rename v2 JSON files, update CLI script, add TUI interface, modify Markdown to hide correct answers in collapsible sections, adjust employee number inputs to text type

questions/formbricks/Form_requirements.md

@@ -489,3 +489,95 @@ Este error ocurre cuando los campos de texto no tienen el formato correcto de ob
 
 ### Solución
 Ejecuta el script `formbricks_assitant.py` - maneja automáticamente la conversión de formato.
+
+## Carga y Visualización de Encuestas
+
+Para responder a consultas sobre Formbricks, es importante distinguir entre obtener los datos (API) y mostrar la encuesta (Renderizado).
+
+### ¿Cuál es la forma correcta de cargar encuestas?
+
+Aunque mencionas la REST API, la forma estándar y recomendada para cargar encuestas en una aplicación web no es llamando manualmente a los endpoints REST, sino utilizando el SDK de Formbricks (@formbricks/js).
+
+El SDK se encarga automáticamente de llamar a la API correcta (Client API), verificar si el usuario debe ver una encuesta (basado en triggers) y renderizar la interfaz.
+
+**Código de inicialización estándar (SDK):**
+
+```javascript
+import formbricks from "@formbricks/js";
+
+if (typeof window !== "undefined") {
+  formbricks.init({
+    environmentId: "TU_ENV_ID",
+    apiHost: "https://app.formbricks.com", // O tu propia URL si usas self-hosting
+    userId: "ID_DEL_USUARIO", // Opcional: para identificar al usuario
+  });
+}
+```
+
+Si realmente necesitas usar la REST API manual:
+Si tu caso de uso es muy personalizado (ej. un backend propio que sirve encuestas), tendrías que llamar al endpoint de Displays para saber qué encuesta mostrar:
+
+- **Endpoint**: POST /api/v1/client/displays
+- **Respuesta**: Te devuelve el objeto de la encuesta (preguntas, lógica y estilos).
+
+**Desventaja**: Tendrás que construir tú mismo todo el HTML y la lógica del formulario basándote en ese JSON.
+
+### ¿Es posible definir el color principal y usar otros backgrounds?
+
+Sí, es totalmente posible. Tienes dos caminos principales para lograrlo:
+
+**Opción A: Sobrescribir estilos vía CSS (Recomendado para desarrolladores)**
+
+Esta es la forma más flexible si usas el SDK. Formbricks utiliza variables CSS que puedes redefinir en tu hoja de estilos global (globals.css o similar) para forzar tus colores y fondos sin importar lo que diga la configuración de la encuesta.
+
+Añade esto a tu CSS:
+
+```css
+:root {
+  /* Color principal (botones, bordes activos, etc.) */
+  --fb-brand-color: #ff5733;
+
+  /* Color del texto sobre el color principal */
+  --fb-brand-text-color: #ffffff;
+
+  /* Fondo de la tarjeta de la encuesta */
+  --fb-card-bg: #ffffff;
+
+  /* Fondo general (detrás de la tarjeta en encuestas de enlace o modales) */
+  --fb-survey-background-color: #f0f0f0;
+
+  /* Bordes */
+  --fb-border-color: #e2e8f0;
+}
+```
+
+Al definir estas variables en tu proyecto, el SDK de Formbricks las usará automáticamente.
+
+**Opción B: Definirlo en la configuración de la encuesta (UI o API)**
+
+Si prefieres que el estilo venga definido desde la base de datos de Formbricks:
+
+- **Desde la Interfaz (UI)**: Ve a la pestaña "Styling" (o "Look & Feel") dentro del editor de tu encuesta. Ahí puedes definir el Brand Color y el Background Styling (puedes subir una imagen, usar un degradado o un color sólido).
+
+- **Desde la API (Payload)**: Si estás creando la encuesta programáticamente (POST /api/v1/management/surveys), el objeto JSON de la encuesta incluye una propiedad `styling`. Puedes enviarla así:
+
+```json
+{
+  "name": "Mi Encuesta",
+  "styling": {
+    "brandColor": "#ff5733",
+    "cardBackgroundColor": "#ffffff",
+    "cardBorderColor": "#e2e8f0",
+    "background": {
+       "bg": "#f0f0f0", // Color de fondo sólido
+       "bgType": "color" // o "image" / "animation"
+    }
+  },
+  "questions": [...]
+}
+```
+
+**Resumen**
+
+- **Carga**: Usa el SDK (`formbricks.init`) para la integración más fácil. Usa la API REST solo si vas a construir tu propia interfaz de usuario desde cero.
+- **Estilos**: La forma más robusta de "definir" el color es usando las variables CSS (`--fb-brand-color`) en tu sitio web. Esto asegura que la encuesta siempre coincida con tu marca, independientemente de la configuración individual de la encuesta.

questions/formbricks/advanced_formbricks.json

@@ -28,7 +28,7 @@
         "default": ""
       },
       "required": true,
-      "inputType": "text",
+       "inputType": "text",
       "placeholder": {
         "default": "Ingresa tu número de empleado"
       },

questions/formbricks/basic_formbricks.json

@@ -28,7 +28,7 @@
         "default": ""
       },
       "required": true,
-      "inputType": "text",
+       "inputType": "text",
       "placeholder": {
         "default": "Ingresa tu número de empleado"
       },

questions/formbricks/formbricks_assitant.py

@@ -39,9 +39,9 @@ if not all([BASEURL, API_KEY, ENV_ID]):
 
 LEVEL_FILE_MAP = {
     "0": "funnel_registration_formbricks.json",
-    "1": "basic_v2_formbricks.json",
-    "2": "medium_v2_formbricks.json",
-    "3": "advanced_v2_formbricks.json",
+    "1": "basic_formbricks.json",
+    "2": "medium_formbricks.json",
+    "3": "advanced_formbricks.json",
 }
 
 
@@ -93,6 +93,34 @@ def main():
     start_date = Prompt.ask("📅 Fecha inicio (YYYY-MM-DD o vacío)", default="")
     end_date = Prompt.ask("📅 Fecha término (YYYY-MM-DD o vacío)", default="")
 
+    # ───────── Styling ─────────
+    console.print(
+        Panel(
+            "🎨 Configuración de colores (opcional - presiona Enter para usar defaults)",
+            border_style=COLORS["blue"],
+        )
+    )
+    brand_color = Prompt.ask(
+        "🎨 Color principal (brand color, ej: #ff5733)", default="#ff5733"
+    )
+    card_bg = Prompt.ask(
+        "🎨 Fondo de tarjeta (card background, ej: #ffffff)", default="#ffffff"
+    )
+    survey_bg = Prompt.ask(
+        "🎨 Fondo general (survey background, ej: #f0f0f0)", default="#f0f0f0"
+    )
+    border_color = Prompt.ask(
+        "🎨 Color de bordes (border color, ej: #e2e8f0)", default="#e2e8f0"
+    )
+
+    # Build styling object
+    styling = {
+        "brandColor": {"light": brand_color, "dark": brand_color},
+        "cardBackgroundColor": {"light": card_bg, "dark": card_bg},
+        "cardBorderColor": {"light": border_color, "dark": border_color},
+        "surveyBackground": {"bg": survey_bg, "bgType": "color"},
+    }
+
     file_name = LEVEL_FILE_MAP[level]
 
     with open(file_name, "r", encoding="utf-8") as f:
@@ -138,6 +166,7 @@ def main():
         payload["welcomeCard"] = welcome_card
     if endings:
         payload["endings"] = endings
+    payload["styling"] = styling
 
     headers = {
         "Content-Type": "application/json",
@@ -158,6 +187,12 @@ def main():
         console.print(
             Panel("✅ Encuesta creada correctamente", border_style=COLORS["green"])
         )
+        console.print(
+            Panel(
+                "💡 Para integración con SDK: Revisa styles.css para variables CSS opcionales",
+                border_style=COLORS["yellow"],
+            )
+        )
     else:
         console.print(Panel("❌ Error al crear encuesta", border_style=COLORS["red"]))
         console.print(response.status_code, response.text)

questions/formbricks/funnel_registration_formbricks.json

@@ -39,13 +39,13 @@
         "default": "Anterior"
       }
     },
-    {
-      "id": "employee_id",
-      "type": "openText",
-      "inputType": "text",
-      "headline": {
-        "default": "Número de Empleado"
-      },
+     {
+       "id": "employee_id",
+       "type": "openText",
+       "inputType": "text",
+       "headline": {
+         "default": "Número de Empleado"
+       },
       "subheader": {
         "default": ""
       },

questions/formbricks/medium_formbricks.json

@@ -28,7 +28,7 @@
         "default": ""
       },
       "required": true,
-      "inputType": "text",
+       "inputType": "text",
       "placeholder": {
         "default": "Ingresa tu número de empleado"
       },

questions/formbricks/styles.css

@@ -0,0 +1,21 @@
+/* Template de estilos para Formbricks - Variables CSS para sobrescribir colores */
+
+/* Añade estas variables a tu hoja de estilos global (globals.css o similar) */
+/* para forzar colores y fondos en las encuestas mostradas con el SDK */
+
+:root {
+  /* Color principal (botones, bordes activos, etc.) */
+  --fb-brand-color: #ff5733;
+
+  /* Color del texto sobre el color principal */
+  --fb-brand-text-color: #ffffff;
+
+  /* Fondo de la tarjeta de la encuesta */
+  --fb-card-bg: #ffffff;
+
+  /* Fondo general (detrás de la tarjeta en encuestas de enlace o modales) */
+  --fb-survey-background-color: #f0f0f0;
+
+  /* Bordes */
+  --fb-border-color: #e2e8f0;
+}