feat(general): initialize default model

babel.config.js

@@ -3,7 +3,8 @@ module.exports = {
   plugins: [
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-proposal-export-default-from',
-    '@babel/plugin-proposal-export-namespace-from'
+    '@babel/plugin-proposal-export-namespace-from',
+    '@babel/plugin-transform-runtime'
   ],
   ignore: ['node_modules', 'packages/**/lib'],
   sourceMaps: true

package.json

@@ -17,6 +17,7 @@
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-proposal-export-default-from": "^7.0.0",
     "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@pie-framework/build-helper": "^3.1.1",

packages/calculator/README.md

@@ -0,0 +1 @@
+# @pie-element/calculator

packages/calculator/configure/src/defaults.js

@@ -0,0 +1,3 @@
+export default {
+  mode: 'basic',
+};

packages/calculator/configure/src/index.js

@@ -3,7 +3,14 @@ import ReactDOM from 'react-dom';
 import Main from './main';
 import { ModelUpdatedEvent } from '@pie-framework/pie-configure-events';
 
-export default class extends HTMLElement {
+import defaults from './defaults';
+
+export default class Calculator extends HTMLElement {
+  static createDefaultModel = (model = {}) => ({
+    ...defaults,
+    ...model,
+  });
+
   constructor() {
     super();
     this.onModelChanged = this.onModelChanged.bind(this);

packages/categorize/configure/src/defaults.js

@@ -0,0 +1,44 @@
+export default {
+  choices: [
+    {
+      id: '0',
+      content: '<span mathjax="" data-latex="">420\\text{ cm}=4.2\\text{ meters}</span>'
+    },
+    {
+      id: '1',
+      content: '<span mathjax="" data-latex="" data-raw="3.4\\text{ kg}=350\\text{ g}">3.4\\text{ kg}=340\\text{ g}</span>'
+    },
+  ],
+  categories: [
+    {
+      id: '0',
+      label: 'Equivalent',
+      choices: [
+        {
+          id: '0',
+          content: '<span mathjax="" data-latex="">420\\text{ cm}=4.2\\text{ meters}</span>'
+        },
+      ]
+    },
+    {
+      id: '1',
+      label: '<b>NOT </b>equivalent',
+      choices: [
+        {
+          id: '1',
+          content: '<span mathjax="" data-latex="">3.4\\text{ kg}=340\\text{ g}</span>'
+        },
+      ]
+    }
+  ],
+  correctResponse: [
+    {
+      category: '0',
+      choices: ['0']
+    },
+    {
+      category: '1',
+      choices: ['1']
+    }
+  ],
+};

packages/categorize/configure/src/index.js

@@ -7,7 +7,14 @@ import {
   InsertImageEvent
 } from '@pie-framework/pie-configure-events';
 
+import defaults from './defaults';
+
 export default class CategorizeConfigure extends HTMLElement {
+  static createDefaultModel = (model = {}) => ({
+    ...defaults,
+    ...model,
+  });
+
   set model(m) {
     this._model = m;
     this.render();

packages/categorize/controller/src/defaults.js

@@ -0,0 +1,31 @@
+export default {
+  choices: [
+    {
+      id: '0',
+      content: '420 cm = 4.2 meters'
+    },
+    {
+      id: '1',
+      content: '3.4 kg = 340 g'
+    },
+  ],
+  categories: [
+    {
+      id: '0',
+      label: 'Equivalent',
+    },
+    {
+      id: '1',
+      label: '<b>NOT </b>equivalent',
+    }
+  ],
+  config: {
+    choices: {
+      columns: 2,
+      position: 'below',
+    },
+    categories: {
+      columns: 2
+    }
+  }
+};

packages/categorize/controller/src/index.js

@@ -1,5 +1,6 @@
 import { buildState, score } from '@pie-lib/categorize';
 import { getFeedbackForCorrectness } from '@pie-lib/feedback';
+import defaults from './defaults';
 import debug from 'debug';
 const log = debug('@pie-element:categorize:controller');
 
@@ -33,6 +34,14 @@ export const getCorrectness = (question, session, env) => {
   });
 };
 
+export const createDefaultModel = (model = {}) =>
+  new Promise(resolve => {
+    resolve({
+      ...defaults,
+      ...model,
+    })
+  });
+
 export const model = (question, session, env) =>
   new Promise(resolve => {
     const correctPromise = getCorrectness(question, session, env);

packages/extended-text-entry/configure/src/defaults.js

@@ -0,0 +1,3 @@
+export default {
+  prompt: 'This is the question prompt',
+};

packages/extended-text-entry/configure/src/index.js

@@ -3,14 +3,21 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Root from './root';
 
+import defaults from './defaults';
+
 const csToUi = cs => {};
 /**
  *
  * @param
  * {"{"width":"200px","height":"100px","disabled":true,"mode":"evaluate","feedback":{"type":"default","default":"Your answer has been submitted","customFeedback":"<div>Thank you very much</div>"},"id":"1","element":"extended-text-entry","value":"<div>asrt</div>","mathEnabled":false}"} ui
  */
 const uiToCs = ui => {};
-export default class extends HTMLElement {
+export default class ExtendedTextEntry extends HTMLElement {
+  static createDefaultModel = (model = {}) => ({
+    ...defaults,
+    ...model,
+  });
+
   set model(m) {
     this._model = m;
     this.render();

packages/extended-text-entry/controller/src/defaults.js

@@ -0,0 +1,4 @@
+export default {
+  prompt: '<div>This is the question prompt</div>',
+  width: '500px',
+};

packages/extended-text-entry/controller/src/index.js

@@ -2,6 +2,17 @@ import debug from 'debug';
 const log = debug('@pie-element:extended-text-entry:controller');
 import { getFeedback } from '@pie-lib/feedback';
 
+import defaults from './defaults';
+
+export async function createDefaultModel(model = {}) {
+  log('[createDefaultModel]', model);
+
+  return {
+    ...defaults,
+    ...model,
+  };
+}
+
 export async function model(model, session, env) {
   log('[model]', model);
 

packages/function-entry/configure/src/defaults.js

@@ -0,0 +1,4 @@
+export default {
+  equation: '3x+2',
+  showFormattingHelp: true,
+};

packages/function-entry/configure/src/index.js

@@ -4,9 +4,15 @@ import Configure from './configure';
 import { ModelUpdatedEvent } from '@pie-framework/pie-configure-events';
 import debug from 'debug';
 
+import defaults from './defaults';
+
 const log = debug('pie-elements:function-entry:configure');
 
 export default class FunctionEntryConfigure extends HTMLElement {
+  static createDefaultModel = (model = {}) => ({
+    ...defaults,
+    ...model,
+  });
 
   constructor() {
     super();

packages/function-entry/controller/src/defaults.js

@@ -0,0 +1,4 @@
+export default {
+  equation: '3x+2',
+  showFormattingHelp: true,
+};

packages/function-entry/controller/src/index.js

@@ -2,6 +2,8 @@ import debug from 'debug';
 import mathjs from 'mathjs';
 import { getFeedbackForCorrectness } from '@pie-lib/feedback';
 
+import defaults from './defaults';
+
 const log = debug('@pie-element:function-entry:controller');
 
 const process = v => mathjs.simplify(v ? v.trim() : '');
@@ -14,6 +16,15 @@ const isResponseCorrect = (correctResponse, value) => {
   return processedValue.equals(cr);
 };
 
+export function createDefaultModel(model = {}) {
+  return new Promise(resolve => {
+    resolve({
+      ...defaults,
+      ...model,
+    });
+  });
+}
+
 export function model(question, session, env) {
   return new Promise(resolve => {
     const { showFormattingHelp, equation, feedback } = question;

packages/inline-choice/configure/src/defaults.js

@@ -0,0 +1,24 @@
+export default {
+  choices: [
+    {
+      correct: true,
+      value: 'sweden',
+      label: 'Sweden'
+    },
+    {
+      value: 'iceland',
+      label: 'Iceland',
+      feedback: {
+        type: 'default'
+      }
+    },
+    {
+      value: 'finland',
+      label: 'Finland',
+      feedback: {
+        type: 'custom',
+        value: 'Nokia was founded in Finland.'
+      }
+    }
+  ]
+};

packages/inline-choice/configure/src/index.js

@@ -5,7 +5,14 @@ import ReactDOM from 'react-dom';
 import Root from './root';
 import { choiceUtils as utils } from '@pie-lib/config-ui';
 
-export default class extends HTMLElement {
+import defaults from './defaults';
+
+export default class InlineChoice extends HTMLElement {
+  static createDefaultModel = (model = {}) => utils.normalizeChoices({
+    ...defaults,
+    ...model,
+  });
+
   constructor() {
     super();
     this.onModelChanged = this.onModelChanged.bind(this);

packages/inline-choice/controller/src/defaults.js

@@ -0,0 +1,16 @@
+export default {
+  choices: [
+    {
+      value: 'sweden',
+      label: 'Sweden'
+    },
+    {
+      value: 'iceland',
+      label: 'Iceland',
+    },
+    {
+      value: 'finland',
+      label: 'Finland',
+    }
+  ]
+};

packages/inline-choice/controller/src/index.js

@@ -1,9 +1,20 @@
 import debug from 'debug';
 
+import defaults from './defaults';
+
 const log = debug('pie-element:inline-choice:controller');
 
 /** build a ui model to work with @pie-ui/inline-choice */
 
+export function createDefaultModel(model = {}) {
+  return new Promise(resolve => {
+    resolve({
+      ...defaults,
+      ...model
+    });
+  });
+}
+
 export function model(question, session, env) {
   return new Promise(resolve => {
     const getResult = () => {

packages/match/configure/src/defaults.js

@@ -0,0 +1,17 @@
+export default {
+  rows: [
+    {
+      id: 1,
+      title: 'Question Text 1',
+      values: [false, false]
+    },
+    {
+      id: 2,
+      title: 'Question Text 2',
+      values: [false, false]
+    },
+  ],
+  layout: 3,
+  headers: ['Column 1', 'Column 2', 'Column 3'],
+  responseType: 'radio',
+};

packages/match/configure/src/index.js

@@ -8,9 +8,16 @@ import {
 } from '@pie-framework/pie-configure-events';
 import debug from 'debug';
 
+import defaults from './defaults';
+
 const log = debug('pie-elements:match:configure');
 
 export default class MatchConfigure extends HTMLElement {
+  static createDefaultModel = (model = {}) => ({
+    ...defaults,
+    ...model,
+  });
+
   constructor() {
     super();
   }

packages/match/controller/src/defaults.js

@@ -0,0 +1,18 @@
+export default {
+  config: {
+    rows: [
+      {
+        id: 1,
+        title: 'Question Text 1',
+        values: [false, false]
+      },
+      {
+        id: 2,
+        title: 'Question Text 2',
+        values: [false, false]
+      },
+    ],
+    layout: 3,
+    headers: ['Column 1', 'Column 2', 'Column 3'],
+  }
+};