---
tags: ULA-EN
disqus: hackmd
title: Content types | ULA
description: label for a predictable, typical piece of content, with predefined interactivity and styling
image: https://i.imgur.com/mCOE6OF.png

---

# Content types

A content type in terms of ULA is a **label** for a predictable, typical piece of content, with predefined **interactivity** and **styling**.

| <center>[richText](/KQM-meSAR3SL6O21Hm9fCQ)</center> | <center>[richMedia](/o4HTHEKSTliryte3oxDQ-A)</center> |
| -------------------------------------- | ---------------------------------------------- |
|  |  |

| <center>[fileCard](/HHhHci-WRjSSixxvJp8mcg)</center> | <center>[exercise](/1REdGQInTNS5Nno00J-7Ug)</center> |
| ---------------------------------------- | ---------------------------------------- |
|  |  |

## Interactivity

At this point we have 4 pre-built types: richText, richMedia, fileCard, exercise.

**Interactivity** means how an element responds to user interaction.

In [richText](/KQM-meSAR3SL6O21Hm9fCQ), for example, you can add a quiz, and after a user has answered the quiz, the program will show if the answer was right or wrong.

In [richMedia](/o4HTHEKSTliryte3oxDQ-A) there are phrases, and when you click on one of them a short part of a long audio or video is played.

In [fileCard](/HHhHci-WRjSSixxvJp8mcg) small files like audio and images are joined together into clickable sounded cards.

In [exercise](/1REdGQInTNS5Nno00J-7Ug) you have to read or listen to something and choose one answer from many, then you get feedback on whether you were right or not.

:::warning
<small>:page_facing_up: for more info: [richText](/KQM-meSAR3SL6O21Hm9fCQ), [richMedia](/o4HTHEKSTliryte3oxDQ-A), [fileCard](/HHhHci-WRjSSixxvJp8mcg), [exercise](/1REdGQInTNS5Nno00J-7Ug)</small>
:::

## Styling

Styling is another important part of **content type**. You can change styles of pre-built types and create new types with different styles.
:::warning
<small>:page_facing_up: for more info: [Styling](/QjDcaEItSWKoSrukt9D24g)</small>
:::

## Custom types

You can create custom content types on top of those 4 pre-built ones.

For example, you can create a content type `song` on top of `richMedia`, set a pink background for it and align text to the center. You can also create a type `story` with sky-blue background and align text to the left. Both, `song` and `story` will look completely different from the default `richMedia` and from each other.

You just need to add to your `/content/styles/contentType.js` a couple of rows:

song: {
    parent: 'richMedia',
    phraseText: { 
        textAlign: 'center', 
        backgroundColor: 'pink' 
    },
story: {
    parent: 'richMedia',
    phraseText: { 
        textAlign: 'left', 
        backgroundColor: 'skyblue' 
    },
},

:::warning
<small>:page_facing_up: for more info: [Styling](/QjDcaEItSWKoSrukt9D24g)</small>
:::
It will make your content more structured and clear because now you should add these types after titles in `/content/content.md`:

# Shape of my heart [song]

# Day of my life [story]

:::warning
<small>:page_facing_up: for more info: [Navigation and Content Structure](/6GcL8iOeRI2XfytYxc-4IQ)</small>
:::

It's easier to read, edit and translate that kind of structured text while you are working on the app. And of course, it immerses a user/student in a better learning experience after you've built the app.

{%hackmd tKQW1R4oSvSm58CCiq1f-Q %}