Hi everyone, I implemented a canvas in my Qualtrics survey for people to sketch on and I was expecting people could upload their sketch by clicking a button. Currently I figured out how to attach the current the sketch but I didn’t find a way to finish the uploading process. Is that even doable in Qualtrics? Thank you!

I forgot to include the bit about updating the question text to include it. Sorry about that! I updated my post to include it, and it is also below:Use the Rich Content Editor’s HTML/Source view “<>” to update the Question Text with the below:<input type="color" class="js-color-picker color-picker"> <input value="1" type="range" min="1" max="72" class="js-line-range"> <label class="js-range-value">1</label>Px<br><br>Please draw below:

Hi, I think with Qualtrics there are 2 ways to upload images to the dataset. One would be to use the File Upload question type. The other would be to use the Signature question type. The Signature question type is actually already pretty suited to handle drawing images. I've modified this question type to expand the signature box, hide the sign line and X, and created a canvas on top of it that supports changing color and brush width.To give it a try, first create a Signature question. Set the Box size to “Large” and disable the “Show ‘sign here’” toggle.Then, use the Rich Content Editor’s HTML/Source view “<>” to update the Question Text with the below:<input type="color" class="js-color-picker color-picker"> <input value="1" type="range" min="1" max="72" class="js-line-range"> <label class="js-range-value">1</label>Px<br><br>Please draw below:Then, add the following to the OnLoad section of the question’s JavaScript to create the canvas:var qid = this.questionId;const canvas = document.getElementById(qid+'-Signature')const context = canvas.getContext("2d");canvas.height = 300;canvas.width = 800;const colorPicker = document.querySelector( '.js-color-picker');colorPicker.addEventListener( 'change', event => { context.strokeStyle = event.target.value; } );const lineWidthRange = document.querySelector( '.js-line-range' );const lineWidthLabel = document.querySelector( '.js-range-value' );lineWidthRange.addEventListener( 'input', event => { const width = event.target.value; lineWidthLabel.innerHTML = width; context.lineWidth = width;} );context.lineCap = "round";context.lineJoin = "round";/*Drawing the lines*/let drawing = false;function startDrawing(e) { drawing = true; context.beginPath();}window.addEventListener("mousedown", startDrawing);window.addEventListener("touchstart", startDrawing);function endDrawing(e) { drawing = false;}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();}window.addEventListener("mousemove", draw);window.addEventListener("touchmove", draw);function startDrawing(e) { drawing = true; context.beginPath(); draw(e);}Finally, add the below CSS to the Style section of the survey’s Look & Feel:@media (min-width: 480px) { .SignatureBox { width: 1200px !important; height: 450px !important;}}.SignLine, .SignatureX {display: none;}

Uploading a .png file using javascript with a hidden file upload question.

Uploading a .png file using javascript with a hidden file upload question. | Experience Community

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded