Embedding Reddit Post in Qualtrics Survey not working

I'm trying to embed a reddit post in a qualtrics survey question and it doesn't seem to be working.

I have the following html in the question section:

<p>Please take a look at the following Reddit post:</p>
<div id="embeddedPost">
    <blockquote id="redditBlockquote" class="reddit-embed-bq" style="height:316px" data-embed-height="316">
        <a id="redditLink" href=""></a>
    </blockquote>
    <script async src="https://embed.reddit.com/widgets.js" charset="UTF-8"></script>
</div>

And then this code in the custom javascript section:

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});

Qualtrics.SurveyEngine.addOnReady(function()
{
    const redditUrls = ["https://www.reddit.com/r/copenhagen/comments/xfmjbi/secret_gems_of_cph/", "https://www.reddit.com/r/copenhagen/comments/tpn0tc/what_to_do_in_copenhagen_as_a_girl_in_her/", "https://www.reddit.com/r/copenhagen/comments/wnw6ad/in_copenhagen_for_1_day_what_are_some_mustsees/"];
    const randomIndex = Math.floor(Math.random() * redditUrls.length);
    const randomUrl = redditUrls[randomIndex];

    // Set the href attribute of the blockquote anchor tag
    const redditLink = document.getElementById('redditLink');
    redditLink.href = randomUrl;

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

But when I actually preview the question, it doesn't show up. When I inspect the element, the code seems fine.

screenshot of inspected element

Another thing I've tried is just hardcoding the reddit embedding in the question html itself.And that worked completely fine. One thing to note is when I inspect the element in this case, it has already converted to an iframe object and isn't tagged as a blockquote object anymore. I feel like this is where the problem is...

In my own js fiddle, my code works fine: https://jsfiddle.net/Lmbwcvqu/1/ so this seems to be qualtrics specific.

Does anyone know what might be going wrong?

Solution

The way these kind of widgets usually work, is that the script will go look for elements to "convert" when it has loaded.

You are only setting the href of the link dynamically, after the script has already been embedded - in your fiddle that works, because it happens fast enough, before the script has already finished loading. But if you wrap your code that sets the hraf into a setTimeout, with a five second delay, you should notice that it stops working - because the script doesn't find a valid reddit post URL on the link, the moment it initializes itself.

(Sometimes these widget scripts offer a method you can call, to make them go look for elements to convert again - but I can't even find any actual documentation for this reddit widget, so I don't know if that is the case here as well.)

And with the whole thing embedded via Qualtrics, you apparently have a similar problem - setting of the href happens too late.

You should be able to work around that, by only dynamically inserting the embed script, after you set the link href:

// ...
redditLink.href = randomUrl;
let s = document.createElement("script");
s.src="https://embed.reddit.com/widgets.js"
document.body.appendChild(s);