@nyuccl/smile 0.2.0-beta.0

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

@@ -0,0 +1,451 @@
+<script setup>
+import Clipboard from "clipboard";
+import { onMounted, ref } from "vue";
+const api = useAPI();
+const alreadyCompleted = !!api.store.cookieState.completionCode;
+const isUploading = ref(!alreadyCompleted);
+const uploadProgress = ref(alreadyCompleted ? 100 : 0);
+const completionCode = ref(
+  alreadyCompleted ? api.store.cookieState.completionCode : api.computeCompletionCode()
+);
+onMounted(() => {
+  const clipboard = new Clipboard("[data-clipboard-target]");
+  clipboard.on("success", (e) => {
+    api.log.debug(`code copied to clipboard ${e.trigger.id}`);
+  });
+  if (alreadyCompleted) return;
+  let saveComplete = false;
+  const minDisplayTime = 2e3;
+  const mountTime = Date.now();
+  Promise.resolve(api.saveData(true)).then(() => {
+    api.setCompletionCode(completionCode.value);
+    saveComplete = true;
+  }).catch(() => {
+    saveComplete = true;
+  });
+  const updateProgress = () => {
+    const elapsed = Date.now() - mountTime;
+    if (saveComplete && elapsed >= minDisplayTime) {
+      uploadProgress.value = 100;
+      isUploading.value = false;
+      return;
+    }
+    const fakeProgress = Math.min(elapsed / 3e3, 0.8);
+    const eased = 1 - Math.pow(1 - fakeProgress, 2);
+    uploadProgress.value = Math.round(eased * 100);
+    requestAnimationFrame(updateProgress);
+  };
+  requestAnimationFrame(updateProgress);
+});
+</script>
+
+<template>
+  <!-- Upload progress screen -->
+  <div
+    v-if="isUploading"
+    class="w-full h-screen flex flex-col items-center mt-30"
+  >
+    <div class="w-4/5 max-w-md text-center">
+      <h1 class="text-3xl font-bold mb-4">
+        Uploading Your Data
+      </h1>
+      <p class="text-lg text-muted-foreground mb-8">
+        Do not close your browser window yet!
+      </p>
+      <Progress
+        :model-value="uploadProgress"
+        class="h-3 mb-4"
+      />
+      <p class="text-sm text-muted-foreground">
+        {{ uploadProgress }}%
+      </p>
+    </div>
+  </div>
+
+  <!-- Main container with responsive padding and centering -->
+  <div
+    v-else
+    class="w-full mx-auto py-10"
+  >
+    <div class="w-4/5 mx-auto text-left">
+      <!-- Prolific recruitment service completion -->
+      <div v-if="api.getRecruitmentService() == 'prolific'">
+        <TitleTwoCol
+          left-first
+          left-width="w-1/3"
+          :responsive-u-i="api.config.responsiveUI"
+        >
+          <template #title>
+            <h1 class="text-3xl font-bold mb-4">
+              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
+            </h1>
+            <p class="text-lg mb-8">
+              Please click the button below to begin the process of payment. This will notify Prolific you successfully
+              completed the task. Your work will be approved within several hours and any performance related bonuses
+              will be assigned at that time. We really appreciate your time.
+            </p>
+          </template>
+          <template #left>
+            <div class="text-left text-muted-foreground">
+              <h3 class="text-lg font-bold mb-2">
+                Payment Process
+              </h3>
+              <p class="text-sm text-muted-foreground">
+                Click the button to complete your submission and receive payment through Prolific.
+              </p>
+            </div>
+          </template>
+          <template #right>
+            <div class="border border-border text-left bg-muted p-6 rounded-lg">
+              <Button
+                variant="default"
+                as="a"
+                :href="`https://app.prolific.co/submissions/complete?cc=${completionCode}`"
+              >
+                Submit my work to Prolific
+                <i-fa6-solid-arrow-right />
+              </Button>
+            </div>
+          </template>
+        </TitleTwoCol>
+      </div>
+
+      <!-- CloudResearch recruitment service completion -->
+      <div v-if="api.getRecruitmentService() == 'cloudresearch'">
+        <TitleTwoCol
+          left-first
+          left-width="w-1/3"
+          :responsive-u-i="api.config.responsiveUI"
+        >
+          <template #title>
+            <h1 class="text-3xl font-bold mb-4">
+              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
+            </h1>
+            <p class="text-lg mb-8">
+              Please copy the code displayed below (or click the button) and paste it into the Mechanical Turk window to
+              begin the process of payment. Your work will be approved within several hours and any performance related
+              bonuses will be assigned at that time. We really appreciate your time.
+            </p>
+          </template>
+          <template #left>
+            <div class="text-left text-muted-foreground">
+              <h3 class="text-lg font-bold mb-2">
+                Completion Code
+              </h3>
+              <p class="text-sm text-muted-foreground">
+                Copy this unique code and paste it into the Mechanical Turk submission form.
+              </p>
+            </div>
+          </template>
+          <template #right>
+            <div class="border border-border text-left bg-muted p-6 rounded-lg">
+              <h3 class="text-lg font-semibold mb-4 text-foreground">
+                Unique completion code:
+              </h3>
+              <div class="flex items-center gap-4 mb-4">
+                <Input
+                  v-model="completionCode"
+                  readonly
+                  class="text-3xl completioncode-cloudresearch"
+                />
+                <Button
+                  variant="default"
+                  data-clipboard-target=".completioncode-cloudresearch"
+                >
+                  Copy Code
+                  <i-fa6-solid-clipboard />
+                </Button>
+              </div>
+            </div>
+          </template>
+        </TitleTwoCol>
+      </div>
+
+      <!-- MTurk recruitment service completion -->
+      <div v-if="api.getRecruitmentService() == 'mturk'">
+        <TitleTwoCol
+          left-first
+          left-width="w-1/3"
+          :responsive-u-i="api.config.responsiveUI"
+        >
+          <template #title>
+            <h1 class="text-3xl font-bold mb-4">
+              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
+            </h1>
+            <p class="text-lg mb-8">
+              Please verify the code displayed below is visible in the form on the Mechanical Turk website. If it is not
+              click the button to copy it to your clipboard and paste it into the Mechanical Turk window to begin the
+              process of payment. Your work will be approved within several hours and any performance related bonuses
+              will be assigned at that time. We really appreciate your time.
+            </p>
+          </template>
+          <template #left>
+            <div class="text-left text-muted-foreground">
+              <h3 class="text-lg font-bold mb-2">
+                Completion Code
+              </h3>
+              <p class="text-sm text-muted-foreground">
+                Verify this code appears in your Mechanical Turk submission form, or copy it manually.
+              </p>
+            </div>
+          </template>
+          <template #right>
+            <div class="border border-border text-left bg-muted p-6 rounded-lg">
+              <h3 class="text-lg font-semibold mb-4 text-foreground">
+                Unique completion code:
+              </h3>
+              <div class="flex items-center gap-4 mb-4">
+                <Input
+                  v-model="completionCode"
+                  readonly
+                  class="text-2xl completioncode-mturk"
+                />
+                <Button
+                  variant="default"
+                  data-clipboard-target=".completioncode-mturk"
+                >
+                  Copy Code
+                  <i-fa6-solid-clipboard />
+                </Button>
+              </div>
+            </div>
+          </template>
+        </TitleTwoCol>
+      </div>
+
+      <!-- Citizen Science recruitment service completion -->
+      <div v-if="api.getRecruitmentService() == 'citizensci'">
+        <TitleTwoCol
+          left-first
+          left-width="w-1/3"
+          :responsive-u-i="api.config.responsiveUI"
+        >
+          <template #title>
+            <h1 class="text-3xl font-bold mb-4">
+              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
+            </h1>
+            <p class="text-lg mb-8">
+              This still needs to be implemented
+            </p>
+          </template>
+          <template #left>
+            <div class="text-left text-muted-foreground">
+              <h3 class="text-lg font-bold mb-2">
+                Submission
+              </h3>
+              <p class="text-sm text-muted-foreground">
+                Click the button to complete your submission.
+              </p>
+            </div>
+          </template>
+          <template #right>
+            <div class="border border-border text-left bg-muted p-6 rounded-lg">
+              <Button
+                variant="default"
+                as="a"
+                :href="!api.config.anonymousMode ? 'http://gureckislab.org' : 'http://google.com'"
+              >
+                Submit my work
+                <i-fa6-solid-arrow-right />
+              </Button>
+            </div>
+          </template>
+        </TitleTwoCol>
+      </div>
+
+      <!-- SONA (credit) recruitment service completion -->
+      <div v-if="api.getRecruitmentService() == 'sona'">
+        <TitleTwoCol
+          left-first
+          left-width="w-1/3"
+          :responsive-u-i="api.config.responsiveUI"
+        >
+          <template #title>
+            <h1 class="text-3xl font-bold mb-4">
+              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks, let's record your credit!
+            </h1>
+            <p class="text-lg mb-8">
+              Please click the button below to return to SONA and receive credit for completing this study.
+              We really appreciate your participation.
+            </p>
+          </template>
+          <template #left>
+            <div class="text-left text-muted-foreground">
+              <h3 class="text-lg font-bold mb-2">
+                Credit Assignment
+              </h3>
+              <p class="text-sm text-muted-foreground">
+                Click the button to return to SONA and automatically receive your course credit.
+              </p>
+            </div>
+          </template>
+          <template #right>
+            <div class="border border-border text-left bg-muted p-6 rounded-lg">
+              <Button
+                variant="default"
+                as="a"
+                :href="`${api.config.sona.url}/webstudy_credit.aspx?experiment_id=${api.config.sona.experimentId}&credit_token=${api.config.sona.creditToken}&survey_code=${api.store.private.recruitmentInfo.survey_code}`"
+              >
+                Return to SONA for credit
+                <i-fa6-solid-arrow-right />
+              </Button>
+            </div>
+          </template>
+        </TitleTwoCol>
+      </div>
+
+      <!-- SONA (paid) recruitment service completion -->
+      <div v-if="api.getRecruitmentService() == 'sona_paid'">
+        <TitleTwoCol
+          left-first
+          left-width="w-1/3"
+          :responsive-u-i="api.config.responsiveUI"
+        >
+          <template #title>
+            <h1 class="text-3xl font-bold mb-4">
+              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks, let's begin the payment process!
+            </h1>
+            <p class="text-lg mb-8">
+              Please click the button below to return to SONA and begin the payment process.
+              Your work will be approved and payment processed shortly. We really appreciate your time.
+            </p>
+          </template>
+          <template #left>
+            <div class="text-left text-muted-foreground">
+              <h3 class="text-lg font-bold mb-2">
+                Payment Process
+              </h3>
+              <p class="text-sm text-muted-foreground">
+                Click the button to return to SONA and receive your payment.
+              </p>
+            </div>
+          </template>
+          <template #right>
+            <div class="border border-border text-left bg-muted p-6 rounded-lg">
+              <Button
+                variant="default"
+                as="a"
+                :href="`${api.config.sonaPaid.url}/webstudy_credit.aspx?experiment_id=${api.config.sonaPaid.experimentId}&credit_token=${api.config.sonaPaid.creditToken}&survey_code=${api.store.private.recruitmentInfo.survey_code}`"
+              >
+                Return to SONA for payment
+                <i-fa6-solid-arrow-right />
+              </Button>
+            </div>
+          </template>
+        </TitleTwoCol>
+      </div>
+
+      <!-- SPARK recruitment service completion -->
+      <div v-if="api.getRecruitmentService() == 'spark'">
+        <TitleTwoCol
+          left-first
+          left-width="w-1/3"
+          :responsive-u-i="api.config.responsiveUI"
+        >
+          <template #title>
+            <h1 class="text-3xl font-bold mb-4">
+              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks for your contribution to science!
+            </h1>
+            <p class="text-lg mb-8">
+              Please click the button below to return to SPARK and complete your session.
+              We really appreciate your participation.
+            </p>
+          </template>
+          <template #left>
+            <div class="text-left text-muted-foreground">
+              <h3 class="text-lg font-bold mb-2">
+                Session Complete
+              </h3>
+              <p class="text-sm text-muted-foreground">
+                Click the button to return to SPARK and finalize your session.
+              </p>
+            </div>
+          </template>
+          <template #right>
+            <div class="border border-border text-left bg-muted p-6 rounded-lg">
+              <Button
+                variant="default"
+                as="a"
+                :href="`${api.config.spark.completionUrl}/${api.store.private.recruitmentInfo.subject_ID}`"
+              >
+                Return to SPARK
+                <i-fa6-solid-arrow-right />
+              </Button>
+            </div>
+          </template>
+        </TitleTwoCol>
+      </div>
+
+      <!-- PANDA recruitment service completion -->
+      <div v-if="api.getRecruitmentService() == 'panda'">
+        <TitleTwoCol
+          left-first
+          left-width="w-1/3"
+          :responsive-u-i="api.config.responsiveUI"
+        >
+          <template #title>
+            <h1 class="text-3xl font-bold mb-4">
+              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks for your contribution to science!
+            </h1>
+            <p class="text-lg mb-8">
+              Your data have been successfully recorded. You may now close this window or follow any
+              additional instructions provided by the research team.
+            </p>
+          </template>
+          <template #left>
+            <div class="text-left text-muted-foreground">
+              <h3 class="text-lg font-bold mb-2">
+                Study Complete
+              </h3>
+              <p class="text-sm text-muted-foreground">
+                Thank you for participating. Your contribution helps advance scientific knowledge.
+              </p>
+            </div>
+          </template>
+          <template #right>
+            <div class="border border-border text-left bg-muted p-6 rounded-lg">
+              <p class="text-foreground">
+                You may now safely close this browser window.
+              </p>
+            </div>
+          </template>
+        </TitleTwoCol>
+      </div>
+
+      <!-- Web recruitment service completion -->
+      <div v-if="api.getRecruitmentService() == 'web'">
+        <TitleTwoCol
+          left-first
+          left-width="w-1/3"
+          :responsive-u-i="api.config.responsiveUI"
+        >
+          <template #title>
+            <h1 class="text-3xl font-bold mb-4">
+              <i-fa6-solid-square-check class="inline mr-2" />&nbsp;Thanks for your contribution to science!
+            </h1>
+            <p class="text-lg mb-8">
+              Your data have been successfully recorded and you can close this window or navigate to another page.
+            </p>
+          </template>
+          <template #left>
+            <div class="text-left text-muted-foreground">
+              <h3 class="text-lg font-bold mb-2">
+                Study Complete
+              </h3>
+              <p class="text-sm text-muted-foreground">
+                Thank you for participating in our research study. Your contribution helps advance scientific knowledge.
+              </p>
+            </div>
+          </template>
+          <template #right>
+            <div class="border border-border text-left bg-muted p-6 rounded-lg">
+              <p class="text-foreground">
+                You may now safely close this browser window.
+              </p>
+            </div>
+          </template>
+        </TitleTwoCol>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/builtins/ThanksView.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/WindowSizerView.d.vue.ts

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

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

@@ -0,0 +1,94 @@
+<script setup>
+const api = useViewAPI();
+const props = defineProps(["triggered"]);
+function finish() {
+  api.verifyVisibility(true);
+  api.goNextView();
+}
+</script>
+
+<template>
+  <!-- Main container with centered content -->
+  <div class="flex justify-center m-2 mt-5">
+    <!-- Resizable window target box with animated border -->
+    <div
+      class="bg-window-sizer-bg border-animation flex items-center justify-center"
+      :style="{
+        width: api.config.windowsizerRequest.width + 'px',
+        height: api.config.windowsizerRequest.height + 'px',
+        minWidth: api.config.windowsizerRequest.width + 'px',
+        minHeight: api.config.windowsizerRequest.height + 'px',
+      }"
+    >
+      <!-- Initial state: Instructions and continue button -->
+      <div
+        v-if="!props.triggered"
+        class="w-2/3 pt-8 mx-auto text-center"
+      >
+        <!-- Resize icon -->
+        <div class="text-4xl text-window-sizer-text mb-4 flex justify-center">
+          <i-fa6-solid-arrows-up-down-left-right />
+        </div>
+
+        <!-- Main instruction text -->
+        <h1 class="text-xl font-semibold text-window-sizer-text mb-4">
+          Please adjust the size of your browser window until <b>ALL</b> four edges of this box are visible.
+        </h1>
+
+        <!-- Warning separator -->
+        <hr class="border-window-sizer-border my-4">
+
+        <!-- Warning message about withdrawal -->
+        <div class="text-sm text-left mb-4 text-window-sizer-text">
+          <b>Warning</b>: If you can't resize your window and see the entire box please click the red "withdraw" button
+          at the top of the page and return the task. You need to be able view the entire page at once.
+        </div>
+
+        <!-- Action separator -->
+        <hr class="border-window-sizer-border my-4">
+
+        <!-- Continue button -->
+        <div class="mt-8">
+          <Button
+            size="lg"
+            class="bg-window-sizer-text text-window-sizer-bg hover:bg-window-sizer-bg hover:bg-window-sizer-border"
+            @click="finish()"
+          >
+            It is visible now, I'm ready
+            <i-fa6-solid-arrow-right />
+          </Button>
+        </div>
+      </div>
+
+      <!-- Triggered state: Re-adjustment instructions -->
+      <div
+        v-else
+        class="w-2/3 pt-8 mx-auto text-center"
+      >
+        <!-- Resize icon -->
+        <span class="text-4xl text-window-sizer-text mb-4 flex justify-center">
+          <i-fa6-solid-arrows-up-down-left-right />
+        </span>
+
+        <!-- Re-adjustment instruction text -->
+        <h1 class="text-xl font-semibold text-window-sizer-text mb-4">
+          <b>We don't want you to miss anything!</b><br>Please re-adjust the size of your browser window until
+          <b>ALL</b> four edges of this box are visible.
+        </h1>
+
+        <!-- Warning separator -->
+        <hr class="border-window-sizer-border my-4">
+
+        <!-- Warning message about withdrawal -->
+        <div class="text-sm text-left text-window-sizer-text">
+          <b>Warning</b>: If you can't resize your window and see the entire box please click the red "withdraw" button
+          at the top of the page and return the task. You need to be able view the entire page at once.
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.border-animation{animation:border-dance .5s linear infinite;background-image:linear-gradient(90deg,var(--window-sizer-border) 50%,transparent 50%),linear-gradient(90deg,var(--window-sizer-border) 50%,transparent 50%),linear-gradient(0deg,var(--window-sizer-border) 50%,transparent 50%),linear-gradient(0deg,var(--window-sizer-border) 50%,transparent 50%);background-position:0 0,100% 100%,0 100%,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-size:15px 2px,15px 2px,2px 15px,2px 15px;border-radius:20px}@keyframes border-dance{0%{background-position:0 0,100% 100%,0 100%,100% 0}to{background-position:left 15px top,right 15px bottom,left bottom 15px,right top 15px}}
+</style>

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

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

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