Update everything

10 files changed, 114 insertions, 3 deletions

diff --git a/app.js b/app.js
index f54770c..745c896 100644
--- a/app.js
+++ b/app.js
@@ -22,6 +22,8 @@ const kbd = require('remark-kbd');
 const math = require('remark-math');
 const mermaid = require('remark-mermaid-simple');
 const highlight = require('remark-highlight.js');
+const sb = require('remark-special-box');
+const qcm = require('remark-qcm');
 
 
 const useLandScript = " <script> mermaid.contentLoaded(); </script>"
@@ -39,6 +41,8 @@ app.get('/' + path + '/*', function(req, res) {
       .use(kbd)
       .use(math)
       .use(mermaid)
+      .use(sb)
+      .use(qcm)
       .use(highlight)
       .use(html)
       .process(data, function (err, file) {
@@ -56,9 +60,20 @@ app.get('/data', function(req, res) {
 
 app.get('/img/*', function (req, res) {
     console.log("[" + new Date() + "] > " + "200 - " + req.url);
-    var img = fs.readFileSync(req.url.replace('/img', path));
-    res.writeHead(200, {'Content-Type': 'image/gif' });
-    res.end(img, 'binary');
+    if( path == '/img/ic_info_black_48px.svg' ||
+        path == '/imr/ic_error_black_48px.svg' ||
+        path == '/imr/ic_good_black_48px.svg' ||
+        path == '/imr/ic_bad_black_48px.svg' ||
+        path == '/imr/ic_comment_black_48px.svg' ||
+        path == '/imr/ic_help_black_48px.svg' ) {
+      const img = fs.readFileSync(path);
+      res.writeHead(200, {'Content-Type': 'image/svg' });
+      res.end(img, 'binary');
+    }else {
+      const img = fs.readFileSync(req.url.replace('/img', path));
+      res.writeHead(200, {'Content-Type': 'image/gif' });
+      res.end(img, 'binary');
+    }
 });
 
 app.get('/', function(req, res) {
diff --git a/public/css/style.css b/public/css/style.css
index e63e59a..2319188 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -31,3 +31,63 @@ blockquote {
     padding: 1px 2%;
     border-left: 5px solid #ccc;
 }
+
+.special-box {
+    background: #eee7da;
+    margin: 12.5px 12.5px;
+    padding: 10px 0 10px 95px; 
+    color: #424242;
+    min-height: 60px;
+}
+.special-box::before{
+    content: "";
+    display: block;
+    width: 48px;
+    height: 48px;
+    background-repeat: no-repeat;
+    margin: 0px 0 -48px -70px;
+}
+.information{
+    background: #daeaee;
+}
+.information::before{
+    background-image: url("/img/ic_info_black_48px.svg"); 
+}
+.comment{
+    background: #eea;
+}
+.comment::before{
+    background-image: url("/img/ic_comment_black_48px.svg"); 
+}
+.attention{
+    background: #eee7da;
+}
+.attention::before{
+    background-image: url("/img/ic_error_black_48px.svg"); 
+}
+.question{
+    background: #e2daee;
+}
+.question::before{
+    background-image: url("/img/ic_help_black_48px.svg"); 
+}
+.good{
+    background: #aea;
+}
+.good::before{
+    background-image: url("/img/ic_good_black_48px.svg"); 
+}
+.bad{
+    background: #eaa;
+}
+.bad::before{
+    background-image: url("/img/ic_bad_black_48px.svg"); 
+}
+.secret {
+    background: #eee;
+    padding: 10px 0 10px 15px;
+    min-height: 20px;
+}
+.hiden_block_quote {
+    display: none;
+}
diff --git a/public/img/ic_bad_black_48px.svg b/public/img/ic_bad_black_48px.svg
new file mode 100644
index 0000000..0b02d88
--- /dev/null
+++ b/public/img/ic_bad_black_48px.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg fill="#000" xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 24 24 24" width="48" version="1.1" >
+  <path d="M 12,26 C 6.47,26 2,30.47 2,36 2,41.53 6.47,46 12,46 17.53,46 22,41.53 22,36 22,30.47 17.53,26 12,26 Z M 17,39.59 15.59,41 12,37.41 8.41,41 7,39.59 10.59,36 7,32.41 8.41,31 12,34.59 15.59,31 17,32.41 13.41,36 Z" /> <path d="M 0,24 H 24 V 48 H 0 Z" style="fill:none" />
+</svg>
diff --git a/public/img/ic_comment_black_48px.svg b/public/img/ic_comment_black_48px.svg
new file mode 100644
index 0000000..e0d89e2
--- /dev/null
+++ b/public/img/ic_comment_black_48px.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="fill:#000" version="1.1" width="48" viewBox="0 24 24 24" height="48">
+  <path d="M 20,26 H 4 c -1.1,0 -2,0.9 -2,2 v 12 c 0,1.1 0.9,2 2,2 h 14 l 4,4 V 28 c 0,-1.1 -0.9,-2 -2,-2 z M 18,38 H 6 v -2 h 12 z m 0,-3 H 6 v -2 h 12 z m 0,-3 H 6 v -2 h 12 z" />
+  <path style="fill:none" d="M 0,24 H 24 V 48 H 0 Z" />
+</svg>
diff --git a/public/img/ic_error_black_48px.svg b/public/img/ic_error_black_48px.svg
new file mode 100644
index 0000000..d8eb238
--- /dev/null
+++ b/public/img/ic_error_black_48px.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="fill:#000" width="48" viewBox="0 24 24 24" height="48">
+  <path style="fill:none" d="M 0,24 H 24 V 48 H 0 Z" />
+  <path d="M 12,26 C 6.48,26 2,30.48 2,36 2,41.52 6.48,46 12,46 17.52,46 22,41.52 22,36 22,30.48 17.52,26 12,26 Z m 1,15 h -2 v -2 h 2 z m 0,-4 h -2 v -6 h 2 z" />
+</svg>
diff --git a/public/img/ic_good_black_48px.svg b/public/img/ic_good_black_48px.svg
new file mode 100644
index 0000000..0995688
--- /dev/null
+++ b/public/img/ic_good_black_48px.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="fill:#000" width="48" viewBox="0 24 24 24" height="48">
+  <path style="fill:none" d="M 0,24 H 24 V 48 H 0 Z" />
+  <path d="M 12,26 C 6.48,26 2,30.48 2,36 2,41.52 6.48,46 12,46 17.52,46 22,41.52 22,36 22,30.48 17.52,26 12,26 Z M 10,41 5,36 6.41,34.59 10,38.17 17.59,30.58 19,32 Z" />
+</svg>
diff --git a/public/img/ic_help_black_48px.svg b/public/img/ic_help_black_48px.svg
new file mode 100644
index 0000000..c92b2ad
--- /dev/null
+++ b/public/img/ic_help_black_48px.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="fill:#000" width="48" viewBox="0 24 24 24" height="48">
+  <path style="fill:none" d="M 0,24 H 24 V 48 H 0 Z" />
+  <path d="M 12,26 C 6.48,26 2,30.48 2,36 2,41.52 6.48,46 12,46 17.52,46 22,41.52 22,36 22,30.48 17.52,26 12,26 Z m 1,17 h -2 v -2 h 2 z m 2.07,-7.75 -0.9,0.92 C 13.45,36.9 13,37.5 13,39 h -2 v -0.5 c 0,-1.1 0.45,-2.1 1.17,-2.83 l 1.24,-1.26 C 13.78,34.05 14,33.55 14,33 c 0,-1.1 -0.9,-2 -2,-2 -1.1,0 -2,0.9 -2,2 H 8 c 0,-2.21 1.79,-4 4,-4 2.21,0 4,1.79 4,4 0,0.88 -0.36,1.68 -0.93,2.25 z" />
+</svg>
diff --git a/public/img/ic_info_black_48px.svg b/public/img/ic_info_black_48px.svg
new file mode 100644
index 0000000..266453e
--- /dev/null
+++ b/public/img/ic_info_black_48px.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="fill:#000" width="48" viewBox="0 24 24 24" height="48">
+  <path style="fill:none" d="M 0,24 H 24 V 48 H 0 Z" />
+  <path d="M 12,26 C 6.48,26 2,30.48 2,36 2,41.52 6.48,46 12,46 17.52,46 22,41.52 22,36 22,30.48 17.52,26 12,26 Z m 1,15 h -2 v -6 h 2 z m 0,-8 h -2 v -2 h 2 z" />
+</svg>
diff --git a/public/index.html b/public/index.html
index f5a3c4a..1a476fa 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,6 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML-full"></script>
     <script src="js/script.js"></script>
+    <script src="js/qcm.js"></script>
     <script src="./mermaid.min.js"></script>
 
 
diff --git a/public/js/qcm.js b/public/js/qcm.js
index c81fe8f..a0eeee2 100644
--- a/public/js/qcm.js
+++ b/public/js/qcm.js
@@ -12,6 +12,10 @@ function check(id/*, tab*/) {
     const fieldQCM = document.getElementById(id);
 
     Array.from(fieldQCM.getElementsByTagName('INPUT')).forEach((input) => {
+        if( input.type != 'checkbox' )
+          return;
+
+
         const label = document.querySelector("label[for='" + input.id + "']");
         if (input.checked) {
             Array.from(label.getElementsByClassName('hiden_block_quote')).forEach(((child) => {
@@ -24,6 +28,7 @@ function check(id/*, tab*/) {
             }
                 break;
             case '=': {
+                console.log("Good")
                 label.style.color = '#00BB00';
             }
                 break;
@@ -33,6 +38,7 @@ function check(id/*, tab*/) {
             }
                 break;
             default: {
+                console.log("Oups")
                 // empty
             }
         }