Forum Discussion

John_Reddinger's avatar
John_Reddinger
Community Member
5 days ago

Signature box - not working?

I've used Copilot to create a signature box interaction. The signature isn't actually stored anywhere -- it's just a way to emphasize importance to the user -- however when you sign and click "Finish", it will store a variable in the browser to be used by a Storyline Block later in the lesson.

When I pasted the code into the Code Block, the interaction displays as expected, but nothing appears when you try to write/draw inside the box. The "Finish" button does unlock as if you've signed it, and the variable seems to be getting passed when you click "Finish". It just doesn't show the signature.

Copilot says this may be due to iFrame restrictions, or Touch Events being blocked.
Anyone have any knowledge of this to help me troubleshoot?

Full code is below.

Thanks!


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Signature Box</title>
  <style>

body, html {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
}

.wrapper {
  text-align: center;
}

    #signature-pad {
      border: 2px solid #ccc;
      border-radius: 4px;
      width: 100%;
      max-width: 500px;
      height: 200px;
      touch-action: none;
      cursor: crosshair;
    }
    #instructions {
      font-size: 0.9em;
      color: black;
      margin-top: 5px;
    }
    #buttons {
      margin-top: 10px;
    }
    button {
        margin-right: 10px;
        padding: 8px 16px;
        background-color: green;
        text-transform: uppercase;
    }
  </style>
</head>
<body>
<div id="wrapper">
  <canvas id="signature-pad"></canvas>
  <div id="instructions">Use your mouse or finger to add your signature. Then, click "Finish."</div>
  <div id="buttons">
    <button id="reset-btn">Reset</button>
    <button id="submit-btn" disabled>Finish</button>
  </div>
</div>
  <script>
    const canvas = document.getElementById('signature-pad');
    const ctx = canvas.getContext('2d');
    const resetBtn = document.getElementById('reset-btn');
    const submitBtn = document.getElementById('submit-btn');

    let drawing = false;
    let hasDrawn = false;

    // Resize canvas to match display size
    function resizeCanvas() {
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    }
    resizeCanvas();

    function startDrawing(e) {
      drawing = true;
      ctx.beginPath();
      ctx.moveTo(getX(e), getY(e));
    }

    function draw(e) {
      if (!drawing) return;
      ctx.lineTo(getX(e), getY(e));
      ctx.stroke();
      hasDrawn = true;
      submitBtn.disabled = false;
    }

    function stopDrawing() {
      drawing = false;
    }

    function getX(e) {
      return e.clientX || e.touches[0].clientX - canvas.getBoundingClientRect().left;
    }

    function getY(e) {
      return e.clientY || e.touches[0].clientY - canvas.getBoundingClientRect().top;
    }

    // Mouse events
    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', stopDrawing);
    canvas.addEventListener('mouseout', stopDrawing);

    // Touch events
    canvas.addEventListener('touchstart', startDrawing);
    canvas.addEventListener('touchmove', draw);
    canvas.addEventListener('touchend', stopDrawing);

    resetBtn.addEventListener('click', () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      hasDrawn = false;
      submitBtn.disabled = true;
      canvas.style.pointerEvents = 'auto';
    });

    submitBtn.addEventListener('click', () => {
      canvas.style.pointerEvents = 'none'; // Disable further input
      localStorage.setItem('interactionComplete', 'true');
      alert('Signature submitted!');
    });
  </script>

</body>
</html>

 

1 Reply

  • John_Reddinger's avatar
    John_Reddinger
    Community Member
    5 days ago

    UPDATE: Looks like this is fixed! Copilot's explanation:

    Your JavaScript code is trying to use the canvas variable before it has been defined or initialized. You can fix this by wrapping your JavaScript code in a DOMContentLoaded event listener, which ensures the DOM is fully loaded before your script runs.

    Fixed code below.

    
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Signature Box</title>
  <style>

body, html {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
}

button {
  cursor: pointer;
}


#signature-pad {
  width: 500px;
  height: 200px;
}

.wrapper {
  text-align: center;
}

    #signature-pad {
      border: 2px solid #ccc;
      border-radius: 4px;
      width: 100%;
      max-width: 500px;
      height: 200px;
      touch-action: none;
      cursor: crosshair;
    }
    #instructions {
      font-size: 0.9em;
      color: #ccc;
      margin-top: 5px;
    }
    #buttons {
      margin-top: 10px;
    }
    button {
        margin-right: 10px;
        padding: 8px 16px;
        background-color: blue;
        text-transform: uppercase;
    }
    
#submit-btn.submitted {
  background-color: green;
  color: white;
}

  </style>
</head>
<body>
<div id="wrapper">
  <canvas id="signature-pad"></canvas>
  <div id="instructions">Use your mouse or finger to add your signature. Then, click "Finish."</div>
  <div id="buttons">
    <button id="reset-btn">Reset</button>
    <button id="submit-btn" disabled>Finish</button>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const canvas = document.getElementById('signature-pad');
    const ctx = canvas.getContext('2d');
    const resetBtn = document.getElementById('reset-btn');
    const submitBtn = document.getElementById('submit-btn');

    let drawing = false;
    let hasDrawn = false;

    function resizeCanvas() {
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    }
    resizeCanvas();

    function startDrawing(e) {
      drawing = true;
      ctx.beginPath();
      ctx.moveTo(getX(e), getY(e));
    }

    function draw(e) {
      if (!drawing) return;
      ctx.lineTo(getX(e), getY(e));
      ctx.stroke();
      hasDrawn = true;
      submitBtn.disabled = false;
    }

    function stopDrawing() {
      drawing = false;
    }

    function getX(e) {
      return (e.clientX || e.touches[0].clientX) - canvas.getBoundingClientRect().left;
    }

    function getY(e) {
      return (e.clientY || e.touches[0].clientY) - canvas.getBoundingClientRect().top;
    }

    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', stopDrawing);
    canvas.addEventListener('mouseout', stopDrawing);

    canvas.addEventListener('touchstart', startDrawing, { passive: false });
    canvas.addEventListener('touchmove', draw, { passive: false });
    canvas.addEventListener('touchend', stopDrawing);


resetBtn.addEventListener('click', () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  hasDrawn = false;
  submitBtn.disabled = true;
  localStorage.setItem('interactionComplete', 'false');
  canvas.style.pointerEvents = 'auto';
  submitBtn.classList.remove('submitted');
});



submitBtn.addEventListener('click', () => {
  canvas.style.pointerEvents = 'none';
  localStorage.setItem('interactionComplete', 'true');
  submitBtn.classList.add('submitted');
});

  });
</script>

</body>
</html>