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.