Author Archives: luci

About luci

Lucila Olga Rios is a retired Math teacher and the author of the math tutorials you see here in this site.

Adding Like Terms Tutorial

In Algebra we often work with expressions the way we work with numbers in primary school. Expressions usually display variables in the form of letters like ‘x’ and ‘y’.

This tutorial will show you how to add and multiply simple expressions called ‘terms’.

Read the text and instructions then click the ‘Practice’ button. You may click the ‘Practice’ button as many times as you wish. Use the navigation arrows to move to the next page.

Continue reading

Displaying a Textarea HTML Element Over the Canvas in AnimateCC

The HTML <textarea> allows the user to enter input feedback in your HTML. I wanted to display a <textarea> over the Canvas in my Adobe Animate CC HTML5-Canvas project because <textarea> is multiline whereas <input> is not. Below is the result of my attempt.

Here is my code

I place this code in the actions panel for the frame I’m working on.

window.mainTL = this;

//using the <textarea> in JavaScript with no jQuery
/*I used JavaScript here because I don’t have to add another js-library to
the Include of the Global Panel.*/

var animContainer = document.getElementById(“animation_container”);
var tArea = document.createElement(“textarea”);
tArea.setAttribute(“id”, “userTBox”);

/*Let me take a moment here to explain how I understand the code above.
AnimateCC,ACC, puts a <div> around the <canvas> with the id “animation_container”.
The first line of code accesses this div and assigns it to the variable “animContainer”.
The second line of code creates a new element the <textarea> and assigns it
to the variable “tArea”.
The third line of code attaches the new element to “animContainer”. You don’t have to
attach it to the “animContainer”, but if you choose “responsive” in the publish settings it will apply responsiveness to the textarea as well as the canvas, all the children of the “animation_container”.
This is important because if the user resizes the window or views the animation in a mobile devise the textarea will remain fix and will not jump out of the canvas. So when I wrote the cssText below I assigned percentages instead of fixed numbers to the top, left, width, and height. of the textarea.*/ = `position: absolute;
                                        font-family: ‘Happy Monkey’;
                                        font-size: 26px;
                                        height: 40%;
                                        width: 50%;
                                        color: red;
                                       text-align: left`;
//tArea.value = “Enter your text here. Then click submit.”;

mainTL.submitButton.addEventListener(“click”, clkHandler);

function clkHandler(e){
    let userTxt = tArea.value;
//recently the new release of ES6 allows for the use of “let” keyword to declare a variable.
    tArea.value = `Mi amor, your text is:
//Here I’m using a template string(see comment below)

Note: the cssText, above, is a string where the declarations are expressed in css syntax using the “-” to remove white space between words like font-family instead of fontFamily(Camel Case) used in javascript.

I’m also using ‘template literals’, this is a new syntax adopted in ES6 recently that you can use in place of the “string”. You wrap your string in tic marks(“) (the font I’m using here does not display the tic marks. It displays a single quote in its place. The tic mark key is right next to the 1 key.)instead of quotes(“”,”) and format it the way you like it and it will be displayed that way wyswyg.

One more thing, it is better to use a submit button and use the click event to access the user text than the keyup event for the return key because when the user hits the return key the user automatically generates a new line since the textarea is multiline. You can make your own submit button on the main timeline of the canvas instead of using the html button element <button>. I used a button symbol that belongs to the canvas, not a DOM html element.


In W3 search for ‘The HTML DOM Element Object’ or go to ‘’ to
see a very useful list of methods, properties and events you can use to manipulate the elements that you insert into the web page where your <canvas> resides. As I understand it, the html page that Animate CC generates contains a <div> that contains the <canvas> element. You can see it if you open the yourProject.html in a code editor. (Make sure that you run the project at least once so that the file gets generated). You may see something like this:

<body onload="init();" style="margin:0px;">
  <div id="animation_container" style="background-color:rgba(153, 153, 153, 1.00); width:1200px; height:800px">
     <canvas id="canvas" width="1200" height="800" style="position: absolute; display: block; background-color:rgba(153, 153, 153, 1.00);">
     <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1200px; height:800px; position: absolute; left: 0px; top: 0px; display: block;">

You can create new html elements with the method
document.createElement(“element like p or div”); that then you can append to any of the existing elements using the existingElemnt.appendChild(elementYouCreated) method.

Adobe Animate CC Placing an html input element over the canvas

I placed an html input text element with the tag <input> that collects data entered by the user when the user hits the ‘return’ or the ‘enter’ key. I placed it in the animation div that contains the canvas from Adobe Animate CC. I edited the html file that Adobe Animate generates to add a link for the jQuery library but to do so, I had to disable the overwirte option in the advanced tab of the publish settings. You can insert html elements into the html file using just javascript, but it’s a lot easier with jQuery.

Here is the code I used in the action’s panel actions layer of frame1


$("#canvas").after("<form id='userinput_form' onsubmit='return false'><input id='txtInput' type='text'></form>");
var txtInput = $("#txtInput");
 "text-align": "center",
 "color": "red",
 "fontFamily": "Happy Monkey",
 "fontSize": "40px",
 "height": "60px",
 "width": "100px",
 "font-weight": "bold"

var mainTL = this;

 if ( e.which == 13 ){
 var userAns = txtInput.val();
 mainTL.respondTxt.text = "Your Answer is: " + userAns;
 //alert("Your Answer: " + userAns + " is correct!");

Update 06/02/18:

Since 2017 Adobe has  included a feature in the actions panel that actually lets you include external libraries like jQuery. I wasn’t sure how to use it until I watch a video by Joseph Labreque explaining how to use it. Here’s what you have to do. Here are instructions for the CDN

  1. Go to google
  2. Copy the src of the library you need without the <scrip> tags just:
  3. Open your fla file and open the actions panel
  4. On the left click on Global>include and + on the top right
  5. select url and paste the src from Google.

That’s it – you’re ready to add jQuery code.

UPDATE: In the Global tab you can also add your own external JavaScript files that are stored in your computer.

My experience with Snap.Svg

I’m trying to learn something called Snap.Svg.js. It is a JavaScript library that can be downloaded  free from From what I have investigated Snap.Svg is analogous to JQuery. Where jQuery serves for manipulating HTML elements,  Snap.Svg serves for manipulating  svg elements. SVG images(Scalable Vector Graphics) can be created in a number of vector graphic applications like Illustrator.