Hidden answer component -faulty functionality

amd/src/components.js

@@ -263,6 +263,22 @@ const components = [
             " Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
         variants: ["full-width"],
     },
+    {
+        id: "18",
+        name: "hiddenanswer",
+        type: "evaluative",
+        imageClass: "c4l-hiddenanswer-icon",
+        code:
+            `<p class="c4l-spacer"></p><div class="c4lv-hiddenanswer {{VARIANTS}}" aria-label="{{#hiddenanswer}}">
+            <button class="btn btn-secondary show-hiddenanswer" type="button"  data-toggle="collapse"
+            data-target="{{@ID}}" aria-expanded="false" aria-controls="{{@ID}}">{{#showanswer}}
+            </button><div id="{{@ID}}" class="collapse">
+            <div class="card card-body hiddenanswer-content">{{PLACEHOLDER}}</div></div>`,
+        text:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus." +
+            " Praesent dictum in velit sed dapibus.",
+        variants: ["full-width"],
+    },
 ];
 
 export default {

lang/en/tiny_c4l.php

@@ -53,6 +53,7 @@
 $string['gradingvalue'] = 'Grading value';
 $string['helper'] = 'Helper';
 $string['helplinktext'] = 'C4L helper';
+$string['hiddenanswer'] = 'Hidden answer';
 $string['inlinetag'] = 'Inline tag';
 $string['keyconcept'] = 'Key concept';
 $string['learningoutcomes'] = 'Learning outcomes';
@@ -69,5 +70,6 @@
 $string['quote'] = 'Quote';
 $string['readingcontext'] = 'Reading context';
 $string['reminder'] = 'Reminder';
+$string['showanswer'] = 'Show answer';
 $string['tag'] = 'Tag';
 $string['tip'] = 'Tip';

scss/_buttons.scss

@@ -287,6 +287,14 @@
     content: url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback_icon]]);
 }
 
+.c4l-hiddenanswer-icon::before {
+    content: '';
+}
+
+.c4l-hiddenanswer-icon .c4l-button-text::before {
+    content: url([[pix:tiny_c4l|c4l_hiddenanswer_icon]]);
+}
+
 /* Helper components buttons */
 
 .c4l-allpurposecard-icon::before {

scss/_components.scss

@@ -39,7 +39,8 @@
     }
 
     + .c4l-readingcontext,
-    + .c4lv-readingcontext {
+    + .c4lv-readingcontext,
+    + .c4lv-hiddenanswer {
         margin-top: 16px;
         margin-bottom: 4px;
     }
@@ -769,3 +770,47 @@
         color: #497ae9;
     }
 }
+
+/* Hidden answer */
+
+.c4lv-hiddenanswer {
+    .show-hiddenanswer {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 36px;
+    }
+
+    .btn-secondary.show-hiddenanswer {
+        color: #135FF8;
+        background-color: #EEF3FF;
+        font-weight: 500;
+    }
+
+    .btn-secondary.show-hiddenanswer:not(:disabled):not(.disabled):active,
+    .btn-secondary.show-hiddenanswer:not(:disabled):not(.disabled).active, 
+    .show>.btn-secondary.show-hiddenanswer.dropdown-toggle {
+        color: #135FF8;
+    }
+
+    .hiddenanswer-content {
+        min-width: 200px;
+        max-width: 75%;
+        background-color: #fff;
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+        box-sizing: border-box;
+        margin: 0 auto 36px auto;
+        padding: 30px 40px 32px 40px;
+        font-family: sans-serif;
+        border: none;
+
+        p {
+            font-size: 16px;
+            line-height: 23px;
+        }
+
+        p:last-of-type {
+            margin-bottom: 0;
+        }
+    }
+}

scss/_responsive.scss

@@ -76,7 +76,8 @@
     }
 
     .c4l-readingcontext,
-    .c4lv-readingcontext {
+    .c4lv-readingcontext,
+    .c4lv-hiddenanswer .hiddenanswer-content {
         max-width: 88%;
     }
 
@@ -119,7 +120,8 @@
     .c4l-allpurposecard,
     .c4lv-allpurposecard,
     .c4l-learningoutcomes,
-    .c4lv-learningoutcomes {
+    .c4lv-learningoutcomes,
+    .c4lv-hiddenanswer .hiddenanswer-content {
         max-width: 75%;
     }
 
@@ -146,7 +148,8 @@
     .c4l-quote.c4l-full-width-variant,
     .c4lv-quote.c4l-full-width-variant,
     .c4l-example.c4l-full-width-variant,
-    .c4lv-example.c4l-full-width-variant {
+    .c4lv-example.c4l-full-width-variant,
+    .c4lv-hiddenanswer.c4l-full-width-variant .hiddenanswer-content {
         max-width: 100%;
     }
 

scss/_variants.scss

@@ -23,7 +23,8 @@
 
 .c4l-readingcontext.c4l-full-width-variant,
 .c4l-example.c4l-full-width-variant,
-.c4l-expectedfeedback.c4l-full-width-variant {
+.c4l-expectedfeedback.c4l-full-width-variant,
+.c4l-hiddenanswer.c4l-full-width-variant .hiddenanswer-content {
     /* 100% - 6% due to the shadow */
     max-width: 94%;
 }
@@ -54,7 +55,8 @@
 
 .c4lv-readingcontext.c4l-full-width-variant,
 .c4lv-example.c4l-full-width-variant,
-.c4lv-expectedfeedback.c4l-full-width-variant {
+.c4lv-expectedfeedback.c4l-full-width-variant,
+.c4lv-hiddenanswer.c4l-full-width-variant .hiddenanswer-content {
     /* 100% - 6% due to the shadow */
     max-width: 94%;
 }

settings.php

@@ -48,7 +48,8 @@
             'tag' => get_string('tag', 'tiny_c4l'),
             'inlinetag' => get_string('inlinetag', 'tiny_c4l'),
             'attention' => get_string('attention', 'tiny_c4l'),
-            'allpurposecard' => get_string('allpurposecard', 'tiny_c4l')
+            'allpurposecard' => get_string('allpurposecard', 'tiny_c4l'),
+            'hiddenanswer' => get_string('hiddenanswer', 'tiny_c4l')
         ];
         $name = get_string('aimedatstudents', 'tiny_c4l');
         $desc = get_string('aimedatstudents_desc', 'tiny_c4l');