Is it possible to show the respondents a short text, once they have selected and submitted their answer?

Question

I would like for the respondents to see a short text (i.e. recommended answer or feedback) if they select a certain answer on a 7-point Likert-scale and give them the opportunity to change their answer. Is this possible?

Answer 1

Sure, one option to achieve that is documented here:
Immediately Show Questions when a Certain Option is Selected

Just replace "question" by "text", and you can display a message. You colud also use a bit HTML code to place the message closer to the selected option.

Comments

Thank you for your response! If the answers are to be given on a 7 point Likert scale, what is does the first part of the code look like? The text/feedback should be shown regardless of the button clicked. I'm also having some trouble locating the HTML IDs of the answer elements/buttons.

---

Currently, the text is shown without clickling the button. This is the code I have entered:

<script type="text/javascript">
<!--
var optionA = document.getElementById("NU06_011");  // NU06_011 is the HTML ID of the selection option "Very unlikely"
var optionB = document.getElementById("NU06_012");  // "Slightly unlikely" option
var optionC = document.getElementById("NU06_013");  // "Unlikely" option
var optionD = document.getElementById("NU06_014");  // "Neutral" option
var optionE = document.getElementById("NU06_015");  // "Likely" option
var optionF = document.getElementById("NU06_016");  // "Slightly likely" option
var optionG = document.getElementById("NU06_017");  // "Likely" option
var text = document.getElementById("NU07_txt");  //   HTML ID of the text input
 
function toogle() {
  // the two pipes (||) are a logicial "or"
  // the condition checks: is option A selected or is B selected?
  if ((optionA.checked) || (optionB.checked)) || (optionC.checked)) || (optionD.checked)) || (optionE.checked)) || (optionF.checked)) || (optionG.checked))  {
    // if any button is clicked, then the question is shown
    // no input ("") uses the default setting (display as usual)
    question.style.display = "";
  } else {
    // question is hidden if the "none" option is selected
    question.style.display = "none";
  }
}
 
// The function should always be executed, if one of the buttons is clicked on
SoSciTools.attachEvent(optionA, "click", toogle);
SoSciTools.attachEvent(optionB, "click", toogle);
SoSciTools.attachEvent(optionC, "click", toogle);
SoSciTools.attachEvent(optionD, "click", toogle);
SoSciTools.attachEvent(optionE, "click", toogle);
SoSciTools.attachEvent(optionF, "click", toogle);
SoSciTools.attachEvent(optionG, "click", toogle);
 
// and the function should also be executed, so that the display at the beginning is correct
// (e.g. hide the text input at the beginning)
toogle();
// -->
</script>

---

>  I'm also having some trouble locating the HTML IDs of the answer elements/buttons.

Please find the developer tools in your browser. There is a tool (at least in Firefox and Chrome) that allows you to simple click the input buttons to see their HTML code inclusing the HTML IDs.

> Currently, the text is shown without clickling the button.

Probably a glitch in you JavaScript that stops it from execution. The error console in the developer tools shall give a hint what goes wrong. You can also post a pretest link directly (!) to that page, so we can take a look.

---

Apologies for the confusion, to what page exactly can I post the pretest link?

---

To the comments down here?! And the pretest-link shall direct to the page in the questionnaire where you have the JavaScript placed. See https://www.soscisurvey.de/help/doku.php/en:survey:pretest

---

Thank you for your help, here is the pretest link that should take you directly to the page in question. The section that starts with "SmartWatch Usage" is only supposed to appear once the button is clicked.

https://www.soscisurvey.de/Innovationadoption/?act=mihMsGAFJENXTbzof7vpiRQf

---

Okay, the error console says:

> Uncaught SyntaxError: missing ( before condition

That sounds easy... It directs to this line:

if <span class="S2Tooltip anchor marker">optionA.checked) </span><span class="S2Tooltip container"><span class="S2Tooltip tiptext rounded shadow">| (optionB.checked</span></span> || (optionC.checked)) || (optionD.checked)) || (optionE.checked)) || (optionF.checked)) || (optionG.checked))  {
    // if any button is clicked, then the question is shown
    // no input ("") uses the default setting (display as usual)
    question.style.display = "";
  } else {

Oh yea ... this is not what you have written. I really thought this issue has already been solved. But apparently it still remains. Okay, not your fault, but a program bug. The double brackets are mis-interpreted as tooltip (https://www.soscisurvey.de/help/doku.php/en:create:popup).

While we work on a better solution to avoid the mis-interpretation, please use a simple workaround. Put a space between the double brackets. Change this:

  if ((optionA.checked) ||

Info this

  if ( (optionA.checked) ||

---

Thank you for your response. I added the space and it still didn't work. I then tried adding a space between the last two brackets as well and it still didn't work. Anything else I could do or change to get this to work?

 if ( (optionA.checked) || (optionB.checked)) || (optionC.checked)) || (optionD.checked)) || (optionE.checked)) || (optionF.checked)) || (optionG.checked) )  {

---

I did not see all the double brackets ... and it seems that the number of brackets does not fit at all. Remove most of them, please:

if (optionA.checked || optionB.checked || optionC.checked || optionD.checked || optionE.checked || optionF.checked || optionG.checked) {

---

I understand. I corrected this and the text is still showing immediately. This is the new code:

<script type="text/javascript">
<!--
var optionA = document.getElementById("NU06_011");  // NU06_011 is the HTML ID of the selection option "Very unlikely"
var optionB = document.getElementById("NU06_012");  // "Slightly unlikely" option
var optionC = document.getElementById("NU06_013");  // "Unlikely" option
var optionD = document.getElementById("NU06_014");  // "Neutral" option
var optionE = document.getElementById("NU06_015");  // "Likely" option
var optionF = document.getElementById("NU06_016");  // "Slightly likely" option
var optionG = document.getElementById("NU06_017");  // "Likely" option
var text = document.getElementById("NU07_txt");  //   HTML ID of the text input
 
function toogle() {
  // the two pipes (||) are a logicial "or"
  // the condition checks: is option A selected or is B selected?
if (optionA.checked || optionB.checked || optionC.checked || optionD.checked || optionE.checked || optionF.checked || optionG.checked) {
    // if any button is clicked, then the question is shown
    // no input ("") uses the default setting (display as usual)
    question.style.display = "";
  } else {
    // question is hidden if the "none" option is selected
    question.style.display = "none";
  }
}
 
// The function should always be executed, if one of the buttons is clicked on
SoSciTools.attachEvent(optionA, "click", toogle);
SoSciTools.attachEvent(optionB, "click", toogle);
SoSciTools.attachEvent(optionC, "click", toogle);
SoSciTools.attachEvent(optionD, "click", toogle);
SoSciTools.attachEvent(optionE, "click", toogle);
SoSciTools.attachEvent(optionF, "click", toogle);
SoSciTools.attachEvent(optionG, "click", toogle);
 
// and the function should also be executed, so that the display at the beginning is correct
// (e.g. hide the text input at the beginning)
toogle();
// -->
</script>

---

Okay, we're making progress :) The browser's error console now says:

> Uncaught ReferenceError: question is not defined

That refers to this line:

> question.style.display = "none";

And yes, there is no variable "question", because you named the variable "text", so please change the line as follows:

> text.style.display = "none";

And the other "question" as well, of course.

---

Unfortunately, still not change :(
Maybe a little more information helps? NU07 is the text I created, which should appear once any button is clicked. The "Darstellung" selected is "Einfacher Text". Is this correct? I also realized the element ID is NU07_media, not NU07_text. But still no change...

All seven options stand for all seven available buttons. There are no other buttons, so providing any answer at all should trigger the dropdown.

This is the new code:
<script type="text/javascript">
<!--
var optionA = document.getElementById("NU06_011");  // NU06_011 is the HTML ID of the selection option "Very unlikely"
var optionB = document.getElementById("NU06_012");  // "Slightly unlikely" option
var optionC = document.getElementById("NU06_013");  // "Unlikely" option
var optionD = document.getElementById("NU06_014");  // "Neutral" option
var optionE = document.getElementById("NU06_015");  // "Likely" option
var optionF = document.getElementById("NU06_016");  // "Slightly likely" option
var optionG = document.getElementById("NU06_017");  // "Likely" option
var text = document.getElementById("NU07_media");  //   HTML ID of the text input
 
function toogle() {
  // the two pipes (||) are a logicial "or"
  // the condition checks: is option A selected or is B selected?
if (optionA.checked || optionB.checked || optionC.checked || optionD.checked || optionE.checked || optionF.checked || optionG.checked) {
    // if any button is clicked, then the question is shown
    // no input ("") uses the default setting (display as usual)
    text.style.display = "";
  } else {
    // question is hidden if the "none" option is selected
    text.style.display = "none";
  }
}
 
// The function should always be executed, if one of the buttons is clicked on
SoSciTools.attachEvent(optionA, "click", toogle);
SoSciTools.attachEvent(optionB, "click", toogle);
SoSciTools.attachEvent(optionC, "click", toogle);
SoSciTools.attachEvent(optionD, "click", toogle);
SoSciTools.attachEvent(optionE, "click", toogle);
SoSciTools.attachEvent(optionF, "click", toogle);
SoSciTools.attachEvent(optionG, "click", toogle);
 
// and the function should also be executed, so that the display at the beginning is correct
// (e.g. hide the text input at the beginning)
toogle();
// -->
</script>

This is what the error console is saying:

Uncaught TypeError: Cannot read property ?act=SczFRN3hnzyCl51b2LBzvLeF:639
'style' of null
    at toogle (?act=SczFRN3hnzyCl51b2LBzvLeF:639)
    at ?act=SczFRN3hnzyCl51b2LBzvLeF:654

---

> The "Darstellung" selected is "Einfacher Text". Is this correct?

When you're using the German GUI, why are you writing in English?

Well, we're getting closer. The "cannot read property" error is hard to understand. In Firefox, it read like:

> Uncaught TypeError: text is null

And it refers to this line:

> text.style.display = "none";

Why that= The variable "text" has been initialized properly. Well, now we're coming the one of the most unnerving aspects of JavaScript: Timing.

It seems like you are running your code, especially

> var text = document.getElementById("NU07_media");

and th toogle() before (!) the text NU07_media has been embedded in the page. You just put the JavaScript above the text.

So what happens? At the time your code rund, there is no element NU07_media  there, yet. The solution is simple: Drag the JavaScript below NU07.

---

> When you're using the German GUI, why are you writing in English?
English is my first language, so I feel more comfortable writing in English :) Sorry if this made things more complicated.

I changed the order and it worked! Thank you so much for your help and support!

---

Good - I was afraid, you were writing in English to comfort us.

You may like to change the GUI language to English in the user account settings. And don't hesitate telling us where the English interface needs improvement ;)