edX Rules: One open software to rule them all

Vademecum

Vade Mecum open edX

29 Mar. 2019

This vadecum is intended to be used a base for the course hosted on EIUC/Global Campus open edX.

INDEX:

 

Texts

Copy/Paste from Word to open edX

  1. Copy the text from Word and paste it into https://word2cleanhtml.com/ double check the flags and hit convert to clean html
  2. Click on Copy cleaned html to clipboard
  3. On the backend (AKA Studio of open edx) https://studio.eiuc.org select Raw HTML as the content for the Unit
  4. Click on EDIT to obtain the code window
  5. Finally paste the sanitized code from clipboard and hit Save

Subtitles

IE [Hate Speech and Hate Crime]:

Code:
<p class="subtitle_page_programme">Hate Speech and Hate Crime </p>

Missing part and/or attention needed

Whenever you find some texts missing or some incomplete part it will be nice to use the appropriate class so it can be double checked easily

IE:

Code:
<p>
<span class="themissing">Freedom of expression on Internet: https://www.coe.int/en/web/human-rights-channel/-/free-expression-on-the-internet</span>
</p>

Article quotes and/or tables

IE:

Code:
<table border="1" cellspacing="0" cellpadding="0" class="table-articles">
    <tbody>
        <tr>
            <td width="100%" valign="top">
                <p>
                    <a name="_Hlk524902982">
                        Art. 17 Right to property
                    </a>
                </p>
                <p>
                    1. Everyone has the right to own, use, dispose of and
                    bequeath his or her lawfully acquired possessions. No one
                    may be deprived of his or her possessions, except in the
                    public interest and in the cases and under the conditions
                    provided for by law, subject to fair compensation being
                    paid in good time for their loss. The use of property may
                    be regulated by law in so far as is necessary for the
                    general interest.
                </p>
                <p>
                    2. Intellectual property shall be protected.
                </p>
            </td>
        </tr>
    </tbody>
</table>

The Title of the table is done with an anchor tag

<a name="putanamehere">Art. 17 Right to property</a>

 

Ordered/Unordered Nested Lists

Ordered Lists

IE of ordered list

image_description

<ul class="number_list">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

Alphabetical Lists

IE of alphabetical list

image_description

<ul class="letter_list">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

Unordered Lists

IE of Unordered list

image_description

<ul class="lista_con_pallini">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

Nested Lists

IE of Unordered list

image_description

<ul class="lista_con_pallini">
    <li>List of Lists
        <ul class="lista_con_pallini">
            <li>Unsorted</li>
            <li>Unfortunate</li>
            <li>Unsorted</li>
            <li>Unfortunate</li>
        </ul>
    </li>
    <li>Unsorted</li>
    <li>Unfortunate</li>
</ul>

Links&Span

Link Name

The A element defines an anchor.

You can create a link to a named anchor by using the name attribute (or the id attribute).

When linking within the same document, the A element is set as follows.

 

<a href="#Anchorname">linked text</a>

(Target point) 
<a name="Anchorname">a named anchor</a>

CSS Classes

Usually you would not use a class for the anchor tag, but it may happen that you want to use different color for specific regions:

<p class="titolo_gc_europe">EUROPE</p>
<p class="titolo_gc_south_east_europe">SOUTH EAST EUROPE</p>
<p class="titolo_gc_caucasus">CAUCASUS</p>
<p class="titolo_gc_africa">SOUTH AFRICA</p>
<p class="titolo_gc_asia_pacific">ASIA PACIFIC</p>
<p class="titolo_gc_latin_america">LATIN AMERICA</p>
<p class="titolo_gc_arab">ARAB WORLD</p>

Media Embeds

Usually you will have to embed different kind of media: Images, Videos, Podcasts and Files.
Every hosting has it own set of rules, that can change in time so take this instructions with a grain of salt. The vade mecum will be updated regularly and will take changes into account: if you find some code not working please promptly report it ^_^

MONK (TL;DR the solving problems script)


Monk is a quick tool lets you easily paste a shareable link from gdrive and obtain the code to be used on open edX for:

  1. Upload your file to GDrive
  2. Right click on the file from Gdrive and click on Get shareable link
  3. Paste the shared link on https://eiuc.org/monk/monk.php image_description
  4. Choose the type of link you need and click on the SEND button image_description
  5. Click on the COPY button to get the markup needed on edX image_description

Files & Folders

Single file

  1. Upload your file to GDrive
  2. Right click on the file from Gdrive and click on Get shareable link
  3. Paste the shared link on notepad or wherever, it should look similar to this:
    https://drive.google.com/open?id=1Axs4BGN3ywuYIrlHJ50K6O675CV5uqyN

  4. Copy the highlighted part (whatever comes after id=) and check if the file orientation (portrait or landscape):

    • For portrait file you can use this code and replace the id (highlighted) with the one you've just copied

      <div class="box_vertical_a4_container">
          <iframe class="box_vertical_a4" src="https://drive.google.com/file/d/1Axs4BGN3ywuYIrlHJ50K6O675CV5uqyN/preview"></iframe>
      </div>

    • For landscape file you can use this code and replace the id (highlighted) with the one you've just copied

      <div class="box_horizontal_a4_container">
          <iframe class="box_horizontal_a4" src="https://drive.google.com/file/d/1Axs4BGN3ywuYIrlHJ50K6O675CV5uqyN/preview"></iframe>
      </div>

  5. Results should look similar to those:

Single Folder

  1. Create your folder on GDrive (it should contain at least two files otherwise check Single File)
  2. Right click on the folder from Gdrive and click on Get shareable link
  3. Paste the shared link on notepad or wherever, it should look similar to this:
    https://drive.google.com/open?id=19Db85K2po9xydgMd4GsdiKL-1v7buMID

  4. Copy the highlighted part (whatever comes after id=)):

    • For grid view (when there're few files) you can use this code and replace the id (highlighted) with the one you've just copied

      <iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

    • For list view (when there're many files) you can use this code and replace the id (highlighted) with the one you've just copied

      <iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#list" style="width:100%; height:600px; border:0;"></iframe>

  5. Results should look similar to those:

Multiple Browsable Folders

  1. Create your folder with sub-folder(s) on GDrive
  2. Right click on the folder from Gdrive and click on Get shareable link
  3. Paste the shared link on notepad or wherever, it should look similar to this:
    https://drive.google.com/open?id=1ZjrJK2kmBiLDZAHdt7AhZCFDMmFQWE5s

  4. Copy the highlighted part (whatever comes after id=)

    <div class="box_horizontal_a4_container">
        <iframe class="box_horizontal_a4" src="https://eiuc.org/edxtools/z_gdrive_viewer.php?ID=1aAABmOzQV9IVp_lTOkd42_Rl3bgHjpUL"></iframe>
    </div>

  5. Result should look similar to this:

Images

Gdrive

Single file

  1. Upload your file to GDrive
  2. Right click on the file from Gdrive and click on Get shareable link
  3. Paste the shared link on notepad or wherever, it should look similar to this:
    https://drive.google.com/open?id=1L1aU8fWbn4ywFh1rX8M3Giu3oNn_FQkS

  4. Copy the highlighted part (whatever comes after id=) and check if the file orientation (portrait or landscape):
    For portrait file you can use this code and replace the id (highlighted) with the one you've just copied

        <img src="https://drive.google.com/uc?export=view&id=1aAABmOzQV9IVp_lTOkd42_Rl3bgHjpUL" alt="image_description" />

  5. Result should look similar to this:

Podcasts

Soundcloud

IE podcast to be embedded https://soundcloud.com/taleofus/caribou-cant-do-without-you-tale-of-us-mano-le-tough-remix

1. Click on Share button and then on Embed:

2. Copy the code for classic Embed [second option]

<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/166083001&color=%23ff5500&autoplay=false&hiderelated=false&showcomments=true&showuser=true&showreposts=false&showteaser=true"></iframe>

 

3. Paste the code on open edX:

<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/166083001&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>

Videos

YouTube

Youtube is the video providers for the online courses because of its deep integration with edX.
To correctly post a video from youtube to edX you should have: URL of the video and it subtitles

How to get the subtitles
  1. Login to youtube (username and password were delivered by email)
  2. Go to this link https://studio.youtube.com/channel/UC7xO-4Vs8EnTdwrUg3rSzug/videos/upload
  3. Click on the title of the video you want to embed image_description
  4. Click on the left menu Transcriptions image_description
  5. On the right side click on the English Automatic translation image_description
  6. On the new open window click on actions and select SRT image_description
  7. Download the subtitles and be ready to upload it to edX
How to get the Video URL
  1. Login to youtube (username and password were delivered by email)
  2. Go to this link https://studio.youtube.com/channel/UC7xO-4Vs8EnTdwrUg3rSzug/videos/upload
  3. Click on the title of the video you want to embed image_description
  4. Click on the right side copy video URL image_description
Embeding on edX
  1. As the unit content select Video image_description
  2. Once the unit is loaded click on EDIT image_description
  3. While on the default edit tab please paste the youtube url image_description
  4. After that click on Upload New Transcript image_description
  5. Click on Save [Left bottom Corner]

Facebook

IE video to be embedded https://www.facebook.com/eiuc.venice/videos/1158241700993405/

1. Click on the 3 horizontal dots and select Embed:

2. Copy the code starting with <iframe ...:

it should be similar to this:

<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Feiuc.venice%2Fvideos%2F1158241700993405%2F&show_text=0&width=560"  width="560"height="315" style="border:none;overflow:hidden"scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

3. Code to be pasted in open edX [the only part to be kept out of the copied code is the highlighted src attribute]:

<div class="video169_container">
<iframe class="video169" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Feiuc.venice%2Fvideos%2F1930785920278482%2F&show_text=0&width=560" frameborder="0" allowfullscreen=""></iframe>
</div>

Twitter

IE video to be embedded https://twitter.com/WhiteCodeCentre/status/1077442937884164096

1. Click on the chevron select Copy link to Tweet:

2. The URL should be similar to this:

https://twitter.com/WhiteCodeCentre/status/1077442937884164096

 

3. Code to be pasted in open edX [the only part to be kept out of the copied URL is the one highlighted (video ID) which has to be modified accordingly on the code below]:

<div class="video169_container">
<iframe class="video169" src="https://twitter.com/i/videos/1077442937884164096" frameborder="0" allowfullscreen=""></iframe>
</div>

Vimeo

IE video to be embedded https://vimeo.com/207085016

1. Click on the paper ariplane Share button:

2. Copy the code for Embed:

<iframe src="https://player.vimeo.com/video/207085016" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<p><a href="https://vimeo.com/207085016">Global Campus Human Rights Journal - Viljoen</a> from <a href="https://vimeo.com/eiuc">EIUC - Global Campus</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

 

3. Code to be pasted in open edX [the only part to be kept out of the copied URL is the one highlighted (video ID) which has to be modified accordingly on the code below]:

<div class="video169_container">
<iframe class="video169" src="https://player.vimeo.com/video/207085016" frameborder="0" allowfullscreen=""></iframe>
</div>

Surveys

SurveyMonkey

IE Survey to be embedded https://www.surveymonkey.com/r/NFL6PDT

1. Click on the paper ariplane Share button:

2. Click on Web Link 1

3. Click on Copy

4. Replace the highlighted src with the copied one

<p><iframe src="https://www.surveymonkey.com/r/T25DVBR" height="500px" width="100%"></iframe></p>

 

Google Forms

IE Survey to be embedded [https://forms.gle/rpdGz8UPiCvXcFJj9)

1. Click on the SEND button and the choose the embed icon:

2. Copy the Code on Embed HTML

3. Replace the highlighted src with the copied one

<p><iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeLoABZkKjglKUydauNag9nv6bDx0RT7bXv-7AoWnrL1zQ2jA/viewform?embedded=true" width="100%" height="700" frameborder="0" marginheight="0" marginwidth="0"></iframe></p>