Welcome to the LimeSurvey Community Forum

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

Change layout/design of multiple choice items

  • tobiashaug
  • tobiashaug's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 9 months ago #185993 by tobiashaug
I was wondering if anyone know how it is possible to change the layout/design of multiple-choice items? For a specific survey, I need the following layout:

left hand side: item/question (as video)
right hand side (not below the question): four answer choices (top left, top right, bottom left, bottom right).

Any feedback is welcome!

Tobias
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago - 4 years 9 months ago #186000 by tpartner
Replied by tpartner on topic Change layout/design of multiple choice items
You could create a custom question theme for that but if this is just a requirement for a single question, adding something like this to the question source should do the trick.

Code:
<script type="text/javascript" charset="utf-8">
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Move element(s)
    $('.question-title-container', thisQuestion).append($('.question-valid-container', thisQuestion));
  });
</script>
 
<style type="text/css">
 
  @media only screen and (min-width: 480px) {
 
    #question{QID} .question-title-container,
    #question{QID} .answer-container {
      width: 50%;
    }
 
    #question{QID} .question-valid-container {
      padding-left: 0;
    }
  }
</style>


Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 4 years 9 months ago by tpartner.
The following user(s) said Thank You: DenisChenu, tobiashaug
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose