@nyuccl/smile 0.2.0-beta.0

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

@@ -0,0 +1,208 @@
+<script setup>
+import { reactive, watch, onUnmounted } from "vue";
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  prefillEmail: {
+    type: String,
+    default: ""
+  }
+});
+const emit = defineEmits(["toggleWithdraw", "submitWithdraw"]);
+const api = useAPI();
+const forminfo = reactive({
+  reason_select: [],
+  reason_comments: "",
+  email: props.prefillEmail || ""
+});
+const withdrawOptions = [
+  "I couldn't adjust the size of my browser to make everything visible",
+  "This task is too hard.",
+  "This task is too time consuming.",
+  "This task is boring.",
+  "I do not understand what I am supposed to do.",
+  "I am uncomfortable answering the questions.",
+  "The content of the task is upsetting to me.",
+  "I am having technical issues."
+];
+function withdraw() {
+  api.setWithdrawn(forminfo);
+  api.saveData(true);
+  emit("submitWithdraw");
+}
+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 and container -->
+  <div
+    class="absolute inset-0 z-50 flex items-center justify-center p-8"
+    :class="{ hidden: !show }"
+  >
+    <!-- Backdrop overlay -->
+    <div
+      class="absolute inset-0 bg-black bg-opacity-50"
+      @click="$emit('toggleWithdraw')"
+    />
+
+    <!-- Close button -->
+    <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('toggleWithdraw')"
+    >
+      <i-fa6-solid-xmark class="text-xl" />
+    </Button>
+
+    <!-- Modal content container -->
+    <div class="w-[90%] h-[90%] relative bg-background border border-border flex flex-col overflow-hidden">
+      <!-- Scrollable content area -->
+      <div class="flex-1 overflow-y-auto">
+        <TitleTwoCol :responsive-u-i="api.config.responsiveUI">
+          <!-- Modal header with title -->
+          <template #title>
+            <h3 class="text-3xl font-semibold">
+              <i-ph-hand-withdraw-thin class="text-red-500 inline-block mr-2" />Withdraw from study?
+            </h3>
+          </template>
+
+          <!-- Left column: Withdrawal information -->
+          <template #left>
+            <div class="text-left text-muted-foreground">
+              <p class="text-sm text-muted-foreground">
+                You are free to withdraw from this study at any time. Withdrawing from the study <b>may</b> affect the
+                total amount of your compensation. We will follow up with you about partial compensation.
+                <b>You do not have to answer any particular question but we appreciate understanding the reasons for
+                  your withdraw.</b>
+              </p>
+            </div>
+          </template>
+
+          <!-- Right column: Withdrawal form -->
+          <template #right>
+            <div class="space-y-6">
+              <!-- Withdrawal reasons section -->
+              <div class="space-y-4">
+                <Label class="text-lg font-semibold"> Why are you withdrawing from the study? (Optional) </Label>
+                <div class="space-y-3">
+                  <div
+                    v-for="(option, index) in withdrawOptions"
+                    :key="index"
+                    class="flex items-center space-x-3"
+                  >
+                    <Checkbox
+                      :id="`withdraw-option-${index}`"
+                      :checked="forminfo.reason_select.includes(option)"
+                      class="border-gray-600 data-[state=checked]:bg-gray-800 data-[state=checked]:border-gray-800"
+                      @update:checked="
+                        (checked) => {
+                          if (checked) {
+                            if (!forminfo.reason_select.includes(option)) {
+                              forminfo.reason_select.push(option)
+                            }
+                          }
+                          else {
+                            const idx = forminfo.reason_select.indexOf(option)
+                            if (idx > -1) {
+                              forminfo.reason_select.splice(idx, 1)
+                            }
+                          }
+                        }
+                      "
+                    />
+                    <Label
+                      :for="`withdraw-option-${index}`"
+                      class="text-sm font-normal cursor-pointer"
+                    >
+                      {{ option }}
+                    </Label>
+                  </div>
+                </div>
+                <p class="text-xs text-gray-500">
+                  Select all that apply.
+                </p>
+              </div>
+
+              <!-- Additional comments section -->
+              <div class="space-y-3">
+                <Label
+                  for="comments"
+                  class="text-lg font-semibold"
+                > Additional comments. (Optional) </Label>
+                <Textarea
+                  id="comments"
+                  v-model="forminfo.reason_comments"
+                  placeholder="Enter your comments here."
+                  class="w-full bg-background dark:bg-background text-base resize-vertical"
+                  rows="4"
+                />
+                <p class="text-xs text-gray-500">
+                  Please let us know any additional information you would like to share.
+                </p>
+              </div>
+
+              <!-- Contact email section -->
+              <div class="space-y-3">
+                <Label
+                  for="email"
+                  class="text-base font-medium"
+                > Contact email. (Optional) </Label>
+                <Input
+                  id="email"
+                  v-model="forminfo.email"
+                  type="email"
+                  placeholder="participant@gmail.com"
+                  class="w-full text-base bg-background dark:bg-background"
+                />
+                <p class="text-xs text-gray-500">
+                  Please enter your email address so we can follow up with you. This is optional and we otherwise will
+                  try to figure out how to reach you. However, this can help avoid any potential problems. Feel free to
+                  use an anonymized email like your Prolific contact email, Hide my email (Apple), or create a free
+                  alias on SimpleLogin. We will not associate this email with your data nor use it for any purpose other
+                  than contacting you to resolve the issue.
+                </p>
+              </div>
+            </div>
+          </template>
+        </TitleTwoCol>
+      </div>
+
+      <!-- Modal footer with action buttons -->
+      <div class="border-t bg-muted px-5 py-4 flex justify-end space-x-4 flex-shrink-0">
+        <Button
+          variant="outline"
+          @click="$emit('toggleWithdraw')"
+        >
+          Nevermind, take me back to the study!
+        </Button>
+        <Button
+          variant="destructive"
+          @click="withdraw"
+        >
+          Withdraw
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,56 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+/**
+ * Component props for WithdrawModal
+ */
+export type WithdrawModalProps = {
+    /**
+     * - Controls modal visibility
+     */
+    show: boolean;
+    /**
+     * - Pre-filled email address for the form
+     */
+    prefillEmail: string;
+};
+/**
+ * Component emits for WithdrawModal
+ */
+export type WithdrawModalEmits = {
+    /**
+     * - Emitted when modal should be toggled
+     */
+    toggleWithdraw: Function;
+    /**
+     * - Emitted when withdraw form is submitted
+     */
+    submitWithdraw: Function;
+};
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prefillEmail: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggleWithdraw: (...args: any[]) => void;
+    submitWithdraw: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prefillEmail: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onToggleWithdraw?: ((...args: any[]) => any) | undefined;
+    onSubmitWithdraw?: ((...args: any[]) => any) | undefined;
+}>, {
+    show: boolean;
+    prefillEmail: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/builtins/WithdrawView.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>;

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

@@ -0,0 +1,99 @@
+<script setup>
+import { computed } from "vue";
+const api = useAPI();
+api.saveData(true);
+const cardContent = {
+  prolific: {
+    title: "Notice about withdraw from our Prolific study",
+    message: "You have indicated that you withdrew from the study. Please return the task and we will contact you for partial payment if you are eligible."
+  },
+  cloudresearch: {
+    title: "Notice about withdraw from our CloudResearch study",
+    message: "You have indicated that you withdrew from the study. Please return the task and we will contact you for partial payment if you are eligible."
+  },
+  mturk: {
+    title: "Notice about withdraw from our Mechanical Turk study",
+    message: "You have indicated that you withdrew from the study. Please return the task and we will contact you for partial payment if you are eligible."
+  },
+  sona: {
+    title: "Notice about withdraw from our SONA study",
+    message: "You have indicated that you withdrew from the study. Please return to SONA to update your participation status."
+  },
+  sona_paid: {
+    title: "Notice about withdraw from our SONA study",
+    message: "You have indicated that you withdrew from the study. Please return to SONA to update your participation status."
+  },
+  spark: {
+    title: "Notice about withdraw from our SPARK study",
+    message: "You have indicated that you withdrew from the study. Feel free to close this window."
+  },
+  panda: {
+    title: "Notice about withdraw from our PANDA study",
+    message: "You have indicated that you withdrew from the study. Feel free to close this window."
+  },
+  citizensci: {
+    title: "Notice about withdraw from our study",
+    message: "You have indicated that you withdrew from the study. Feel free to close this window."
+  },
+  web: {
+    title: "Notice about withdraw from our web study",
+    message: "You have indicated that you withdrew from the study. Feel free to close this window."
+  }
+};
+const currentService = computed(() => api.getRecruitmentService());
+const content = computed(() => {
+  return cardContent[currentService.value] || {
+    title: "Notice about withdraw from our study",
+    message: "You have indicated that you withdrew from the study. Feel free to close this window."
+  };
+});
+</script>
+
+<template>
+  <!-- Main container with responsive task window -->
+  <ConstrainedTaskWindow
+    variant="ghost"
+    :responsive-u-i="api.config.responsiveUI"
+    :width="api.config.windowsizerRequest.width"
+    :height="api.config.windowsizerRequest.height"
+  >
+    <!-- Content wrapper with sizing constraints -->
+    <div class="w-[60%] h-[80%]">
+      <!-- Withdrawal confirmation card - shown when user has withdrawn -->
+      <Card
+        v-if="api.store.cookieState.withdrawn && content"
+        class="border-withdraw-border bg-withdraw-bg text-withdraw-text"
+      >
+        <CardHeader>
+          <p class="text-xl font-semibold text-center">
+            <i-icon-park-outline-bye class="text-withdraw-text inline-block text-5xl mb-2" />
+            <br>{{ content.title }}
+          </p>
+        </CardHeader>
+        <CardContent>
+          {{ content.message }}
+        </CardContent>
+      </Card>
+
+      <!-- Error card - shown when user accesses page without withdrawing -->
+      <Card
+        v-else
+        class="border-warning-border bg-warning-bg text-warning-text"
+      >
+        <CardHeader>
+          <p class="text-xl font-semibold text-center">
+            <i-icon-park-outline-attention class="text-warning-text inline-block text-5xl mb-2" />
+            <br>Access Error
+          </p>
+        </CardHeader>
+        <CardContent>
+          <p class="text-center">
+            You have accessed the withdrawal page, but our records show you have not withdrawn from the study. This may
+            be due to an error or you may have accessed this page by mistake. Please contact the researchers if you
+            believe this is an error.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  </ConstrainedTaskWindow>
+</template>

package/dist/runtime/components/builtins/WithdrawView.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/dev/RecruitmentChooserView.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>;

package/dist/runtime/components/dev/RecruitmentChooserView.vue

@@ -0,0 +1,258 @@
+<script setup>
+import { computed } from "vue";
+const api = useViewAPI();
+const devUrls = computed(() => {
+  const urls = {};
+  for (const [key, value] of Object.entries(api.urls)) {
+    urls[key] = "/dev" + value;
+  }
+  return urls;
+});
+</script>
+
+<template>
+  <!-- Main container with responsive padding -->
+  <div class="px-4 md:px-8 lg:px-12 pt-10 pb-10 bg-background text-foreground global-color-mode">
+    <!-- Header section with title and description -->
+    <div class="mb-8">
+      <h1 class="text-3xl font-bold mb-4">
+        Welcome to Smile Developer Mode
+      </h1>
+      <p class="text-lg mb-6">
+        You can use this to test your application, read the docs, QA your data, and recruit participants through
+        multiple platforms.
+      </p>
+    </div>
+
+    <!-- Divider line -->
+    <hr class="my-4">
+
+    <!-- Grid of recruitment platform cards -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <!-- Prolific Platform Card -->
+      <Card class="flex flex-col">
+        <CardHeader>
+          <CardTitle>Prolific</CardTitle>
+          <CardDescription>
+            <a href="https://www.prolific.co">Prolific.ac</a> is a platform for online experiments.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="flex justify-end flex-1 items-end">
+          <Button
+            id="prolific_tester"
+            as-child
+            variant="default"
+            size="xs"
+            class="is-blue"
+          >
+            <a :href="devUrls['prolific']"><i-lucide-dices /> Prolific User
+              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            </a>
+          </Button>
+        </CardContent>
+      </Card>
+
+      <!-- CloudResearch Platform Card -->
+      <Card class="flex flex-col">
+        <CardHeader>
+          <CardTitle>CloudResearch</CardTitle>
+          <CardDescription>
+            <a href="https://www.cloudresearch.com/">CloudResearch</a> is a platform that recruits from several
+            sources, including Mechanical Turk but includes some screening for bots and server farms.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="flex justify-end flex-1 items-end">
+          <Button
+            id="cloudresearch_tester"
+            as-child
+            variant="default"
+            size="xs"
+            class="is-pink"
+          >
+            <a :href="devUrls['cloudresearch']"><i-lucide-dices /> CR User
+              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            </a>
+          </Button>
+        </CardContent>
+      </Card>
+
+      <!-- Mechanical Turk Platform Card -->
+      <Card class="flex flex-col">
+        <CardHeader>
+          <CardTitle>Mechanical Turk</CardTitle>
+          <CardDescription>
+            <a href="https://mturk.com">Amazon Mechanical Turk</a> is the original wild-west of online crowd labor
+            markets.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="flex justify-end space-y-2 flex-1 items-end flex-col">
+          <Button
+            id="amt_tester_preview"
+            as-child
+            variant="secondary"
+            size="xs"
+            class="is-light-yellow"
+          >
+            <a
+              href="/dev/mturk?assignmentId=ASSIGNMENT_ID_NOT_AVAILABLE&hitId=123RVWYBAZW00EXAMPLE&turkSubmitTo=https://www.mturk.com/&workerId=AZ3456EXAMPLE"
+            >AMT Preview Mode
+              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            </a>
+          </Button>
+          <Button
+            id="amt_tester"
+            as-child
+            variant="default"
+            size="xs"
+            class="is-yellow"
+          >
+            <a :href="devUrls['mturk']"><i-lucide-dices /> AMT User
+              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            </a>
+          </Button>
+        </CardContent>
+      </Card>
+
+      <!-- Citizen Science Platform Card -->
+      <Card class="flex flex-col">
+        <CardHeader>
+          <CardTitle>Citizen Science</CardTitle>
+          <CardDescription>
+            Citizen Science is a stand-in for a possible future platform run by the lab.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="flex justify-end flex-1 items-end">
+          <Button
+            id="citizen_tester"
+            as-child
+            variant="default"
+            size="xs"
+            class="is-green"
+          >
+            <a :href="devUrls['citizensci']"><i-lucide-dices /> Citizen Sci User
+              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            </a>
+          </Button>
+        </CardContent>
+      </Card>
+
+      <!-- SONA Platform Card -->
+      <Card class="flex flex-col">
+        <CardHeader>
+          <CardTitle>SONA</CardTitle>
+          <CardDescription>
+            SONA is a platform for running experiments from the university "for credit" pool of students.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="flex justify-end flex-1 items-end">
+          <Button
+            id="sona_tester"
+            as-child
+            variant="default"
+            size="xs"
+            class="is-orange"
+          >
+            <a :href="devUrls['sona']"><i-lucide-dices /> SONA User
+              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            </a>
+          </Button>
+        </CardContent>
+      </Card>
+
+      <!-- SONA Paid Platform Card -->
+      <Card class="flex flex-col">
+        <CardHeader>
+          <CardTitle>SONA Paid</CardTitle>
+          <CardDescription>
+            SONA Paid is a platform for running paid experiments from the university pool.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="flex justify-end flex-1 items-end">
+          <Button
+            id="sona_paid_tester"
+            as-child
+            variant="default"
+            size="xs"
+            class="is-teal"
+          >
+            <a :href="devUrls['sona_paid']"><i-lucide-dices /> SONA Paid User
+              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            </a>
+          </Button>
+        </CardContent>
+      </Card>
+
+      <!-- SPARK Platform Card -->
+      <Card class="flex flex-col">
+        <CardHeader>
+          <CardTitle>SPARK</CardTitle>
+          <CardDescription>
+            SPARK is a recruitment service from the Hartley Lab for adolescent participants of various ages.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="flex justify-end flex-1 items-end">
+          <Button
+            id="spark_tester"
+            as-child
+            variant="default"
+            size="xs"
+            class="is-red"
+          >
+            <a :href="devUrls['spark']"><i-lucide-dices /> SPARK User
+              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            </a>
+          </Button>
+        </CardContent>
+      </Card>
+
+      <!-- PANDA Platform Card -->
+      <Card class="flex flex-col">
+        <CardHeader>
+          <CardTitle>PANDA</CardTitle>
+          <CardDescription>
+            <a href="https://www.discoveriesinaction.org">PANDA</a> (Princeton and NYU Discoveries in Action) is a
+            recruitment platform for younger participants.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="flex justify-end flex-1 items-end">
+          <Button
+            id="panda_tester"
+            as-child
+            variant="default"
+            size="xs"
+            class="is-coral"
+          >
+            <a :href="devUrls['panda']"><i-lucide-dices /> PANDA User
+              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            </a>
+          </Button>
+        </CardContent>
+      </Card>
+
+      <!-- Anonymous Web User Card -->
+      <Card class="flex flex-col">
+        <CardHeader>
+          <CardTitle>Anonymous Web User</CardTitle>
+          <CardDescription>Anonymous web user is not referred by any recruitment service.</CardDescription>
+        </CardHeader>
+        <CardContent class="flex justify-end flex-1 items-end">
+          <Button
+            id="web_tester"
+            as-child
+            variant="default"
+            size="xs"
+            class="is-purple"
+          >
+            <a :href="devUrls['web']"><i-lucide-dices /> Anon Web User
+              <i-lucide-arrow-right class="inline-block ml-1 w-4 h-4" />
+            </a>
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.is-blue{background-color:#66d1ff;color:#393939}.is-red{background-color:#ff6685;color:#393939}.is-light-yellow{background-color:#f5d58a;color:#393939}.is-yellow{background-color:#ffb70f;color:#393939}.is-pink{background-color:pink;color:#393939}.is-green{background-color:#5be4a6;color:#393939}.is-orange{background-color:#ffb366;color:#393939}.is-teal{background-color:#66d9cc;color:#393939}.is-coral{background-color:#ff8c82;color:#393939}.is-purple{background-color:#ebaeff;border:none;color:#393939}@media screen and (max-width:599px){.text-4xl{font-size:1.5em}}@media screen and (max-width:418px){.text-4xl{display:none}}
+</style>

package/dist/runtime/components/dev/RecruitmentChooserView.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/dev/ResponsiveDeviceContainer.d.vue.ts

@@ -0,0 +1,12 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+} & {
+    default?: ((props: {}) => any) | undefined;
+};