How-tos & Tutorials
How to build LMS content creation experiences to rival Canvas and Google Classroom: a tutorial
Published March 28th, 2023
25 min read
Remote learning accelerated at an alarming pace, over the past few years. The shuttering of schools during the global novel coronavirus was an instigator of technology growth, impacting classrooms, workplaces, and other institutions that offer certifications and courses. And it wasn’t just middle schools in North America. It was a trend seen from kindergarten classes all the way up to postgraduate university classes across the world.
To put this growth figure into sharper focus, the Learning Management System (LMS) software industry was valued at USD 16.19 Billion (B) in 2022. It’s expected to grow to USD 40.95 B by 2029, with a compound annual growth rate (CAGR) of 14.2% forecasted.
John Rau
Marketing Manager at Tiny
Joe Robinson
Dev Advocate | Tech Writer at Tiny
Di Mace
Communications Manager at Tiny
As an example, Blackboard (a prominent LMS used throughout the US education industry) recorded a record breaking spike in the number of digital learning interactions on its service, from August 1 through to September 20, 2020. Considering that in North America, (in-person) college enrolment has steadily declined over the past five years, and young learners are increasingly finding value in more focused, micro-courses delivered through an LMS experience, the industry is surely set to see further strong growth in market size.
This means there’s plenty of room for your app to join the LMS space, and deliver a learning experience that helps teachers, and provides the knowledge and skills students need to grow.
A fulfilling and effective learning experience resides at the heart of all great LMS software.
An essential part of the writing and communication back and forth between students and teachers, is a powerful WYSIWYG editor with excellent features. By integrating a state-of-the-art LMS rich text editor, you’re helping the subject matter experts to create engaging and useful content for their students, as well as being able to tailor it to different engagement and knowledge levels.
Your WYSIWYG editor needs to enable learners to complete their assigned work to specific, rigorous standards.
To build an exceptional LMS experience, the following sections show you how to configure TinyMCE to provide an LMS rich text editor that delivers content that empowers students, teachers, and even enhances the credibility of the school that uses your LMS.
What you’re building in this LMS rich text editor tutorial
The end result of this tutorial is an LMS rich text editor that helps course content creators design their courses, and students to complete their coursework.
What’s not in scope: There are functions not included in this tutorial – the LMS application that saves and delivers the course content to students. This tutorial also does not include configuring a database, adding a login screen, or credential management.
The following demo shows the final, LMS rich text editor component:
Why bother building your own LMS rich text editor?
Let’s tackle the two questions most frequently asked by developers and product managers alike, in the context of building their own vs buying components and assembling a state-of-the-art rich text editor within a learning management system.
1. Why not build from scratch?
You can build your own specific rich text editor (RTE) from scratch and there are numerous resources available to aid that process. However, rich text editors are exceptionally complex. A development team that’s inexperienced in developing RTEs, generally underestimates the myriad of edge cases across both browsers and functionality. Even things that are perceived to be basic, are hard. And costs blow out.
Our latest calculations* estimate the cost of building just the basic open source components of three leading rich text editors (excluding advanced features and plugins) varies between US$15M and US$28M. While the time taken ranges from 115 to 220 person-years for a single developer. There must be a better way.
(*as at July 2022)
2. Why build at all? Can’t you buy what you need?
You can, which is why TinyMCE has been engineered so that it’s adaptable to you and your needs. Everything you need is provided out-of-the-box: you pick the features you want from the plugin list, and add them to the core editor. All you do is assemble the components (either through APis or coding), customize parts (if you desire) and draw on the decades-long experience of its builders in rich text editing.
There's even use case specific starter configs and demos, to make it easier for you to get started, along with detailed documentation and support.
Deciding to upgrade vs assembling-and-building
If you already have an app or website, there’s no need to start from scratch. TinyMCE is a flexible WYSIWYG that's easy to integrate. Regardless of your use-case, TinyMCE can easily replace whatever rich text editor you’re currently using, or take the place of a textarea, textbox, or other planned text entry component on a page.
There are pluses and minuses to taking an assemble and upgrade approach, but it can have a very positive effect on your speed-to-market.
Ideally, an upgrade to your current platform shouldn’t present long term difficulties or issues with ongoing maintenance problems. That’s the last thing your team needs: another dependency to maintain. When using TinyMCE through the cloud, Tiny Cloud automatically updates to the latest functionality when new versions are released. (It’s one of the methods we use to reduce development pressure.)
If you’re aiming to upgrade your software, the starter config code is available throughout the tutorial, to use (or just review) as you need. Or, if you’re using a particular framework, TinyMCE is designed to integrate into a variety of frameworks and use cases.
Background/Part 1
The foundation of the LMS rich text editor
The LMS foundation instructions provided in Part 1 is what gets the LMS rich text editor started. Additional configuration is then added on top of the foundation to create the full LMS rich text editor. These additional features introduce essential aspects of an LMS rich text editing experience. They’re important for getting started, and for understanding what’s coming up next.
Remember that the LMS rich text editor is not a complete app from end-to-end. It does not include processing complete course content, setting up the database to hold the content, or securing the content with credentials.
Background/Part 2
Formatting, productivity, and compliance
After making the modifications in Part 2, your LMS expands to provide more than just a text editor. It can grow to provide a comprehensive learning experience. Read through Part 2 to see exactly what changes to make for this vital LMS expansion.
Part 1 Build
How to build the LMS rich text editor
TL;DR
Part 1 of this tutorial lays out the HTML of your LMS. It shows you how to build the foundation: that is the TinyMCE init script. Configuring this script sets up the WYSIWYG editor inside the LMS.
The second largest barrier to a learning experience online is a poor user experience. The basic TinyMCE UI configuration is designed to ensure adoption and engagement for students, and minimize non-completion.
To get started building the LMS rich text editor, begin by creating the HTML and CSS that forms the foundation.
Step 1
Building the foundation
Create an index.html file in your developer environment containing the following HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TinyMCE LMS</title>
</head>
<body>
</body>
</html>
Include the TinyMCE CDN link in a pair of script tags. Replace the “no-api-key” string with your TinyMCE API key – if you don’t have an API key, you can sign up for one using GitHub or Google account details. The API key gives you 14 days FREE access to TinyMCE Premium plugins, skins, and icons. Using your API key also prevents any API or domain name errors turning up in the text area:
<script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script><script>
Now insert some sample HTML content into the editor, which will help demonstrate the full capability of the LMS editor. Start with a container div tag, and a textarea tag, and the following example of a lesson:
<div class="editor-wrap">
<textarea id="editor">
<p>Hello {{Student.Name}},</p>
<p>For this week's assignment, you will learn the basics of color theory.</p>
<p>Select one of the following topics, and write a research essay. Ensure you answer the questions in full, and provide references for any primary or secondary sources<sup id="footnote_83179098411662742784603" class="mce-footnote"><a href="#footnotes_entry_83179098411662742784603">1</a></sup> consulted. Contact {{Course.Teacher.Name}} or {{Course.Department.Head}} if you have any questions about the assignment.</p>
<div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.25%; max-width: 800px;" data-ephox-embed-iri="https://www.youtube.com/watch?v=Qj1FK8n7WgY"><iframe style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" src="https://www.youtube.com/embed/Qj1FK8n7WgY?rel=0" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div>
<h2>This week's tasks</h2>
<p>Begin by watching the video above then proceed to the assignment questionnaire by pressing continue below.</p>
<h3>Topic List</h3>
<ul>
<li>The origin of Color theory and its effect on emotion and mood is contentious.<sup id="footnote_98446634721662742994322" class="mce-footnote"><a href="#footnotes_entry_98446634721662742994322">2</a></sup> Identify your understanding of the originators of Color theory. Argue for the effectiveness of certain color palettes over others to create different moods.</li>
<li>While some experts argue there are no new color palettes, others argue innovation is a constant process. Choose one side, and build an argument: There are no new color palette innovations. New color palette innovations are happening all the time.</li>
<li>Select three examples of color theory in practice that are all part of one medium (e.g. film, magazine, television). Explain why these three examples are effective. Contrast and argue why one of these examples is more effective in its use of color theory concepts compared to the others.</li>
<li>Wassily Kandinsky states “Color is a power which directly influences the soul.”<sup id="footnote_34341905131662743043554" class="mce-footnote"><a href="#footnotes_entry_34341905131662743043554">3</a></sup> Explain what Kandinsky meant, and provide an argument explaining what Kandinsky means using color theory principles.</li>
</ul>
<h3>Also...</h3>
<ul>
<li>Think about the difference between mixing colors using colored lights vs using paint.</li>
<li>Pay extra attention to the different complementary color models.</li>
</ul>
<blockquote>
<p>“Color is a power which directly influences the soul.”<br><span style="color: #95a5a6;"><em>– Wassily Kandinsky </em></span></p>
</blockquote>
<h2>Deadlines</h2>
<p>Please submit your tasks before {{Assignment.DueDate}}</p>
</textarea>
</div>
Add the following table, which demonstrates TinyMCE’s powerful table functionality:
<h2>Grading Criteria</h2>
<table style="border-collapse: collapse; width: 99.8698%; height: 157px;" border="1">
<thead>
<tr>
<th style="width: 18.0915%;" scope="col"> </th>
<td style="width: 18.0915%;" scope="col">High Achievement</td>
<td style="width: 18.2224%;" scope="col">Good Achievement</td>
<td style="width: 18.2224%;" scope="col">Pass</td>
<td style="width: 18.2224%;" scope="col">Fail</td>
</tr>
</thead>
<tbody>
<tr>
<th style="width: 18.0915%;" scope="col">Demonstrated knowledge of color theory</th>
<td style="width: 18.0915%;">The student shows an outstanding knowledge and command of color theory concepts</td>
<td style="width: 18.2224%;">The student shows good knowledge and understanding of color theory concepts</td>
<td style="width: 18.2224%;">The student shows some knowledge of color theory and a basic understanding of color theory concepts</td>
<td style="width: 18.2224%;">The student has not demonstrated knowledge of color theory, or the concepts of color theory.</td>
</tr>
<tr>
<th style="width: 18.0915%;" scope="col">Argument composition skills</th>
<td style="width: 18.0915%;">The student shows an outstanding argument composition skills</td>
<td style="width: 18.2224%;">The student shows good argument composition skills</td>
<td style="width: 18.2224%;">The student shows some argument composition skills.</td>
<td style="width: 18.2224%;">The student does not show clear argument composition skills</td>
</tr>
<tr>
<th style="width: 18.0915%;" scope="col">Consulted resources</th>
<td style="width: 18.0915%;">The student shows they have consulted excellent resources</td>
<td style="width: 18.2224%;">The student has consulted good resources</td>
<td style="width: 18.2224%;">The student has consulted some resources required for the assignment</td>
<td style="width: 18.2224%;">The student has not consulted adequate resources</td>
</tr>
<tr>
<th style="width: 18.0915%;" scope="col">Writing, Grammar, and Clarity</th>
<td style="width: 18.0915%;">The student shows a command of the language in their work</td>
<td style="width: 18.2224%;">The student shows effective writing skills</td>
<td style="width: 18.2224%;">The student shows clear writing skills</td>
<td style="width: 18.2224%;">The student shows unclear writing skills</td>
</tr>
</tbody>
</table>
Finally, add the footnotes content to the demo, as well as a data string that contains the comments used by the Comments plugin:
<p> </p>
<div class="mce-footnotes">
<hr>
<ol>
<li id="footnotes_entry_83179098411662742784603"><a class="mce-footnotes-backlink" href="#footnote_83179098411662742784603">^ </a><span class="mce-footnotes-note">AMA Style Guide. <a href="https://owl.purdue.edu/owl/research_and_citation/ama_style/index.html">https://owl.purdue.edu/owl/research_and_citation/ama_style/index.html</a>. Accessed September 9, 2022. </span></li>
<li id="footnotes_entry_98446634721662742994322"><a class="mce-footnotes-backlink" href="#footnote_98446634721662742994322">^ </a><span class="mce-footnotes-note">Color theory. Wikipedia. <a href="https://en.wikipedia.org/wiki/Color_theory">https://en.wikipedia.org/wiki/Color_theory</a>. Published September 3, 2022. Accessed September 24, 2022. </span></li>
<li id="footnotes_entry_34341905131662743043554"><a class="mce-footnotes-backlink" href="#footnote_34341905131662743043554">^ </a><span class="mce-footnotes-note">Kandinsky W. A quote from concerning the spiritual in art. Goodreads. <a href="https://www.goodreads.com/quotes/90420-colour-is-a-power-which-directly-influences-the-soul">https://www.goodreads.com/quotes/90420-colour-is-a-power-which-directly-influences-the-soul</a>. Accessed September 14, 2022. </span></li>
</ol> </div><!--tinycomments|2.1|data:application/json;base64,eyJtY2UtY29udmVyc2F0aW9uXzM5MTI0NTM5MzMxNjYyNzQxNDczMzk3Ijp7InVpZCI6Im1jZS1jb252ZXJzYXRpb25fMzkxMjQ1MzkzMzE2NjI3NDE0NzMzOTciLCJjb21tZW50cyI6W3sidWlkIjoibWNlLWNvbnZlcnNhdGlvbl8zOTEyNDUzOTMzMTY2Mjc0MTQ3MzM5NyIsImF1dGhvciI6ImF2aXNtYXJhIiwiYXV0aG9yTmFtZSI6IkFuZ2VsIFZpc21hcmEgKFN0dWRlbnQpIiwiYXV0aG9yQXZhdGFyIjoiaHR0cHM6Ly93d3cudGlueS5jbG91ZC9pbWFnZXMvYXZhdGFycy9hdmF0YXItQW5nZWxWaXNtYXJhLmpwZyIsImNvbnRlbnQiOiJIb3cgd291bGQgeW91IGxpa2UgdXMgdG8gY2l0ZSBvdXIgcmVmZXJlbmNlcz8iLCJjcmVhdGVkQXQiOiIyMDIyLTA5LTA5VDE2OjM3OjUzLjM5N1oiLCJtb2RpZmllZEF0IjoiMjAyMi0wOS0wOVQxNjozNzo1My4zOTdaIn0seyJ1aWQiOiJtY2UtcmVwbHlfNzYwNTE3MDY2MjE2NjI3NDE1Njg0NzEiLCJhdXRob3IiOiJybWFydGVsIiwiYXV0aG9yTmFtZSI6IlJvc2FsaW5hIE1hcnRlbCAoSW5zdHJ1Y3RvcikiLCJhdXRob3JBdmF0YXIiOiJodHRwczovL3d3dy50aW55LmNsb3VkL2ltYWdlcy9hdmF0YXJzL2F2YXRhci1Sb3NhbGluYU1hcnRlbC5qcGciLCJjb250ZW50IjoiUGxlYXNlIHVzZSB0aGUgYnVpbHQtaW4gZm9vdG5vdGVzIGZ1bmN0aW9uYWxpdHkgYW5kIGZvbGxvdyBBTUEgc3R5bGUuIiwiY3JlYXRlZEF0IjoiMjAyMi0wOS0wOVQxNjozOToyOC40NzFaIiwibW9kaWZpZWRBdCI6IjIwMjItMDktMDlUMTY6Mzk6MjguNDcxWiJ9XX19-->
Note: The larger data string referring to “tinycomments” at the end of the demo content loads a demo conversation used by the TinyMCE Comments plugin, which is configured in later sections of this tutorial.
Create a pair of style tags in the head of your HTML file:
<style>
</style>
Include the following CSS content to style the demo LMS rich text editor interface:
<style>
body {
margin: 60px 16px;
background-color: #fafafc;
color: #222f3e;
}
.editor-wrap {
max-width: 1200px;
margin: auto;
}
</style>
Add TinyMCE to the demo by creating a script tag in the html head content, and including the following init script:
tinymce.init({
selector: "#editor",
plugins: "a11ychecker advcode autocorrect autolink autoresize autosave charmap checklist code emoticons footnotes fullscreen image link linkchecker lists media mediaembed mergetags powerpaste preview table tableofcontents tinycomments tinymcespellchecker typography wordcount",
toolbar: "undo redo | blocks | bold italic underline strikethrough forecolor backcolor | align checklist bullist numlist | link image media footnotes mergetags table | subscript superscript charmap blockquote | tokens | spellchecker typography a11ycheck wordcount | addcomment showcomments | fullscreen preview",
toolbar_sticky: true,
statusbar: false,
});
Save the changes, and test out the LMS rich text editor by opening the file in your browser, or running the index.html file through your localhost with PHP or the python server command.
There are some specific choices made to shape the foundations of a LMS experience for students and teachers:
The toolbar and statusbar
- Setting “toolbar_sticky” keeps the toolbar controls available and visible while students and teachers scroll down through the LMS content. Because lessons and criteria tables can be lengthy in scale, keeping the toolbar visible helps improve the User Interface (UI).
- Disabling the status bar helps eliminate a distraction. Setting this to “false” hides the TinyMCE status bar.
The following demo shows the LMS foundation running:
Note: There is a warning note in the textarea concerning TinyMCE Comments. This appears because in this first iteration of the LMS rich text editor, the plugin configuration is not finished. Steps later in this tutorial explain how to configure the Comments plugin.
The following plugins are also included, but have not yet been configured:
- Autoresize – The editor expands and contracts depending on the editing content.
- Autosave – Provides a warning if students are closing the window without saving.
- Fullscreen – Creates an immersive editing experience.
- Preview – So teachers can preview content before publishing it, and students can check their work before submitting.
And the following is the complete code for Step 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
// Select the element(s) to add TinyMCE to using any valid CSS selector
selector: "#editor",
// Tip - To make TinyMCE leaner, only include the plugins you need
plugins: "a11ychecker advcode autocorrect autolink autoresize autosave charmap checklist code emoticons footnotes fullscreen image link linkchecker lists media mediaembed mergetags powerpaste preview table tableofcontents tinycomments tinymcespellchecker typography wordcount",
// Specify the toolbar buttons
// We have put our custom insert token button last
// https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/
toolbar: "undo redo | blocks | bold italic underline strikethrough forecolor backcolor | align checklist bullist numlist | link image media footnotes mergetags table | subscript superscript charmap blockquote | tokens | spellchecker typography a11ycheck wordcount | addcomment showcomments | fullscreen preview",
// Enable sticky toolbar
// https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#toolbar_sticky
toolbar_sticky: true,
// Disable the status bar
// https://www.tiny.cloud/docs/tinymce/6/statusbar-configuration-options/#statusbar
statusbar: false
});
</script>
<style>
body {
margin: 60px 16px;
background-color: #fafafc;
color: #222f3e;
}
.editor-wrap {
max-width: 1200px;
margin: auto;
}
</style>
</head>
<body>
<div class="editor-wrap">
<textarea id="editor">
<h1>
<span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_39124539331662741473397" data-mce-annotation="tinycomments">Assignment</span>
#3: Color Theory</h1>
<p>Hello {{Student.Name}},</p>
<p>For this week's assignment, you will learn the basics of color theory.</p>
<p>Select one of the following topics, and write a research essay. Ensure you answer the questions in full, and provide references for any primary or secondary sources<sup id="footnote_83179098411662742784603" class="mce-footnote">
<a href="#footnotes_entry_83179098411662742784603">1</a>
</sup>
consulted. Contact
{{Course.Teacher.Name}}
or
{{Course.Department.Head}}
if you have any questions about the assignment.</p>
<div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.25%; max-width: 800px;" data-ephox-embed-iri="https://www.youtube.com/watch?v=Qj1FK8n7WgY">
<iframe style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" src="https://www.youtube.com/embed/Qj1FK8n7WgY?rel=0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
</div>
<h2>This week's tasks</h2>
<p>Begin by watching the video above then proceed to the assignment questionnaire by pressing continue below.</p>
<h3>Topic List</h3>
<ul>
<li>The origin of Color theory and its effect on emotion and mood is contentious.<sup id="footnote_98446634721662742994322" class="mce-footnote">
<a href="#footnotes_entry_98446634721662742994322">2</a>
</sup>
Identify your understanding of the originators of Color theory. Argue for the effectiveness of certain color palettes over others to create different moods.</li>
<li>While some experts argue there are no new color palettes, others argue innovation is a constant process. Choose one side, and build an argument: There are no new color palette innovations. New color palette innovations are happening all the time.</li>
<li>Select three examples of color theory in practice that are all part of one medium (e.g. film, magazine, television). Explain why these three examples are effective. Contrast and argue why one of these examples is more effective in its use of color theory concepts compared to the others.</li>
<li>Wassily Kandinsky states “Color is a power which directly influences the soul.”<sup id="footnote_34341905131662743043554" class="mce-footnote">
<a href="#footnotes_entry_34341905131662743043554">3</a>
</sup>
Explain what Kandinsky meant, and provide an argument explaining what Kandinsky means using color theory principles.</li>
</ul>
<h3>Also...</h3>
<ul>
<li>Think about the difference between mixing colors using colored lights vs using paint.</li>
<li>Pay extra attention to the different complementary color models.</li>
</ul>
<blockquote>
<p>“Color is a power which directly influences the soul.”<br><span style="color: #95a5a6;">
<em>– Wassily Kandinsky </em>
</span>
</p>
</blockquote>
<h2>Deadlines</h2>
<p>Please submit your tasks before
{{Assignment.DueDate}}</p>
<h2>Grading Criteria</h2>
<table style="border-collapse: collapse; width: 99.8698%; height: 157px;" border="1">
<thead>
<tr>
<th style="width: 18.0915%;" scope="col"> </th>
<td style="width: 18.0915%;" scope="col">High Achievement</td>
<td style="width: 18.2224%;" scope="col">Good Achievement</td>
<td style="width: 18.2224%;" scope="col">Pass</td>
<td style="width: 18.2224%;" scope="col">Fail</td>
</tr>
</thead>
<tbody>
<tr>
<th style="width: 18.0915%;" scope="col">Demonstrated knowledge of color theory</th>
<td style="width: 18.0915%;">The student shows an outstanding knowledge and command of color theory concepts</td>
<td style="width: 18.2224%;">The student shows good knowledge and understanding of color theory concepts</td>
<td style="width: 18.2224%;">The student shows some knowledge of color theory and a basic understanding of color theory concepts</td>
<td style="width: 18.2224%;">The student has not demonstrated knowledge of color theory, or the concepts of color theory.</td>
</tr>
<tr>
<th style="width: 18.0915%;" scope="col">Argument composition skills</th>
<td style="width: 18.0915%;">The student shows an outstanding argument composition skills</td>
<td style="width: 18.2224%;">The student shows good argument composition skills</td>
<td style="width: 18.2224%;">The student shows some argument composition skills.</td>
<td style="width: 18.2224%;">The student does not show clear argument composition skills</td>
</tr>
<tr>
<th style="width: 18.0915%;" scope="col">Consulted resources</th>
<td style="width: 18.0915%;">The student shows they have consulted excellent resources</td>
<td style="width: 18.2224%;">The student has consulted good resources</td>
<td style="width: 18.2224%;">The student has consulted some resources required for the assignment</td>
<td style="width: 18.2224%;">The student has not consulted adequate resources</td>
</tr>
<tr>
<th style="width: 18.0915%;" scope="col">Writing, Grammar, and Clarity</th>
<td style="width: 18.0915%;">The student shows a command of the language in their work</td>
<td style="width: 18.2224%;">The student shows effective writing skills</td>
<td style="width: 18.2224%;">The student shows clear writing skills</td>
<td style="width: 18.2224%;">The student shows unclear writing skills</td>
</tr>
</tbody>
</table>
<p> </p>
<div class="mce-footnotes">
<hr>
<ol>
<li id="footnotes_entry_83179098411662742784603">
<a class="mce-footnotes-backlink" href="#footnote_83179098411662742784603">^ </a>
<span class="mce-footnotes-note">AMA Style Guide. <a href="https://owl.purdue.edu/owl/research_and_citation/ama_style/index.html">https://owl.purdue.edu/owl/research_and_citation/ama_style/index.html</a>. Accessed September 9, 2022. </span>
</li>
<li id="footnotes_entry_98446634721662742994322">
<a class="mce-footnotes-backlink" href="#footnote_98446634721662742994322">^ </a>
<span class="mce-footnotes-note">Color theory. Wikipedia.
<a href="https://en.wikipedia.org/wiki/Color_theory">https://en.wikipedia.org/wiki/Color_theory</a>. Published September 3, 2022. Accessed September 24, 2022. </span>
</li>
<li id="footnotes_entry_34341905131662743043554">
<a class="mce-footnotes-backlink" href="#footnote_34341905131662743043554">^ </a>
<span class="mce-footnotes-note">Kandinsky W. A quote from concerning the spiritual in art. Goodreads.
<a href="https://www.goodreads.com/quotes/90420-colour-is-a-power-which-directly-influences-the-soul">https://www.goodreads.com/quotes/90420-colour-is-a-power-which-directly-influences-the-soul</a>. Accessed September 14, 2022. </span>
</li>
</ol>
</div>
<!--tinycomments|2.1|data:application/json;base64,eyJtY2UtY29udmVyc2F0aW9uXzM5MTI0NTM5MzMxNjYyNzQxNDczMzk3Ijp7InVpZCI6Im1jZS1jb252ZXJzYXRpb25fMzkxMjQ1MzkzMzE2NjI3NDE0NzMzOTciLCJjb21tZW50cyI6W3sidWlkIjoibWNlLWNvbnZlcnNhdGlvbl8zOTEyNDUzOTMzMTY2Mjc0MTQ3MzM5NyIsImF1dGhvciI6ImF2aXNtYXJhIiwiYXV0aG9yTmFtZSI6IkFuZ2VsIFZpc21hcmEgKFN0dWRlbnQpIiwiYXV0aG9yQXZhdGFyIjoiaHR0cHM6Ly93d3cudGlueS5jbG91ZC9pbWFnZXMvYXZhdGFycy9hdmF0YXItQW5nZWxWaXNtYXJhLmpwZyIsImNvbnRlbnQiOiJIb3cgd291bGQgeW91IGxpa2UgdXMgdG8gY2l0ZSBvdXIgcmVmZXJlbmNlcz8iLCJjcmVhdGVkQXQiOiIyMDIyLTA5LTA5VDE2OjM3OjUzLjM5N1oiLCJtb2RpZmllZEF0IjoiMjAyMi0wOS0wOVQxNjozNzo1My4zOTdaIn0seyJ1aWQiOiJtY2UtcmVwbHlfNzYwNTE3MDY2MjE2NjI3NDE1Njg0NzEiLCJhdXRob3IiOiJybWFydGVsIiwiYXV0aG9yTmFtZSI6IlJvc2FsaW5hIE1hcnRlbCAoSW5zdHJ1Y3RvcikiLCJhdXRob3JBdmF0YXIiOiJodHRwczovL3d3dy50aW55LmNsb3VkL2ltYWdlcy9hdmF0YXJzL2F2YXRhci1Sb3NhbGluYU1hcnRlbC5qcGciLCJjb250ZW50IjoiUGxlYXNlIHVzZSB0aGUgYnVpbHQtaW4gZm9vdG5vdGVzIGZ1bmN0aW9uYWxpdHkgYW5kIGZvbGxvdyBBTUEgc3R5bGUuIiwiY3JlYXRlZEF0IjoiMjAyMi0wOS0wOVQxNjozOToyOC40NzFaIiwibW9kaWZpZWRBdCI6IjIwMjItMDktMDlUMTY6Mzk6MjguNDcxWiJ9XX19-->
</textarea>
</div>
</body>
</html>
What you have built is the LMS layout. It’s part of an essential learning experience for students and learning, using a table to show the criteria and expected learning outcomes.
Part 2 Build
Construct your LMS rich text editor
Step 1
Setting up content and formatting styles
TL;DR
The second part of this tutorial expands on Part 1 by constructing a thorough LMS experience. It introduces the next steps to construct a stronger user experience (UX).
It then walks you through content formatting and style, which are both vital for an LMS.
A strong UX in your LMS rich text editor, one that connects and flows through your LMS app, can be achieved with a specific configuration. This configuration unlocks the ability to style the editor contents to match your app’s style guide or design system. The continuity and connections contribute to a strong UX.
Essential TinyMCE options for a strong UX
Block_format
Font_css
Content_style
a. Block_format
What are Block_formats?
TinyMCE has a “blocks” drop down menu found in the toolbar. Clicking and selecting a block after highlighting text in the WYSIWYG text area changes the text to match the format.
Why configure Block_formats?
The specific configurations in this tutorial sets aside helpful, user-friendly labels and HTML for whatever content that students and teachers are working on.
How to get configure Block_formats
Add the “block_formats” option to the TinyMCE init script.
block_formats: "",
Configure a string with the following HTML tag descriptions to provide the Block format labels:
block_formats: "Title=h1; Heading=h2; Sub heading=h3; Blockquote=blockquote; Paragraph=p",
Save the changes.
b. Font_css
What the Font_css option does
This option enables you to load in CSS fonts from an external source.
Why configure the Font_css option?
Consistency is important, and this option allows you to consistently style the content that teachers and students write – with the same fonts established for every other line of text in your app.
How to configure the Font_css option
The following example makes use of Google Fonts. Any self-hosted or CDN enlisted fonts work with this option.
Include the “font_css” option, along with an empty array:
font_css: [ ],
Add the Google Fonts link:
font_css: [ "https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,400;0,550;1,400&display=swap" ],
Save the changes.
c. Content_style
What is the Content_style option?
This option is for setting up CSS rules for styling any content added into the editor.
Why configure the Content_style option?
Adding these rules allows you to set up font sizes, font families, and other options like spacing, padding around elements, and color to create the consistent visual appearance between the rich text editor and the application.
How to configure Content_style
In the init script, add the content_style option, including the pair of backticks needed to contain the CSS content:
content_style: ` `
Add the CSS to define the appearance of the LMS rich text editor:
content_style:
`
body {
max-width: 800px;
margin: auto;
font-family: 'Asap', serif;
font-size: 17px;
color: #222f3e;
}
h1, h2, h3, strong {
font-weight: 550;
}
table th,
table thead td {
background-color: #ecf0f1;
font-weight: 550;
text-align: left;
}
table caption {
display: none;
}
table[data-mce-selected="1"] caption {
display: table-caption;
}
.mce-footnotes {
Font-size:12px;
}
`,
Save the changes.
And the following is the complete code for Step 2, one that has content matching the LMS.
Step 2
Pinpoint productivity in your LMS
TL;DR
Many productivity plugins are configured at the beginning of this tutorial, however it’s important to understand how these plugins contribute to productivity.
Delivering an experience to your users that saves them time when creating lessons, essays, or content doesn’t have to be difficult. For example, Oasis LMS saves content creators over ten hours per content piece they produce. Including TinyMCE as their LMS rich text editor has saved them over 260 hours annually in customer support calls.
TinyMCE improves productivity with these specific plugins – add them to your LMS rich text editor configuration to flow productivity increases through to your users, and make their lives easier.
These plugin options speed up content creation
Mediaembed
Autolink
Table
Media
Power Paste
Wordcount
Image
Charmap
Code
Link
Emoticons
Advanced Code Editor
List
a. Mediembed_max_width
What Is Mediembed_max_width?
The option “max width” controls the width of content previews once they’re added to the LMS rich text editor. It’s an option available once the Media Embed plugin is added to the editor configuration.
Why configure Mediembed_max_width?
Controlling the size and width of media added to the LMS helps prevent users from wasting time controlling the dimensions of any media they’re adding to their lesson plans or other content.
How to configure Mediembed_max_width
Confirm that the the media embed plugin is available in the TinyMCE configuration
Add the media embed max width option:
mediaembed_max_width: ,
Set the size to 800 pixels:
mediaembed_max_width: 800,
Save the changes
The remaining productivity plugins are already added to the initial TinyMCE list of plugins. These don’t require any further configuration. Several plugins enable basic functionality of the editor:
- Table
- Image
- Link
- List
- Media
For the remaining plugins, It’s important to know what they are, and what they bring to the table in terms of providing productivity potential.
b. PowerPaste
What is PowerPaste?
The PowerPaste plugin enables clean copy and paste between content writing applications like MS Word, Excel, as well as Google Docs.
Why include this option?
Course creators and students make use of these applications daily, and the ability to move course content cleanly without any formatting errors represents an important feature. PowerPaste moves content from one source to another, with 99.9% accuracy.
c. Character Map and Emoticons
What are the Character Map and Emoticon plugins?
These plugins provide an effective method to add emoticons and special symbols to their content.
Why include these plugins?
Apart from being a form of expression for students, including these plugins allows emoticons and special characters to be added within the editor, without having to copy and paste them from other locations, or to memorize keyboard combinations.
d. Checklist
What are Checklists?
Learning content needs clear criteria. A checklist is the accepted method for providing criteria.
Why set the Checklist plugin up?
This plugin allows users to quickly add checklists to learning content.
e. Autolink
What is the Autolink plugin?
The plugin automatically transforms any valid URL added to the content, into a link.
Why include the Autolink plugin?
The ability to automatically embed a link saves time for any teachers writing lesson plans, or students including websites as a reference in their work.
f. Wordcount
What is the Wordcount plugin?
When activated, the plugin displays the number of words written into the text area.
Why include the Wordcount plugin?
Another essential feature to help with school assignments, is the word limit. The Wordcount plugin shows students (at a glance) how many words they’ve added to the LMS rich text editor.
g. Code and Advanced code
What are the Code and Advanced code plugins?
These plugins allow the user to adjust and customize their content by accessing the underlying HTML that supports and forms the text area contents.
Why include these plugins?
If the LMS is designed for technical learning, these plugins allow students to include code snippets, and further customize their work, thereby fine-tuning the appearance of any content added to the LMS rich text editor.
The final result
The result of these plugins combined is a LMS rich text editor that boosts the productivity, engagement and satisfaction of course creators and students alike.
And the following is the complete code content up to this stage of the tutorial:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
// Select the element(s) to add TinyMCE to using any valid CSS selector
selector: "#editor",
// Tip - To make TinyMCE leaner, only include the plugins you need
plugins: "a11ychecker advcode autocorrect autolink autoresize autosave charmap checklist code emoticons footnotes fullscreen image link linkchecker lists media mediaembed mergetags powerpaste preview table tableofcontents tinycomments tinymcespellchecker typography wordcount",
// Specify the toolbar buttons
// We have put our custom insert token button last
// https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/
toolbar: "undo redo | blocks | bold italic underline strikethrough forecolor backcolor | align checklist bullist numlist | link image media footnotes mergetags table | subscript superscript charmap blockquote | tokens | spellchecker typography a11ycheck wordcount | addcomment showcomments | fullscreen preview",
// Enable sticky toolbar
// https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#toolbar_sticky
toolbar_sticky: true,
// Disable the status bar
// https://www.tiny.cloud/docs/tinymce/6/statusbar-configuration-options/#statusbar
statusbar: false,
// You can assign each item in the Blocks menu a user-friendly name
// https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#block_formats
block_formats: "Title=h1; Heading=h2; Sub heading=h3; Blockquote=blockquote; Paragraph=p",
// Use font_css to load custom fonts from an external source
// https://www.tiny.cloud/docs/tinymce/6/add-css-options/#font_css
font_css: ["https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,400;0,550;1,400&display=swap"],
// URLs containing commas and such have to be wrapped in an array to work
// The following css will be injected into the editor, extending
// the default styles.
// In a real world scenario, with much more custom styles for headings
// links, tables, images etc, it's recommended to use the content_css
// option to load a separate CSS file. Makes editing easier too.
// https://www.tiny.cloud/docs/tinymce/6/add-css-options/
content_style: `
body {
max-width: 800px;
margin: auto;
font-family: 'Asap', serif;
font-size: 17px;
color: #222f3e;
}
h1, h2, h3, strong {
font-weight: 550;
}
table th,
table thead td {
background-color: #ecf0f1;
font-weight: 550;
text-align: left;
}
table caption {
display: none;
}
table[data-mce-selected="1"] caption {
display: table-caption;
}
.mce-footnotes {
font-size:12px;
}
`,
// Set Enhanced Media Embed's max width
// https://www.tiny.cloud/docs/tinymce/6/introduction-to-mediaembed/
mediaembed_max_width: 800,
});
</script>
<style>
body {
margin: 60px 16px;
background-color: #fafafc;
color: #222f3e;
}
.editor-wrap {
max-width: 1200px;
margin: auto;
}
</style>
</head>
<body>
<div class="editor-wrap">
<textarea id="editor">
<h1>
<span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_39124539331662741473397" data-mce-annotation="tinycomments">Assignment</span>
#3: Color Theory</h1>
<p>Hello {{Student.Name}},</p>
<p>For this week's assignment, you will learn the basics of color theory.</p>
<p>Select one of the following topics, and write a research essay. Ensure you answer the questions in full, and provide references for any primary or secondary sources<sup id="footnote_83179098411662742784603" class="mce-footnote">
<a href="#footnotes_entry_83179098411662742784603">1</a>
</sup>
consulted. Contact
{{Course.Teacher.Name}}
or
{{Course.Department.Head}}
if you have any questions about the assignment.</p>
<div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.25%; max-width: 800px;" data-ephox-embed-iri="https://www.youtube.com/watch?v=Qj1FK8n7WgY">
<iframe style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" src="https://www.youtube.com/embed/Qj1FK8n7WgY?rel=0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
</div>
<h2>This week's tasks</h2>
<p>Begin by watching the video above then proceed to the assignment questionnaire by pressing continue below.</p>
<h3>Topic List</h3>
<ul>
<li>The origin of Color theory and its effect on emotion and mood is contentious.<sup id="footnote_98446634721662742994322" class="mce-footnote">
<a href="#footnotes_entry_98446634721662742994322">2</a>
</sup>
Identify your understanding of the originators of Color theory. Argue for the effectiveness of certain color palettes over others to create different moods.</li>
<li>While some experts argue there are no new color palettes, others argue innovation is a constant process. Choose one side, and build an argument: There are no new color palette innovations. New color palette innovations are happening all the time.</li>
<li>Select three examples of color theory in practice that are all part of one medium (e.g. film, magazine, television). Explain why these three examples are effective. Contrast and argue why one of these examples is more effective in its use of color theory concepts compared to the others.</li>
<li>Wassily Kandinsky states “Color is a power which directly influences the soul.”<sup id="footnote_34341905131662743043554" class="mce-footnote">
<a href="#footnotes_entry_34341905131662743043554">3</a>
</sup>
Explain what Kandinsky meant, and provide an argument explaining what Kandinsky means using color theory principles.</li>
</ul>
<h3>Also...</h3>
<ul>
<li>Think about the difference between mixing colors using colored lights vs using paint.</li>
<li>Pay extra attention to the different complementary color models.</li>
</ul>
<blockquote>
<p>“Color is a power which directly influences the soul.”<br><span style="color: #95a5a6;">
<em>– Wassily Kandinsky </em>
</span>
</p>
</blockquote>
<h2>Deadlines</h2>
<p>Please submit your tasks before
{{Assignment.DueDate}}</p>
<h2>Grading Criteria</h2>
<table style="border-collapse: collapse; width: 99.8698%; height: 157px;" border="1">
<thead>
<tr>
<th style="width: 18.0915%;" scope="col"> </th>
<td style="width: 18.0915%;" scope="col">High Achievement</td>
<td style="width: 18.2224%;" scope="col">Good Achievement</td>
<td style="width: 18.2224%;" scope="col">Pass</td>
<td style="width: 18.2224%;" scope="col">Fail</td>
</tr>
</thead>
<tbody>
<tr>
<th style="width: 18.0915%;" scope="col">Demonstrated knowledge of color theory</th>
<td style="width: 18.0915%;">The student shows an outstanding knowledge and command of color theory concepts</td>
<td style="width: 18.2224%;">The student shows good knowledge and understanding of color theory concepts</td>
<td style="width: 18.2224%;">The student shows some knowledge of color theory and a basic understanding of color theory concepts</td>
<td style="width: 18.2224%;">The student has not demonstrated knowledge of color theory, or the concepts of color theory.</td>
</tr>
<tr>
<th style="width: 18.0915%;" scope="col">Argument composition skills</th>
<td style="width: 18.0915%;">The student shows an outstanding argument composition skills</td>
<td style="width: 18.2224%;">The student shows good argument composition skills</td>
<td style="width: 18.2224%;">The student shows some argument composition skills.</td>
<td style="width: 18.2224%;">The student does not show clear argument composition skills</td>
</tr>
<tr>
<th style="width: 18.0915%;" scope="col">Consulted resources</th>
<td style="width: 18.0915%;">The student shows they have consulted excellent resources</td>
<td style="width: 18.2224%;">The student has consulted good resources</td>
<td style="width: 18.2224%;">The student has consulted some resources required for the assignment</td>
<td style="width: 18.2224%;">The student has not consulted adequate resources</td>
</tr>
<tr>
<th style="width: 18.0915%;" scope="col">Writing, Grammar, and Clarity</th>
<td style="width: 18.0915%;">The student shows a command of the language in their work</td>
<td style="width: 18.2224%;">The student shows effective writing skills</td>
<td style="width: 18.2224%;">The student shows clear writing skills</td>
<td style="width: 18.2224%;">The student shows unclear writing skills</td>
</tr>
</tbody>
</table>
<p> </p>
<div class="mce-footnotes">
<hr>
<ol>
<li id="footnotes_entry_83179098411662742784603">
<a class="mce-footnotes-backlink" href="#footnote_83179098411662742784603">^ </a>
<span class="mce-footnotes-note">AMA Style Guide. <a href="https://owl.purdue.edu/owl/research_and_citation/ama_style/index.html">https://owl.purdue.edu/owl/research_and_citation/ama_style/index.html</a>. Accessed September 9, 2022. </span>
</li>
<li id="footnotes_entry_98446634721662742994322">
<a class="mce-footnotes-backlink" href="#footnote_98446634721662742994322">^ </a>
<span class="mce-footnotes-note">Color theory. Wikipedia.
<a href="https://en.wikipedia.org/wiki/Color_theory">https://en.wikipedia.org/wiki/Color_theory</a>. Published September 3, 2022. Accessed September 24, 2022. </span>
</li>
<li id="footnotes_entry_34341905131662743043554">
<a class="mce-footnotes-backlink" href="#footnote_34341905131662743043554">^ </a>
<span class="mce-footnotes-note">Kandinsky W. A quote from concerning the spiritual in art. Goodreads.
<a href="https://www.goodreads.com/quotes/90420-colour-is-a-power-which-directly-influences-the-soul">https://www.goodreads.com/quotes/90420-colour-is-a-power-which-directly-influences-the-soul</a>. Accessed September 14, 2022. </span>
</li>
</ol>
</div>
<!--tinycomments|2.1|data:application/json;base64,eyJtY2UtY29udmVyc2F0aW9uXzM5MTI0NTM5MzMxNjYyNzQxNDczMzk3Ijp7InVpZCI6Im1jZS1jb252ZXJzYXRpb25fMzkxMjQ1MzkzMzE2NjI3NDE0NzMzOTciLCJjb21tZW50cyI6W3sidWlkIjoibWNlLWNvbnZlcnNhdGlvbl8zOTEyNDUzOTMzMTY2Mjc0MTQ3MzM5NyIsImF1dGhvciI6ImF2aXNtYXJhIiwiYXV0aG9yTmFtZSI6IkFuZ2VsIFZpc21hcmEgKFN0dWRlbnQpIiwiYXV0aG9yQXZhdGFyIjoiaHR0cHM6Ly93d3cudGlueS5jbG91ZC9pbWFnZXMvYXZhdGFycy9hdmF0YXItQW5nZWxWaXNtYXJhLmpwZyIsImNvbnRlbnQiOiJIb3cgd291bGQgeW91IGxpa2UgdXMgdG8gY2l0ZSBvdXIgcmVmZXJlbmNlcz8iLCJjcmVhdGVkQXQiOiIyMDIyLTA5LTA5VDE2OjM3OjUzLjM5N1oiLCJtb2RpZmllZEF0IjoiMjAyMi0wOS0wOVQxNjozNzo1My4zOTdaIn0seyJ1aWQiOiJtY2UtcmVwbHlfNzYwNTE3MDY2MjE2NjI3NDE1Njg0NzEiLCJhdXRob3IiOiJybWFydGVsIiwiYXV0aG9yTmFtZSI6IlJvc2FsaW5hIE1hcnRlbCAoSW5zdHJ1Y3RvcikiLCJhdXRob3JBdmF0YXIiOiJodHRwczovL3d3dy50aW55LmNsb3VkL2ltYWdlcy9hdmF0YXJzL2F2YXRhci1Sb3NhbGluYU1hcnRlbC5qcGciLCJjb250ZW50IjoiUGxlYXNlIHVzZSB0aGUgYnVpbHQtaW4gZm9vdG5vdGVzIGZ1bmN0aW9uYWxpdHkgYW5kIGZvbGxvdyBBTUEgc3R5bGUuIiwiY3JlYXRlZEF0IjoiMjAyMi0wOS0wOVQxNjozOToyOC40NzFaIiwibW9kaWZpZWRBdCI6IjIwMjItMDktMDlUMTY6Mzk6MjguNDcxWiJ9XX19-->
</textarea>
</div>
</body>
</html>
Step 3
Introduce structuring for improved content quality
Standards for courses vary by region, and by institution. One region may accept only US English, while another only accepts UK English. Then there’s the question of style and referencing. AMA style is preferred in some institutions, whereas APA is the only accepted style guide in another.
Students use your LMS to learn new skills and complete their courses – not to waste time fiddling with formatting. The following plugins greatly increase the presentation quality of content, and student productivity.
Set up these plugins to help students structure their content, and help them focus on their work rather than the minutiae of formatting.
These plugin options speed up content creation
Spell Checker Pro
Linkchecker
Table of Contents
Advanced Typography
Spelling Autocorrect
Accessibility Checker
Footnotes
a. Spell Checker Pro
What is the Spell Checker Pro plugin?
The Spell Checker Pro Plugin actively checks for spelling errors and highlights them during typing. It’s a capability that saves time by immediately bringing typos and mistakes to students’ and teachers' attention. Spell Checker Pro uses English US dictionaries as the default language, and there are other options if you require multi-language spell checking.
Why would you need to optimize it?
Depending on the region that you’re designing for, TinyMCE's Spell Checker Pro can simultaneously spell check across (up to) 38 languages in the same document. This makes creating content in your LMS possible across multiple regions.
User’s can select the languages to check and, if you want more choice there are additional configurations you can make to adjust how the plugin activates.
How to set it up
Add the spellchecker language option to the TinyMCE init script:
spellchecker_language: " ",
Set the language options for the Description Editor as the value for the spellchecker language option. The following example adds US English only:
spellchecker_language: "en_US",
Save the changes.
b. Advanced Typography
What Advanced Typography does
Advanced Typography improves content readability, and supports students by applying over 25 typographical conventions commonly used in publishing. It helps educators by automatically making their content look more professional, without the need for them to have specialized knowledge about typographic symbols.
Clicking the Advanced Typography button in the toolbar activates the plugin.
Why would you need to optimize it?
You can specify the default language that the plugin should use. You can also refine which typographical rules the plugin should follow.
To set up and specify the plugin’s rules, use the typography_rules option, and set up the rules using the typography library definitions.
How to set it up
Add the typography default language option to the TinyMCE configuration:
typography_default_lang:
Set up the default language:
typography_default_lang: "en-US",
Save the changes.
c. Accessibility Checker
What does Accessibility Checker do?
With the Accessibility Checker, your users can save time double and triple checking they’ve met the agreed accessibility requirements – this is especially important for educators to make sure their work complies with their institutions' accessibility requirements.
The plugin checks learning material and is set (by default) at Level AA – using the Web Content Accessibility Guidelines (WCAG) requirements – as well as meeting standards from Section 508 of the United States Environmental Protection Agency.
This plugin also helps educators avoid unnecessary fines or legal action for inaccessible LMS content (the Department of Justice has stated that WCAG AA compliance is needed to meet ADA compliance) The checker also walks the user through each issue to help clarify exactly what needs attention, which is helpful for students writing and submitting their work.
Why would you need to optimize it?
Because there are different degrees of accessibility compliance, and different content authors and audiences may likewise require different levels of compliance. Depending on the kind of content your customers create, you can control the level of accessibility needed (set it either A, AA or the highest, AAA), by configuring the accessibility plugin to only test for what’s required.
How to set it up
Are there different levels of accessibility?
Levels of accessibility are defined by WCAG as levels of conformance, and are sorted into three categories: a, aa, or aaa. WCAG offers more guidance on understanding the levels of conformance.
Configure the HTML version for accessibility checker in your TinyMCE init script:
a11ychecker_html_version: "html5"
Configure the advanced options for the Accessibility checker by setting the this option to “true”:
a11y_advanced_options: true,
Check the list of Accessibility Rules, and select a level of accessibility compliance: either A, AA, or AAA are the accepted values for the Accessibility Checker plugin options. Your users can change these levels if needed.
Configure the Accessibility Level option using the level of conformance selected in step 1:
a11ychecker_level: 'aa',
Save the changes
The following additional plugins are available from the beginning of this tutorial, and do not require any further configuration.
d. Link Checker
What Link Checker does
Link Checker plugin automatically validates any URLs placed in the WYSIWYG area as users type content. Any URLS that are flagged as invalid are highlighted in red, and you can inspect them with a dedicated context menu to either try and open the link, remove the link, or ignore it.
e. Table of Contents
What the Table of Contents plugin does
This plugin generates a table of contents and places it at the current cursor position within the LMS rich text editor. The table of contents is built (at speed) from the headings the student has written into the text area.
f. Footnotes
What the Footnotes plugin does
The Footnotes plugin gives students the ability to add, remove, and manage footnotes for their source references. It saves time when you’re adjusting a reference section – the order of the footnotes automatically updates when changes are made to the text area.
g. Spelling Autocorrect
What the Spelling Autocorrect plugin does
The Spelling Autocorrect plugin automatically catches spelling errors and other typographical errors. It fixes errors without the educators or students having to stop and change them manually. There is a specific set of errors that the plugin corrects, and you find out more information in the documentation.
The final result
Together, the combined plugins create an LMS rich text editor that helps users build compliant, well structured and high quality content:
And here is the complete code up to this point in the tutorial:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
// Select the element(s) to add TinyMCE to using any valid CSS selector
selector: "#editor",
// Tip - To make TinyMCE leaner, only include the plugins you need
plugins: "a11ychecker advcode autocorrect autolink autoresize autosave charmap checklist code emoticons footnotes fullscreen image link linkchecker lists media mediaembed mergetags powerpaste preview table tableofcontents tinycomments tinymcespellchecker typography wordcount",
// Specify the toolbar buttons
// We have put our custom insert token button last
// https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/
toolbar: "undo redo | blocks | bold italic underline strikethrough forecolor backcolor | align checklist bullist numlist | link image media footnotes mergetags table | subscript superscript charmap blockquote | tokens | spellchecker typography a11ycheck wordcount | addcomment showcomments | fullscreen preview",
// Enable sticky toolbar
// https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#toolbar_sticky
toolbar_sticky: true,
// Disable the status bar
// https://www.tiny.cloud/docs/tinymce/6/statusbar-configuration-options/#statusbar
statusbar: false,
// You can assign each item in the Blocks menu a user-friendly name
// https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#block_formats
block_formats: "Title=h1; Heading=h2; Sub heading=h3; Blockquote=blockquote; Paragraph=p",
// Use font_css to load custom fonts from an external source
// https://www.tiny.cloud/docs/tinymce/6/add-css-options/#font_css
font_css: ["https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,400;0,550;1,400&display=swap"],
// URLs containing commas and such have to be wrapped in an array to work
// The following css will be injected into the editor, extending
// the default styles.
// In a real world scenario, with much more custom styles for headings
// links, tables, images etc, it's recommended to use the content_css
// option to load a separate CSS file. Makes editing easier too.
// https://www.tiny.cloud/docs/tinymce/6/add-css-options/
content_style: `
body {
max-width: 800px;
margin: auto;
font-family: 'Asap', serif;
font-size: 17px;
color: #222f3e;
}
h1, h2, h3, strong {
font-weight: 550;
}
table th,
table thead td {
background-color: #ecf0f1;
font-weight: 550;
text-align: left;
}
table caption {
display: none;
}
table[data-mce-selected="1"] caption {
display: table-caption;
}
.mce-footnotes {
font-size:12px;
}
`,
// Set Enhanced Media Embed's max width
// https://www.tiny.cloud/docs/tinymce/6/introduction-to-mediaembed/
mediaembed_max_width: 800,
// Set a default language for Spell Checker Pro
// https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-spellchecker/
spellchecker_language: "en_US",
// Advanced Typography allows users to apply 25+ typographic conventions to their content.
// Specify the language(s) you want the plugin to use. In this case we are allowing all
// languages, but we must specify the default language.
// https://www.tiny.cloud/docs/tinymce/6/advanced-typography/
typography_default_lang: ["en-US"],
// Set options for Accessibility Checker
// https://www.tiny.cloud/docs/tinymce/6/a11ychecker/
a11y_advanced_options: true,
a11ychecker_html_version: "html5",
a11ychecker_level: "aa",
});
</script>
<style>
body {
margin: 60px 16px;
background-color: #fafafc;
color: #222f3e;
}
.editor-wrap {
max-width: 1200px;
margin: auto;
}
</style>
</head>
<body>
<div class="editor-wrap">
<textarea id="editor">
<h1>
<span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_39124539331662741473397" data-mce-annotation="tinycomments">Assignment</span>
#3: Color Theory</h1>
<p>Hello {{Student.Name}},</p>
<p>For this week's assignment, you will learn the basics of color theory.</p>
<p>Select one of the following topics, and write a research essay. Ensure you answer the questions in full, and provide references for any primary or secondary sources<sup id="footnote_83179098411662742784603" class="mce-footnote">
<a href="#footnotes_entry_83179098411662742784603">1</a>
</sup>
consulted. Contact
{{Course.Teacher.Name}}
or
{{Course.Department.Head}}
if you have any questions about the assignment.</p>
<div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.25%; max-width: 800px;" data-ephox-embed-iri="https://www.youtube.com/watch?v=Qj1FK8n7WgY">
<iframe style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" src="https://www.youtube.com/embed/Qj1FK8n7WgY?rel=0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
</div>
<h2>This week's tasks</h2>
<p>Begin by watching the video above then proceed to the assignment questionnaire by pressing continue below.</p>
<h3>Topic List</h3>
<ul>
<li>The origin of Color theory and its effect on emotion and mood is contentious.<sup id="footnote_98446634721662742994322" class="mce-footnote">
<a href="#footnotes_entry_98446634721662742994322">2</a>
</sup>
Identify your understanding of the originators of Color theory. Argue for the effectiveness of certain color palettes over others to create different moods.</li>
<li>While some experts argue there are no new color palettes, others argue innovation is a constant process. Choose one side, and build an argument: There are no new color palette innovations. New color palette innovations are happening all the time.</li>
<li>Select three examples of color theory in practice that are all part of one medium (e.g. film, magazine, television). Explain why these three examples are effective. Contrast and argue why one of these examples is more effective in its use of color theory concepts compared to the others.</li>
<li>Wassily Kandinsky states “Color is a power which directly influences the soul.”<sup id="footnote_34341905131662743043554" class="mce-footnote">
<a href="#footnotes_entry_34341905131662743043554">3</a>
</sup>
Explain what Kandinsky meant, and provide an argument explaining what Kandinsky means using color theory principles.</li>
</ul>
<h3>Also...</h3>
<ul>
<li>Think about the difference between mixing colors using colored lights vs using paint.</li>
<li>Pay extra attention to the different complementary color models.</li>
</ul>
<blockquote>
<p>“Color is a power which directly influences the soul.”<br><span style="color: #95a5a6;">
<em>– Wassily Kandinsky </em>
</span>
</p>
</blockquote>
<h2>Deadlines</h2>
<p>Please submit your tasks before
{{Assignment.DueDate}}</p>
<h2>Grading Criteria</h2>
<table style="border-collapse: collapse; width: 99.8698%; height: 157px;" border="1">
<thead>
<tr>
<th style="width: 18.0915%;" scope="col"> </th>
<td style="width: 18.0915%;" scope="col">High Achievement</td>
<td style="width: 18.2224%;" scope="col">Good Achievement</td>
<td style="width: 18.2224%;" scope="col">Pass</td>
<td style="width: 18.2224%;" scope="col">Fail</td>
</tr>
</thead>
<tbody>
<tr>
<th style="width: 18.0915%;" scope="col">Demonstrated knowledge of color theory</th>
<td style="width: 18.0915%;">The student shows an outstanding knowledge and command of color theory concepts</td>
<td style="width: 18.2224%;">The student shows good knowledge and understanding of color theory concepts</td>
<td style="width: 18.2224%;">The student shows some knowledge of color theory and a basic understanding of color theory concepts</td>
<td style="width: 18.2224%;">The student has not demonstrated knowledge of color theory, or the concepts of color theory.</td>
</tr>
<tr>
<th style="width: 18.0915%;" scope="col">Argument composition skills</th>
<td style="width: 18.0915%;">The student shows an outstanding argument composition skills</td>
<td style="width: 18.2224%;">The student shows good argument composition skills</td>
<td style="width: 18.2224%;">The student shows some argument composition skills.</td>
<td style="width: 18.2224%;">The student does not show clear argument composition skills</td>
</tr>
<tr>
<th style="width: 18.0915%;" scope="col">Consulted resources</th>
<td style="width: 18.0915%;">The student shows they have consulted excellent resources</td>
<td style="width: 18.2224%;">The student has consulted good resources</td>
<td style="width: 18.2224%;">The student has consulted some resources required for the assignment</td>
<td style="width: 18.2224%;">The student has not consulted adequate resources</td>
</tr>
<tr>
<th style="width: 18.0915%;" scope="col">Writing, Grammar, and Clarity</th>
<td style="width: 18.0915%;">The student shows a command of the language in their work</td>
<td style="width: 18.2224%;">The student shows effective writing skills</td>
<td style="width: 18.2224%;">The student shows clear writing skills</td>
<td style="width: 18.2224%;">The student shows unclear writing skills</td>
</tr>
</tbody>
</table>
<p> </p>
<div class="mce-footnotes">
<hr>
<ol>
<li id="footnotes_entry_83179098411662742784603">
<a class="mce-footnotes-backlink" href="#footnote_83179098411662742784603">^ </a>
<span class="mce-footnotes-note">AMA Style Guide. <a href="https://owl.purdue.edu/owl/research_and_citation/ama_style/index.html">https://owl.purdue.edu/owl/research_and_citation/ama_style/index.html</a>. Accessed September 9, 2022. </span>
</li>
<li id="footnotes_entry_98446634721662742994322">
<a class="mce-footnotes-backlink" href="#footnote_98446634721662742994322">^ </a>
<span class="mce-footnotes-note">Color theory. Wikipedia.
<a href="https://en.wikipedia.org/wiki/Color_theory">https://en.wikipedia.org/wiki/Color_theory</a>. Published September 3, 2022. Accessed September 24, 2022. </span>
</li>
<li id="footnotes_entry_34341905131662743043554">
<a class="mce-footnotes-backlink" href="#footnote_34341905131662743043554">^ </a>
<span class="mce-footnotes-note">Kandinsky W. A quote from concerning the spiritual in art. Goodreads.
<a href="https://www.goodreads.com/quotes/90420-colour-is-a-power-which-directly-influences-the-soul">https://www.goodreads.com/quotes/90420-colour-is-a-power-which-directly-influences-the-soul</a>. Accessed September 14, 2022. </span>
</li>
</ol>
</div>
<!--tinycomments|2.1|data:application/json;base64,eyJtY2UtY29udmVyc2F0aW9uXzM5MTI0NTM5MzMxNjYyNzQxNDczMzk3Ijp7InVpZCI6Im1jZS1jb252ZXJzYXRpb25fMzkxMjQ1MzkzMzE2NjI3NDE0NzMzOTciLCJjb21tZW50cyI6W3sidWlkIjoibWNlLWNvbnZlcnNhdGlvbl8zOTEyNDUzOTMzMTY2Mjc0MTQ3MzM5NyIsImF1dGhvciI6ImF2aXNtYXJhIiwiYXV0aG9yTmFtZSI6IkFuZ2VsIFZpc21hcmEgKFN0dWRlbnQpIiwiYXV0aG9yQXZhdGFyIjoiaHR0cHM6Ly93d3cudGlueS5jbG91ZC9pbWFnZXMvYXZhdGFycy9hdmF0YXItQW5nZWxWaXNtYXJhLmpwZyIsImNvbnRlbnQiOiJIb3cgd291bGQgeW91IGxpa2UgdXMgdG8gY2l0ZSBvdXIgcmVmZXJlbmNlcz8iLCJjcmVhdGVkQXQiOiIyMDIyLTA5LTA5VDE2OjM3OjUzLjM5N1oiLCJtb2RpZmllZEF0IjoiMjAyMi0wOS0wOVQxNjozNzo1My4zOTdaIn0seyJ1aWQiOiJtY2UtcmVwbHlfNzYwNTE3MDY2MjE2NjI3NDE1Njg0NzEiLCJhdXRob3IiOiJybWFydGVsIiwiYXV0aG9yTmFtZSI6IlJvc2FsaW5hIE1hcnRlbCAoSW5zdHJ1Y3RvcikiLCJhdXRob3JBdmF0YXIiOiJodHRwczovL3d3dy50aW55LmNsb3VkL2ltYWdlcy9hdmF0YXJzL2F2YXRhci1Sb3NhbGluYU1hcnRlbC5qcGciLCJjb250ZW50IjoiUGxlYXNlIHVzZSB0aGUgYnVpbHQtaW4gZm9vdG5vdGVzIGZ1bmN0aW9uYWxpdHkgYW5kIGZvbGxvdyBBTUEgc3R5bGUuIiwiY3JlYXRlZEF0IjoiMjAyMi0wOS0wOVQxNjozOToyOC40NzFaIiwibW9kaWZpZWRBdCI6IjIwMjItMDktMDlUMTY6Mzk6MjguNDcxWiJ9XX19-->
</textarea>
</div>
</body>
</html>
Step 4
Open new pathways with collaboration and communication
TL;DR
Introduce collaboration plugins and options to open new pathways for collaboration.
Typically, online courses are found to show lower completion rates when compared to face-to-face learning. Sometimes completion rates can drop to the single digits. One study aimed to discover why this was the case. They found opening pathways to collaboration and communication pushed completion rates higher – with sometimes as high as 85% of students completing courses online.
Your LMS rich text editor has the capacity to unlock communication paths. And rather than your developers creating them, by including the following plugins for personalization and collaboration it can provide exactly what your users need.
These plugins open up personalization
and collaboration options
Merge tags
Tiny Comments
Mentions
a. Merge Tags
What the Merge Tags plugin does
The Merge Tags plugin enables educators to format learning content that needs to be replicated between semesters – saving them hours of work spent reproducing it or starting from scratch each semester. You can set up the tags you want course creators to use, and then these tags become available through the Merge Tags toolbar button.
Note: TinyMCE provides a way to define and insert merge tags. It does not replace the merge tags with database information. Your LMS needs to provide this information from a database source
Why optimize Merge Tags?
Rather than rely on generic tags, configuring specific tags for educators saves them time replicating their course content.
How to set up Merge Tags
Add the mergetags list option:
mergetags_list: [],
Define a title for the list, and create an empty menu.
mergetags_list: [
{
title: "",
menu: [ ]
}
],
Set the title of this category “Course”:
mergetags_list: [
{
title: "Course",
menu: [ ]
}
],
Create values and titles to populate the Course category:
mergetags_list: [
{
title: "Course",
menu: [
{
value: "",
title: ""
},
{
value: "",
title: ""
},
{
value: "",
title: ""
}
]
},
],
Input the predefined values:
mergetags_list: [
{
title: "Course",
menu: [
{
value: "Course.Name",
title: "Course Name"
},
{
value: "Course.Teacher.Name",
title: "Teacher Name"
},
{
value: "Course.Department.Head",
title: "Department Head"
}
]
},
],
Create a second category titled Assignment and populate it:
mergetags_list: [
{
//Lines skipped for brevity
title: "Assignment",
menu: [
{
value: "Assingment.Name",
title: "Assignment Name"
},
{
value: "Assignment.DueDate",
title: "Assignment Due Date"
},
]
},
],
Create a third category called Student and populate it:
mergetags_list: [
{
//Lines skipped for brevity
title: "Student",
menu: [
{
value: "Student.Name",
title: "Student Name"
},
{
value: "Student.ID",
title: "Student ID"
},
{
value: "Student.Email",
title: "Student Email"
},
]
},
],
Save the changes
b. Tiny Comments
What the Comments plugin does
Communication pathways don’t flow in a single direction. The feedback process travels between educators and students, and between students working in class as a group (peer learning). The TinyMCE Comments plugin unlocks those lines of communication.
Why would you need to optimize it?
There are two modes to consider for setting up TinyMCE Comments: embedded mode and callback mode. In this example embedded mode appears, which embeds the comments right in the editor contents (and saves to your database with the content).
To configure this, the tutorial shows how to specify the current author, name and avatar, and to ensure comments are visible by default. It also shows how to configure the sidebar to be shown by default. If you want to save comments separately to your database, take a look at Callback mode.
How to set it up
Set up TinyMCE Comments mode option:
link_list: []
Set the mode to “embedded”:
link_list: [
{ title: "", value: "" },
{ title: "", value: "" },
{ title: "", value: "" }
]
Set up the TinyMCE Comments author options:
link_list: [
{ title: "Features", value: "https://www.tiny.cloud/tinymce/features/" },
{ title: "Docs", value: "https://www.tiny.cloud/pricing/" },
{ title: "Pricing", value: "https://www.tiny.cloud/docs/tinymce/6/" }
]
Set the author content for the example author set up for the demo:
Set the sidebar_show option to “show comments”:
Save the changes. The sample content added earlier appears, and is visible in the editor.
c. Mentions
What the Mentions plugin does
The Mentions plugin deepens cross-communication by allowing students and educators to reach out to each other for feedback and comments and directly tag each other for speedier responses.
Why configure the Mentions plugin?
The configuration of the plugin is beyond the scope of this tutorial, however it’s worth considering adding Mentions to help users interact and collaborate with one another, similar to how they do it in other apps.
The final result
With these communication pathways open, your LMS rich text editor now provides both students and educators a variety of methods to reach out and connect when it’s needed.
And here is the complete source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
// Select the element(s) to add TinyMCE to using any valid CSS selector
selector: "#editor",
// Tip - To make TinyMCE leaner, only include the plugins you need
plugins: "a11ychecker advcode autocorrect autolink autoresize autosave charmap checklist code emoticons footnotes fullscreen image link linkchecker lists media mediaembed mergetags powerpaste preview table tableofcontents tinycomments tinymcespellchecker typography wordcount",
// Specify the toolbar buttons
// We have put our custom insert token button last
// https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/
toolbar: "undo redo | blocks | bold italic underline strikethrough forecolor backcolor | align checklist bullist numlist | link image media footnotes mergetags table | subscript superscript charmap blockquote | tokens | spellchecker typography a11ycheck wordcount | addcomment showcomments | fullscreen preview",
// Enable sticky toolbar
// https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#toolbar_sticky
toolbar_sticky: true,
// Disable the status bar
// https://www.tiny.cloud/docs/tinymce/6/statusbar-configuration-options/#statusbar
statusbar: false,
// You can assign each item in the Blocks menu a user-friendly name
// https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#block_formats
block_formats: "Title=h1; Heading=h2; Sub heading=h3; Blockquote=blockquote; Paragraph=p",
// Use font_css to load custom fonts from an external source
// https://www.tiny.cloud/docs/tinymce/6/add-css-options/#font_css
font_css: ["https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,400;0,550;1,400&display=swap"],
// URLs containing commas and such have to be wrapped in an array to work
// The following css will be injected into the editor, extending
// the default styles.
// In a real world scenario, with much more custom styles for headings
// links, tables, images etc, it's recommended to use the content_css
// option to load a separate CSS file. Makes editing easier too.
// https://www.tiny.cloud/docs/tinymce/6/add-css-options/
content_style: `
body {
max-width: 800px;
margin: auto;
font-family: 'Asap', serif;
font-size: 17px;
color: #222f3e;
}
h1, h2, h3, strong {
font-weight: 550;
}
table th,
table thead td {
background-color: #ecf0f1;
font-weight: 550;
text-align: left;
}
table caption {
display: none;
}
table[data-mce-selected="1"] caption {
display: table-caption;
}
.mce-footnotes {
font-size:12px;
}
`,
// Set Enhanced Media Embed's max width
// https://www.tiny.cloud/docs/tinymce/6/introduction-to-mediaembed/
mediaembed_max_width: 800,
// Set a default language for Spell Checker Pro
// https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-spellchecker/
spellchecker_language: "en_US",
// Advanced Typography allows users to apply 25+ typographic conventions to their content.
// Specify the language(s) you want the plugin to use. In this case we are allowing all
// languages, but we must specify the default language.
// https://www.tiny.cloud/docs/tinymce/6/advanced-typography/
typography_default_lang: ["en-US"],
// Set options for Accessibility Checker
// https://www.tiny.cloud/docs/tinymce/6/a11ychecker/
a11y_advanced_options: true,
a11ychecker_html_version: "html5",
a11ychecker_level: "aa",
// Merge Tags lets users add non-editable personalization tokens to your content, so your
// app can then populate the dynamic content into what is rendered for users
// https://www.tiny.cloud/docs/tinymce/6/mergetags/
mergetags_list: [
{
title: "Course",
menu: [
{
value: "Course.Name",
title: "Course Name"
}, {
value: "Course.Teacher.Name",
title: "Teacher Name"
}, {
value: "Course.Department.Head",
title: "Department Head"
}
]
}, {
title: "Assignment",
menu: [
{
value: "Assignment.Name",
title: "Assignment Name"
}, {
value: "Assignment.DueDate",
title: "Assignment Due Date"
}
]
}, {
title: "Student",
menu: [
{
value: "Student.Name",
title: "Student Name"
}, {
value: "Student.ID",
title: "Student ID"
}, {
value: "Student.Email",
title: "Student Email"
}
]
}
],
// The Tiny Comments plugin enables you to quickly get collaboration up and
// running. There are a lot of options, but here are the most basic
// ones to get you started
// https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-comments/
tinycomments_mode: "embedded",
tinycomments_author: "rmartel",
tinycomments_author_name: "Rosalina Martel (Instructor)",
tinycomments_author_avatar: "https://www.tiny.cloud/images/avatars/avatar-RosalinaMartel.jpg",
// Show the comments sidebar by default to encourage collaboration and discovery
// https://www.tiny.cloud/docs/tinymce/6/customsidebar/#sidebar_show
sidebar_show: "showcomments"
});
</script>
<style>
body {
margin: 60px 16px;
background-color: #fafafc;
color: #222f3e;
}
.editor-wrap {
max-width: 1200px;
margin: auto;
}
</style>
</head>
<body>
<div class="editor-wrap">
<textarea id="editor">
<h1>
<span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_39124539331662741473397" data-mce-annotation="tinycomments">Assignment</span>
#3: Color Theory</h1>
<p>Hello {{Student.Name}},</p>
<p>For this week's assignment, you will learn the basics of color theory.</p>
<p>Select one of the following topics, and write a research essay. Ensure you answer the questions in full, and provide references for any primary or secondary sources<sup id="footnote_83179098411662742784603" class="mce-footnote">
<a href="#footnotes_entry_83179098411662742784603">1</a>
</sup>
consulted. Contact
{{Course.Teacher.Name}}
or
{{Course.Department.Head}}
if you have any questions about the assignment.</p>
<div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.25%; max-width: 800px;" data-ephox-embed-iri="https://www.youtube.com/watch?v=Qj1FK8n7WgY">
<iframe style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" src="https://www.youtube.com/embed/Qj1FK8n7WgY?rel=0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
</div>
<h2>This week's tasks</h2>
<p>Begin by watching the video above then proceed to the assignment questionnaire by pressing continue below.</p>
<h3>Topic List</h3>
<ul>
<li>The origin of Color theory and its effect on emotion and mood is contentious.<sup id="footnote_98446634721662742994322" class="mce-footnote">
<a href="#footnotes_entry_98446634721662742994322">2</a>
</sup>
Identify your understanding of the originators of Color theory. Argue for the effectiveness of certain color palettes over others to create different moods.</li>
<li>While some experts argue there are no new color palettes, others argue innovation is a constant process. Choose one side, and build an argument: There are no new color palette innovations. New color palette innovations are happening all the time.</li>
<li>Select three examples of color theory in practice that are all part of one medium (e.g. film, magazine, television). Explain why these three examples are effective. Contrast and argue why one of these examples is more effective in its use of color theory concepts compared to the others.</li>
<li>Wassily Kandinsky states “Color is a power which directly influences the soul.”<sup id="footnote_34341905131662743043554" class="mce-footnote">
<a href="#footnotes_entry_34341905131662743043554">3</a>
</sup>
Explain what Kandinsky meant, and provide an argument explaining what Kandinsky means using color theory principles.</li>
</ul>
<h3>Also...</h3>
<ul>
<li>Think about the difference between mixing colors using colored lights vs using paint.</li>
<li>Pay extra attention to the different complementary color models.</li>
</ul>
<blockquote>
<p>“Color is a power which directly influences the soul.”<br><span style="color: #95a5a6;">
<em>– Wassily Kandinsky </em>
</span>
</p>
</blockquote>
<h2>Deadlines</h2>
<p>Please submit your tasks before
{{Assignment.DueDate}}</p>
<h2>Grading Criteria</h2>
<table style="border-collapse: collapse; width: 99.8698%; height: 157px;" border="1">
<thead>
<tr>
<th style="width: 18.0915%;" scope="col"> </th>
<td style="width: 18.0915%;" scope="col">High Achievement</td>
<td style="width: 18.2224%;" scope="col">Good Achievement</td>
<td style="width: 18.2224%;" scope="col">Pass</td>
<td style="width: 18.2224%;" scope="col">Fail</td>
</tr>
</thead>
<tbody>
<tr>
<th style="width: 18.0915%;" scope="col">Demonstrated knowledge of color theory</th>
<td style="width: 18.0915%;">The student shows an outstanding knowledge and command of color theory concepts</td>
<td style="width: 18.2224%;">The student shows good knowledge and understanding of color theory concepts</td>
<td style="width: 18.2224%;">The student shows some knowledge of color theory and a basic understanding of color theory concepts</td>
<td style="width: 18.2224%;">The student has not demonstrated knowledge of color theory, or the concepts of color theory.</td>
</tr>
<tr>
<th style="width: 18.0915%;" scope="col">Argument composition skills</th>
<td style="width: 18.0915%;">The student shows an outstanding argument composition skills</td>
<td style="width: 18.2224%;">The student shows good argument composition skills</td>
<td style="width: 18.2224%;">The student shows some argument composition skills.</td>
<td style="width: 18.2224%;">The student does not show clear argument composition skills</td>
</tr>
<tr>
<th style="width: 18.0915%;" scope="col">Consulted resources</th>
<td style="width: 18.0915%;">The student shows they have consulted excellent resources</td>
<td style="width: 18.2224%;">The student has consulted good resources</td>
<td style="width: 18.2224%;">The student has consulted some resources required for the assignment</td>
<td style="width: 18.2224%;">The student has not consulted adequate resources</td>
</tr>
<tr>
<th style="width: 18.0915%;" scope="col">Writing, Grammar, and Clarity</th>
<td style="width: 18.0915%;">The student shows a command of the language in their work</td>
<td style="width: 18.2224%;">The student shows effective writing skills</td>
<td style="width: 18.2224%;">The student shows clear writing skills</td>
<td style="width: 18.2224%;">The student shows unclear writing skills</td>
</tr>
</tbody>
</table>
<p> </p>
<div class="mce-footnotes">
<hr>
<ol>
<li id="footnotes_entry_83179098411662742784603">
<a class="mce-footnotes-backlink" href="#footnote_83179098411662742784603">^ </a>
<span class="mce-footnotes-note">AMA Style Guide. <a href="https://owl.purdue.edu/owl/research_and_citation/ama_style/index.html">https://owl.purdue.edu/owl/research_and_citation/ama_style/index.html</a>. Accessed September 9, 2022. </span>
</li>
<li id="footnotes_entry_98446634721662742994322">
<a class="mce-footnotes-backlink" href="#footnote_98446634721662742994322">^ </a>
<span class="mce-footnotes-note">Color theory. Wikipedia.
<a href="https://en.wikipedia.org/wiki/Color_theory">https://en.wikipedia.org/wiki/Color_theory</a>. Published September 3, 2022. Accessed September 24, 2022. </span>
</li>
<li id="footnotes_entry_34341905131662743043554">
<a class="mce-footnotes-backlink" href="#footnote_34341905131662743043554">^ </a>
<span class="mce-footnotes-note">Kandinsky W. A quote from concerning the spiritual in art. Goodreads.
<a href="https://www.goodreads.com/quotes/90420-colour-is-a-power-which-directly-influences-the-soul">https://www.goodreads.com/quotes/90420-colour-is-a-power-which-directly-influences-the-soul</a>. Accessed September 14, 2022. </span>
</li>
</ol>
</div>
<!--tinycomments|2.1|data:application/json;base64,eyJtY2UtY29udmVyc2F0aW9uXzM5MTI0NTM5MzMxNjYyNzQxNDczMzk3Ijp7InVpZCI6Im1jZS1jb252ZXJzYXRpb25fMzkxMjQ1MzkzMzE2NjI3NDE0NzMzOTciLCJjb21tZW50cyI6W3sidWlkIjoibWNlLWNvbnZlcnNhdGlvbl8zOTEyNDUzOTMzMTY2Mjc0MTQ3MzM5NyIsImF1dGhvciI6ImF2aXNtYXJhIiwiYXV0aG9yTmFtZSI6IkFuZ2VsIFZpc21hcmEgKFN0dWRlbnQpIiwiYXV0aG9yQXZhdGFyIjoiaHR0cHM6Ly93d3cudGlueS5jbG91ZC9pbWFnZXMvYXZhdGFycy9hdmF0YXItQW5nZWxWaXNtYXJhLmpwZyIsImNvbnRlbnQiOiJIb3cgd291bGQgeW91IGxpa2UgdXMgdG8gY2l0ZSBvdXIgcmVmZXJlbmNlcz8iLCJjcmVhdGVkQXQiOiIyMDIyLTA5LTA5VDE2OjM3OjUzLjM5N1oiLCJtb2RpZmllZEF0IjoiMjAyMi0wOS0wOVQxNjozNzo1My4zOTdaIn0seyJ1aWQiOiJtY2UtcmVwbHlfNzYwNTE3MDY2MjE2NjI3NDE1Njg0NzEiLCJhdXRob3IiOiJybWFydGVsIiwiYXV0aG9yTmFtZSI6IlJvc2FsaW5hIE1hcnRlbCAoSW5zdHJ1Y3RvcikiLCJhdXRob3JBdmF0YXIiOiJodHRwczovL3d3dy50aW55LmNsb3VkL2ltYWdlcy9hdmF0YXJzL2F2YXRhci1Sb3NhbGluYU1hcnRlbC5qcGciLCJjb250ZW50IjoiUGxlYXNlIHVzZSB0aGUgYnVpbHQtaW4gZm9vdG5vdGVzIGZ1bmN0aW9uYWxpdHkgYW5kIGZvbGxvdyBBTUEgc3R5bGUuIiwiY3JlYXRlZEF0IjoiMjAyMi0wOS0wOVQxNjozOToyOC40NzFaIiwibW9kaWZpZWRBdCI6IjIwMjItMDktMDlUMTY6Mzk6MjguNDcxWiJ9XX19-->
</textarea>
</div>
</body></html>
Part 3
What’s next for your LMS rich text editor?
The very next step, now that the editor is complete, is to integrate the editor into your LMS.
By establishing this link, it provides the content that the Merge Tags plugin can act on. For saving content from the LMS rich text editor to the database, look into the TinyMCE get.content API method. You can find more examples of how the API method works in this blog post.
Another option to look at is plagiarism detection and checking. You can use an API service, like this API copyleaks checker, to check for plagiarism within any student content, assignments and essays. It’s a useful and additional feature, for educators looking for a valuable LMS rich text editor.
Joe Robinson
Dev Advocate | Tech Writer at Tiny
Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.
Di Mace
Marketing Communications Manager
Messaging strategist and copywriter whose passion lies in working with brands like Tiny, that have deep-seated values and embrace the power of their story. She gets a kick out of solving problems, loves learning new things and making stuff, every day. When she’s not thinking through clever copy lines or clarifying value propositions, she’s knitting amazing socks for everyone she knows.
John Rau
Marketing Manager at Tiny
A former developer, John works on the Marketing team at Tiny. When he's not spreading the word about TinyMCE, he enjoys taking things apart and *trying* to put them back together (including his house and anything else that looks interesting).
Related Articles
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.