- Texts
- Links
- Media Embeds
-
Files and Folders
-
Images
-
Podcasts
-
Videos
-
Surveys
- Copy the text from Word and paste it into https://word2cleanhtml.com/ double check the flags and hit convert to clean html
- Click on Copy cleaned html to clipboard
- On the backend (AKA Studio of open edx) https://studio.gchumanrights.org select Raw HTML as the content for the Unit
- Click on EDIT to obtain the code window
- Finally paste the sanitized code from clipboard and hit Save
<p class="subtitle_page_programme">Hate Speech and Hate Crime </p>
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
<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>
<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>
<ul class="number_list">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul class="letter_list">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul class="lista_con_pallini">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<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>
<ul class="number_list_bold"> <li>Trafficking needs an element of movement, but not a movement across borders.</strong> <br><span>There are two important points here:</span><br> <ul class="lista_con_pallini"> <li> <span>Does trafficking need movement? There is an evolving debate on the necessity of movement in the crime of trafficking. Recently there has been a move to conflate trafficking with slavery and forced labour (both of which do not need movement). Though the <em>Travaux Preparatories</em> for the Palermo Protocol (the official record of the negotiation during the drafting) note that the drafters saw an element of movement as compulsory for the definition, more recently the US government’s Trafficking in Person’s office and influential NGOs (such as Kevin Bales Free the Slaves and Anti-Slavery), all regard trafficking as a part of ‘modern day slavery.’ <br>For details of this debate see: Janie A. Chuang. 2014. “Exploitation Creep and the Unmaking of Human Rights Law.” <em>American Journal of International Law</em> 108: 609-649. </span> </li> <li> <span>Trafficking within a country. Mostly media and counter trafficking represent trafficked victims as non citizens, as people who were taken across a border for exploitation. While this is the most common form of trafficking in Southeast Asia, there are trafficking pathways which are internal to a country. People are still trafficked from the countryside to the city, for example child domestic workers. Indigenous and minority groups are also vulnerable to internal trafficking. Another case is during disasters as there are concerns that people can be trafficked out of humanitarian camps.</span> </li> </ul>
Announcements boxes are useful when you want to make a bold announcement.
<style>
.announcements-box {
padding: 20px;
background-color: #f44336;
color: white;
transition: opacity 0.6s;
margin-bottom: 15px;
min-height: 50px;
border-radius: 4px;
font-size: 18px;
vertical-align: center;
}
.closebtn {
margin-left: 15px;
color: fff;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn: hover {
color: #75716e;
}
.primary {
background: #75716e;
}
.info {
background-color: #009fe3;
}
.success {
background: #15CD72;
}
.danger {
background: #e6553d;
}
.warning {
background: #f9bd00;
}
.muted {
background: #ECECEC;
color: #75716e;
}
</style>
<div class="announcements-box primary">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong>PRIMARY</strong><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies quis arcu eget commodo. Etiam tempor lacus lorem, et ullamcorper odio interdum id. Morbi odio augue, porttitor eu posuere at, consequat eu augue.
</div>
<p class="margin_bottom_20"></p>
<div class="announcements-box info">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong>INFO</strong><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies quis arcu eget commodo. Etiam tempor lacus lorem, et ullamcorper odio interdum id. Morbi odio augue, porttitor eu posuere at, consequat eu augue.
</div>
<p class="margin_bottom_20"></p>
<div class="announcements-box success">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong>SUCCESS</strong><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies quis arcu eget commodo. Etiam tempor lacus lorem, et ullamcorper odio interdum id. Morbi odio augue, porttitor eu posuere at, consequat eu augue.
</div>
<p class="margin_bottom_20"></p>
<div class="announcements-box warning">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong>WARNING</strong><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies quis arcu eget commodo. Etiam tempor lacus lorem, et ullamcorper odio interdum id. Morbi odio augue, porttitor eu posuere at, consequat eu augue.
</div>
<p class="margin_bottom_20"></p>
<div class="announcements-box danger">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong>DANGER</strong><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies quis arcu eget commodo. Etiam tempor lacus lorem, et ullamcorper odio interdum id. Morbi odio augue, porttitor eu posuere at, consequat eu augue.
</div>
<p class="margin_bottom_20"></p>
<div class="announcements-box muted">
<span class="closebtn muted" onclick="this.parentElement.style.display='none';">×</span>
<strong>MUTED</strong><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies quis arcu eget commodo. Etiam tempor lacus lorem, et ullamcorper odio interdum id. Morbi odio augue, porttitor eu posuere at, consequat eu augue.
</div><style>
.xblock .xblock h2 {
font-weight: 300 !important;
text-transform: initial;
color: #75716e !important;
font-size: 24px;
}
.h2faq{
font-size: 20px !important;
font-weight: 300 !important;
letter-spacing: 0px !important;
line-height: 30px !important;
}
.h3faq{
font-size: 16px !important;
font-weight: 300 !important;
letter-spacing: 0px !important;
line-height: 22px !important;
color: #646464 !important
}
</style>
<div class="mod_faqpage description_page_programme_no_border no_margin_bottom block">
<article class="first even">
<h2 class="h2faq">Enrolment</h2>
<!--<section class="first even">
<h3 class="h3faq" id="how-do-i-enrol-in-the-course-44aac414">How do I enrol in the course?</h3>
<div class="ce_text block">
<p>In order to enrol, please follow the instructions on our “<a href="education/e-learning/moocs/monitoring-the-human-rights-of-lgbti-persons/how-to-enrol.html">How to enrol</a>” webpage . This will then lead you to the OpenEdX course page. Once you are there, you can start the enrolment process by clicking the "enrol" button.</p>
</div>
</section>-->
<section class="last odd">
<h3 class="h3faq" id="is-there-a-selection-procedure-to-participate-in-the-course-5a9b94ac">Is there a selection procedure to participate in the course?</h3>
<div class="ce_text block">
<p>The course is a MOOC (Massive Open Online Course), which means we do not select participants on any basis. Rather, we welcome anyone who is interested in learning more about the topic to enrol and participate for free.</p>
</div>
</section>
</article>
<article class="odd">
<h2 class="h2faq">Fees</h2>
<section class="first even">
<h3 class="h3faq" id="i-would-like-to-know-if-the-course-is-free-or-if-some-parts-are-to-be-paid-4b30d678">I would like to know if the course is free or if some parts are to be paid</h3>
<div class="ce_text block">
<p>Our course is a MOOC (Massive Open Online Course), which means all components are open and totally free for anyone.</p>
</div>
</section>
<section class="last odd">
<h3 class="h3faq" id="i-would-like-to-know-if-the-course-is-free-or-if-some-parts-are-to-be-paid-148-27d18db9">Do I need to pay any fee to attend the course?</h3>
<div class="ce_text block">
<p>There are no registration or tuition fees. </p>
</div>
</section>
</article>
<article class="odd">
<h2 class="h2faq">Accessibility</h2>
<section class="first last even">
<h3 class="h3faq" id="is-the-course-accessible-to-persons-with-disabilities-c132662c">Is the course accessible to persons with disabilities?</h3>
<div class="ce_text block">
<p class="margin_bottom_20">We want all participants in our courses to enjoy a great learning experience and we strive to always improve accessibility. Each week of the course includes one or two video lectures with accompanying transcripts and reading materials. The texts are in PDF format, work at low bandwidths, are printable and can be zoomed to the desired size. Some readings may include pages from accessible websites. This makes all of them accessible to those who use assistive technology software such as screen readers. Likewise, weekly discussions and module quizzes can be completed through our platform which is accessible, for example, to people who use speech input, keyboard accessible controls or text to speech tools. For more details please visit <a class="titolo_gc_europe" href="https://www.edx.org/accessibility">EdX Website Accessibility Policy</a> </p>
</div>
</section>
</article>
<article class="even">
<h2 class="h2faq">Structure and content</h2>
<section class="first last even">
<h3 class="h3faq" id="is-there-a-schedule-for-the-course-or-is-it-self-directed-e2186c8d">Is there a schedule for the course?</h3>
<div class="ce_text block">
<p>The course is self-paced so participants can study in their own time. However, in order to enhance peer learning, interactive participation and self-assessment, weekly topics and discussions as well as module quizzes are proposed at set dates. In any case, they are all open until the end of the course to facilitate access and completion at any preferred time. For a detailed description of the schedule check the <a href="https://gchumanrights.org/education/e-learning/moocs/fundamental-rights-of-the-european-union/course-outline.html" target="_blank">course outline page</a> on our website.</p>
</div>
</section>
<section class="first last even">
<h3 class="h3faq" id="is-there-a-schedule-for-the-course-or-is-it-self-directed-e2186c8d">I have a commitment in week 2. Would it be possible to work on it the following weeks?</h3>
<div class="ce_text block">
<p>As the course is self-paced, the workload can be shifted from one week to the other. </p>
<!-- Even the quizzes can be taken in a one week span, so that every participant can adjust it to his/her personal commitments. -->
</div>
</section>
<!--<section class="first last even">
<h3 class="h3faq" id="is-there-a-schedule-for-the-course-or-is-it-self-directed-e2186c8d">How do I take part in discussions?</h3>
<div class="ce_text block">
<p>Discussions are based on an initial question/prompt that refers to the content studied in a particular week and that usually gives you the opportunity to discuss, share examples, propose ideas, and interact with other participants. Participation in discussions is part of the learning process for all. Therefore, we trust each active participant will make meaningful contributions (so please note that a simple answer such as "I agree" will not be considered valid for the purpose of earning the certificate of participation). Due to the large number of participants, it might be difficult to follow all inputs, but you can easily search the discussion forum with keywords, names, issues, etc. Responses are also nested so that if you respond to another participant, you'll see the flow of your exchanges immediately below the initial input. At times it might be useful to create a group discussion if participants are particularly interested in further exchanges on a specific sub-issue. In such cases, the coordinating team will set up another discussion and interested participants will be able to join this one too.</p>
</div>
</section>
<section class="first last even">
<h3 class="h3faq" id="is-there-a-schedule-for-the-course-or-is-it-self-directed-e2186c8d">Quizzes</h3>
<div class="ce_text block">
<p>Quizzes are foreseen at the end of each Module in order for you to check your understanding and progress. They are based on 5 questions and require a score of 4/5 to pass. They consist of different types of questions (true/false; yes/no; multiple choice; multiple answer) and once open, they remain available until the end of the course. You can have unlimited attempts and can see what answers you got wrong/right. However, for a more effective and satisfactory learning experience we warmly encourage you to take the quizzes after having prepared for them properly and not at random.
</p>
</div>
</section>
<section class="first last even">
<h3 class="h3faq" id="is-there-a-schedule-for-the-course-or-is-it-self-directed-e2186c8d">What are the requirements to complete the course? </h3>
<div class="ce_text block">
<p>To successfully complete the course students must take part in 4 weekly discussions and pass 3 quizzes.</p>
</div>
</section>-->
</article>
<article class="last even">
<h2 class="h2faq">Certificate of participation</h2>
<section class="first last even">
<h3 class="h3faq" id="what-do-i-need-to-do-to-get-the-certificate-of-participation-c1ac8fc6">If I complete the Course will I get the Certificate?</h3>
<div class="ce_text block">
<p>At the end of the course you will not receive a certificate of participation.
</p>
<p> </p>
</div>
</section>
</article>
</div>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>
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><span class="titolo_gc_europe">EUROPE</span></p> <p><span class="titolo_gc_south_east_europe">SOUTH EAST EUROPE</span></p> <p><span class="titolo_gc_caucasus">CAUCASUS</span></p> <p><span class="titolo_gc_africa">SOUTH AFRICA</span></p> <p><span class="titolo_gc_asia_pacific">ASIA PACIFIC</span></p> <p><span class="titolo_gc_latin_america">LATIN AMERICA</span></p> <p><span class="titolo_gc_arab">ARAB WORLD</span></p>
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 these 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 is a quick tool lets you easily paste a shareable link from gdrive and obtain the code to be used on open edX for:
- Single File
- Single File Landscape
- Single Folder - Grid View
- Single Folder - List View
- Browseable Folder
- Image
- Upload your file to GDrive
- Right click on the file from Gdrive and click on Get shareable link
- Paste the shared link on https://gchumanrights.org/monk/monk.php
- Upload your file to GDrive
- Right click on the file from Gdrive and click on Get shareable link
- Paste the shared link on notepad or wherever, it should look similar to this:
https://drive.google.com/open?id=1Axs4BGN3ywuYIrlHJ50K6O675CV5uqyN
-
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>
-
-
Results should look similar to those:
- Create your folder on GDrive (it should contain at least two files otherwise check Single File)
- Right click on the folder from Gdrive and click on Get shareable link
- Paste the shared link on notepad or wherever, it should look similar to this:
https://drive.google.com/open?id=19Db85K2po9xydgMd4GsdiKL-1v7buMID
-
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>
-
-
Results should look similar to those:
- Create your folder with sub-folder(s) on GDrive
- Right click on the folder from Gdrive and click on Get shareable link
- Paste the shared link on notepad or wherever, it should look similar to this:
https://drive.google.com/open?id=1ZjrJK2kmBiLDZAHdt7AhZCFDMmFQWE5s
-
Copy the highlighted part (whatever comes after id=)
<div class="box_horizontal_a4_container"> <iframe class="box_horizontal_a4" src="https://gchumanrights.org/edxtools/z_gdrive_viewer.php?ID=1aAABmOzQV9IVp_lTOkd42_Rl3bgHjpUL"></iframe> </div> -
Result should look similar to this:
- Upload your file to GDrive
- Right click on the file from Gdrive and click on Get shareable link
- Paste the shared link on notepad or wherever, it should look similar to this:
https://drive.google.com/open?id=1L1aU8fWbn4ywFh1rX8M3Giu3oNn_FQkS
-
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" /> -
Result should look similar to this:
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&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=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>
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
- Login to youtube (username and password were delivered by email)
- Go to this link [https://studio.youtube.com/channel/UC7xO-4Vs8EnTdwrUg3rSzug/videos/upload] (https://studio.youtube.com/channel/UC7xO-4Vs8EnTdwrUg3rSzug/videos/upload)
- Click on the title of the video you want to embed
- Login to youtube (username and password were delivered by email)
- Go to this link [https://studio.youtube.com/channel/UC7xO-4Vs8EnTdwrUg3rSzug/videos/upload] (https://studio.youtube.com/channel/UC7xO-4Vs8EnTdwrUg3rSzug/videos/upload)
- Click on the title of the video you want to embed
- As the unit content select Video
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>
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>
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>
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>
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>