Skip to main content

Double Sided Matrix

  • Updated

We have 2 cases for this:

  1. Adaptive version with different from PC and Mobile
  2. Old Version for Mobile

 

Case 1 Adaptive version with different from PC and Mobile

If you want to have a double-sided matrix question you can use this code, by following these steps:
Add a "|" between the answer options text, with no spaces like this:


Honesty|Dishonesty

Copy and paste the following JS, no edits are needed.

$(document).ready(function () {
    if ($(window).width() < 768) {
        $(".matrix .custom-control").css({
            "width": "50%",
            "float": "right"
        });

        var htmlContent = `
            <div class="counter-box custom-control custom-radio custom-radio-filled custom-radio-filled-md-center" style="width: 40%; float: left;">
                <div class="form-check">
                    <label class="change-label" style="display: block;
                    cursor: pointer;
                    text-align: left;
                    padding: 15px 15px 15px 50px;
                    border-radius: .25rem;
                    background: var(--light);
                    color: var(--dark);
                    position: relative;
                    margin-bottom: 0;
                    vertical-align: top;" ><span style="color: transparent">-</span></label>
                </div>
            </div>`;

        $(".matrix tbody td").each(function () {
            $(this).prepend(htmlContent);
        });

        let amountOfRows = $('tbody > tr').length; // Check amount of rows
        let totalOptions = $('tbody > tr > td > .counter-box').length;
        let optionsPerRow = totalOptions / amountOfRows; // Amount

        console.log(optionsPerRow);

        for (let i = 0; i < amountOfRows; i++) {

            let topText = [];
            let bottomText = [];

            $(`tbody > tr:nth-child(${i + 1}) > th`).each(function () {
                let text = $(this).text();
                let left_text = text.split("|")[0];
                let right_text = text.split("|")[1];
                topText.push(left_text);
                bottomText.push(right_text);
            });

            let counterBoxes = $(`tbody > tr:nth-child(${i + 1}) > td > div > div > .change-label`);
            $(counterBoxes[0]).text(topText[0]); // First .counter-box in the row
            $(counterBoxes[counterBoxes.length - 1]).text(bottomText[0]); // Last .counter-box in the row
        };

        $('.matrix tbody th').css('color', 'transparent');
    } else {
        let row_spaces = document.querySelectorAll("table > thead > tr > td");
        row_spaces.forEach((space) => {
            let parent = space.parentNode;
            let clone = space.cloneNode();
            parent.append(clone);
        });

        let row_headings = document.querySelectorAll("table > tbody > tr > th");

        row_headings.forEach((heading) => {
            let parent = heading.parentNode;
            let clone = heading.cloneNode();
            let left_text = heading.innerText.split("|")[0];
            let right_text = heading.innerText.split("|")[1];
            heading.innerText = left_text;
            clone.innerText = right_text;
            clone.style = "border-left: 1px solid white";
            clone.classList.remove("mt-5");
            clone.classList.add("mt-3");
            parent.append(clone);

            let tr = document.createElement("hr");
            tr.classList.add("mt-5", "d-md-none", "d-block");
            tr.style.border = "2px solid #DDEDFD";
            tr.style.opacity = 0.5;
            tr.style.opacity = 0.7;
            parent.insertAdjacentElement("afterend", tr);
        });
    }
});

 

This will give you this as a result, on the desktop:
image.png

 

And for mobile:
image.png

 

Case 2 Old Version for Mobile

Follow the same steps as above, but using a JS code instead:

let row_spaces = document.querySelectorAll("table > thead > tr > td");
row_spaces.forEach((space) => {
    let parent = space.parentNode;
    let clone = space.cloneNode();
    parent.append(clone);
});

let row_headings = document.querySelectorAll("table > tbody > tr > th");

row_headings.forEach((heading) => {
    let parent = heading.parentNode;
    let clone = heading.cloneNode();
    let left_text = heading.innerText.split("|")[0];
    let right_text = heading.innerText.split("|")[1];
    heading.innerText = left_text;
    clone.innerText = right_text;
    clone.style = "border-left: 1px solid white";
    clone.classList.remove("mt-5");
    clone.classList.add("mt-3");
    parent.append(clone);

    let tr = document.createElement("hr");
    tr.classList.add("mt-5", "d-md-none", "d-block");
    tr.style.border = "2px solid #DDEDFD";
    tr.style.opacity = 0.5;
    tr.style.opacity = 0.7;
    parent.insertAdjacentElement("afterend", tr);
});

 

For desktop, results will be the same:
image.png

 

And for the mobile version:
image.png