Answers: Use Placeholder instead of Default

  • gnb_lance
  • Portrait de gnb_lance Auteur du sujet
  • Visiteur
  • Visiteur
il y a 4 ans 2 mois #98466 par gnb_lance
gnb_lance a créé le sujet : Answers: Use Placeholder instead of Default
Is it possible to have html placeholder text in an answer rather than a default value? The use case - I'd like to provide guidance/tip without providing an answer. Thank you!


La pièce jointe html5-palceholder.png est absente ou indisponible

Pièces jointes :

Connexion pour participer à la conversation.

Plus d'informations
il y a 4 ans 2 mois #98476 par JEfromCanada
JEfromCanada a répondu au sujet : Answers: Use Placeholder instead of Default
When you create a question in Limesurvey, there is a secondary input field called "Help". That field seems tailor-made for what you are looking for.

The only issue you might still have is HOW and WHEN to display the guidance/tip. For that, you might need to create your own survey template (so, for example, the hint will only be displayed during a mouseover, rather than being displayed by default).
Les utilisateur(s) suivant ont remercié: gnb_lance

Connexion pour participer à la conversation.

  • gnb_lance
  • Portrait de gnb_lance Auteur du sujet
  • Visiteur
  • Visiteur
il y a 4 ans 2 mois #98477 par gnb_lance
gnb_lance a répondu au sujet : Answers: Use Placeholder instead of Default
In my wizard, the Help is more of a detailed explanation, and the placeholder is used to guide them on the proper input. I'm onto a (hacky) way to do it - qanda_helper.php generates the html and I'm able to replace 'value' with 'placeholder'. The trick is just tracking down the correct places to do this. I've found one for numeric inputs so far.

Connexion pour participer à la conversation.

  • gnb_lance
  • Portrait de gnb_lance Auteur du sujet
  • Visiteur
  • Visiteur
il y a 4 ans 2 mois #98486 par gnb_lance
gnb_lance a répondu au sujet : Answers: Use Placeholder instead of Default
I'm not certain this comes without repercussion, but the code below hacks the php code which generates html to use placeholder rather than value. A more complex solution is required if a mixture of defaults and placeholders for the same types is needed.

To change numerical default 'value' to 'placeholder', edit @3748:
//. "id=\"answer{$ia[1]}\" value=\"{$fValue}\" onkeyup=...
. "id=\"answer{$ia[1]}\" placeholder=\"{$fValue}\" onkeyup=...

To change shortfreetext default 'value' to 'placeholder', edit @3947:
//$answer .= " value=\"$dispVal\"";
$answer .= " placeholder=\"$dispVal\"";

To change longfreetext and hugefreetext default 'value' to 'placeholder', edit @4041/4116:
//  .'rows="'.$drows.'" cols="'.$tiwidth.'" '.$maxlength.' onkeyup="'.$checkconditionFunction.'(this.value, this.name, this.type)" >';
//  if ($_SESSION['survey_'.Yii::app()->getConfig('surveyID')][$ia[1]]) {$answer .= str_replace("\\", "", $_SESSION['survey_'.Yii::app()->getConfig('surveyID')][$ia[1]]);}
//  $answer .= "</textarea></p>\n";
    .'rows="'.$drows.'" cols="'.$tiwidth.'" '.$maxlength.' onkeyup="'.$checkconditionFunction.'(this.value, this.name, this.type)" ';
    if ($_SESSION['survey_'.Yii::app()->getConfig('surveyID')][$ia[1]]) {
        $answer .= 'placeholder="';
        $answer .= str_replace("\\", "", $_SESSION['survey_'.Yii::app()->getConfig('surveyID')][$ia[1]]);
        $answer .= '"';
    }
    $answer .= "></textarea></p>\n";

Connexion pour participer à la conversation.

Plus d'informations
il y a 4 ans 2 mois #98488 par Ben_V
Ben_V a répondu au sujet : Answers: Use Placeholder instead of Default
Hello,

IMO, hacking such important file (qanda.php) is a not a good solution and you may have to replace (and adapt) your changes after any LS major update.

For people needing such feature for some questions it's possible to do it using few javascript lines, something like (not tested):
<script type="text/javascript" charset="utf-8"> 
$(document).ready(function() {
$('#answer123X456X789').attr('value', 'Employee first name...');
$('#answer123X456X789').attr('onfocus', 'if (this.value == this.defaultValue) { this.value = ""; }');	
}); 
</script>

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)

Connexion pour participer à la conversation.

  • gnb_lance
  • Portrait de gnb_lance Auteur du sujet
  • Visiteur
  • Visiteur
il y a 4 ans 2 mois #98512 par gnb_lance
gnb_lance a répondu au sujet : Answers: Use Placeholder instead of Default
Thanks Ben - Completely agree. My solution is especially problematic as revisiting any page turns data they've entered back into a place holder. Which file would you suggest adding the JS to?

Connexion pour participer à la conversation.

Plus d'informations
il y a 4 ans 2 mois #98514 par Ben_V
Ben_V a répondu au sujet : Answers: Use Placeholder instead of Default
place the js in the source of the question or question help ...
Obviously numeric IDs (SGQA code) in my example #answer123X456X789, have to be adapted for each question...

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
Les utilisateur(s) suivant ont remercié: gnb_lance

Connexion pour participer à la conversation.

  • gnb_lance
  • Portrait de gnb_lance Auteur du sujet
  • Visiteur
  • Visiteur
il y a 4 ans 2 mois #98531 par gnb_lance
gnb_lance a répondu au sujet : Answers: Use Placeholder instead of Default
Thanks Ben. Your concept is working - I changed it slightly to set the placeholder attribute (and no longer define a default):
<script type="text/javascript" charset="utf-8"> 
$(document).ready(function() {
$('#answer216511X3X1').attr('placeholder', 'Employee first name...');	
}); 
</script>

I think hardcoding the IDs is probably asking for trouble as they're based on the group and question id which change with reordering. It's also tedious.

I'm thinking about something more dynamic - does this.defaultValue actually exist? I couldn't get it to work but I think it would be key.

Connexion pour participer à la conversation.

  • gnb_lance
  • Portrait de gnb_lance Auteur du sujet
  • Visiteur
  • Visiteur
il y a 4 ans 1 mois #98532 par gnb_lance
gnb_lance a répondu au sujet : Answers: Use Placeholder instead of Default
Here's where I'm at now. Each question's default value can be prefixed with "***" to make it a placeholder instead. This scales nicely, and leaves default value functionality if desired.
<script type="text/javascript" charset="utf-8"> 
$(document).ready(function() {
 
var specialPrefix = "***";
 
var inputs = document.getElementsByTagName("input");
for (x=0;x<=inputs.length;x++){
   id = inputs[x].getAttribute("id");
   if(id.indexOf("answer")==0){
      var value = $('#'+id).attr('value');
      if (value.lastIndexOf(specialPrefix, 0) == 0){
         $('#'+id)
         .attr('value', '')
         .attr('placeholder', value.substring(specialPrefix.length));
      }
   }
}
}); 
</script>

Connexion pour participer à la conversation.

Plus d'informations
il y a 4 ans 1 mois - il y a 4 ans 1 mois #98534 par Ben_V
Ben_V a répondu au sujet : Answers: Use Placeholder instead of Default

...as they're based on the group and question id which change with reordering


Using LS ≥1.92, {SGQ} keyword is doing the job, so you can adapt js codes this way:
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
 
		var SGQ = '{SGQ}';
 
		$('#answer'+SGQ).attr(…..
 
	});
</script>

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
Dernière édition: il y a 4 ans 1 mois par Ben_V.

Connexion pour participer à la conversation.

  • gnb_lance
  • Portrait de gnb_lance Auteur du sujet
  • Visiteur
  • Visiteur
il y a 4 ans 1 mois #98568 par gnb_lance
gnb_lance a répondu au sujet : Answers: Use Placeholder instead of Default
Thanks, that's useful to know!

For what it's worth, I couldn't get my latest code and your {SGQ} to work at the same time (when both were included).

I don't have a default defined for this question, so I'd assume 'xxxx' would be set as the 'value', but instead it's empty.
$(document).ready(function() {
 
var specialPrefix = "***";
 
var inputs = document.getElementsByTagName("input");
for (x=0;x<=inputs.length;x++){
   id = inputs[x].getAttribute("id");
   if(id.indexOf("answer")==0){
      var value = $('#'+id).attr('value');
      if (value.lastIndexOf(specialPrefix, 0) == 0){
         $('#'+id)
         .attr('value', '')
         .attr('placeholder', value.substring(specialPrefix.length));
      }
   }
}
 
 
var SGQ = '{SGQ}';
$('#answer'+SGQ).attr('value', 'xxxx');
 
}); 
</script>

Connexion pour participer à la conversation.

  • gnb_lance
  • Portrait de gnb_lance Auteur du sujet
  • Visiteur
  • Visiteur
il y a 4 ans 1 mois #98580 par gnb_lance
gnb_lance a répondu au sujet : Answers: Use Placeholder instead of Default
Here's a revised version which uses jQuery's attributeStartsWith selector to generically find all elements with 'id' starting with "answer". Now we handle input, text area, etc.

var specialPrefix = "***";
 
$('[id^="answer"]').each(function() {
    var value = $(this).attr('value');
    if (value.lastIndexOf(specialPrefix, 0) == 0){
         $(this)
         .attr('value', '')
         .attr('placeholder', value.substring(specialPrefix.length));
    }
});

Connexion pour participer à la conversation.

Commencez dès maintenant !

Créez simplement un compte et commencez à utiliser LimeSurvey dès aujourd'hui.

Inscrivez-vous maintenant