@media-quest/builder 0.0.34 → 0.0.36

package/src/schema-config.ts

@@ -1,25 +1,26 @@
-import { CodebookPredefinedVariable } from "./code-book/codebook-variable";
-import { BuilderSchemaDto } from "./Builder-schema";
-
-/**
- * This interface is ment to define all information that a schema-admin app
- * needs to generate a dynamic form for setting values for predefined variables.
- */
-export interface SchemaConfig {
-  readonly schemaName: string;
-  readonly schemaId: string;
-  readonly schemaPrefix: string;
-  readonly variables: ReadonlyArray<CodebookPredefinedVariable>;
-}
-
-export const SchemaConfig = {
-  fromSchema: (schema: BuilderSchemaDto): SchemaConfig => {
-    const variables = schema.predefinedVariables ?? [];
-    return {
-      schemaId: schema.id,
-      schemaName: schema.name,
-      schemaPrefix: schema.prefix,
-      variables,
-    };
-  },
-} as const;
+import { CodebookPredefinedVariable } from "./code-book/codebook-variable";
+
+import { BuilderSchemaDto } from "./Builder-schema-dto";
+
+/**
+ * This interface is ment to define all information that a schema-admin app
+ * needs to generate a dynamic form for setting values for predefined variables.
+ */
+export interface SchemaConfig {
+  readonly schemaName: string;
+  readonly schemaId: string;
+  readonly schemaPrefix: string;
+  readonly variables: ReadonlyArray<CodebookPredefinedVariable>;
+}
+
+export const SchemaConfig = {
+  fromSchema: (schema: BuilderSchemaDto): SchemaConfig => {
+    const variables = schema.predefinedVariables ?? [];
+    return {
+      schemaId: schema.id,
+      schemaName: schema.name,
+      schemaPrefix: schema.prefix,
+      variables,
+    };
+  },
+} as const;

package/src/sum-score/sum-score-variable.ts

@@ -68,6 +68,7 @@ export class SumScoreVariable extends BuilderObject<
   /** @internal*/
   _update(data: { name?: string; description?: string; useAvg?: boolean }) {
     const d = data ?? {};
+
     if (DUtil.isString(d.name)) {
       this._name = d.name;
     }

package/src/sum-score/sum-score.ts

@@ -2,7 +2,8 @@ import { SumScoreVariableDto } from "./sum-score-variable";
 import { SumScoreVariableID } from "../primitives/ID";
 import { SumScoreAnswer } from "./sum-score-answer";
 import { CodeBook } from "../code-book/codebook";
-import { BuilderSchemaDto } from "../Builder-schema";
+
+import { BuilderSchemaDto } from "../Builder-schema-dto";
 
 /**
  *

package/src/theme/Default-theme.ts

@@ -13,15 +13,22 @@ namespace BuilderOptionTheme {
   const BLUE = "#2F5597";
   const BTN_BORDER_WIDTH = 3;
   const BTN_BORDER_RADIUS = 10;
+  const BTN_HEIGHT = 130;
+  const BTN_WIDTH_LONG: DCss.Percent = { _unit: "percent", value: 19 };
+  const BTN_WIDTH_SHORT: DCss.Percent = { _unit: "percent", value: 15 };
   const BTN_BORDER_STYLE: DStyle["borderStyle"] = "solid";
-  const FONT_WEIGHT: DStyle["fontWeight"] = 600;
-  const FONT_SIZE: DCss.Px["value"] = 50;
-  const BTN_PADDING_LEFT = 40;
-  const BTN_PADDING_TOP = 40;
+  const FONT_WEIGHT: DStyle["fontWeight"] = 500;
+  const FONT_SIZE: DCss.Px["value"] = 36;
+  const MAIN_TEXT_FONT_SIZE: DCss.Px = { _unit: "px", value: 36 };
+  const MAIN_TEXT_WIDTH: DCss.Percent = { _unit: "percent", value: 80 };
+
+  const BTN_PADDING_LEFT = 10;
+  const BTN_PADDING_TOP = 10;
 
   const buttonBaseCss = (): CssTheme => ({
     css: {
       fontWeight: FONT_WEIGHT,
+
       fontSize: { _unit: "px", value: FONT_SIZE },
       letterSpacing: { _unit: "px", value: 2 },
       paddingLeft: { _unit: "px", value: BTN_PADDING_LEFT },
@@ -30,6 +37,8 @@ namespace BuilderOptionTheme {
       paddingRight: { _unit: "px", value: BTN_PADDING_LEFT },
       borderRadius: { _unit: "px", value: BTN_BORDER_RADIUS },
       borderWidth: { _unit: "px", value: BTN_BORDER_WIDTH },
+      width: BTN_WIDTH_LONG,
+      height: { _unit: "px", value: BTN_HEIGHT },
       borderStyle: BTN_BORDER_STYLE,
       // boxShadow: "3px 3px gray",
       position: "relative",
@@ -67,6 +76,7 @@ namespace BuilderOptionTheme {
             backgroundColor: WHITE,
             borderColor: LIGHT_BLUE,
             textColor: BLUE,
+            width: BTN_WIDTH_SHORT,
           },
           cssDisabled,
           cssEnabled,
@@ -87,9 +97,10 @@ const audioHighTop = 20;
 const audioLowTop = 55;
 
 const textBase: PStyle = {
-  width: 80,
+  width: 76,
+  // backgroundColor: "red",
   top: textHighTop,
-  left: 10,
+  left: 12,
   textAlign: "center",
   textColor: "black",
   fontSize: { _unit: "px", value: 40 },
@@ -162,7 +173,7 @@ export const DefaultTheme: IDefaultTheme = {
         bottom: 0,
         left: 0, // h: 10,
         alignItems: "center",
-        backgroundColor: "yellow",
+        // backgroundColor: "yellow",
       },
       whenSingle: { justifyContent: "space-evenly" },
       whenMany: { justifyContent: "space-evenly" },

package/src/theme/ThemeCompiler.ts

@@ -1,5 +1,6 @@
-import type { BuilderSchemaDto } from "../Builder-schema";
 import { SchemaDto } from "@media-quest/engine";
+import { CompilerOption } from "../builder-compiler";
+import { BuilderSchemaDto } from "../Builder-schema-dto";
 
 export interface ThemeCompiler<ThemeSchema> {
   currentTheme: ThemeSchema;

package/src/theme/button-bar/button-text-utils.ts

@@ -0,0 +1,233 @@
+const SPLITTER = " ";
+
+const maxWordLength = (text: string) => {
+  const splitt = text.split(" ");
+  return Math.max(...splitt.map((w) => w.length));
+};
+
+type Splitted = {
+  index: number;
+  first: string;
+  second: string;
+  longest: number;
+  lineDiff: number;
+};
+
+const allSplits = (text: string): ReadonlyArray<Splitted> => {
+  const lines = text.split(SPLITTER);
+  const slices: Array<Splitted> = [];
+  lines.forEach((line, index, array) => {
+    const first = array.slice(0, index).join(SPLITTER);
+    const last = array.slice(index).join(SPLITTER);
+    const longest = Math.max(first.length, last.length);
+    const lineDiff = Math.abs(first.length - last.length);
+    const slice: Splitted = {
+      first,
+      second: last,
+      index,
+      longest,
+      lineDiff,
+    };
+
+    slices.push(slice);
+  });
+
+  return slices;
+};
+
+const splitInTwo = (buttonText: string) => {
+  const all = allSplits(buttonText);
+  let result = { first: "", last: "", longest: 0 };
+  all.forEach((slice, index) => {
+    if (index === 0) {
+      result.first = slice.first;
+      result.last = slice.second;
+      result.longest = slice.longest;
+    } else if (result.longest > slice.longest) {
+      result.first = slice.first;
+      result.last = slice.second;
+      result.longest = slice.longest;
+    }
+  });
+
+  return result;
+};
+
+type ButtonTextLength = {
+  readonly text: string;
+  /**
+   * Text is on one line.
+   */
+  readonly max: number;
+  /**
+   * Text is on two lines.
+   */
+  readonly min: number;
+};
+const checkLength = (buttonText: string): ButtonTextLength => {
+  const max = buttonText.length;
+  const onTwo = splitInTwo(buttonText);
+  const min = onTwo.longest;
+  return {
+    text: buttonText,
+    min,
+    max,
+  };
+};
+
+type ButtonTextSanitized = string & { __sanitized: true };
+export class ButtonTextState {
+  private readonly text: string;
+  private _isSplit: boolean;
+  private readonly twoLineWidth: number;
+  private readonly oneLineWidth: number;
+
+  get width() {
+    return this._isSplit ? this.twoLineWidth : this.oneLineWidth;
+  }
+
+  get isSplit() {
+    return this._isSplit;
+  }
+
+  get canSplit() {
+    return this.oneLineWidth > this.twoLineWidth;
+  }
+
+  get splitDiff() {
+    return this.oneLineWidth - this.twoLineWidth;
+  }
+  // get si
+  constructor(text: string) {
+    this.text = text;
+    this.oneLineWidth = text.length;
+    this._isSplit = false;
+    this.twoLineWidth = splitInTwo(text).longest;
+  }
+  tryToSplit() {
+    this._isSplit = true;
+  }
+  unSplit() {
+    this._isSplit = false;
+  }
+  getState() {
+    const sanitizedText = this.text as ButtonTextSanitized;
+    return { raw: this.text, sanitizedText, isSplit: this._isSplit, width: this.width };
+  }
+}
+
+type FittedButton = {
+  width: number;
+  isSingleLine: boolean;
+};
+
+type FitAllOptions = {
+  oneLine: { min: number; max: number };
+  twoLine: { min: number; max: number };
+};
+
+type FittedResult = {
+  success: boolean;
+  isSingleLine: boolean;
+  requiredSpace: number;
+  twoLineCount: number;
+  result: ReadonlyArray<FittedButton>;
+};
+
+const sumReducer = (acc: number, number: number) => acc + number;
+
+/**
+ * Calculates the sum of an array of numbers.
+ *
+ * @param {number[]} numbers - An array of numbers to calculate the sum for.
+ * @returns {number} - The sum of the numbers in the array.
+ */
+const sum = (numbers: number[]): number => {
+  return numbers.reduce(sumReducer, 0);
+};
+
+export class ButtonBarState {
+  private readonly buttons: ReadonlyArray<ButtonTextState>;
+  private readonly oneLineMax: number;
+  constructor(buttons: ReadonlyArray<string>, options: { oneLineMax: number; twoLineMax: number }) {
+    this.buttons = buttons.map((text) => new ButtonTextState(text));
+    // this.fitAllOptions = fitAllOptions;
+    this.oneLineMax = options.oneLineMax;
+  }
+
+  fitAll() {
+    // const result = fitAll(this.buttons, this.fitAllOptions);
+    // return result;
+  }
+  isFitting(): boolean {
+    return this.getWidth() <= this.oneLineMax;
+  }
+  getWidth() {
+    return this.buttons.reduce((acc, b) => acc + b.width, 0);
+  }
+  isOneLine() {
+    return this.buttons.every((b) => !b.isSplit);
+  }
+
+  compressOneButton(): boolean {
+    let btn: ButtonTextState | false = false;
+    let didCompress = false;
+    this.buttons.forEach((b) => {
+      if (!didCompress && b.canSplit) {
+        b.tryToSplit();
+        didCompress = true;
+      }
+    });
+
+    return didCompress;
+  }
+  canCompress() {
+    return true;
+    // return this.buttons.some((b) => b.canSplit);
+  }
+}
+const fitAll = (buttons: string[], options: FitAllOptions): FittedResult => {
+  const bar = new ButtonBarState(buttons, {
+    oneLineMax: options.oneLine.max,
+    twoLineMax: options.twoLine.max,
+  });
+
+  let isSingleLine = true;
+
+  // isSingleLine = state.every((b) => !b.isSplit);
+  // const requiredSpace = state.reduce((acc, b) => acc + b.width, 0);
+
+  let requiredSpace = 0;
+  let twoLineCount = 0;
+  if (!isSingleLine) {
+    twoLineCount = 1;
+  }
+
+  // const result = textWithLengths.map((text) => {
+  //   if (text.max <= options.oneLine.max) {
+  //     requiredSpace+= text.max;
+  //     return { width: text.max, isSingleLine: true };
+  //   } else if (text.min <= options.twoLine.max) {
+  //     twoLineCount++;
+  //     return { width: text.min, isSingleLine: false };
+  //   } else {
+  //     requiredSpace += text.min;
+  //     return { width: text.min, isSingleLine: false };
+  //   }
+  // });
+  return {
+    success: true,
+    isSingleLine,
+    requiredSpace,
+    twoLineCount,
+    result: [],
+  };
+};
+
+export const buttonTextUtils = {
+  checkLength,
+  fitAll,
+  splitInTwo,
+  allSplits,
+  maxWordLength,
+} as const;

package/src/theme/button-bar/text-utils.spec.ts

@@ -0,0 +1,105 @@
+import { ButtonBarState, ButtonTextState, buttonTextUtils } from "./button-text-utils";
+
+const lineCount2 = 2;
+describe("Button-text-utils", () => {
+  test("ButtonTextState works", () => {
+    const b1 = new ButtonTextState("vet ikke");
+
+    expect(b1.canSplit).toBe(true);
+    expect(b1.splitDiff).toBe(4);
+    expect(b1.width).toBe(8);
+    expect(b1.isSplit).toBe(false);
+    b1.tryToSplit();
+    expect(b1.width).toBe(4);
+    expect(b1.isSplit).toBe(true);
+    b1.unSplit();
+    expect(b1.width).toBe(8);
+    expect(b1.isSplit).toBe(false);
+
+    const b2 = new ButtonTextState("ja");
+    expect(b2.splitDiff).toBe(0);
+    expect(b2.canSplit).toBe(false);
+    expect(b2.width).toBe(2);
+    expect(b2.isSplit).toBe(false);
+    b2.tryToSplit();
+    expect(b2.width).toBe(2);
+    expect(b2.isSplit).toBe(true);
+    const b3 = new ButtonTextState("Mer enn 30 minutter");
+    expect(b3.canSplit).toBe(true);
+    expect(b3.splitDiff).toBe(9);
+    expect(b3.width).toBe(19);
+    expect(b3.isSplit).toBe(false);
+    b3.tryToSplit();
+    expect(b3.width).toBe(10);
+    expect(b3.isSplit).toBe(true);
+    b3.unSplit();
+    expect(b3.getState().width).toBe(19);
+  });
+
+  test("ButtonBarState workss", () => {
+    const bar = new ButtonBarState(["ja", "nei", "vet ikke"], { oneLineMax: 10, twoLineMax: 10 });
+    expect(bar.getWidth()).toBe(13);
+    expect(bar.isFitting()).toBe(false);
+    expect(bar.isOneLine()).toBe(true);
+    expect(bar.canCompress()).toBe(true);
+    expect(bar.compressOneButton()).toBe(true);
+  });
+
+  test("Max word length works", () => {
+    const a = buttonTextUtils.maxWordLength("ja");
+    expect(buttonTextUtils.maxWordLength("ja")).toBe(2);
+    expect(buttonTextUtils.maxWordLength("Ganske fin i dag")).toBe(6);
+    expect(buttonTextUtils.maxWordLength("rått")).toBe(4);
+  });
+
+  test("All splitts work. ", () => {
+    const a = buttonTextUtils.allSplits("del da");
+    expect(a.length).toBe(2);
+  });
+
+  test("Can split a string into two lines at the middle", () => {
+    const text = "del da for helvete";
+    const a = buttonTextUtils.splitInTwo(text);
+    expect(a.first).toBe("del da for");
+    const b = buttonTextUtils.splitInTwo("Mer enn 10 minutter");
+    expect(b.longest).toBe(10);
+    const c = buttonTextUtils.splitInTwo("litt vanskelig og");
+    expect(c.first).toBe("litt");
+    expect(c.last).toBe("vanskelig og");
+  });
+
+  test("Will check if a text can fit within bounds.", () => {
+    const text = "dette blir en altfor lang text. Faen.";
+    const a = buttonTextUtils.checkLength(text);
+    expect(a.max).toBe(text.length);
+    expect(a.min).toBe(20);
+  });
+
+  test("Fit all will detect if buttons dont fit on a single line.", () => {
+    const buttons = ["ja", "nei", "vet ikke"];
+    const r1 = buttonTextUtils.fitAll(buttons, {
+      oneLine: { min: 5, max: 12 },
+      twoLine: { min: 10, max: 20 },
+    });
+
+    expect(r1.isSingleLine).toEqual(false);
+    expect(r1.requiredSpace).toEqual(buttons.join("").length);
+    expect(r1.twoLineCount).toEqual(1);
+    const r2 = buttonTextUtils.fitAll(buttons, {
+      oneLine: { min: 5, max: 13 },
+      twoLine: { min: 10, max: 20 },
+    });
+    expect(r2.isSingleLine).toEqual(true);
+    expect(r2.twoLineCount).toEqual(0);
+  });
+  test("Will calculate required space, when break", () => {
+    const buttons = ["ja", "nei", "vet ikke"];
+    const r1 = buttonTextUtils.fitAll(buttons, {
+      oneLine: { min: 5, max: 10 },
+      twoLine: { min: 5, max: 10 },
+    });
+    // expect(r1.isSingleLine).toEqual(false);
+    // expect(r1.requiredSpace).toEqual("ja".length + "nei".length + "ikke".length);
+    // expect(r1.twoLineCount).toEqual(1);
+  });
+});

package/src/theme/default-theme-compiler.ts

@@ -1,5 +1,4 @@
 import { ThemeCompiler } from "./ThemeCompiler";
-import type { BuilderSchemaDto } from "../Builder-schema";
 import { BuilderSchema } from "../Builder-schema";
 import type { BuilderPageDto } from "../page/Builder-page";
 import { DefaultTheme } from "./Default-theme";
@@ -26,12 +25,13 @@ import { AudioFile } from "../media-files";
 import { BuilderRule } from "../rulebuilder";
 import { IDefaultTheme } from "./IDefault-theme";
 import { Theme2 } from "./theme2";
+import { BuilderSchemaDto } from "../Builder-schema-dto";
 
 export class DefaultThemeCompiler implements ThemeCompiler<IDefaultTheme> {
   readonly name = "Ispe default theme.";
   readonly defaultTheme = DefaultTheme;
   readonly theme2 = Theme2;
-  currentTheme = Theme2;
+  currentTheme = DefaultTheme;
   allThemes = [DefaultTheme, Theme2];
   private readonly TAG = "[ DEFAULT_THEME_COMPILER ]: ";
 
@@ -118,6 +118,7 @@ export class DefaultThemeCompiler implements ThemeCompiler<IDefaultTheme> {
     let initialVideoTaskList: Array<PlayVideoTask | DelayTask> = [];
     const newPage: PageDto = {
       background: "white",
+      pageNumber,
       elements,
       id,
       prefix,

package/src/theme/theme2.ts

@@ -22,6 +22,7 @@ const Colors = {
   backgroundWhite: "white",
   // progressBackGround: "#164AC4",
   // progressForGround: "#F5F5F5",
+
   // red: "red",
   // yellow: "yellow",
 };
@@ -144,21 +145,24 @@ const muteUnMuteStyles: { css: PStyle; cssDisabled: PStyle; cssEnabled: PStyle }
   cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
   cssEnabled: { opacity: 0.8, cursor: "pointer" },
 };
+
+const FONT_QUESTION = 20;
+const FONT_ = 20;
 const responseButtonBaseCss = (): CssTheme => ({
   css: {
     backgroundColor: Colors.primary,
     borderColor: Colors.primary,
     textColor: Colors.white,
     fontWeight: 600,
-    fontSize: { _unit: "px", value: 30 },
-    lineHeight: 1,
-    maxWidth: 30,
+    fontSize: { _unit: "px", value: 28 },
+    lineHeight: 1.1,
+    maxWidth: 25,
     // width: 20,
     // flex: "0 0 auto",
-    paddingLeft: { _unit: "px", value: 30 },
-    paddingTop: { _unit: "px", value: 10 },
-    paddingBottom: { _unit: "px", value: 10 },
-    paddingRight: { _unit: "px", value: 30 },
+    paddingLeft: { _unit: "px", value: 10 },
+    paddingTop: { _unit: "px", value: 5 },
+    paddingBottom: { _unit: "px", value: 5 },
+    paddingRight: { _unit: "px", value: 10 },
     borderRadius: { _unit: "px", value: 20 },
     borderStyle: "solid",
     boxShadow: "3px 3px gray",
@@ -365,11 +369,11 @@ export const Theme2: IDefaultTheme = {
         display: "flex",
         justifyContent: "flex-start",
         width: BUTTON_BAR_WIDTH,
-        height: 8,
+        height: 6,
         bottom: Q_AREA_BOTTOM + H_M3,
         left: Q_AREA_LEFT + W_M3,
         // backgroundColor: "green",
-        gap: { _unit: "px", value: 20 },
+        gap: { _unit: "px", value: 40 },
         alignItems: "stretch",
       },
       whenSingle: { justifyContent: "center" },