Inserting a blank line / row amongst codes in a select question

Question

I guess this seems rather simple to do but I found it to be rather painful.

I used the following script in the HTML head tag of a select question.

<script src="[%GraphicsPath()%]jquery-1.6.2.min.js"></script>

<script type="text/javascript">
  $.noConflict();

jQuery(document).ready(function(){

  jQuery(".group_header").parents("tr.clickable").each(function(index) {
    var HeaderRowObj = jQuery(this);
   
    HeaderRowObj.removeClass("clickable");
    HeaderRowObj.addClass("group_header_row");

    var InputObj = HeaderRowObj.find("input");
    InputObj.addClass("HideElement");  //Make sure it is hidden

    var GroupHeaderObj = HeaderRowObj.find(".group_header");

    HeaderRowObj.html("<td colspan='2'>" + GroupHeaderObj.html() + "</td>");
    HeaderRowObj.prepend(InputObj);

  });
});

</script>

I created an additional code (code 10) in my parent list as such ...

<span class="group_header"></span>

Within my constructed list, I would include code 10 in the correct position.

This all worked on a desktop / laptop.

I would see ...

Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
<blank>
None of these

On a mobile phone, the blank line / row was ignored.

I would see ...

Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
None of these

Does anyone have a better solution?

Thank you.

Answer 1

Not sure why that wouldn't work on a mobile phone Paul.  Is it a javascript issue perhaps?  Does other javascript work okay on the mobile?  As far as inserting a blank row on a select question, I've used the below javascript code to insert a header row without having to create a list item (instead of the text 'Blank Row' just leave it blank there and replace Q10 with your question number) and this method has worked well and is a bit simpler.  I have not tested it out on a mobile though.

<script type="text/javascript">
$(document).ready(function(){
    $('#Q10_div > .question_body .response_column > div:nth-child(10)')
        .before('<div><h2> Blank Row  </h2></div>');
})
</script>

Comments

Thanks Jay. I'll test your idea out on a mobile and desktop and get back to you.

I think some mobile phone Operating Systems have issues with JavaScript?

---

Unfortunately I couldn't find anything in my notes that provides a solution that doesn't involve javascript but perhaps someone else has a way I've not seen.  Let me know if you find a resolve.

---

Hi Jay, tried your code and had trouble getting it to work on a desktop. If I can get the desktop working I'll then move onto the mobile phone.

I changed Q10 to Q3 and removed "Blank Row" as you mentioned. I assume the nth-child(10) should be changed to the respective code number?

I tried this on single and multiple response questions too.

I popped the code in the questions HTML head tag and also tried the footer.

Have I missed something?

---

Sorry about that Paul.  I emailed you directly with a working sample.  I think it needed to have something in between the  <div> tags so if you added the html for a non-breaking space it should work.  Let me know if still have an issue with the sample I sent you as it's working on my end.

---

Heya Jay ... could you send that over to me as well?  I've moved over to the latest iteration of Sawtooth.  Have used the same solution as Paul in Version 8 when I've needed "dummy codes" in select-type questions for layout purposes, but it doesn't seem to be working the same in version 9.  I tried taking out the "no conflict" part of the code, then tried taking out the reference to the js file but no joy on a surface pro 3 - the check boxes still remain.

---

Happy to Marion.  Just messaged you with a sample script for both V9 and one for V8.

---

Marion, be careful with testing on mobile phones as I've had various issues.

Blank rows are ok on bigger devices but not on mobile phones?

I suggest you test thoroughly.