Hide SBS column - (not so) Simple Layout | XM Community
Question

Hide SBS column - (not so) Simple Layout

  • 25 April 2024
  • 1 reply
  • 35 views
J
Rank
Badge +3

Hi All,

sorry but i have hit my limit. I’m too far in to not use Simple Layout or the SBS for these questions but Simple Layout is, simply, frustrating and/or my JavaScript is way too poor.

I have forced response: 1 choice in Col 1, 1 choice in Col 2. But, now i’ve been asked that, if the last choice is made in Col 2, it should negate any choice in Col 1.

i have tried editing code from here: 

and here: 

and even considered the @TomG code for enabling  the removal of a selection (it would then require their trust to remove their selection in Col 1 if they choose ‘exclusive’, which is not ideal but ok given the limited end-users) - though my understanding is that it doesn’t work for Simple Layout. correct?

Either i’m not getting the element names correct or something.

My preference is to keep it as just the 2 columns as per top picture, below, but would also happily move that “exclusive” choice to a 3rd column is that’s easier.

Also, if anyone has any creative work-arounds that will work in-page and in as limited vertical space as possible i would love to hear that too.

Thanks in advance for any ideas you have.

cheers,

jeff

1 reply

J
Rank
Badge +3

based on code from @ahmedA i have almost got an answer. The following will disable all options in column 1 BUT only if “exclusive” in column 2 is selected first.

It won’t remove a selection in column 1 if that selection has been made prior to selecting “exclusive”.

I know the standard functionality of radio buttons doesn’t allow un-selection (and i don’t really want to make them (or hope they will) physically un-select their choice even if they can.

so, maybe this is as far as i can go.

 

i can make “exclusive” its own column (the 1st), or a separate question, so that its selection will trigger the hiding of options before the user reaches it.

 

Anyone have a better solution?

 

 

Qualtrics.SurveyEngine.addOnReady(function () {
    const sourceCol = { question: 1, col: 1 };
    const targetCol = { question: 2, col: 1 };
    const secondSourceCol = { question: 2, col: 4 };
    const secondTargetCol = { question: 1, col: [1, 2, 3] };

    const quest = this;
    const qc = quest.getQuestionContainer();

    let rows = 0;
    const allInputs = Array.from(qc.querySelectorAll("input")).map((a) => {
        const obj = {};
        obj.question = parseInt(a.name.split("-")[1]);
        obj.row = parseInt(a.name.split("-")[2]);
        obj.input = a;

        if (rows < obj.row) {
            rows = obj.row;
        }

        return obj;
    });

    for (let i = 1; i <= rows; i++) {
        const rowInputs = allInputs.filter((item) => item.row == i);
        let currentCol = 1;
        let currentQuest = rowInputs[0].question;

        rowInputs.forEach((item) => {
            if (currentQuest != item.question) {
                currentCol = 1;
                currentQuest = item.question;
            }
            item.col = currentCol;
            currentCol++;
        });
    }

const updateChoices = function () {
    setTimeout(() => {
        const sources = allInputs.filter((item) => item.col == sourceCol.col && item.question == sourceCol.question);
        const targets = allInputs.filter((item) => item.col == targetCol.col && item.question == targetCol.question);

        sources.forEach((src, index) => {
            if (src.input.checked) {
                targets[index].input.click();
            }
        });

        secondTargetCol.col.forEach(col => {
            const secondSources = allInputs.filter((item) => item.col == secondSourceCol.col && item.question == secondSourceCol.question);
            const secondTargets = allInputs.filter((item) => item.col == col && item.question == secondTargetCol.question);

           secondSources.forEach((src, index) => {
    if (src.input.checked) {
        secondTargets.forEach((target, index) => {
            if (target.input.checked) {
                target.input.click();
            }
            target.input.style.display = 'none';
        });
    } else {
        secondTargets.forEach((target, index) => {
            target.input.style.display = '';
        });
    }
}); 
        });
            
    }, 100);
};

quest.questionclick = updateChoices;

});
 

Leave a Reply


Terms & Conditions