aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorache <ache@ache.one>2018-04-30 17:17:41 +0200
committerache <ache@ache.one>2018-04-30 17:17:41 +0200
commit1535d19c8bca7a43952010fb896ebf7f9b6f5a9a (patch)
treedf0d698f46c8b3d39b7d694c1d46535308ced1b0
parentUnify css with ache.one (diff)
Example of the puglins updated
Diffstat
-rw-r--r--public/edit.html111
1 files changed, 98 insertions, 13 deletions
diff --git a/public/edit.html b/public/edit.html
index 204b537..1f35495 100644
--- a/public/edit.html
+++ b/public/edit.html
@@ -4,13 +4,13 @@
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1">
- <title>hmarkdown example</title>
+ <title>Plugins examples</title>
- <script src="js/script.js"></script>
<script src="js/qcm.js"></script>
<script src="js/hmd.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
- <link rel="stylesheet" type="text/css" href="css/rainbow.css">
+ <link rel="stylesheet" type="text/css" href="http://ache.one/design/style.css">
+ <link rel="stylesheet" type="text/css" href="http://ache.one/design/contenu.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" crossorigin="anonymous">
<style>
@@ -41,6 +41,7 @@ body {
overflow-x: hidden;
}
#preview {
+ margin-left: 5px;
grid-area: preview;
overflow-y: scroll;
overflow-x: hidden;
@@ -48,20 +49,108 @@ body {
</style>
</head>
<body>
- <div id="edit"><div contenteditable="true" id="edit-zone">Yeah x2</div></div>
- <div id="preview" contenteditable="false">Yeah ! </div>
+ <div id="edit"><div contenteditable="true" id="edit-zone"> </div></div>
+ <div id="preview" class="view" contenteditable="false">If you can read this line more thant <em>15s</em> there is a bug in the matrix.</div>
<!-- This is the bundle generated by rollup.js -->
- <script>
+<script>
let edit = document.getElementById('edit-zone');
let preview = document.getElementById('preview');
-let modification = false;
+let modification = true;
+
+
+edit.innerText = `Plugins presentation
+=================
+
+This page is an example of using [remark][remark] with plugins that I created. These plugins are used to parse [lines][remark-line-input] of [text](remark-text-input), [selection boxes][remark-select] and even [MCQs][remark-mcq].
+
+The goal of this project is to propose a set of plugins allowing to create **exercises** easily.
+
+To first let's see somes examples !
+
+Example of exercises
+--------------------
+
+The 151th pokémon [__151th pokémon__]{#pokemon oninput="pokemon(this)"} is one of the two pokemons that can use transform attack (the other one is [ Pikachu | Ditto | Mewtow | Eevee |v] ).
+
+
+Line edit
+---------
+
+You can use line edit like that :
+
+Login : [__email or username__]{#login}
+Passwd: [__Passwd__]{#password type=password}
+
+Text edit
+--------
+
+It's also easy to use text edit :
+
+[______
+
+This is a text zone
+
+______]{rows=13 cols=30}
+
+
+Selection box
+-------------
+
+To use a selection box, just write it in the markdown file.
+
+[ Mario | Peach | Luigi |v]
+
+[remark]: https://github.com/remarkjs/remark "Github of the remark project"
+[remark-line-input]: https://www.npmjs.com/package/remark-line-input
+[remark-text-input]: https://www.npmjs.com/package/remark-text-input
+[remark-select]: https://www.npmjs.com/package/remark-select
+
+
+<script>
+ if( !pokemon ) {
+function pokemon( elem ) {
+ if( elem.value != 'mew' ) {
+ if( elem.classList.contains('valid') )
+ elem.classList.remove('valid')
+ elem['className'] = 'invalid';
+ }else{
+ if( elem.classList.contains('invalid') )
+ elem.classList.remove('invalid')
+ elem.classList.add('valid')
+ }
+}}` + `</scr` + `ipt>`;
+
+function nodeScriptReplace(node) {
+ if (node.tagName === 'SCRIPT') {
+ node.parentNode.replaceChild(nodeScriptClone(node), node);
+ } else if (node.children) {
+ for (const child of node.children) {
+ nodeScriptReplace(child);
+ }
+ }
+
+ return node;
+}
+function nodeScriptClone(node) {
+ const script = document.createElement('script');
+
+ script.text = node.innerHTML;
+ [...node.attributes].forEach(attr => {
+ script.setAttribute(attr.name, attr.value);
+ });
+ return script;
+}
+
+
+
let interval = setInterval( () => {
if( modification ) {
hmd(edit.innerText, (err, file) => {
let finalString = String(file);
if( finalString ) {
preview.innerHTML = String(file);
+ nodeScriptReplace(preview);
modification = false;
}
});
@@ -70,14 +159,10 @@ let interval = setInterval( () => {
edit.addEventListener('input', () => {
modification = true;
- /*
- edit.style.width = '';
- edit.style.height = '';
- if(edit.scrollWidth > edit.clientWidth) edit.style.width = edit.scrollWidth + 'px';
- if(exit.scrollHeight > edit.clientHeight) edit.style.height = edit.scrollHeight + 'px';
- */
}, false);
+
+
</script>
</body>
</html>
By 🦊 with love. ❤