Introduction

The purpose of this article is to demonstrate how to embed an Avatar into your survey which will read the current question's long caption.

To see a working copy of this in action, please click this link.

You can download our example QEX here (attention: this QEX was created using Design 5.4.4 and therefore requires Design 5.4.4+ to open -- 5.4.4+ is not required to make this example function -- this will still work on 5.3.3+).

In the above demo, we used an Avatar API from SitePal (they offer a 15-day trial via the following link: http://www.sitepal.com/packages/), but this should work with most Text-to-Speech implementations that allow embedding into third-party sites.

Pre-requisite 

Without going into too much detail in regards to how this is done via SitePal, you'll need to navigate to the "Publish Your Scene" section.

(Feel free to contact SitePal Support if you need assistance generating this JavaScript code.)

This is where you'll be provided with the embed code for your specific account:

That's all you need to get started.

How to

Open Design and go into the "Internet Options" section and paste the following code into the "Head" and "Header" sections:

Internet Options > Head

<script language="JavaScript" type="text/javascript">

function vh_sceneLoaded()
 {
 //the scene begins playing, add actions here
 sayText('!!Replace(CurrentQuestion.LongCaption,"’","").Trim()!!',3,1,3); 
 }

</script>

Internet Options > Header

Now paste in the "publish" code you copied from your Avatar site:

<script language="JavaScript" type="text/javascript" src="http://vhss-d.oddcast.com/vhost_embed_functions_v2.php?acc=##########&js=1"></script>
<script language="JavaScript" type="text/javascript">AC_VHost_Embed(########,300,400,'',1,1, 2486951, 0,1,0,'####ddddffff####dddfff########dddfff###',9);</script>

Attention: if you're using one of our Askia screen templates, make sure the code you enter into the "Header" section is nested under the framecontainer > framecontent div class. See screenshot from our example:

That's it.

Once you've added the above lines of script into the Head and Header, you should have a fully functional Text-to-Speech element which reads the current question's long caption. 

Note: our example survey above uses a monthly subscription to SitePal. We may, at any point in time, decide to cancel our subscription. Below is a small .gif (minus sound) to demonstrate the avatar functionality in the event we have decided to cancel it: