@erudit-js/prose 3.0.0-dev.25

package/dist/elements/problem/components/expanders/Check.vue

@@ -0,0 +1,151 @@
+<script lang="ts" setup>
+import { useTemplateRef, ref, watch } from 'vue';
+import type { ProseElement } from '@jsprose/core';
+
+import type { problemCheckSchema } from '../../problemContent.js';
+import checkIcon from '../../assets/actions/check.svg?raw';
+import plusIcon from '../../../../app/shared/assets/plus.svg?raw';
+import successIcon from '../../../../app/shared/assets/check.svg?raw';
+import { useFormatText } from '../../../../app/composables/formatText.js';
+import { useProseContext } from '../../../../app/index.js';
+import { useProblemPhrase } from '../../composables/phrase.js';
+
+type CheckStatus = 'default' | 'correct' | 'wrong';
+type CheckState = {
+    icon: string;
+    iconClass?: string;
+    labelClass: string;
+    inputClass: string;
+    buttonClass: string;
+};
+
+const { check, script } = defineProps<{
+    check: ProseElement<typeof problemCheckSchema>;
+    script?: {
+        check: (answer: string | undefined) => boolean;
+        clear: () => void;
+    };
+}>();
+
+const states: Record<CheckStatus, CheckState> = {
+    default: {
+        icon: checkIcon,
+        labelClass: 'text-text-muted',
+        inputClass: 'border-border text-text',
+        buttonClass:
+            'text-text-muted border-border hocus:border-text-muted hocus:text-text',
+    },
+    correct: {
+        icon: successIcon,
+        labelClass: 'text-lime-600',
+        inputClass: 'text-lime-600 border-lime-500',
+        buttonClass: 'text-lime-600 border-lime-500',
+    },
+    wrong: {
+        icon: plusIcon,
+        iconClass: 'rotate-45',
+        labelClass: 'text-red-700 dark:text-red-400',
+        inputClass: 'text-red-700 dark:text-red-400 border-red-400',
+        buttonClass: 'text-red-700 dark:text-red-400 border-red-400',
+    },
+};
+
+const state = ref<CheckStatus>('default');
+
+const formatText = useFormatText();
+const { EruditIcon, EruditTransition } = useProseContext();
+const phrase = await useProblemPhrase();
+
+const answerInputElement = useTemplateRef('answer');
+const answerInput = ref<string>('');
+const lastCheckedInput = ref<string | undefined | null>(null);
+
+watch(answerInput, () => {
+    state.value = 'default';
+    lastCheckedInput.value = null;
+    script?.clear();
+});
+
+function doCheck() {
+    let newInput = answerInput.value.trim().replace(/\s+/g, ' ') || undefined;
+
+    if (newInput === lastCheckedInput.value) {
+        return;
+    }
+
+    lastCheckedInput.value = newInput;
+
+    if (script) {
+        const isCorrect = script.check(newInput);
+        state.value = isCorrect ? 'correct' : 'wrong';
+        return;
+    }
+
+    const isCorrect = check.data.answers?.includes(newInput);
+    state.value = isCorrect ? 'correct' : 'wrong';
+}
+</script>
+
+<template>
+    <div class="gap-small flex w-full flex-col">
+        <div
+            :class="[
+                'text-main-sm font-medium transition-[color]',
+                states[state].labelClass,
+            ]"
+        >
+            <span @click="answerInputElement?.focus()">
+                {{ formatText(check.data.label ?? phrase.action_answer) + ':' }}
+            </span>
+        </div>
+        <form class="flex" @submit.prevent="doCheck">
+            <input
+                ref="answer"
+                type="text"
+                name="answer"
+                v-model="answerInput"
+                :placeholder="check.data.placeholder"
+                autocomplete="off"
+                :class="[
+                    `bg-bg-main text-main-sm relative z-10 min-w-0 flex-1
+                    rounded rounded-tr-none rounded-br-none border border-r-0
+                    px-2.5 py-1 transition-[border,color,background]`,
+                    states[state].inputClass,
+                ]"
+            />
+            <button
+                type="submit"
+                :class="[
+                    `bg-bg-main relative w-[50px] cursor-pointer rounded
+                    rounded-tl-none rounded-bl-none border outline-0
+                    transition-[border,color,background]`,
+                    states[state].buttonClass,
+                ]"
+            >
+                <EruditIcon
+                    :key="state"
+                    :name="states[state].icon"
+                    :class="[
+                        'invisible m-auto text-[1.2em]',
+                        states[state].iconClass,
+                    ]"
+                />
+                <EruditTransition>
+                    <EruditIcon
+                        :key="state"
+                        :name="states[state].icon"
+                        :class="[
+                            `absolute top-1/2 left-1/2 -translate-1/2
+                            text-[1.2em]`,
+                            states[state].iconClass,
+                        ]"
+                    />
+                </EruditTransition>
+            </button>
+        </form>
+
+        <div class="text-text-dimmed text-main-xs italic">
+            {{ check.data.hint ? formatText(check.data.hint) : '' }}
+        </div>
+    </div>
+</template>

package/dist/elements/problem/components/expanders/Checks.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+import type { ProseElement } from '@jsprose/core';
+
+import type {
+    CheckFunction,
+    problemCheckSchema,
+} from '../../problemContent.js';
+import ProblemExpander from '../ProblemExpander.vue';
+import Check from './Check.vue';
+
+const { value } = defineProps<{
+    value: {
+        checkElements: ProseElement<typeof problemCheckSchema>[];
+        checkFunction?: CheckFunction;
+    };
+}>();
+
+const scriptCheckFunction = (answer: string | undefined, name: string) => {
+    if (!value.checkFunction) {
+        console.warn('No check function defined for script checks!');
+        return false;
+    }
+
+    const checkResult = value.checkFunction({
+        answer,
+        name,
+        answers: scriptAnswers.value,
+    });
+
+    if (checkResult === true) {
+        scriptAnswers.value[name] = answer;
+    } else {
+        delete scriptAnswers.value[name];
+    }
+
+    return checkResult;
+};
+
+const scriptClearFunction = (name: string) => {
+    delete scriptAnswers.value[name];
+};
+
+const scriptCheckNameMap = new Map<
+    ProseElement<typeof problemCheckSchema>,
+    string
+>();
+for (const checkElement of value.checkElements) {
+    if (checkElement.data.script) {
+        scriptCheckNameMap.set(checkElement, checkElement.data.script);
+    }
+}
+
+const scriptAnswers = ref<Record<string, string | undefined>>({});
+</script>
+
+<template>
+    <ProblemExpander>
+        <div
+            class="micro:grid-cols-2 grid gap-(--proseAsideWidth)
+                p-(--proseAsideWidth)"
+        >
+            <Check
+                v-for="check of value.checkElements"
+                :check
+                :script="
+                    check.data.script
+                        ? {
+                              check: (answer: string | undefined) => {
+                                  const name = scriptCheckNameMap.get(check)!;
+                                  return scriptCheckFunction(answer, name);
+                              },
+                              clear: () => {
+                                  const name = scriptCheckNameMap.get(check)!;
+                                  scriptClearFunction(name);
+                              },
+                          }
+                        : undefined
+                "
+            />
+        </div>
+    </ProblemExpander>
+</template>

package/dist/elements/problem/components/expanders/DefaultPlusSections.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { watchEffect } from 'vue';
+import {
+    isProseElement,
+    type AnySchema,
+    type ProseElement,
+} from '@jsprose/core';
+
+import { problemSectionSchema } from '../../problemContent.js';
+import { useArrayContainsAnchor } from '../../../../app/composables/anchor.js';
+import ProblemExpander from '../ProblemExpander.vue';
+import ProblemExpanderSection from '../ProblemExpanderSection.vue';
+import Render from '../../../../app/shared/Render.vue';
+
+const { value } = defineProps<{ value: ProseElement<AnySchema> }>();
+
+const defaultBlocks = value.children!.filter(
+    (element) => !isProseElement(element, problemSectionSchema),
+);
+
+const sections = value.children!.filter((element) =>
+    isProseElement(element, problemSectionSchema),
+) as ProseElement<typeof problemSectionSchema>[];
+</script>
+
+<template>
+    <ProblemExpander>
+        <div v-if="defaultBlocks.length" class="py-(--proseAsideWidth)">
+            <Render v-for="child of defaultBlocks" :element="child" />
+        </div>
+        <ProblemExpanderSection
+            v-if="sections.length"
+            v-for="section of sections"
+            :title="section.data"
+            :element="section"
+        />
+    </ProblemExpander>
+</template>

package/dist/elements/problem/components/expanders/Hint.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { ProseElement } from '@jsprose/core';
+
+import type { problemHintSchema } from '../../problemContent.js';
+import { useProblemPhrase } from '../../composables/phrase.js';
+import ProblemExpander from '../ProblemExpander.vue';
+import Render from '../../../../app/shared/Render.vue';
+import ProblemExpanderSection from '../ProblemExpanderSection.vue';
+
+defineProps<{ value: ProseElement<typeof problemHintSchema>[] }>();
+const phrase = await useProblemPhrase();
+</script>
+
+<template>
+    <ProblemExpander>
+        <div v-if="value.length === 1" class="py-(--proseAsideWidth)">
+            <Render v-for="child of value[0]!.children" :element="child" />
+        </div>
+        <ProblemExpanderSection
+            v-else
+            v-for="(hint, i) of value"
+            :title="phrase.action_hint + ' ' + (i + 1)"
+            :element="hint"
+        />
+    </ProblemExpander>
+</template>

package/dist/elements/problem/composables/phrase.d.ts

@@ -0,0 +1,2 @@
+import type { ProblemPhrases } from '../phrases.js';
+export declare function useProblemPhrase(): Promise<ProblemPhrases>;

package/dist/elements/problem/composables/phrase.js

@@ -0,0 +1,7 @@
+import { useProseContext } from "../../../app/composables/context.js";
+import { problemSchema } from "../problem.js";
+export async function useProblemPhrase() {
+	const { appElements, languageCode } = useProseContext();
+	const problemAppElement = appElements[problemSchema.name];
+	return await problemAppElement.languages[languageCode]();
+}

package/dist/elements/problem/composables/problemScript.d.ts

@@ -0,0 +1,3 @@
+import type { AnyUnique } from '@jsprose/core';
+import type { ProblemScriptInstance } from '../problemScript.js';
+export declare function createProblemScriptInstance(scriptUrl?: string, scriptUniques?: Record<string, AnyUnique>): Promise<ProblemScriptInstance | undefined>;

package/dist/elements/problem/composables/problemScript.js

@@ -0,0 +1,11 @@
+export async function createProblemScriptInstance(scriptUrl, scriptUniques) {
+	if (!scriptUrl || !scriptUniques) {
+		return;
+	}
+	const problemScriptModule = await import(
+		/* @vite-ignore */
+		scriptUrl
+);
+	const problemScript = problemScriptModule.default;
+	return problemScript(scriptUniques);
+}

package/dist/elements/problem/core.d.ts

@@ -0,0 +1,248 @@
+declare const _default: [{
+    registryItem: import("@jsprose/core").RegistryItem<{
+        name: "problemDescription";
+        type: "block";
+        linkable: false;
+        Data: undefined;
+        Storage: undefined;
+        Children: import("@jsprose/core").AnySchema[];
+    }, {
+        ProblemDescription: import("@jsprose/core").Tag<"ProblemDescription", {
+            name: "problemDescription";
+            type: "block";
+            linkable: false;
+            Data: undefined;
+            Storage: undefined;
+            Children: import("@jsprose/core").AnySchema[];
+        }, import("@jsprose/core").TagChildren>;
+    }, undefined>;
+}, {
+    registryItem: import("@jsprose/core").RegistryItem<{
+        name: "problemHint";
+        type: "block";
+        linkable: false;
+        Data: undefined;
+        Storage: undefined;
+        Children: import("@jsprose/core").AnySchema[];
+    }, {
+        ProblemHint: import("@jsprose/core").Tag<"ProblemHint", {
+            name: "problemHint";
+            type: "block";
+            linkable: false;
+            Data: undefined;
+            Storage: undefined;
+            Children: import("@jsprose/core").AnySchema[];
+        }, import("@jsprose/core").TagChildren>;
+    }, undefined>;
+}, {
+    registryItem: import("@jsprose/core").RegistryItem<{
+        name: "problemAnswer";
+        type: "block";
+        linkable: false;
+        Data: undefined;
+        Storage: undefined;
+        Children: import("@jsprose/core").AnySchema[];
+    }, {
+        ProblemAnswer: import("@jsprose/core").Tag<"ProblemAnswer", {
+            name: "problemAnswer";
+            type: "block";
+            linkable: false;
+            Data: undefined;
+            Storage: undefined;
+            Children: import("@jsprose/core").AnySchema[];
+        }, import("@jsprose/core").TagChildren>;
+    }, undefined>;
+}, {
+    registryItem: import("@jsprose/core").RegistryItem<{
+        name: "problemSolution";
+        type: "block";
+        linkable: false;
+        Data: undefined;
+        Storage: undefined;
+        Children: import("@jsprose/core").AnySchema[];
+    }, {
+        ProblemSolution: import("@jsprose/core").Tag<"ProblemSolution", {
+            name: "problemSolution";
+            type: "block";
+            linkable: false;
+            Data: undefined;
+            Storage: undefined;
+            Children: import("@jsprose/core").AnySchema[];
+        }, import("@jsprose/core").TagChildren>;
+    }, undefined>;
+}, {
+    registryItem: import("@jsprose/core").RegistryItem<{
+        name: "problemNote";
+        type: "block";
+        linkable: false;
+        Data: undefined;
+        Storage: undefined;
+        Children: import("@jsprose/core").AnySchema[];
+    }, {
+        ProblemNote: import("@jsprose/core").Tag<"ProblemNote", {
+            name: "problemNote";
+            type: "block";
+            linkable: false;
+            Data: undefined;
+            Storage: undefined;
+            Children: import("@jsprose/core").AnySchema[];
+        }, import("@jsprose/core").TagChildren>;
+    }, undefined>;
+}, {
+    registryItem: import("@jsprose/core").RegistryItem<{
+        name: "problemCheck";
+        type: "block";
+        linkable: false;
+        Data: import("./problemContent.js").ProblemCheckData;
+        Storage: undefined;
+        Children: import("@jsprose/core").BlockSchema[];
+    }, {
+        ProblemCheck: import("@jsprose/core").Tag<"ProblemCheck", {
+            name: "problemCheck";
+            type: "block";
+            linkable: false;
+            Data: import("./problemContent.js").ProblemCheckData;
+            Storage: undefined;
+            Children: import("@jsprose/core").BlockSchema[];
+        }, ({
+            label?: string;
+            hint?: string;
+            placeholder?: string;
+        } & (({
+            answer: string | number;
+            answers?: undefined;
+            script?: undefined;
+        } | {
+            answers: (string | number)[];
+            answer?: undefined;
+            script?: undefined;
+        } | {
+            script: string;
+            answers?: undefined;
+            answer?: undefined;
+        }) & import("@jsprose/core").NoTagChildren)) & {}>;
+    }, undefined>;
+}, {
+    registryItem: import("@jsprose/core").RegistryItem<{
+        name: "problemSection";
+        type: "block";
+        linkable: false;
+        Data: string;
+        Storage: undefined;
+        Children: import("@jsprose/core").AnySchema[];
+    }, {
+        ProblemSection: import("@jsprose/core").Tag<"ProblemSection", {
+            name: "problemSection";
+            type: "block";
+            linkable: false;
+            Data: string;
+            Storage: undefined;
+            Children: import("@jsprose/core").AnySchema[];
+        }, {
+            title: string;
+        } & import("@jsprose/core").TagChildren>;
+    }, undefined>;
+}, {
+    registryItem: import("@jsprose/core").RegistryItem<{
+        name: "problem";
+        type: "block";
+        linkable: true;
+        Data: import("./problem.js").ProblemData;
+        Storage: import("./storage.js").ProblemScriptStorage;
+        Children: import("./problemContent.js").ProblemContentChild[];
+    }, {
+        Problem: import("@jsprose/core").Tag<"Problem", {
+            name: "problem";
+            type: "block";
+            linkable: true;
+            Data: import("./problem.js").ProblemData;
+            Storage: import("./storage.js").ProblemScriptStorage;
+            Children: import("./problemContent.js").ProblemContentChild[];
+        }, ({
+            title: string;
+            level: import("./shared.js").ProblemLevel;
+            attributes?: (import("./shared.js").ProblemAttribute | import("./shared.js").ProblemCustomAttribute)[];
+        } & {
+            pretty?: true | undefined;
+            applied?: true | undefined;
+            method?: true | undefined;
+            inter?: true | undefined;
+        } & ({
+            children: {};
+            script?: undefined;
+        } | {
+            script: import("./problemScript.js").ProblemScriptInstance;
+            children?: undefined;
+        })) & import("../../toc.js").ObjPropToc & import("../../snippet.js").ObjPropSnippet & import("../../snippet.js").ObjPropSearch & import("../../snippet.js").ObjPropQuick & import("../../snippet.js").ObjPropSeo>;
+    }, undefined>;
+}, {
+    registryItem: import("@jsprose/core").RegistryItem<{
+        name: "subProblem";
+        type: "block";
+        linkable: false;
+        Data: import("./problems.js").SubProblemData;
+        Storage: import("./storage.js").ProblemScriptStorage;
+        Children: import("./problemContent.js").ProblemContentChild[];
+    }, {
+        SubProblem: import("@jsprose/core").Tag<"SubProblem", {
+            name: "subProblem";
+            type: "block";
+            linkable: false;
+            Data: import("./problems.js").SubProblemData;
+            Storage: import("./storage.js").ProblemScriptStorage;
+            Children: import("./problemContent.js").ProblemContentChild[];
+        }, ({
+            label?: string;
+        } & {
+            children: {};
+            script?: undefined;
+        }) | ({
+            label?: string;
+        } & {
+            script: import("./problemScript.js").ProblemScriptInstance;
+            children?: undefined;
+        })>;
+    }, undefined>;
+}, {
+    registryItem: import("@jsprose/core").RegistryItem<{
+        name: "problems";
+        type: "block";
+        linkable: true;
+        Data: import("./shared.js").ProblemInfo;
+        Storage: undefined;
+        Children: (import("@jsprose/core").BlockSchema | {
+            name: "subProblem";
+            type: "block";
+            linkable: false;
+            Data: import("./problems.js").SubProblemData;
+            Storage: import("./storage.js").ProblemScriptStorage;
+            Children: import("./problemContent.js").ProblemContentChild[];
+        })[];
+    }, {
+        Problems: import("@jsprose/core").Tag<"Problems", {
+            name: "problems";
+            type: "block";
+            linkable: true;
+            Data: import("./shared.js").ProblemInfo;
+            Storage: undefined;
+            Children: (import("@jsprose/core").BlockSchema | {
+                name: "subProblem";
+                type: "block";
+                linkable: false;
+                Data: import("./problems.js").SubProblemData;
+                Storage: import("./storage.js").ProblemScriptStorage;
+                Children: import("./problemContent.js").ProblemContentChild[];
+            })[];
+        }, {
+            title: string;
+            level: import("./shared.js").ProblemLevel;
+            attributes?: (import("./shared.js").ProblemAttribute | import("./shared.js").ProblemCustomAttribute)[];
+        } & {
+            pretty?: true | undefined;
+            applied?: true | undefined;
+            method?: true | undefined;
+            inter?: true | undefined;
+        } & import("@jsprose/core").TagChildren & import("../../toc.js").ObjPropToc & import("../../snippet.js").ObjPropSnippet & import("../../snippet.js").ObjPropSearch & import("../../snippet.js").ObjPropQuick & import("../../snippet.js").ObjPropSeo>;
+    }, undefined>;
+}];
+export default _default;

package/dist/elements/problem/core.js

@@ -0,0 +1,17 @@
+import { defineEruditProseCoreElements } from "../../coreElement.js";
+import { problemCoreElement } from "./problem.js";
+import { problemAnswer, problemCheckCoreElement, problemDescriptionCoreElement, problemHintCoreElement, problemNote, problemSectionCoreElement, problemSolution } from "./problemContent.js";
+import { problemsCoreElement, subProblemCoreElement } from "./problems.js";
+export default defineEruditProseCoreElements(
+	problemDescriptionCoreElement,
+	problemHintCoreElement,
+	problemAnswer.coreElement,
+	problemSolution.coreElement,
+	problemNote.coreElement,
+	problemCheckCoreElement,
+	problemSectionCoreElement,
+	//
+	problemCoreElement,
+	subProblemCoreElement,
+	problemsCoreElement
+);

package/dist/elements/problem/languages/en.d.ts

@@ -0,0 +1,3 @@
+import type { ProblemPhrases } from '../phrases.js';
+declare const _default: ProblemPhrases;
+export default _default;

package/dist/elements/problem/languages/en.js

@@ -0,0 +1,24 @@
+import { defineElementLanguage } from "../../../app/language/element.js";
+export default defineElementLanguage({
+	element_name: "Problem",
+	"level.example": "Example",
+	"level.easy": "Elementary",
+	"level.medium": "Intermediate",
+	"level.hard": "Advanced",
+	"attribute.pretty": "Elegant",
+	"attribute_explain.pretty": "This problem has an elegant and pretty solution.",
+	"attribute.applied": "Applied",
+	"attribute_explain.applied": "This problem makes practical sense in real life or useful in other subjects.",
+	"attribute.method": "Method",
+	"attribute_explain.method": "This problem introduces a handy method or technique for solving similar problems.",
+	"attribute.inter": "Inter-Subject",
+	"attribute_explain.inter": "This problem connects different subjects or topics.",
+	level_hint: "Level of mastery of material",
+	action_hint: "Hint",
+	action_solution: "Solution",
+	action_answer: "Answer",
+	action_note: "Note",
+	action_check: "Check",
+	action_generate: "Similar",
+	seed_explain: "The seed from which all random values in the problem are calculated. Same seeds = completely identical problems."
+});

package/dist/elements/problem/languages/ru.d.ts

@@ -0,0 +1,3 @@
+import type { ProblemPhrases } from '../phrases.js';
+declare const _default: ProblemPhrases;
+export default _default;

package/dist/elements/problem/languages/ru.js

@@ -0,0 +1,24 @@
+import { defineElementLanguage } from "../../../app/language/element.js";
+export default defineElementLanguage({
+	element_name: "Задача",
+	"level.example": "Пример",
+	"level.easy": "Ликбез",
+	"level.medium": "Нормальный",
+	"level.hard": "Продвинутый",
+	"attribute.pretty": "Красивая",
+	"attribute_explain.pretty": "Эта задача имеет элегантное и красивое решение.",
+	"attribute.applied": "Прикладная",
+	"attribute_explain.applied": "Эта задача имеет практический смысл в реальной жизни или полезна в других предметах.",
+	"attribute.method": "Прием",
+	"attribute_explain.method": "Эта задача вводит полезный метод или технику для решения аналогичных задач.",
+	"attribute.inter": "Межпредметная",
+	"attribute_explain.inter": "Эта задача объединяет разные предметы или темы.",
+	level_hint: "Уровень владения материалом",
+	action_hint: "Подсказка",
+	action_solution: "Решение",
+	action_answer: "Ответ",
+	action_note: "Примечание",
+	action_check: "Проверить",
+	action_generate: "Аналог",
+	seed_explain: "Зерно, от которого высчитываются все случайные величины в задаче. Одинаковые зерна = полностью идентичные задачи."
+});

package/dist/elements/problem/phrases.d.ts

@@ -0,0 +1,16 @@
+import type { ElementPhrases } from '../../app/language/element.js';
+import type { ProblemAttribute, ProblemLevel } from './shared.js';
+export type ProblemPhrases = ElementPhrases<{
+    [K in `level.${ProblemLevel}`]: string;
+} & {
+    [K in `attribute.${ProblemAttribute}` | `attribute_explain.${ProblemAttribute}`]: string;
+} & {
+    level_hint: string;
+    action_hint: string;
+    action_solution: string;
+    action_answer: string;
+    action_note: string;
+    action_check: string;
+    action_generate: string;
+    seed_explain: string;
+}>;

package/dist/elements/problem/phrases.js

@@ -0,0 +1 @@
+export {};