If you use Adobe Animate CC HTML5-Canvas platform to create educational tutorials, you may be aware that the text tool while it allows you to create dynamic text,  does not have input text. I have been using HTML elements to replace or supplement the text tool.

 Below is an example with the javaScript code I used including a video explaining in great detail each line of code. I did not use jQuery. I used only ordinary or vanilla javascript, but I’m sure you can use jQuery. The textbox below is editable by the user and there’s code to retrieve the user’s content and respond to the user. I also gave the text percent units to make it responsive.

To get a better view Click Here.

Here is the code:

//——-create HTML TEXT ELEMENT——————–

//——-edText is a global variable——————-

 edText = document.createElement("div");
const canvas = document.getElementById("canvas");
canvas.insertAdjacentElement("afterend", edText);

edText.innerHTML = “What’s in your mind,\
    Patitas<sup id=’exp’>12</sup>?<br>\
    Double-click here to respond.\
    When you’re done, click \
    the <span id=’spanStyle’>submit button.</span>\
    Here the text continues.\
“;
edText.contentEditable = “true”;
edTextStyles();

//———-Styling edText—————————————
//——JS single line property style using the Dom Style property———–

function edTextStyles(){
//------position-------
 edText.style.display = "block";
 edText.style.position ="absolute";
 edText.style.left = "5%";
 edText.style.top = "25%";
//-------dimensions------
 edText.style.width = "40%";
 edText.style.height = "25%";
 edText.style.resize = "vertical";
 edText.style.overflow = "auto"
//-------typeography-------
 edText.style.color = "#0612AE";//rgb(6, 18, 174)
 edText.style.font = "small-caps bold 2vw Josefin Sans";
 edText.style.lineHeight = "1.5";
//-------other sylying------
 edText.style.padding = "1.0%";
 edText.style.backgroundColor = "#C6CC7E33";
 edText.style.border = "0.3vw solid #5C6802";
 edText.style.borderRadius = "1.5vw";
}
//----styling the exponent and insideStyle------
const exp = document.getElementById("exp");
exp.style.cssText = "color:#C12828;\
font-size: 60%;\
";
const spanStyle = document.getElementById("spanStyle");
spanStyle.style.cssText = "color:#B72121;\
border-bottom:0.2vw solid #FD4703;\
border-top:0.2vw solid #FD4703;\
";
//-----------end of Styling--------------

//----Listening for double-click event------
edText.addEventListener("dblclick", edTextClkListener);

function edTextClkListener(event){
   mainMC.submit.submitTxt.x= 60;
   mainMC.submit.submitTxt.y= 8;
   mainMC.submit.x = 650;
   mainMC.submit.y = 290;
   mainMC.submit.visible = true;
   mainMC.submit.submitTxt.text = "submit";
   event.target.innerText = "";
   edText.style.color = "#94118A";
   edText.focus();
}

//-----------submit button---------------------
//----Listening for single-click event------

mainMC.submit.addEventListener("click", subListener);
function subListener(e){

   const userTxt = edText.innerText;
   if(mainMC.submit.submitTxt.text === "submit") {
      mainMC.submit.submitTxt.text = "clear";

      //---------Template Strings---------
      edText.innerText = `Here is your feedback:
      "${userTxt}"
      Thanks for sharing
      your thoughts.
      HAVE A NICE DAY!`;

   } else {
      mainMC.submit.submitTxt.text = "submit";
      edText.innerHTML = "";
      edText.focus();
   }

}

//-------------------------end of submit button---------

//--------Nav Buttons--------
mainMC.nextBtn.addEventListener("click", nextBtnListener);
//---------------------------

//--------create element META to make page responsive-----
const resMeta = document.createElement("meta");
const theHead = document.head;
theHead.appendChild(resMeta);
resMeta.name = "viewport";
resMeta.content = "width=device-width, initial-scale=1.0";
//--------end of adding Meta------------------

//------------------End of frame1-------------------