Improve example

Author: khoi-nguyen

apps/test/src/App.tsx

@@ -1,4 +1,4 @@
-import { createSignal, snapshot, type Component } from 'solid-js'
+import { createSignal, type Component } from 'solid-js'
 import { Factor } from './Exercise'
 
 const App: Component = () => {
@@ -9,17 +9,7 @@ const App: Component = () => {
   })
   return (
     <>
-      <Factor
-        fetch={() => {
-          console.log('Fetching exercise')
-          return data()
-        }}
-        save={(exercise) => {
-          const ex = snapshot(exercise)
-          console.log('Saving', JSON.stringify(ex, null, 2))
-          setData(ex)
-        }}
-      />
+      <Factor fetch={data} save={setData} />
     </>
   )
 }

apps/test/src/Exercise.tsx

@@ -1,5 +1,5 @@
 import { createView, defineFeedback, defineSchema, expr, useExerciseContext } from '@learning/core'
-import { createMemo } from 'solid-js'
+import { createMemo, Show } from 'solid-js'
 import * as v from 'valibot'
 
 const schema = defineSchema({
@@ -15,6 +15,12 @@ const schema = defineSchema({
         attempt: v.string(),
       },
     },
+    root: {
+      previous: ['start'],
+      state: {
+        root: v.string(),
+      },
+    },
   },
 })
 
@@ -23,7 +29,11 @@ const feedback = defineFeedback<typeof schema>({
     const equal = await expr(state.attempt).isEqual(question.expr)
     const factored = await expr(state.attempt).isFactored()
     const correct = equal && factored
-    return { correct, score: [Number(correct), 1], next: null }
+    return { correct, score: [Number(correct), 1], next: correct ? null : 'root' }
+  },
+  root: async ({ question, state }) => {
+    const correct = await expr(question.expr).checkRoot(state.root)
+    return { correct, score: [0, 0], next: null }
   },
 })
 
@@ -32,7 +42,9 @@ export const Factor = createView(schema, feedback, {
     const question = () => expr(props.question.expr)
     const attempt = () => expr(props.state?.attempt)
     const answer = createMemo(() => attempt() && question().factor().latex())
-    const correct = createMemo(() => attempt()?.isEqual(question()) && attempt()?.isFactored())
+    const equal = createMemo(() => attempt()?.isEqual(question()))
+    const factored = createMemo(() => attempt()?.isFactored())
+    const correct = () => equal() && factored()
     const exercise = useExerciseContext()
     return (
       <>
@@ -43,14 +55,43 @@ export const Factor = createView(schema, feedback, {
             value={props.state?.attempt ?? ''}
             readonly={props.state !== undefined}
             onInput={(e) => {
+              // @ts-ignore
               exercise.setState((state) => {
                 state.attempt = e.target.value
               })
             }}
           />
         </p>
-        <p>La réponse est {answer()}</p>
-        <p>Correct: {correct() ? 'Oui' : 'Non'}</p>
+        <Show when={props.state}>
+          <p>La réponse est {answer()}</p>
+        </Show>
+        <Show when={correct() !== undefined}>
+          <p>Correct: {correct() ? 'Oui' : 'Non'}</p>
+        </Show>
+      </>
+    )
+  },
+  root: (props) => {
+    const exercise = useExerciseContext()
+    const attempt = createMemo(() => expr(props.state?.root))
+    const correct = createMemo(
+      () => props.state && expr(props.question.expr).checkRoot(props.state?.root ?? ''),
+    )
+    return (
+      <>
+        <p>Trouvez une racine de {props.question.expr}</p>
+        <input
+          value={props.state?.root ?? ''}
+          onInput={(e) => {
+            // @ts-ignore
+            exercise.setState((state) => {
+              state.root = e.target.value
+            })
+          }}
+        />
+        <Show when={correct() !== undefined}>
+          <p>Correct: {correct() ? 'Oui' : 'Non'}</p>
+        </Show>
       </>
     )
   },

packages/core/package.json

@@ -14,7 +14,6 @@
   },
   "scripts": {
     "codegen": "openapi-typescript http://localhost:8088/openapi.json -o ./src/symapi.d.ts",
-    "dev": "bun scripts/api_codegen.ts",
     "test": "bun test --coverage --coverage-reporter=lcov --preload ./test.setup.ts",
     "test:watch": "bun test --watch --coverage --preload ./test.setup.ts"
   },

packages/core/src/exercise/base.tsx

@@ -2,7 +2,6 @@ import { Dynamic } from '@solidjs/web'
 import { mapAsync } from 'es-toolkit'
 import {
   createMemo,
-  createProjection,
   createStore,
   For,
   Loading,
@@ -61,43 +60,41 @@ type Schema<
   } = any,
 > = ReturnType<typeof defineSchema<N, Q, T, S>>
 
-function Part<T extends Schema, K extends keyof T['steps'], G extends boolean = false>(
+function Part<T extends Schema, K extends keyof T['steps'], S extends boolean = false>(
   schema: T,
   step: K,
-  graded?: G,
+  withState?: S,
 ) {
   const base = v.object({
     step: v.literal(step as K),
-    state: v.object(schema.steps[step].state as T['steps'][K]['state']),
   })
   const extended = v.object({
     ...base.entries,
-    correct: v.boolean(),
-    score: v.strictTuple([v.number(), v.number()]),
+    state: v.object(schema.steps[step].state as T['steps'][K]['state']),
   })
-  return (graded ? extended : base) as G extends true ? typeof extended : typeof base
+  return (withState ? extended : base) as S extends true ? typeof extended : typeof base
 }
 
-type Part<T extends Schema, K extends keyof T['steps'], G extends boolean = false> = Infer<
-  typeof Part<T, K, G>
+type Part<T extends Schema, K extends keyof T['steps'], S extends boolean = false> = Infer<
+  typeof Part<T, K, S>
 >
 
 function PartUnion<
   T extends Schema,
   K extends readonly (keyof T['steps'])[],
-  G extends boolean = false,
->(schema: T, steps: K, graded?: G) {
+  S extends boolean = false,
+>(schema: T, steps: K, withState?: S) {
   return v.variant(
     'step',
-    steps.map((step) => Part(schema, step, graded)),
-  ) as v.VariantSchema<'step', { [I in keyof K]: ReturnType<typeof Part<T, K[I], G>> }, undefined>
+    steps.map((step) => Part(schema, step, withState)),
+  ) as v.VariantSchema<'step', { [I in keyof K]: ReturnType<typeof Part<T, K[I], S>> }, undefined>
 }
 
 type PartUnion<
   T extends Schema,
   K extends readonly (keyof T['steps'])[] = readonly (keyof T['steps'])[],
-  G extends boolean = false,
-> = Infer<typeof PartUnion<T, K, G>>
+  S extends boolean = false,
+> = Infer<typeof PartUnion<T, K, S>>
 
 type Props<T extends Schema, K extends keyof T['steps'], F extends boolean = true> = {
   question: InferFromShape<T['question']>
@@ -127,20 +124,18 @@ export function buildSchemas<T extends Schema>(
       v.object({
         name: v.literal(schema.name as T['name']),
         question: v.object(schema.question as T['question']),
-        attempt: v.array(PartUnion(schema, steps, false)),
+        attempt: v.array(
+          v.union([PartUnion(schema, steps, true), PartUnion(schema, steps, false)]),
+        ),
       }),
       // TODO: calls need to be deduped, waiting for solid-router release?
       v.transformAsync(async ({ attempt, question, ...exercise }) => {
-        let modifiedAttempt: (
-          | Part<T, T['steps'][keyof T['steps']], true>
-          | { step: keyof T['steps'] }
-        )[] = attempt ?? []
+        let modifiedAttempt = attempt
         if (attempt.length === 0 && schema.transform) {
           question = await schema.transform(question)
-          modifiedAttempt = [{ step: 'start' }]
         }
         modifiedAttempt = await mapAsync(modifiedAttempt, async (part, i) => {
-          if ('state' in part) {
+          if ('state' in part && part.state) {
             const result = await feedback[part.step]({
               question: question,
               state: part.state,
@@ -150,6 +145,11 @@ export function buildSchemas<T extends Schema>(
           }
           return part
         })
+        if (modifiedAttempt.length === 0) modifiedAttempt.push({ step: 'start' })
+        const lastPart = modifiedAttempt.at(-1)
+        if (lastPart && 'next' in lastPart && lastPart.next) {
+          modifiedAttempt.push({ step: lastPart.next })
+        }
         return { ...exercise, question, attempt: modifiedAttempt }
       }),
     ),
@@ -175,10 +175,11 @@ export function createView<T extends Schema>(
 ) {
   const { Student, grade } = buildSchemas(schema, feedback)
   return function Component(props: FinalViewProps<T>) {
-    const exercise = createProjection(async () => grade(await props.fetch()))
+    const exercise = createMemo(async () => grade(await props.fetch()))
     return (
       <Loading fallback="Génération de l'exercice...">
-        <For each={exercise.attempt}>
+        <p>{exercise().attempt.length} étapes</p>
+        <For each={exercise().attempt}>
           {<K extends keyof T['steps']>(
             part: () =>
               | Part<T, K, true>
@@ -187,18 +188,19 @@ export function createView<T extends Schema>(
           ) => {
             const [state, setState] = createStore<Partial<Part<T, K>>>(() => part().state ?? {})
             const validated = createMemo(() =>
-              v.safeParse(Part(schema, part().step), {
+              v.safeParse(Part(schema, part().step, true), {
                 ...part(),
                 state,
               }),
             )
             const submit = async () => {
               if (!validated().success) return
               await props.save({
-                ...exercise,
-                attempt: exercise.attempt.map((p, j) =>
-                  j === i() ? { ...p, ...(validated().output as Part<T, K>) } : p,
-                ),
+                ...exercise(),
+                attempt: [
+                  ...exercise().attempt.toSpliced(-1),
+                  validated().output as Part<T, K, true>,
+                ],
               })
               refresh(() => exercise)
             }
@@ -207,11 +209,9 @@ export function createView<T extends Schema>(
                 <Dynamic
                   component={view[part().step]}
                   {...({
-                    question: exercise.question,
+                    question: exercise().question,
                     state: part().state,
-                    previous: exercise.attempt.slice(0, i()).toReversed() as any,
-                    correct: part().correct,
-                    score: part().score,
+                    previous: exercise().attempt.slice(0, i()).toReversed() as any,
                   } satisfies Props<T, K> as ComponentProps<View<T>[K]>)}
                 />
                 <Show when={!part().state && validated().success}>
@@ -221,7 +221,6 @@ export function createView<T extends Schema>(
             )
           }}
         </For>
-        <pre>{JSON.stringify({ ...exercise }, null, 2)}</pre>
       </Loading>
     )
   }