Developer Custom Scripts

HelpXplain is the exciting new animated infographics and screencast tool that integrates with Help+Manual.

Moderators: Alexander Halser, Tim Green

Developer Custom Scripts

Unread postby Terry McMorrow » Sun Jul 28, 2019 6:35 pm

I need a little help on custom scripts and was hoping someone has already worked on them

*caution* from some reason if your object is named with a capitol in it then custom scripts will not work on it - For example Rectangle1 will not work in custom scripts but rectangle1 will.

I am trying to customize text based on other parameters on page - For example if I ask a question of the user and they select wrong I could explain why it is wrong, if they are correct then I can let them know that. Right now it takes 3 slides to accomplish this

Here is what I have so far
xplain.animateTo('#rectangle2', 1, {backgroundColor:182100074 , fontSize:20,textAlign:"center", textContent:"Correct!"}, 0);

textContent, innerText and innerHTML are all destructive and whatever the containing object is, it is destroyed and we are left with just the text.

Is there a way to change the text without destroying the object and formatting?

Also is there a way to vertically align the text to middle?
Terry McMorrow
 
Posts: 10
Joined: Tue Jul 23, 2019 2:22 am

Re: Developer Custom Scripts

Unread postby Alexander Halser » Mon Jul 29, 2019 10:34 am

Is there a way to change the text without destroying the object and formatting?

Hi Terry,
if you change the text of an object with a custom script, the original content is replaced with the new text and the old text is gone. It is not clear to me what you are trying to accomplish.
Alexander Halser
Senior Software Architect, EC Software GmbH
User avatar
Alexander Halser
EC-Software Support
 
Posts: 3940
Joined: Mon Jun 24, 2002 7:24 pm
Location: Salzburg, Austria

Re: Developer Custom Scripts

Unread postby Alexander Halser » Mon Jul 29, 2019 11:02 am

If you want to change just part of the text of another object, it would probably be easier to place some custom HTML code in the text object, that you can address with a script. To do this, create a shape or text, enter the text and format it. Then right-click the object, select "Edit HTML Source Code", to modify parts of the text. Example:

xplain-edit-html-code.png


This line of text with the id "txt1" can easily be modified by a custom script, executed from another object. The line of text has "display:none" and is initially invisible. To make it visible, you could use:

Code: Select all
xplain.animateTo('#txt1', 1, {display: 'block'}, 0)
You do not have the required permissions to view the files attached to this post. This may mean that you can't view them at all, or it may just mean that you need to log into the forum to view them.
Alexander Halser
Senior Software Architect, EC Software GmbH
User avatar
Alexander Halser
EC-Software Support
 
Posts: 3940
Joined: Mon Jun 24, 2002 7:24 pm
Location: Salzburg, Austria

Re: Developer Custom Scripts

Unread postby Terry McMorrow » Mon Jul 29, 2019 5:37 pm

Hi Alexander

Thanks for getting me started in the right direction. A Feature that I would like to see added in the future

xplain.animateTo('#callout1', 1, {backgroundColor:182100074 , text:"New Text"}, 0) //change text of object

Here is how I used your guidance to get solution
-----------------------------------------------------------------------------------
//In the text object (after selecting -- Edit HTML Source Code)

<p id="xChoice0" style="text-align:center;display:block">Select Answer</p>
<p id="xChoice1" style="text-align:center;display:none">Correct</p>
<p id="xChoice2" style="text-align:center;display:none">Wrong</p>
<p id="xChoice3" style="text-align:center;display:none">Time to start test over</p>
-------------------------------------------------------------------------------------------
//in Custom Scripts
function doChoice(showText) //showText -- pass object to display
{
//Clear any previous choices - Otherwise they will show if selected previously
xplain.animateTo('#xChoice0', 0, {display:'none'}, 0);
xplain.animateTo('#xChoice1', 0, {display:'none'}, 0);
xplain.animateTo('#xChoice2', 0, {display:'none'}, 0);
xplain.animateTo('#xChoice3', 0, {display:'none'}, 0);
//Show the text
if (showText ===undefined || showText=='')
{ xplain.animateTo('#xChoice0', 0, {display:'block'}, 0); }
else
{ xplain.animateTo('#'+showText, 0, {display:'block'}, 0); }
}
-------------------------------------------------------------------------------------------------------------
//Execute script from any object
doChoice('xChoice1');
Terry McMorrow
 
Posts: 10
Joined: Tue Jul 23, 2019 2:22 am


Return to HelpXplain Infographics Tool

Who is online

Users browsing this forum: No registered users and 2 guests

cron