diff --git a/common/lib/xmodule/xmodule/css/html/esme_custom.scss b/common/lib/xmodule/xmodule/css/html/esme_custom.scss
new file mode 100644
index 000000000000..b68c51eae15f
--- /dev/null
+++ b/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
diff --git a/common/lib/xmodule/xmodule/html_module.py b/common/lib/xmodule/xmodule/html_module.py
index 2169bca01c9a..80766fa8a10b 100644
--- a/common/lib/xmodule/xmodule/html_module.py
+++ b/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
diff --git a/common/lib/xmodule/xmodule/templates/html/additional_activities.yaml b/common/lib/xmodule/xmodule/templates/html/additional_activities.yaml
new file mode 100644
index 000000000000..8affc74e7540
--- /dev/null
+++ b/common/lib/xmodule/xmodule/templates/html/additional_activities.yaml
@@ -0,0 +1,14 @@
+---
+metadata:
+ display_name: Additional Activities
+data: |
+ 
+
+
Additional Activities
+
As in each module, we present additional content related to the core learning. This week, we:
+
+ - [Enter additional activity 1]
+ - [Enter additional activity 2]
+
+
+
To use this template, replace the example text with your own text.
- When you add the component, be sure to select Settings
- to specify a Display Name and other values that apply.
- Announcement Date
-
-
- Short note that introduces the topic
- Instructor's name
-
- Heading for announcement 1
- Announcement 1 text
- Heading for announcement 2
- Announcement 2 text
-
diff --git a/common/lib/xmodule/xmodule/templates/html/anon_user_id.yaml b/common/lib/xmodule/xmodule/templates/html/anon_user_id.yaml
deleted file mode 100644
index cfba26a6b4e4..000000000000
--- a/common/lib/xmodule/xmodule/templates/html/anon_user_id.yaml
+++ /dev/null
@@ -1,19 +0,0 @@
----
-metadata:
- display_name: Anonymous User ID
-data: |
- Your explanatory text here.
- YOUR_LINK_TEXT
-
-
diff --git a/common/lib/xmodule/xmodule/templates/html/case_analysis.yaml b/common/lib/xmodule/xmodule/templates/html/case_analysis.yaml
new file mode 100644
index 000000000000..0ec88b3a88e6
--- /dev/null
+++ b/common/lib/xmodule/xmodule/templates/html/case_analysis.yaml
@@ -0,0 +1,14 @@
+---
+metadata:
+ display_name: Case Analysis
+data: |
+ 
+
+
Case Analysis
+
Having read this case, consider the following questions:
+
+ - [Enter question 1]
+ - [Enter question 2]
+
+
+
Case InformationCase Information
+
[Enter text here]
+
+
+
+
Quick Facts
+
[Enter text here]
+
+
+
+
+
Current Event
+
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.
+
+
+
+
Video: Module [X] Overview Video
+
In the following video...
+
+
+
+
Graded Assignments
+
We will also complete individual and group assignments, which count towards your completion of the programme. This week, we:
+
+ - [Assignment 1]
+ - [Assignment 2]
+
+
You must submit all graded assignments in Module 1 by [Enter Date], 23:59 UTC. (Try the Time Zone Converter to get your local time.)
+
+
+
+
+
Guest Video: [Enter Video Title Here]
+
In the following video...
+
+
IFrame Tool
- Use the IFrame tool to embed an exercise or tool from any web site into your course content. For example, the tool below allows learners to experiment with how the shape of a triangle affects a line that is derived from the triangle.
- Exercises in an IFrame are not graded. To embed graded exercises, use a Custom JavaScript Problem.
- The following code is the HTML format required to use the IFrame tool. For the IFrame in this template, you must replace the values in italics.
-
- <iframe title="The required title of the tool"
- src="The URL of the tool, starting with https://">
- Message displayed when the browser does not support IFrames.
- </iframe>
-
- The Iframe below includes the width, height, marginwidth, marginheight, frameborder, and scrolling attributes. These attributes are optional. You can remove these attributes or replace their values.
- Modify this template as needed.
- To modify the IFrame, you must edit the HTML source code. When editing this template, click HTML in the toolbar.
- Then modify the example below for your own use.
-
- - Replace the value of the src attribute of the IFrame with the URL of the tool that you want in your course.
-
Note: The URL must start with https instead of http, to ensure that the tool appears in all browsers that support IFrames.
- - Replace the value of the title attribute with the title of the tool. You must include the title to provide an accessible label.
- - Replace other IFrame attributes as needed. See the IFrame specification for more information.
- - Optionally, replace the text between the opening and closing iframe tags.
-
Your browser does not support IFrames.
- A learner sees this text if the browser does not support IFrames.
-
-
- The sample IFrame follows. Modify its attributes as described above.
-
diff --git a/common/lib/xmodule/xmodule/templates/html/individual_exercise.yaml b/common/lib/xmodule/xmodule/templates/html/individual_exercise.yaml
new file mode 100644
index 000000000000..e52740fb913c
--- /dev/null
+++ b/common/lib/xmodule/xmodule/templates/html/individual_exercise.yaml
@@ -0,0 +1,11 @@
+---
+metadata:
+ display_name: Individual Exercise
+data: |
+
+
+
+
Individual Exercise
+
[Enter the description and instructions for the exercise. You will add the exercise as it's own component.]
+
+
+
+
+
[H4 Title Goes Here]
+
[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.
+
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.
+
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:
+
+ - The internet of things (IoT)
+ - Big data
+ - Artificial intelligence
+
+
The Internet of Things
+
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.
+
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.
+
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).
+
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).
+
Big Data
+
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.
+
The author makes six predictions about data in this decade:
+
+ - Faster networks will re-energise the "virtuous cycle of data".
+ - There will be many new places for data to emerge and spread.
+ - Synthetic data will add a new dimension to data growth.
+ - The business of data will become a significant sector of the global economy.
+ - The most successful and well-paying jobs will be data-related.
+ - We will continue to trade our data privacy for convenience, entertainment, and feelings of connection.
+
+
Often this data is being stored in huge data lakes with insufficient governance and security, creating risks and challenges for businesses around the globe.
+
Cloud Computing
+
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).
+
Artificial Intelligence
+
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.)
+
+
+
+
+
Key Takeaways
+
Let's review the key points of this section:
+
+ - [Enter key point 1]
+ - [Enter key point 2]
+ - [Enter key point 3]
+ - [Enter key point 4]
+
+
+
Example: E-text page
- You can write complex equations in LaTeX.
- When you add the component, be sure to select Settings
- to specify a Display Name and other values that apply.
- When editing this component, select Launch Latex Source Compiler to edit equations.
- Then, in the equation editor, select Save and Compile to edX XML to see the equation in the component.
-
diff --git a/common/lib/xmodule/xmodule/templates/html/objectives.yaml b/common/lib/xmodule/xmodule/templates/html/objectives.yaml
new file mode 100644
index 000000000000..87edede4f466
--- /dev/null
+++ b/common/lib/xmodule/xmodule/templates/html/objectives.yaml
@@ -0,0 +1,19 @@
+---
+metadata:
+ display_name: Objectives
+data: |
+ 
+
+
Objectives
+
Our goals for this module are to:
+
+ - [Enter Goal 1]
+ - [Enter Goal 2]
+
+
At the end of this module, you will be able to:
+
+ - [Enter Learning Objective 1]
+ - [Enter Learnign Objective 2]
+
+
+
+
+
+
Optional Reading
+
Add text and links to your optional readings here.
+
+
+
+
+
Overview
+
Module Time: 7-10 hours | Download Module Materials (PDF)
+
Welcome to the [X] module of the [Enter Programme Name Here]!
+
This week we will learn about [Enter text here]
+
+
+
+
+
Quick Fact
+
[Delete existing text and enter your own in this section] Eric Knorr (2020) of Network World reports that with over 21 billion devices now running, and accelerating growth, the internet of things (IoT) is rapidly becoming an essential part of life. The benefits are huge: for example, internet-connected thermometers are collecting data to make early predictions on Covid-19 outbreaks. However, he continues, while these devices dramatically expand networks, they also expand the attack surface, and thus increase vulnerability.
+
+
+
+
Quiz: [Enter Quiz Name]
+
Complete the quiz below by [Enter Date]. Quiz scores contribute to your grade in the course.
+
Each of the following questions allow one or two attempts; note the number of attempts before answering. If you are unsure of an answer, we recommend that you review this module's content before you submit an answer.
+
Select the answer(s) to the question, then click Submit. The submission counts as one attempt. If your answer is incorrect and you are allowed another attempt, change your answer and click Submit again.
+
Note: You can select Save to save your current response without submitting it for a grade. This enables you to stop working on a problem and come back to it later. Saving your response does not count as an attempt. You do not need to select Save after you submit an answer; when you select Submit, your attempt is completed.
+
+
This template is similar to the Text template. The only difference is
- that this template opens in the Raw HTML editor rather than in the Visual
- editor.
-
- The Raw HTML editor saves your HTML exactly as you enter it.
- You can switch to the Visual editor by clicking the Settings tab and
- changing the Editor setting to Visual. Note, however, that some of your
- HTML may be modified when you save the component if you switch to the
- Visual editor.
diff --git a/common/lib/xmodule/xmodule/templates/html/references.yaml b/common/lib/xmodule/xmodule/templates/html/references.yaml
new file mode 100644
index 000000000000..326221b04c40
--- /dev/null
+++ b/common/lib/xmodule/xmodule/templates/html/references.yaml
@@ -0,0 +1,14 @@
+---
+metadata:
+ display_name: References
+data: |
+
+
+
+
References
+
[Enter Module Reference e.g. 1.2.1]
+
[Example] Coble, Sarah. "Florida Student Discovers Flaws in Leading Doorbell Security Cameras." Infosecurity, 05 June 2020, https://www.infosecurity-magazine.com/news/flaws-in-leading-doorbell-security. Accessed 7 June 2021.
+
[Enter Module Reference e.g. 1.2.2]
+
[Example] Hardjono, Thomas, David Shrier, and Alex Pentland, editors. Trusted Data: A New Framework for Identity and Data Sharing. MIT Press, 2019.
+
+
+
+
+
Section Objectives
+
+ - Enter Learning Objective 1
+ - Enter Learning Objective 2
+ - Enter Learning Objective 3
+ - Enter Learning Objective 4
+
+
+
+
+
+
Team Exercise: [Enter Exercise Name]
+
[Frame the exercise here]
+
Instructions
+
[Provide step by step instructions for learners here.]
+
+
+
+
Time Commitment
+
Plan to spend seven to ten hours on Module [X] this week. As there is much reading material, and many videos, you might want to divide your work into several sessions. The module is broken up into sections by theme, giving you potential break points.
+
Make sure you plan time to meet with your team, and to complete the assignments.
+
+
+
+
Vocabulary Check
+
The terms below are industry specific terms that appear in this module. Before beginning the module, check your knowledge of these words, and, if you need to, review the definitions in the programme glossary.
+
[Enter term 1]
+
[Enter term 2]
+
+
Zooming Image Tool
- Use the Zooming Image Tool to enable learners to see details of large, complex images.
- With the Zooming Image Tool, the learner can move the mouse pointer over a part of the image to enlarge it and see more detail.
- To use the Zooming Image Tool, you must first add the jquery.loupeAndLightbox.js JavaScript file to your course.
- You must also add both the regular and magnified image files to your course.
- The following HTML code shows the format required to use the Zooming Image tool. For the example in this template, you must replace the values in italics.
-
- <div class="zooming-image-place" style="position: relative;">
- <a class="loupe" href="path to the magnified version of the image">
- <img alt="Text for screen readers"
- src="path to the image you want to display in the unit" />
- </a>
- <div class="script_placeholder"
- data-src="path to the jquery.loupeAndLightbox.js JavaScript file in your course"/>
- </div>
- <script type="text/javascript">// >![CDATA[
- JavascriptLoader.executeModuleScripts($('.zooming-image-place').eq(0), function() {
- $('.loupe').loupeAndLightbox({
- width: 350,
- height: 350,
- lightbox: false
- });
- });
- // ]]></script>
- <div id="ap_listener_added"></div>
-
-
- You can modify the example below for your own use.
-
- - Replace the value of the link's href attribute with the path to the magnified image. Do not change the value of the class attribute.
- - Replace the value of the image's src attribute with the path to the image that will appear in the unit.
- - Replace the value of the image's alt attribute with text that both describes the image and the action or destination of clicking on the image. You must include alt text to provide an accessible label.
- - Replace the value of the div element's data-src attribute with the path to the jquery.loupeAndLightbox.js JavaScript file in your course.
-
- The example below shows a subset of the biochemical reactions that cells carry out.
- You can view the chemical structures of the molecules by clicking on them. The magnified view also lists the enzymes involved in each step.
- Press spacebar to open the magnifier.
-
-
-
-
-
-