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>`
Page 1 / 1
Add below line
document.getElementById("mybutton2").onclick = getPDF
jQuery("#mybutton2").click();
For Upload:
Create doc to png and use this API
document.getElementById("mybutton2").onclick = getPDF
jQuery("#mybutton2").click();
For Upload:
Create doc to png and use this API
@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
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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.