@nyuccl/smile 0.2.0-beta.0

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

@@ -0,0 +1,58 @@
+<script setup>
+import { computed } from "vue";
+const api = useViewAPI();
+const cond = api.getConditionByName("instructionsVersion");
+const instText = computed(() => {
+  if (cond === "1") {
+    return "instructions version 1";
+  }
+  if (cond === "2") {
+    return "instructions version 2";
+  }
+  if (cond === "3") {
+    return "instructions version 3";
+  }
+  return "no condition set";
+});
+function finish(_goto) {
+  api.goFirstStep();
+  api.goNextView();
+}
+</script>
+
+<template>
+  <!-- Main instruction container with responsive layout -->
+  <ConstrainedTaskWindow
+    variant="ghost"
+    :responsive-u-i="api.config.responsiveUI"
+    :width="api.config.windowsizerRequest.width"
+    :height="api.config.windowsizerRequest.height"
+  >
+    <!-- Instruction content wrapper -->
+    <div class="w-[80%] h-[80%]">
+      <!-- Instruction header with icon -->
+      <h1 class="text-2xl font-bold mb-4">
+        <i-material-symbols-integration-instructions class="inline-block mr-2 text-3xl" /> Instructions
+      </h1>
+
+      <!-- Dynamic instruction text based on condition -->
+      <p class="text-left text-lg mb-4">
+        {{ instText }}
+      </p>
+
+      <!-- Visual separator -->
+      <hr class="border-gray-300 my-4">
+
+      <!-- Navigation button container -->
+      <div class="flex justify-end">
+        <Button
+          variant="default"
+          @click="finish()"
+        >
+          next
+          <i-fa6-solid-arrow-right />
+        </Button>
+      </div>
+    </div>
+  </ConstrainedTaskWindow>
+</template>

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

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

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

@@ -0,0 +1,137 @@
+<script setup>
+import { onMounted, ref } from "vue";
+const api = useAPI();
+const props = defineProps({
+  estimated_time: {
+    type: String,
+    required: true
+  },
+  payrate: {
+    type: String,
+    required: true
+  }
+});
+const mturkPreview = ref(true);
+const launched = ref(false);
+const completionCode = ref("");
+const formError = ref("");
+const redirectURL = ref("/#/welcome/mturk/?");
+onMounted(() => {
+  const urlParams = api.route.query;
+  const queryStr = api.route.fullPath.split("?");
+  if (queryStr.length == 2) {
+    redirectURL.value += queryStr[1];
+  }
+  api.log.debug(`${redirectURL.value}`);
+  if (urlParams.assignmentId && urlParams.hitId && urlParams.workerId) {
+    if (urlParams.assignmentId === "ASSIGNMENT_ID_NOT_AVAILABLE") {
+      api.log.debug("AMT mode, but no assignment (preview mode)");
+      mturkPreview.value = true;
+    } else {
+      api.log.debug("AMT mode, with assignment");
+      mturkPreview.value = false;
+    }
+  }
+});
+function clicked() {
+  launched.value = !launched.value;
+  window.open(redirectURL.value, "_blank");
+}
+const turkSubmitTo = "https://www.mturk.com/mturk/externalSubmit";
+function submitForm(event) {
+  event.preventDefault();
+  if (!completionCode.value.trim()) {
+    formError.value = "Completion code is required";
+    return;
+  }
+  formError.value = "";
+  api.store.cookieState.completionCode = completionCode.value;
+  api.log.debug("submitting to AMT");
+  const form = event.target;
+  form.submit();
+}
+</script>
+
+<template>
+  <!-- Main container with centered layout -->
+  <div class="mt-20 w-4/5 mx-auto">
+    <!-- Study preview section - shown when in MTurk preview mode -->
+    <StudyPreviewText
+      v-if="mturkPreview"
+      :estimated_time="props.estimated_time"
+      :payrate="payrate"
+    />
+
+    <!-- Assignment mode section - shown when worker has accepted the HIT -->
+    <div v-else>
+      <!-- Header section -->
+      <h1 class="text-2xl font-bold mb-4">
+        Thanks for accepting our HIT
+      </h1>
+
+      <!-- Task completion section - shown after study is launched -->
+      <div
+        v-if="launched"
+        class="mx-auto"
+      >
+        <!-- Instructions for completion -->
+        <p class="text-left mb-4">
+          Please complete the task in the window that was launched. When you are finished you will be provided with a
+          completion code which you should copy and enter here.
+        </p>
+
+        <!-- Visual separator -->
+        <hr class="border-gray-300 my-4">
+
+        <!-- Completion code submission form -->
+        <form
+          :action="turkSubmitTo"
+          method="post"
+          @submit="submitForm"
+        >
+          <div class="space-y-4">
+            <!-- Completion code input field -->
+            <div>
+              <label
+                for="completioncode"
+                class="block text-sm font-medium mb-2"
+              >Completion Code</label>
+              <Input
+                id="completioncode"
+                v-model="completionCode"
+                name="completioncode"
+                placeholder="Paste your completion code here"
+                :class="{ 'border-red-500': formError }"
+              />
+              <p
+                v-if="formError"
+                class="text-red-500 text-sm mt-1"
+              >
+                {{ formError }}
+              </p>
+            </div>
+
+            <!-- Submit button -->
+            <Button
+              type="submit"
+              variant="default"
+            >
+              Submit to Mechanical Turk
+            </Button>
+          </div>
+        </form>
+      </div>
+
+      <!-- Launch button section - shown before study is launched -->
+      <div v-else>
+        <Button
+          variant="default"
+          target="_new"
+          @click="clicked()"
+        >
+          Begin Task in New Window
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>

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

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

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

@@ -0,0 +1,93 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    subtitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    siteAuthor: {
+        type: ObjectConstructor;
+        default: () => {
+            name: string;
+            link: string;
+        };
+    };
+    projectAuthors: {
+        type: ArrayConstructor;
+        default: () => {
+            name: string;
+            link: string;
+            affiliation: string;
+        }[];
+    };
+    info: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    description: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: () => string[];
+    };
+    sections: {
+        type: ArrayConstructor;
+        default: () => {
+            title: string;
+            description: string;
+            label: string;
+            view: string;
+        }[];
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    subtitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    siteAuthor: {
+        type: ObjectConstructor;
+        default: () => {
+            name: string;
+            link: string;
+        };
+    };
+    projectAuthors: {
+        type: ArrayConstructor;
+        default: () => {
+            name: string;
+            link: string;
+            affiliation: string;
+        }[];
+    };
+    info: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    description: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: () => string[];
+    };
+    sections: {
+        type: ArrayConstructor;
+        default: () => {
+            title: string;
+            description: string;
+            label: string;
+            view: string;
+        }[];
+    };
+}>> & Readonly<{}>, {
+    title: string;
+    subtitle: string;
+    siteAuthor: Record<string, any>;
+    projectAuthors: unknown[];
+    info: unknown[];
+    description: string | unknown[];
+    sections: unknown[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,254 @@
+<script setup>
+import { computed } from "vue";
+import { ArrowRight } from "lucide-vue-next";
+const api = useAPI();
+const props = defineProps({
+  title: {
+    type: String,
+    default: "This is my default title for a project"
+  },
+  subtitle: {
+    type: String,
+    default: "This is a subtitle for my project which makes it seem interesting and relevant to a wide audience."
+  },
+  siteAuthor: {
+    type: Object,
+    default: () => ({
+      name: "Todd Gureckis",
+      link: "https://gureckislab.org"
+    })
+  },
+  projectAuthors: {
+    type: Array,
+    default: () => [
+      {
+        name: "Todd Gureckis",
+        link: "https://todd.gureckislab.org",
+        affiliation: "New York University"
+      }
+    ]
+  },
+  info: {
+    type: Array,
+    default: () => []
+  },
+  description: {
+    type: [String, Array],
+    default: () => [
+      "This is a description of this project. Presentation mode is a nice way to share the experiment with the world.",
+      "Use the links below to navigate to different parts of the experiment, or use the navigation bar at the top of the page."
+    ]
+  },
+  sections: {
+    type: Array,
+    default: () => [
+      {
+        title: "Start from beginning",
+        description: "Start the experiment from the very beginning as if you were a real participant. Your data will not be saved.",
+        label: "Start",
+        view: "welcome_anonymous"
+      }
+    ]
+  }
+});
+const descriptionParagraphs = computed(() => {
+  if (typeof props.description === "string") return [props.description];
+  return props.description;
+});
+const uniqueAffiliations = computed(() => {
+  const affiliations = props.projectAuthors.flatMap(
+    (author) => Array.isArray(author.affiliation) ? author.affiliation : [author.affiliation]
+  );
+  return [...new Set(affiliations)];
+});
+function getUniqueAffiliations(affiliation) {
+  return Array.isArray(affiliation) ? affiliation : [affiliation];
+}
+function getAffiliationIndex(affiliation) {
+  return uniqueAffiliations.value.indexOf(affiliation) + 1;
+}
+function goToSection(section) {
+  if (section.href) {
+    window.location.href = section.href;
+  } else if (section.view) {
+    api.goToView(section.view);
+  }
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <!-- Header Section -->
+    <header class="bg-muted/50 border-b py-6">
+      <div class="w-2/3 mx-auto px-6 py-8">
+        <h1 class="text-5xl font-bold text-foreground mb-4 leading-tight">
+          {{ title }}
+        </h1>
+        <p class="text-2xl text-muted-foreground leading-relaxed">
+          {{ subtitle }}
+        </p>
+      </div>
+    </header>
+
+    <!-- Author Information Section -->
+    <section class="border-b bg-background">
+      <div class="w-2/3 mx-auto px-6 py-8">
+        <div class="grid grid-cols-1 md:grid-cols-12 gap-8">
+          <!-- Authors -->
+          <div class="md:col-span-2">
+            <h3 class="text-[0.65rem] font-extralight uppercase tracking-widest text-muted-foreground mb-4">
+              Authors
+            </h3>
+            <div class="space-y-2">
+              <div
+                v-for="(author, index) in projectAuthors"
+                :key="index"
+                class="text-[0.9rem]"
+              >
+                <template v-if="author.link">
+                  <a
+                    :href="author.link"
+                    class="text-foreground hover:text-primary transition-colors font-medium"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {{ author.name }}
+                  </a>
+                </template>
+                <template v-else>
+                  <span class="text-foreground font-medium">{{ author.name }}</span>
+                </template>
+                <sup class="text-xs text-muted-foreground">
+                  <template
+                    v-for="(aff, affIndex) in getUniqueAffiliations(author.affiliation)"
+                    :key="affIndex"
+                  >
+                    {{ getAffiliationIndex(aff)
+                    }}{{ affIndex < getUniqueAffiliations(author.affiliation).length - 1 ? ',' : '' }}
+                  </template>
+                </sup>
+              </div>
+            </div>
+          </div>
+
+          <!-- Affiliations -->
+          <div class="md:col-span-3">
+            <h3 class="text-[0.65rem] font-extralight uppercase tracking-widest text-muted-foreground mb-4">
+              Affiliations
+            </h3>
+            <div class="space-y-3">
+              <div
+                v-for="(aff, index) in uniqueAffiliations"
+                :key="index"
+                class="text-[0.9rem]"
+              >
+                <sup class="text-xs">{{ index + 1 }}</sup>&nbsp;{{ aff }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Project Info -->
+          <div
+            v-if="info.length"
+            class="md:col-span-4 md:col-start-9"
+          >
+            <div class="space-y-4">
+              <div
+                v-for="item in info"
+                :key="item.title"
+              >
+                <h3 class="text-[0.65rem] font-extralight uppercase tracking-widest text-muted-foreground mb-2">
+                  {{ item.title }}
+                </h3>
+                <div class="text-[0.9rem]">
+                  <a
+                    v-if="item.link"
+                    :href="item.link"
+                    class="text-primary hover:text-primary/80 transition-colors flex items-center gap-1"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {{ item.data }}
+                  </a>
+                  <span
+                    v-else
+                    class="text-foreground"
+                  >{{ item.data }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Main Content -->
+    <main class="w-2/3 mx-auto px-6 py-12">
+      <!-- Project Description -->
+      <div class="prose prose-gray max-w-none mb-12">
+        <p
+          v-for="(paragraph, index) in descriptionParagraphs"
+          :key="index"
+          class="text-lg text-muted-foreground leading-relaxed mb-4"
+        >
+          {{ paragraph }}
+        </p>
+      </div>
+
+      <Separator class="my-8" />
+
+      <!-- Navigation Sections -->
+      <div class="space-y-8">
+        <template
+          v-for="(section, index) in sections"
+          :key="index"
+        >
+          <div>
+            <h3 class="text-xl font-semibold text-foreground mb-3">
+              {{ section.title }}
+            </h3>
+            <p
+              v-if="section.description"
+              class="text-lg text-muted-foreground mb-4"
+            >
+              {{ section.description }}
+            </p>
+            <Button
+              size="sm"
+              @click="goToSection(section)"
+            >
+              {{ section.label || section.title }}
+              <ArrowRight class="w-4 h-4 ml-2 inline" />
+            </Button>
+          </div>
+          <Separator v-if="index < sections.length - 1" />
+        </template>
+      </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="bg-muted/50 border-t mt-16">
+      <div class="w-2/3 mx-auto px-6 py-8 text-center">
+        <p class="text-sm text-muted-foreground">
+          Created by
+          <a
+            :href="siteAuthor.link"
+            class="text-primary hover:text-primary/80 transition-colors font-medium"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {{ siteAuthor.name }}
+          </a>
+          using
+          <a
+            href="https://smile.gureckislab.org"
+            class="text-primary hover:text-primary/80 transition-colors font-medium"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            SMILE</a>.
+        </p>
+      </div>
+    </footer>
+  </div>
+</template>

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

@@ -0,0 +1,93 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    subtitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    siteAuthor: {
+        type: ObjectConstructor;
+        default: () => {
+            name: string;
+            link: string;
+        };
+    };
+    projectAuthors: {
+        type: ArrayConstructor;
+        default: () => {
+            name: string;
+            link: string;
+            affiliation: string;
+        }[];
+    };
+    info: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    description: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: () => string[];
+    };
+    sections: {
+        type: ArrayConstructor;
+        default: () => {
+            title: string;
+            description: string;
+            label: string;
+            view: string;
+        }[];
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    subtitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    siteAuthor: {
+        type: ObjectConstructor;
+        default: () => {
+            name: string;
+            link: string;
+        };
+    };
+    projectAuthors: {
+        type: ArrayConstructor;
+        default: () => {
+            name: string;
+            link: string;
+            affiliation: string;
+        }[];
+    };
+    info: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    description: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: () => string[];
+    };
+    sections: {
+        type: ArrayConstructor;
+        default: () => {
+            title: string;
+            description: string;
+            label: string;
+            view: string;
+        }[];
+    };
+}>> & Readonly<{}>, {
+    title: string;
+    subtitle: string;
+    siteAuthor: Record<string, any>;
+    projectAuthors: unknown[];
+    info: unknown[];
+    description: string | unknown[];
+    sections: unknown[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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