change up the schema a little bit

material/fp-datatypes.yml

@@ -11,8 +11,6 @@ exercises:
     description: |
       Which of the following can be described as a _function_?
 
-    graders:
-      ocaml:
-        style: multipleChoice
     props:
-          foo: bar
+      choices:
+        - foo: bar

material/fp-function.yml

@@ -41,8 +41,6 @@ exercises:
     concepts:
       - fp-function
 
-    graders:
-      ocaml:
-        style: multipleChoice
     props:
-          foo: bar
+      choices:
+        - foo: bar

materialdb/db/page.ts

@@ -22,6 +22,15 @@ export class Exercise extends Model {
   @Column(DataType.STRING)
   public name: string;
 
+  @Column(DataType.STRING)
+  public description: string;
+
+  @Column(DataType.STRING)
+  public style: string;
+
+  @Column(DataType.JSON)
+  public props: any;
+
   @HasMany(() => Grader)
   public graders: Grader[];
 }

materialdb/index.ts

@@ -42,6 +42,9 @@ async function loadPageIntoDb(name: string): Promise<void> {
     let exercise = new Exercise({
       page_slug: slug,
       name: ex_cfg.name,
+      style: ex_cfg.style,
+      props: ex_cfg.props,
+      description: ex_cfg.description,
     });
     await exercise.save();
 

materialdb/page.ts

@@ -9,7 +9,9 @@ export class Page {
 
 export class Exercise {
   public name: string;
+  public style: string;
   public description: string;
+  public props: any;
   public graders?: Grader[];
 };
 

web/src/lib/MasteryDemo.svelte

@@ -1,5 +1,20 @@
 <script lang="ts">
   import MultipleChoice from "$lib/exercise/MultipleChoice.svelte";
+  import Exercise from "$lib/exercise/Exercise.svelte";
+
+  let state = "loading";
+  let exercise = null;
+  
+  (async function() {
+    let resp = await fetch("/api/recommendExercise");
+    let body = await resp.json();
+    exercise = body.exercise;
+    state = "finished";
+  })();
 </script>
 
-<MultipleChoice />
+{#if state == "loading"}
+  loading...
+{:else}
+  <Exercise exercise={exercise} />
+{/if}

web/src/lib/exercise/Exercise.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import MultipleChoice from "./MultipleChoice.svelte";
+
+  export let exercise;
+</script>
+
+{JSON.stringify(exercise)}
+{exercise.style}
+
+{#if !exercise}
+  loading
+{:else if exercise.style == "multipleChoice"}
+  <MultipleChoice />
+{/if}

web/src/lib/exercise/maskExercise.ts

@@ -0,0 +1,9 @@
+// mask the full exercise object to only the part that the client needs to see
+// in order to present it to the user (so the user can't just peek into network
+// transactions to see what the correct answer is)
+
+import type { Exercise } from "materialdb/db";
+
+export async function maskExercise(exercise: Exercise): Promise<any> {
+  return {};
+}

web/src/routes/__layout.svelte

@@ -60,6 +60,10 @@
     .content-wrap {
       border-top: 10px solid #c00;
       padding-bottom: $footer-height;
+
+      > .container {
+        padding-bottom: 36px;
+      }
     }
   }