|
| 1 | +<!doctype html> |
| 2 | + |
| 3 | +<meta charset="utf-8"/> |
| 4 | +<title>ProseMirror Widgets Examples</title> |
| 5 | +<link rel=stylesheet href="demo.css"> |
| 6 | +<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script> |
| 7 | +<script src="//handsontable.com/dist/handsontable.full.js"></script> |
| 8 | +<link rel="stylesheet" media="screen" href="//handsontable.com/dist/handsontable.full.css"> |
| 9 | + |
| 10 | +<h4>ProseMirror Widget Examples</h4> |
| 11 | + |
| 12 | +<p><code>Caution: These are prototypes which have bugs and need UX and CSS work. Deal with it. <img src="img.png"/></code></p> |
| 13 | + |
| 14 | +<div id="editor"></div> |
| 15 | + |
| 16 | +<p>In <a href="http://www.thinkspace.org">ThinkSpace</a>, |
| 17 | +faculty use CKEditor to build content in multiple pages called phases which are |
| 18 | +linked together forming a complex problem for students to solve. |
| 19 | +CKEditor is great but has typical HTML editor problems and takes work to add new widgets to insert. <strong>Enter ProseMirror</strong>. |
| 20 | +</p> |
| 21 | +<p> |
| 22 | +The above ProseMirror editor displays a number of widgets which can be inserted into HTML. |
| 23 | +Insert the desired widget and supply the attributes requested. Tab between fields and press Enter to insert the element. |
| 24 | +<em>If you don't supply an attribute nothing will be created.</em> |
| 25 | +For most widgets, click on the widget to change the attributes. |
| 26 | +</p> |
| 27 | + |
| 28 | +<p>A brief description of the widgets are shown below:</p> |
| 29 | +<ul> |
| 30 | + <li><strong>Textfield, Textarea, Checkbox and Select</strong> are used by faculty to prompt for questions in the process of solving a problem.</li> |
| 31 | + <li><strong>InlineMath and BlockMath</strong> use MathJax to display equations. We need these for scientific and engineering problems. |
| 32 | + Swipe the equations below to test:<br/> |
| 33 | + inline: <strong>f(x)=(x+a)(x+b)</strong><br/> |
| 34 | + block: <strong><span class="nb"> </span><span class="nv">\lim</span><span class="nb">_{x</span><span class="nv">\to</span><span class="nb"> </span><span class="m">0</span><span class="nb">}{</span><span class="nv">\frac</span><span class="nb">{e^x</span><span class="o">-</span><span class="m">1</span><span class="nb">}{</span><span class="m">2</span><span class="nb">x}}</span> |
| 35 | +<span class="nb"> </span><span class="nv">\overset</span><span class="nb">{</span><span class="nv">\left</span><span class="o">[</span><span class="nv">\frac</span><span class="nb">{</span><span class="m">0</span><span class="nb">}{</span><span class="m">0</span><span class="nb">}</span><span class="nv">\right</span><span class="o">]</span><span class="nb">}{</span><span class="nv">\underset</span><span class="nb">{</span><span class="nv">\mathrm</span><span class="nb">{H}}{</span><span class="o">=</span><span class="nb">}}</span> |
| 36 | +<span class="nb"> </span><span class="nv">\lim</span><span class="nb">_{x</span><span class="nv">\to</span><span class="nb"> </span><span class="m">0</span><span class="nb">}{</span><span class="nv">\frac</span><span class="nb">{e^x}{</span><span class="m">2</span><span class="nb">}}</span><span class="o">=</span><span class="nb">{</span><span class="nv">\frac</span><span class="nb">{</span><span class="m">1</span><span class="nb">}{</span><span class="m">2</span><span class="nb">}}</span> |
| 37 | +</strong> |
| 38 | +</li> |
| 39 | + <li><strong>Spreadsheet</strong> displays an Excel-like experience for business and engineeroring. Handsontable is used for integration. |
| 40 | + Spreadsheet also demonstrates how many well-formed javascript toolkits can be used to provide new capabilities. |
| 41 | + </li> |
| 42 | + <li><strong>IFrame</strong> lets you embed websites, youTube, GoogleMaps...</li> |
| 43 | + <li><strong>MultipleChoice, CheckList and Scale</strong> form the basis for a Test/Survey/Quiz/Exam document schema. |
| 44 | + Creating MultipleChoice and CheckList were cumbersome in CKEditor because each individual checkbox and radiobutton |
| 45 | + had to be inserted. It it now as easy as a bulletlist. It is also easier to enter than GoogleForms and allows |
| 46 | + the insertion of media in answers which faculty need. |
| 47 | + </li> |
| 48 | +</ul> |
| 49 | + |
| 50 | +<p>Finally, ThinkSpace supports <strong>team-based learning</strong>. The ProseMirror <strong>collaboration</strong> capabilities are |
| 51 | +ideal for student teams to interact on documents.</p> |
| 52 | + |
| 53 | +<p>This is exciting!</p> |
| 54 | +<p><a href="https://github.com/pboysen/prosemirror-widgets.git">Source</a></p> |
| 55 | +<p><a href=" mailto: [email protected]" >Pete Boysen </a></p> |
| 56 | + |
| 57 | +<div id="content" style="visibility:hidden"> |
| 58 | +<p>Here is some beginning text to work with. Have fun!</p> |
| 59 | +</div> |
| 60 | + |
| 61 | + |
| 62 | +<script src="widgets-built.js"></script> |
0 commit comments