Qualtrics using JavaScript library from someone else - chat simulator

Question

I want to build a survey that contains a fake chat. The subject will be participating in the chat.

I found this beautiful library of a chat simulator and tried to use it in one of the questions as following:

1. upload to my library all the js and css that used through a source link.
2. add the jquery script to the js option of the question in onLoad() function:

Qualtrics.SurveyEngine.addOnReady(function()
{
    jQuery(function($){
            var count = 0;
            var convForm = $('#chat').convform({eventList:{onInputSubmit: function(convState, ready) {
                console.log('input is being submitted...');
                //here you send the response to your API, get the results and build the next question
                //when ready, call 'ready' callback (passed as the second parameter)
                if(convState.current.answer.value==='end') {
                    convState.current.next = false;
                    //emulating random response time (100-600ms)
                    setTimeout(ready, Math.random()*500+100);
                } else {
                    if(Array.isArray(convState.current.answer)) var answer = convState.current.answer.join(', ');
                    else var answer = convState.current.answer.text;
                    convState.current.next = convState.newState({
                        type: 'select',
                        noAnswer: true,
                        name: 'dynamic-question-'+count,
                        questions: ['This question state was built on your previous answer (you answered: '+answer+') and doesnt expect an answer'],
                    });
                    convState.current.next.next = convState.newState({
                        type: 'select',
                        name: 'dynamic-question-'+count,
                        questions: ['This question state was built on your previous answer (you answered: '+answer+')'],
                        answers: [
                            {text: 'Answer 1', value: '1'},
                            {text: 'Answer 2', value: '2'},
                            {text: 'END', value: 'end'}
                        ]
                    });
                    //emulating random response time (100-600ms)
                    setTimeout(ready, Math.random()*500+100);
                }
                count++;
            }}});
        });

});

3. add to the header the <script src="<URL>"> </script> urls of the uploaded files to my library.
4. made a question through the rich content editor and edit the html:

<section id="demo">
        <div class="vertical-align">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-sm-offset-3 col-xs-offset-0">
                        <div class="card no-border">
                            <div id="chat">
                                <form action="" method="GET" class="hidden">
                                    <select data-conv-question="Hello! This is an example use of the plugin to dynamically generate questions (like using an API). This is the only question that was written on the initial HTML. To end the loop, select END." name="first-question">
                                        <option value="understood">Understood</option>
                                        <option value="okay">Okay, captain!</option>
                                    </select>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

But its not working - just shows a broken chat...

Am I doing it the wrong way?

Is there an easy way to use such library in Qualtrics survey question?

Answer 1

The easiest way to solve this was by using styled tables in the rich content editor. the dynamic chat was made by inserting the user`s response to the next table.