From b3917dc7563159e8f7d3e7fcd5c94c69eb2bf3f0 Mon Sep 17 00:00:00 2001
From: Michael Zhang <mail@mzhang.io>
Date: Sun, 29 Aug 2021 02:59:56 -0500
Subject: [PATCH] change up the schema a little bit

---
 material/fp-datatypes.yml            |  8 +++-----
 material/fp-function.yml             |  8 +++-----
 materialdb/db/page.ts                |  9 +++++++++
 materialdb/index.ts                  |  3 +++
 materialdb/page.ts                   |  2 ++
 web/src/lib/MasteryDemo.svelte       | 17 ++++++++++++++++-
 web/src/lib/exercise/Exercise.svelte | 14 ++++++++++++++
 web/src/lib/exercise/maskExercise.ts |  9 +++++++++
 web/src/routes/__layout.svelte       |  4 ++++
 9 files changed, 63 insertions(+), 11 deletions(-)
 create mode 100644 web/src/lib/exercise/Exercise.svelte
 create mode 100644 web/src/lib/exercise/maskExercise.ts

diff --git a/material/fp-datatypes.yml b/material/fp-datatypes.yml
index ef6dadc..b247e21 100644
--- a/material/fp-datatypes.yml
+++ b/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
+    props:
+      choices:
+        - foo: bar
diff --git a/material/fp-function.yml b/material/fp-function.yml
index 2d0e6d9..ad6cb94 100644
--- a/material/fp-function.yml
+++ b/material/fp-function.yml
@@ -41,8 +41,6 @@ exercises:
     concepts:
       - fp-function
 
-    graders:
-      ocaml:
-        style: multipleChoice
-        props:
-          foo: bar
+    props:
+      choices:
+        - foo: bar
diff --git a/materialdb/db/page.ts b/materialdb/db/page.ts
index a3d251a..db50d8d 100644
--- a/materialdb/db/page.ts
+++ b/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[];
 }
diff --git a/materialdb/index.ts b/materialdb/index.ts
index 933d896..97b1d9e 100644
--- a/materialdb/index.ts
+++ b/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();
 
diff --git a/materialdb/page.ts b/materialdb/page.ts
index a77bae5..1fa9a16 100644
--- a/materialdb/page.ts
+++ b/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[];
 };
 
diff --git a/web/src/lib/MasteryDemo.svelte b/web/src/lib/MasteryDemo.svelte
index 3fa5d65..a68b2ae 100644
--- a/web/src/lib/MasteryDemo.svelte
+++ b/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}
diff --git a/web/src/lib/exercise/Exercise.svelte b/web/src/lib/exercise/Exercise.svelte
new file mode 100644
index 0000000..774e3a1
--- /dev/null
+++ b/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}
diff --git a/web/src/lib/exercise/maskExercise.ts b/web/src/lib/exercise/maskExercise.ts
new file mode 100644
index 0000000..8b57c9f
--- /dev/null
+++ b/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 {};
+}
diff --git a/web/src/routes/__layout.svelte b/web/src/routes/__layout.svelte
index f23527d..2dd4f96 100644
--- a/web/src/routes/__layout.svelte
+++ b/web/src/routes/__layout.svelte
@@ -60,6 +60,10 @@
     .content-wrap {
       border-top: 10px solid #c00;
       padding-bottom: $footer-height;
+
+      > .container {
+        padding-bottom: 36px;
+      }
     }
   }