haxtheweb/issues#1334 haxtheweb/issues#1326

haxtheweb · May 10, 2024 · 638de2f · 638de2f
1 parent 1a6d2ec
commit 638de2f
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 92 deletions.
diff --git a/elements/d-d-d/lib/DDDStyles.js b/elements/d-d-d/lib/DDDStyles.js
@@ -1483,6 +1483,20 @@ export const DDDReset = css`
   p {
     margin: var(--ddd-spacing-6) 0;
   }
+  dl {
+    padding: var(--ddd-spacing-6);
+    margin: 0;
+    border: var(--ddd-border-sm);
+  }
+  dt {
+    font-weight: var(--ddd-font-weight-bold);
+    font-size: var(--ddd-theme-h6-font-size);
+  }
+  dd {
+    margin-bottom: var(--ddd-spacing-4);
+    margin-inline-start: var(--ddd-spacing-8);
+  }
+
   p[data-accent],
   blockquote[data-accent],
   ol[data-accent],
@@ -1979,10 +1993,7 @@ export const DDDReset = css`
     display: flex;
     font-size: var(--ddd-theme-h4-font-size);
     font-weight: var(--ddd-font-weight-bold);
-    color: light-dark(
-      var(--ddd-theme-default-nittanyNavy),
-      var(--ddd-theme-default-linkLight)
-    );
+    color: light-dark(var(--lowContrast-override, var(--ddd-theme-primary,var(--ddd-theme-default-nittanyNavy))), var(--ddd-theme-default-linkLight));
     cursor: pointer;
     text-wrap: wrap;
     align-items: center;
@@ -1997,10 +2008,7 @@ export const DDDReset = css`
     content: "+";
     margin-left: auto;
     text-align: right;
-    color: light-dark(
-      var(--ddd-theme-default-link),
-      var(--ddd-theme-default-linkLight)
-    );
+    color: light-dark(var(--lowContrast-override, var(--ddd-theme-primary, var(--ddd-theme-default-nittanyNavy))), var(--ddd-theme-default-linkLight));
     font-weight: var(--ddd-font-weight-regular);
     font-size: var(--ddd-font-size-m);
     line-height: 1;
@@ -2020,23 +2028,17 @@ export const DDDReset = css`
     opacity: 0.5;
   }
   details[open] > summary {
-    color: light-dark(
-      var(--ddd-theme-default-link),
-      var(--ddd-theme-default-linkLight)
-    );
+    color: light-dark(var(--lowContrast-override, var(--ddd-theme-primary, var(--ddd-theme-default-nittanyNavy))), var(--ddd-theme-default-linkLight));
+    filter: saturate(1.5);
   }
-  summary:focus,
-  summary:hover,
   details[open] > summary {
-    background-color: light-dark(var(--ddd-theme-default-limestoneMaxLight), var(--ddd-theme-default-nittanyNavy));
+    background-color: light-dark(var(--ddd-theme-default-limestoneMaxLight), var(--ddd-theme-default-potentialMidnight));
   }
-  details[open] > summary::after {
-    content: "--";
-    text-wrap: nowrap;
-    font-size: var(--ddd-font-size-m);
-    letter-spacing: -1.8px;
-    padding-right: 2px;
+  details summary:focus,
+  details summary:hover {
+    background-color: light-dark(var(--ddd-theme-default-limestoneLight), var(--ddd-theme-default-nittanyNavy));
   }
+
   code {
     transition: all 0.3s ease 0s;
     display: inline-block;

diff --git a/elements/hax-cloud/demo/dist/dev/appstore.json b/elements/hax-cloud/demo/dist/dev/appstore.json
@@ -639,6 +639,7 @@
     "simple-tags": "@lrnwebcomponents/simple-fields/lib/simple-tags.js",
     "flash-card": "@lrnwebcomponents/flash-card/flash-card.js",
     "sorting-question": "@lrnwebcomponents/sorting-question/sorting-question.js",
+    "tagging-question": "@lrnwebcomponents/tagging-question/tagging-question.js",
     "twitter-embed": "@lrnwebcomponents/twitter-embed/twitter-embed.js",
     "self-check": "@lrnwebcomponents/self-check/self-check.js",
     "course-model": "@lrnwebcomponents/course-model/course-model.js",

diff --git a/elements/hax-cloud/lib/appstore.json b/elements/hax-cloud/lib/appstore.json
@@ -639,6 +639,7 @@
     "simple-tags": "@lrnwebcomponents/simple-fields/lib/simple-tags.js",
     "flash-card": "@lrnwebcomponents/flash-card/flash-card.js",
     "sorting-question": "@lrnwebcomponents/sorting-question/sorting-question.js",
+    "tagging-question": "@lrnwebcomponents/tagging-question/tagging-question.js",
     "twitter-embed": "@lrnwebcomponents/twitter-embed/twitter-embed.js",
     "self-check": "@lrnwebcomponents/self-check/self-check.js",
     "course-model": "@lrnwebcomponents/course-model/course-model.js",

diff --git a/elements/haxcms-elements/demo/dist/dev/appstore.json b/elements/haxcms-elements/demo/dist/dev/appstore.json
@@ -647,6 +647,7 @@
     "simple-tags": "@lrnwebcomponents/simple-fields/lib/simple-tags.js",
     "flash-card": "@lrnwebcomponents/flash-card/flash-card.js",
     "sorting-question": "@lrnwebcomponents/sorting-question/sorting-question.js",
+    "tagging-question": "@lrnwebcomponents/tagging-question/tagging-question.js",
     "twitter-embed": "@lrnwebcomponents/twitter-embed/twitter-embed.js",
     "self-check": "@lrnwebcomponents/self-check/self-check.js",
     "course-model": "@lrnwebcomponents/course-model/course-model.js",

diff --git a/elements/haxcms-elements/lib/core/haxcms-site-builder.js b/elements/haxcms-elements/lib/core/haxcms-site-builder.js
@@ -609,11 +609,14 @@ class HAXCMSSiteBuilder extends I18NMixin(LitElement) {
         store.cmsSiteEditor.haxCmsSiteEditorUIElement &&
         store.cmsSiteEditor.haxCmsSiteEditorUIElement.shadowRoot
       ) {
-        const editbtn =
+        // delay since it slides in
+        setTimeout(() => {
+          const editbtn =
           store.cmsSiteEditor.haxCmsSiteEditorUIElement.shadowRoot.querySelector(
-            "#editbutton",
+            "#editbutton"
           );
-        editbtn.dataPulse = "1";
+          editbtn.dataPulse = "1";          
+        }, 300);
       }
       // try to evaluate typing in merlin
       if (

diff --git a/elements/multiple-choice/lib/QuestionElement.js b/elements/multiple-choice/lib/QuestionElement.js
@@ -385,10 +385,10 @@ export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {
           min-width: 160px;
           padding: var(--ddd-spacing-8);
           border: var(--ddd-border-md);
-          background-color: var(--simple-colors-default-theme-accent-1);
-          border-radius: var(--ddd-radius-xs);
+          border-radius: var(--ddd-radius-sm);
+          box-shadow: var(--ddd-boxShadow-sm);
+          background-color: light-dark(var(--ddd-theme-accent), transparent);
           transition: all 0.3s ease-in-out;
-          color: var(--simple-colors-default-theme-grey-12);
           --simple-toolbar-button-border-color: var(
             --simple-colors-default-theme-grey-4
           );
@@ -437,6 +437,13 @@ export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {
           box-shadow: var(--ddd-boxShadow-sm);
           border-color: black;
         }
+        p {
+          padding: 0;
+          margin: 0;
+        }
+        details p {
+          padding: var(--ddd-spacing-4);
+        }
         ul {
           list-style: none;
           padding: 0;
@@ -485,8 +492,8 @@ export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {
         border-radius: var(--ddd-radius-xs);
       }
       simple-toolbar-button {
-        background-color: light-dark(var(--ddd-theme-default-link), var(--ddd-theme-default-linkLight));
-        color: light-dark(white, black);
+        background-color: var(--ddd-theme-primary, var(--ddd-theme-default-link));
+        color: var(--lowContrast-override, var(--ddd-theme-bgContrast, black));
       }
       simple-toolbar-button[disabled] {
         background-color: light-dark(var(--ddd-theme-default-limestoneLight), var(--ddd-theme-default-slateGray));
@@ -515,27 +522,27 @@ export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {
       simple-fields-field::part(option-inner) {
         position: absolute;
         right: 0px;
-        color: light-dark(var(--ddd-theme-default-link), var(--ddd-theme-default-linkLight));
+        color: light-dark(var(--ddd-theme-primary, var(--ddd-theme-default-link)), var(--ddd-theme-default-linkLight));
         font-family: var(--ddd-font-navigation);
         font-size: var(--ddd-font-size-xs);
         bottom: 50%;
         top: 50%;
         padding: 0px;
         margin: 0px;
       }
-        ul,
-        ol {
-          gap: var(--ddd-spacing-4);
-        }
-        simple-icon {
-          display: inline-flex;
-        }
-        .feedback {
-          margin: var(--ddd-spacing-3) 0;
-          font-size: var(--ddd-font-size-m);
-          font-weight: bold;
-          text-align: center;
-        }
+
+      h4 {
+        color: light-dark(var(--ddd-theme-primary, var(--ddd-theme-default-link)), var(--ddd-theme-default-linkLight));
+      }
+      simple-icon {
+        display: inline-flex;
+      }
+      .feedback {
+        margin: var(--ddd-spacing-3) 0;
+        font-size: var(--ddd-font-size-sm);
+        font-weight: bold;
+        text-align: center;
+      }
       `,
     ];
   }

diff --git a/elements/tagging-question/demo/index.html b/elements/tagging-question/demo/index.html
@@ -15,11 +15,25 @@
     <style is="custom-style" include="demo-pages-shared-styles"></style>
   </head>
   <body>
+    <tagging-question question="How would you describe... this..?" data-primary="20" data-accent="3">
+      <img slot="content" src="https://btopro.com/files/i-developed.jpg" />
+      <input value="Huey" data-unselected="Good job reading, some people would have missed this!" data-selected="This name does not start with an D, it starts with H silly Goose">
+      <input correct value="Duey" data-selected="Pretty easy there, obviously has a D in it" data-unselected="4 letters, focus on the 1st one">
+      <input correct value="Daffy" data-selected="You knew it" data-unselected="Are you serious... look at the letter!">
+      <input correct value="Donald" data-selected="The OP duck in disney">
+      <input value="dfsdfs" data-selected="The OP duck in disney">
+      <input value="h4" data-selected="The OP duck in disney">
+      <input value="ghj" data-selected="The OP duck in disney">
+      <input value="hgj" data-selected="The OP duck in disney">
+      <input value="Donghfhald" data-selected="The OP duck in disney">
+      <input value="df" data-selected="The OP duck in disney">
+      <input value="jkjhkhjk" data-selected="The OP duck in disney">
+    </tagging-question>
     <div class="vertical-section-container centered">
       <h3>Basic tagging-question demo</h3>
       <demo-snippet>
         <template>
-          <tagging-question question="How would you describe... this..?">
+          <tagging-question question="How would you describe... this..?" data-primary="1" data-accent="4">
             <img slot="content" src="https://btopro.com/files/i-developed.jpg" />
             <input value="Huey" data-unselected="Good job reading, some people would have missed this!" data-selected="This name does not start with an D, it starts with H silly Goose">
             <input correct value="Duey" data-selected="Pretty easy there, obviously has a D in it" data-unselected="4 letters, focus on the 1st one">

diff --git a/elements/tagging-question/lib/tagging-question.haxProperties.json b/elements/tagging-question/lib/tagging-question.haxProperties.json
@@ -6,14 +6,17 @@
   "canScale": true,
   "canEditSource": true,
   "contentEditable": false,
+  "designSystem": {
+    "card": true,
+    "primary": true,
+    "accent": true
+  },
   "gizmo": {
-    "title": "tagging question",
-    "description": "",
-    "icon": "icons:android",
+    "title": "Tagging question",
+    "description": "Select tags to answer the question",
+    "icon": "icons:line-style",
     "color": "purple",
-    "tags": [
-      "Other"
-    ],
+    "tags": ["Instructional", "self check", "assessment", "tag"],
     "handles": [],
     "meta": {
       "author": "HAXTheWeb core team"
@@ -34,8 +37,11 @@
   "demoSchema": [
     {
       "tag": "tagging-question",
-      "content": "",
-      "properties": {}
+      "content": "<input correct value=\"DingDingDing\"/><input correct value=\"PaPaPower\"/><input value=\"Moo\"/>",
+      "properties": {
+        "question": "What does the fox say?",
+        "data-accent": "2"
+      }
     }
   ]
 }
diff --git a/elements/tagging-question/src/tagging-question.js b/elements/tagging-question/src/tagging-question.js
@@ -30,8 +30,6 @@ class TaggingQuestion extends QuestionElement {
       css`
         :host {
           display: block;
-          border-radius: var(--ddd-radius-sm);
-          box-shadow: var(--ddd-boxShadow-sm);
         }
         .tag-container {
           position: relative;
@@ -58,23 +56,24 @@ class TaggingQuestion extends QuestionElement {
           flex-wrap: wrap;
           justify-content: center;
           overflow-y: auto;
-          gap: var(--ddd-spacing-2);
+          gap: var(--ddd-spacing-4);
           min-height: var(--ddd-spacing-18);
           margin-bottom: var(--ddd-spacing-5);
           padding: var(--ddd-spacing-15);
           border: var(--ddd-border-sm);
           border-radius: var(--ddd-radius-sm);
           box-sizing: border-box;
-          background-color: var(--simple-colors-default-theme-grey-2);
+          background-color: light-dark(var(--simple-colors-default-theme-grey-2),var(--simple-colors-default-theme-grey-10));
         }
 
         #possible-container {
           display: flex;
           padding: var(--ddd-spacing-3);
+          border-radius: var(--ddd-radius-sm);
           border: var(--ddd-border-xs);
           flex-wrap: wrap;
           justify-content: center;
-          gap: var(--ddd-spacing-2);
+          gap: var(--ddd-spacing-4);
           min-height: var(--ddd-spacing-12);
         }
 
@@ -88,29 +87,26 @@ class TaggingQuestion extends QuestionElement {
         }
 
         .tag-option.correct {
-          outline: 2px solid var(--simple-colors-default-theme-green-7);
+          outline: 4px solid var(--ddd-theme-default-opportunityGreen);
         }
 
         .tag-option.incorrect {
-          outline: 2px solid var(--simple-colors-default-theme-red-7);;
+          outline: 4px solid var(--ddd-theme-default-original87Pink);
         }
 
-        .tag-slot ::slotted(img) {
-          max-height: 200px;
-        }
         :host([dragging]) #user-choice-container {
           border-style: dashed;
           border-color: gray;
         }
         :host([drag-enter-answer][dragging]) #user-choice-container {
           border-style: dashed;
           border-color: black;
-          background-color: var(--simple-colors-default-theme-grey-3);
+          background-color: light-dark(var(--simple-colors-default-theme-grey-3),var(--simple-colors-default-theme-grey-9));
         }
         :host([drag-enter][dragging]) #possible-container {
           border-color: black;
           border-style: dashed;
-          background-color: var(--simple-colors-default-theme-grey-2);
+          background-color: light-dark(var(--simple-colors-default-theme-grey-2),var(--simple-colors-default-theme-grey-8));
         }
 
         .tag-option {
@@ -154,19 +150,21 @@ class TaggingQuestion extends QuestionElement {
     <p class="feedback">${this.correctText}</p>
     ${this.hasFeedbackCorrect ? html`<slot name="feedbackCorrect"></slot>` : ``}` : ``}
     ${this.showAnswer ? html`
-      <h3>Answers selected</h3>
       <p>${this.selectedAnswers.filter(answer => answer.correct).length} out of ${this.answers.filter(answer => answer.correct).length} correct options selected</p>
-      <ul>
+      <h4>Answers selected</h4>
+      <dl>
       ${this.selectedAnswers.map(answer => html`
-        <li class="feedback ${answer.correct ? 'correct' : 'incorrect'}"><strong>${answer.label}:</strong> ${answer.selectedFeedback}</li>              
+        <dt class="${answer.correct ? 'correct' : 'incorrect'}">${answer.label}</dt>
+        <dd>${answer.selectedFeedback}</dd>
       `)}
-      </ul>
-      <h3>Answers not selected</h3>
-      <ul>
+      </dl>
+      <h4>Answers not selected</h4>
+      <dl>
       ${this.displayedAnswers.map(answer => html`
-        ${answer.unselectedFeedback ? html`<li class="feedback ${!answer.correct ? 'correct' : 'incorrect'}">${answer.unselectedFeedback}</li>` : ``}
+        <dt class="${!answer.correct ? 'correct' : 'incorrect'}">${answer.label}</dt>
+        <dd>${answer.selectedFeedback}</dd>
       `)}
-      </ul>
+      </dl>
     </div>
   ` : ''}
       ${this.hasHint && this.showAnswer && !this.isCorrect() ? html`