@nyuccl/smile 0.2.0-beta.0

package/dist/runtime/components/builtins/FavoriteNumber.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/builtins/InformedConsentModal.d.vue.ts

@@ -0,0 +1,28 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+/**
+ * Props for the InformedConsentModal component
+ */
+export type Props = {
+    /**
+     * - Controls the visibility of the modal
+     */
+    show: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggleConsent: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onToggleConsent?: ((...args: any[]) => any) | undefined;
+}>, {
+    show: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/builtins/InformedConsentModal.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { watch, onUnmounted } from "vue";
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  }
+});
+const _emit = defineEmits(["toggleConsent"]);
+const api = useAPI();
+watch(
+  () => props.show,
+  (isVisible) => {
+    const mainContent = document.querySelector(".main-content");
+    if (mainContent) {
+      if (isVisible) {
+        mainContent.style.overflow = "hidden";
+      } else {
+        mainContent.style.overflow = "";
+      }
+    }
+  },
+  { immediate: true }
+);
+onUnmounted(() => {
+  const mainContent = document.querySelector(".main-content");
+  if (mainContent) {
+    mainContent.style.overflow = "";
+  }
+});
+</script>
+
+<template>
+  <!-- Modal overlay with backdrop -->
+  <div
+    class="absolute inset-0 z-50 flex items-center justify-center p-8"
+    :class="{ hidden: !show }"
+  >
+    <!-- Backdrop that closes modal when clicked -->
+    <div
+      class="absolute inset-0 bg-black bg-opacity-50"
+      @click="$emit('toggleConsent')"
+    />
+
+    <!-- Close button in top-right corner -->
+    <Button
+      class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 p-2 rounded-full hover:bg-gray-100 transition-colors"
+      aria-label="close"
+      @click="$emit('toggleConsent')"
+    >
+      <i-fa6-solid-xmark class="text-xl" />
+    </Button>
+
+    <!-- Modal content container -->
+    <div class="w-[90%] h-[90%] relative bg-background shadow-xl flex flex-col">
+      <!-- Scrollable content area -->
+      <div class="flex-1 overflow-y-auto p-20 pt-10">
+        <div class="select-none w-full">
+          <div class="pt-5 text-foreground">
+            <!-- Dynamic consent text component -->
+            <template v-if="api.getAppComponent">
+              <component :is="api.getAppComponent('informed_consent_text')" />
+            </template>
+            <!-- Error fallback if consent text component is not available -->
+            <template v-else>
+              <div class="rounded-md border border-red-200 bg-red-50 p-4 text-sm text-red-800">
+                Error: Unable to load consent form text. Please contact the study administrator.
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <!-- Modal footer with action button -->
+      <div class="border-t bg-muted px-5 py-4 flex justify-end">
+        <Button @click="$emit('toggleConsent')">
+          Take me back!
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/builtins/InformedConsentModal.vue.d.ts

@@ -0,0 +1,28 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+/**
+ * Props for the InformedConsentModal component
+ */
+export type Props = {
+    /**
+     * - Controls the visibility of the modal
+     */
+    show: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggleConsent: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onToggleConsent?: ((...args: any[]) => any) | undefined;
+}>, {
+    show: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/builtins/InformedConsentView.d.vue.ts

@@ -0,0 +1,13 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    informedConsentText: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    informedConsentText: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/builtins/InformedConsentView.vue

@@ -0,0 +1,127 @@
+<script setup>
+import { ref, watch, onBeforeUnmount } from "vue";
+import { animate } from "motion";
+const _props = defineProps({
+  informedConsentText: {
+    type: Object,
+    required: true
+  }
+});
+const api = useViewAPI();
+function finish() {
+  api.goNextView();
+}
+if (api.config.anonymousMode) {
+  finish();
+}
+function wiggle() {
+  if (api.persist.agree) {
+    animate(button.value, { rotate: [0, 5, -5, 5, -5, 0] }, { duration: 1.25 }).finished.then(() => {
+      timer = setTimeout(wiggle, 2e3);
+    });
+  }
+}
+const name = ref("enter your name");
+const button = ref(null);
+let timer;
+if (!("agree" in api.persist)) {
+  api.persist.agree = ref(false);
+}
+watch(() => api.persist.agree, (newVal) => {
+  if (newVal) {
+    timer = setTimeout(wiggle, 3e3);
+  }
+});
+onBeforeUnmount(() => {
+  clearTimeout(timer);
+});
+</script>
+
+<template>
+  <ConstrainedPage
+    :responsive-u-i="api.config.responsiveUI"
+    :width="api.config.windowsizerRequest.width"
+    :height="api.config.windowsizerRequest.height"
+  >
+    <TwoCol
+      right-first
+      left-width="w-3/5"
+      class="px-6"
+    >
+      <template #left>
+        <div class="text-foreground">
+          <component :is="informedConsentText" />
+        </div>
+      </template>
+
+      <template #right>
+        <Card class="bg-muted">
+          <CardContent class="bg-muted">
+            <p class="text-left font-semibold text-foreground mb-4">
+              We first must verify that you are participating willingly and know your rights. Please take the time to
+              read the consent form (you can scroll the page).
+            </p>
+
+            <div class="border-t border-gray-200 my-4" />
+
+            <div class="flex items-center space-x-2 mb-4">
+              <Switch
+                id="consent_toggle"
+                v-model="api.persist.agree"
+                variant="success"
+                name="consent_toggle"
+                size="lg"
+              />
+              <Label
+                for="consent_toggle"
+                class="text-left text-sm font-medium"
+              >
+                I consent and am over 18 years old.
+              </Label>
+            </div>
+
+            <div class="hidden">
+              <Label
+                for="your_name"
+                class="text-sm font-medium text-gray-700 mb-2 block"
+              >
+                Required! Please enter your name:
+              </Label>
+              <Input
+                id="your_name"
+                v-model="name"
+                name="your_name"
+                placeholder="Enter your name"
+                class="w-full"
+              />
+            </div>
+
+            <div class="mt-6">
+              <Button
+                v-if="api.persist.agree"
+                ref="button"
+                variant="success"
+                size="lg"
+                class="w-full"
+                @click="finish()"
+              >
+                Let's start
+                <svg
+                  class="w-4 h-4 ml-2"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </template>
+    </TwoCol>
+  </ConstrainedPage>
+</template>

package/dist/runtime/components/builtins/InformedConsentView.vue.d.ts

@@ -0,0 +1,13 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    informedConsentText: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    informedConsentText: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/builtins/InstructionsQuiz.d.vue.ts

@@ -0,0 +1,36 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    questions: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    returnTo: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    randomizeQandA: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    questions: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    returnTo: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    randomizeQandA: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    returnTo: string;
+    randomizeQandA: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/builtins/InstructionsQuiz.vue

@@ -0,0 +1,274 @@
+<script setup>
+import { computed } from "vue";
+const api = useViewAPI();
+const props = defineProps({
+  questions: {
+    type: Object,
+    required: true
+  },
+  returnTo: {
+    type: String,
+    required: false,
+    default: "instructions"
+  },
+  randomizeQandA: {
+    type: Boolean,
+    required: false,
+    default: true
+  }
+});
+let qs = props.questions;
+function init() {
+  qs = props.randomizeQandA ? getRandomizedQuestions() : props.questions;
+  const sections = api.steps.append([{ id: "pages" }, { id: "feedback" }]);
+  sections[0].append(qs);
+  sections[1].append([{ id: "success" }, { id: "retry" }]);
+  if (!api.persist.isDefined("attempts")) {
+    api.persist.attempts = 1;
+  }
+}
+function getRandomizedQuestions() {
+  api.randomSeed();
+  return props.questions.map((page) => ({
+    ...page,
+    questions: api.shuffle(
+      page.questions.map((q) => ({
+        ...q,
+        answers: api.shuffle(q.answers)
+      }))
+    )
+  }));
+}
+function autofill() {
+  function updateQuestionsInState(state) {
+    if (state.data?.questions && Array.isArray(state.data.questions)) {
+      state.data.questions = state.data.questions.map((question) => ({
+        ...question,
+        answer: question.multiSelect ? question.correctAnswer : question.correctAnswer[0]
+      }));
+    }
+    state._states.forEach(updateQuestionsInState);
+  }
+  console.log("api.sm", api.steps);
+  updateQuestionsInState(api.steps);
+}
+api.setAutofill(autofill);
+const quizCorrect = computed(() => {
+  const allQuestions = api.queryStepData("pages*").flatMap((page) => page.questions || []);
+  return allQuestions.every((question) => {
+    if (Array.isArray(question.correctAnswer)) {
+      const selectedAnswers = Array.isArray(question.answer) ? question.answer : [question.answer];
+      return question.correctAnswer.length === selectedAnswers.length && question.correctAnswer.every((answer) => selectedAnswers.includes(answer));
+    }
+    return question.answer === question.correctAnswer[0];
+  });
+});
+const currentPageComplete = computed(() => {
+  if (!api.stepData?.questions || !Array.isArray(api.stepData.questions)) {
+    return false;
+  }
+  return api.stepData.questions.every((question) => {
+    if ("answer" in question) {
+      if (question.multiSelect) {
+        return Array.isArray(question.answer) && question.answer.length > 0;
+      }
+      return true;
+    }
+    return false;
+  });
+});
+function submitQuiz() {
+  api.recordPageData({
+    phase: "instructionsQuiz",
+    questions: api.queryStepData("pages*"),
+    // Update to use randomized questions
+    persist: api.persist
+  });
+  if (quizCorrect.value) {
+    api.goToStep("feedback/success");
+  } else {
+    api.goToStep("feedback/retry");
+  }
+}
+function clearQuizAnswers() {
+  const pages = api.queryStepData("pages*");
+  pages.forEach((page) => {
+    if (page.questions && Array.isArray(page.questions)) {
+      page.questions.forEach((question) => {
+        delete question.answer;
+      });
+    }
+  });
+}
+function returnInstructions() {
+  clearQuizAnswers();
+  api.goFirstStep();
+  api.persist.attempts = api.persist.attempts + 1;
+  api.goToView(props.returnTo);
+}
+function finish() {
+  api.goNextView();
+}
+init();
+</script>
+
+<template>
+  <!-- Quiz pages - Main quiz interface with questions -->
+  <ConstrainedPage
+    v-if="api.stepIndex < qs.length && /^pages\/pg\d+$/.test(api.pathString)"
+    :responsive-u-i="api.config.responsiveUI"
+    :width="api.config.windowsizerRequest.width"
+    :height="api.config.windowsizerRequest.height"
+  >
+    <TitleTwoCol
+      left-first
+      left-width="w-1/3"
+      :responsive-u-i="api.config.responsiveUI"
+    >
+      <template #title>
+        <h3 class="text-3xl font-bold mb-4">
+          <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Did we explain things clearly?
+        </h3>
+        <p class="text-lg mb-8">
+          Using the information provided in the previous pages, please select the correct answer for each question. Do
+          your best! If anything is unclear you can review the instructions again after you submit your response.
+        </p>
+      </template>
+      <template #left>
+        <div class="text-left text-muted-foreground">
+          <h3 class="text-lg font-bold mb-2">
+            Test your understanding
+          </h3>
+          <p class="text-md font-light text-muted-foreground">
+            You must answer all the questions to move on.
+          </p>
+        </div>
+      </template>
+      <template #right>
+        <!-- Quiz questions container -->
+        <div class="border border-border text-left bg-muted p-6 rounded-lg">
+          <div
+            v-for="(question, index) in api.stepData.questions"
+            :key="question.id"
+            :class="{ 'mt-0': index === 0, 'mt-9': index > 0 }"
+            class="mb-6"
+          >
+            <label class="block text-md font-semibold text-foreground mb-2">
+              {{ question.question }}
+            </label>
+
+            <!-- Multi-select checkbox -->
+            <div
+              v-if="question.multiSelect"
+              class="mb-9"
+            >
+              <MultiSelect
+                v-model="api.stepData.questions[index].answer"
+                :options="question.answers"
+                variant="success"
+                help="Select all that apply"
+                size="lg"
+              />
+            </div>
+
+            <!-- Single select dropdown -->
+            <Select
+              v-else
+              v-model="api.stepData.questions[index].answer"
+            >
+              <SelectTrigger class="w-full bg-background dark:bg-background text-base">
+                <SelectValue placeholder="Select an option" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem
+                  v-for="answer in question.answers"
+                  :key="answer"
+                  :value="answer"
+                >
+                  {{ answer }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <hr class="border-border my-6">
+
+          <!-- Navigation buttons -->
+          <div class="flex justify-between">
+            <Button
+              v-if="api.stepIndex >= 1"
+              variant="outline"
+              @click="api.goPrevStep()"
+            >
+              <i-fa6-solid-arrow-left />
+              Previous page
+            </Button>
+            <div v-else />
+            <Button
+              :variant="api.isLastBlockStep() ? 'default' : 'outline'"
+              :disabled="!currentPageComplete"
+              @click="api.isLastBlockStep() ? submitQuiz() : api.goNextStep()"
+            >
+              {{ api.isLastBlockStep() ? 'Submit' : 'Next page' }}
+              <i-fa6-solid-arrow-right v-if="!api.isLastBlockStep()" />
+            </Button>
+          </div>
+        </div>
+      </template>
+    </TitleTwoCol>
+  </ConstrainedPage>
+
+  <!-- Success page - Shown when all questions are answered correctly -->
+  <ConstrainedTaskWindow
+    v-else-if="api.pathString === 'feedback/success'"
+    variant="ghost"
+    :responsive-u-i="api.config.responsiveUI"
+    :width="api.config.windowsizerRequest.width"
+    :height="api.config.windowsizerRequest.height"
+  >
+    <div class="text-center items-center justify-center">
+      <h3 class="text-3xl font-bold mb-4">
+        <div class="flex justify-center mb-2">
+          <i-fa6-solid-square-check class="text-[4rem]" />
+        </div>
+        Congrats! You passed.
+      </h3>
+      <p class="text-lg mb-6">
+        Click here to begin the next phase of the experiment.
+      </p>
+      <Button
+        variant="default"
+        @click="finish"
+      >
+        Let's begin.
+      </Button>
+    </div>
+  </ConstrainedTaskWindow>
+
+  <!-- Retry page - Shown when some questions are answered incorrectly -->
+  <ConstrainedTaskWindow
+    v-else-if="api.pathString === 'feedback/retry'"
+    variant="ghost"
+    :responsive-u-i="api.config.responsiveUI"
+    :width="api.config.windowsizerRequest.width"
+    :height="api.config.windowsizerRequest.height"
+  >
+    <div class="text-center items-center justify-center">
+      <h3 class="text-3xl font-bold mb-4">
+        <div class="flex justify-center mb-2">
+          <i-bx-error class="text-[4rem]" />
+        </div>
+        Sorry! You did not get all the answers correct.
+      </h3>
+      <p class="text-lg mb-6">
+        Please re-read the instructions and try again.
+      </p>
+      <Button
+        variant="warning-light"
+        @click="returnInstructions"
+      >
+        Back to Instructions
+      </Button>
+    </div>
+  </ConstrainedTaskWindow>
+</template>

package/dist/runtime/components/builtins/InstructionsQuiz.vue.d.ts

@@ -0,0 +1,36 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    questions: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    returnTo: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    randomizeQandA: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    questions: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    returnTo: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    randomizeQandA: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    returnTo: string;
+    randomizeQandA: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/builtins/InstructionsView.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;