Random number doesn't show in HTML + Javascript block | XM Community
Skip to main content

I have a survey in which I have the partecipant clic on a image and then will be shown a number generated with an embedded variable, at the starto of thee survey.

So at the start of the survey i create 2 embedded variables in a block ‘randomNumber1’ and ‘randomNumber2’, two random numbers.

Then some blocks below I create a block where i use Html to generate the text and to insert the image: 

<div class="container">
<p id="instruction">
This is a trial task.<br><br>
What is requested of you is to roll the dice and report the outcome of the roll.<br><br>
Every unit of the die is $10.<br><br>
This means that the minimum amount to be donated by each participant is the minimum sum achievable from rolling the two dice, namely: 1 + 1 = 2 × $10 = $20.<br><br>
The maximum amount that could be donated, on the other hand, corresponds to the maximum sum achievable from rolling two dice, which is: 6 + 6 = 12 × $10 = $120.<br><br>
<u>Please note that only you will know the outcome of the roll: other participants, the experimenter, Sapienza, will not be aware of the result.</u><br><br>
Please roll the dice by clicking on the image below and answer the questions.
</p>


<div>
<button id="diceButton1">
<img alt="Dice" src="https://sapienzapsico.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_Rp12uTWTqk2W7a8" style="height: 150px; width: 150px;">
</button>
<p id="result1"></p>
</div>
</div>

The participant sees the text and the image, clicks on the image, and a java script should show the number from ‘randomNumber1’

This is the Javascript: 

Qualtrics.SurveyEngine.addOnload(function () {
// Ottieni il bottone e il campo per il risultato
var diceButton1 = document.getElementById('diceButton1');
var resultField1 = document.getElementById('result1');

// Aggiungi l'evento di click per il bottone dei dadi
diceButton1.addEventListener('click', function () {
// Recupera il numero dalla variabile embedded (già generata prima)
var result1 = Qualtrics.SurveyEngine.getEmbeddedData('randomNumber1'); // Cambia 'randomNumber1' se hai un nome diverso

// Mostra il risultato
resultField1.innerHTML = `You rolled a <span class="number">${result1}</span>!`;
});
});

It doesn’ work. I’ve tried everything I could.

I’d like to memorize the randomNumber into a cell of the dataset.

Every hint is appreciated. 

Instead of using getEmbeddedData try this:

resultField1.innerHTML = "You rolled a <span class='number'>${e://Field/randomNumber1}</span>!"

 


Fantastic, it works. 

I’m really grateful.

Chat GPT doesn’t know Qualtrics well, I suppose

Thank you

 

Could you please explain, from a programming language point of view?


Fantastic, it works. 

I’m really grateful.

Chat GPT doesn’t know Qualtrics well, I suppose

Thank you

 

Could you please explain, from a programming language point of view?

Qualtrics resolves pipes, including in JavaScript, on the server before sending the page to the browser. So the string "You rolled a <span class='number'>${e://Field/randomNumber1}</span>!" becomes something like "You rolled a <span class='number'>7</span>!"

Qualtrics also stores embedded data fields in an object that can be accessed through the JS API. I’m not sure why your JS didn’t work, but I suspect that you may be using Simple layout (aka New Experience) where getEmbeddedData doesn’t exist (it has been replaced by getJSEmbeddedData).


Fantastic, it works. 

I’m really grateful.

Chat GPT doesn’t know Qualtrics well, I suppose

Thank you

 

Could you please explain, from a programming language point of view?

Qualtrics resolves pipes, including in JavaScript, on the server before sending the page to the browser. So the string "You rolled a <span class='number'>${e://Field/randomNumber1}</span>!" becomes something like "You rolled a <span class='number'>7</span>!"

Qualtrics also stores embedded data fields in an object that can be accessed through the JS API. I’m not sure why your JS didn’t work, but I suspect that you may be using Simple layout (aka New Experience) where getEmbeddedData doesn’t exist (it has been replaced by getJSEmbeddedData).

No, I wasn’t using Simple Layout because I wanted to be more flexible.


Leave a Reply