Uploading a file to qualtrics with JavaScript | XM Community
Solved

Uploading a file to qualtrics with JavaScript

  • 28 January 2020
  • 2 replies
  • 171 views

Userlevel 4
Badge +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>`
icon

Best answer by rondev 28 January 2020, 13:18

View original

2 replies

Userlevel 7
Badge +22
Add below line
document.getElementById("mybutton2").onclick = getPDF
jQuery("#mybutton2").click();


For Upload:

Create doc to png and use this API
Userlevel 4
Badge +4
@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

Leave a Reply