Merge pull request openedx#403 from open-craft/pedrovgp/se4781-add-cu…

…stom-html-templates-in-studio

Pedrovgp/se4781 add custom html templates in studio

common/lib/xmodule/xmodule/css/html/esme_custom.scss

@@ -0,0 +1,91 @@
+// BEGIN OF ESME CUSTOM CSS FOR HTML COMPONENTS
+.icon-image {
+	margin: 2px 30px 0 0;
+    width: 64px;
+    object-fit: contain;
+    align-self: flex-start;
+}
+.div-overview {
+  padding: 4px 4px 4px 2px;
+  max-width: 100%;
+  display:inline-flex;
+}
+.div-video {
+  padding: 4px 4px 4px 2px;
+  max-width: 100%;
+  display:inline-flex;
+  }
+.div-quickfact {
+  padding: 4px 4px 4px 2px;
+  max-width: 100%;
+  display:inline-flex;
+}
+.div-objectives {
+  padding: 4px 4px 4px 2px;
+  max-width: 100%;
+  display:inline-flex;
+}
+.div-info {
+  padding: 4px 4px 4px 2px;
+  max-width: 100%;
+  display:inline-flex;
+}
+.div-keytakeaways {
+  padding: 4px 4px 4px 2px;
+  max-width: 100%;
+  display:inline-flex;
+}
+.div-optionalreading {
+  padding: 4px 4px 4px 2px;
+  max-width: 100%;
+  display:inline-flex;
+}
+.div-references {
+  padding: 4px 4px 4px 2px;
+  max-width: 100%;
+  display:inline-flex;
+}
+.div-exercise {
+  padding: 4px 4px 4px 2px;
+  max-width: 100%;
+  display:inline-flex;
+}
+.div-teamexercise {
+  padding: 4px 4px 4px 2px;
+  max-width: 100%;
+  display:inline-flex;
+}
+.div-quiz {
+  padding: 4px 4px 4px 2px;
+  max-width: 100%;
+  display:inline-flex;
+}
+.div-currentevent {
+  padding: 4px 4px 4px 2px;
+  max-width: 100%;
+  display:inline-flex;
+}
+.div-casestudy {
+  padding: 4px 4px 4px 2px;
+  max-width: 100%;
+  display:inline-flex;
+}
+.div-assignments {
+  padding: 4px 4px 4px 2px;
+  max-width: 100%;
+  display:inline-flex;
+}
+.div-downloads {
+  padding: 4px 4px 4px 2px;
+  max-width: 100%;
+  display:inline-flex;
+}
+.div-help {
+  padding: 4px 4px 4px 2px;
+  max-width: 100%;
+  display:inline-flex;
+}
+.hr-template {
+	border-top: 1px solid #CC7D52;
+}
+// END OF ESME CUSTOM CSS FOR HTML COMPONENTS

common/lib/xmodule/xmodule/html_module.py

@@ -145,7 +145,12 @@ def studio_view(self, _context):
         ],
         'xmodule_js': resource_string(__name__, 'js/src/xmodule.js'),
     }
-    preview_view_css = {'scss': [resource_string(__name__, 'css/html/display.scss')]}
+    preview_view_css = {
+        'scss': [
+            resource_string(__name__, 'css/html/display.scss'),
+            resource_string(__name__, 'css/html/esme_custom.scss'),
+        ]
+    }
 
     uses_xmodule_styles_setup = True
     requires_per_student_anonymous_id = True

common/lib/xmodule/xmodule/templates/html/additional_activities.yaml

@@ -0,0 +1,14 @@
+---
+metadata:
+    display_name: Additional Activities
+data: |
+      <div class="div-overview"><img class="icon-image" src="/static/additional_material.png" alt="" />
+      <div>
+      <h4>Additional Activities</h4>
+      <p>As in each module, we present additional content related to the core learning. This week, we:</p>
+      <ul>
+      <li>[Enter additional activity 1]</li>
+      <li>[Enter additional activity 2]</li>
+      </ul>
+      </div>
+      </div>

common/lib/xmodule/xmodule/templates/html/case_analysis.yaml

@@ -0,0 +1,14 @@
+---
+metadata:
+    display_name: Case Analysis
+data: |
+      <div class="div-casestudy"><img class="icon-image" src="/static/Case_Study.png" alt="" />
+      <div>
+      <h4>Case Analysis</h4>
+      <p>Having read this case, consider the following questions:</p>
+      <ul>
+      <li>[Enter question 1]</li>
+      <li>[Enter question 2]</li>
+      </ul>
+      </div>
+      </div>

common/lib/xmodule/xmodule/templates/html/case_information.yaml

@@ -0,0 +1,10 @@
+---
+metadata:
+    display_name: Case Information
+data: |
+      <div class="div-casestudy"><img class="icon-image" src="/static/info.png" altCase Information
+      Case Information
+      <h4>Case InformationCase Information
+      <p>[Enter text here]</p>
+      </div>
+      </div>

common/lib/xmodule/xmodule/templates/html/case_study.yaml

@@ -0,0 +1,11 @@
+---
+metadata:
+    display_name: Case Study
+data: |
+      <div class="div-casestudy">
+        <img class="icon-image" src="/static/quick_fact.png" alt="">
+        <div>
+          <h4>Quick Facts</h4>
+      		<p>[Enter text here]</p>
+        </div>
+      </div>

common/lib/xmodule/xmodule/templates/html/current_event.yaml

@@ -0,0 +1,11 @@
+---
+metadata:
+    display_name: Current Event
+data: |
+      <div class="div-currentevent">
+        <img class="icon-image" src="/static/in_the_news.png" alt="">
+        <div>
+          <h4>Current Event</h4>
+      		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </div>
+      </div>

common/lib/xmodule/xmodule/templates/html/faculty_video.yaml

@@ -0,0 +1,11 @@
+---
+metadata:
+    display_name: Faculty Video
+data: |
+      <div class="div-video"><img class="icon-image" src="/static/video.png" alt="" />
+      <div>
+      <h4>Video: Module [X] Overview Video</h4>
+      <p>In the following video...</p>
+      </div>
+      </div>
+      <p></p>

common/lib/xmodule/xmodule/templates/html/graded_assignments.yaml

@@ -0,0 +1,16 @@
+---
+metadata:
+    display_name: Graded Assignments
+data: |
+      <div class="div-assignments"><img class="icon-image" src="/static/assessments.png" alt="" />
+      <div>
+      <h4>Graded Assignments</h4>
+      <p>We will also complete individual and group assignments, which count towards your completion of the programme. This week, we:</p>
+      <ul>
+      <li>[Assignment 1]</li>
+      <li>[Assignment 2]</li>
+      </ul>
+      <p>You must submit all graded assignments in Module 1 <strong>by [Enter Date], 23:59 UTC</strong>. (Try the <a href="https://www.thetimezoneconverter.com/?t=11%3A00%20AM&amp;tz=UTC%20(Coordinated%20Universal%20Time)" target="_blank" s="">Time Zone Converter</a> to get your local time.)</p>
+      </div>
+      </div>
+      <p></p>

common/lib/xmodule/xmodule/templates/html/guest_video.yaml

@@ -0,0 +1,11 @@
+---
+metadata:
+    display_name: Guest Video
+data: |
+      <div class="div-video">
+      <img class="icon-image" src="/static/video.png" alt="">
+       <div>
+      <h4>Guest Video: [Enter Video Title Here]</h4>
+      <p>In the following video...</p>
+      </div>
+      </div>

common/lib/xmodule/xmodule/templates/html/individual_exercise.yaml

@@ -0,0 +1,11 @@
+---
+metadata:
+    display_name: Individual Exercise
+data: |
+      <div class="div-exercise">
+      <img class="icon-image" src="/static/exercises.png" alt="">
+      <div>
+        <h4>Individual Exercise</h4>
+       <p>[Enter the description and instructions for the exercise. You will add the exercise as it's own component.]</p>
+      </div>
+      </div>

common/lib/xmodule/xmodule/templates/html/info.yaml

@@ -0,0 +1,39 @@
+---
+metadata:
+    display_name: Info
+data: |
+      <div class="div-info">
+      <img class="icon-image" src="/static/overview.png" alt="">
+          <div>
+      <h4>[H4 Title Goes Here]</h4>
+      <p>[Delete existing text and enter your own in this section] The Digital Age we are in is changing how we live and work in profound ways. Connected computers are all around, generating and sharing data, often unseen. Intelligent digital systems are merging with physical objects, from driverless cars to "smart" homes. Our quality of life, health, and even physical safety are dependent on digital systems we might not even be aware of.</p>
+      <p>Whilst bringing immeasurable benefits to humanity, the accelerating proliferation of technology also brings increased risk. As the internet expands into all aspects of life, malicious actors taking advantage of the same innovations find greater opportunity to inflict harm.</p>
+      <p>Amongst many technical innovations of the Digital Age we will discuss in this programme, three in particular have a disproportionate impact on cyber security and are of the highest concern to today's business leaders:</p>
+      <ul>
+      <li>The internet of things (IoT)</li>
+      <li>Big data</li>
+      <li>Artificial intelligence</li>
+      </ul>
+      <h5>The Internet of Things</h5>
+      <p>The IoT is a broad collection of physical devices that are connected to the internet and exchange data with other devices. IoT devices can range from industrial controls to home kitchen gadgets, critical medical devices to thermostats, environmental monitoring sensors to clothing. </p>
+      <p>As noted above, there are now over 21 billion IoT devices, and the number is increasing dramatically each year. These devices provide a range of benefits, from increasing efficiency and reducing costs, to allowing greater mobility and communications, to providing business opportunities. </p>
+      <p>At the same time, the IoT presents new cyber challenges. Many IoT devices are not built with security or privacy in mind, and their rapid proliferation is increasing the attack surface that we need to defend. For example, the Infosecurity group reports that malicious actors can use internet-connected doorbells to covertly record audio and video indefinitely, invading the privacy of victims on their very own doorsteps (Coble, 2020). </p>
+      <p>In addition, existing risk assessment methodologies were established prior to development of the IoT and do not account for its complexity or pervasiveness (Nurse et al, 2017).</p>
+      <h5>Big Data</h5>
+      <p>Gil Press, a senior contributor at Forbes, estimated in January 2020 that 35 zettabytes (35 trillion gigabytes) of new data would be created by the end of the year. He posits that, driven by 5G networks, satellite internet, and AI, the growth rate of data generation will continue to accelerate.</p>
+      <p>The author makes six predictions about data in this decade:</p>
+      <ul>
+      <li>Faster networks will re-energise the "virtuous cycle of data".</li>
+      <li>There will be many new places for data to emerge and spread.</li>
+      <li>Synthetic data will add a new dimension to data growth.</li>
+      <li>The business of data will become a significant sector of the global economy.</li>
+      <li>The most successful and well-paying jobs will be data-related.</li>
+      <li>We will continue to trade our data privacy for convenience, entertainment, and feelings of connection.</li>
+      </ul>
+      <p>Often this data is being stored in huge data lakes with insufficient governance and security, creating risks and challenges for businesses around the globe.</p>
+      <h5>Cloud Computing</h5>
+      <p>The rise of cloud computing offers economic benefits, but those benefits come with heightened security and privacy risks, including loss of governance, isolation failure, malicious insiders, and more (Creese et al, 2011).</p>
+      <h5>Artificial Intelligence </h5>
+      <p>As artificial intelligence (AI) spreads into more parts of our lives, there is growing concern about how these technologies are affecting individuals and communities. AI presents issues of privacy, manipulation, transparency, and bias. (We will examine these issues more closely in Module 4.)  </p>
+      </div>
+      </div>

common/lib/xmodule/xmodule/templates/html/key_takeaways.yaml

@@ -0,0 +1,17 @@
+---
+metadata:
+    display_name: Key Takeaways
+data: |
+      <div class="div-keytakeaways">
+      <img class="icon-image" src="/static/highlights_takeaways.png" alt="">
+        <div>
+      <h4>Key Takeaways</h4>
+      <p>Let's review the key points of this section:</p>
+      <ol>
+        <li>[Enter key point 1]</li>
+      <li>[Enter key point 2]</li>
+      <li>[Enter key point 3]</li>
+      <li>[Enter key point 4]</li>
+      </ol>
+      </div>
+      </div>