Forum Discussion
Auto-Generate PDF Certificates in Storyline (No HTML Edits Needed)
It sounds to me like you are editing the comment in line 2, which won't affect how the program runs. In javascript, anything following // is a comment and will not be considered code by the program reading it.
The 2 edits you make should instead be:
- In line 62: remove orientation: 'landscape' so it is just curly brackets: {}
- The default for jsPDF is portrait A4, so we only need to define it as landscape if we want that way.
- The other thing is to change the size of the imported image in line 70. Swap the 297 and 210 in that line (the x and y lengths) so it reads (img, 0, 0, 210, 297)
- This will force whatever image you import to be 210mm wide and 297mm high, so make sure you change line 2 from the URL for my certificate to whatever certificate you have or else it will be distorted.
Let me know if this works! I see I didn't add instructions for making it portrait into my original post, so I'll edit it in.
Thank you so much Phil_Wingfield for answering my question. I have done the changes you told me, but I do not why when I test it the "download certificate" button does not appear 😭. I have done it several times as I really do not understand how this is affecting the appearance of the button. I have not altered any other section of the JavaScript. Line 2 with the link to the image, line 62 curly brackets and line 70 swap the numbers. Triggers have not been changed either. Here are some images. Any ideas of what the problem is?
Thank you!
In the file I made, the button change is triggered by a different javascript at the top, in the slide triggers panel: it shows the download button as soon as the user begins typing. Did you edit the javascript tied to the download button, or the one tied to when the timeline starts on this slide? You want to make sure the javascript in this post is triggered when you click the download button.
You could also try just making the download button's initial state to be normal rather than hidden.
Another thing you could try is just pasting your entire script into chatgpt and ask if there is any reason why it wouldn't work - generative ai is surprisingly good at catching errors in code.
It has finally worked! Thank you for all your comments. My only last comment is that the quality of the image in the link where the image is hosted looks crystal clear, however when it is placed in the Javascript and then downloaded from Storyline the resolution is not the same, so it decreases its quality a little bit. I contacted Storyline as I thought it was a problem with Storyline, but they said that the issue was about how Javascript handles image compression when converting the image into a document and that I should look for a workaround or a higher-quality rendering method 🫤. This is quite strange because the image that is used in your example looks crystal clear and does not seem to have that problem. I tried ChatGPT this time, but the resolution did not improve. Anyway, I think I will have to accept that!
I'm glad it worked Karenuqkolav1uq !
As far as the image compression, I notice some too, but for my purposes it hasn't been an issue. My hunch is that it is compressed through jsPDF - that is the pdf builder.
What I would try if I were you is to make the hosted image double the size it needs to be; instead of 297x210mm the uploaded image should be 594x420mm. jsPDF will still adjust it to the correct size, but it may be sharper. You shouldn't need to change anything for the code.
Let me know if it works, I'm curious!