-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Changed to using minified js and updated html and readme
- Loading branch information
Pete Boysen
committed
Jan 8, 2016
1 parent
8b46e8d
commit 44b2117
Showing
5 changed files
with
23 additions
and
14,466 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,22 +5,7 @@ In [ThinkSpace](http://www.thinkspace.org), | |
| faculty use CKEditor to build content in multiple pages called phases which are | ||
| linked together forming a complex problem for students to solve. CKEditor is great but has typical HTML editor problems and takes work to add new widgets to insert. **Enter ProseMirror**. | ||
|
|
||
| The above ProseMirror editor displays a number of widgets which can be inserted into HTML. Insert the desired widget and supply the attributes requested. Tab between fields and press Enter to insert the element. *If you don't supply an attribute nothing will be created.* For most widgets, click on the widget to change the attributes. | ||
|
|
||
| A brief description of the widgets are shown below: | ||
|
|
||
| * **Image** was moved from the inline submenu to implement editing via clicking. Enter **img.png** for a test image. | ||
| * **Textfield, Textarea, Checkbox and Select** are used by faculty to prompt for questions in the process of solving a problem. | ||
| * **CarryForward** lets an instructor display a student answer from a previous phase(webpage) | ||
| * **InlineMath and BlockMath** uses MathJax to display equations. We need these for scientific and engineering problems. | ||
| * **Spreadsheet** displays an Excel-like experience for business and engineeroring. Handsontable is used for integration. It also demonstrates how many well-formed javascript toolkits can be used to provide new capabilities. | ||
| * **IFrame** lets you embed websites, youTube, GoogleMaps... The sites may not display here because of github.io iframe restrictions. | ||
| * **MultipleChoice, CheckList and Scale** form the basis for a Test/Survey/Quiz/Exam document schema. Creating MultipleChoice and CheckList were cumbersome in CKEditor because each individual checkbox and radiobutton had to be inserted. It it now as easy as a bulletlist. It is also easier to enter than GoogleForms and allows the insertion of media in answers which faculty need. For multiplechoice and checklist, insert and click on the empty paragraph that was inserted to type the question stem. Press Enter to add a choice. | ||
|
|
||
| Finally, ThinkSpace supports **team-based learning**. The ProseMirror <strong>collaboration</strong> capabilities are | ||
| ideal for student teams to interact on documents. | ||
|
|
||
| This is exciting! | ||
| We are investigating using ProseMirror to provide an HTML editor for instructors and for collaborative editing for student teams. | ||
|
|
||
| [Pete Boysen](mailto: [email protected]) | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,65 +1,38 @@ | ||
| <!doctype html> | ||
|
|
||
| <meta charset="utf-8"/> | ||
| <title>ProseMirror Widgets Examples</title> | ||
| <link rel=stylesheet href="demo.css"> | ||
| <script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script> | ||
| <script src="//handsontable.com/dist/handsontable.full.js"></script> | ||
| <link rel="stylesheet" media="screen" href="//handsontable.com/dist/handsontable.full.css"> | ||
|
|
||
| <h4>ProseMirror Widget Examples</h4> | ||
|
|
||
| <p><code>Caution: These are prototypes which have bugs and need UX and CSS work. Deal with it. <img src="img.png"/></code></p> | ||
|
|
||
| <div id="editor"></div> | ||
|
|
||
| <p>In <a href="http://www.thinkspace.org">ThinkSpace</a>, | ||
| faculty use CKEditor to build content in multiple pages called phases which are | ||
| linked together forming a complex problem for students to solve. | ||
| CKEditor is great but has typical HTML editor problems and takes work to add new widgets to insert. <strong>Enter ProseMirror</strong>. | ||
| </p> | ||
| <p> | ||
| The above ProseMirror editor displays a number of widgets which can be inserted into HTML. | ||
| Insert the desired widget and supply the attributes requested. Tab between fields and press Enter to insert the element. | ||
| <em>If you don't supply an attribute nothing will be created.</em> | ||
| For most widgets, click on the widget to change the attributes. | ||
| <p>Insert a widget and supply its attributes. Click on a widget to change its attributes. | ||
| </p> | ||
|
|
||
| <p>A brief description of the widgets are shown below:</p> | ||
| <ul> | ||
| <li><strong>Image</strong> was moved from the inline submenu to implement editing via clicking. Enter <strong>img.png</strong> for a test image. | ||
| <li><strong>Textfield, Textarea, Checkbox and Select</strong> are used by faculty to prompt for questions in the process of solving a problem.</li> | ||
| <li><strong>CarryForward</strong> lets an instructor display a student answer from a previous phase(webpage)</li> | ||
| <li><strong>InlineMath and BlockMath</strong> use MathJax to display equations. We need these for scientific and engineering problems. | ||
| <li><strong>Image:</strong> Enter <strong>img.png</strong> for a test image. | ||
| <li><strong>Textfield, Textarea, Checkbox and Select</strong> provide form elements</li> | ||
| <li><strong>CarryForward</strong> displays previous student answers</li> | ||
| <li><strong>InlineMath and BlockMath</strong> use MathJax. | ||
| Swipe the equations below to test:<br/> | ||
| inline: <strong>f(x)=(x+a)(x+b)</strong><br/> | ||
| 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> | ||
| <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> | ||
| <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> | ||
| </strong> | ||
| </li> | ||
| <li><strong>Spreadsheet</strong> displays an Excel-like experience for business and engineeroring. Handsontable is used for integration. | ||
| Spreadsheet also demonstrates how many well-formed javascript toolkits can be used to provide new capabilities. | ||
| </li> | ||
| <li><strong>IFrame</strong> lets you embed websites, youTube, GoogleMaps...The sites may not display here because of github.io iframe restrictions.</li> | ||
| <li><strong>MultipleChoice, CheckList and Scale</strong> form the basis for a Test/Survey/Quiz/Exam document schema. | ||
| Creating MultipleChoice and CheckList were cumbersome in CKEditor because each individual checkbox and radiobutton | ||
| had to be inserted. It it now as easy as a bulletlist. It is also easier to enter than GoogleForms and allows | ||
| the insertion of media in answers which faculty need. For multiplechoice and checklist, insert and click on the | ||
| empty paragraph that was inserted to type the question stem. Press Enter to add a choice. | ||
| <li><strong>Spreadsheet</strong> uses Handsontable for integration. </li> | ||
| <li><strong>IFrame</strong> embeds websites, youTube, GoogleMaps... The sites won't display because of iframe restrictions.</li> | ||
| <li><strong>MultipleChoice, CheckList and Scale</strong> form the basis for a Test/Survey/Quiz/Exam document schema. | ||
| <em>Click below the title and start editing. Press Enter to provide answers.</em> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <p>Finally, ThinkSpace supports <strong>team-based learning</strong>. The ProseMirror <strong>collaboration</strong> capabilities are | ||
| ideal for student teams to interact on documents.</p> | ||
|
|
||
| <p>This is exciting!</p> | ||
| <p><a href="https://github.com/pboysen/prosemirror-widgets.git">Source</a></p> | ||
| <p><a href="mailto: [email protected]">Pete Boysen</a></p> | ||
|
|
||
| <div id="content" style="visibility:hidden"> | ||
| <p>Here is some beginning text to work with. Have fun!</p> | ||
| <p>Some beginning text...</p> | ||
| </div> | ||
|
|
||
|
|
||
| <script src="widgets-built.js"></script> | ||
| <script src="widgets-built-min.js"></script> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Large diffs are not rendered by default.
Oops, something went wrong.
Oops, something went wrong.