I am finalizing the coding of a survey on Qualtrics which uses a lot of JavaScript. Unfortunately, for the most important question of my survey, JavaScript does not work [EDIT: does not load] when the question is not in first position in the survey. Yet, I need to ask other questions before as the graphs displayed on this question depend on previous answers.
It is very frustrating to see the code work here, when the question is in the first position inside the survey (one can see 5 graphs with blue bars, even if it takes some time for the data to load - ~15 seconds); but the graphs do not display anymore there, when I place the question in the second position (to see the absence of graphs, one thus have to answer the first question and click the button next).
FYI, I use jQuery and a a plotting library: jChartFX.
Does anyone have an idea on what could cause this?
[EDIT]: Here is my JavaScript code (excluding headers that load the libraries). It should be embedded in the headers of the HTML:
Qualtrics.SurveyEngine.addOnload(function()
{
$j(document).ready(function($j){
$j.ajax({
url:'https://login.qualtrics.com/WRQualtricsControlPanel/File.php?F=F_6yFft59YgdvIHfT',
success: function(data){
var actuelle, rawlsien, utilitarien;
var donnees_rawlsien, donnees_actuelle, donnees_utilitarien;
var prefere, egalitaire, actuelle, rawlsien, utilitarien;
var donnees_prefere, donnees_egalitaire; //, donnees_rawlsien, donnees_actuelle, donnees_utilitarien;
var donnees = {"utilitarien":donnees_utilitarien,"rawlsien":donnees_rawlsien,"egalitaire":donnees_egalitaire,"actuelle":donnees_actuelle,"prefere":donnees_prefere};
prefere = new cfx.Chart();
actuelle = new cfx.Chart();
egalitaire = new cfx.Chart();
rawlsien = new cfx.Chart();
utilitarien = new cfx.Chart();
donnees_egalitaire = new Array(2);
donnees_egalitaire[0] = {x: 0, y: 1800}
donnees_egalitaire[1] = {x: 1, y: 1800}
donnees_prefere = new Array(2);
donnees_prefere[0] = {x: 0, y: 1800}
donnees_prefere[1] = {x: 1, y: 1800}
var out = charge(data);
donnees_actuelle = out[0];
donnees_utilitarien = out[1];
donnees_rawlsien = out[2];
draw(utilitarien,"utilitarien", donnees_utilitarien);
draw(rawlsien,"rawlsien", donnees_rawlsien);
draw(actuelle,"actuelle", donnees_actuelle);
draw(egalitaire,"egalitaire", donnees_egalitaire);
draw(prefere,"prefere", donnees_prefere);
},
error: function(){
alert('Fail of data loading: utilitarien');
donnees_utilitarien = new Array(2);
donnees_utilitarien[0] = {x: 0, y: 1800}
donnees_utilitarien[1] = {x: 1, revenu: 1800}
}
});
function charge(texte) {
var dat=texte;
var tab=dat.split('\n');
var donnees_actuelle = new Array(100);
var donnees_utilitarien = new Array(100);
var donnees_rawlsien = new Array(100);
for (var i = 0; i<10; i++) {
donnees_actuelle[i] = {x:i, y:parseInt(tab[0].split('\t')[0])}
donnees_utilitarien[i] = {x:i, y:parseInt(tab[0].split('\t')[1])}
donnees_rawlsien[i] = {x:i, y:parseInt(tab[0].split('\t')[2])}
} (...)
donnees_actuelle[99] = {x:i, y:parseInt(tab[7].split('\t')[0])}
donnees_utilitarien[99] = {x:i, y:parseInt(tab[7].split('\t')[1])}
donnees_rawlsien[99] = {x:i, y:parseInt(tab[7].split('\t')[2])}
var out = new Array(3);
out[0] = donnees_actuelle;
out[1] = donnees_utilitarien;
out[2] = donnees_rawlsien;
return out;
}
function draw(graph, name, donnees) {
graph.setGallery(cfx.Gallery.Bar);
graph.getAllSeries().setVolume(100);
var axeY = new cfx.FieldMap();
axeY.setName("y");
axeY.setUsage(cfx.FieldUsage.Value);
graph.getDataSourceSettings().getFields().add(axeY);
graph.setDataSource(donnees);
graph.getAxisY().setMax(12000);
graph.getAxisX().setVisible(false);
graph.getAxisY().setStep(1000);
graph.setBackColor('#00FFFFFF');
var titreX, titreY;
titreY = new cfx.TitleDockable();
titreY.setText("niveau de vie (€/mois)");
titreY.setTextColor("#57ACDA");
graph.getAxisY().setTitle(titreY);
graph.getLegendBox().setDock(cfx.DockArea.Top);
graph.getSeries().getItem(0).setText("Niveau de vie des français (en €/mois)");
graph.getSeries().getItem(0).setColor("#FF0000");
graph.getLegendBox().setTextColor("#FF0000");
graph.getLegendBox().setMarginX(250);
var divHolder = document.getElementById(name);
graph.create(divHolder);
}
});
});
