How can I include this simple javascript animation in a Qualtrics question? | XM Community
Skip to main content

I have a simple animation using the `p5.js` library. How do I include this in a Qualtrics “text/graphic” question? Here’s the code:

```
 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>


<!-- p5.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

<!-- JavaScript -->
<script>
const numNodes = 80; // Adjust the number of nodes as per your preference
const nodes = o];

function setup() {
createCanvas(windowWidth, windowHeight);
noStroke();

for (let i = 0; i < numNodes; i++) {
nodes.push({
x: random(width),
y: random(height),
size: random(10, 20),
offsetX: random(1000),
offsetY: random(1000),
speed: 0.0005
});
}
}

function draw() {
colorMode(RGB, 255)
background(41, 41, 41);

for (let i = 0; i < numNodes; i++) {
const node = nodes=i];
const x = noise(node.offsetX) * width;
const y = noise(node.offsetY) * height;
colorMode(HSB, 100)
fill(((sin((x - y) / 1000) + 1) / 2) * 100, 100, 100, ((sin((x - y) / 10000) + 1) / 2) * 100);
ellipse(x, y, node.size);

node.offsetX += node.speed;
node.offsetY += node.speed;
}
}


</script>

</body>
</html>
```

Be the first to reply!

Leave a Reply