Documentation:Digital Tattoo Student Orientation/Primary Content

From UBC Wiki
Jump to: navigation, search

Introductory email

Welcome to the Digital Tattoo team! One of the first things you should do is send an introductory email to the rest of the team and let us know a little bit about you. How did you become interested in working with the Digital Tattoo project? What are you studying? What are your hobbies? Do you have any specific online identity themes that you would like to explore?


Screenshot of the Learning Wrapper

This page will explain how to create a learning wrapper for your video. Learning wrappers allow you to "wrap" the video with learning support resources - such as self assessment quizzes, questions for reflection and discussion, additional links for deeper exploration, etc. Our learning wrapper template is mobile friendly and can be applied to any UBC CMS (Content Management System) Websites. To see the learning wrapper in practice, check it out on the Digital Tattoo website.

Please note that this template is only tested on the newest UBC CMS template theme, so some of these features may not work well on the older UBC CMS websites.

The default learning wrapper template is divided in 4 major components which are:

  • Watch - where you will be embedding your video, including YouTube and Kaltura videos.
  • Think - where you will be embedding your quiz created through Gravity Forms
  • Explore - where you will be adding additional learning materials and any other external/internal links.
  • Discuss - where you will be adding a discussion question.

Since the wrapper is a customizable template, you can easily add or remove any of these components to suit your needs. For more information on how to customize, see Customizing the Learning Wrapper below.



switch the editor mode to Text (HTML) mode, and paste the code below:

<div class="LWsidebar">
<div class="video">
<div class="responsive-media">Put embed code for the video here </iframe>

<p style="text-align: center;"><strong> Video credit:</strong>Credit the video here (and add a link here) </p>
<div class="menu">
<ul id="tab">
        <li class="select videobig hidemobile"><i class="icon-youtube-alt"></i> Watch</li>
        <li class="videoside"><i class="icon-check"></i> Think</li>
        <li class="videoside"><i class="icon-book"></i> Explore</li>
        <li class="videoside"><i class="icon-link"></i> Links</li>
        <li class="videoside"><i class="icon-comments-alt"></i> Discuss</li>
[badgeos_achievements_list limit="10" show_filter="false" show_search="false" orderby="menu_order" order="ASC" wpms="false"]


<div class="maincontent">
<div class="content_wrap"></div>
<div class="content_wrap disnon">
<h2><i class="icon-check"></i> Think</h2>
Put the Gravity form here. 

<div class="content_wrap disnon">
<h2><i class="icon-book"></i> Explore</h2>
This is where you can add the content for Explore. 

<div class="content_wrap disnon">
<h2><i class="icon-link"></i> Links</h2>
Add Links here. 

<div class="content_wrap disnon">
<h2><i class="icon-comments-alt"></i> Discuss</h2>
Add a discussion question here. 


[gravityform id="18" name="Was this helpful?" title="false" description="false"]

HTML explanation

Click on the image on the right to see the color coded explanation of how the Learning Wrapper is used in the Digital Tattoo Webiste. Typically, when you are creating a content, you only need to manipulate the part highlighted in red. I will explain more in details below.

An example of how the Learning Wrapper is used in the Digital Tattoo website

Adding a video

Copy and Paste the embed code of your video you want to add in between <div class="video"> and </div>. Make sure you are in the text (HTML) mode.
For example:

<div class="video"><div class="responsive-media">
<iframe width="420" height="315" src="//" frameborder="0" allowfullscreen>

If you want to embed a Kaltura video, see Documentation:Kaltura/Embed a Video(How To)

Adding a quiz (Gravity Form) For the think section

Add the gravity form by clicking on the button highlighted in red

click on the button highlighted in red

in between: <!--Content for the Think section--> <div class="content_wrap disnon"> and </div>

For example:

<!--Content for the Think section-->
<div class="content_wrap disnon">
<h2><i class="icon-check"></i> Think</h2>
[gravityform id=12 name= Self Assessment title=false description=true]<!--Add Gravity forms here-->

On instruction on how to create a Gravity Form, see the documentation on Gravity Forms here.

Adding a content for the explore section

You can add a link in between <h2><i class="icon-link"></i> Links</h2> and

For example:

<div class="content_wrap disnon">
<h2><i class="icon-link"></i> Links</h2>
<a href=""><li>Google</li></a>
<a href=""><li>Learning commons</li></a>
Add a link here 

Adding a comment section inside the Discussion

Add your discussion question inbetween inbtween <h2><i class="icon-comments-alt"></i> Discuss</h2> and </div> . So For example:

<pre> <h2><i class="icon-comments-alt"></i> Discuss</h2>
What is your thoughts on Digital Identity? Comment on this post to start the discussion . </div>

Using the Display Comments shortcode plugin

If you have activated the Display Comments shortcode plugin,and you would like to move the UBC CLF comment section inside the Discussion Learning Wrapper, add [display-comments] inbtween <h2><i class="icon-comments-alt"></i> Discuss</h2> and </div> .

For example:

 <h2><i class="icon-comments-alt"></i> Discuss</h2>

Adding Gravity Forms

Adding Teaching Resources

Set up Featured Image

  1. Under Featured Image, click on set featured image.
set featured image
  1. Click on the Upload Files tab, and press "Select Files"
  2. Choose the image that you would to set it as a featured Image.The recommended featured image size is 360 X 231 px.

Blog posts

One of the great things at the Digital Tattoo project is writing blog posts. You get to find out about something happening in the world that’s connected to our themes and write a post about it. There’s a couple of steps to writing a blog post.

Identifying a topic

  • What’s changed recently in the world of technology and privacy? Has a new product been released that people are using without considering its implications? Has a law recently been passed that changes the way we use the internet?
  • Social media is a great place to find out about relevant things that are happening. By checking out some posts from the accounts that the Digital Tattoo twitter account follows, you’re sure to find a few good ideas.
  • What’s happening around you? Your blog ideas don’t have to be inspired by anything larger than a topic, trend, or issue that you’ve noticed. Sometimes the small and personal things resonate the most with people.


  • Before you dive too deep into researching and writing, come up with a couple of points about why your topic is relevant and applicable to our audience. Think of a few key things: Why does this matter? Why now? Who does it impact? How? What can be done?
  • Once you’ve focused your topic after asking these questions, come up with a pitch that won’t take longer than about a minute to explain. At the next Digital Tattoo meeting, you’ll be ready to share your blog idea and get some feedback.


  • Have a look at what’s already been said. You’re joining in on an ongoing dialogue and your blog post should reflect that by providing links to other pages and by summarizing where the conversation has been.
  • Read, read, read! You’re becoming a mini-expert in this subject and the biggest service you can do your reader is save them time. You try to become an authority and trusted voice on the topic.
  • If the information that you’re looking for isn’t available, don’t be afraid to pick up the phone or write an email and ask somebody. Incorporating the voices of experts in the area will add to your credibility.


  • The tone you choose to use is very important. Try to find that balance between being informative and entertaining. Mix up the length of your sentences. If something can be said more simply, say it that way. Be concise.
  • Sprinkle in lots of hyperlinks. If someone has already explained an issue in detail, just summarize what they’ve said and provide a hyperlink to that article. There’s no point extensively repeating what’s already been said.
  • Encourage more thought on the topic. Your blog posts should be informative, but they don’t have to solve the world’s problems. Ask lots of questions and try to generate a discussion.


  • Make sure to choose a good feature image for your post. If you can’t take a picture yourself, find an image with a creative commons license. You can use Google or Flickr to search for them.
  • Break up your paragraphs. Nobody likes reading a long wall of text. Short, punchy paragraphs with three to four sentences are best. And they shouldn’t contain more than one thought.
  • Where possible, use subheadings. When reading articles, people tend to scan for what’s most useful to them. Subheadings will stop the eye and alert the reader to the section’s content. Otherwise, they might scan right off the page.

Communicating with the team

There are a few different tools that you can use for communicating with the team.


  • This a powerful and clunky tool that allows for you to do many things. But mostly it’s used for discussions, content sharing, and storing information.
  • All of the passwords for our accounts are stored here. When you open it up, click on ‘Digital Tattoo’ under ‘My Projects’. Then click on ‘Notebooks’ on the list of tabs at the top. Then click on ‘General’. And finally ‘uPasswords’ on the left side of your screen.
  • If you want to share a blog post or something before sending it to the world, you can post it to ActiveCollab and have it notify the team. Everyone will be able to review your content and post feedback through the system.


  • This is probably the best way to get in touch with people. If you’re emailing amongst student partners, be sure to CC your supervisor if it’s regarding an action item.


  • Skype is a great way to keep in touch with your student partners on other campuses. Having a weekly or biweekly meeting is a good way to check-in and keep each other updated about projects and social media scheduling.


  • For real-time chatting, you can use Slack. It’s a good way to get in touch with Rie if you have technical questions about the WordPress site or anything else.

Google Drive

  • This is the easiest way to collaborate with your student partners at the Digital Tattoo project. But be mindful that all of the information is stored on servers in the United States and will be subject to the patriot act. This means that you shouldn’t store any of your personal information and can’t store anything for other students, like names and photos.
  • But it’s a great way to collaborate on a document.

The Wiki

  • Mostly used for general how-to information.

Social media channels


  • Twitter is useful tool for sharing our content and finding out things that are happening. Posting between 2-3 times a day is best. I like to post between 8 and 9 am and 4 and 5 pm, because lots of people use their phones while commuting, but mix it up.
  • But try to follow that 80-20 rule: 80% of posts should be re-sharing other people’s content, and 20% can be sharing our content.
  • Hootsuite is a great social media dashboard that allows you to schedule posts, follow conversations, and monitor hashtags. You can find the log-in information in the passwords section of ActiveCollab.


  • Facebook content tends to get the most engagement. It can travel far and wide if people think it’s useful and decide to share our posts.
  • Try not to post more than once a day.
  • Use images and links and be evocative with your language. Ask a question. Make a statement that inspires interest. Don’t be mild, but don’t be offensive.


  • This is where we host videos that we share and embed on WordPress.
  • When you first create a video, it’s a good idea to keep it ‘unlisted’ when you upload it. That way, you can share the link to it on ActiveCollab and get feedback before making it public and sharing it through our social channels or posting it on the website.
  • Try to make your videos no longer than 3 minutes.


  • There are lots of great sub-reddits with active conversations happening. Finding the right one to share our content can help it get some exposure.
  • Be mindful of the rules of the sub-reddits so you don’t get banned for spamming.
  • The UBC sub-reddit has generated a lot of conversation and clicks in the past.