使用来自其他人的JavaScript库的Qualtrics - 聊天模拟器

Question

我想建立一个包含虚假聊天的调查。主题将参与聊天。

我找到了this漂亮的聊天模拟器库，并尝试在以下问题中使用它：

1. 将通过源链接使用的所有js和css上传到我的库。
2. 将jquery脚本添加到onLoad（）函数中问题的js选项：

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. 将上传文件的<script src="<URL>"> </script>网址添加到我的库中。
4. 通过丰富的内容编辑器提出问题并编辑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>

但它不起作用 - 只是显示一个破碎的聊天......

我这样做是错误的吗？

在Qualtrics调查问题中是否有一种简单的方法可以使用这样的库？

Answer 1

解决此问题的最简单方法是在富内容编辑器中使用样式表。通过将用户的响应插入下一个表来进行动态聊天。