Hi all,

I am trying to modify the Signature question such that I can use it as a tracer scale for collecting psychometric time series data. Basically I took an image of a grid, inside my Qualtrics library, and then placed it inside the signature field using javascript.

So far so good, the only problem now is that the “clear” button gets rid of the image every time!

I am searching for different viable solutions:

1. Make the image inside the signature sketchpad permanent such that it is not affected by the clear button.
2. Redraw the image, everytime the clear button wipes the signature clean.
3. Get rid of the “clear” button altogether, and add a custom button which restarts the survey, if the participants want to redraw the lines.

I would dearly appreciate any help with any of these viable options. I have not found sufficient info to figure out how I can reference the “clear” button using html, java, or the CSS section, and hoping someone might know how to get rid of it, as this would be the quickest solution (although not very elegant).

Here is my code so far:
 

Qualtrics.SurveyEngine.addOnload(function() {
    var qid = this.questionId;
    const canvas = document.getElementById(qid + '-Signature');
    if (!canvas) return; // Exit if canvas is not found
    const context = canvas.getContext("2d");

    canvas.height = 300;
    canvas.width = 800;

    // Function to load custom image into the signature pad
    function loadCustomImage() {
        const customImage = new Image();
        customImage.src = "https://psychkonstanz.qualtrics.com/ControlPanel/Graphic.php?IM=IM_afpI7X9aj3r8hlj";
        customImage.onload = function() {
            context.drawImage(customImage, 0, 0, canvas.width, canvas.height);
        };
    }

    // Immediately load the custom image
    loadCustomImage();

    const colorPicker = document.querySelector('.js-color-picker');
    colorPicker.addEventListener('change', function(event) {
        context.strokeStyle = event.target.value;
    });

    const lineWidthRange = document.querySelector('.js-line-range');
    const lineWidthLabel = document.querySelector('.js-range-value');
    lineWidthRange.addEventListener('input', function(event) {
        const width = event.target.value;
        lineWidthLabel.innerHTML = width;
        context.lineWidth = width;
    });

    context.lineCap = "round";
    context.lineJoin = "round";

    // Drawing functionality
    let drawing = false;

    function startDrawing(e) {
        drawing = true;
        context.beginPath();
        draw(e);
    }

    window.addEventListener("mousedown", startDrawing);
    window.addEventListener("touchstart", startDrawing);

    function endDrawing() {
        drawing = false;
        context.beginPath(); // Reset the path to prevent continuous drawing
    }

    window.addEventListener("mouseup", endDrawing);
    window.addEventListener("touchend", endDrawing);

    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect(),
            scaleX = canvas.width / rect.width,
            scaleY = canvas.height / rect.height;
        return {
            x: (evt.clientX - rect.left) * scaleX,
            y: (evt.clientY - rect.top) * scaleY
        };
    }

    function draw(e) {
        if (!drawing) return;
        let { x, y } = getMousePos(canvas, e);
        context.lineTo(x, y);
        context.stroke();
        context.beginPath(); // Begin a new path to draw the next segment
        context.moveTo(x, y); // Move the path to the current mouse position
    }

    window.addEventListener("mousemove", draw);
    window.addEventListener("touchmove", draw);

    // Function to clear the canvas and redraw the custom image
    function clearCanvas() {
        context.clearRect(0, 0, canvas.width, canvas.height); // Clears the canvas
        loadCustomImage(); // Redraws the image
    }

    // Example: Attaching clearCanvas function to a clear button
    // Make sure to replace 'clearButton' with the actual ID of your clear button
    document.getElementById('clearButton').addEventListener('click', function() {
        clearCanvas();
    });
});