Script to change background color of selected array td

More
3 years 8 months ago #106499 by Bigred01
Bigred01 created the topic: Script to change background color of selected array td
Hi everyone.

Just wanted to share this script for anyone interested, should be able to just drop it in.(I put it in question.pstpl under the table to be sure it runs after the question/answers load). It will add a background color to the selected answer in an array question. (just tested so far with single response arrays) It can probably be cleaner but I'm still learning. You will have to add ".selected-answer" to your css and style it how ever you want.
 
<script type="text/javascript">
 
    $(document).ready(function() {
    //This script will change the background of a selected array answers td for single response arrays.
 
        //getting the question id's and counting how many sub questions are in the list
        var sgq = "{SGQ}";
        var ansCode = "java"+sgq;
        var rowCount = $('.subquestions-list tbody tr').length;
        //console.log(ansCode);
 
        //cycling through the subquestions to see if they are answered, if so it will color the correct td for the answer. 
        // Needed for page reload or answers will lose background color.
        for(var i = 0; i < rowCount; i++ ) {
            var iPlusOne = i + 1;
            var currentAnswer = ansCode + iPlusOne;
            var currentValue = document.getElementById(currentAnswer).value;
            var currentCell = "answer_cell_00"+currentValue;
            var currentRowCell = "#javatbd"+sgq+iPlusOne+" ."+currentCell;
 
 
            if(document.getElementById(currentAnswer).value != "" ) {
                //console.log(currentRowCell);
                $(currentRowCell).addClass("selected-answer");
            }
 
        }
        //highlights the td for the clicked answer. Will also remove the highlight of the old one if the answer is changed.
        $(".subquestions-list td").click(function() {
            var currentTr = "#" + $(this).closest("tr").attr("id") + " td";
            //console.log(currentTr);
            $(currentTr).removeClass("selected-answer");
 
            $(this).addClass("selected-answer");
        });
    });
</script>
 

Please Log in to join the conversation.

More
3 years 8 months ago #106501 by Bigred01
Bigred01 replied the topic: Script to change background color of selected array td
Couldn't find the edit button. Wrapped it in an if statement that checks for question type. Was throwing up javascript errors on other array types like column..ect.
 
<script type="text/javascript">
 
    $(document).ready(function() {
        //Checks if the question type matches the array type we want
        var qId = "{QID}";
        var questionId = "#question"+qId;
        //console.log(questionId);
 
        if($(questionId).hasClass('array-flexible-row')) {
    //This script will change the background of a selected array answers td for single response arrays.
 
        //getting the question id's and counting how many sub questions are in the list
        var sgq = "{SGQ}";
        var ansCode = "java"+sgq;
        var rowCount = $('.subquestions-list tbody tr').length;
        //console.log(ansCode);
 
        //cycling through the subquestions to see if they are answered, if so it will color the correct td for the answer.
        // Needed for page reload or answers will lose background color.
        for(var i = 0; i < rowCount; i++ ) {
            var iPlusOne = i + 1;
            var currentAnswer = ansCode + iPlusOne;
            var currentValue = document.getElementById(currentAnswer).value;
            var currentCell = "answer_cell_00"+currentValue;
            var currentRowCell = "#javatbd"+sgq+iPlusOne+" ."+currentCell;
 
 
            if(document.getElementById(currentAnswer).value != "" ) {
                //console.log(currentRowCell);
                $(currentRowCell).addClass("selected-answer");
            }
 
        }
        //highlights the td for the clicked answer. Will also remove the highlight of the old one if the answer is changed.
        $(".subquestions-list td").click(function() {
            var currentTr = "#" + $(this).closest("tr").attr("id") + " td";
            //console.log(currentTr);
            $(currentTr).removeClass("selected-answer");
 
            $(this).addClass("selected-answer");
        });
        }
    });
</script>
 

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!