Display participant's previous text responses on the screen during the study

[Hanqiu0718]

We asked participants to recall a situation prior to the study. And we plan to show participants the text they entered throughout the study as a form of text block in the middle of the screen. Now we have the text responses variable created as networkData.LIQ, and the function that needs to be modified is

function selectInstructionText(){ //select the instruction that participants see based on the condition
  if (networkData.condition ==1){
    return "<p><font color=black>Choose <strong>three participants</strong> you would <strong>want to keep seeing</strong> in subsequent rounds</p>"
  } else {
    return "<p><font color=black>Click on the three buttons with the <strong>red name</strong></p>"
  }
}

We already have a text instruction shown on the screen. What should I do to add the text response in the middle of the screen of this page?

[rankiejiang]

Maybe you can implement the code in the on_start part of the trial which you want to start to show the text

var div = document.createElement("div");
window.document.body.appendChild(div);
div.id = "text_responses";
div.innerHTML =networkData.LIQ

[becky-gilbert]

Hi @Hanqiu0718, in addition to @rankiejiang's approach, you could also append the variable to the HTML that your function returns. Here's an example of adding the response variable below the other content:

function selectInstructionText(){ //select the instruction that participants see based on the condition
  let html_string;
  if (networkData.condition == 1) {
    html_string = '<p>Choose <strong>three participants</strong> you would <strong>want to keep seeing</strong> in subsequent rounds</p>';
  } else {
    html_string = '<p>Click on the three buttons with the <strong>red name</strong></p>';
  }
  html_string += '<div>'+networkData.LIQ+'</div>';
  return html_string;
}

And here's how you could add it above the other content:

function selectInstructionText(){ //select the instruction that participants see based on the condition
  let html_string =  '<div>'+networkData.LIQ+'</div>';
  if (networkData.condition == 1) {
    html_string += '<p>Choose <strong>three participants</strong> you would <strong>want to keep seeing</strong> in subsequent rounds</p>';
  } else {
    html_string += '<p>Click on the three buttons with the <strong>red name</strong></p>';
  }
  return html_string;
}

Please let us know if you find a solution that works for you.