Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Script to change background color of selected array td

  • Bigred01
  • Bigred01's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
9 years 11 months ago #106499 by Bigred01
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.
Code:
 
<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>
 
The topic has been locked.
  • Bigred01
  • Bigred01's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
9 years 11 months ago #106501 by Bigred01
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.
Code:
 
<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>
 
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose