Tag Archives: trinket

Easy for Kids – Simplify Teaching HTML with Trinket.io

Teaching HTML to children is easy with Trinket.io. This free service allows students to write, edit, preview, and publish a web page in the Chrome web browser. This is ideal for teachers who want to standardize instruction amongst devices. Instead, of having students using different HTML text editors, everyone can use the same one. Of course, this is also perfect for schools using Chromebooks.

Trinket.io works with TechnoHTML.

In this technology project by TechnoKids Inc. students learn how to write HTML code to add text, images, and hyperlinks to a document. They also explore CSS formatting options to make their page look great. Whether using the step-by-step coding instructions in TechnoHTML or not, Trinket.io is a reliable service that simplifies teaching HTML to kids.

skateboard web page
Teach HTML and CSS using Trinket.io. Design a web page with text, images, hyperlinks, and more!

How to Use Trinket.io to Build a Web Page

  1. Visit Trinket.io.
  2. Sign up for a free account.
trinket account
Sign up for a free Trinket.io account.
  1. To build a web page using HTML coding, click New Trinket. Select HTML.
new trinket
Pick HTML from the New Trinket menu options.
  1. You need to give the web page a unique name. Click untitled. Type in a name such as the topic.
rename file
Replace Untitled with the topic of the web page.
  1. You will notice that the file is automatically named index.html.
  2. Type the HTML code in the left pane. Preview the web page in the right pane.
type HTML coding into pane
Type the HTML code into the left pane. Preview the web page in the right pane.
  1. When you are done working, click Save.
  1. When your web page is complete click Share. Select Publish.
publish web page
There are many ways to share your web page.
  1. Notice the Site URL. This is your website address. Click Publish.
publish web page
A published web page has a website address. TIP: You may want to copy the Site URL and share it with your teacher.
  1. Click the Site URL link to view your web page in the web browser.
web page
Click the Site URL to view the web page posted to the Internet.
  1. Close the web browser tab to return to Trinket.io. Close the dialog box.
web page

Tips for Using Trinket.io with TechnoHTML

teaching html coding
TechnoHTML is a curriculum unit with lessons, worksheets, and examples for teaching HTML coding to kids.

Upload Text File: Several assignments and skill reviews in TechnoHTML use HTML templates to explore HTML and CSS code. To use Trinket.io create a new HTML trinket. Then use the Upload Text File button to place the template into Trinket.io.

Use the Chromebook Version: TechnoHTML has duplicate versions – one is for Windows users. The other is for Chromebook users. This set of instructions has students link to existing images on the Internet – which is ideal for Trinket.io.

Save a Copy of the HTML Code: At the time this blog post was written Trinket.io allowed students to create web pages for free. The file or trinket is stored online in student’s account. However, if this changes you can have students download the HTML file which can be uploaded later. Alternatively, students can copy their code into a Google doc and then paste it back into Trinket.io to keep working.

Teaching Python on Chromebooks is Easy with Trinket

When teaching Python on Chromebooks it can be difficult to find an extension that allows students to easily write, edit, run, and save their programs. There are a few extensions available, however often they do not import Libraries such as Turtle or display images, which makes some programming activities for beginners impossible to complete. A solution is trinket.io.

teaching Python on Chromebooks
Teaching Python on Chromebooks is possible with trinket.io.

Trinket.io lets your students write programs in any browser – which makes it ideal for teaching Python on Chromebooks. There is no software to install. All your students need to do is create a free account. To be able to save files in trinket.io a paid account is required.

Trinket is quite affordable. However, if there are financial constraints students can download their Trinket file at the end of each session. The file is zipped. This saves the program for later use or submission to the teacher. Alternately, the code can be copied from Trinket into Google Docs and saved as a file. To continue working on the program, the code would need to be copied from Google Docs back into Trinket.

TechnoKids Python programming projects, include TechnoTurtle and TechnoPython. The instructions are written for the IDLE Python Shell and Editor, which is software that can be downloaded onto desktop devices. The good new is, with only a few changes TechnoKids Python programming lessons will work with trinket.io. These slight modifications make teaching Python on Chromebooks possible! After all, the Python programming code is the exact same in EVERY TechnoKids assignment!

There a few differences in TechnoKids instructions when using Trinket.io. These are listed below:

1. Software Opening Instructions:

Each TechnoKids assignments starts with Open the Python Shell. This instruction needs to change to Sign into trinket.io.

2. Pick a Trinket:

To start programming, Trinket users must pick their file type from the New Trinket button. If completing TechnoPython, pick Python 3. If completing TechnoTurtle pick Pygame.

python 3 and trinket
Select Python 3 if using TechnoPython or Pygame if using TechnoTurtle.

3. Create a new file:

In Trinket you do not need to create a new file. The default Python program is called main.py. If you are using the free version you are best to write code on this tab because it is simpler to run.

trinket window
Students can write code on the main.py tab.

4. Program run instructions:

Trinket users don’t need to save before they run their program. Instead they can just click Run. Instead of opening in a different window, the output appears in the right side pane.

trinket window
In Trinket, the output appears in the right pane.

5. Python Shell instructions:

Trinket is designed to make Python program files. However, in TechnoPython there are some activities where students practice writing code in the Python Shell. In Trinket, to see the output as if it is written in the Python Shell select Console.

python shell trinket
Select Console to see output as it would appear in the Python Shell.

6. Open a saved file:

In TechnoPython and TechnoTurtle, the introductory lessons include editing an existing Python program file. This is done to explore the meaning of commands and learn about debugging. The free version of Trinket always wants to run the main.py file (which cannot be deleted). To solve this issue, upload the TechnoKids Python file in Trinket, then copy the code to the main.py tab. Afterwards, delete the unwanted tab so that only main.py is in view.

delete tab
Upload the saved Python file. Copy the code to main.py. Delete the unwanted tab.

7. Turtle canvas size is smaller:

The default canvas size in Trinket is about half the size as it is when using the IDLE Python Editor. It is roughly 375 x 375. Use smaller numbers when setting how the turtle moves, draws artwork, or positions text. TechnoTurtle has a trinket folder with sample programs and images designed for a smaller canvas!

smaller canvas
Use smaller numbers when using the Turtle canvas in Trinket.

8. Upload pictures to Trinket:

A few activities in TechnoTurtle use a saved picture. Students use it to move their turtle through a maze or change the image of their Turtle. The code is exactly the same. However, the picture files must be uploaded into the Trinket File Library.

trinket file library
Upload image files to the Trinket File Library.
TechnoKid has created a Trinket folder with sample programs and images designed for the Trinket Turtle canvas.

How do I Use Python on Chromebooks? Trinket and TechnoTurtle

You may wonder, “How do I use Python on Chromebooks?” There are many web-based apps, but most work if the program contains only Python code. They tend to limit the use of many Python libraries.

However, if you are teaching young programmers then the Turtle Library is important. The Turtle module can be used to create artwork and design games. It requires a graphic interface that will display output on a canvas. One web-based option is Trinket.

What Is Trinket?

Trinket is web-based coding environment designed for education. The platform can be used to develop programs using Python, HTML, and Java. Subscribers can save their files called “trinkets” online. Non-subscribers can still use the Trinket platform to write code. However, at the end of a programming session, they must download the program to save it. Later, the file can be uploaded to continue editing the code.

Trinket Is Ideal for Young Programmers

The programming lessons in TechnoTurtle published by TechnoKids Inc. were written for IDLE Python 3. IDLE is Python’s Integrated Development and Learning Environment. This software includes a Python text editor, Python Shell that interprets code, plus a graphic interface that displays a canvas. IDLE Python 3 will run on Windows, Linux/Unix, and Mac OS X operating systems.

The latest version of IDLE Python makes programming easier for children to learn. At this time, there is not a web-based IDLE Python version for Chromebook users. For this reason, Trinket is a great web-based coding option for educators interested in introducing Python to young children.

python and trinket

How do I Use Python on Chromebooks? Use Trinket, which is a web-based coding environment.

How Can I Use the TechnoTurtle STEM Project with Trinket?

If you are using the TechnoKids Inc. STEM project TechnoTurtle, follow the instructions below to get started with Trinket. You will use the Pygame option to build programs. Refer to the tips at the bottom of this article to help teach TechnoTurtle.

How Do I Use Python on Chromebooks?

You may be wondering, how do I use Python on Chromebooks? One solution is to use Trinket.

  1. Visit trinket.
  2. If you are using Chromebooks with your students they will all have a Google account. Look around the Home page to find the Sign in with Google option.
  3. Once signed in, click your username to display a menu.
  4. Select New Trinket and then pick Pygame.
  5. how do I use Python on chromebooks

    Select Pygame to build a program using the Turtle Library.

  6. Write the code in the left pane. Click Run to see the result in the right pane.
  7. Use Trinket to program using Python and the Turtle Library.

  8. If necessary, click Stop.
  9. If your students cannot complete their program (and they are not subscribers), they can copy the text to Google Doc file for safekeeping. Another option is to download the file. To do this click on the three lines. From the menu, select Download. Give the file a suitable name and then click Save. The file will be zipped. You will need to unzip the file to access the Python.py program.
  10. To continue working on the file, you can paste the text onto the Main tab or Upload the text file (see tip below).

Tips to Using TechnoTurtle with Trinket

If you purchased TechnoTurtle and you use Chromebooks, you may wonder, “How do I Use Python with TechnoTurtle on Chromebooks?” A few of the instructions in TechnoTurtle will require modification when using Trinket instead of IDLE Python. However, almost every lesson will work perfectly. Below are some tips to using TechnoTurtle with Trinket:

  • Stop the Canvas from Becoming Blank: After you run a program in Trinket the canvas can appear empty. To be able to see your work, add exitonclick() to the last line of the program. This will keep the image or game in view.
  • Upload Background or Stamp Images: Picture files can be used as a background or turtle shape. When using IDLE Python, the Python.py file and picture files must be in the same folder. When teaching using Trinket, you must upload the file using View and Add Images. You must then select the file and click Done to attach it to the program.

    Upload picture files to use them as background images or Turtle shapes.

  • Get to Know the Trinket Canvas Size: The Trinket canvas is smaller than the IDLE Python canvas. The Trinket canvas is about 350 pixels wide by 400 pixels high. Whereas the IDLE Python canvas by default is about 600 pixels wide by 600 pixels high. To view your work easily you may need to reduce the values used for the coordinates. For example, use goto(-175, 200) to reach the top left edge; goto(175, 200) to reach the top right edge; goto(175, -200) to reach the bottom right edge; and goto(-175, -200) to reach the bottom left edge.
  • canvas

    To place objects on the canvas you need to plot the x and y coordinates.

  • Use the Trinket Resources: TechnoKids has recreated the Python templates, Python examples, and images to fit the Trinket canvas. They are in a Trinket folder. Use them instead.
  • Picture Files Used for Stamps Need to Be Small: Since the Trinket canvas is smaller, if you want to add a picture file to the Turtle shape list the image should be a maximum of 50 x 50. This looks better when adding multiple stamps.
  • Keep Movement Below 375 Steps: To keep the Turtle on the screen it is a good idea to limit forward and backward commands below 375. For example forward(450) will move the turtle symbol out of view.
  • Divide the Values in TechnoTurtle by Half: Almost every assignment in TechnoTurtle will work with Trinket with no modification. A few of the activities do provide sample coordinates or movements. These might be too large to see on the canvas. In those cases, take each number and cut it in half. If the value is forward(200) make it forward(100). This will quickly make the sample scripts work.
  • Reduce the Font Size to Fit Text on the Canvas: Given that the Trinket canvas is smaller than the IDLE Python canvas, you will want to use font size 12 or less. This will allow you to fit more words on the screen. For example, write(“Add a message to the canvas.”, font=(“Arial”, 12, bold))
  • Have Patience With Input Boxes: If you want to store a player’s answer as a variable you must be patient when playing the game. It takes time for the cursor to show in the box.
  • Upload a Template or Saved File: Subscribers can easily save or open Python files. However, non-subscribers cannot. If you are not quite sure if you want to commit to a Trinket subscription just yet, you might need to copy the code to the Main tab to run it.
  • Do Not Set the Canvas Window Title: In IDLE Python, programmers can customize the title bar. This looks great on a large screen. However, in Trinket the frame around the window is very tiny. Do not bother using the code title(“Text in the title bar”). It does not generate an error, but you also cannot see anything.
  • Notice that Color-Coding is Different: Words in a program are often color-coded. This makes the code easier to read, write, and debug. The color scheme in Trinket is different than IDLE Python. For example, comments are green instead of red.
  • Speed Differences are Not as Noticeable: The speed of the turtle can be set to slowest, slow, normal, fast, and fastest. The difference between the speeds often cannot be seen in Trinket. For this reason, it is best to use either speed(“slowest”) or speed(“fastest”).
  • Line Number Errors are Not Clickable: In the IDLE Python Shell, error messages with line numbers are clickable. This takes you right away to the problem in the code. Trinket’s error messages do not have clickable links. Instead, programmers must read the line number in the error message and then find it in the code.
  • Use the Chrome Web Browser: If you are using a Chromebook, you are using the Chrome web browser. However, for anyone using Trinket on a different device, be certain to use Chrome. Trinket will work better. The screen tends to scale larger and there is less hesitation when running the code.