blob: 9cf8ae52e5bac0fef75be917f3ad9a7b12a7b613 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1">
<title>Plugins examples</title>
<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/contenu.css">
<link rel="stylesheet" type="text/css" href="css/katex.min.css">
<style>
html {
height: 100vh;
width: 100vv;
overflow-y: hidden;
}
body {
display: grid;
grid-template-columns: 50% 50%;
grid-template-row: 100vv;
grid-template-areas: "edit preview";
height: 100vh;
width: 100vv;
margin: 0;
padding: 0;
overflow-y: hidden;
overflow-x: hidden;
}
#edit {
grid-area: edit;
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
}
#edit-zone{
overflow-x: hidden;
}
#preview {
margin-left: 5px;
grid-area: preview;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
</head>
<body>
<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>
let edit = document.getElementById('edit-zone');
let preview = document.getElementById('preview');
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;
}
});
}
}, 500);
edit.addEventListener('input', () => {
modification = true;
}, false);
</script>
</body>
</html>
|
