Utilize JavaScript to load images at random within a Qualtrics loop and merge block

I'm currently putting together a survey on qualtrics using a block with loop and merge functionality. I've encountered an issue where, after the first iteration, the images I'm loading through javascript start disappearing. Although I can briefly see them when the question is loading, they vanish right after.

Can someone help me troubleshoot this problem? What am I missing or doing wrong?

Check out the code snippet below:

Qualtrics.SurveyEngine.addOnload(function()
{
    var count =  Number("${e://Field/count}");

    var dirs = ["sensitive-text", "sensitive-notext", "nonsensitive-text", "nonsensitive-notext"]

    var seq =  "${e://Field/sequence}";

    curStr = seq.split(",")[count]
    cur = Number(curStr)

    dir = dirs[0];
    if (cur >= 100 && cur<200)
    {
        dir = dirs[1];
    }
    else if (cur >= 200 && cur < 300)
    {
        dir = dirs[2];
    }
    else if (cur>=300 )
    {
        dir = dirs[3];
    }

    path = "https://juhu.soic.indiana.edu/rakhasan/picshare/" + dir+"/"+curStr+".jpg";
    var img = document.getElementById("img");
    img.src=path;
    img.style.display = 'block'
    img.style.height = '1000px'
    img.style.width="700px"

    Qualtrics.SurveyEngine.setEmbeddedData("count", count+1) ;
});

The Seq field contains randomized data for each trial.

javascriptqualtrics

Answer №1

Upon conducting some testing, it appears that resolving the issue you are encountering involves setting the page transition to None. However, if you still desire a transition effect, an alternative solution is to encapsulate all your additional code within a setTimeout function. The root of the problem lies in the fact that the 'img' element from the previous page remains loaded when the code for the subsequent page executes. This occurrence is a result of the transition effects retaining the previous page's content as the new page loads.

Below is the revised working code:

Qualtrics.SurveyEngine.addOnload(function () {
setTimeout(function () {
var count = Number("${e://Field/count}");

var dirs = ["sensitive-text", "sensitive-notext", "nonsensitive-text", "nonsensitive-notext"]

var seq = "${e://Field/sequence}";

curStr = seq.split(",")[count]
cur = Number(curStr)

dir = dirs[0];
if (cur >= 100 && cur < 200) {
dir = dirs[1];
} else if (cur >= 200 && cur < 300) {
dir = dirs[2];
} else if (cur >= 300) {
dir = dirs[3];
}

path = "https://juhu.soic.indiana.edu/rakhasan/picshare/" + dir + "/" + curStr + ".jpg";
var img = document.getElementById("img");
img.src = path;
img.style.display = 'block'
img.style.height = '1000px'
img.style.width = "700px"

Qualtrics.SurveyEngine.setEmbeddedData("count", count + 1);
}, 500);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting header details for optimal data transfer

Currently, there is a Java code snippet that I am working on which attempts to access the header information sent by an HTML page. Unfortunately, I do not currently have the specific HTML page in question. However, I still need to be able to access and m ...

javajavascripthtmlhttpheader

Increase the bottom padding or add some extra space to the Bootstrap form or page

I am currently working on enhancing a Bootstrap Form that includes reset/submit buttons positioned at the bottom. A common issue is when iPhone users attempt to click the Submit button, which initially displays Safari icons before requiring an extra tap to ...

javascriptjqueryhtmlcsstwitter-bootstrap

Regular expressions tailored for a precise format in JavaScript

Is it possible to create a regex that can validate a specific format? For example, if I have version numbers like v1.0 or v2.0 v1.0 or v2.0 My current regex expression only validates the existence of v, a number, or a .. How can I implement validation ...

javascriptregex

Methods for hiding and showing elements within an ngFor iteration?

I am working on an ngFor loop to display content in a single line, with the option to expand the card when clicked. The goal is to only show the first three items initially and hide the rest until the "show more" button is clicked. let fruits = [apple, o ...

javascriptangular

JavaScript - Sort an array containing mixed data types into separate arrays based on data

If I have an array such as a=[1,3,4,{roll:3},7,8,{roll:2},9], how can I split it into two arrays with the following elements: b=[1,3,4,7,8,9] c=[{roll:3},{roll:2}]. What is the best way to separate the contents of the array? ...

javascriptarraysangularjsnode.js

Steps to generate a fresh array from a given array of objects in JavaScript

Looking to transform an existing array into a new array of objects in Vue.js. Here's the initial array : import { ref } from 'vue'; const base_array = ref([ {id: 1, name: Pill, timing: [morning, noon, evening, night]}, {id: 2, name: Ta ...

javascriptarraysvue.js

Folding without extending

My button has a div inside it with content. I've set it up so that when the div is clicked, the collapsed content expands. The hover effect changes color and pointer as expected. But for some reason, clicking on the div doesn't expand the content ...

javascripthtmlcss

Maintain the selected bootstrap tab even after the page is refreshed, even when the content is loaded dynamically

I am currently facing an issue with loading tabs using Angular. Whenever a tab is clicked, the id is saved to localStorage. Now, I want to programmatically click on the same tab using jQuery when the page refreshes. However, since the DOM element for the ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Exploring the potential of Framework7 in Single Page Applications: optimizing performance by preloading

I'm currently working on developing a web application using Framework7. Framework7 offers routing APIs for navigating between HTML pages. It seems that the pages are loaded dynamically through AJAX requests. I am curious if it is possible to preload ...

javascriptjqueryhtmlcsshtml-framework-7

Transform an HTML table string into JSON format

I discovered a useful library called table to JSON that allows me to convert an HTML Table to JSON using its ID (#testtable in the example below): var table = $('#testtable').tableToJSON(); alert(JSON.stringify(table)); However, I am interested ...

javascriptjqueryjsonhtml-table

Issue TS2349 occurs when attempting to use a combination of boolean and function types within union typing

In my class, there is a property called "isVisible" which can be either a boolean value or a function that returns a boolean. The code snippet below demonstrates what I am currently using. It works fine and achieves the desired result, but during compilat ...

javascripttypescript

Troubleshooting Nested jQuery Plugin Selector Problems

I'm looking to have the ability to nest one plugin inside another. However, my selectors seem too broad and are capturing elements within the nested plugin as well. For instance, consider the following HTML structure: <div class="my-plugin"> ...

javascriptjqueryjquery-selectors

Forwarding to another page following an AJAX post request to a Django view

I've been struggling to get this basic piece of code to work properly, despite trying numerous resources. I can't seem to pinpoint where I'm going wrong. Essentially, I have a javascript function submitData() that is supposed to make an ajax ...

javascriptajaxdjango

Merge two distinct JSON objects obtained through an API request using Javascript

Struggling with my currency conversion project, I'm trying to display JSON response results on my website but can't seem to make it work. The code snippet below, .then((response) => { return response.json(); }) .then((jsonRespo ...

javascriptjsonrest

Tips for creating a scale animation using HTML5 Canvas

I am currently developing a canvas whiteboard tool and I have reached the stage where I am focusing on implementing the Zoom In and Zoom Out feature. While the functionality is working fine, I would like to enhance it with smooth animations for scaling. H ...

javascriptanimationcanvashtml5-canvasscale

Creating a classification for a higher order function

In the code snippet below, I have a controller that acts as a higher order method: const CourseController = { createCourse: ({ CourseService }) => async (httpRequest) => { const course = await CourseService.doCreateCourse(httpRequest. ...

javascriptjsdoc

Exploring the process of reading a file from a specified file path within a text area using jQuery

I am looking for a way to dynamically read a file based on its path, and then display the contents of that file in a text area. I have attempted to do this with the following code, but it is not working as expected. Here is the code snippet: goog ...

javascriptjquery

Adjust the width of a div within a nested iframe using jQuery without the need for an identifying ID on the iframe itself

Below is the code sample I'm working with: <iframe> <div id="inner_div"> Here's some text! </div> </iframe> I am aware that by adding an id to the iframe, I could follow the instructions provided here to access t ...

javascriptjqueryiframe

Tips for utilizing canReuse and routerOnReuse in Angular 2

I've reviewed the information provided in this link, but I'm still unsure about how to effectively utilize it. My requirement is straightforward—I need to update a parameter in the URL without constantly sending API requests, which are current ...

javascriptangular

Enhance the existing User model in loopback by adding additional properties and functionalities

In my loopback app, I am looking to create a model that represents a user profile. However, the default User model provided by loopback only includes the properties: username password realm emailVerified I am wondering what is the most effective approac ...

javascriptnode.jsmodelloopbackjs