Issues Integrating a Java Script in Study | XM Community
Solved

Issues Integrating a Java Script in Study


Hello,
I have both an HTML and Java script for a random number generator, but the Java Script does not appear to be loading. Could someone with experience with this help identify the problem?
Here is the site with the script for ease if the following is too long:
https://codepen.io/YuriSales/pen/XWmPjYm
HTML Script:


 

  

  

  

  

  

 

  
 





Java Script:
const SLOTS_PER_REEL = 10;
// radius = Math.round( ( panelWidth / 2) / Math.tan( Math.PI / SLOTS_PER_REEL ) ); 
// current settings give a value of 149, rounded to 150
const REEL_RADIUS = 120;
const TYPE = '3'; // 0: random, 1: 3000, 2: 0030, 3: 3000-0030

var isMixing = false;
var currentType = '1';

function createSlots (ring) {
var slotAngle = 360 / SLOTS_PER_REEL;

var seed = 0;

for (var i = 0; i < SLOTS_PER_REEL; i ++) {
var slot = document.createElement('div');

slot.className = 'slot';

// compute and assign the transform for this slot
var transform = 'rotateX(' + (slotAngle * i) + 'deg) translateZ(' + REEL_RADIUS + 'px)';

slot.style.transform = transform;

// setup the number to show inside the slots
// the position is randomized to 

var content = $(slot).append('

' + ((seed + i)%SLOTS_PER_REEL)+ '

');

// add the poster to the row
ring.append(slot);
}
}

function getSeed(type = '0', id = 0) {
// generate random number smaller than 13 then floor it to settle between 0 and 12 inclusive
 if (type == '1')
  return id == 0 ? 3 : 0;
 else if (type == '2')
  return id == 2 ? 3 : 0;
return Math.floor(Math.random()*(SLOTS_PER_REEL));
}

function spin(timer) {
 setTimeout(function () {
  spin(isMixing ? 1 : 2);
 }, isMixing ? 100 : 5000);
//var txt = 'seeds: ';
for(var i = 1; i < 5; i ++) {
var oldSeed = -1;
/*
checking that the old seed from the previous iteration is not the same as the current iteration;
if this happens then the reel will not spin at all
*/
var oldClass = $('#ring'+i).attr('class');
if(oldClass.length > 4) {
oldSeed = parseInt(oldClass.slice(10));
console.log(oldSeed);
}
var seed = getSeed();
while(oldSeed == seed) {
seed = getSeed();
}
   
  if (TYPE != '0')
  seed = isMixing ? '9' : getSeed(currentType, i - 1);
   
$('#ring'+i)
.css('animation','back-spin 1s, spin-' + seed + ' ' + (timer + i*0.5) + 's')
.attr('class','ring spin-' + seed);
}
 isMixing = !isMixing;
  
 if (!isMixing) {
  if (TYPE == '3')
   currentType = (currentType == '1' ? '2' : '1');
 }

console.log('=====');
}

$(document).ready(function() {

// initiate slots 
  createSlots($('#ring1'));
  createSlots($('#ring2'));
  createSlots($('#ring3'));
  createSlots($('#ring4'));

  // hook start button
  $('.go').on('click',function(){
  var timer = 2;
  spin(timer);
   document.getElementById("go").style.display = "none";
})

  // hook xray checkbox
  $('#xray').on('click',function(){
  //var isChecked = $('#xray:checked');
  var tilt = 'tiltout';
 
  if($(this).is(':checked')) {
  tilt = 'tiltin';
  $('.slot').addClass('backface-on');
  $('#rotate').css('animation',tilt + ' 2s 1');

setTimeout(function(){
 $('#rotate').toggleClass('tilted');
    console.log('A');
},2000);
  } else {
   tilt = 'tiltout';
  $('#rotate').css({'animation':tilt + ' 2s 1'});

setTimeout(function(){
$('#rotate').toggleClass('tilted');
$('.slot').removeClass('backface-on');
},1900);
  }
  })

  // hook perspective
  $('#perspective').on('click',function(){
  $('#stage').toggleClass('perspective-on perspective-off');
  })
 });

icon

Best answer by TJUH_Kai 18 May 2020, 15:41

View original

5 replies

Userlevel 3
Badge +2

Hi BradyG ,
I am able to deploy your proof of concept into Qualtrics without any issue, except some minor css issue. Here is what I did:

  1. I copy the html into the question title's HTML view

  2. I copy the css into Look & Feel tab, Style tab, Custom CSS section

  3. I copy the javascript into the question's Add JavaScript, addOnload function

I attached the survey export which I implemented your proof of concept with minor inline css in the html. You can import it into your Qualtrics instance.
Test_random.qsf

Userlevel 3
Badge +2

BradyG By the way, great job with the random rotating wheels. It looks really nice, when I have time I am going to read it in detail and see how you create it. It looks very nice!

TJUH_Kai,

You're amazing. Thank you so much for taking the time to look in to this and providing such great help! It's really appreciated.

Regards,
G

Hey Kai,
I wanted to ask if in the code you could find where I could change such that it will stop spinning after it's first rotation?

-G

Userlevel 3
Badge +2

Hi Brady,
You should really hire a web developer to do this, or learn how to read JavaScript. This forum is about how to use Qualtrics and not really trying to help people to solve JavaScript problem.
Good luck, i know you can do it! Just read the JavaScript!
-Kai

Leave a Reply