Public Survey Views

(Public = front-end)

Reworking on Public (survey) views. Actually we have ANSWERS part done by views : https://github.com/LimeSurvey/LimeSurvey/tree/master/application/views/survey/questions (thanks to Louis)

I ( DenisChenu (talk) ) want to rework all this answers part (and some other) to be

• Easily CSS managed
• More easily jquery managed (data/global class/tag etc ...)
• More easily reusable by Plugins (plugin can update {ANSWERS} part and use same file than core (using renderPartial)

Then : need some help for "what is the best for LimeSurvey core to become the best survey tools and the more easily hackable survey tool".

Actual idea to do

• Usage of bootstrap part, add more if it's OK and it's useful/helpful. Fix some part
• Remove the empty label : move the label to the answer/subquestion text (like in 2.06)
• Remove the uneeded label (for 508 issue), and use a core plugin to add it to question part (labelled-by to be clean)
• Usage of specific class : answer-item / radio-item / checkbox-item : needed or not ? What mus be improved ?
• usage of checkbox/radio class : actually on wrapper and on input : one must be removed for sure. The warapper is here for bootstrap-awesome-checkbox : leave it or update bootstrap-awesome-checkbox
• I ( DenisChenu (talk) ) want to readd ul/li : think it's more quick to do a $("li").each : then answer and subquestion are taken. And more : i think it'"s a list of answers, a lits of question.
• All part must be "near same" : HTML produced must have same class and tag if possible.
• Add string in replacement then asterisk. For screen reader at minima.

Some decision to do

• Views, sub views and sub sub views
  • Use of some "global part, non dependant of question type : for example : views/radio/radio.php with only the input[radio]
  • Or all part in his specific QuestionType/ directory
  • Possible solution : for example : views/survey/questions/arrays/array/dropdown/item.php include views/survey/item/select.php
• Replace variable by object
  • Actually : controllers make all vars, and views use only fixed vars.
  • Maybe it's best to send the question object (with lang), the array of sub questions object, the array of answers object, the array of question attributes
• HTML5
  • nav/section etc .... must leave in template (I think) : confirm ?
  • Usage of HTML5 input : leave it for plugin OR in core ? Difficulty with some input : for example input[date] is totally not adaptable, only browser dependant. Same for input[number] : no radix control. (More work than i want to do actually Denis (talk) )
• no-js functionality (modernizer)
  • Add no-js/js class in Core (html class="no-js") , and add an helper class js-hidden js-display (bootstrap don't have one) : https://modernizr.com/docs#no-js (because I ( DenisChenu (talk) ) like it ;) )
  • Did we need other modernizer feature ?

Possible next steps for better templates

To make maintaining templates easier and offering more flexibility to template designers, we need a cleaner separation of code and possibly implement the concept of child themes (this is what Wordpress calls it).

Short term

(Could be Limesurvey 2.6)

• Have one basic template using Bootstrap's main details only (Tammo has one at hand)
• Create the three shipped templates based on that template
• Clean up view HTML and the templates PSTPL files
• ... please continue...

Long term

(Could be Limesurvey 3)

• Switch to a template engine (Twig, maybe Mustache)
• Implement concept of child themes
• Clearly separate HTML structure and functions
• ... to be continued...

Linked mantis

• 11463: Unable to vertical align Radio button without javascript https://bugs.limesurvey.org/view.php?id=11463 . In fact : not unbale , but more difficult (think default can have this option)
• 11449: Re-adding real label https://bugs.limesurvey.org/view.php?id=11449
• 10894: Bad heading and other semantic and accessibility issue + bad HTML5 structure https://bugs.limesurvey.org/view.php?id=10894 look at oit after core HTML.
• 11500: output of function {QUESTION_MANDATORY} is not readable for screenreaders https://bugs.limesurvey.org/view.php?id=11500
• ...

Next improvement

Extendable template

Allow a template to extend another template, extend another template, extend core template. (See Talk). For whole HTML/js/css part (+js+css). By default (without updatingt config.php)

• DenisChenu : think we need a cache system for this ( runtime/templatename ) for example.