STA Blog

Basic Training: CLIO Module Training Pt.2

By

Basic Training: CLIO Module Training Pt.2

After finishing this part of the training, so much of my CLIO Module has changed from the last time you saw it. So, the following is a list of the things I changed in the module:

  • I added 3 new  activities. Overall there are now 5 activities and their descriptions are as follows:
    • Activity 1: The Basics – in this activity one can learn a few very easily translatable words and their proper pronunciation.
    • Activity 2: Quiz 1 – in this activity one must answer a short quiz regarding the words they learned in the previous activity. There is also space for feedback.
    • Activity 3: Story Time – in this activity one learns about translation in context through the translation of the classic story of  Humpty Dumpty; available in English and Spanish.
    • Activity 4: Movie Time – in this activity one can learn new words in context through the translation of 5 different movie titles.
    • Activity 5: Quiz 2 – finally, one must answer a short quiz regarding the movie titles they learned in the previous activity.
  • I changed the color of the module’s background twice.
    • First, I changed it from the default setting to a solid color, specifically black.
    • Then, I changed in from black to a background image. That image (which I designed myself) looks something like a black background with a vibrant green grid to add a retro video game/8-bit feel to the module.
  • I formatted some images so that their general format and captions were standardized.
  • I changed the background of the navbar banner from a solid black color to an image. Specifically to an image (I also designed myself) that looks like a black background with pixel-style stars in two colors; green and gray.
    • To that I also added a slight color overlay to make it more cohesive.
  • I changed the card header backgrounds from a solid black color to an image, more specifically to the same image I added to the navbar banner background to maintain the theme consistent.
  • I embedded a Google Font into the navbar title and the card titles.
    • More specifically, the font’s name is Press Start 2P, and I chose it because matched the aesthetic I planned for the module.
  • I worked with HTML to format two text-wrapped image figures. Those can be found in Activity 3.
  • I worked with HTML to format a table in different ways.
    • I added a different background and font color for the first row of the table
    • I added a different background color to all even numbered rows
    • I added a different background color relative to the row that is being hovered by the user’s mouse
  • Last but not least, I added an images carousel in Activity 4 also using HTML.

But, if you are more of a visual learner and/or would like to know what all of these changes actually look like, here’s a demonstration for you.