{"id":3883,"date":"2020-07-23T19:16:08","date_gmt":"2020-07-23T19:16:08","guid":{"rendered":"http:\/\/sites.la.utexas.edu\/kb\/?p=3883"},"modified":"2020-08-31T21:49:35","modified_gmt":"2020-08-31T21:49:35","slug":"how-to-create-a-clio-course-module-part-1","status":"publish","type":"post","link":"http:\/\/sites.la.utexas.edu\/kb\/2020\/07\/23\/how-to-create-a-clio-course-module-part-1\/","title":{"rendered":"How to Create a CLIO Course Module – Part 1"},"content":{"rendered":"

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

CLIO is a Content Management System that allows the users to create customizable course modules. In this Basic Training you will be designing and creating your own CLIO course module.<\/p>\n

Part 1: Creating a New Canvas Assignment with a CLIO module<\/h1>\n
    \n
  1. Navigate to your Canvas page. Click on the “Module” tab.\"\"<\/a><\/li>\n
  2. Click “+Module” and give it a name.\"\"<\/a><\/li>\n
  3. Under this module, create a new Assignment. Give it a name.\"\"<\/a><\/li>\n
  4. Click on this assignment, and click “Edit.”\"\"<\/a><\/li>\n
  5. Under “Submission Type,” choose “External Tool.”\"\"<\/a><\/li>\n
  6. Under “Enter or find an External Tool URL,” click “Find,” and choose “Clio.” Then click “Select.”
    \n    \"\"<\/a><\/li>\n
  7. Check “Load This Tool In A New Tab.”\"\"<\/a><\/li>\n
  8. Scroll down to the bottom and click “Save.”\"\"<\/a><\/li>\n
  9. Click on “Load [assignment_name] in a new window to open up the CLIO page.\"\"<\/a><\/li>\n<\/ol>\n

    Part 2: Getting Familiar with the CLIO Interface<\/h1>\n

    When you first open up a new CLIO page, this is the default settings you’ll be seeing.<\/p>\n

    \"\"<\/a><\/p>\n

    Please take a look at this annotated image and familiarize yourself with the terminologies we will be using throughout the training. Don’t worry if you are confused on any terminologies, we will walk through all of these throughout the training.<\/p>\n

    \"\"<\/a><\/p>\n

    \"\"<\/a><\/p>\n

    Part 3: Creating a Basic Module<\/h1>\n

    In this part you will be creating a Basic CLIO module with your own course Content.<\/p>\n

    Adding a Content Card with text and images<\/h2>\n
      \n
    1. Choose a topic for your course. Keep the content of your course uniform throughout the modules.<\/li>\n
    2. Choose a color palette for your course, ideally 4-5 colors. Think about how this palette relates to your content. Use this palette throughout your course design.<\/li>\n
    3. Add a new activity page. In your CLIO editor, click “Add new activity +”. This will add an empty page where you can add multiple cards with content.\u00a0As you work on more cards and content, please keep in mind that you might want to break your content up into different pages to keep the information organized and not overly crowded with cards on a single page.\u00a0<\/strong>A typical CLIO module will have around 3 module pages.\"\"<\/a><\/li>\n
    4. Name your activity page. Then click “Save Changes.”\"\"<\/a><\/li>\n
    5. Click “Add card”. Choose “Content” type for card.\"\"<\/a><\/li>\n
    6. In the text editing section, input any text content you’d like for your card.\"\"<\/a><\/li>\n
    7. To add an image to go along with the text, click Insert > Image.\"\"<\/a><\/li>\n
    8. Click on the “Search Files” icon next to the Source input field.\"\"<\/a><\/li>\n
    9. Choose your image file. Give it a description and dimensions, if you’d like. If you’d also like to add a caption, put a check next to “Caption”. Click “Ok”.\"\"<\/a><\/li>\n
    10. Edit the caption underneath the image.\"\"<\/a><\/li>\n
    11. If you wish to change the alignment of this image figure, click on the figure and choose the desired alignment.\"\"<\/a><\/li>\n
    12. Click “Save Changes” for this card.\u00a0It is important that you click “Save Changes” for each card on a page after editing it.\u00a0\"\"<\/a><\/strong><\/li>\n
    13. Click “View Activity” to see the changes you’ve applied.\"\"<\/a><\/li>\n<\/ol>\n

      Adding a Content Card with links and embedded video<\/h2>\n
        \n
      1. Let’s add another card content with different card header stylings and some more interesting content. Add another card following the same steps you’ve done above.\"\"<\/a><\/li>\n
      2. Let’s add some external links to this text. Select the text you’d like to link and click “Insert\/Edit Link”.\"\"<\/a><\/li>\n
      3. In the “Insert Link” editor, paste in the external URL you’d like to link. You can also change the setting in “Target” to make the link opens in a new window.\"\"<\/a><\/li>\n
      4. Lastly, I’d like to embed a YouTube video into this card. Navigate to YouTube and click “Share”.\"\"<\/a><\/li>\n
      5. Click “Embed”.\"\"<\/a><\/li>\n
      6. Click “Copy” to copy the embed code.\"\"<\/a><\/li>\n
      7. Navigate back to CLIO. In the editor, click “Insert\/Edit Media”.\"\"<\/a><\/li>\n
      8. Click on the “Embed” tab and paste in your embed code, then click “Ok”.\"\"<\/a><\/li>\n
      9. Click “Save Changes”. Your CLIO card should look like this.\"\"<\/a><\/li>\n<\/ol>\n

        Adding Card Headers for Cards<\/h2>\n
          \n
        1. Let’s add a card header for this card we’ve made above. In the CLIO editor, navigate to the Course CSS stylesheet by clicking “Edit Course”.\"\"<\/a><\/li>\n
        2. Here’s where you’ll be editing your custom CSS.\"\"<\/a><\/li>\n
        3. Edit the default card header stylings by editing the class “card-header”.\n