Developer Custom Scripts

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

Moderators: Alexander Halser, Tim Green

Post Reply
Terry McMorrow
Posts: 14
Joined: Tue Jul 23, 2019 2:22 am

Developer Custom Scripts

Unread post by Terry McMorrow »

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?
User avatar
Alexander Halser
EC-Software Support
Posts: 4098
Joined: Mon Jun 24, 2002 7:24 pm
Location: Salzburg, Austria
Contact:

Re: Developer Custom Scripts

Unread post by Alexander Halser »

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: 4098
Joined: Mon Jun 24, 2002 7:24 pm
Location: Salzburg, Austria
Contact:

Re: Developer Custom Scripts

Unread post by Alexander Halser »

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.
Alexander Halser
Senior Software Architect, EC Software GmbH
Terry McMorrow
Posts: 14
Joined: Tue Jul 23, 2019 2:22 am

Re: Developer Custom Scripts

Unread post by Terry McMorrow »

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');
Post Reply