Calling in external .js file

Question

I'm not sure if this is titled correctly because I don't really understand coding, but I think you may be able to help. I'm able to get this to work in VSC based on the commented out line of code.

Line 1 in the code is referencing qrcode.min.js which is from https://davidshimjs.github.io/qrcodejs/.
I think the issue is I need to know the correct place to place the 'qrcode.min.js'  in the study file so it is referenced.  Presently it is in both \graphics\system and Auto Web Upload\graphics\system as that appears to be where all the other .js files are saved.

<script src="qrcode.min.js"></script>
    <script type="text/javascript">
        
        var qrdata = SSI_GetValue('testURL')
        var qrcode = new QRCode(document.getElementById('qrcode'),  {
            // text: "https://bing.com",
        });

        function generateQR()   {

            var data = qrdata.value;

            qrcode.makeCode(data)

        }

    </script>

Answer 1

You could put the file into the system folder, but I would not recommend it just to keep your future self from confusing default files with added files.  I would add the file either to the graphics folder or to my own subfolder of graphics.

To the question at hand, you can use the Sawtooth Script function GraphicsPath to get the path to the graphics directory.  This should work if you place the .js file directly into the graphics folder:

<script src="[% GraphicsPath() %]qrcode.min.js"></script>

Comments

Thanks Zach, now I'm following up on another strange behavior. Earlier in the question I am using SSI code to set the value for 'testURL'.

[% SetValue(testURL,"https://sawtoothsoftware.com) %]

just below this I'm using [% testURL %] and it displays the value correctly.

The I run the following script

<div id="qrcode"></div>  

<script src="[% GraphicsPath() %]qrcode.min.js"></script>
    <script type="text/javascript">
        
        var qrdata = SSI_GetValue('testURL')
        // var qrdata = 'https://google.com'
        var qrcode = new QRCode(document.getElementById('qrcode'),  {
            text: qrdata,
        });

        function generateQR()   {

          qrcode.makeCode(qrdata)
        }

    </script>

In line 6 I'm using SSI_GetValue to pull in the URL, but it is blank.  I have tried troubleshooting. On the next page I ran this code. where I simply want to pull in the value of the testURL and then display it via an alert.  The alert is blank. Any idea why?

    <script>
        
        var tempData = SSI_GetValue('testURL');
                
        alert (tempData);

    </script>

Moreover...I'm trying it using any values and it's populating as blank. For example, on the previous page I have an open ended question called 'firstName' replacing 'testURL' with 'firstName' on line 3 above also creates a blank field.

---

Why use SSI_GetValue instead of Sawtooth Script?  SSI_GetValue - and JavaScript in general - can only get values that exist on the current page.

---

This is a continuation of a multi-part study design (first part here: https://legacy.sawtoothsoftware.com/forum/31754/restarting-survey-using-different-browser-causes-data-loss)

We pre-tested the methodology and found that people were hesitant to provide their contact information (to then receive an email/sms). Alternatively, we offered respondents a business card with a QR code printed onto it. We received many more completed responses via the QR code.

So, what we are thinking is to generate a unique URL for each respondent (accomplished in the previous post) and then display that URL as a QR code on the page so if the respondent's bus/train arrives, or they don't feel comfortable giving contact info they can just scan the QR code and resume the survey (most of which is accomplished above).

So, in the body of the question I use Sawtooth Script to set the value of 'testURL.' In the same question, just a few lines below I run the JavaScript which, as we now know, doesn't get the value saved to 'testURL.' So, I'm hoping to somehow get that value into the JavaScript environment as a variable so the rest of the script can run.  

I'm going to spitball for a moment. I initially tested the JavaScript out in VSC where I used html to create a text field on the page. The script would then pull from the text field and generate the QR code.  I'm wondering if there is a way to do something similar here. Either through a hidden open ended question or using HTML. We create a text field on the page somewhere, populate the text field with the 'testURL' then use JavaScript to pull that text value and display the QR code.

Nearly all of this is working EXCEPT the passthru from Sawtooth Script to JavaScript.

---

I still don't understand why you can't just use Sawtooth Script where you need the value.  You said that "[% testURL %]" works, so why not use that in the JavaScript?

var qrdata = '[% testURL %]';

---

........well........um........because I didn't know I could do that.  
Now that i know, it works perfectly.

https://media2.giphy.com/media/SXqw0Vpql4sHX9pCl4/giphy.gif

---

Yep, you can use Sawtooth Script in JavaScript, just make sure that all possible outputs of the Sawtooth Script will produce valid JS.

One of the common problems there is what I did above.  "testURL" contains a string, so we would have gotten a JavaScript error if not for the apostrophes that surround the Sawtooth Script.  If the value for "testURL" could potentially contain an apostrophe, a backslash, or a new line character, we could still get broken JS.  That's solvable if you ever bump into it, though.

The other common problem to keep in mind is what will happen if the field is blank.  Example:

var x = [% NumericQ %]; // will be invalid JS if the question wasn't answered

var x = Number([% NumericQ %]); // will be valid; sets the variable to 0 if the question is unanswered