🆓Matrix free answer

Add a free answer whenever you select certain cells in a matrix

Warning Add this code before apply any array filter

Add your questions on the same page. The first question will be the matrix we will use as a filter.

The second question will be the open question that we will show depending on whether certain cells are selected in the matrix. Make sure to set the question to not required.

Copy and paste the code below into the Javascript editor of the current page.

function matrix_free_answer(filter, question_code, rows, columns){
    var matrix_card = document.querySelector("#q_" + filter + "_card");
    var free_answer_card = document.querySelector("#q_" + question_code + "_card");
    var n_checked;

    var inputs = [];
    rows.forEach((row) => {
        columns.forEach((col) => {
            inputs.push(document.querySelector("#p_" + filter + "_" + String(row + 1) + "_" + String(col)));
        })
    })

    function count_checked() {
        n_checked = 0;
        inputs.forEach((input) => {
            if (input.checked == true) {
                n_checked++;
            }
        });

        if (n_checked > 0) {
            free_answer_card.style.display = "flex";
        } else {
            free_answer_card.style.display = "none";
            free_answer_card.querySelector(".custom-text").value = "";
        }
    }

    window.addEventListener("load", count_checked);
    matrix_card.addEventListener("change", count_checked);

    document.querySelector("#p_next").addEventListener("click", (e) => {
        var target_question = document.querySelector("#q_" + question_code + "_card > .custom-text");
        var visibility = free_answer_card.style.display;
        
        var feedback = document.querySelector("#feedback_" + question_code);

        if (feedback != null) {
            feedback.remove();
            target_question.classList.remove("is-invalid");
        }

        if (visibility == "flex" && target_question.value == "") {
            e.preventDefault();
            target_question.classList.add("is-invalid");
            target_question.insertAdjacentHTML(
                "beforebegin",
                `<span class="d-block custom-error pb-1 text-center" id="feedback_` + question_code + `">
                <span class="form-error-message text-danger">This field can't be blank
                </span></span>`
            );

            target_question.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
        }
    });
}

matrix_free_answer(
    filter = "Q1", 
    question_code = "Q1xFA", 
    rows = [2], 
    columns = [1, 2]
);

Make the appropriate modifications to the following snippet.

matrix_free_answer(
    filter = "Q1", 
    question_code = "Q1xFA", 
    rows = [2], 
    columns = [1, 2]
);

Variables

Variable	Description	Example
filter	The question code of the matrix you want to use as a filter	matrix_free_answer( filter = "Q1" );
question_code	The question code of the open text you want to hide/show	matrix_free_answer( filter = "Q1", question_code = "Q1xFA", );
rows	Rows indexes that will be use for validation	matrix_free_answer( filter = "Q1", question_code = "Q1xFA", rows = [2] );
columns	Column indexes that will be used for validation	matrix_free_answer( filter = "Q1", question_code = "Q1xFA", rows = [2], columns = [1, 2] );