Roll a dice using JavaScript in qualtrics | XM Community
Solved

Roll a dice using JavaScript in qualtrics

  • 11 March 2020
  • 7 replies
  • 151 views

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!
icon

Best answer by Ali5 11 March 2020, 22:46

View original

7 replies

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>
Userlevel 7
Badge +27
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 = [

  {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
 

Badge +2

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