Skip to content

Commit

Permalink
DOC-2562: Add live-demo for document converters and full feature demo…
Browse files Browse the repository at this point in the history
… pages.
  • Loading branch information
kemister85 committed Oct 30, 2024
1 parent 358a588 commit 1652b64
Show file tree
Hide file tree
Showing 11 changed files with 226 additions and 19 deletions.
71 changes: 71 additions & 0 deletions modules/ROOT/examples/live-demos/exportpdf/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<textarea id="exportpdf">
<h1>Streamline - The Next-Gen Learning Management System (LMS)</h1>
<p>This document provides a comprehensive overview of the Streamline Learning Management System (LMS) project.</p>
<p><img src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" width="573" height="429"></p>
<p>By <a class="N2odk RZQOk eziW_ KHq0c Byk7y KHq0c" href="https://unsplash.com/@anete_lusina">Anete Lūsiņa</a> on <a href="https://unsplash.com">Unsplash</a></p>
<h2>Project Goals</h2>
<p>Streamline aims to revolutionize online learning by offering a robust and user-friendly platform for educators and learners alike. Our primary goals are:</p>
<ul>
<li><em><strong>To empower educators</strong></em> with intuitive tools for content creation, course management, and student assessment.&nbsp;</li>
<li><em><strong>To enhance the learning experience for students</strong></em> through engaging content delivery, interactive features, and personalized learning paths.</li>
<li><em><strong>To increase accessibility and scalability</strong></em> to cater to diverse learning needs and accommodate a growing user base.</li>
</ul>
<h2>System Features</h2>
<p>Streamline will be packed with features to streamline (pun intended) the learning process:</p>
<ul>
<li><strong>Content Management System (CMS)</strong>: A user-friendly interface for educators to create and upload various learning materials, including videos, documents, presentations, and interactive quizzes.</li>
<li><strong>Course Management Tools</strong>: Streamline allows educators to structure courses with clear learning objectives, organize content modules, and manage student enrollment.&nbsp;</li>
<li><strong>Interactive Learning Activities</strong>: The platform will incorporate gamification elements, discussion forums, collaborative assignments, and other interactive features to keep students engaged.&nbsp;</li>
<li><strong>Assessment &amp; Analytics</strong>: Streamline provides educators with tools to create quizzes, track student progress, generate reports, and identify areas for improvement.&nbsp;</li>
<li><strong>Personalized Learning Paths</strong>: The system will utilize machine learning algorithms to personalize learning recommendations and suggest relevant content based on individual student needs and progress.</li>
</ul>
<p><strong>Table 1: Streamline - Target User Groups</strong></p>
<table style="border-collapse: collapse; width: 100%;" border="1"><colgroup><col style="width: 50%;"><col style="width: 50%;"></colgroup>
<tbody>
<tr>
<td><strong>User Group</strong></td>
<td>Benefits</td>
</tr>
<tr>
<td><strong>Educators</strong></td>
<td>Easy content creation, efficient course management, valuable student insights.</td>
</tr>
<tr>
<td><strong>Learners</strong></td>
<td>Engaging learning experience, personalized learning paths, interactive collaboration.</td>
</tr>
<tr>
<td><strong>Administrators</strong></td>
<td>Scalable platform management, user access control, comprehensive reporting tools.</td>
</tr>
</tbody>
</table>
<h2><br>Technology Stack</h2>
<p>Streamline will leverage a robust technology stack to ensure performance, scalability, and security:</p>
<ul>
<li><strong>Front-End</strong>: ReactJS for a responsive and user-friendly interface.&nbsp;</li>
<li><strong>Back-End</strong>: Node.js for efficient server-side operations.&nbsp;</li>
<li><strong>Database</strong>: MongoDB for flexible and scalable data storage.&nbsp;</li>
<li><strong>Cloud Platform</strong>: Amazon Web Services (AWS) for reliable hosting and infrastructure.&nbsp;</li>
</ul>
<h2>Code Example&nbsp;</h2>
<p>Here's a simplified code snippet demonstrating how educators can create a multiple-choice question within the CMS:</p>
<h3>JavaScript</h3>
<p><code>const questionData = {</code><br><code>&nbsp; title: "What is the capital of France?",</code><br><code>&nbsp; options: [</code><br><code>&nbsp; &nbsp; "London",</code><br><code>&nbsp; &nbsp; "Paris", &nbsp;**Subscript for correct answer indicator**</code><br><code>&nbsp; &nbsp; "Berlin",</code><br><code>&nbsp; &nbsp; "Madrid"</code><br><code>&nbsp; ],</code><br><code>&nbsp; correctAnswer: 1</code><br><code>};</code></p>
<p><code>// Submit question data to the LMS backend for storage</code></p>
<blockquote>
<p><strong>Note</strong>: This is a basic example for illustration purposes. The actual code will involve API calls and more complex functionalities. (Normal body text with parenthetical information)</p>
</blockquote>
<h2>Project Timeline&nbsp;</h2>
<ul>
<li><strong>Phase 1 (2 Months)</strong>: System design, development of core functionalities, and front-end prototype creation.</li>
<li><strong>Phase 2 (3 Months)</strong>: Integration of advanced features like personalized learning and assessment tools.</li>
<li><strong>Phase 3 (1 Month)</strong>: Rigorous testing, bug fixing, and user interface refinement.</li>
<li><strong>Phase 4 (Ongoing)</strong>: Deployment, user feedback collection, and continuous improvement through iterative development cycles.&nbsp;</li>
</ul>
<blockquote>
<p><em>This is a preliminary timeline and may be subject to change.</em></p>
</blockquote>
<h2>Conclusion</h2>
<p>Streamline LMS has the potential to become a game-changer in the online learning landscape. By empowering educators and fostering a more engaging learning experience for students, Streamline aims to contribute to a future of accessible and effective education for all.</p>
</textarea>
10 changes: 10 additions & 0 deletions modules/ROOT/examples/live-demos/exportpdf/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
tinymce.init({
selector: 'textarea#exportpdf',
height: '800px',
plugins: [
"exportpdf", "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
"help", "image", "insertdatetime", "link", "lists", "media",
"preview", "searchreplace", "table", "visualblocks",
],
toolbar: "undo redo | exportpdf | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
});
71 changes: 71 additions & 0 deletions modules/ROOT/examples/live-demos/exportword/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<textarea id="exportword">
<h1>Streamline - The Next-Gen Learning Management System (LMS)</h1>
<p>This document provides a comprehensive overview of the Streamline Learning Management System (LMS) project.</p>
<p><img src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" width="573" height="429"></p>
<p>By <a class="N2odk RZQOk eziW_ KHq0c Byk7y KHq0c" href="https://unsplash.com/@anete_lusina">Anete Lūsiņa</a> on <a href="https://unsplash.com">Unsplash</a></p>
<h2>Project Goals</h2>
<p>Streamline aims to revolutionize online learning by offering a robust and user-friendly platform for educators and learners alike. Our primary goals are:</p>
<ul>
<li><em><strong>To empower educators</strong></em> with intuitive tools for content creation, course management, and student assessment.&nbsp;</li>
<li><em><strong>To enhance the learning experience for students</strong></em> through engaging content delivery, interactive features, and personalized learning paths.</li>
<li><em><strong>To increase accessibility and scalability</strong></em> to cater to diverse learning needs and accommodate a growing user base.</li>
</ul>
<h2>System Features</h2>
<p>Streamline will be packed with features to streamline (pun intended) the learning process:</p>
<ul>
<li><strong>Content Management System (CMS)</strong>: A user-friendly interface for educators to create and upload various learning materials, including videos, documents, presentations, and interactive quizzes.</li>
<li><strong>Course Management Tools</strong>: Streamline allows educators to structure courses with clear learning objectives, organize content modules, and manage student enrollment.&nbsp;</li>
<li><strong>Interactive Learning Activities</strong>: The platform will incorporate gamification elements, discussion forums, collaborative assignments, and other interactive features to keep students engaged.&nbsp;</li>
<li><strong>Assessment &amp; Analytics</strong>: Streamline provides educators with tools to create quizzes, track student progress, generate reports, and identify areas for improvement.&nbsp;</li>
<li><strong>Personalized Learning Paths</strong>: The system will utilize machine learning algorithms to personalize learning recommendations and suggest relevant content based on individual student needs and progress.</li>
</ul>
<p><strong>Table 1: Streamline - Target User Groups</strong></p>
<table style="border-collapse: collapse; width: 100%;" border="1"><colgroup><col style="width: 50%;"><col style="width: 50%;"></colgroup>
<tbody>
<tr>
<td><strong>User Group</strong></td>
<td>Benefits</td>
</tr>
<tr>
<td><strong>Educators</strong></td>
<td>Easy content creation, efficient course management, valuable student insights.</td>
</tr>
<tr>
<td><strong>Learners</strong></td>
<td>Engaging learning experience, personalized learning paths, interactive collaboration.</td>
</tr>
<tr>
<td><strong>Administrators</strong></td>
<td>Scalable platform management, user access control, comprehensive reporting tools.</td>
</tr>
</tbody>
</table>
<h2><br>Technology Stack</h2>
<p>Streamline will leverage a robust technology stack to ensure performance, scalability, and security:</p>
<ul>
<li><strong>Front-End</strong>: ReactJS for a responsive and user-friendly interface.&nbsp;</li>
<li><strong>Back-End</strong>: Node.js for efficient server-side operations.&nbsp;</li>
<li><strong>Database</strong>: MongoDB for flexible and scalable data storage.&nbsp;</li>
<li><strong>Cloud Platform</strong>: Amazon Web Services (AWS) for reliable hosting and infrastructure.&nbsp;</li>
</ul>
<h2>Code Example&nbsp;</h2>
<p>Here's a simplified code snippet demonstrating how educators can create a multiple-choice question within the CMS:</p>
<h3>JavaScript</h3>
<p><code>const questionData = {</code><br><code>&nbsp; title: "What is the capital of France?",</code><br><code>&nbsp; options: [</code><br><code>&nbsp; &nbsp; "London",</code><br><code>&nbsp; &nbsp; "Paris", &nbsp;**Subscript for correct answer indicator**</code><br><code>&nbsp; &nbsp; "Berlin",</code><br><code>&nbsp; &nbsp; "Madrid"</code><br><code>&nbsp; ],</code><br><code>&nbsp; correctAnswer: 1</code><br><code>};</code></p>
<p><code>// Submit question data to the LMS backend for storage</code></p>
<blockquote>
<p><strong>Note</strong>: This is a basic example for illustration purposes. The actual code will involve API calls and more complex functionalities. (Normal body text with parenthetical information)</p>
</blockquote>
<h2>Project Timeline&nbsp;</h2>
<ul>
<li><strong>Phase 1 (2 Months)</strong>: System design, development of core functionalities, and front-end prototype creation.</li>
<li><strong>Phase 2 (3 Months)</strong>: Integration of advanced features like personalized learning and assessment tools.</li>
<li><strong>Phase 3 (1 Month)</strong>: Rigorous testing, bug fixing, and user interface refinement.</li>
<li><strong>Phase 4 (Ongoing)</strong>: Deployment, user feedback collection, and continuous improvement through iterative development cycles.&nbsp;</li>
</ul>
<blockquote>
<p><em>This is a preliminary timeline and may be subject to change.</em></p>
</blockquote>
<h2>Conclusion</h2>
<p>Streamline LMS has the potential to become a game-changer in the online learning landscape. By empowering educators and fostering a more engaging learning experience for students, Streamline aims to contribute to a future of accessible and effective education for all.</p>
</textarea>
10 changes: 10 additions & 0 deletions modules/ROOT/examples/live-demos/exportword/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
tinymce.init({
selector: 'textarea#exportword',
height: '800px',
plugins: [
"exportword", "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
"help", "image", "insertdatetime", "link", "lists", "media",
"preview", "searchreplace", "table", "visualblocks",
],
toolbar: "undo redo | exportword | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
});
23 changes: 21 additions & 2 deletions modules/ROOT/examples/live-demos/full-featured/example.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const isSmallScreen = window.matchMedia('(max-width: 1023.5px)').matches;

tinymce.init({
selector: 'textarea#full-featured',
plugins: 'ai preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link math media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker editimage help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable footnotes mergetags autocorrect typography advtemplate markdown revisionhistory',
plugins: 'importword exportword exportpdf ai preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link math media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker editimage help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable footnotes mergetags autocorrect typography advtemplate markdown revisionhistory',
tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
tinydrive_dropbox_app_key: 'YOUR_DROPBOX_APP_KEY',
tinydrive_google_drive_key: 'YOUR_GOOGLE_DRIVE_KEY',
Expand All @@ -26,7 +26,7 @@ tinymce.init({
}
},
menubar: 'file edit view insert format tools table tc help',
toolbar: "undo redo | revisionhistory | aidialog aishortcuts | blocks fontsizeinput | bold italic | align numlist bullist | link image | table math media pageembed | lineheight outdent indent | strikethrough forecolor backcolor formatpainter removeformat | charmap emoticons checklist | code fullscreen preview | save print | pagebreak anchor codesample footnotes mergetags | addtemplate inserttemplate | addcomment showcomments | ltr rtl casechange | spellcheckdialog a11ycheck", // Note: if a toolbar item requires a plugin, the item will not present in the toolbar if the plugin is not also loaded.
toolbar: "undo redo | importword exportword exportpdf | revisionhistory | aidialog aishortcuts | blocks fontsizeinput | bold italic | align numlist bullist | link image | table math media pageembed | lineheight outdent indent | strikethrough forecolor backcolor formatpainter removeformat | charmap emoticons checklist | code fullscreen preview | save print | pagebreak anchor codesample footnotes mergetags | addtemplate inserttemplate | addcomment showcomments | ltr rtl casechange | spellcheckdialog a11ycheck", // Note: if a toolbar item requires a plugin, the item will not present in the toolbar if the plugin is not also loaded.
autosave_ask_before_unload: true,
autosave_interval: '30s',
autosave_prefix: '{path}{query}-{id}-',
Expand Down Expand Up @@ -412,6 +412,25 @@ tinymce.init({
.catch(onerror);
});
},
exportpdf_converter_options: {
'format': 'Letter',
'margin_top': '1in',
'margin_right': '1in',
'margin_bottom': '1in',
'margin_left': '1in'
},
exportword_converter_options: {
'document': {
'size': 'Letter'
}
},
importword_converter_options: {
'formatting': {
'styles': 'inline',
'resets': 'inline',
'defaults': 'inline',
}
},
/*
The following settings require more configuration than shown here.
For information on configuring the mentions plugin, see:
Expand Down
23 changes: 21 additions & 2 deletions modules/ROOT/examples/live-demos/full-featured/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -414,7 +414,7 @@ tinymce.ScriptLoader.loadScripts(['https://cdn.jsdelivr.net/npm/faker@5/dist/fak

tinymce.init({
selector: 'textarea#full-featured',
plugins: 'ai preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link math media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker editimage help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable footnotes mergetags autocorrect typography advtemplate markdown revisionhistory',
plugins: 'ai preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link math media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker editimage help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable footnotes mergetags autocorrect typography advtemplate markdown revisionhistory importword exportword exportpdf',
editimage_cors_hosts: ['picsum.photos'],
tinydrive_token_provider: (success, failure) => {
success({ token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJqb2huZG9lIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.Ks_BdfH4CWilyzLNk8S2gDARFhuxIauLa8PwhdEQhEo' });
Expand All @@ -433,7 +433,7 @@ tinymce.ScriptLoader.loadScripts(['https://cdn.jsdelivr.net/npm/faker@5/dist/fak
}
},
menubar: 'file edit view insert format tools table tc help',
toolbar: "undo redo | revisionhistory | aidialog aishortcuts | blocks fontsizeinput | bold italic | align numlist bullist | link image | table math media pageembed | lineheight outdent indent | strikethrough forecolor backcolor formatpainter removeformat | charmap emoticons checklist | code fullscreen preview | save print | pagebreak anchor codesample footnotes mergetags | addtemplate inserttemplate | addcomment showcomments | ltr rtl casechange | spellcheckdialog a11ycheck", // Note: if a toolbar item requires a plugin, the item will not present in the toolbar if the plugin is not also loaded.
toolbar: "undo redo | importword exportword exportpdf | revisionhistory | aidialog aishortcuts | blocks fontsizeinput | bold italic | align numlist bullist | link image | table math media pageembed | lineheight outdent indent | strikethrough forecolor backcolor formatpainter removeformat | charmap emoticons checklist | code fullscreen preview | save print | pagebreak anchor codesample footnotes mergetags | addtemplate inserttemplate | addcomment showcomments | ltr rtl casechange | spellcheckdialog a11ycheck", // Note: if a toolbar item requires a plugin, the item will not present in the toolbar if the plugin is not also loaded.
autosave_ask_before_unload: true,
autosave_interval: '30s',
autosave_prefix: '{path}{query}-{id}-',
Expand Down Expand Up @@ -565,6 +565,25 @@ tinymce.ScriptLoader.loadScripts(['https://cdn.jsdelivr.net/npm/faker@5/dist/fak
}
],
ai_request,
exportpdf_converter_options: {
'format': 'Letter',
'margin_top': '1in',
'margin_right': '1in',
'margin_bottom': '1in',
'margin_left': '1in'
},
exportword_converter_options: {
'document': {
'size': 'Letter'
}
},
importword_converter_options: {
'formatting': {
'styles': 'inline',
'resets': 'inline',
'defaults': 'inline',
}
},
revisionhistory_fetch: fetchRevisions,
revisionhistory_author: {
id: 'john.doe',
Expand Down
Loading

0 comments on commit 1652b64

Please sign in to comment.