Roll a dice using JavaScript in qualtrics | XM Community
Skip to main content
Hi all, I am new to using Java in qualtrics and I would appreciate your help.



I want to roll a dice once and to store the result as embedded data to use it later in the survey. The dice rolls well, BUT I CAN'T STORE THE RESULT. These are the steps that I followed.



1- In the beginning of the survey flow, I created a new field: result_matrix_embedded (I did not set it equal to any value)

2- This is what I wrote in the JavaScript of the question: I am using some code that I found online from Philip Tschiemer

Qualtrics.SurveyEngine.addOnload(function()

{

// Required for the callback functions to work.

var self = this;



// For our comfort, the common settings are predefined.

var value_set = [

{key:"1",probability:1},

{key:"2",probability:1},

{key:"3",probability:1},

{key:"4",probability:1},

{key:"5",probability:1},

{key:"6",probability:1}

];



var images = {

base_url:'https://www.descil.ethz.ch/projects/1305-SensQuest/dice/img/',

ext:'.png',

init: 'qmark1.png'

};



new Dice("dice1","throw1",{

possible_throws: 1,

value_set: value_set,

images: images,

result_callback: function(throw_nr,result_key){

Qualtrics.SurveyEngine.setEmbeddedData('result_matrix_embedded'+ throw_nr, result_key);

}

});

});



3- This is what I wrote in the HTML:

<strong>Are you ready to roll the dice?</strong><br />

<br />

If yes, roll the dice below by clicking on the button.

<br /><br /><br />

<script src="https://www.descil.ethz.ch/projects/1305-SensQuest/dice/dice.js"></script>

<div style="position:absolute; left:200px;"> <div id="dice1"></div></div>

<br /> <br /> <br />

<div style="position:absolute; left:179px;">

<button id="throw1">Roll dice</button> </div>



* This part works. I can roll the dice and it shows a value. Now, I want to store the result.

4- In another block I write, a text question: This is the result: ${e://Field/result_matrix_embedded}

And it doesn't show anything!. The result is not stored in the field. Qualtrics.SurveyEngine.setEmbeddedData() seems to be not working.

I tried many other JavaScript codes to roll a dice, but I never manage to store the result. If you happen to know any other way rather than this code, it would be highly appreciated!



Thank you!
Sorry, I didn't copy the HTML well: This is it.



<script src="https://www.descil.ethz.ch/projects/1305-SensQuest/dice/dice.js"></script>

<div style="position:absolute; left:200px;"> <div id="dice1"></div></div>

<div style="position:absolute; left:179px;">

<button id="throw1">Roll dice</button> </div>
The code concatenates throw_nr to the end of the embedded data field name. So, I think embedded data field name in your survey flow should be result_matrix_embedded1.
Thank you Tom! I did not realize before. I deleted that and it actually works now! Thank you!

Hello, could you please help me with integrating the dice roll in a survey? I am just starting to use Qualtrics and I am lost. I would like for respondents to have to roll a dice and enter the number they threw. Do you know how I can achieve that? I entered your code, but I don't get a dice..
Thanks in advance!


Sorry for the late reply, I hope it still serves. This is what I have.
1- Create an embedded data at the beginning of the survey flow: "result_matrix_embedded" and leave it empty (otherwise the number that was thrown won't be saved).
2- In the question itself, in html view:


 



 




 


 



3- In the question in Javascript:
Qualtrics.SurveyEngine.addOnload(function()

  {var self = this;
var value_set = e

  {key:"1",probability:1},

  {key:"2",probability:1},

  {key:"3",probability:1},

  {key:"4",probability:1},

  {key:"5",probability:1},

  {key:"6",probability:1}

  ];

  var images = {

  base_url:'https://www.descil.ethz.ch/projects/1305-SensQuest/dice/img/',

  ext:'.png',

  init: 'qmark1.png'

  };

  // Instantiate dice 1

  new Dice("dice1","throw1",{

  possible_throws: 1,

  value_set: value_set,

  images: images,

  result_callback: function(throw_nr,result_key){

// Save result to embedded data field (need
  //not be set through survey flow settings)
  Qualtrics.SurveyEngine.setEmbeddedData('result_matrix_embedded', result_key);

// Set choice by result key, choice index respectively
  // Attention: choices must be in correct order (ie choice 1 must have value 1, etc)
  self.setChoiceValue('1', result_key, true)
  }
  });

});
 



Dear Ali,
 
I've tried what you wrote and it works great! However, unfortunately I now have a new problem that I did not think about earlier. The problem is that I don't know how to force the response. With default questions like multiple choice that's easy. I can just choose response requirements from the menu. I've chosen the question option Text/Graphic because with all
other options the participants have to make some entries (or I was too stupid to disable that). But now my participants can just go over the question without rolling the dice. I was thinking about whether there are any conditions that I can put on the continue button or any display conditions on the subsequent screen… But maybe there is even a smarter way to solve the problem. Do you have an idea?
 
Thanks in advance
Lilia
 


Hey! Thanks for your code. However, when I use this, I cannot see the dice... Does somebody know what I am doing wrong?

Thank you in advance!


Leave a Reply