How to apply my cool HTML and javascript to a consent page? | XM Community
Skip to main content

I have this cool html template with bouncing nodes. BUt when I copy paste this into the custom HTML for my first question (a “text/graphic” type), it does work. Here is my code: 

```
 

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

  <!-- Bootstrap CSS -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">

  <title>Your Website</title>

  <!-- Your Custom CSS -->
  <style>
    :root {
      --jet: #292929ff;
      --baby-powder: #fcfff7ff;
      --timberwolf: #d5d5d5ff;
      --imperial-red: #f05252ff;
      --medium-slate-blue: #826aedff;
    }

    body {
      background-color: var(--jet);
      color: var(--baby-powder);
      overflow: hidden;
    }

    .navbar, .footer {
      background-color: var(--medium-slate-blue);
    }

    .btn-primary, .bg-primary {
      background-color: var(--imperial-red);
      border-color: var(--imperial-red);
    }

    .text-primary {
      color: var(--imperial-red);
    }

    .btn-secondary, .bg-secondary {
      background-color: var(--timberwolf);
      border-color: var(--timberwolf);
    }

    .text-secondary {
      color: var(--timberwolf);
    }

    .container {
      max-width: 40%;
      padding-top: 50px; /* Adjust this value to your preference */
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Big title</h1>
    <p>Here is some text.
    </p>
  </div>

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

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

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

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

    function draw() {
      background(41, 41, 41);

      for (let i = 0; i < numNodes; i++) {
        const node = nodesi];
        const x = noise(node.offsetX) * width;
        const y = noise(node.offsetY) * height;

        fill(x, y, 82);
        ellipse(x, y, node.size);

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

    function windowResized() {
      resizeCanvas(windowWidth, windowHeight);
    }
  </script>

  <!-- jQuery and Bootstrap Bundle JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js"></script>
</body>
</html>
```

Hi @qualtrics_questions,

 

I don’t see any question here. Are you asking a question or just showing the code? 

I have this cool html template with bouncing nodes. BUt when I copy paste this into the custom HTML for my first question (a “text/graphic” type), it does work. Here is my code: 

```

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

  <!-- JavaScript -->
  <script>
    const numNodes = 50; // 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: 10,
          offsetX: random(1000),
          offsetY: random(1000),
          speed: 0.0005
        });
      }
    }

    function draw() {
      background(41, 41, 41);

      for (let i = 0; i < numNodes; i++) {
        const node = nodesi];
        const x = noise(node.offsetX) * width;
        const y = noise(node.offsetY) * height;

        fill(x, y, 82);
        ellipse(x, y, node.size);

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

    function windowResized() {
      resizeCanvas(windowWidth, windowHeight);
    }
  </script>

  <!-- jQuery and Bootstrap Bundle JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js"></script>
```

This part of your code is the issue. Qualtrics strips Javascript out of custom HTML. You’ll need to move this to two different places:

  • There is a separate window where you can paste this in, if you click on the “</> Javascript” button in the “Edit Question” menu. For portions of this code with the format <script> X </script>, you can paste in X (without the script tags) into the addOnLoad() section.
  • For the portions that have the format <script src=”X”></script>, you need to instead paste this entire thing (including the script tags) as HTML of the “Header” section in Look and Feel → General. Make sure that you’re pasting it as HTML, not as text (click “Edit” and then click the “</>” button in the editor).

 

Leave a Reply


Terms & Conditions