Welcome, Guest
Username: Password: Remember me

TOPIC: Script to change background color of selected array td

Script to change background color of selected array td 7 months 6 days ago #106499

  • Bigred
  • Bigred's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 29
  • Thank you received: 10
  • Karma: 2
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>
 
The administrator has disabled public write access.

Script to change background color of selected array td 7 months 6 days ago #106501

  • Bigred
  • Bigred's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 29
  • Thank you received: 10
  • Karma: 2
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>
 
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.107 seconds
Donation Image