Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Question Display format changes

  • jpowell
  • jpowell's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 days 8 hours ago #270055 by jpowell
Question Display format changes was created by jpowell
Please help us help you and fill where relevant:
LimeSurvey version: LimeSurvey Community Edition 6.12.4+250408
Own server or LimeSurvey Cloud: Hosted on own server
Survey theme/template: Fruity Twenty Three
==================
Three issues I would like to address:

1) Required  (*) and question text not on same line.
        Current:        *
                             What state do you live in?

        Desired:       * What state do you live in?

2)  Show ^% on the progress bar (and question number of total)

         Desired:    10% ===
    10 / 20

3) Change text color to be the same as the question text for question numbers

        Current:    (dim) 2
                                  What state do you live in?

         Desired:    2. What state do you live in?
            (for required)
                          *2. What state do you live in?

Obviously, I would like to use the custom.css to avoid fixing after each update.

Thanks for your help!

jp
 

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 days 17 hours ago - 1 day 23 hours ago #270067 by Joffm
Replied by Joffm on topic Question Display format changes
Hi,

Obviously, I would like to use the custom.css to avoid fixing after each update.

An extended theme is not affected by updates.

Well:
1. & 3.
copy "themes/survey/fruity_twentythree/views/subviews/survey/question_subviews/question_text_content.twig"
to "upload/themes/survey/[your extended theme name]/views/subviews/survey/question_subviews/question_text_content.twig"

Change from
Code:
{# Use twig from core, if the question is mandatory,return ./subviews/survey/question_subviews/asterisk.twig #}
{% if (aQuestion.mandatory == 'Y') %}
    {{ include('./subviews/survey/question_subviews/asterisk.twig') }}
{% endif %}
 
{# If the question number is to be shown (set in survey settings) #}
{% if (aShow.question_number) %}
    <span class='{{ aSurveyInfo.class.questionnumber }}' {{ aSurveyInfo.attr.questionnumber }} >
        {{ aQuestion.number }}
    </span>
{% endif %}
 
{# If the question code is to be shown (set in survey settings) #}
{% if (aShow.question_code) %}
    <span class='{{ aSurveyInfo.class.questioncode }}' {{ aSurveyInfo.attr.questioncode }}>
        {{ aQuestion.code }}
    </span>
{% endif %}
 
{# The question text as entered by the survey creator in question editing #}
<div class="{{ aSurveyInfo.class.questiontext }}" {{ aSurveyInfo.attr.questiontext }}>
    <div id="ls-question-text-{{ aQuestion.SGQ }}" class="{{ aSurveyInfo.class.lsquestiontext }}" {{ aSurveyInfo.attr.lsquestiontext }}>
        {{ aQuestion.text | raw }}
    </div>
</div>


to
Code:
{# If the question code is to be shown (set in survey settings) #}
{% if (aShow.question_code) %}
    <span class='{{ aSurveyInfo.class.questioncode }}' {{ aSurveyInfo.attr.questioncode }}>
        {{ aQuestion.code }}
    </span>
{% endif %}
 
{# The question text as entered by the survey creator in question editing #}
<div class="{{ aSurveyInfo.class.questiontext }}" {{ aSurveyInfo.attr.questiontext }}>
    <div id="ls-question-text-{{ aQuestion.SGQ }}" class="{{ aSurveyInfo.class.lsquestiontext }}" {{ aSurveyInfo.attr.lsquestiontext }}>
        {% if (aQuestion.mandatory == 'Y') %}
            {{ include('./subviews/survey/question_subviews/asterisk.twig') }}
        {% endif %}
 
        {# If the question number is to be shown (set in survey settings) #}
        {% if (aShow.question_number) %}
            {{ aQuestion.number }}.
        {% endif %}
 
        {{ aQuestion.text | raw }}
    </div>
</div>


1.a. 
Also copy the "asterisk.twig"
And add the <sup></sup> tags
Code:
<sup><i class="asterisk ri-asterisk" title="{{ gT("(This question is mandatory)") }}"></i></sup>

In your custom.css add
.asterisk {
    color:red;
}

2.
In your "custom.css" add
Code:
.top-container .progress {
  height: 20px;
}

In your "progress_bar.twig" adapt to
Code:
                       
<div class="{{ aSurveyInfo.class.progressbar }}" {{ aSurveyInfo.attr.progressbar }} style="width: {{ progressValue }}%;">{{ progressValue }}% of {{ aSurveyInfo.iTotalquestions }} questions
</div>




Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 1 day 23 hours ago by Joffm.
The following user(s) said Thank You: tpartner

Please Log in to join the conversation.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source