Uploading a file to qualtrics with JavaScript | XM Community
Skip to main content
Solved

Uploading a file to qualtrics with JavaScript

  • January 28, 2020
  • 2 replies
  • 257 views

npetrov937
Level 2 ●●
Forum|alt.badge.img+4
Currently I have a question formatted like a certificate and a button which allows the participant to print that certificate to pdf: Survey link here I would like to know if there is a way where I can automatically press the button the fly (even without the participant doing that) and instead of asking the user to save it, I would like to upload it to the Qualtrics library (or anywhere really) so I can have it for future use. Is this possible? My use code below (relevant scripts are already imported in the look and feel's header and the button has an id of "mybutton2"). This is my JS code (in the AddOnLoad function of course): function getPDF() { domtoimage.toPng( document.querySelector(".canvas_div_pdf"), { width: 760, height: 960, quality: 1} ) .then(function(dataUrl) { var doc = new jsPDF(); var img = new Image(); img.src = dataUrl; img.onload = function() { doc.addImage(img, 'PNG', 10, 15); doc.save('filename.pdf'); }; }) .catch(function (error) { console.error('oops, something went wrong!', error); }); } document.getElementById("mybutton2").onclick = getPDF And this is the HTML for the ceritficate: `<div class="canvas_div_pdf" height="960" style="float:center" width="760"> <div style="width:720px; height:910px; padding:20px; text-align:center; border: 10px solid #787878"> <div style="width:660px; height:850px; padding:20px; text-align:center; border: 5px solid #787878"><img src="https://greenwichuniversity.eu.qualtrics.com/CP/Graphic.php?IM=IM_ddx9xOyKvXyMv5P" style="width: 270px; height: 180px; align=left"><br> <span style="font-size:26px;"><span style="font-weight: bold;">Certificate of Completion</span></span><br> <br> <span style="font-size:20px"><i>This is to certify that</i></span><br> <br> <span style="font-size: 24px;"><b><Name or Code></b></span><br> <br> <span style="font-size:20px"><i>has completed the tests</i></span><br> <br> <span style="font-size:24px"><b>designed for TBC</b></span><br> <br> <span style="font-size:20px"><i>with the following scores</i>:</span><br> <br> <span style="font-size:20px">Cambridge Face Memory test: <b>XX</b></span><br> <br> <span style="font-size:20px">Glasgow Face Matching test: <b>XX</b></span><br> <br> <span style="font-size:20px">30/60: <b>XX</b></span><br> <br> <img src="https://greenwichuniversity.eu.qualtrics.com/CP/Graphic.php?IM=IM_57ol2YuNCsRCYXb" style="width: 150px; height: 150px; float: left"> <span style="font-size:20px; float=right">Date: *today*</span></div> </div> </div>`

Best answer by rondev

Add below line document.getElementById("mybutton2").onclick = getPDF jQuery("#mybutton2").click(); For Upload: Create doc to png and use this API

2 replies

rondev
Level 6 ●●●●●●
Forum|alt.badge.img+22
  • Level 6 ●●●●●●
  • Answer
  • January 28, 2020
Add below line document.getElementById("mybutton2").onclick = getPDF jQuery("#mybutton2").click(); For Upload: Create doc to png and use this API

npetrov937
Level 2 ●●
Forum|alt.badge.img+4
  • Author
  • Level 2 ●●
  • January 29, 2020
@rondev , I need to double check if my university has access to API which is a bit tricky. But I do think that API is the only way to do that sort of thing - thanks! Nikolay