@lookit/templates 1.0.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookit/templates",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "CHS jsPsych trial templates and their translations",
   "homepage": "https://github.com/lookit/lookit-jspsych#readme",
   "bugs": {
@@ -24,14 +24,21 @@
     "dev": "rollup --config rollup.config.dev.mjs --watch",
     "test": "jest --coverage"
   },
-  "devDependencies": {
-    "@jspsych/config": "^2.0.0",
+  "dependencies": {
     "handlebars": "^4.7.8",
+    "i18next": "^23.16.4",
+    "i18next-icu": "^2.3.0",
+    "js-yaml": "^4.1.0"
+  },
+  "devDependencies": {
+    "@jspsych/config": "^3.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@types/js-yaml": "^4.0.9",
     "rollup-plugin-dotenv": "^0.5.1",
-    "rollup-plugin-polyfill-node": "^0.13.0"
+    "rollup-plugin-string": "^3.0.0"
   },
   "peerDependencies": {
-    "@lookit/data": "^0.1.0",
-    "jspsych": "^8.0.2"
+    "@lookit/data": "^0.2.0",
+    "jspsych": "^8.0.3"
   }
 }

package/src/exitSurveyTemplate.ts

@@ -0,0 +1,180 @@
+import { LookitWindow } from "@lookit/data/dist/types";
+import i18next from "i18next";
+import { PluginInfo, TrialType } from "jspsych";
+import { setLocale } from "./utils";
+
+declare const window: LookitWindow;
+
+/**
+ * Class to augment and translate the exit survey JSON based on user set
+ * parameters.
+ */
+class ExitSurveyJson {
+  private names = <const>{
+    birthDate: "birthDate",
+    databraryShare: "databraryShare",
+    useOfMedia: "useOfMedia",
+    withdrawal: "withdrawal",
+    feedback: "feedback",
+  };
+  public survey = {
+    pages: [
+      {
+        elements: [
+          {
+            description: "exp-lookit-exit-survey.why-birthdate",
+            inputType: "date",
+            isRequired: true,
+            maxValueExpression: "today()",
+            name: this.names.birthDate,
+            title: "exp-lookit-exit-survey.confirm-birthdate",
+            type: "text",
+          },
+          {
+            description: "exp-lookit-exit-survey.databrary-info",
+            enableIf: "({withdrawal} empty) or ({withdrawal.length} = 0)",
+            isRequired: true,
+            name: this.names.databraryShare,
+            title: "exp-lookit-exit-survey.q-databrary",
+            type: "boolean",
+            valueFalse: "no",
+            valueTrue: "yes",
+          },
+          {
+            choices: [
+              {
+                text: "exp-lookit-exit-survey.private-option-part-1",
+                value: "private",
+              },
+              {
+                text: "exp-lookit-exit-survey.scientific-option",
+                value: "scientific",
+              },
+              {
+                text: "exp-lookit-exit-survey.publicity-option",
+                value: "public",
+              },
+            ],
+            description: "",
+            enableIf: "({withdrawal} empty) or ({withdrawal.length} = 0)",
+            isRequired: true,
+            name: this.names.useOfMedia,
+            title: "exp-lookit-exit-survey.acceptable-use-header",
+            type: "radiogroup",
+          },
+          {
+            choices: [
+              {
+                text: "exp-lookit-exit-survey.withdrawal-details",
+                value: true,
+              },
+            ],
+            defaultValue: [],
+            isRequired: false,
+            name: this.names.withdrawal,
+            title: "exp-lookit-exit-survey.withdrawal-header",
+            type: "checkbox",
+          },
+          {
+            autoGrow: true,
+            name: this.names.feedback,
+            rows: 3,
+            title: "exp-lookit-exit-survey.feedback-label",
+            type: "comment",
+          },
+        ],
+        name: "page1",
+      },
+    ],
+    showQuestionNumbers: "off",
+  };
+
+  /**
+   * Adjust survey json to meet user's parameters.
+   *
+   * @param trial - Trial data including user supplied parameters.
+   */
+  public constructor(private trial: TrialType<PluginInfo>) {
+    this.showDatabraryOptions();
+    this.additionalVideoPrivacyText();
+    this.privateLevelOnly();
+    this.translation();
+  }
+
+  /** Alter survey to show Databrary options. */
+  private showDatabraryOptions() {
+    if (!this.trial.show_databrary_options) {
+      const survey_elements = this.survey.pages[0].elements;
+      const databrary_share_element_idx = survey_elements.findIndex(
+        (element) => element.name === this.names.databraryShare,
+      );
+      survey_elements.splice(databrary_share_element_idx, 1);
+    }
+  }
+
+  /** Alter survey to contain additional video privacy text. */
+  private additionalVideoPrivacyText() {
+    const element = this.survey.pages[0].elements.find(
+      (element) => element.name === this.names.useOfMedia,
+    );
+    element &&
+      Object.assign(element, {
+        description: this.trial.additional_video_privacy_text,
+      });
+  }
+
+  /** Alter survey to only show "private" on use of media question. */
+  private privateLevelOnly() {
+    if (this.trial.private_level_only) {
+      const media_use_element = this.survey.pages[0].elements.find(
+        (element) => element.name === this.names.useOfMedia,
+      );
+      media_use_element &&
+        Object.assign(media_use_element, {
+          defaultValue: "private",
+          description: "exp-lookit-exit-survey.private-option-part-1",
+          choicesVisibleIf: "false", // this must be a string expression
+          isRequired: false,
+        });
+    }
+  }
+
+  /** Translate the survey text. */
+  private translation() {
+    const { contact_info, name } = window.chs.study.attributes;
+    const view = {
+      ...this.trial,
+      include_example: this.trial.include_withdrawal_example,
+      contact: contact_info,
+      name,
+    };
+
+    this.survey.pages[0].elements.forEach((element) => {
+      // Descriptions
+      element.description &&
+        Object.assign(element, {
+          description: i18next.t(element.description, view),
+        });
+
+      // Titles
+      Object.assign(element, { title: i18next.t(element.title, view) });
+
+      // Choices
+      element.choices &&
+        element.choices.forEach((choice) => {
+          Object.assign(choice, { text: i18next.t(choice.text, view) });
+        });
+    });
+  }
+}
+
+/**
+ * Translate survey text to desired locale.
+ *
+ * @param trial - Trial data including user supplied parameters.
+ * @returns Survey json
+ */
+export const exitSurvey = (trial: TrialType<PluginInfo>) => {
+  setLocale(trial);
+  return new ExitSurveyJson(trial).survey;
+};

package/src/index.spec.ts

@@ -1,5 +1,6 @@
 import { LookitWindow } from "@lookit/data/dist/types";
 import { PluginInfo, TrialType } from "jspsych";
+import { html_params } from "../../record/src/videoConfig";
 import { ConsentTemplateNotFound } from "./errors";
 import chsTemplate from "./index";
 
@@ -11,7 +12,7 @@ declare const window: LookitWindow;
  * @param values - Object to replace default trial values
  * @returns Trial object
  */
-const getTrial = (values: Record<string, string> = {}) => {
+const getTrial = (values: Record<string, string | boolean> = {}) => {
   return {
     locale: "en-us",
     template: "consent-template-5",
@@ -72,3 +73,57 @@ test("consent garden template", () => {
   const trial = getTrial({ template: "consent-garden" });
   expect(chsTemplate.consentVideo(trial)).toContain("Project GARDEN");
 });
+
+test("video config template", () => {
+  const trial = getTrial();
+
+  expect(chsTemplate.videoConfig(trial, html_params)).toContain(
+    '<div id="lookit-jspsych-video-config">',
+  );
+  expect(chsTemplate.videoConfig(trial, html_params)).toContain(
+    `<h2>Webcam setup</h2>`,
+  );
+});
+
+test("video config template in Italian", () => {
+  const trial = getTrial({ locale: "it" });
+
+  expect(chsTemplate.videoConfig(trial, html_params)).toContain(
+    '<div id="lookit-jspsych-video-config">',
+  );
+  expect(chsTemplate.videoConfig(trial, html_params)).toContain(
+    `<h2>Configurazione della webcam</h2>`,
+  );
+});
+
+test("uploading video template", () => {
+  const trial = getTrial();
+
+  expect(chsTemplate.uploadingVideo(trial)).toContain(
+    "<div>uploading video, please wait...</div>",
+  );
+});
+
+test("uploading video template in Portuguese", () => {
+  const trial = getTrial({ locale: "pt" });
+
+  expect(chsTemplate.uploadingVideo(trial)).toContain(
+    "<div>enviando vídeo, por favor, aguarde...</div>",
+  );
+});
+
+test("exit survey template", () => {
+  const trial = getTrial({ private_level_only: true });
+  const survey = chsTemplate.exitSurvey(trial);
+  expect(survey.pages[0].elements[0].description).toStrictEqual(
+    "We ask again just to check for typos during registration or accidental selection of a different child at the start of the study.",
+  );
+});
+
+test("exit survey template in French", () => {
+  const trial = getTrial({ locale: "fr" });
+  const survey = chsTemplate.exitSurvey(trial);
+  expect(survey.pages[0].elements[0].description).toStrictEqual(
+    "Nous vous demandons à nouveau en cas d'erreur lors de l'enregistrement ou de sélection par erreur d'un enfant différent au début de l'étude.",
+  );
+});

package/src/index.ts

@@ -1,3 +1,6 @@
 import { consentVideo } from "./consentVideoTemplate";
+import { exitSurvey } from "./exitSurveyTemplate";
+import { uploadingVideo } from "./uploadingVideoTemplate";
+import { videoConfig } from "./videoConfigTemplate";
 
-export default { consentVideo };
+export default { consentVideo, videoConfig, uploadingVideo, exitSurvey };

package/src/uploadingVideoTemplate.ts

@@ -0,0 +1,16 @@
+import Handlebars from "handlebars";
+import { PluginInfo, TrialType } from "jspsych";
+import uploadingVideoTemplate from "../hbs/uploading-video.hbs";
+import { setLocale } from "./utils";
+
+/**
+ * Get translated template for uploading video message.
+ *
+ * @param trial - JsPsych trial object containing trial params
+ * @returns Uploading video message HTML
+ */
+export const uploadingVideo = (trial: TrialType<PluginInfo>) => {
+  setLocale(trial);
+
+  return Handlebars.compile(uploadingVideoTemplate)({});
+};

package/src/videoConfigTemplate.ts

@@ -0,0 +1,47 @@
+import Handlebars from "handlebars";
+import { PluginInfo, TrialType } from "jspsych";
+import videoConfigTemplate from "../hbs/video-config.hbs";
+import { setLocale } from "./utils";
+
+type VideoConfigTemplateParams = {
+  webcam_container_id: string;
+  reload_button_id_cam: string;
+  camera_selection_id: string;
+  mic_selection_id: string;
+  step1_id: string;
+  step2_id: string;
+  step3_id: string;
+  step_complete_class: string;
+  reload_button_id_text: string;
+  next_button_id: string;
+  waiting_for_access_msg_id: string;
+  checking_mic_msg_id: string;
+  access_problem_msg_id: string;
+  setup_problem_msg_id: string;
+  chromeInitialPrompt: string;
+  chromeAlwaysAllow: string;
+  chromePermissions: string;
+  firefoxInitialPrompt: string;
+  firefoxChooseDevice: string;
+  firefoxDevicesBlocked: string;
+  checkmarkIcon: string;
+};
+
+/**
+ * Get translated template for video config.
+ *
+ * @param trial - JsPsych trial object containing trial params
+ * @param html_params - Additional context variables for the template.
+ * @returns Video config HTML
+ */
+export const videoConfig = (
+  trial: TrialType<PluginInfo>,
+  html_params: VideoConfigTemplateParams,
+) => {
+  setLocale(trial);
+
+  return Handlebars.compile(videoConfigTemplate)({
+    ...trial,
+    ...html_params,
+  });
+};

package/dist/consentVideoTemplate.d.ts

@@ -1,8 +0,0 @@
-import { PluginInfo, TrialType } from "jspsych";
-/**
- * Translate, render, and get consent document HTML.
- *
- * @param trial - JsPsych trial object containing trial params
- * @returns Consent document HTML
- */
-export declare const consentVideo: (trial: TrialType<PluginInfo>) => string;

package/dist/errors.d.ts

@@ -1,18 +0,0 @@
-/** Error thrown when specified language isn't found */
-export declare class LocaleNotFoundError extends Error {
-    /**
-     * This will be thrown when attempting to init i18n
-     *
-     * @param baseName - Language a2code with region
-     */
-    constructor(baseName: string);
-}
-/** Error thrown when researcher selects template that isn't available. */
-export declare class ConsentTemplateNotFound extends Error {
-    /**
-     * This will let the researcher know that their template isn't found.
-     *
-     * @param template - Supplied name of consent template.
-     */
-    constructor(template: string);
-}

package/dist/utils.d.ts

@@ -1,14 +0,0 @@
-import { PluginInfo, TrialType } from "jspsych";
-/**
- * Pulled from EFP. Function to convert researcher's text to HTML.
- *
- * @param text - Text
- * @returns Formatted string
- */
-export declare const expFormat: (text?: string | string[]) => string;
-/**
- * Initialize i18next with parameters from trial.
- *
- * @param trial - Trial data including user supplied parameters.
- */
-export declare const setLocale: (trial: TrialType<PluginInfo>) => void;