I want to dynamically generate the "ID" that will be placed in 'document.getElementById("ID").value)'

Question

Hi everyone! I've been working/struggling with this issue for quite some time and would really appreciate any help I can get.

Basically, I have 5 text input questions (exp: "MO01_01") in my questionnaire that are randomly selected for each participant. In these 5 questions participants are asked to write down numbers (exp: 100) and are immediately given some feedback, using a javascript code, on what the sum of those numbers are. Below is the code I've written that works, however in this code the ID's for the 5 text input questions are fixed (i.e., "MO01_01", "MO02_01", "MO03_01", "MO04_01", "MO05_01"). What I need instead is to be able to dynamically change the ID based on a php code that I use earlier to randomly select the text input questions.

Here's the php code where I randomly choose which questions to display:

if (!isset($mo_set)) {

$mo_set = array('MO0'.$number[0], 'MO0'.$number[1], 'MO0'.$number[2], 'MO0'.$number[3], 'MO0.$number[4]);
shuffle($mo_set);
registerVariable($mo_set);

put('SN01_01', $mo_set[0]);
put('SN01_02', $mo_set[1]);
put('SN01_03', $mo_set[2]);
put('SN01_04', $mo_set[3]);
put('SN01_05', $mo_set[4]);
}

question($mo_set[0]);
question($mo_set[1]);
question($mo_set[2]);
question($mo_set[3]);
question($mo_set[4]);

And here's the code where I am trying to give feedback on the sum of the numbers entered into the 5 text input questions:

<div id="info01"> - </div>

<script type="text/javascript">
  function calculateSum() {
    var MO01_01_value = parseFloat(document.getElementById("MO01_01").value);
    var MO02_01_value = parseFloat(document.getElementById("MO02_01").value);
    var MO03_01_value = parseFloat(document.getElementById("MO03_01").value);
    var MO04_01_value = parseFloat(document.getElementById("MO04_01").value);

    var sum = 0;

    if (!isNaN(MO01_01_value)) {
      sum += MO01_01_value;
    }
    if (!isNaN(MO02_01_value)) {
      sum += MO02_01_value;
    }
    if (!isNaN(MO03_01_value)) {
      sum += MO03_01_value;
    }
    if (!isNaN(MO04_01_value)) {
      sum += MO04_01_value;
    }

    var remainingMoney = Math.round(300 - sum);
    document.getElementById("info01").innerHTML = remainingMoney + " cents";
  }

  var inputs = document.querySelectorAll('input[id^="MO"]');
  inputs.forEach(function(input) {
    input.addEventListener("input", calculateSum);
  });
</script>

As I said, the question ID's here in this java code (exp: "MO01_01") should match the question ID's that are randomly selected in the php above ($mo_set[0] for example which might be MO07 for a specific participant). Any ideas on how I can fix this code?

Answer 1

First, I would recommend to use a random generator to select the questions. This will make the information available in the dataset (without the put()) and each question will be shown equally often (if you like).

Then, use the id() function to make IDs from the numbers you've drawn.

So far, so good. Now to your question: You have an Array with your IDs anyway. Just give the JavaScript this Array.

$moJSON = json_encode($mo_set);
replace('%moSet%', $moJSON);

And in the subsequent JavaScript:

var moSet = %moSet%;

Comments

Hi, thank you so much for the answer - this is super helpful!! :) I'm afraid I didn't do a good job at implementing this because it still doesn't seem to work. Here's what I did:

Php code:
if (!isset($mo_set)) {

$mo_set = array('MO0'.$number[0], 'MO0'.$number[1], 'MO0'.$number[2], 'MO0'.$number[3], 'MO10');
shuffle($mo_set);
registerVariable($mo_set);

put('SN01_01', $mo_set[0]);
put('SN01_02', $mo_set[1]);
put('SN01_03', $mo_set[2]);
put('SN01_04', $mo_set[3]);
put('SN01_05', $mo_set[4]);

$moJSON = json_encode($mo_set);
    replace('%moSet1%', $moJSON[0]);
    replace('%moSet2%', $moJSON[1]);
    replace('%moSet3%', $moJSON[2]);
    replace('%moSet4%', $moJSON[3]);
    replace('%moSet5%', $moJSON[4]);
}

Javascript code:

<div id="info01"> - </div>

<script type="text/javascript">
  function calculateSum() {
    var MO01_01_value = parseFloat(document.getElementById(%moSet1%).value);
    var MO02_01_value = parseFloat(document.getElementById(%moSet2%).value);
    var MO03_01_value = parseFloat(document.getElementById(%moSet3%).value);
    var MO04_01_value = parseFloat(document.getElementById(%moSet4%).value);
    var MO05_01_value = parseFloat(document.getElementById(%moSet5%).value);


    var sum = 0;

    if (!isNaN(MO01_01_value)) {
      sum += MO01_01_value;
    }
    if (!isNaN(MO02_01_value)) {
      sum += MO02_01_value;
    }
    if (!isNaN(MO03_01_value)) {
      sum += MO03_01_value;
    }
    if (!isNaN(MO04_01_value)) {
      sum += MO04_01_value;
    }
   if (!isNaN(MO05_01_value)) {
      sum += MO05_01_value;
    }
    var remainingMoney = Math.round(300 - sum);
    document.getElementById("info01").innerHTML = remainingMoney + " cents";
  }

  var inputs = document.querySelectorAll('input[id^="MO"]');
  inputs.forEach(function(input) {
    input.addEventListener("input", calculateSum);
  });
</script>


Is it possible that I misunderstood something here? Thank you again, I really appreciate this!! :)

---

You're close. Just use a single replace. The $moJSON is a string that represents the whole array, but $moJSON[0] will only return the first character of that string. This is not what you need.

Actually use replace('%moSet%', $moJSON);

And in the JS

var moSet = %moSet%;
var MO01_01_value = parseFloat(document.getElementById(moSet[0]).value);

---

Thank you! I've now modified the code accordingly:

PHP:
if (!isset($mo_set)) {

$mo_set = array('MO0'.$number[0], 'MO0'.$number[1], 'MO0'.$number[2], 'MO0'.$number[3], 'MO10');
shuffle($mo_set);
registerVariable($mo_set);

put('SN01_01', $mo_set[0]);
put('SN01_02', $mo_set[1]);
put('SN01_03', $mo_set[2]);
put('SN01_04', $mo_set[3]);
put('SN01_05', $mo_set[4]);

$moJSON = json_encode($mo_set);
     replace('%moSet%', $moJSON);
}

Javascript:

<div id="info01"> - </div>

<script type="text/javascript">
  function calculateSum() {
    var moSet = %moSet%;
    var MO01_01_value = parseFloat(document.getElementById(moSet[0]).value);
    var MO02_01_value = parseFloat(document.getElementById(moSet[1]).value);
    var MO03_01_value = parseFloat(document.getElementById(moSet[2]).value);
    var MO04_01_value = parseFloat(document.getElementById(moSet[3]).value);
    var MO05_01_value = parseFloat(document.getElementById(moSet[4]).value);


    var sum = 0;

    if (!isNaN(MO01_01_value)) {
      sum += MO01_01_value;
    }
    if (!isNaN(MO02_01_value)) {
      sum += MO02_01_value;
    }
    if (!isNaN(MO03_01_value)) {
      sum += MO03_01_value;
    }
    if (!isNaN(MO04_01_value)) {
      sum += MO04_01_value;
    }
   if (!isNaN(MO05_01_value)) {
      sum += MO05_01_value;
    }
    var remainingMoney = Math.round(300 - sum);
    document.getElementById("info01").innerHTML = remainingMoney + " cents";
  }

  var inputs = document.querySelectorAll('input[id^="MO"]');
  inputs.forEach(function(input) {
    input.addEventListener("input", calculateSum);
  });
</script>


But it's still not working somehow :( Thank you for all the help!

---

What does the browser console say (https://www.soscisurvey.de/help/doku.php/de:general:browser-tools, note that the English version of this manual is incomplete) and how dows the HTML code look like that SoSci Survey makes from this line?

var moSet = %moSet%;

In the PHP code put the replace() line behind the IF filter. You should set the placeholder even if the PHP variable already exists. Just in case.

Also consider my suggestion to replace shuffle() by a random generator. It will save you from some headache.

---

Hi thanks so much for all the help once again!

When using:
$moJSON = json_encode($mo_set);
     replace('%moSet%', $moJSON);

The code that sosci makes from this line looks like this in the browser console (of the javascript part):
   
 var moSet = [&amp;quot;MO09_01&amp;quot;,&amp;quot;MO04_01&amp;quot;,&amp;quot;MO02_01&amp;quot;,&amp;quot;MO07_01&amp;quot;,&amp;quot;MO10_01&amp;quot;];

And the browser console is also giving the following error:  'Uncaught SyntaxError: Unexpected token '&''.

I think the issue would be fixed if I could get it to save without the '&amp;quot;' bits like this:
var moSet = [MO09_01;MO04_01;MO02_01;MO07_01;MO10_01;];

Thank you again for all the help, I really appreciate it!

---

Ah, okay, I see ... i forgot a small detail:

replace('%moSet%', $moJSON, 'html');

The 'html' parameter explains to the replace() function to use the content as HTML code, and not to change any quotations marks.

---

Oh it finally worked!! Thank you so so much I cant tell you how helpful this is, you really saved the project - thanks again!