Elements of Javascript don’t show in published version of the survey

Question

Hello!I am working on a survey, within the survey I use HTML and Javascript code to generate a scatter plot where participants should input points (two points connected with a line), and a Reset Graph button. The published version of the survey works correctly ONLY in Safari when I’m logged into Qualtrics, it shows both the scatter plot and the Reset Graph button. If I open the survey literally anywhere else (chrome, Firefox, other computers), the published version only shows the Reset Graph button, NOT the scatter plot. I tried to recreate a new project using the final Javascript / HTML code version, and looked into the settings of the survey, however, I could not resolve the issue. Can somebody please help me figure out what’s going on? Thank you!I attach JS / HTML code, and two screenshots of published versions where the scatter plot shows and doesn’t show - below:HTML: Scatter Plot with Plotly

JavaScript:// Comment: this version works, but needs additional styling of the Reset ButtonQualtrics.SurveyEngine.addOnload(function(){ /*Place your JavaScript here to run when the page loads*/ // (start of the Onload code) var d3 = Plotly.d3; var imgWidth = 0; var imgHeight = 0; const imgs = new Image(); let plotCon = document.getElementById('plotlyContainer'); let resetButton = document.getElementById('resetButton'); imgs.onload = function() { imgWidth = this.width; imgHeight = this.height; loadImgGraph(imgWidth, imgHeight); } imgs.src = 'https://i.sstatic.net/cRbua.png'; function loadImgGraph(imgWidth, imgHeight) { var data = [ { x: [], y: [], type: 'scatter' } ]; var layout = { autoscale: false, xaxis: { autorange: false, fixedrange: true, range:[0, 100], anchor: 'y', side: 'bottom', zeroline: false }, yaxis: { autorange: false, fixedrange: true, range:[0, 100], anchor: 'x', side: 'left', zeroline: false }, margin: { l: 32, r: 20, b: 30, t: 30 }, }; // Create the graph Plotly.newPlot('plotlyContainer', data, layout, {displayModeBar: false}).then(clickEv); function clickEv() { var xaxis = plotCon._fullLayout.xaxis; var yaxis = plotCon._fullLayout.yaxis; var l = plotCon._fullLayout.margin.l; var t = plotCon._fullLayout.margin.t; // Display point coordinates at the top of the screen plotCon.addEventListener('mousemove', function(evt) { var rect = plotCon.getBoundingClientRect(); var xInDataCoord = xaxis.p2d(evt.clientX - rect.left - l).toFixed(1); var yInDataCoord = yaxis.p2d(evt.clientY - rect.top - t).toFixed(1); Plotly.relayout(plotCon, 'title', ['x: ' + xInDataCoord, 'y: ' + yInDataCoord].join('
')); }); // Add 2 points plotCon.addEventListener('click', function(evt){ if (data[0].x.length < 2) { var rect = plotCon.getBoundingClientRect(); /* data[0].x.push(xaxis.p2c(evt.x - rect.left - l)) data[0].y.push(yaxis.p2c(evt.y - rect.top - t)) Plotly.update(plotCon, data, layout); */ Plotly.extendTraces(plotlyContainer, { x: [[xaxis.p2c(evt.x - rect.left - l)]], y: [[yaxis.p2c(evt.y - rect.top - t)]] }, [0]); Qualtrics.SurveyEngine.setJSEmbeddedData('field', JSON.stringify(plotlyContainer.data[0])); Plotly.update(plotCon, data, layout); } }); plotCon.on('plotly_click', function(){ alert('You clicked this Plotly chart!'); }); // Reset points resetButton.addEventListener('click', function() { data[0].x = []; data[0].y = []; Plotly.update(plotCon, data, layout); }); // Recording collected points into the Embedded Data in Qualtrics //Qualtrics.SurveyEngine.setJSEmbeddedData('field', JSON.stringify(plotlyContainer.data[0])); } } // end of the Onload code});Qualtrics.SurveyEngine.addOnReady(function(){ /*Place your JavaScript here to run when the page is fully displayed*/});Qualtrics.SurveyEngine.addOnUnload(function(){ /*Place your JavaScript here to run when the page is unloaded*/});Screenshots:

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded