Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Juan Londono 7 posts 86 karma points
    Nov 24, 2020 @ 10:46
    Juan Londono
    0

    Triage questionnaire

    we were wondering if it's possible to have a type of questionnaire in the form of triage with dropdownlists, so depending on the question you select from the first dropdownlist you will see a new dropdown list with new questions, and once you select a new question , a new dropdownlist is displayed with a new set of questions; after 4 iterations the end user will see a final answer; it’s important to mention that the options that you see on the dropdownlist depends on the previous selection; you could see it’s filtered based on the previous selection Thanks

  • Nicholas Westby 2054 posts 7104 karma points c-trib
    Nov 25, 2020 @ 21:19
    Nicholas Westby
    100

    This is not something that is built into Formulate, but it is something you can implement in combination with Formulate. Here's how I imagine that working.

    First, create your fields and assign categories to them, such as in this example:

    Formulate Field in Umbraco Back Office

    You can see the "Question 2" category is selected. This renders like this:

    Formulate Form Rendered with Field that Has Category

    You can see the drop down has a data-category="Question 2" data attribute attached to it. You can use that attribute to target the drop down with JavaScript (e.g., document.querySelector('[data-category="Question 2"]')).

    Once you have those fields stored to variables, you can attach event handlers and change the options in each drop down. That'd be something like this:

    question1.addEventListener('change', function () {
        showAndUpdateQuestion2Options();
    });
    question2.addEventListener('change', function () {
        showAndUpdateQuestion3Options();
    });
    // ...And so on...
    finalQuestion.addEventListener('change', function () {
        showFinalAnswer();
    });
    function showAndUpdateQuestion2Options() {
        let newOption = document.createElement('option');
        newOption.text = 'New Option';
        newOption.value = 'new-option';
        question2.add(newOption);
        question2.classList.add('visible');
    }
    

    Consider that pseudo code, as I haven't tested any of it. I'm sure you can revise it according to your needs (e.g., make the dynamic values CMS-editable).

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies