user-questionnaire

Example

<cr-component id="component" name="user-questionnaire" loading></cr-component>

<script>
  const component = document.getElementById("#component");
  let questionnaireProps = {
    skip: true,
    intro: {
      enabled: true,
      description:
        "Para poder ofrecerte un producto adaptado a tu perfil, necesitamos que completes  este test de idoneidad.",
      title: "Test de idoneidad",
    },
    steps: [
      {
        id: 1,
        name: "N 1",
        question: "¿Cuáles son tus ingresos netos anuales?",
        type: "text",
        placeholder: "Especifique aquí",
      },
      {
        id: 2,
        name: "N 2",
        question: "¿Cuáles son tus ingresos netos anuales?",
        type: "currency",
        value: 55555,
      },
    ],
    score: {
      enabled: true,
      from: 0,
      to: 10,
      title: "conservador",
      description:
        "Un perfil más elevado te permitiría acceder a productos con mayor riesgo y, por lo tanto, mayor rentabilidad esperada en el largo plazo.",
      error: {
        description:
          "Dichas respuestas son incorrectas o no estan relacionadas. Por favor, revise las siguientes respuestas",
        questions: [],
      },
    },
  };
  let newScore = {
    value: 7,
    title: "Arriesgado",
    description:
      "Un perfil más elevado te permitiría acceder a productos con mayor riesgo y, por lo tanto, mayor rentabilidad esperada en el largo plazo.",
  };
  let newError = {
    questions: [1, 2, 5],
    description: "Te faltaron estas preguntas por responder",
  };
  component.init(questionnaireProps);
  component.addEventListener("change", (e) => {
    if (
      questionnaireProps.score.enabled &&
      questionnaireProps.steps.length + questionnaireProps.intro.enabled === e.detail.current
    ) {
      setTimeout(() => {
        questionnaireProps.steps.length === e.detail.answers.length
          ? component.updateScore(newScore)
          : component.updateErrors(newError);
      }, 1000);
    }
  });
</script>

Schema

{
 "type": "object",
 "properties": {
  "skip": {
   "type": "boolean",
   "default": false
  },
  "intro": {
   "type": "object",
   "properties": {
    "enabled": {
     "type": "boolean",
     "default": false
    },
    "description": {
     "type": "string",
     "default": ""
    },
    "image": {
     "type": "string",
     "default": "undefined/assets/img/kyc.svg"
    }
   },
   "default": {
    "enabled": false,
    "image": "undefined/assets/img/kyc.svg"
   }
  },
  "steps": {
   "type": "array",
   "default": [],
   "items": {
    "type": "object",
    "properties": {
     "id": {
      "type": "number",
      "default": 0
     },
     "question": {
      "type": "string",
      "default": ""
     },
     "type": {
      "type": "string",
      "default": ""
     },
     "options": {
      "type": "array",
      "default": []
     },
     "alert": {
      "type": "object",
      "properties": {
       "type": {
        "type": "string",
        "default": "info"
       },
       "text": {
        "type": "string",
        "default": ""
       }
      }
     },
     "value": {
      "type": [
       "string",
       "number",
       "object"
      ],
      "properties": {
       "value": {
        "type": [
         "string",
         "number"
        ]
       },
       "description": {
        "type": "string"
       }
      }
     },
     "label": {
      "type": "string",
      "default": ""
     },
     "placeholder": {
      "type": "string",
      "default": ""
     },
     "pattern": {
      "type": "string",
      "default": ""
     },
     "required": {
      "type": "boolean",
      "default": false
     },
     "min": {
      "type": "number"
     },
     "max": {
      "type": "number"
     },
     "step": {
      "type": "number",
      "default": 1
     },
     "risk": {
      "type": "boolean",
      "default": false
     }
    }
   }
  },
  "score": {
   "type": "object",
   "properties": {
    "enabled": {
     "type": "boolean",
     "default": false
    },
    "value": {
     "type": "number",
     "default": 0
    },
    "from": {
     "type": "number",
     "default": 0
    },
    "to": {
     "type": "number",
     "default": 1
    },
    "title": {
     "type": "string",
     "default": ""
    },
    "description": {
     "type": "string",
     "default": ""
    },
    "error": {
     "type": "object",
     "properties": {
      "description": {
       "type": "string",
       "default": ""
      },
      "image": {
       "type": "string",
       "default": "undefined/assets/img/error.svg"
      },
      "questions": {
       "type": "array",
       "default": [],
       "items": {
        "type": "string"
       }
      }
     }
    }
   },
   "default": {
    "enabled": false,
    "error": {
     "image": "undefined/assets/img/error.svg"
    }
   }
  },
  "current": {
   "type": "number",
   "default": 0
  }
 },
 "additionalProperties": true
}

Complete Schema

{}

Public functions

• goToStep(step)

  Function to change the step

  Params

  • {number} step

• updateScore(newScore)

  Function to change the score

  Params

  • {object} newScore

• updateErrors(errors)

  Function to change the score

  Params

  • {array} errors

Locales

{
 "estimation": "It won't take you more than {{estimatedTime}} minutes",
 "start": "Start",
 "%s answer": {
  "one": "Answer",
  "other": "other"
 },
 "inconsistencies": "We have detected inconsistencies in the responses given to the questionnaire.",
 "result": "Result",
 "showResult": "Based on your answers the result of your profile is...",
 "skipStep": "Skip step",
 "sorry": "We're sorry"
}