Editing HTML files for Instructor

Tekla Structures
2023
Tekla Structures
2022
Tekla Structures
2021
Tekla Structures
instructor
html files
editing html files for instructor
Environment
United States (Imperial)
United States (Metric)

Making simple HTML edits for the instructor side pane

The Instructor is a new tool designed to help users with the basic inputs of tools. If your company makes custom components or API tools and you want to create your own instructor instructions for your tools you can follow this guide for some easy instructions. 

First review the content here for information on how to get started with setting up an instructor file. I will go over the basics here also...

Let's open the instructor by opening Tekla Structures and then opening a model, on the side pane you will have an icon that looks like this 

Image
image.png

. Click on it to open the Instructor, if you have no tools selected (i.e. Create Steel Beam, Create Concrete Beam, etc) and you have not selected anything else you will get a set of help links for learning the basic steps of the software

Image
image.png

 

Now moving on to creating your own help content. When you click on a tool you have made your Instructor pane will be blank and in the top right hand corner you will see an add button where you can choose to add instructor content. Go ahead and click that, following the steps through to the end, see below.

 

Image
image.png

 

Image
image.png

 

Image
image.png

 

Image
image.png

 

In the model folder you will get a folder and some files created. They will consist of

One XML file, named CatalogSystemComponent<typeofcomponent><component name or number>_InstructorHelp.xml
One folder, named CatalogSystemComponent<typeofcomponent><component name or number>_Help

Inside the folder you will have another folder for your language, open that folder and you will have a file called "Index.html"

Edit the HTML file in notepad or another text/html editor of your choice, the default file will output like below.

 

Image
image.png


See below for a modified version of this HTML that includes a way to insert an image along with some extra text. Within the lines you will see where i am noting what these lines would be used for

Image
image.png

 

The only real portion you need to worry with editing is between <body> and </body>

A quick note on how things work in HTML:

  • Every opening needs a close, so for example when using headers you would say <h6> and then your data and to close you would write </h6>
  • On that same note, you can have as many headers as you want throughout the html
  • To control the size of the text you can use syntax like this <h2 style="font-size:12px;">For Column to brace connections</h2> the "style="font-size:12px;" is what is choosing the size of the text. I am showing this in a header line but it can be used in any text line
  • If you are installing these with TSEP packages into the system location of Tekla Structures and your images or gifs are stored in different locations than the html files you can use syntax like <img src="../../img/Test.png"> The ../../ tells the html to go up two folders to find a folder called img and then the image test.png


 

Was this helpful?