Interactions and Custom Styles Templates and Examples¶
Note
If you copy the templates below be sure to paste them in the advanced (xml) editor in edX Studio (Do NOT use the visual editor)
Collapsible Field¶
Collapsible field expands when clicked.
<section class="hints">
<div class="collapsible"><header><a href="#" id="ht3">Click here to display collapsed content</a></header>
<section id="ht3" style="display: none;">
<p>Add collapsible content here</p>
</section>
Collapsible McGillX Styled¶
Collapsible field expands when clicked. Custom CSS adding down arrow and titles.
<style>
.collapsible-mcgillx{
padding: .5em 1em;
border: 1px solid #cbcbcb;
border-radius: 0.5em;
margin-bottom: 0.5em;
}
</style>
<section class="hints">
<div class="collapsible collapsible-mcgillx"><header style="text-align:right"><a href="#" id="ht3"><span style="float:left; font-weight:bold;color:black;">Title text</span>Expand ↓</a></header>
<section id="ht3" style="display: none;">
<p>TEXT ENTRY</p>
</section>
</div>
</section>
Collapsible McGillX Styled for Transcripts¶
Collapsible field expands when clicked. Custom CSS adding down arrow and titles.
<style>
.mcgillx-full-transcript{
padding: .5em 1em;
border: 1px solid #cbcbcb;
border-radius: 0.5em;
margin-bottom: 0.5em;
}
</style>
<br>
<section class="hints">
<div class="collapsible mcgillx-full-transcript"><header style="text-align:right"><a href="#" id="ht3"><span style="float:left; font-weight:bold;color:black;">Full Transcript</span>Expand ↓</a></header>
<section id="ht3" style="display: none;">
<p>Transcript html pasted here</p>
</section>
</div>
</section>
McGillX FAQ & Help¶
McGillX FAQ & Help from course page intended to assist students with troubleshooting. Note the content is dated and does not reflect new updates to edX.
<style>
.mcgillx-full-transcript{
padding: .5em 1em;
border: 1px solid #cbcbcb;
border-radius: 0.5em;
margin-bottom: 0.5em;
}
</style>
<br>
<section class="hints">
<div class="collapsible mcgillx-full-transcript"><header style="text-align:right"><a href="#" id="ht3"><span style="float:left; font-weight:bold;color:black;">Full Transcript</span>Expand ↓</a></header>
<section id="ht3" style="display: none;">
<p>Transcript html pasted here</p>
</section>
</div>
</section>
Example Custom Home Page Sidebar¶
<style>
.mcgillx-full-transcript{
padding: .5em 1em;
border: 1px solid #cbcbcb;
border-radius: 0.5em;
margin-bottom: 0.5em;
}
</style>
<br>
<section class="hints">
<div class="collapsible mcgillx-full-transcript"><header style="text-align:right"><a href="#" id="ht3"><span style="float:left; font-weight:bold;color:black;">Full Transcript</span>Expand ↓</a></header>
<section id="ht3" style="display: none;">
<p>Transcript html pasted here</p>
</section>
</div>
</section>
Example Syllabus¶
<div align="center"><img src="/static/ATOC185x_banner_syllabus.png" /></div>
<p></p>
<p>A PDF version of the syllabus can be found <a href="/static/ATOC185x__syllabus-calendar_final.pdf" target="_blank">here</a>.</p>
<h2 style="text-transform: none; color: #00a0e9; font-weight: bold;">Course Description</h2>
<p>No region on Earth is immune from natural disasters. As we gain scientific understanding into the causes and nature of such phenomena, we become better able to mitigate the effects of disasters. Yet as the world's population continues to grow, an increasingly large number of people are at risk. This course examines the science behind different types of disasters and our ability or inability to control and predict such events. From this course the student will gain an appreciation of natural disasters beyond the newspaper headlines, and will better understand how the effects of disasters can be reduced.</p>
<p>There is an urgent need for people from all walks of life to better understand the scientific principles behind the occurrence of natural disasters. City planners need to know where to and where not to site buildings. Politicians need to make scientifically informed decisions. Emergency management officials need to understand the nature of a potential disaster and ways to mitigate such an event. Journalists need to report scientifically accurate information.</p>
<p>During this course, students will:</p>
<ol style="list-style-position: inside;">
<li>Explore the ongoing conflict between humans and nature.</li>
<li>Discuss the global impact of natural disasters and how they are linked.</li>
<li>Explore the scientific principles behind the occurrence of natural disasters.</li>
</ol>
<h2 style="text-transform: none; border: none; color: #00a0e9; font-weight: bold; font-size: 1.2em;">Instructors</h2>
<table style="border: none;" border="0" width="100%">
<tbody>
<tr>
<td style="border: none;" width="12%"><img src="/static/mcgillx_atoc185x_john_gyakum_syllabus.png" /></td>
<td style="border: none;" width="28%"><b>John Gyakum</b><br /> Professor of Meteorology, Department of Atmospheric and Oceanic Sciences <br />McGill University</td>
<td style="border: none;" width="10%"></td>
<td style="border: none;" width="12%"><img src="/static/mcgillx_atoc185x_john_stix_syllabus.png" /></td>
<td style="border: none;" width="28%"><b>John Stix</b><br /> Professor of Volcanology, Department of Earth and Planetary Sciences <br />McGill University</td>
<td style="border: none;" width="10%"></td>
</tr>
</tbody>
</table>
<h2 style="text-transform: none; border: none; color: #00a0e9; font-weight: bold; font-size: 1.2em;">Students Assistants</h2>
<table style="border: none;" border="0" width="100%">
<tbody>
<tr>
<td style="border: none;" width="12%"><img src="/static/mcgillx_atoc185x_angela_guadagno_syllabus.jpg" /></td>
<td style="border: none;" width="35%"><b>Angela Guadagno</b><br />McGill University</td>
<td style="border: none;" width="12%"><img src="/static/mcgillx_atoc185x_karolane_caissy_syllabus.png" /></td>
<td style="border: none;" width="35%"><b>Karolane Caissy</b><br />McGill University</td>
</tr>
</tbody>
</table>
<!--Table-->
<h2 style="text-transform: none; color: #00a0e9; font-weight: bold;">Course Schedule</h2>
<table border="1" width="100%"><!--<thead bgcolor="D6EBFF">
<tr>
<th background="D6EBFF" width="24%">Topic</th><th background="D6EBFF" width="13%">Release Date*</th><th bgcolor="D6EBFF" width="50%">Content</th><th bgcolor="D6EBFF" width="13%">Due Date**</th>
</tr>
</thead> -->
<tbody>
<tr>
<td bgcolor="D6EBFF" width="24%"><b>Topic</b></td>
<td bgcolor="D6EBFF" width="13%"><b>Release Date*</b></td>
<td bgcolor="D6EBFF" width="50%"><b>Content</b></td>
<td bgcolor="D6EBFF" width="13%"><b>Due Date**</b></td>
</tr>
<!--template-->
<tr>
<td rowspan="4" align="center" width="24%">Topic 1:<br />Overview and Volcanoes <br /> <img src="/static/ATOC185x_Zeemaps_volcano_icon.png" alt="volcano_image" /></td>
<td rowspan="4" align="center" width="13%">May 28</td>
<td width="50%">LECTURE: Natural Disasters Overview and Volcanoes</td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">MAP BUILDING: ATOC185x Global Hazards</td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">LAB: Hands-On Science #1</td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">ENTRANCE SURVEY</td>
<td width="13%"></td>
</tr>
<!--/template-->
<tr>
<td rowspan="3" align="center" width="24%">Topic 2:<br />Hurricanes <br /> <img src="/static/ATOC185x_Zeemaps_hurricane_icon.png" alt="hurricane_image" /></td>
<td rowspan="3" align="center" width="13%">June 4</td>
<td width="50%">LECTURE: Hurricanes</td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">MAP BUILDING: ATOC185x Global Hazards</td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">GAME:<em> Stop Disasters Challenge</em></td>
<td width="13%"></td>
</tr>
<tr>
<td rowspan="4" align="center" width="24%">Topic 3:<br />Earthquakes <br /> <img src="/static/ATOC185x_Zeemaps_earthquake_icon.png" alt="earthquake_image" /></td>
<td rowspan="4" align="center" width="13%">June 11</td>
<td width="50%">LECTURE: Earthquakes</td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">MAP BUILDING: ATOC185x Global Hazards</td>
<td width="13%"></td>
</tr>
<!--
<tr>
<td width="50%">LAB: Hands-On Science #2</td>
<td width="13%"></td>
</tr>-->
<tr>
<td width="50%">GAME:<em> Stop Disasters Challenge</em></td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">HOMEWORK: Assignment #1</td>
<td align="center" width="13%"><b>June 27</b></td>
</tr>
<!--TOPIC-->
<tr>
<td rowspan="4" align="center" width="24%">Topic 4:<br />Tornadoes <br /> <img src="/static/ATOC185x_Zeemaps_tornado_icon.png" alt="tornadoes_image" /></td>
<td rowspan="4" align="center" width="13%">June 18</td>
<td width="50%">LECTURE: Tornadoes</td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">MAP BUILDING: ATOC185x Global Hazards</td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">LAB: Hands-On Science #2</td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">HOMEWORK: Assignment #2</td>
<td align="center" width="13%"><b>July 4</b></td>
</tr>
<!--TOPIC-->
<tr>
<td rowspan="4" align="center" width="24%">Topic 5:<br />Tsunamis <br /> <img src="/static/ATOC185x_Zeemaps_tsunami_icon.png" alt="tsunami_image" /></td>
<td rowspan="4" align="center" width="13%">June 25</td>
<td width="50%">LECTURE: Tsunamis</td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">MAP BUILDING: ATOC185x Global Hazards</td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">GAME:<em> Stop Disasters Challenge</em></td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">HOMEWORK: Assignment #3</td>
<td align="center" width="13%"><b>July 11</b></td>
</tr>
<tr>
<td width="13%"></td>
<td align="center" width="13%"><b><span color="red" style="color: red;">July 2</span></b></td>
<td width="50%"><b><span color="red" style="color: red;">TEST: Midterm</span></b></td>
<td align="center" width="13%"><b><span color="red" style="color: red;">July 18</span></b></td>
</tr>
<!--Catch up week-->
<tr>
<td colspan="4" align="center" bgcolor="D6EBFF" width="100%"><b>Catch up week</b></td>
</tr>
<tr>
<td rowspan="3" align="center" width="24%">Topic 6:<br />Ice Storms <br /> <img src="/static/ATOC185x_Zeemaps_icestorm_icon.png" alt="icestorm_image" /></td>
<td rowspan="3" align="center" width="13%">July 9</td>
<td width="50%">LECTURE: Ice Storms</td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">MAP BUILDING: ATOC185x Global Hazards</td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">LAB: Hands-On Science #3</td>
<td width="13%"></td>
</tr>
<tr>
<td rowspan="4" align="center" width="24%">Topic 7:<br />Landslides and Avalanches <br /> <img src="/static/ATOC185x_Zeemaps_landslide_icon.png" alt="landslide_image" /><img src="/static/ATOC185x_Zeemaps_avalanche_icon.png" alt="avalanche_icon" /></td>
<td rowspan="4" align="center" width="13%">July 16</td>
<td width="50%">LECTURE: Landslides and Avalanches</td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">MAP BUILDING: ATOC185x Global Hazards</td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">LAB: Hands-On Science #4</td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">FINAL PROJECT: Part 1</td>
<td align="center" width="13%"><b>August 1</b></td>
</tr>
<tr>
<td rowspan="2" align="center" width="24%">Topic 8:<br />El Niño</td>
<td rowspan="2" align="center" width="13%">July 23</td>
<td width="50%">LECTURE: El Niño</td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">HOMEWORK: Assignment #4</td>
<td align="center" width="13%"><b>August 8</b></td>
</tr>
<tr>
<td rowspan="3" align="center" width="24%">Topic 9:<br />Climate Change and Wrap-up</td>
<td rowspan="3" align="center" width="13%">July 30</td>
<td width="50%">LECTURE: Climate Change and Wrap-up</td>
<td width="13%"></td>
</tr>
<tr>
<td width="50%">FINAL PROJECT: Part 2</td>
<td align="center" width="13%"><b>August 15</b></td>
</tr>
<tr>
<td width="50%">EXIT SURVEY</td>
<td align="center" width="13%"><b>August 22</b></td>
</tr>
<tr>
<td width="13%"></td>
<td align="center" width="13%"><b><span color="red" style="color: red;">August 6</span></b></td>
<td width="50%"><b><span color="red" style="color: red;">TEST: Final</span></b></td>
<td align="center" width="13%"><b><span color="red" style="color: red;">August 22</span></b></td>
</tr>
</tbody>
</table>
<p>* Lesson materials, assignments, and tests will be released on Wednesdays at 17h00 UTC<br /> ** All assignments and tests are due at 23h30 UTC<br /><br /></p>
<h2 style="text-transform: none; color: #00a0e9; font-weight: bold;">Activities and Labs (10%)</h2>
<p>This course includes a series of small activities embedded within the lectures and labs that are hands-on experiments designed to explore science concepts for various topics. Completion of these components of the courseware is worth 10% of your final grade. You can receive full marks by trying all the activities and submitting the correct response or in the case of the labs reporting completion of the task. They are designed such that you have unlimited attempts to submit the correct answer. There is no deadline, but they must be submitted before the course closes on August 22, 2014, for them to be included in the calculation of your final grade.</p>
<h2 style="text-transform: none; color: #00a0e9; font-weight: bold;">Assignments (40%)</h2>
<p>This course has 4 assignments that will be posted as part of the weekly content. If you have any questions about an assignment, we encourage you to post them on the discussion forum so that other students, along with the student assistants and professors, can provide input. You will have a minimum of two weeks to complete assignments.</p>
<h2 style="text-transform: none; color: #00a0e9; font-weight: bold;">Tests (30%)</h2>
<p>This course includes two tests. Each is composed of 25 multiple choice questions. The midterm will cover topics 1-5 and the final (non-cumulative) will focus on topics 6-9.</p>
<h2 style="text-transform: none; color: #00a0e9; font-weight: bold;">Final Project (20%)</h2>
<p>As a core part of the course you will complete a final project that is made up of two parts. Your submissions will be evaluated using the peer and self-assessment tool in edX. Further details regarding the components of the project, including the grading rubric, will be available in the courseware.</p>
<h2 style="text-transform: none; color: #00a0e9; font-weight: bold;">Honor Code Attestation</h2>
<p>To obtain an honor code attestation (equivalent of an edX Certificate of Completion), a final grade of 60% or higher needs to be achieved. EdX will issue the attestation to you via your student dashboard under the name of McGillX after the end of the course. The attestation will not include a final grade.</p>
<p></p>