eat-js-sdk 2.1.8 → 2.2.0

package/dist/interaction-builder.mjs

@@ -10224,14 +10224,15 @@ create_custom_element(
 );
 var root_1$d = /* @__PURE__ */ from_html(`<p class="p2 text-red-400 mb-3">Student's answer</p>`);
 var root_3$7 = /* @__PURE__ */ from_html(`<span class="w-8 h-8 absolute right-2 top-2.5 flex items-center justify-center" aria-hidden="true"><!></span>`);
-var root_2$7 = /* @__PURE__ */ from_html(`<div class="relative"><textarea id="answerText" data-testid="input-long-txa" placeholder="Type your answer here" autocomplete="off" rows="3"></textarea> <!></div>`);
+var root_2$7 = /* @__PURE__ */ from_html(`<div class="relative"><textarea id="answerText" data-testid="input-long-txa" autocomplete="off" rows="3"></textarea> <!></div>`);
 var root_5$2 = /* @__PURE__ */ from_html(`<span class="w-8 h-8 absolute right-2 top-2.5 flex items-center justify-center" aria-hidden="true"><!></span>`);
-var root_4$1 = /* @__PURE__ */ from_html(`<div class="relative"><input data-testid="input-short-txb" autocomplete="off" placeholder="Type your answer here"/> <!></div>`);
+var root_4$1 = /* @__PURE__ */ from_html(`<div class="relative"><input data-testid="input-short-txb" autocomplete="off"/> <!></div>`);
 var root$a = /* @__PURE__ */ from_html(`<div class="relative"><!> <!></div>`);
 function TypeInTextField($$anchor, $$props) {
   push($$props, true);
   let value = prop($$props, "value", 15), variant = prop($$props, "variant", 7), readonly = prop($$props, "readonly", 7, false), disabled = prop($$props, "disabled", 7, false), showStatus = prop($$props, "showStatus", 7, false), isCorrect = prop($$props, "isCorrect", 7, null), isSkipped = prop($$props, "isSkipped", 7, false), onBlur = prop($$props, "onBlur", 7);
   let ariaLabel = /* @__PURE__ */ user_derived(() => showStatus() && isCorrect() !== null ? `Submitted response is ${isCorrect() ? "correct" : "incorrect"}` : !value() ? "Answer input: Please type your response" : "Your response is");
+  let typeinPlaceholder = /* @__PURE__ */ user_derived(() => isSkipped() ? "No answer provided" : "Type your answer here");
   const focusHandlers = useTextInputFocus();
   const handleFocus = (e2) => {
     focusHandlers.handleFocus(e2);
@@ -10317,7 +10318,7 @@ function TypeInTextField($$anchor, $$props) {
       append($$anchor2, p);
     };
     if_block(node, ($$render) => {
-      if (showStatus() && !isSkipped() && isCorrect() === false) $$render(consequent);
+      if (showStatus() && isCorrect() === false || isSkipped()) $$render(consequent);
     });
   }
   var node_1 = sibling(node, 2);
@@ -10335,8 +10336,8 @@ function TypeInTextField($$anchor, $$props) {
           var span = root_3$7();
           var node_3 = child(span);
           {
-            let $0 = /* @__PURE__ */ user_derived(() => Boolean(isCorrect()));
-            let $1 = /* @__PURE__ */ user_derived(() => Boolean(isCorrect()) ? "text-green-700" : "text-red-850");
+            let $0 = /* @__PURE__ */ user_derived(() => isSkipped() ? false : Boolean(isCorrect()));
+            let $1 = /* @__PURE__ */ user_derived(() => !isSkipped() && Boolean(isCorrect()) ? "text-green-700" : "text-red-850");
             ResultIcon(node_3, {
               get isCorrect() {
                 return get$1($0);
@@ -10350,7 +10351,7 @@ function TypeInTextField($$anchor, $$props) {
           append($$anchor3, span);
         };
         if_block(node_2, ($$render) => {
-          if (showStatus() && value() && value().trim() && isCorrect() !== null) $$render(consequent_1);
+          if (showStatus() && value() && value().trim() && isCorrect() !== null || isSkipped()) $$render(consequent_1);
         });
       }
       reset(div_1);
@@ -10359,13 +10360,14 @@ function TypeInTextField($$anchor, $$props) {
           set_class(textarea, 1, `input-long-txa typein-textbox h-32 resize-none
           ${$0 ?? ""} 
           ${showStatus() && !isSkipped() && isCorrect() === true ? "border-2 border-green-700 bg-green-400" : ""} 
-          ${showStatus() && !isSkipped() && isCorrect() === false ? "border-2 border-red-850" : ""}`);
+          ${showStatus() && isCorrect() === false || isSkipped() ? "border-2 border-red-850" : ""}`);
           set_attribute(textarea, "aria-label", get$1(ariaLabel));
           textarea.readOnly = readonly();
           textarea.disabled = disabled();
+          set_attribute(textarea, "placeholder", get$1(typeinPlaceholder));
         },
         [
-          () => showStatus() && value() && value().trim() && isCorrect() !== null ? "pr-10" : ""
+          () => showStatus() && value() && value().trim() && isCorrect() !== null || isSkipped() ? "pr-10" : ""
         ]
       );
       event("focus", textarea, handleFocus);
@@ -10386,8 +10388,8 @@ function TypeInTextField($$anchor, $$props) {
           var span_1 = root_5$2();
           var node_5 = child(span_1);
           {
-            let $0 = /* @__PURE__ */ user_derived(() => Boolean(isCorrect()));
-            let $1 = /* @__PURE__ */ user_derived(() => Boolean(isCorrect()) ? "text-green-700" : "text-red-850");
+            let $0 = /* @__PURE__ */ user_derived(() => isSkipped() ? false : Boolean(isCorrect()));
+            let $1 = /* @__PURE__ */ user_derived(() => !isSkipped() && Boolean(isCorrect()) ? "text-green-700" : "text-red-850");
             ResultIcon(node_5, {
               get isCorrect() {
                 return get$1($0);
@@ -10401,15 +10403,16 @@ function TypeInTextField($$anchor, $$props) {
           append($$anchor3, span_1);
         };
         if_block(node_4, ($$render) => {
-          if (showStatus() && value() && value().trim() && isCorrect() !== null) $$render(consequent_3);
+          if (showStatus() && value() && value().trim() && isCorrect() !== null || isSkipped()) $$render(consequent_3);
         });
       }
       reset(div_2);
       template_effect(() => {
-        set_class(input, 1, `input-short-txb typein-textbox typein-input ${showStatus() && !isSkipped() && isCorrect() === true ? "border-2 border-green-700 bg-green-400" : ""} ${showStatus() && !isSkipped() && isCorrect() === false ? "border-2 border-red-850" : ""}`);
+        set_class(input, 1, `input-short-txb typein-textbox typein-input ${showStatus() && !isSkipped() && isCorrect() === true ? "border-2 border-green-700 bg-green-400" : ""} ${showStatus() && isCorrect() === false || isSkipped() ? "border-2 border-red-850" : ""}`);
         set_attribute(input, "aria-label", get$1(ariaLabel));
         input.readOnly = readonly();
         input.disabled = disabled();
+        set_attribute(input, "placeholder", get$1(typeinPlaceholder));
       });
       event("focus", input, handleFocus);
       event("blur", input, handleBlur);
@@ -11007,7 +11010,7 @@ function TypeInFeedback($$anchor, $$props) {
     }
     return false;
   })());
-  const showHasMultipleAnswers = /* @__PURE__ */ user_derived(() => feedbackState().showStatusLine && get$1(hasMultipleAnswers) && (config().variant === "short" || config().variant === "long"));
+  const showHasMultipleAnswers = /* @__PURE__ */ user_derived(() => get$1(hasMultipleAnswers) && config().variant !== "inline" && (feedbackState().isSkipped || feedbackState().showStatusLine));
   const showFeedbackAlert = /* @__PURE__ */ user_derived(() => feedbackState().isFeedbackShown && !feedbackState().isSkipped && config().variant === "inline" && !!feedbackState().resultFeedback?.trim());
   const showInlineComparisonTable = /* @__PURE__ */ user_derived(() => feedbackState().showComparisonTable && config().variant === "inline");
   const feedbackIconType = /* @__PURE__ */ user_derived(() => isInteractiveMode2() && config().variant === "inline" ? "info" : "result");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eat-js-sdk",
-  "version": "2.1.8",
-  "change version": "2.1.0",
+  "version": "2.2.0",
+  "change version": "2.2.0",
   "description": "Authoring tool frontend SDK",
   "contributors": [
     {